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 norma non scrivo articoli sui plugin di WordPress, visto che googlando si trovano migliaia di post su questo tema, però il plugin Category Icons questa volta mi è piaciuto moltissimo, poichè è interessante l’idea di associare un articolo  alla categoria attraverso una immagine: specie nei blog con tante categorie, questo plugin può aumentare di molto la visibilità di tutti gli articoli.

Ma entriamo nel vivo….

Category Icons, qui il sito di riferimento, permette di associare delle icone alle gategorie del blog e di visualizzarle lì dove richiamate. L’interfaccia grafica per il setup è molto intuitiva e l’autore, nel suo sito, spiega in maniera molto chiara come inserire il codice all’interno delle pagine del vostro tema.

Le icone vengono carica sul server andando dal menù “Icone” e ad ogni categoria può essere associata una icona piccola ed una grande.
Il codice, per visualizzare le icone, può essere inserito in maniera automatica (menù “Opzioni” -> “Template Tags”) o manuale (menù “Template Tags”); in quest’ultimo caso l’autore ci suggerisce il file php da modificare fornendo addirittura le coordinate espesse in riga e colonna.
Con il plugin è compreso anche un widget delle categorie da personalizzare, che visualizza le icone associate, appunto, alle vostre categorie. Inoltre, sul sito alla voce “Translate the plugin” vi sono altre localizzazioni del plugin incluse quella italiana.

Un consiglio: quando scegliete le immagini fate in modo tale che abbiano la medesima dimensione. Per le immagini piccole, che compaiono nella pagina principale o associate ai permalink degli articoli, ho scelto la dimensione 32×32, mentre per le immagini grandi, che ho inserito nella pagina dell’articolo, ho scelto la dimensione 116×116. Ovviamente le dimensioni scelte dipendono dal vostro tema.

Enjoy it!

Il file .htaccess è uno strumento molto potente, specialmente per chi usa WordPress: fra le tante opzioni, permette di utilizzare permalinks più complessi associati ai post. Il problema è che, a secondo delle diverse strategie dei server host che ospitano i nostri blog, la creazione di questo file può diventare abbastanza complessa.

Nel mio caso, infatti, WordPress non riusciva a creare il file .htaccess, nè tantomeno, forzando con un upload tramite ftp, esso veniva letto in maniera corretta. Ecco la soluzione che ha risolto il  problema sull’host che ospita il mio blog e che utilizza ,come interfaccia utente per il setup ,cPanel.

Accedi al cPanel con il tuo nome utente e password, quindi una volta che hai fatto il login individua il “File Manager”.

L’interfaccia grafica del File Manager è in stile Windows, molto familiare, e permette di gestire  i file sul tuo account di hosting. Clicca sulla icona della cartella public_html e successivamente sulla cartella dove sono salvati i file del WordPress (se diversa da root). Individua quindi l’icona del File Manager che permette di creare un nuovo file.

Cliccando avrai la possibilità di salvare dentro la cartella il file “.htaccess”, all’inizio vuoto, ma con i permessi giusti. Riempi i campi richiesti e crea il file.

A questo punto è possibile aprire il file per poterlo editare (cercare l’icona “edit” selezionando il file .htaccess) e, una volta inseriti i valori suggeriti da Wordpres per l’impostazione dei permalinks, salvarlo.

I permalinks dovrebbero funzionare in maniera corretta.

That’s all folks!

gkv4tbdjfr