Intervista a Paolo Console, che spiega in modo chiaro e semplice i punti essenziali per creare un blog interessante e le strategie per aumentare il link popularity e le visite.
 

 
Fonte: Blogging Groover: Metodi per Incrementare Visite e Lettori

WordPress dalla versione 2.7 supporta il threading dei commenti, ovvero l’incapsulamento di tutte le discussioni di un articolo. Il tag wp_list_comments() si prende carico della gestione delle liste nidificate, delle classi associate ad ogni livello di commento, di predisporre i link giusti e di recuperare i contenuti dei commenti. Il problema nasce quando si vuole personalizzare la modalità di visualizzazione dei commenti. In questo caso è necessario utilizzare l’opzione di callback che viene fornito nella lista degli argomenti di wp_list_comments().

Un callback è un’istruzione per eseguire un’altra funzione definita. Nel nostro caso la useremo per personalizzare il codice HTML dei commenti, pur mantenendo la possibilità di utilizzare il threading.
 

Definiamo il callback

 
Per prima cosa definiamo la nostra funzione di callback ed inseriamola nel file function.php (ovviamente ricordatevi si fare una copia di backup).
 

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26

function miotema_comment($comment, $args, $depth) {
	$GLOBALS['comment'] = $comment;
?>
	<li <?php comment_class(); ?> id="li-comment-<?php comment_ID() ?>">
		<div id="comment-<?php comment_ID(); ?>">
			<div class="comment-author vcard">
				<?php echo get_avatar( $comment->comment_author_email, 48 ); ?>
				<?php printf(__('<cite class="fn">%s</cite> <span class="says">says:</span>'), get_comment_author_link()) ?>
			</div>
			<?php if ($comment->comment_approved == '0') : ?>
				<em><?php _e('Il tuo commento è in attesa di moderazione.') ?></em>
				<br />
			<?php endif; ?>
 
			<div class="comment-meta commentmetadata">
				<a href="<?php echo htmlspecialchars( get_comment_link( $comment->comment_ID ) ) ?>"><?php printf(__('%1$s at %2$s'), get_comment_date(),  get_comment_time()) ?></a>
				<?php edit_comment_link(__('(Edit)'),'  ','') ?>
			</div>
                        </br></br>
			<?php comment_text() ?>
			<div class="reply">
				<?php comment_reply_link(array_merge( $args, array('depth' => $depth, 'max_depth' => $args['max_depth']))) ?>
			</div>
		</div>
<?php
}

 
Vediamo quale funzione entra in gioco.
 
comment_class()
Questa funzione crea un elenco di classi come class = “classe1 class2 class3″ per identificare i commenti pari/dispari, la profondità attuale dei commenti o altro.
 
comment_ID()
L’ID è il numero univoco del commento in corso.
 
get_avatar()
Utilizza l’e-mail per associare un gravatar. Primo parametro deve essere l’oggetto $ comment, il secondo è il formato per l’avatar, l’ultimo è l’URL di un avatar di default (deve essere URL completo).
 
get_comment_link()
Ottiene il link al commento in corso.
 
edit_comment_link()
Ottiene il link per modificare il commento corrente.
 
comment_text()
Ottiene il testo del il commento in corso.
 
comment_reply_link()
Ottiene il link per rispondere al commento in corso.
 

Agganciamo la nostra funzione

 
Il layout che andiamo a ridefinire è quello generato proprio da wp_list_comments(). Per fare ciò è sufficiente fornire il parametro “callback=nome_funzione” per indicare a WordPress di ignorare il normale comportamento della funzione e utilizzare invece una nostra versione personalizzata.
 
Nel nostro file comments.php andiamo dunque a modificare wp_list_comments() in questo modo:
 

1

wp_list_comments ('callback=miotema_comment');

 
Ovviamente è possibile utilizzare un foglio di stile CSS per rendere i commenti gradevoli da vedere:  per esempio io ho utilizzato questo metodo e questo è il risultato:
 

 
Tutto qui. Come sempre lasciate dei commenti o magari mandatemi una e-mail. Anche eventuali suggerimenti o consigli sono sempre graditi.

Per la visualizazione degli articoli più popolari uso il plugin WordPress.com Popular Post. Tale plugin permette molte personalizzazioni, ma manca la possibilità di poter visualizzare le immagini riferite ai post. L’idea di fondo parte da questo articolo che spiega come aggiungere delle immagini all’elenco dei post con l’ausilio di uno script esterno. Senza utilizzare script esterni, possiamo, invece, sfruttare le nuove features di WordPress 3.x.

Nel momento in cui vogliamo il percorso dell’immagine associata al post il programma procederà in questo modo:

