Modifiche al tema

Per prima cosa bisogna informare il tema che vogliamo localizzarlo in più lingue. Controlliamo che il tema non sia già predisposto cercando nel file functions.php la stringa load_theme_textdomain

Se il codice è presente sarà tipo questo del tema di default di WordPress:

load_theme_textdomain('kubrick');

Potete decidere di lasciare il nome kubrick oppure sostituirlo con quello del vostro tema o con quello che vi pare. L’importante è ricordarsi che il nome scelto lo useremo all’interno del tema per dire a Poedit quali porzioni di tema vanno tradotte e quali no. Nel mio esempio al posto di kubrick ho usato multilng.

Se il file functions.php non esiste createlo e inseriteci il seguente codice:

<?php load_theme_textdomain('multilng'); ?>

Se invece il file esiste controllate prima che la riga di codice non sia già presente. Se è presente sostituite il nome tra parentesi e virgolette con multilng, se la riga non è presente aggiungetela in questo modo:

<?php
remove_action('wp_head', 'wp_generator');
?>

Diventa così:

<?php
load_theme_textdomain('multilng');
remove_action('wp_head', 'wp_generator');
?>

Adesso dobbiamo assicurarci che Poedit trovi almeno una riga che sia predisposta per la traduzione all’interno del tema. Ad esempio possiamo rendere bilingue un menù della sidebar come il classico Ultimi Commenti che quasi tutti hanno.

Aprite il file sidebar.php con un editor semplice tipo Notepad su Windows e cercate il menù Ultimi Commenti. Troverete qualcosa del genere:

<h2>Ultimi Commenti</h2>

Che sostituirete con:

<h2><?php _e('Latest Comments','mltlng'); ?></h2>

Se il tema che usate era già predisposto come ad esempio kubrick, troverete all’interno già diversi file con php _e. In questo caso forse vi conviene lasciarli e sostituire in tutti gli esempi la parola multilng con quella in uso nel vostro tema.

Nella quarta e ultima parte di questo tutorial vedremo come tradurre il tema con Poedit.

Creare un blog multilingua: [parte 1] [parte 2] [parte 3] [parte 4]

Se è così, se proprio non riuscite a fare a meno di cambiare il look al vostro blog scaricando temi da qualsiasi sito internet, allora questo è il plugin che fa’ per voi.

TAC (Theme Authenticity Checker) è un plugin che controlla che i temi presenti sul blog, anche quelli non attivi, non contengano codice malevolo.

Il plugin cerca prevalentemente codice JavaScript potenzialmente pericoloso e segnala tutti i link verso altri siti contenuti nel tema, anche quelli che riguardano l’autore del tema e che naturalmente per motivi di copyright non è possibile/corretto rimuovere.

Il codice che il plugin segnala come potenzialmente malevolo non è detto che lo sia veramente, potrebbe trattarsi di codice criptato scritto per “beccare” coloro che si appropriano del lavoro altrui rimuovendo i link del copyright. Se il plugin vi segnala codice malevolo avete quindi 2 possibilità: cancellare il tema o eseguire il codice per vedere a cosa porta. Io vi consiglio di tagliare la testa al toro e cancellare il tema.

link → http://builtbackwards.com/projects/tac/

In WordPress le pagine statiche (definizione usata per le pagine differenti dai post, che quindi non vengono mostrate in ordine cronologico) come la pagina dei contatti etc. vengono generate dal file page.php del vostro tema.

È possibile però assegnare ad ogni pagina statica un differente template, ad esempio per fare in modo che una certa pagina statica abbia la pubblicità, i commenti etc.

Per creare una pagina personalizzata basta duplicare la page.php creandone una nuova, salvandola con altro nome, ad esempio page-contatti.php, e inserendo all’inizio:

<?php
/*
Template Name: Pagina Contatti
*/
?>

Adesso potremo modificare questa pagina, ad esempio rimuovendo la pubblicità, quindi caricarla sul server e andare a modificare dal pannello di WordPress la pagina dei contatti, scegliendo il nuovo template personalizzato.

Se ad esempio vogliamo mostrare una differente sidebar in home page, basterà cercare nel file index.php il codice che richiama la sidebar

<?php get_sidebar(); ?>

e sostituirlo con

<?php
if ( is_home() ) { include (TEMPLATEPATH . '/sidebar-2.php'); }
else { include (TEMPLATEPATH . '/sidebar.php'); }
?>

o con

<?php
if ( is_home() ) { include (TEMPLATEPATH . '/sidebar-2.php'); }
else { get_sidebar(); }
?>

Altre condizioni che si possono usare sono:

is_home(), is_category(), is_archive(), is_date(), is_tag(), is_search(), is_single(), is_404(), etc.

Punto esclamativo

Inserendo il punto esclamativo davanti alla condizione questa esclude il tipo di pagina

<?php if (!is_home() ) { ?>
Contenuto da escludere se la pagina è la home page
<?php } ?>

Senza punto esclamativo invece si include il tipo di pagina

<?php if ( is_category() ) { ?>
Contenuto da includere solo nelle categorie
<?php } ?>

Può essere molto utile se ad esempio si vuole mostrare una sidebar differente in home page, basta creare un file sidebar-2.php e richiamarlo nel tema con:

<?php include (TEMPLATEPATH . '/sidebar-2.php'); ?>

al posto del codice che richiama la sidebar nel file index.php.

Includere un file di rotazione banner

Creiamo con un editor di testo semplice come il Blocco Note un file che chiameremo ad esempio adv-post-footer.php per inserire della pubblicità in rotazione alla fine di ogni post, inserendo nel file il seguente codice:

<?php
$rand = rand(1,2);
if ($rand == 1) //Codice 1
print 'CODICE ADV';
elseif ($rand == 2) //Codice 2
print 'CODICE ADV 2';
?>

All’interno di print ” incollate i vostri codici pubblicitari. Per aggiungere un terzo o quarto codice copia-incollate la parte in grassetto per creare un codice 3 e 4, modificando i valori in rand, quindi ad esempio per 3 codici avremo:

<?php
$rand = rand(1,3);
if ($rand == 1) //Codice 1
print 'CODICE ADV';
elseif ($rand == 2) //Codice 2
print 'CODICE ADV 2';
elseif ($rand == 3) //Codice 3
print 'CODICE ADV 3';
?>

Le parti in grassetto evidenziano i parametri da modificare.

Creato il file basterà richiamarlo nel nostro tema, nella posizione in cui vogliamo far apparire la pubblicità.
Nel file che genera il post (generalmente single.php o post.php) richiamiamo il file inserendo il codice:

<?php include (TEMPLATEPATH . '/adv-post-footer.php'); ?>

Per far ciò si può usare il seguente codice:

<?php $posts=query_posts($query_string . 'posts_per_page=10&offset=1'); while (have_posts()) : the_post(); ?>
// Contenuto
<?php endwhile; ?>

O ancora questo, già mostrato in WordPress come CMS: mini loop e thumbnail:

<?php query_posts('cat=0&showposts=10&offset=1‘); ?>
<?php while (have_posts()) : the_post(); ?>
// Contenuto
<?php endwhile; ?>

offset=1 vuol dire che verranno mostrati i post dopo il primo. Aumentando il numero di offset saranno esclusi più articoli.

In particolare illustrerò le funzioni PHP di WordPress che ho usato, senza entrare nel merito del tema e degli stili CSS perché tutti i temi sono differenti e non si può generalizzare, tuttavia se sapete come è fatto il vostro tema dovreste essere in grado di apportare le modifiche descritte.

Questi sono i punti principali delle modifiche:

• aggiungere un mini loop per mostrare l’ultimo post in formato “big”
• aggiungere un mini loop nella colonna di sinistra per i 5 post successivi al “big”
• aggiungere un mini loop nella colonna di destra per mostrare dei post presi da una particolare categoria nascosta
• aggiungere delle miniature (thumbnail) nei vari mini loop

L’ultimo punto, l’aggiunta delle miniature, è facoltativo e dipende dalle vostre abitudini. Se infatti non inserite mai immagini o inserite nei post immagini piccole non ci sono problemi di formattazione. Se diversamente avete creato dei post pensando all’impaginazione a tutta pagina, quindi con immagini di 400 o 500 pixel, queste immagini, anche se “non mostrate” nella parte eccedente, non sono belle da vedere in una colonna da 250 / 300 pixel di larghezza.

La soluzione che vedremo, o meglio le soluzioni che ho usato io, sono l’uso della funzione thumbnail di WordPress per inserire una delle immagini del post (o di altri post) in formato ridotto, e l’inserimento del testo tramite le funzioni the_excerpt e the_content_rss al posto della funzione the_content. Infatti solo quest’ultima funzione preleva anche le immagini dal post, le altre 2 no. Inoltre the_content_rss permette di settare il “taglio” del testo dopo un certo numero di parole.

Loop Regolare

Nella pagina page-index.php del tema, dobbiamo individuare il loop originale e farlo sparire.
Dovrebbe presentarsi come qualcosa del genere:

<?php if ($posts) : foreach ($posts as $post) : start_wp(); ?>
// Contenuto
<?php endforeach; else: ?>
<p><?php _e('Nessun articolo trovato.'); ?></p>
<?php endif; ?>

La prima riga è l’inizio del Loop, al posto di // Contenuto troverete codice vario del vostro tema, e la terza e quinta riga sono la fine del Loop. Questo codice va eliminato tutto, se dopo l’eliminazione, visualizzando la pagina non ricevete errori PHP avete rimosso la giusta porzione di codice.

Per saperne di più sul Loop potete dare un’occhiata a questa pagina su WordPress.org.

Mini Loop

Il Loop di WordPress serve a far ripetere ciclicamente lo stesso codice per un certo numero di volte, per mostrare gli ultimi 10 post il Loop verrà ripetuto 10 volte.

Il mini Loop che ho usato è molto più flessibile di quello originale (naturalmente l’ho trovato con Google, io non sarei capace di scrivere una sola riga di PHP).

Potendo ripetere questo mini Loop tutte le volte che si vuole all’interno della nostra nuova pagina, non ci sono limiti agli utilizzi. Nel mio caso ho ripetuto il mini-loop 3 volte con delle varianti.

L’unica controindicazione di questo mini-loop è stata (nel mio caso) il non riconoscimento del taglio degli articoli che venivano quindi mostrati interamente con tutte le immagini a dimensione reale, ma questo problema l’ho risolto con un po’ di smanettamento:

<?php query_posts('cat=0&showposts=1'); ?>
<?php while (have_posts()) : the_post(); ?>
<h1><a href="<?php the_permalink() ?>" rel="bookmark" title="<?php the_title(); ?>"><?php the_title(); ?></a></h1>
<small><em><?php the_excerpt(); ?></em></small>
<img src="<?php echo get_post_meta( $post->ID, 'thumbnail', true ); ?>" alt="" height="80" />
<?php the_content_rss('', FALSE, '', 65); ?><a href="<?php the_permalink() ?>" rel="bookmark" title="<?php the_title(); ?>">leggi il resto...</a>
<?php endwhile; ?>

Attenzione: la numerazione delle righe che segue è in base a come mostrate sopra, nella realtà le righe sono solo 7.
Le prime 2 righe sono l’inizio del Loop, nella prima riga potete specificare il numero dei post da mostrare (showposts=1), ma sopratutto è possibile scegliere una o più categorie da dove prelevare i post, escludere una o più categorie, pescare uno specifico post o una singola pagina.
La terza e quarta riga mostrano il titolo del post, naturalmente questo codice potete modificarlo a vostro piacere.
La quinta riga estrae il riassunto del post (facoltativo).
Sesta e settima riga servono per visualizzare l’immagine che comunque ci dovremo ricordare di impostare in ogni singolo post (istruzioni sotto). L’anteprima è impostata a 80 pixel in altezza mentre nelle 2 colonne sotto l’ho impostata quadrata a 60×60 pixel.

Ottava e nona riga aggiungono il contenuto del post prelevato tramite Feed RSS, quindi senza formattazione (Il numero 65 indica le parole da mostare, nei post nelle mini colonne ho usato un valore di 40).

Esempi:
cat=0 (post da tutte le categorie)
cat=-1,-2,-3 (post da tutte le categorie tranne la 1, la 2 e la 3)
p=5 (mostra il post con ID 5)
page_id=7 (mostra la pagina con ID 7)
cat=0&showposts=5&offset=1 (nella colonna di sinistra, per evitare di mostrare l’ultimo post 2 volte visto che viene mostrato in alto, si aggiunge offset=1 per mostrare a partire dal penultimo. Se naturalmente in alto mostriamo gli ultimi 3 post dovremo impostare offset=3.

Scegliere l’immagine da mostrare come miniatura

Questa è la parte meno piacevole, perché in ogni singolo post vi dovrete ricordare di impostare un’immagine da mostrare come miniatura. Di buono c’è che potete scegliere una qualsiasi delle immagini del post, e non per forza la prima.

Dopo aver effettuato questa operazione la prima volta, dal secondo post troverete la voce Thumbnail nel menù a tendina, dovrete solo aggiungere l’indirizzo dell’immagine nel campo Valore.

Questo è il tema di Gratisinlinea oggi. Naturalmente nulla impedisce di aggiungere altra “roba” nella home page: ultimi commenti, post più votati, post più visitati, statistiche del blog etc.

link → http://codex.wordpress.org/Template_Tags/query_posts

L’aspetto tipico dei blog, con la home page che contiene gli ultimi TOT articoli in ordine cronologico non si addice a tutti i siti, a volte sarebbe meglio avere delle parti (o zone) con contenuti fissi, o organizzati gerarchicamente. In poche parole alle volte in WordPress si sente la mancanza di funzioni tipiche di software CMS completi come Joomla o Drupal, ma delle modifiche si possono comunque fare, basta usare alcune funzioni e modificare il tema.

WordPress come CMS: spostare il Blog

Se si vuole diversificare la Home page, inserendo qualche contenuto “fisso”, l’ideale è spostare gli ultimi articoli del blog altrove.

Dal pannello di amministrazione di WordPress Scrivete 2 nuove pagine (no post ma pagine) e chiamatele Index e Blog.

Adesso andate nel menù Impostazioni → Lettura e nel menù Visualizzazione pagina iniziale scegliete

• Una pagina statica (selezionata qui sotto)
• Pagina iniziale: Index
• Pagina articoli: Blog

In questo modo abbiamo creato una pagina statica chiamata Blog che contiene i soliti ultimi 10 post in ordine cronologico (la vecchia home del blog), e abbiamo sostituito la pagina iniziale con una pagina statica (Page Index).

Dall’editor di WordPress possiamo editare la nuova home page, aggiungendo testo, immagini e link.
Per chi si accontenta va bene anche così, ma volendo si può andare oltre.

Personalizzare la nuova Home Page

Se vogliamo creare una Home page diversa dai soliti blog, che non sia una semplice pagina di introduzione con testo e immagini, dobbiamo mettere mano al codice del nostro tema, aggiungendo contenuti dinamici.

Prendete la pagina statica del vostro tema (page.php) e fatene una copia salvando la nuova pagina con il nome page-index.php.
All’inizio della nuova pagina aggiungete queste linee di codice:
<?php
/*
Template Name: Page Index
*/
?>

La pagina, una volta caricata sul server, rimarrà inattiva fino a quando non la assoceremo alla pagina statica Index creata precedentemente. Basta modificarla associandole il tema Page Index come si vede nell’immagine sotto.

A questo punto possiamo aggiungere delle funzioni “dinamiche” come ad esempio mostrare i post di una singola categoria, i post preferiti dagli utenti, i post più visti etc.

In un prossimo post illustrerò le modifiche fatte nella home di Gratisinlinea.it, ovvero:

• aggiungere un mini loop per mostrare l’ultimo post in formato “big”
• aggiungere un mini loop nella colonna di sinistra per i 5 post successivi al “big”
• aggiungere un mini loop nella colonna di destra per mostrare dei post presi da una particolare categoria nascosta
• aggiungere delle miniature (thumbnail) nei vari mini loop

L’ideale sarebbe testare il tutto su un server locale, un dominio in disuso, un sottodominio creato ad hoc in modo da non mostrare errori e lavori in corso ai visitatori.

link → seconda parte del post aggiungere contenuti da singole categorie, singoli post e pagine, inserire miniature …

L’impostazione strutturale del servizio è simile alle pagine di Plugins.
I temi sono gratuiti e viene mostrata una maggiore attenzione alla compatibilità con le ultime versioni di WordPress e alla possibilità di personalizzazioni.

Gli autori possono fare l’upload dei loro temi dopo opportuna registrazione.

http://wordpress.org/extend/themes/

1. Google AJAX Feed API

Per prima cosa è necessario iscriversi per ottenere le proprie API Keys dal sito di Google.

A questo indirizzo http://code.google.com/apis/ajaxfeeds/ invece trovate esempi sull’uso di queste API, e una pagina che elenca tutte le classi presenti in modo da poter successivamente personalizzare il layout tramite CSS.

2. Modifica Header

Nell’header del vostro tema di WordPress, subito prima del fine </head> è necessario inserire il seguente codice:

<script type="text/javascript" src="http://www.google.com/jsapi?key=CODICE-PERSONALE-DA-PRELEVARE-SU-GOOGLE"></script>
<script type="text/javascript">
google.load("feeds", "1");
function initialize() {
var feedControl = new google.feeds.FeedControl(8);
feedControl.addFeed("http://www.bloggr.it/feed/", "BLOGGR");
feedControl.addFeed("http://www.vistablog.it/feed/", "VISTABLOG");
feedControl.addFeed("http://www.downloadr.it/feed/", "DOWNLOADR");
feedControl.setNumEntries(4);
feedControl.draw(document.getElementById("feedControl"),
{
drawMode : google.feeds.FeedControl.DRAW_MODE_TABBED});
}
google.setOnLoadCallback(initialize);
</script>

Dovete controllare tutti i file che compongono il vostro tema per assicurarvi di inserire il codice in tutti quelli che contengono i tag <head></head>. Generalmente è il file header.php, ma non sempre e a volte si tratta di più file.

3. Richiamare i Feed

Per ultimo è necessario richiamare i Feed RSS in una zona a scelta del vostro sito, che può essere la sidebar, l’indice del blog o una pagina statica creata apposta.

Inserire il seguente codice dove si vogliono visualizzare le News:

<div id=”feedControl”>Loading</div>

Il risultato finale sarà simile al seguente:

4. Personalizzazioni

Sono segnate in grassetto parti di codice dove inserire la chiave di Google AJAX Feed API e il numero 4 che indica quanti post prelevare da ogni sito (potete inserire il numero che preferite).

Per aggiungere una quarta o quinta fonte (etc.) potete copia-incollare una delle righe che contengono i feed RSS nel rigo successivo e personalizzarlo.

Ad esempio
feedControl.addFeed("http://www.bloggr.it/feed/", "BLOGGR");
diventa
feedControl.addFeed("http://www.mioblog.it/URL_DEL_FEED/", "MIOBLOG.IT");

Dal link di Google fornito in alto si può scegliere una variante che mostra le news di vari siti miscelate e non in Tabs come nell’esempio della mia sidebar.

5. News in un’unica scheda

Questa è la variante per avere tutte le news in un’unica scheda, da sostituire al codice del punto 2:

<script  type="text/javascript" src="http://www.google.com/jsapi?key="YOUR-KEY"></script>
<script type="text/javascript">
google.load("feeds", "1");
function initialize() {
var feedControl = new google.feeds.FeedControl();
feedControl.addFeed("http://www.digg.com/rss/index.xml", "Digg");
feedControl.addFeed("http://feeds.feedburner.com/Techcrunch", "TechCrunch");
feedControl.draw(document.getElementById("feedControl"));
}
google.setOnLoadCallback(initialize);
</script>

6. Credits

Se avete trovato interessante questo breve tutorial potete “ripagarmi” lasciando il feed di BLOGGR (o di uno degli altri 2 siti) nel vostro mini aggregatore.

Grazie!