• cerca la thumbnail associata al post;
• nel caso in cui il tema non supporti tale funzione o non si è inserita in fase di creazione del post, cerca la prima immagine nel post;
• nel caso in cui il post non abbia neanche una immagine, me associa una di default.

Vediamo come:

1) Modifica del plugin

Andando in Plugin->Editor selezioniamo il plugin WPPP e quindi il file wppp.php.

Per prima cosa troviamo il codice:

1
2
3
4
5
6
7

// Replace format with data
$replace = array(
'%post_permalink%' => get_permalink( $post['post_id'] ),
'%post_title%' => esc_html( $this->truncateText( $post['post_title'], $instance['title_length'] ) ),
'%post_title_attribute%' => esc_attr( $post['post_title'] ),
'%post_views%' => number_format_i18n( $post['views'] )
);

e aggiungiamo la seguente riga:

1

$replace['%post_thumb%']=return_post_image($post['post_id']);

A questo punto dobbiamo inserire la funzione return_post_image.

2) Modifica del file function.php

Nel file function.php aggiungiamo:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34

/**
* Capture the first image from the post.
* @global object $post
* @global object $posts
* @return string
*/
function theme_function_capture_first_image($p=null) {
$firstImg = '';
if (empty($p)) {
global $post, $posts;
$firstImg = '';
ob_start(); ob_end_clean();
$output = preg_match_all('//i', $post->post_content, $matches);
$firstImg = $matches[1][0];
} else {
$output = preg_match_all('//i', $p->post_content, $matches);
$firstImg = $matches[1][0];
}
return $firstImg;
}
 
// ritorna una immagine associata al post: thumb, prima immagine del post, default
 
function return_post_image($post,$dim) {
$imgpath = '';
if (empty($dim)) $dim = array(60,60);
$imgpath=get_the_post_thumbnail($post, $dim );
if (empty($imgpath)) {
$imgpath = theme_function_capture_first_image(get_post($post));
if (empty($imgpath)) $imgpath = get_bloginfo('template_directory').'/images/default_pp.gif';
$imgpath = '<img src="' . $imgpath . '" alt="'. $title .'" />';
}
return $imgpath;
}

N.B.: Di default la dimensione dell’imamgine è di 60×60. Nel caso in cui noi volessimo una immagine di dimensione diversa, per esempio 32×32, basta modificare la chiamata alla funzione nel file wppp.php in questo modo:

1

replace['%post_thumb%']=return_post_image($post['post_id'], array(32,32));

Un’altra modifica, in futuro, potrebbe essere fare in modo di passare la dimensione dei thumbs nel momento in cui viene richiamato il plugin.

A questo punto quando richiamiamo il plugin avremo a possibilità di inserire il tag %post_thumb% che ci darà l’<img> riferita all’immagine associata al post.

3) il CSS per lo stile

Concludiamo con il css per lo stile dell’elenco dei post, che nel mio caso è:

1
2
3
4
5
6
7
8
9
10
11
12
13

/*Popular Posts*/
 
ul.wppp_list li {
min-height:65px;
display:block;
list-style:none outside none;
}
 
ul.wppp_list img {
float:left;
margin-right:4px;
border:2px solid #ECEFF5;
}

Ed ecco il risultato finale:

Enjoy it!

Aggiornando la piattaforma alla versione 3.x di WordPress, il tema che avete installato precedentemente sicuramente non conterrà le nuove funzioni di personalizzazione dell’intestazione e dello sfondo del blog. Grazie a semplici modifiche ai files del tema è possibile inserire, lato pannello di amministrazione, queste funzioni in modo da modificare l’aspetto del blog senza dover agire sul codice del tema stesso.

la Testata

Tra le novità di WordPress 3.x vi è il pannello per la personalizzazione delle intestazioni. E’ possibile accedere alle intestazioni personalizzate abilitando la voce nel pannello di amministrazione di WordPress 3.x anche se il vostro tema non lo supporta nativamente.
Per fare ciò basta inserire nel file function.php le seguenti linee di codice:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22

define( 'HEADER_IMAGE', '%s/images/logo.jpj' ); //logo di defaul
define( 'HEADER_IMAGE_WIDTH', apply_filters( '', 948 ) ); // Larghezza del logo
define( 'HEADER_IMAGE_HEIGHT', apply_filters( '', 180 ) ); // Altezza del logo
define( 'NO_HEADER_TEXT', true );
add_custom_image_header( '', 'admin_header_style' ); // Abilita la voce nel pannello di controllo 
 
// Foglio di stile per il pannello amministratore
if ( ! function_exists( 'admin_header_style' ) ) :
function admin_header_style() {
?>
<style type="text/css">
#headimg {
height: <?php echo HEADER_IMAGE_HEIGHT; ?>px;
width: <?php echo HEADER_IMAGE_WIDTH; ?>px;
}
#headimg h1, #headimg #desc {
display: none;
}
</style>
<?php
}
endif;

Nel pannelo di controllo nel menu “aspetto” comparirà la voce “Testata”.

Selezionandola, comparirà la nuova pagina di amministrazione per la scelta delle immagini da inserire nell’header del blog.
Una volta caricate le immagini possiamo anche decidere di visualizzarle in maniera random.

Nel header.php basta inserire la seguente linea di codice:

1

<img src="<?php header_image(); ?>" width="<?php echo HEADER_IMAGE_WIDTH; ?>" height="<?php echo HEADER_IMAGE_HEIGHT; ?>" alt="" />

o anche

1

<div id="header-container" style="background: url('<?php echo header_image(); ?>');">

lo Sfondo

Altra modifica possibile per utilizzare le nuove funzioni di WordPress 3.x è la possibilità di personalizza lo sfondo

Aggiungendo nel file function.php la linea di codice:

1

add_custom_background();

nel pannello di amministrazione comparirà la voce “Sfondo” nel menù “Aspetto”:

Selezionandola, comparirà la nuova pagina di amministrazione per la scelta dello sfondo da inserire nel blog.

Enjoy it and.. see you soon!

WordPress include un meccanismo semplice per introdurre dei menù di navigazione personalizzati nel proprio tema. Per incorporare nel tema il supporto al menù, è necessario aggiungere poche righe di codice. Innanzitutto nel file functions.php del tema, si deve scrivere una funzione per registrare il nome dei menù che si vogliono creare. Il nome sarà quello che comparirà nella pagina del pannello di amministrazione di WordPress alla pagina Aspetto->Menu.

Per esempio, tramite questo codice, nel box “Posizione dei temi” comparirà la posizione “Menu Intestazione”:

function register_my_menus() {
  register_nav_menus(
    array('menu-intestazione' => __( 'Menu Intestazione' ))
  );
}

questo codice, invece, farà comparire due nuove posizioni:

function register_my_menus() {
register_nav_menus(
  array(
    'menu-intestazione' => __( 'Menu Intestazione' ),
    'menu-extra' => __( 'Menu Extra' ))
  );
}

Per assicurarsi che il tema attivi l’opzione dei menù personalizzati, è necessario aggiungere anche questa riga che comunica al tema di eseguire la funzione “register_my_menus”:

add_action( 'init', 'register_my_menus' );

A questo punto resta da inserire nel tema la posizione in cui vogliamo che il menù (o i vari menù) siano visualizzati. Per far questo si deve aprire nell’editor il file del template corrispondente alla posizione desiderata e inserire una chiamata alla funzione wp_nav_menu() per ciascuna posizione. Per esempio, si vuole posizionare il menu “Menu Intestazione”, precedentemente registrato nel file header.php, in modo che compaia nella testata del tema. Il codice da inserire è il seguente:

<?php wp_nav_menu(  array( 'theme_location' => 'menu-intestazione' ));  ?>

IMPORTANTE: il nome associato a theme_location deve essere lo stesso inserito in functions.php.

Questa funzione crea una lista del tipo

<ul> 
  <li></li>
  <li></li>
</ul>

Se si aggiunge alla funzione wp_nav_menu() il parametro “container_class”, si può specificare la classe associata al menù:

<?php wp_nav_menu(array('theme_location' => 'menu-intestazione',
        'container_class' => 'classe_menu_intestazione'));  ?>

In questo modo si può personalizzare la grafica del menù specificando nel CSS gli attributi della classe “classe_menu_intestazione”.

Oppure, come nel mio caso, se già esiste nel foglio di stile una classe per i menù tradizionali, basta sostituire il codice all’interno, per esempio, del

<div id=”menu”>......</div>

richiamando la funzione

<?php wp_nav_menu(  array( 'theme_location' => 'menu-intestazione' ));  ?>

Enjoy it and.. see you soon!

Ormai del mio tema per wordpress, che ho scaricato tra quelli gratuiti nel lontano 2009, ci sta ben poco. Nel corso dei mesi tante sono state le modifiche: supporto ai plugin, ai widget, agli script in JQuery, modifiche in php che adesso ad elencarli tutti ho davvero tanta difficoltà. Wordpress si aggiorna, introduce nuove funzioni e nuove possibilità di fare blogging, ma il mio tema “no, non lo voglio cambiare!”.

Così, armato di santa pazienza, googlando un pò in giro, ecco che mi ritrovo per l’ennesima volta a far modifiche.

Vediamo la prima: la funzione post thumbnail (miniature).

Le icone che vedere associate agli articoli di questo blog sono in realtà associate alle categorie (uso il plugin Category Icons). Pertanto esse non sono direttamente legate al contenuto dell’articolo. Stanco della visualizzazione testuale a lista dei post correlati ho installato il plugin Related Posts Thumbnails che crea un riquadro per ogni articolo correlato inserendo una immagine contenuta nell’articolo stesso. Problema: e se nel contenuto non vi sono inserite delle immagini? Il plugin usa la minitura associata all’articolo!

Per attivare la gestione lato backend della “miniatura articolo” è sufficiente editare il file functions.php e inserire le seguenti linee di codice che, nell’ottica di compatibilità e stabilità, sono:

if ( function_exists( 'add_theme_support' ) ) {
    add_theme_support( 'post-thumbnails' );
}

Fatto questo, entrando nell’amministrazione e andando nella modifica di un post, troveremo sulla sidebar destra un nuovo pannello:

Con

1

<!--?php get_post_thumbnail();?-->

recuperiamo l’url della nostra thumbnail e possiamo tranquillamente inserirlo nel loop in questo modo ad esempio:

1

<div><img src="<?php get_post_thumbnail(); ?>" alt="<?php the_title(); ?>" /></div>

Enjoy it and.. see you soon!

Di cosa stiamo parlando?

RSS esattamente significa Really Simple Syndication o Rich Site Summary e non è altro che una serie di formati espressi in Xml, che dalla forma più semplice, contengono una lista (i cosiddetti feed) di titoli, brevi sommari e link. L’RSS è stato “inventato” originariamente da Netscape alla fine degli anni ’90, al fine di creare uno standard per la condivisione di notizie e news provenienti da altri portali. Rimaneggiato nel tempo, oggi trova spazio e grande uso nel mondo dei Blogger.

I feed RSS rappresentano un alleato prezioso per coloro che desiderano tenersi costantemente aggiornati, raccogliendo informazioni da diversi siti. Se, ad esempio, ci si collega spesso a siti che pubblicano notizie di attualità, con i feed RSS si possono raccogliere rapidamente, in un’unica “finestra”, tutte le notizie più recenti. Queste appaiono normalmente in forma breve, con un titolo e poche righe di testo. Per approfondire, si può cliccare sul collegamento ipertestuale (“link”) che rinvia alla pagina con il testo completo.

Quali sono i vantaggi per l’utente?

Attraverso i programmi Newsreader l’utente può navigare tra i siti Web di interesse in modo diverso rispetto a quanto avviene con un normale browser:

• L’utente non deve accedere ai diversi siti di interesse per vedere se vi sono delle nuove notizie. Questo tipo di attività viene svolta dal Newsreader, che segnala le varie novità e propone all’utente i contenuti aggiornati.
• Non è necessario aprire ogni pagina di un sito per capire se il contenuto sia interessante. Sulla base del titolo e del sottotitolo l’utente può valutare se la notizia contenga informazioni che lo interessano e solo in caso affermativo accedere alla pagina Web vera e propria. In questo modo si risparmia molto tempo nella navigazione.
• A differenza delle tradizionali Newsletter, l’utente non è più obbligato ad abbonarsi al servizio lasciando il proprio indirizzo di posta elettronica, riducendo così i rischi di recapito di posta indesiderata (spam);
• Ormai tutte le principali testate giornalistiche internazionali, dal New York Times allo Spiegel, dalla Reuters alla BBC mettono a disposizione degli utenti gratuitamente le ultime notizie come RSS – Feeds.
• Gli RSS-Feeds sono messi a disposizione della collettività e possono essere caricati all’interno di qualunque sito. In questo modo viene facilitata sensibilmente la diffusione delle notizie nel Web.

Come utilizzare i Feed RSS?

Per utilizzare i feed RSS è necessario:

• che il sito di proprio interesse pubblichi le novità in formato RSS (spesso la presenza di RSS viene segnalata da un simbolo come quello pubblicato in questa pagina);
• un “aggregatore” di RSS. Quest’ultimo può essere un software che va installato nel proprio personal computer oppure una applicazione condivisa in Rete. Va segnalato che le versioni più recenti dei browser (cioè il software che si utilizza normalmente per navigare in Rete, come Internet Explorer e Firefox, Opera, Safari) hanno integrato gli aggregatori al proprio interno

Il video seguente spiega chiaramente come utilizzare gli aggregatori di RSS on line.