WordPress è una piattaforma per il blogging e gestione di contenuti, è diventato molto famosa grazie alla semplicità di amministrazione e alla facilità d'uso; essendo sviluppata con il linguaggio php e con database mysql, sfrutta la potenza di tale accoppiata e al basso costo di manutenzione dei sistemi ha "vinto" rispetto ad altre piattaforme già esistenti. Questa guida vuole essere un insieme di appunti per chi, come me, vuole creare un proprio wordpress personalizzato, dalla creazione di un tema personale fino alla creazione di un blog sfruttando WordPress come Kernel e Php/MySql/Css3 come strumenti di sviluppo e di lavoro.

In questa guida non voglio assolutamente parlare di Php e di Css3 che risultano indispensabili per la comprensione di tale "manuale", do per scontato che il lettore abbia almeno le basi di questi due linguaggi anche se non in maniera dettagliata. Nemmeno il linguaggio sql e l'uso di MySql saranno spiegati in questo manuale, prima di tutto perchè non sono la persona più adatta e poi perchè non ci sarà (quasi) mai bisogno di queste nozioni in quanto ci affideremo interamente al Kernel di WordPress.

Ovviamente chi vuole sviluppare con WordPress avrà bisogno di un sistema di sviluppo (chiamarlo SKD è forse troppo), ci basterà una piattaforma A.M.P. funzionante (per AMP intendo Apache, MySql, Php), e ovviamente avremmo bisogno di un editor, usare Notepad (o Kedit) sembra un po' troppo riduttivo infatti io consiglio l'utilizzo di Eclipse per Php. Saranno necessari solamente un utente di MySql con i persmessi di creazione e modifica di un database e delle tabelle e un utente del vostro sistema operativo che abbia la possibilità di creare cartelle e impostare i permessi su tale cartella. Faccio notare che questo sistema di sviluppo (ripeto che SDK è troppo) può essere eseguito nelle tre piattaforme per computer: Windows, GNU Linux e MacOS (qui l'articolo su come installare MAMP). Per quanto riguarda Windows potete usare XAMPP (che è gratuitamente scaricabile da internet e non necessita di molte configurazioni).

Il primo passo da compiere è creare un nuovo Database su MySql, facilmente configurabile con PhpMyAdmin (attraverso il link "Crea nuovo database"), supponiamo di aver creato il database con il nome mywordpress, al termine non sarà necessario creare nessuna tabella in quanto ci penseremo dopo con il tool di installazione.

Secondo passo è il download dei sorgenti dal link http://wordpress.org/download/, scaricando il file zip basta decomprimerlo in una cartella e poi copiare i file dentro una sottodirectory del server web (con Xamp potete aprire la cartella HTDOCS mentre su Apache dovete guardare nelle configurazioni nel file apache.conf), supponiamo che la cartella in questione sia /mnt/Dati/php/mywordpress. Se state utilizzando un server Apache su Linux (o anche sotto Mac) dovete controllare i permessi sui file all'interno della cartella del server web, infatti wordpress necessita dei diritti di scrittura su tutti i file e su tutte le sottodirectory, per fare questo vi basta eseguire (come root) il comando "chmod 777 -R *"

A questo punto se provate ad accedere tramite browser a http://localhost/mywordpress vi comparirà un messaggio There doesn't seem to be a wp-config.php file. I need this before we can get started (attenzione che l'indirizzo da inserire nel browser potrebbe essere differente se avete delle configurazioni particolari di Apache). Questo messaggio di errore compare perché non è configurato il collegamento con il database, infatti basta entrare nella cartella di wordpress e rinominare il file wp-config-sample.php in wp-config.php e aprire il file con un editor di testo (notepad se usate windows, gedit/kedit/mousepad se usate Gnu Linux, oppure usate Eclipse come faccio io) e nel file dovete configurare il collegamento con il database, modificando tutte le costanti (definite con il comando php define). Se usate Xampp/Wampp su MSWindows i parametri dovrebbero essere nel “DB_NAME” scrivete il nome del database che avete creato con phpMyAdmin (mywordpress), DB_USER scrivete "root”, DB_PASSWORD lasciate in bianco (ma non dovete cancellate i due singoli apici ''), su DB_HOST lasciate 'localhost'; se usate Apache su Linux/Mac dovete utilizzare i parametri del vostro server (mywordpress, root, password e localhost sono i classici).

Ricaricando la pagina precedente vi comparirà la pagina di benvenuto di wordpress che vi chiederà di configurare il sito (nome sito, username, password , mail, ecc...) ovviamente inserite dati veri (anche se poi non servirà a molto in quanto siamo solo nel sistema in locale e il sistema non può mandare mail). Una volta terminata la fase di installazione potete accedere alla parte amministrativa (con username e password appena inserite) tramite la pagina http://localhost/mywordpress/wp-login.php, la prima volta sarà moooolto lento e alla fine dovrebbe apparire il messaggio complimenti avete installato wordpress.

A questo punto potete controllare con PhpMyAdmin il database creato all'inizio, troverete tutte le tabelle create dal tool di installazione, tali tabelle non devono essere modificate se non siete esperti della piattaforma wordpress.

Per installare un nuovo tema grafico sul vostro WordPress bastano pochi step, basta andare su "Appearance" (o "Aspetto" se siete in Italiano) e selezionando su "Themes" (o "Temi") e poi cliccando il link "Install themes" (o "Installazione temi") e poi ricercando un nome o un tipo. Dopo averlo installato bisogna ricordarsi di attivarlo cliccando sul link "Active" (o "Attiva"). Per esempio potete scaricare il tema dal nome "CyberChimps" che è uno dei più complicati e complessi e può essere configurato tramite la voce "Theme options" sulla voce "Apparences".Durante l'installazione dei temi, se compaiono dei messaggi di errore per dei problemi sulle connessioni FTP dovete controllare i permessi di scrittura sulle cartelle nel caso siate nel vostro computer locale.

Il sistema wordpress mette a disposizione moltissimi plugin che permetteranno al vostro sito di avere varie personalizzazioni, per installarne uno basta andare nella vice "Plugin" e cliccare su "Add new", in questa pagina potrete fare una ricerca mirata inserendo il nome oppure cercando per argomento tra quelli proposti tra i più popolari, ricordate sempre di attivare i plugin appena installati altrimenti non funzioneranno, ovviamente poi potrete disattivarli quando vorrete visto che avrete a disposizione una pagina che vi elenca tutti i plugin installati.

Il primo plugin che vi presento è "WPtouch Mobile Plugin", uno dei più famosi plugin che permette di rendere graficamente ottimale il vostro sito per tablet e smartphone, infatti accedendo con tali dispositivi la grafica verrà ottimizzata e sarà possibile navigare nel vostro sito WordPress. Una volta installato dovete ricordarvi di attivarlo cliccando sul link "Activate Plugin" e una volta attivato vi comparirà una voce nel menù di sinistra "WPTouch" dove potrete configurare alcuni componenti grafiche (purtroppo alcuni temi sono a pagamento nella versione Pro). Per provarlo potete usare un dispositivo mobile (tablet o smartphone) oppure usare un browser modificando il parametro dell'"User Agent".

Secondo Plugin molto utile è il "Fullscreen Galleria": un plugin che vi permetterà di creare gallerie fotografiche all'interno dei vostri post senza dover fare nulla, cioè vi basterà aggiungere le immagini al post e il plugin renderà le immagini cliccabili, espandibili e navigabili, personalmente l'ho trovato sempre molto utile e veloce. Per aumentare i comandi disponibili nella casella di testo negli editor (nella pagina di nuovo e modifica post per esempio) potete installare il plugin "TinyMCE Advanced" che poi deve essere configurato: nella pagina di configurazione potete aggiungere o togliere alcuni comandi molti utili compresi i comandi per la gestione delle tabelle e degli stili.

Altro plugin interessante e molto utile è "Disable Comments" che con un solo click vi permette di disabilitare tutti i commenti sul vostro forum senza dover ogni volta cliccare sull'opzione in ogni post che scrivete. Per aggiungere i classici bottoni per lo share sui social network potete trovate moltissimi plugin, io uso "Simple Share Buttons Adder" che permette molte personalizzazioni. Per avere sempre a disposizione statistiche sul vostro WordPress potete installare il Plugin "Counterize" che vi permetterà anche di essere aggiornati via email delle varie statistiche del vostro sito, dovete solamente ricordarvi di attivare i sotto-plugin che vi interessano nella schermata dell'elenco dei plugin.

Ultimo plugin indispensabile è "WP-DB-Backup" che vi permette di eseguire backup e di fare il rollback con pochissimi click ed è sempre attivo, vi permette anche di schedulare la fase di backup, per esempio io eseguo un backup ogni settimana nel mio caso e mi faccio spedire via mail il file (attenzione che la pagina di configurazione è nella sezione tool e non nella sezione settings).

Il sistema base e i siti che gestiscono i temi e i plugin possono prevedere degli aggiornamenti, per esempio il sito wordpress.com rilascia molti aggiornamenti, tenere tutto aggiornato aumenta la sicurezza e molto spesso vengono aggiunte delle nuove funzionalità molto utili. Gli aggiornamenti disponibili sono ben evidenziati nella Dashboard principale: nella barra in alto compare un "bottone" con due freccie con anche indicati il numero di aggiornamenti disponibili, inoltre nel menù di sinistra compaiono dei numeri colorati (di solito in arrancione). Se sono presenti più aggiornamenti, questi possono esser eseguiti assieme oppure uno alla volta, il tutto dalla pagina degli "Aggiornamenti di WordPress" disponibile dal link nella barra in alto.

Qualora abbiate eseguito delle modifiche ai file fisici del vostro sistema WordPress tramite l'editor specifico, dovete ricordarvi che gli aggiornamenti sovrascrivono tutti i file quindi vengono perse tutte le modifiche eventualmente eseguite ai file (un esempio concreto lo vedremo nel prossimo articolo).

Per inserire un box o una sezione con un widgets del proprio profilo Twitter bisogna prima di tutto creare il widget dal sito ufficiale di Twitter, nel mio caso (come potete vedere nella parte destra) io ho scelto di visualizzare la mia timeline, ma si possono personalizzare questi widget per visualizzare un solo tweet oppure eseguire un hashtag. Per attivare il widget sulla vostra utenza, basta entrare sul sito twitter.com con un browser facendo la login con il proprio utente per poi andare sul link "Developer" che si trova nel box del Copyright (dove c'è la scritta "© 2014 Twitter"), in questa pagina bisogna cercare il link "Embedded Timelines" per vedere una pagina che ci riporta alcuni esempi di widget (per esempio il nostro "Available Timelines"), cerchiamo nella pagina il link "widgets section of your settings page" per entrare nella pagina che ci permette di creare e configurare i nostri widget da inserire in WordPress.

Dopo aver cliccato su "Create a user widget" abbiamo una pagina che ci permette di inserire alcuni parametri (come il tema e l'altezza del widget), una volta impostate le nostre scelte possiamo premere nel bottone "Create" e comparira un box con del testo simile a

<a class="twitter-timeline" href="https://twitter.com/Al_Nao" data-widget-id="297708964299276290">Tweets by @Al_Nao</a>
<script>// <![CDATA[
!function(d,s,id){var js,fjs=d.getElementsByTagName(s)[0];if(!d.getElementById(id)){js=d.createElement(s);js.id=id;js.src="//platform.twitter.com/widgets.js";fjs.parentNode.insertBefore(js,fjs);}}(document,"script","twitter-wjs");
// ]]></script>

che è il codice html del nostro widget Twitter che andremo ad inserire in WordPress (bisogna fare copia-incolla di tutto il codice).

Andando sulla dashboard di WordPress bisogna andare sulla voce di menù "Aspetto" e entrare su "Editor", nell'elenco di sinistra bisogna scegliere il file "sidebar-right.php", si aprirà un editor con del codice php che corrisponde al file selezionato. Per inserire il widget come ultimo "box" nella sinistra della pagina bisogna inserire il codice di twitter alla fine del file ma all'interno del tag div che chiude la pagina (quindi prima dell'ultima riga dove c'è la chiusura del tag "</div>")

Per pubblicare il proprio wordpress in internet bisogna trovare un hosting sul quale installare il vostro sito, la classica lista di hosting potete trovare moltissimi siti e ora vi parlo dei miei criteri, delle mie esperienze e di quello che ho letto in internet e che ritengo attendibile, che sia ben chiaro che questi sono consigli dati da me quindi non voglio parlare male di nessuna azienda o non voglio fare pubblicità a nessuno.

Prima di tutto parliamo del sito ufficiale wordpress.com dove potete registrarvi e gratuitamente creare la vostra versione di wordpress con per esempio nel mio caso l'indirizzo è alnao.wordpress.com e risulta essere completamente gratuito e funzionante, ovviamente non si tratta di un vero e proprio hosting in quanto non avrete una vostra mail e non avrete un vostro, per il caricamento di file e contenuti può essere limitato (ad oggi dovrebbe essere 3Gb totali) e non ha nessun tipo di assistenza. Sempre tramite il sito ufficiale potrete acquistare un dominio (mionome.com per esempio) ad un prezzo competivito (circa 20 euro all'anno) avendo sempre il solo wordpress disponibile quindi senza mail e con spazio limitato.

Per chi è agli inizi o per chi non vuole avere più di un wordpress, direi che questa è la soluzione migliore, infatti scegliendo questa soluzione un utente avrà tutto e solo quello che serve per creare un sito con wordpress, ovvimanete senza la possibilità di accedere al database o allo spazio WEB, senza assistenza e senza pannelli di controllo particolari. Se volete invece qualcosa di più professionale, ovviamente dovete tenere conto di alcuni aspetti particolari e in base al prezzo anche fare le vostre valutazioni del caso, è importante scegliere bene fin dall'inizio, perché cambiare server di hosting mantenendo lo stesso dominio non è così semplice come può sembrare.

Elenco alcuni aspetti fondamentali da tenere in considerazione nel momento di fare una scelta, infatti questi punti sono indispensabili per creare un sito con wordpress: assistenza (via telefono/chat/email), presenza di un pannello di controllo, presenza di PhpMyAdmin, backup giornalieri o settimanali, accesso e gestione FTP. Poi ci sono anche alcuni spetti secondari non indispensabili come la creazione di sottodomini, creazione di sottodatabase, accesso a file htaccess e PHP.ini. Bisogna anche tenere conto che la versione di MySql deve essere obbligatoriamente 5.0 o superiore e la versione di PHP deve essere obbligatoriamente 5.2.4 o superiore, senza questi requisiti il sito non funzionerà mai! Nei vari siti di hosting inoltre c'è spesso la possibiltà di scegleire un server GNU Linux o MS Windows, direi che è sempre buona cosa scegliere il primo visto per un numero infinito di motivi che non sto a spiegare in questo articolo.

Il primo hosting che presento è aruba.it, che io uso da molti anni e con il quale mi sono trovato sempre bene, il pacchetto completo risulta costare 35 euro l'anni circa e presenta tutti le caratteristiche ho presentato in precedenza tranne la creazione di sottodomini (assolutamente inutile per le mie esigenze) e da anche un numero limitato di mail (per esempio alnao@alnao.it). WordPress è facilemnte installabile dal pannello di controllo oppure si può installare a mano attraverso l'accesso FTP e la copia dei file, database MySql è acquistabile a parte ma costa 5 euro l'anno e lo spazio su DB è di più che sufficiente per le esigenze di wordpress (cirsa 200Mb ad oggi).

Altri hosting italiani disponibili e ottimi sono sono vhosting-it.com, netsons.com e keliweb, mentre tra gli hosting esteri vi consiglio di guardare bluehost, hostgator e Godaddy.

Per creare un proprio tema bisogna prima di tutto conoscere sia i linguaggi per la costruzione di pagine web, quindi HTML, CSS e Javascript, inoltre è indispensabile conoscere anche il linguaggio script PHP che è il linguaggio con cui è scritto WordPress, senza queste conoscenze (anche base per iniziare) è inutile iniziare a costruire un proprio tema e conviene cercare i temi già esistenti sullo "store" di WordPress. Altro dettaglio da non trascurare è che dobbiamo avere i permessi di scrittura sul nostro webserver per creare e modificare file php e css, senza questi permessi non sarà possibile proseguire. Questi articoli sono divisi in più step visto che la costruzione di un tema è cosa abbastanza semplice ma bisogna seguire molti passi e creare parecchi file, inoltre mi sembra giusto impegare qualche riga in più per descrivere tutti i file anche se in questa guida non spiegherò tutto nel dettaglio, per ogni dubbio basta andare a studiare la guida ufficiale disponibile al sito http://codex.wordpress.org/Theme_Development. Per prima cosa vediamo lo schema di (quasi) tutti i temi di wordpress: vediamo la presenza di una testata e di una coda, con un contenuto centrale affiancato da una eventuale barra (che può stare a destra o a sinistra). Per creare il tema bisogna creare una cartella dentro alla cartella /wp-content/themes/ nel vostro webserver, per esempio chiamandola "primo" e poi creare all'interno della cartella due file vuoti "index.php” e “style.css”, dopo aver creato questi file, entrando nella parte amministrativa del vostro sito wordpress, nel menù Apparences alla voce Themes (Aspetto e Temi se l'avete in italiano) potete trovate il vostro tema nell'elenco dei temi disponibili ma compare senza immagine di esempio (chiamata miniatura) e non sono presente nemmeno i dati informativi relativi all'autore e la breve descrizione del tema. Per creare la miniatura infatti basta creare un file immagine screenshot.png di esempio che di solo contiene una videata di esempio del vostro tema e aggiungerla alla cartella creata mentre all'inizio del file style.css creato in precedenza aggiungiamo le righe:

/*
Theme name: Primo alnao.it
Theme url: https://www.alnao.it
Description: Tema sviluppato da AlNao come primo esempio
Version: 1.0
Author: <a href="https://www.alnao.it" title="AlNao.it">AlNao.it</a>
Author url: https://www.alnao.it
Tags: first, clean, minimal
*/

ora rientrando nella parte amministrativa notiamo che la miniatura e la descrizione sono disponibili, ovviamente attivandolo non vedremo nulla perchè non abbiamo ancora cominciato a scrivere le pagine e gli stili del tema.

L'architettura di wordpress chiede almeno i seguenti file per funzionare correttamente:

• index.php : è la prima pagina del sito cioè quella che si carica quando un utente entra nel sito senza sottolink
• header.php : comprende tutta la parte di codice compresa tra il doctype e il tag body, comprende anche tutte le informazioni come il nome del sito, la descrizione, i metadati e i link ai file di stile e agli script, viene usata per visualizzare tutte le componenti grafiche comuni e presenti in tutte le pagine del sito (logo, menu o il banner principale se presente)
• footer.php : è la parte in fondo alla pagina e tipicamente comprende alcune informazioni come i crediti e termina con la chiusura dei tag body e html
• sidebar.php : è la strutturata della colonna laterale, di solito comprende le voci "categorie", "archivi" o un sottomenù ma può essere personalizzata
• page.php : definisce il template di una pagina interna al sito, da non confondere con quella che definisce il template di un singolo articolo (single.php), questo file viene richiamato solo nelle "page" ("pagine" in italiano)
• single.php : definisce il template di un singolo articolo, cioè questa è la pagina che si carica quando si apre un singolo post
• search.php : il template per la pagina di ricerca con l’elenco dei risultati
• archive.php : template per l’elenco dei post archiviati, si carica quando un utente esegue una navigazione per data oppure quando viene selezionato un tag
• comments.php : è il template dei commenti e contiene, oltre ai commenti, il form e le indicazioni per inserirli, da notare che è richiamata solitamente all’interno di single.php
• category.php : template per la pagina delle categorie
• functions.php : file di fondamentale importanza perchè contiene le funzioni php personalizzate del tema, in cui definiamo le sidebar, da notare che le funzioni sono "lato server" quindi non possono contenere javascript (che è "lato client").
• 404.php : template per il messaggio di errore di pagina non trovata, viene caricato quando c'è qualche problemna nella navigazione o un utente prova a caricare una pagina che non esiste.

quanso si disegna un tema si possono creare altri file e metterli anche in sottodirectory come vedremo più avanti ma dobbiamo sempre avere a portata di mano lo schema base per riuscire a lavorare bene:

In questo articolo voglio elencare i vari file indispensabili visti nel precedente articolo con il primo codice di ogni pagina, questo per poter avere un tema funzionante che sarà disponibile e attivabile nella parte amministrativa del vostro wordpress

• header.php

<?php 
/* www.alnao.it
 * wordpress theme "primo"
 * */
?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" <?php language_attributes(); ?>
<head>
<meta http-equiv="Content-Type" content="<?php bloginfo('html_type'); ?>; charset=<?php bloginfo('charset'); ?>" />
<title><?php bloginfo('name'); ?> <?php wp_title(); ?></title>
<meta name="generator" content="WordPress <?php bloginfo('version'); ?>" /> <!-- leave this for stats -->
<link rel="stylesheet" href="<?php bloginfo('stylesheet_url'); ?>" type="text/css" media="screen" />
<script language="javascript" type="text/javascript" src="<?php bloginfo('stylesheet_directory'); ?>/js.js"></script>
<script language="javascript" type="text/javascript">    
    if(f)
    {
        write_css('<?php bloginfo('stylesheet_directory'); ?>');
    }
</script>
<?php wp_head(); ?>
</head>
<body>

<div id="page">
    <div id="header">
        <div id="logo">
            <h1><a href="<?php echo get_option('home'); ?>"><?php bloginfo('name'); ?></a></h1>
            <h4><?php bloginfo('description'); ?></h4>
        </div>
        <div id="menu">
            <ul>
                <li><a href="<?php bloginfo('url'); ?>">Home</a></li>
                  <?php wp_list_pages('depth=1&title_li='); // elenco pagine ?>
            </ul>
            <div class="clear"></div>
        </div>
    </div>
    <div class="clear"></div>

da notare che in questo file ci sono molti div non chiusi, verranno chiusi successivamente negli altri file che verranno caricati in seguito, infatti bisogna sempre pensare alla struttura completa e non pensare al singolo file come una pagina a se, ovviamente bisogna però sempre pensare che tutti i tag html devono essere chiusi correttamente come prevede lo standard, soprattutto se si vuole sviluppare un tema con lo standard HTML5 e CSS3.

• index.php

<?php get_header(); ?>
<div id="body">
 <?php get_sidebar(); ?>
 <div id="content">
  <?php if (have_posts()) : ?>
        <?php while (have_posts()) : the_post(); ?>
            <div class="post">
                <h2 id="post-<?php the_ID(); ?>"><a href="<?php the_permalink() ?>" rel="bookmark" title="Permanent Link to <?php the_title(); ?>"><?php the_title(); ?></a></h2>
                <small><?php the_time('F jS, Y') ?> <!-- by <?php the_author() ?> --></small>
                <div class="entry">
                    <?php the_content('Read the rest of this entry »'); ?>
                </div>
                <p class="postmetadata">
                  Posted in <?php the_category(', ') ?> 
                  <strong>|</strong> 
                  <?php edit_post_link('Edit','','<strong>|</strong>'); ?>  
                  <?php comments_popup_link('No Comments »', '1 Comment »', '% Comments »'); ?>
                </p>
            </div>
        <?php endwhile; ?>
        <div class="navigation">
            <div class="alignleft"><?php posts_nav_link('','','« Previous Entries') ?></div>
            <div class="alignright"><?php posts_nav_link('','Next Entries »','') ?></div>
        </div>
    <?php else : ?>
        <h2 class="center">Not Found</h2>
        <p class="center"><?php _e("Sorry, something wrong."); ?></p>
    <?php endif; ?>
 </div>
</div>
<?php get_footer(); ?>

• page.php

<?php get_header(); // includi l'header ?>
<div id="body">
   <?php get_sidebar(); ?>
 <div id="content">
    <?php if (have_posts()) : while (have_posts()) : the_post(); ?>
    <div class="item entry" id="post-<?php the_ID(); ?>">
      <div class="itemhead">                          <h3>
          <?php the_title(); // titolo pagina ?></h3>
      </div>
      <div class="storycontent">
        <?php the_content(); // contenuto pagina ?>
      </div>
    </div>
    <?php edit_post_link('Edit this entry.', '<p>', '</p>'); // modifica la pagina ?>
    <?php endwhile; ?>
    <?php endif; ?>
   </div>
<?php get_footer(); // includi il footer ?>

• single.php

<?php get_header(); // includiamo l'header ?>
<div id="body">
    <?php get_sidebar(); // includi la sidebar ?>
    <div id="content">
      <?php if (have_posts()) :  ?>
      <?php while (have_posts()) : the_post(); ?>
      <div class="post-wrapper">
        <h3 class="post-title"> 
          <a href="<?php the_permalink()?>" rel="bookmark" title="<?php the_title();?>">
            <?php the_title(); ?></a></h3>
        <div class="datiPost">
            <?php the_author() // autore del post ?> |
            <?php the_category(', ') ?> |
            <?php the_time('M j, Y') ?><strong>|</strong>
            <?php edit_post_link('Edit','','<strong>|</strong>'); // edit post ?>
         </div>
        <div class="post">
          <?php the_content('Tutto il post'); ?>
        </div>
        <div class="post-footer" style="margin:30px 0 5px 0;">Posted in
          <?php the_category(', ') ?>  <strong>|</strong>
          <?php edit_post_link('Edit','','<strong>|</strong>'); ?>
        </div>
      </div>
       <?php endwhile; ?>
      <p class="pagination">
        <?php next_posts_link('&laquo; Older') ?>
        <?php previous_posts_link('Newer &raquo;') ?>
      </p>
      <?php else : // se il post selezionato non esiste ?>
      <h2 align="center">Not Found</h2>
      <p align="center">Sorry, something wrong.
      </p>
      <?php endif; ?>
     </div>
<?php get_footer(); //includi il footer ?>

i file index, page e single sono apparentemente simili, ma solo come codice html, in realtà poi ogni una andrà personalizzata con delle funzioni specifiche di wordpress perchè vengono caricate come home page (la index), al click delle singole pagine (page) e al click di un singolo articolo (single)

• sidebar.php

 <div id="sidebar">
        <ul>
            <li class="widget widget_calendar">
                <?php get_calendar();?>
            </li>
           <?php if ( function_exists('dynamic_sidebar') && dynamic_sidebar(1) ) :?>
           <? else : ?>
            <li class="widget_categories"><h2>Categories</h2>
                <ul>
                <?php wp_list_cats('sort_column=name&optioncount=1'); ?>
                </ul>
            </li>
            <li class="widget_archives"><h2>Archives</h2>
                <ul>
                <?php wp_get_archives('type=monthly'); ?>
                </ul>
            </li>
            <?php get_links_list(); ?>
          <?php endif; ?>
        </ul>
    </div>

•  footer.php

<div class="clear"></div>
    <div id="footer">
        <!--    <hr />-->
        <div>
            <?php bloginfo('name'); ?> is proudly powered by
            <a href="http://wordpress.org">WordPress</a>
        </div>
    </div>
</div>
<?php //do_action('wp_footer'); ?>
<?php wp_footer();?>
</body>
</html>

La prima funzione che bisogna imparare ad usare quando si costruisce un tema per wordpress è la funzione bloginfo, questa funzione permette, all'interno di qualsiasi file php, di recuperare velocemente le informazioni base sul blog, senza dover scrivere nel codice nomi fissi o dover ogni volta cercare informazioni importanti. L'uso del metodo è semplice: l'unico parametro della funzione indica quale valore ritornare, per esempio:

<h1><?php bloginfo( 'name' ); ?></h1>

questo semplice codice "disegna" un tag HTML con al suo interno il nome del blog, tutti i valori ritornati sono quelli impostati nella parte amministrativa del sito. L'elenco delle informazioni disponibili è:

• name : restituisce il titolo del blog
• description : è il motto del blog
• url : l’indirizzo url
• rdf_url : l’url del feed RDF/RSS 1.0
• rss_url : l’url del feed RSS 0.92
• rss2_url : l’url del feed RSS 2.0
• atom_url : l’url del feed Atom
• pinback_url : l’url di pingback
• admin_email : l’indirizzo email dell’amministratore del blog
• charset : il tipo di Encode utilizzato
• version : la versione di WordPress installata
• wpurl : l’url dell’installazione di WordPress
• template_directory : l’url della directory del template in uso
• stylesheet_url : l’url del foglio di stile style.css
• stylesheet_directory : l’url della directory contenente il foglio di stile

Per permettere a un tema wordpress di caricare correttamente i vari plugin e tutti gli strumenti di amministrazione, tra cui la barra di amministrazione standard di wordpress, basta aggiungere nel proprio tema due funzioni, all'interno del tag <head> che di solito si trova nel file header.php, la funzione:

<?php wp_head() ?>

mentre all'interno del tag <body>, che di solito si trova nel file footer.php, la funzione

<?php wp_footer ?>

Da tenere presente che, per il corretto funzionamento delle funzioni, conviene mettere queste chiamate alla fine dei tag head e body quindi come ultima istruzione prima della chiusura e non deve essere contenuto in un altro tag, per esempio fuori da qualsiasi tag contenuto dentro nel body.

La visualizzazione dei contenuti, come gli articoli e i commenti, nelle varie pagine di un sito costruito con wordpress avviene tramite un tecnicismo chiamato "Loop", la parola loop in programmazione tipicamente significa "ciclo infinito senza uscita" mentre sull'architettura di wordpress rappresenta i cicli su articoli, pagina e commenti: le pagine che visualizzano un elenco di elementi omogenei tra loro. Per eseguire un loop su wordpress si usano le istruzioni php:

<div class="post"><?php if (have_posts()) : while (have_posts()) : the_post(); ?>
 // mostrare il post
 <?php endwhile; endif; ?></div>

La parte più importante del loop è la funzione the_post che inizializza un oggetto PHP globale $post che contiene tutti i dati dell'elemento, da notare che tutte le funzioni su un sito wordpress, per la visualizzazione e formattazione dei dati, si appoggiano all'oggetto $post quindi bisogna sempre usare questa tecnica anche in quelle pagine che visualizzano un solo elemento come il file della struttura principale page e single. Per esempio, il codice del file single con il loop è:

<?php
if ( have_posts() ) :
 while ( have_posts() ) : the_post();
 ?>
 <p><a href="<?php the_permalink(); ?>" 
       title="<?php the_title(); ?>"><?php the_title() ?></a></p>
   <p>Pubblicato il <?php the_time('d/M/Y'); ?></p> 
   <?php the_excerpt(); ?>
   <p>Pubblicato in <?php the_category(' - '); ?></p>
 <?php
 endwhile;
else :
 echo '<p>Nessun articolo</p>';
endif;
?>

Da notare l'uso di have_posts che permette di verificare se è presente almeno un articolo, metodo usato per mostrare un messaggio particolare se non ci sono articoli/pagine in quello specifico file. All'iterno del loop sono disponibili questi metodi:

• the_time( 'd/M/Y' ): visualizza il giorno di pubblicazione del contenuto nel formato giorno/mese/anno, il parametro che identifica il formato della data è lo stesso del metodo date nativo di Php
• the_permalink(): visualizza il link completo all'articolo (comprende anche http iniziale), con il termine "Permalink" si indicano gli URL permanenti di qualsiasi contenuto, da non confondere con get_premalink che è da usare al di fuori dei loop
• the_title(): visualizza il titolo dell'elemento del loop
• the_category(' - '): visualizza l'elenco dei link ad ogni categoria del post, se ci sono più categorie vengono separate dal carattere contenuto nel parametro
• the_content(): visualizza il contenuto dell'elemento, a meno che non ci si trovi in file con più di un post, in questo caso restituisce il post finché non viene trovato il tag <!--more--> (se non c'è nessun tag, l'elemento viene visualizzato interamente), il metodo ha anche un parametro opzionale: se vogliamo mostrare un testo in caso di troncamento, per esempio <?php the_content(‘Leggi ancora!’); ?>. Se ci troviamo in una pagina costituita da un singolo post, il post che vedremo sarà sempre completo e l’eventuale tag <!–more–> verrà ignorato.
• the_excerpt(): visualizza solo una le prime 55 parole del post, qualsiasi esse siano e tale impostazione non può essere modificata, se è stato valorizzato il riassunto del post nella pagina amministrativa, verrà mostrato questo testo. Non usare in file che mostrano un solo post, come single o page.

Nella parte amministrativa di WordPress è possibile trovare anche alcune impostazioni che permettono di modificare alcune componenti grafiche del sito senza dover mettere mano ai CSS o al codice PHP, per esempio il colore e l'immagine di sfondo delle pagine può essere impostata da codice tramite CSS oppure gestita nel pannello di amministrazione di wordpress tramite la funzionalità "Sfondo" che può essere trovata nella sezione "Aspetto". La voce sfondo, come tutte le altre voci che si trovano sotto la sezione Aspetto, viene resa disponibile solo se nel tema è indicato di attivare queste voci. Per attivare le funzionalità bisogna usare la funzione add_theme_support di wordpress, conviene sempre modificare il file functions.php e aggiungere il codice:

add_action( 'after_setup_theme', 'primo_setup' );
if ( ! function_exists( 'primo_setup' ) ):
function primo_setup() {
 add_editor_style();
 add_theme_support( 'post-formats', array( 'aside', 'gallery' ) );
 add_theme_support( 'automatic-feed-links' );
 add_theme_support( 'custom-background', array('default-color' => 'cccccc',) );
 $custom_header_support = array(
 'default-image' => '%s/images/alnao_logo.png',
 'flex-height' => true,
 'flex-width' => true, 
 'header-text' => false,
 );
 add_theme_support( 'custom-header', $custom_header_support );
}
endif;

bisogna però ricordarsi di aggiungere nel file header.php l'istruzione nel tag body

<body <?php body_class(); ?>>

per permettere alla parte amministrativa di sovrascrivere lo stile del tag body, bisogna anche ricordarsi di non mettere nessuno sfondo nei CSS al tag altrimenti si rischiano conflitti, da notare che nella funzione php è possibile anche impostare un default. Altro elemento che abbiamo aggiunto con la funzione php è la gestione del logo, sempre nel file header.php bisogna aggiungere il codice:

<?php if ( get_header_image() != "" ) { ?>
 <img src="<?php header_image(); ?>" alt="" />
<?php }else{ ?>
 <h1><a href="<?php echo get_option('home'); ?>"><?php bloginfo('name'); ?></a></h1>
 <h4><?php bloginfo('description'); ?></h4> 
<?php }?>

per visualizzare il logo impostato nella parte amministrativa se presente, se non presente viene visualizzato il nome e la descrizione del sito che viene impostata nelle pagine di amministrazione del sito.

L'architettura wordpress mette a disposizione alcune funzionalità (chiamate anche API) per la creazione di pagine di amministrazione, con queste pagina sarà possibile gestire dinamicamente parametri, per esempio la gestione di un blocco dinamico oppure un'icona condizionata da un parametro. La procedura per creare la pagina non è semplicissima e in questo esempio verrà solo mostrato un esempio, per maggiori dettagli vedere la documentazione ufficiale nella sezione Settings API. Prima di tutto nella functions.php bisogna creare la funzione per creare pagina, sezione e parametro:

add_action("admin_menu", "AlNaoTheme_admin_addAdministrationMenu");
function AlNaoTheme_admin_addAdministrationMenu(){ 
 Theme_admin_addOptionPage("Theme admin","Theme admin","manage_options",
   "ThemeAdminPAG",0);
 Theme_admin_addOptionSection("ThemeSEZSocial","Social network",
   "ThemeAdminPAG");
 Theme_admin_addOptionField("ThemeSocialValue_facebook","Facebook:",
   "text","ThemeSEZSocial","ThemeAdminPAG");
}

con questa funzione andremo a richiamare le funzioni definite per le chiamate alle API, da notare che bisogna creare una pagina (o un menù), per poi aggiungere una sezione a questa pagina e poi aggiungere il campo (field) alla sezione, il tutto rispettando nomi e parametri), il parametro "text" permetterà di distinguere se si tratta di un input text semplice o di tag più complessi. Il codice delle funzioni Theme_admin che richiamano le API di wordpress sono:

//funzione che richiama la API add_options_page
function Theme_admin_addOptionPage($title,$menuLabel,$capab,$idPage,$position=99){
 add_options_page(
 $title, //page title
 $menuLabel, //menu title
 $capab,//capability
 $idPage,
 "AlNaoTheme_admin_addOptionPage_show", //callback
 null,//icon
 $position//position
 );
}
//funzione (non usata nell'esempio) che richiama la API add_menu_page simile alla add_options_page
function Theme_admin_addMenuPage($title,$menuLabel,$capab,$idPage,$position=99){
 add_menu_page( 
 $title, //page title
 $menuLabel, //menu title
 $capab,//capability
 $idPage,
 "Theme_admin_addOptionPage_show", //callback
 null,//icon
 $position//position
 );
}
//funzione di callback della pagina: crea il codice HTML della pagina di amministrazione
//NOTA IMPORTANTE: in questo metodo sono fisse gli IDpage che deve corrispondere a quanto dichiarato prima
function Theme_admin_addOptionPage_show(){
 echo "<div class='wrap'>";
 echo "<h1>AlNao Theme options pages</h1>";
 echo "<form method='post' action=\"options.php\">";
 settings_fields("ThemeAdminPAG");
 do_settings_sections("ThemeAdminPAG"); 
 submit_button(); 
 echo "</form>";
 echo "</div>";
}
//funzione che richiama la API add_settings_section
function AlNaoTheme_admin_addOptionSection($idSection,$title,$idPage){
 add_settings_section(
 $idSection, //sectionid 
 $title, //title
 "Theme_admin_addOptionSection_show", //callback
 $idPage, //page
 array('id' => $idField,'title' => $title) //parametri alla callback
 ); 
}
//funzione di callback della sezione che mostra il titolo della sezione
function Theme_admin_addOptionSection_show($args){
 echo $args['title'];
}
//funzione che richiama la API add_settings_field
function Theme_admin_addOptionField($idField,$title,$type,$idSection,$idPage,$automaticRegister=true){
 if ($automaticRegister){
 Theme_admin_addOptionRegister($idField,$idPage);
 }
 add_settings_field(
 $idField, //field name
 $title, //title 
 "Theme_admin_addOptionField_show_".$type, //callback 
 $idPage, //pagina
 $idSection, //sezione
 array(//parametri alla funzione callback
 'id' => $idField, 
 'type' => $type,
 'class' => 'regular-text',
 'default' => ''
 )
 );
}//array('id' => $idField,'title' => $title)
//funzione per la registrazione del parametro nel DB di wordpress (da non dimentare)
function Theme_admin_addOptionRegister($idField,$idPage){
 register_setting($idPage,$idField);
}
//funzione per la creazione del tag
function Theme_admin_addOptionField_show_text($args){
 echo "<input id='". $args['id'] . "' name='". $args['id'] ."' type='text' class='".$args['class']."' ";//
 echo " value=\"". get_option( $args['id']) ."\" ";
 echo "/>";
}

con questo codice, entrando nella sezione amministrativa del sito si noterà nel menù una nuova voce "Theme admin" (come indicato in uno dei parametri della prima funzione richiamata), cliccando su questo si apre una pagina dove compare un campo di input con label "facebook", valorizzando questo valore e premendo "Salva" questo valore viene salvato nel database di WordPress con il nome "ThemeSocialValue_facebook".

Nelle pagine del sito (come header.php) è possibile recuperare tale valore con la funzione get_option, per esempio:

<?php if (get_option("ThemeSocialValue_facebook")!=""){?>
 <a href="<?php echo get_option("ThemeSocialValue_facebook");?>" target="_blank">
  <img src="<?php echo get_template_directory_uri(); ?>/images/ico/facebook.png">
 </a>
<?php } ?>

in questo esempio se il campo è vuoto (o mai valorizzato) non viene mostrato nulla, se invece è valorizzato viene mostrata un link icona che punta allo stesso valore inserito, in questo modo è possibile creare nel tema componenti dinamici che vengono gestiti dalla sezione amministrativa del sito senza dover ogni volta modificare il codice PHP o gli stili CSS del tema.

Nell'esempio è stata inserita anche la add_menu_page che può essere usata in alternativa alla add_options_page, la prima inserisce la nuova voce di menù nel primo livello (fuori da qualsiasi altra macro-voce) mentre la seconda inserisce la nuova voce di menù all'interno della macro-voce "Impostazioni"

I cookies sono dei piccoli file di testo che vengono scaricati automaticamente dal browser durante la navigazione e quindi ritrasmessi al server durante le tue visite successive, questi oggetti sono usati in tutti i siti e non solo quelli di wordpress, esistono cookies di diversi ditipi: quelli tenici per la raccolta di statistiche o quelli di profilazione per la gestione di siti multiutente o quelli per la gestione di banner e/o pubblicità.

La normativa europea impone a tutti i gestori di siti web di informare i propri visitatori che si stanno usando i cookies con la motivazione che questi file vengono salvati nei browser dei visitatori in maniera automatica, la normativa impone due tipi di messaggi: l'informativa breve e l'informativa estesa: quella breve deve essere mostrata (in maniera visibile e chiara) al primo accesso dell'utente e deve avvisare l'utente che sta entrando in un sito che usa i cookies mentre l'informativa estesa deve essere una pagina che spiega al cliente l'utilizzo dei dati personali e su che sono sono i cookies e come vengono usati nelle varie pagine del sito, inoltre la normativa prevede che venga spiegato anche come bloccare e cancellare il salvataggio dei cookies.

Se si vuole creare autonomamente i testi, consiglio di leggere attentamente le informazioni fornite sull’argomento dalle autorità ufficiali: la guida del garante sulla privacy e una mini guida sempre del garante della privacy. Da notare che, secondo la normativa, le sanzioni per chi non rispetta la normativa sono dai 6.000 ai 120.000 euro, quindi è buona norma assicurarsi che i testi siano completi, corretti e chiari.

Per aggiungere al proprio sito wordpress i messaggi sui cookies si potrebbe aggiungere codice nelle varie pagine (per esempio nel footer.php) ma conviene utilizzare uno dei tanti plugin che si possono trovare gratuitamente nello store di wordpress, dopo una ricerca ho scelto di usare e consiglio il plugin "Italy Cookie Choices": questo plugin permette di configurare la famosa informativa breve tramite un messaggio in alto o in basso in tutte le pagine e permette di gestire il il link all'informativa estesa (chiamato anche cookie-policy). Per quanto riguarda la pagina stessa dell'informativa estesa conviene creare una nuova pagina tramite wordpress e non renderla visibile nel menù, basta modificare il proprio tema aggiungendo un link nel footer per rendere la pagina visibile in tutte le pagine del sito.

Nota: questo è solo un articolo informativo e non una guida giuridica, potrebbe non essere precisa e potrebbe non essere al passo con eventuali aggiornamenti normativi, non si assumono responsabilità sull'uso che viene fatto di quanto scritto nell'articolo.

I Widget per WordPress sono dei componenti grafici e dinamici presenti nel framework di WordPress che permettono di personalizzare il sito in maniera molto semplice: nella pagina di amministrazione è possibile aggiungere in aree particolari del sito parti di sito già preparate e pronte per l'uso, per esempio un amministratore di un sito wordpress può aggiungere un box con i link preferiti (blogroll) oppure l'elenco degli ultimi articoli pubblicati. Oltre ai widget standard del framework WordPress, che sono sempre disponibili, è possibile scaricare widget già pronti ed è possibile anche realizzare il proprio widget personalizzato.

Per attivare un widget basta entrare nella pagina di amministrazione dedicata ai widget dove nella sinistra sono elencati tutti i widget disponibili e nella destra sono presenti tutti i punti dove è possibile inserirne, per posizionare un widget in un punto specifico basta trascinare da sinistra a destra l'elemento e poi eventualmente configurarlo tramite la piccola sezione che compare automaticamente. I Widget predefiniti presenti nel framework di default sono:

• Archivi: visualizza l'elenco tutti gli articoli
• Calendario: visualizza un calendario e, per ogni data, un link all'elenco degli articoli pubblicati
• Categorie: visualizza l'elenco tutte le categorie del tuo sito
• Link: visualizza l'elenco dei link personalizzabile
• Pagine: visualizza l'elenco di tutte le pagine del tuo sito
• Meta: visualizza l'elenco di tutti i metadati
• Articoli recenti: visualizza l'elenco degli ultimi N articoli del sito
• Commenti recenti: visualizza l'elenco deglli gli ultimi commenti che sono stati lasciati sul sito
• Ricerca: visualizza un piccolo modulo di ricerca per cercare articoli all’interno del sito
• RSS: visualizza feed RSS da un altro sito
• Tag cloud: vosualizza l'elenco dei tag maggiormente utilizzati in una lista raggruppata
• Testo: permette di aggiungere del testo a piacere, del codice HTML (utile per inserire gli annunci adsense su WordPress)

come detto in precedenza è possibile anche scaricare widget dallo "store", consiglio lo scarico del widget "Black Studio TinyMCE Widget" che permette di creare widget con un rich-editor e quindi sarà possibile inserire in qualsiasi punto qualsiasi testo formattato a piacere.

I widget sono automaticamente presenti in un tema solo se sono attivati dall'istruzione

add_theme_support( 'widgets' );

che va posizionata assieme alle altre chiamate nella functions.php, una volta inserita questa istruzione nel menù di amministrazione compare la voce Widget nella sezione Aspetto, però entrandovi non compaiono punti sulla destra se non sono ancora stati creati, per creare un "punto" dove visualizzare widget basta aggiungere la chiamata alla funzione register_sidebar nella functions.php, per esempio:

function alnao_widgets_init_widget($id,$name){
 register_sidebar(array(//register_sidebar( array(
 'id' => $id,//ALL in lowercase with no spaces 
 'name' => $name,
 'before_widget' => '<div id="%1$s" class="widget %2$s">',
 'after_widget' => "</div>",
 'before_title' => '<div class="widget-title">',
 'after_title' => '</div>',
 'class' => '',
 'description' => $name
 ) );
}
function alnao_widgets_init() {
 alnao_widgets_init_widget("alnaosidebar","AlNao Side Bar");
}
add_action( 'widgets_init', 'alnao_widgets_init' );

(è molto importante che l'id del widget sia scritto tutto in minuscolo senza spazi altrimenti non funziona).

In questo modo abbiamo creato nel tema un punto-widgets che compare nella sezione amministrative, per visualizzare questo punto nelle pagine del tema bisogna scegliere la zona della pagina dove visualizzare, per esempio sostituiamo in sidebar.php l'elenco delle categorie che abbiamo sviluppato con un punto widget, il codice per visualizzare un widget chiama la funzione dynamic_sidebar, per esempio:

<?php if ( is_active_sidebar( 'alnaosidebar' ) ) : ?>
 <div id="sidebar-side" class="widget-area">
  <div id="alnaosidebar">
   <?php dynamic_sidebar( 'alnaosidebar' ); ?>
  </div>
 </div>
<?php endif; ?>

Da notate che grazie ai parametri class, after_widget, before_widget, before_title e after_title e grazie ai vari div inseriti nelle varie porzione di codice è possible personalizzare graficamente il widget con stili CSS e anche creare strutture grafiche complesse a piacimento.

Lo sviluppo di un widget parte da una classe base molto semplice e poi si modifica in base a cosa il widget stesso deve mostrare nelle pagine. Per portare un esempio concreto di un widget, in questo articolo viene creato un widget che visualizza un box con un titolo, una frase e un icona dove l'utente può scaricare un documento, quindi i parametri saranno 4: titolo da visualizzare, testo da mostrare sotto il titolo, url dell'icona per il download e l'url del documento PDF. La classe base è composta da quattro metodi e per comodità conviene metterla su un file separato per poi essere importato nella functions.php con l'istruzione:

require( get_template_directory() . '/widget/AlNaoDownloadPDF.php' );

la classe widget deve essere registrata e deve estendere la superclasse WP_Widget:

function AlNaoDownloadPDF_register(){
 register_widget( 'AlNaoDownloadPDF_widget' );
}
add_action( 'widgets_init', 'AlNaoDownloadPDF_register' );

class AlNaoDownloadPDF_widget extends WP_Widget{
 public function __construct(){ ... }
 public function form( $instance ){ ... }
 public function update( $new_instance, $old_instance ) { ... }
 public function widget($args,$instance){ ... }
}

il metodo costruttore deve richiamare il costruttore della superclasse passando dei parametri importanti per il funzionamento, tra cui il nome e l'id

parent::WP_Widget( 
 'AlNaoDownloadPDF', //id
 'AlNao DownloadPDF', //name
 array('description' => 'AlNao widget per scaricare PDF') //descrizione
 );

il metodo form deve creare i parametri del widget e visualizzare, con il metodo echo, il contenuto del form che verrà creato nella parte di amministrazione quando il widget viene associato ad un punto

public function form( $instance ){
 $defaults = array(/* Impostazioni di default del widget */
 'title' => 'Manuale Debian', //default
 'testo' => 'Scarica il manuale di Alberto Nao gratuitamente', //default
 'urlPDF' => 'https://www.alnao.it/alnaodebianhandbook.pdf', //default
 'urlICO' => 'https://www.alnao.it/wordpress/Images/pdf_download.jpg' //default
 );
 $instance = wp_parse_args( (array) $instance, $defaults );
 echo $this->echoFormInput($this->get_field_name('title'), 
          $this->get_field_id('title'),"Titolo:",$instance['title']);
 echo $this->echoFormInput($this->get_field_name('testo'), 
          $this->get_field_id('testo'),"Testo:",$instance['testo']);
 echo $this->echoFormInput($this->get_field_name('urlPDF'), 
          $this->get_field_id('urlPDF'),"Url PDF:",$instance['urlPDF']);
 echo $this->echoFormInput($this->get_field_name('urlICO'), 
          $this->get_field_id('urlICO'),"Url ICO:",$instance['urlICO']);
}

il metodo update viene invocato quando, nella parte amministrativa, vengono salvati i parametri del widget, questo metodo permette di controllare e manipolare quanto inserito dall'utente, se non servono modifiche ai dati il metodo risulta molto semplice:

public function update( $new_instance, $old_instance ) {
 $instance = $old_instance;
 $instance['title'] = strip_tags( $new_instance['title'] );
 $instance['testo'] = strip_tags( $new_instance['testo'] );
 $instance['urlPDF'] = strip_tags( $new_instance['urlPDF'] );
 $instance['urlICO'] = strip_tags( $new_instance['urlICO'] );
 return $instance;
}

il metodo widget viene invece invocato nelle pagine del sito e serve proprio per visualizzare il componente nelle pagine, in questo metodo si hanno a disposizione nell'array di nome instance tutti i parametri impostati in precedenza e inoltre le variabili before_widget, after_widget, before_title e after_title che vengono impostate nel punto-widget con la funzione register_sidebar come visto nell'articolo precedente, da notare che se non vengono visualizzate in questo metodo, queste variabili risultano inutili e mai utilizzate ed è buona norma utilizzarli perché i widget e i temi sono due cose separate e l'uso delle quattro variabili impostate dal tema permette al widget di adattarsi alla grafica del tema visto che:

public function widget($args,$instance){
 extract( $args );
 $title = apply_filters('widget_title', $instance['title'] );
 echo $before_widget;
 echo $before_title . $title . $after_title;
 ?>
 <div class="">
  <div class="alNaoDownloadPDFtesto"><?php echo $instance['testo']; ?></div>
  <div >
   <a href="<?php echo $instance['urlPDF']; ?>" target="_blank"
    ><img border='0' src='<?php echo $instance['urlICO']; ?>' 
    style="max-width: 200px;"/>
   </a>
  </div>
 </div>
 <?php
 echo $after_widget;
}

nella classe poi conviene aggiungere un metodo d'utilità per visualizzare un input-text di un form ma tale metodo non fa parte della struttura base della WP_Widget

public function echoFormInput($name,$id,$testo,$value){
 $s="<p><label for=\"".$id."\">".$testo."</label>";
 $s.="<input type=\"text\" id=\"".$id."\" name=\"".$name."\" style='width:300px;'"; 
 $s.=" value=\"".$value."\" />";
 $s.="</p>";
 return $s;
}

Nei precedenti articoli abbiamo creato i file header.php e footer.php che sono comuni a tutte le pagine e poi nelle varie pagine abbiamo gli abbiamo importati con le istruzioni get_header e get_footer, è possibile creare file header e footer personalizzati e poi, nella sezione pagine nel pannello di controllo di WordPress, quale footer utilizzare. Per creare questi componenti particolari bisogna creare un file php, dal nome (nome)-page-template.php, possiamo metterlo nella radice del nostro template ma conviene farsi una cartella separata se ci sono più di un template per questione di ordine tra i vari file, questo file rispecchia tutte le caratteristiche del file page.php con la sola differenza che deve cominciare con il commento

<?php
/**
 * Template Name: AlNao Page Template
 */
?>

questo commento deve essere la prima riga del file e indica a wordpress che si tratta di un file di tipo template e non di un file php qualunque, in questa pagina è possibile scrivere codice diverso da quello della page.php standard ma per differenziare intestazione e piè-pagina, si deve aggiungere un parametro "nome" alle istruzioni

<?php get_header("alnaoAlternative"); // includi l'header personalizzato?>
<?php get_footer("alnaoAlternative"); // includi il footer personalizzato?>

e poi procedere con la creazione di due nuovi file

header-alnaoAlternative.php
footer-alnaoAlternative.php

che devono essere posizionati nella cartella radice assieme al header.php e footer.php, una volta fatto questo nella sezione di amministrazione, nella pagina di modifica di una pagina compare la possiblità di modificare il template della pagina e basta selezionare il nuovo template per attivarlo per questa specifica pagina.

La creazione di un sito wordpress multilingua è una cosa indispensabile per chi vuole raggiungere una utenza più ampia, in particolare per noi latini che vogliamo rendere il nostro sito accessibile anche a chi non parla la nostra lingua e che conosce l'inglese, una delle scelte più radicali è quella di fare il sito direttamente in inglese ma se si vuole realizzare un blog in più lingue si hanno a disposizione varie opzioni: la prima scelta è di avere due istanze di wordpress installate parallelamente e dividere i contenuti per lingua, la seconda scelta è quella di utilizzare una unica istanza dei plug-in dedicati alla multilingua ma la creazione di più istanze parallele del sito ha due grandi svantaggi: il dover gestire il doppio degli articoli, pagine e contenuti e di avere due wordpress da aggiornare costantemente e questo può risultato molto scomodo.

Per fare la scelta corretta bisogna considerare i vari fattori, prima di tutto bisogna decidere se avere lo stesso dominio o avere domini separati, nel primo caso bisognerà distinguere le lingue con sottodomini di secondo livello e/o sottodirectory questo per poter decidere fin da subito la forma del permalink di wordpress, bisogna sempre tenere a mente che la versione della lingua nel sito deve essere univoca e bisogna assolutamente evitare di mischiare le lingue, infatti se viene usato una singola istanza di wordpress il database sarà unico con in conseguente rischio di dimenticanze o minestroni di lingue. Bisogna tenere a mente anche che la maggior parte dei temi disponibili non supporta il multilingua e spesso bisogna modificarli perdendo molto tempo e bisogna tenere conto che la maggior parte dei plug-in per il multi-lingua gestiscono solamente due lingue e se vogliamo più di due lingue dobbiamo scegliere qualcosa di professionale (e purtroppo a pagamento).

Il principale plugin gratuito per il multilingua è qTranslate X e lo consiglio vivamente per chi ha un piccolo sito e un piccolo progetto con due lingue ma si si vuole creare qualcosa di grandi dimensioni bisogna utilizzare il plugin professione (e a pagamento) WPML in quanto compatibile con ogni tema wordpress che utilizza le API di wordpress con la gestione multilingue e permette di gestire tutti i componenti del sito: articoli, temi, pagine, campi e widget.

Lo sviluppo di un nuovo plugin dedicato alla gestione del multilingua è una delle cose più complesse su wordpress e scriverò sicuramente un articolo a riguardo.

Il sistema base per gestire il multilingua usato in WordPress è GNU Gettext che prevede la creazione di due file di tipo .mo (Machine Object, file di linguaggio compilato) e .po (Portable Object, sorgente editabile) e l'architettura mette a disposizione alcune funzioni per le traduzioni:

__($testo,$dominio)

(la funzione è proprio due volte il carattere underscore): il primo parametro è il testo da tradurre mentre il secondo è il riferimento al file dove caricare la traduzione, se il secondo parametro viene omesso, significa che vogliamo utilizzare il file di linguaggio del core di WordPress, usato questa funzione bisogna sempre ricordare che viene selezionata la traduzione nel linguaggio impostato su WordPress ma se dovesse presentarsi qualunque problema, la funzione ritorna comunque quanto scritto nel primo argomento.

_e($testo,$dominio)

esattamente come la funzione appena vista, ma invece di ritornare la traduzione la stampa a video, in pratica è l'abbreviazione delle istruzioni "echo __($testo,$dominio)"

Per esempio si può usare la funzione in un codice php:

$description=__('This widget show the last post','NaoTextDomain');

oppure usarlo all'interno di una pagina

<h2><?php _e('Title', 'NaoTextDomain'); ?>:</h2>
<?php _e('Title for last post', 'NaoTextDomain'); ?>

Provando questi esempi non ritornerà nessuna traduzione perché non è stato creato nessun file di configurazione e, se non trovate, vengono visualizzate i valori di passati alle funzioni, se però viene provata la funzione _e con "Title" ma senza nessun dominio, la traduzione compare, questo perché se il secondo parametro è vuoto, l'architettura cerca all'interno dei propri file le traduzioni dove la parola "Title" è stata tradotta con "Titolo" (ovviamente questo succede se avete WordPress in italiano, altrimenti verrà caricata la label nella lingua corrispondente). Per caricare dei file di traduzioni su wordpress bisogna usare la funzione

load_plugin_textdomain($dominio,$assoluto,$relativo)

che necessita di tre parametri: il dominio (nel nostro caso NaoTextDomain), il percorso assoluto (deprecato, quindi scriveremo false) e il percorso relativo della cartella del linguaggio; conviene chiamare questo metodo nel costruttore di classe:

load_plugin_textdomain('NaoTextDomain', false, dirname( plugin_basename( __FILE__ )) . '/languages');

indicando così che tutta la cartella languages deve essere importata. Per quanto riguarda i file di tipo po è possibile usare un qualsiasi editor dedicato, per esempio poedit che è disponibile su tutte le piattaforme, unico accorgimento i nomi dei file devono essere chiamati con uno standard particolare, per esempio:

NaoTextDomain-it_IT.po

cioè oltre al dominio, nel nome dei file, bisogna indicare la sigla della lingua.

Bisogna sempre tenere presente che questo sistema permette di tradurre tutte le scritte "fisse" del tema ma assolutamente non gestisce i contenuti del blog, per quei contenuti bisogna adottare tecniche diverse salvando sul database le varie versioni dei contenuti.

Il framework bootstrap è sicuramente il più usato per la creazione di siti di tipo responsive e fortunatamente la creazione di temi con WordPress è facile e veloce grazie soprattutto al fatto che bootstrap è molto semplice da programmare. Prima di tutto bisogna creare un tema vuoto, per esempio AlNaoBootTheme e creiamo i file base, dopo aver creato il css vuoto e il file immagine, si parte del file header.php, per esempio:

<?php 
/* www.alnao.it
 * wordpress theme "AlNaoBootTheme"
 * */
?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" <?php language_attributes(); ?>
<head>
  <meta http-equiv="Content-Type" content="<?php bloginfo('html_type'); ?>; charset=<?php bloginfo('charset'); ?>" />
  <meta name="generator" content="WordPress <?php bloginfo('version'); ?>" /> <!-- leave this for stats -->
  <meta charset="<?php bloginfo( 'charset' ); ?>" />
  <title><?php bloginfo('name'); ?> <?php wp_title(); ?></title>
  <link rel="stylesheet" href="<?php bloginfo('stylesheet_url'); ?>" type="text/css" media="screen" />
  <link rel="stylesheet" href="http://getbootstrap.com/dist/css/bootstrap.min.css" type="text/css" media="screen" />
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
  <script src="http://getbootstrap.com/dist/js/bootstrap.min.js"></script>
  <script language="javascript" type="text/javascript"> 
    try {if(f){
      write_css('<?php bloginfo('stylesheet_directory'); ?>');
    }catch(err) {}
  </script>
  <?php wp_enqueue_script("jquery"); ?>
  <?php wp_head(); ?>
</head>
<body <?php body_class(); ?>><div class="container">
  <nav class="navbar navbar-inverse">
    <div class="container-fluid">
      <div class="navbar-header">
        <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1" aria-expanded="false">
          <span class="sr-only">Toggle navigation</span>
          <span class="icon-bar"></span>
          <span class="icon-bar"></span>
          <span class="icon-bar"></span>
        </button>
        <div id="logo">
          <?php if ( get_header_image() != "" ) { ?>
            <a class="brand" href="<?php echo get_option('home'); ?>"><img src="<?php header_image(); ?>" alt="" /></a></html>
          <?php }else{ ?>
            <h1><a class="brand" href="<?php echo get_option('home'); ?>"><?php bloginfo('name'); ?></a></h1>
          <?php }?>
        </div>
      </div>
      <div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
        <ul class="nav navbar-nav">
          <li><a href="<?php bloginfo('url'); ?>">Home</a></li>
          <?php wp_list_pages(array('title_li' => '', 'exclude' => 4)); ?>
        </ul>
      </div><!--/.nav-collapse -->
    </div>
  </nav>
  <?php if ( is_active_sidebar( 'alnaohead' ) ) : ?>
  <?php dynamic_sidebar( 'alnaohead' ); ?>
  <?php endif; ?>
</div><!-- container della header -->
<div class="container">

dove in questo esempio abbiamo importato nello head tutte le parti necessarie a bootstrap per funzionare come i css e jquery, per fare questo facciamo riferimento al sito ufficiale di jquery e bootstrap ma conviene sempre farsi una copia nel proprio tema e poi importarla, per esempio i css possono essere importati nel file style.css con l'istruzione

@import url('bootstrap/css/bootstrap-responsive.css');

Nel corpo della pagina disegnato da header.jsp abbiamo semplicemente creato una barra in alto alla pagina con il titolo del sito e il menù che sarà responsivo grazie a bootstrap, alla fine abbiamo anche aggiunto una sidebar se censita.

Poi bisogna creare la pagina footer.jsp

</div><!-- content aperto a fine header per il corpo della pagina-->
<div class="container">
  <?php if ( is_active_sidebar( 'alnaofooter' ) ) : ?>
    <?php dynamic_sidebar( 'alnaofooter' ); ?>
  <?php endif; ?>
  <footer>
    <nav class="navbar navbar-inverse">
      <div class="navbar-header"><p class="navbar-text">
      <?php bloginfo('name'); ?> &copy; <?php echo date("Y") ?>
        <a href="mailto:<?php echo get_option('admin_email');?>" ><?php echo get_option('admin_email');?></a> 
        <?php if (get_option('AlNaoTheme_footerPolicy')!="") {?>
          - <a href="<?php echo get_option('AlNaoTheme_footerPolicy'); ?>">Policy</a>
        <?php } ?>
        - <a href="https://it.wordpress.org/" target="_blank">WordPress</a> 
        theme by <a href="https://www.alnao.it" target="_blank" class="">AlNao</a>
      </p></div>
    </nav>
  </footer>
  <?php wp_footer(); ?>
</div> <!-- container del footer -->
</body>
</html>

Anche in questa pagina abbiamo creato una barra (per il footer appunto), prima abbiamo posizionato la solita sidebar se attiva.

Nella function dobbiamo aggiungere la registrazione delle sidebar, per esempio

function alnao_widgets_init_widget($id,$name){
  register_sidebar(array(//register_sidebar( array(
    'id' => $id,//Must be all in lowercase, with no spaces (default is a numeric auto-incremented ID)
    'name' => $name,
    'before_widget' => '<div id="%1$s" class="widget panel panel-default %2$s">',
    'after_widget' => '</div></div>',
    'before_title' => '<div class="panel-heading widget-title"><h4>',
    'after_title' => '<h4></div><div class="panel-body">',
    'class' => '',
    'description' => $name
  ) );
}

Poi per quanto riguarda la sidebar basta creare il file:

<?php if (get_option('AlNaoTheme_sidebar')=="SI"){?>
  <div class=" col-md-3"><!-- sidebar -->
    <?php if ( is_active_sidebar( 'alnaosidebar' ) ) : ?>
    <?php dynamic_sidebar( 'alnaosidebar' ); ?>
    <?php endif; ?>
    <div class=" hidden-xs hidden-sm"> <?php echo get_option('AlNaoTheme_box');?> </div>
  </div>
<?php } ?>

dove AlNaoTheme_box è un mio box speciale che viene nascosto nei dispositivi più piccoli.

Nel prossimo articolo le pagine di dettaglio per completare il nostro tema con bootstrap.

Al nostro tema bootstrap che abbiamo visto nella prima parte dobbiamo aggiungere ancora la pagina index, la pagina page e la pagina single, le tre pagine saranno molto simili tra loro, in questo articolo portiamo un semplice esempio della index da cui prendere spunto:

<?php get_header(); ?>
 <?php if ( is_active_sidebar( 'alnaoindex' ) ) : ?>
 <?php dynamic_sidebar( 'alnaoindex' ); ?>
 <?php endif; ?>
 
<div id="body" class="row"> <!--importante la classe row -->
  <div id="contenutoIndex" class=" col-md-9 " >
    <?php if (have_posts()) : ?>
      <?php while (have_posts()) : the_post(); ?>
        <div class=" ">
          <h2 class="grid-intro">
            <a href="<?php the_permalink() ?>" rel="bookmark" 
               title="<?php the_title(); ?>" class="linkTitle">
               <?php the_title(); ?>
            </a>
          </h2>
          <p>
            <?php the_content('Read'); ?>
          </p>
          <p>
             Pubblicato il <?php the_time('d/m/Y') ?> 
             da <?php the_author() ?>
             nella categoria <?php the_category(', ') ?>
             <?php edit_post_link('Edit','----- ',''); // edit post ?>
          </p> 
        </div>
      <?php endwhile; ?>
    <?php else : ?>
      <div class="elementoSito">
        <h2 align="center">404 Not Found</h2>
        <p align="center">Sorry.</p>
      </div>
    <?php endif; ?>
  </div>
  <?php if ((is_active_sidebar( 'alnaosidebar' ))){ get_sidebar(); } ?>
</div>
<?php get_footer(); ?>

E' presente un plugin gratuito per la configurazione di Google Analytics e l'invio costante dei dati da un sito wordpress al sistema di statistiche de Google. La configurazione è banale e può essere eseguita da chiunque visto che non bisogna scrivere nessuna riga di codice php.

Per prima cosa bisogna creare un profilo Google e accedere al sito delle Analytics, in questo sito sarà possibile vedere le statistiche dei siti collegati e configurare nuovi siti. Nella videata principale, in basso a sinistra è presente il menù "amministrazione", a volte presente con un icona ingranaggio. Da qui è possibile creare uno o più profili (account), possibilità utile se si deve gestire più siti differenti. All'interno di ogni account è possibile creare le proprietà (traduzione pessima dall'inglese) inserendo la lingua, il fuso orario e la moneta per lo studio delle varie statistiche.

In fase di creazione della proprietà è fondamentale cliccare sul link "Mostra opzioni avanzate" e poi selezionare la voce "Crea una proprietà Universal Analytics", selezionando l'opzione "Crea solo una proprietà Universal Analytics". Successivamente sarà possibile cancellare una proprietà dal sottomenù "Impostazion proprietà" cliccando sul bottone "Sposta nel cestino" che poi cancellerà il sito dopo un mese.

Una volta creata e configurata una proprietà, comparirà nell'elenco con il relativo codice UA che servirà in fase di configurazione del WordPress. Attraverso il sottomenù "Gestione dell'accesso alla vista" è possibile accedere all'elenco degli utenti (google) che possono vedere le statistiche, qui è possibile aggiungere altri utenti per la visualizzazione delle statistiche, per esempio se si vuole far visualizzare le statistiche a più persone.

All'interno del pannello di amministrazione di WordPress è necessario installare il plugin "MonsterInsights – Google Analytics" e poi attivarlo. In fase di attivazione si può tranquillamente scegliere la versione base gratuita e inserire nel campo "Website Profile" il codice UA creato precedente da Google che è possibile recuperare dalla vista proprietà creata poco sopra.

A questo punto il sito WordPress è collegato alle Analytics, basterà attendere pochi minuti e compariranno le statistiche aggiornate sul portale Google.

Il regolamento generale sulla protezione dei dati, in sigla RGPD (o GDPR dall'inglese General Data Protection Regulation), è la normativa europea e italiana che ogni sito web deve (o dovrebbe) rispettare , le regole sono a volte contorte e spesso si trovano notizie contrastanti riguardo la normativa, il testo completo in italiano è disponibile al sito ufficiale.

La nuova direttiva del garante della privacy, varata nel 2021, prevede alcune differenze rispetto alla versione precedente, infatti la precedente versione dava la possibilità di gestire l'opzione "accetta tutti i cookies" mentre ora l'utente deve essere informato di quali sono i cookies installati nel dettaglio con la possibilità di selezionarli ed eventualmente disattivarli. Un'altra grande differenza rispetto alla versione precedente del regolamento è che ora bisogna creare un evidente discontinuità su come visualizzare l'informativa privacy per informare l'utente che sta per installare dei cookies e quali.

Per impostare un banner velocemente in un sito WordPress si possono usare diversi plugin, il più famoso è il "GDPR Cookie Consent" disponibile nello store dei plugin ufficiali, attualmente è segnato come il più usato con più di 50.000 siti. Il componente è gratuito con la possibilità di acquistare una versione a pagamento per aggiungere statistiche e qualche funzionalità minore al costo di 30 euro circa per sito web.

Dopo l'installazione compare nel menù la voce dedicata dove, nella voce impostazioni è possibile abilitare il banner GDRP oppure il CCPA (per la policy Californiana). Nel banner "personalizza la barra" è possibile modificare il testo del banner con la possibilità di modificare anche gli stili e la posizione dei bottoni. Inoltre è possibile anche cambiare il tipo tra Banner, Popup oppure Widget. Con "personalizza i pulsanti" è possibile modificare lo stile e i testi dei vari pulsanti che si trovano nel sito mentre in "Guida di aiuto in linea" è possibile vedere alcuni meta-tag che è possibile nelle pagine.

Nella voce di menù "elenco dei cookie" compaiono tutti i coockies presenti nel sito mentre su "categorie di cookie" sono elencate le categorie, per entrambe le liste è possibile modificare e aggiungere elementi.

La voce "Scansione Cookie" invece è un piccolo tool per la creazione automatica dell'elenco citato poco sopra, infatti non bisogna censire tutti i cookies usati ma basta lanciare il tool e dopo pochi minuti arriva una mail di conferma che i cookies sono censiti nella vista dedicata, da notare che il plugin obbliga l'utente ad inserire una mail e iscriversi ad una newsletter.

Sono presenti anche altre due voci di menù "Generatore della policy" e "Panoramica sulla privacy", che sono usati per la creazione delle pagine previste dal GDPR ma quelle pagine consiglio di crearle a mano come pagine del sito.

In una pagina è possibile visualizzare l'elenco dei cookies generati in automatico con il meta-tag :

• [cookie _audit] per visualizzare la tabella completa con l'elenco dei biscotti
• [cookie _settings] per visualizzare il bottone della modifica delle impostazioni

Tutti gli altri meta-tag sono disponibili nella guida on line e possono essere usati in tutto il sito.

Nota: questo è solo un articolo informativo e non una guida giuridica, potrebbe non essere precisa e potrebbe non essere al passo con eventuali aggiornamenti normativi, non si assumono responsabilità sull’uso che viene fatto di quanto scritto nell’articolo.

Il SiteMap è una pagina web o un file che contiene l'elenco di tutti i link per accedere a tutti i contenuti di un sito web. Lo standard XML dei SiteMap è stato definito da Google per facilitare e ottimizzare l'algoritmo crawler del motore di ricerca che, grazie alle informazioni contenute nel XML, può eseguire ricerche veloci ed efficenti. 

Con WordPress è possibile scaricare e attivare un plugin "XML Sitemap & Google News plugin" che genera automaticamente il xml di riferimento disponibile al link

<dominio>/sitemap.xml

all'interno del quale si possono trovare quattro sottolink: la root, elenco degli articoli, elenco delle pagine e informazioni sull'autore. Informazioni che poi vengono usate dal motore di ricerca per accedere in maniera ottimale ai contenuti di un sito sviluppato con WordPress.

Nella Google Search Console è possibile impostare il path del sitemap proprio nella voce dedicata nella console, in questo modo sarà disponibile un elenco di tutte le pagine scansionate grazie al SiteMap e lo stato di tutte le scansioni dell'algoritmo.

Esistono diversi modi per eseguire il backup di un sito fatto in wordpress: il metodo più semplice è quello di eseguire copia di tutte le due componenti. Per prima cosa bisogna eseguire una copia del databse mysql con il comando mysqldump e poi una copia dei file prendendo tutto il contenuto del filesystem dove è posizionato il sito. Questo metodo risolta molto veloce e semplice se il sito è di piccole di dimensioni.

Un secondo metodo molto usato è eseguire il backup del db dalla console di amministrazione, all'interno della voce "Strumenti" è presente una funzionalità di Backup che permette di copiare in sicurezza tutti i dati del dabatase senza l'uso del comando mysqldump, questo metodo sicuramente è indicato per chi non ha molta dimestichezza con i comandi da riga di comando del database.

Il metodo più efficace tuttavia è l'uso di plugin dedicati, in particolare il "Duplicator" di "Snap Creek" è disponibile nella sezione plugin con una versione base gratuita. Dopo l'installazione del plugin compare una nuova voce dedicata nel menù di amministrazione del sito. La funzionalità princiapale è la prima nella lista del menù e permette la gestione dei pacchetti: oltre alla lista dei pacchetti creati, è possibile creare un nuovo pacchetto.

La procedura di creazione di nuovo pacchetto è molto semplice è chiede solamente un nome simbolico, poi i passi sono automatici. Durante le varie fasi possono comparire dei warning che di solito possono essere saltati ed ignorati. Una volta creato il pacchetto sarà possibile scaricare il pacchetto in formato daf e il suo file installer.php, in caso di errore di download per file troppo grande, sarà necessario collegarsi via ftp ed eseguire il download manualmente dalla cartella

<sito>/wp-content/backups-dup-lite/

Nota: oltre al pacchetto daf sono disponibili anche altri file che possono essere scaricati: il file sql del databse, un log e un report in formato json, questi sono solo file di appoggio ma è interessante averli per poter risolvere eventuali errori in fase di export e import.

Una volta scaricato il pacchetto e il file installer.php questo sono pronti per il restore in un altro server.
Basta infatti avere una cartella web disponibile su un server come Apache ed è necessario un server database mysql pronto. Una volta posizionato il daf e il file installer in una cartella del server basterà lanciare via browser

<nuovoUrl>/installer.php

e si presenterà una procedura guidata che in pochi passi permetterà di installere la copia nel server, sarà necessario anche avere accesso al databse quindi sarà necessario avere credenziali amministrative per accedere al database.

La procedura eseguita con questo plugin può presentare alcuni difetti:

• i pacchetti def possono essere molto grandi e quindi bisogna prestare attenzione se lo spazio all'interno del server è limitato
• la velocità di creazione del pacchetto risulta molto molto lenta e può necessitare anche qualche ora
• per eseguire la procedura di restore, nella cartella del server, sarà necessario avere le autorizzazioni necessarie, in un ambiente linux sarà necessario avere i permessi di scrittura per tutti gli utenti, quindi i 777 come diritti sulla cartella. Il problema si presenta quando non è possibile assegnare questo tipo di permessi alle cartelle del web-server.

Il plugin mette a disposizione altre funzionalità: nella videata strumenti è possibile controllare i dati archiviati e le impostazioni del server. Nelle impostazioni del plugin è possibile gestire anche informazioni riguardo al pacchetto, in teoria è possibile anche cambiare il formato del pacchetto da daf a zip ma questa operazione è sconsigliata dai creatori del plugin.

La versione a pagamento (chiamata pro) mette a disposizione anche la creazione di pacchetti in maniera schedulata e l'invio automatico, opzioni indispensabili per siti professioni o aziendali.

Talvolta è necessario impostare delle regole di Redirect con codice HTTP 301 e 302 , sia per oscurare una pagina temporaneamente, sia per necessità di navigazione semplice. Per creare queste regole di Redirect si può usare uno dei tanti plugin disponibili, il più famoso è il "301 Redirects – Easy Redirect Manager".

Una volta scaricato ed installato, questo plugin mette a disposizione una pagina di configurazione nella voce di menù Impostazioni, dove è visibile la lista delle regole esistenti e la possibilità di configurare una nuova regola. Ovviamente tali regole sono configurabili solo url interni al dominio in cui è in installato WordPress ma non è necessario che sia una pagina esistente: è possibile censire url non esistenti realmente.  

Questo plugin mette a disposizione anche le statistiche di esecuzione della regola, così da poter tenere sotto controllo quante volte viene eseguita, con il solo difetto che vengono contate anche le esecuzioni dell'amministratore del sito WordPress.

Questo plugin ha anche una versione a pagamento che permette di vedere il grafico delle regole e non solo il numero totale di esecuzioni. Inoltre la versione pro prevede di report schedulati inviati tramite mail con le statistiche di esecuzione e la possibilità di creare dei 404 e dei report in formato PDF.

Su un sito WordPress la sezione amministrativa è di default impostata al URL "<dominio>/wp-admin" ed è possibile accedere a questo URL da tutti, compreso qualcuno che potrebbe tentare di entrare nella sezione amministrativa anche se non autorizzato.

Per evitare accessi indesiderati si può creare una regola di rete sul server web per limitare l'accesso ad indirizzi IP specifici oppure l'alternativa è cambiare la URL modificando il valore di default con un altro che dovrebbe essere molto più difficile da trovare e bucare.

Per modificare la URL della sezione si può usare il plugin gratuito "WPS Hide Login" scaricabile dallo store dei plugin. Una volta installato, nella menù di amministrazione compare una nuova voce nel sotto-menù "impostazioni".

Con questo plugin è possibile impostare due parametri specifici.

• Nuovo URL che sostituirà il valore di default "wp-admin"
• Pagina di destinazione del "wp-admin", che di solito viene impostata sulla pagina 404 (not found).

Da notare che questo plugin cambia solo la pagina di login: dopo la login dal nuovo URL impostato, la sezione amministrativa risponderà sempre da wp-admin e dalle pagine di questa cartella, questo perchè viene cambiato solo la url di login, non il nome della cartella fisica dove sono contenuti i file php della sezione amministrativa.

Una delle esigenze maggiori di tutti i siti web è comparire in cima alle ricerche nei motori di ricerca, in particolare del motore di Google che risolta essere il più usato a livello mondiale e anche a livello italiano.
Prima di procedere con la configurazione bisogna assicurasi di avere attivato alcune configurazioni sul sito per aumentare l'efficienza del motore, prima di tutto bisogna avere una site-map completa e funzionante, come descritto in un altro articolo di questa serie. Altri accorgimenti: SEO e i meta-tag saranno spiegati nei prossimi articoli.

Per procedere con la configurazione bisogna avere un utenza google e bisogna creare la proprietà del dominio accedendo al link: https://search.google.com/search-console/welcome

In questo primo passo bisogna dimostrare a google che si possiede effettivamente quel dominio, per evitare che i siti vengano collegati a console non autorizzate. Per questa verifica si possono avere diversi metodi:

• un file HTML da scaricare dalla console e depositare nella cartella del sito: all'interno dei siti WP è possibile depositarlo via SFTP o creando il file a mano se si dispone delle autorizzazioni
• un tag HTML da porre all'interno di un sito: all'interno dei siti WordPress è possibile farlo grazie al plugin "Meta tag manager" o simili
• google analytics o google tag manager: all'interno dei siti WordPress è possible configurare la G4A o il Google Tag, come spiegato nei prossimi articoli di questa serie
• record DNS: non è possibile farlo dal sito WordPress ma è una configurazione del record DNS eseguita dal provider che gestisce il dominio, scelta sconsigliata per chi non dispone del controllo del server e dei DNS del dominio

Dopo la verifica della proprietà nella console di GoogleSearch, sarà possibile configurare la site-map nella omonima voce di menù dove si deve inserire l'url del file xml che di solito si trova al <dominio.it>/sitemap.xml, una volta eseguito questo aggancio, in un paio di giorni sarà possibile vedere la copertura della mappa all'interno del motore di ricerca. Una possibilità per aumentare inizialmente la copertura è usare la voce "Controlla URL" dove si può inserire l'indirizzo specifico di una pagina all'interno  del sito per richiedere al motore di ricerca l'indicizzazione prioritaria, purtroppo questa funzionalità è stata ridimensionata nel tempo visto l'abuso che ne veniva fatto.

Dopo la registrazione il motore di ricerca ci mette qualche giorno per indicizzare un sito, è possibile monitorare la situazione e le posizioni nella vista "rendimento" della console. Purtroppo la vista rendimento non è attendibile e spesso segnala dei posizionamenti errati o non veritieri.

Il SEO (Search engine optimization) è un fattore fondamentale per la gestione di un sito visto che lo scopo è l'aumento degli accessi grazie ad una migliore indicizzazione dei motori di ricerca. E' possibile scaricare e installare il "All In One SEO" dallo store dei plugin e poi bisogna sempre ricordarsi di attivarlo.

I passi di installazione sono semplici, nel primo viene chiesto il nome del sito di riferimento e il formato con cui si vuole che gli articoli siano indirizzati. Nel secondo passo viene richiesto il logo e i riferimento social dell'autore. Nei passi successivi non ci sono configurazioni rilevanti quindi alla fine della configurazione l'attivazione sarà completata.

Per modificare qualsiasi impostazione basta accedere alla voce di menù "General Settings" oppure "Search Apparances". Alcune funzionalità, come la configurazione di Redirect, risultano attivabili con la versione Pro a pagamento ma sconsiglio l'uso di questi tool in quanto esistono altri plugin specifici per queste funzionalità.

Per verificare il corretto funzionamento del plugin basta accedere in un qualsiasi social e visualizzare la condivisione di un articolo, in questo caso il risultato atteso e visualizzare il logo configurato nel plugin e il formato visualizzato dovrebbe essere quello impostato in fase di configurazione iniziale.

E' possibile configurare un Google TAG (GTM) all'interno di un sito WordPress. Tale tag può essere utile per una svariata di motivi e rimando alla documentazione ufficiale per un approfondimento del tema.  All'interno di un sito è possibile scaricare il plugin "Google Tag Manager for WordPress" che è attualmente gratuito e molto usato, una volta installato bisogna sempre ricordarsi di attivarlo.

Nel menù impostazioni della sezione amministrativa del sito compare una nuova voce di menù "google tag manager". All'interno sono presenti diversi tab con diverse proprietà ma la più importante è il valore del "Google Tag Manager ID" dove l'amministratore può configurare il tag generato dalla console Google. Una volta impostato il valore del tag, questo viene attivato subito in automatico e poi basta usare la console di GTM per lo sviluppo grazie al tag specifico.

Da notare che default anche questo plugin attiva il famoso SiteMap usato nella Google Search Console ma questo non dovrebbe andare in contrasto con il plugin già installato.

In alternativa al Google TAB è possibile impostare direttamente le google Analitics senza usare GTM.
Per questo bisogna scaricare e configurare un plugin specifico, per esempio il famoso "Google Analytics for WordPress by MonsterInsights".

Questo plugin crea la voce di menù Insights, all'interno della quale sono disponibili vari tab specifici.
Nella vista rapporti delle visite dove è possibile visualizzare le statistiche delle analitics di visite, non solo come dato aggregato ma anche come viste specifiche come la pagina più visitata.

Nel sotto-menù impostazioni è possibile configurare il codice della GAv4 che attualmente è la versione più recente delle analitics, configurabile dalla console di google.

Per rispettare la normativa europea sulla protezione dei dati e sulla privacy (RGPD & GDPR), è indispensabile attivare la funzionalità di anonimizzazione degli ip dei visitatori del sito web, per attivar questa opzione basta accedere alle impostazioni e attivare la spunta che, purtroppo di default è disattivata.

Talvolta è necessario cambiare l'url del sito web, questo può essere necessario non solo per un cambio di dominio ma anche in fase di copia di un sito da un dominio ad un altro. Un esempio classico di utilizzo di questo metodo è l'esecuzione di una copia da produzione ad un ambiente di test o viceversa. E' possibile usare il plugin duplicator per eseguire copia e ripristino di un sito ma una volta copiato il path generale del sito viene cambiato dal plugin ma eventuali link interni alle pagine e agli articoli non viene cambiato.

Per eseguire il cambio su tutti gli articoli e su tutte le pagina è possibile usare il plugin "Better Search Replace" che può essere scaricato e attivato dallo store del plugin. Nella unica pagina di questo plugin è possibile impostare "Cerca per" e "Sostituisci" che funziona un po' come cerca-sostituisci dei normali applicazioni desktop ma questo viene effettuato sulle tabelle selezionato nell'elenco, un utente meno sperto può selezionate tutte le tabelle. Una opzione molto interessante è l'ultimo checkbox disponibile con il testo "nessun cambiamento verrà fatto al database", selezionando questa opzione viene fatta solo una ricerca e l'utente può controllare la quantità di volte il valore ricercato compare nella base dati.

Un possibile uso di questo plugin è la rimozione di nomi non graditi o ricerca di parole chiave specifiche, infatti con la ricerca è possibile visualizzare quante volte un testo specifico compare, con la possiblità di selezionare l'opzione "nessun cambiamento" per avere solo un report senza eseguire nessuna modifica. Un ulteriore utilizzo è lo spostamento da http ad a https dei contenuti, per esempio se nelle pagine le immagini sono inserite con http, è possibile cambiare tutte le immagini a tutti i contenuti con pochi click.

Uno dei plugin molto utili nel caso di siti con pagine molto lunghe è il famoso "scolltop", cioè l'aggiunta nel sito di un elemento che permetta all'utente di andare da qualsiasi punto della pagina al top senza dover eseguire lo scroll. Un idea potrebbe essere quella di sviluppare un plugin custom ma ci sono moltissimi plugin già pronti che possono essere configurati con pochi clock nel pannello di amministrazione del sito.

Il più usato è il "WPFront Scroll Top" di Syam Mohan, che permette di modificare molte configurazioni come il posizionamento, l'opacità, la durata, lo stile e la posizione. Questo plugin permette anche di poter scegliere quale icona usare e la possibilità di caricare una immagine personalizzata. 

Se un sito WordPress è gestito da più persone, può essere necessario creare profili specifici per persone che dovrebbero avere le autorizzazioni a modificare solo alcune pagine o alcuni articoli. Per esempio una persona che si occupa di eventi aziendali dovrebbe poter modificare solo le pagine specifiche senza l'autorizzazione di modificare i dato societari o le pagine della sezione commerciale. Per fare questo si può usare un famoso plugin "PublishPress Permissions" di PublishPress installabile gratuitamente della console di WordPress.

I passi eseguire per limitare ad un utente le autorizzazioni solo a determinate pagine è:

• creare l'utenza e impostarla come "Author" nel caso questa utenza debba avere anche le autorizzazioni per caricare i media
• il plugin crea una nuova voce di menù "Autorizzazioni" dove è possibile creare un gruppo specifico, per esempio "EditorLimitati"
• bisogna ricordarsi di modificare il gruppo immediatamente perché il plugin potrebbe non salvare correttamente se fatto in seguito
• nella vista sottostante sarà possibile selezionare le utenze che devono appartenere al gruppo "EditorLimitati", dopo aver inserito tutte le utenze conviene salvare nuovamente per essere sicuri che tutto sia inserito correttamente
• nella pagina, nel tab "Imposta le autorizzazioni specifiche" si deve selezionare il tipo "Pagina", la azione "modifica" e si devono selezionare le specifiche pagine da abilitare
• una volta completata l'azione di selezione di tutte le pagine si può salvare nuovamente e controllare che nella lista sotto i tab compaiono tutte le pagine da abilitare, qui eventualmente è possibile rimuoverle, per aggiungerne di nuove basta usare il tab "Imposta le autorizzazioni specifiche".

Al termine di questo piccolo processo sarà disponibile un  utente con le autorizzazioni limitate. 

Di default il framework WordPress espone delle API di tipo Rest su alcuni sotto-url del sito. Queste API possono essere usate per recuperare esternamente informazioni e, se autorizzati, possono essere usate per scrivere dati e pubblicare contenuti. Queste API sono esposte dall'url: 

https://<url-sito>/wp-json/wp/v2/

e ci sono alcune API specifiche come quelle che ritornano l'elenco degli utenti

https://<url-sito>/wp-json/wp/v2/users

Queste API sono di default create ed esposte senza alcun tipo di limitazione, tuttavia è possibile installare alcune plugin per limitare l'accesso a queste risorse solo agli amministratori. Il plugin "Disable WP Rest API" è il più usato per limitare l'esposizione in internet e in particolare, quando attivato questo plugin, le API risulteranno disponibili solo per le sessione degli utenti che hanno effettuato la login amministrativa, gli accesi senza login riceve un errore del tipo

{
  "code": "rest_login_required",
  "message": "REST API restricted to authenticated users.",
  "data": {
    "status": 401
  }
}

Questo plugin è sempre conisliato se le API non sono realmente usate esternamente.

Lo sviluppo di un plugin per un WordPress è la cosa più complessa a livello di programmazione ma allo stesso la più potente visto che è possibile realizzare qualunque logica possibile all'interno di si un sito web con PHP. Per creare un nuovo plugin bisogna creare una cartella all'interno della cartella dei plugin di wordpress (wordpress/wp-content/plugins/) e bisogna creare un file php con lo stesso nome della cartella, per esempio se la cartella si chiama "alnao-handbook-pages", allora il file deve chiamarsi "alnao-handbook-pages.php".

Nel file è obbligatorio definire una serie di commenti iniziali che permettono di definire il nome e l'autore che poi sono visualizzati nell'elenco dei plugin nella console di amministrazione di AWS.

<?php
/**
* Plugin Name: AlNao Plugin
* Plugin URI: https://www.alnao.it/wordpress
* Description: Plugin to create a page from a configurable table
* Version: 1.0
* Author: AlNao
* Author URI: https://www.alnao.it/wordpress/wordpress-handbook/
*/

Come esempio, all'interno del file php, è possibile definire una semplice azione di questo plugin : visualizzare un messaggio in tutti i contenuti: basta usare la API add_action per definire una funzione richiamata in ogni contenuto del sito wordpress.

add_action( 'the_content', 'my_plugin_text' );
function my_plugin_text ( $content ) {
  return $content .= '<p>alnao-plugin-pages working!</p>';
}

Questo esempio sarà attivabile o disattivabile dall'elenco dei plugin nella sezione amministrativa ma non avrà nessuna pagina di amministrazione dedicata.

Tipicamente un plugin ha necessità di una pagina di configurazione dove impostare i vari parametri necessari per il plugin stesso, per aggiungere una pagina di amministrazione nel menù bisogna definire un metodo specifico, per esempio:

// create custom plugin settings menu
add_action('admin_menu', 'alnao_create_menu');
function alnao_create_menu() {
  //create new top-level menu
  add_menu_page('AlNao', 'AlNao', 'administrator', __FILE__, 'alnao_settings_page' , plugins_url('/images/icon.png', __FILE__) );
  //call register settings function
  add_action( 'admin_init', 'alnao_plugin_settings' );
}

E' possibile anche definire quali sono i parametri/settings del plugin per esempio

function alnao_plugin_settings() {
  //register our settings page
  register_setting( 'alnao-plugin-settings-group', 'carattere_speciale' );
}

Nel plugin è indispensabile definire un metodo che visualizzare

function alnao_settings_page() { ?>
<div class="wrap">
  <h1>AlNao Handbook plugin configuration page</h1>
  <form method="post" action="options.php">
    <?php settings_fields( 'alnao-handbook-plugin-settings-group' ); ?>
    <?php do_settings_sections( 'alnao-handbook-plugin-settings-group' ); ?>
    <table class="form-table">
      <tr valign="top">
	<th scope="row">Carattere speciale (facoltativo)</th>
	<td><input type="text" name="carattere_speciale" 
           value="<?php echo esc_attr( get_option('carattere_speciale') ); ?>" /></td>
      </tr>
    </table>
    <?php submit_button(); ?>
  </form>
</div>
<?php }

Questo esempio definisce un parametro "carattere_speciale" che verrà usato negli esempi successivi. Le API di creazione di menu add_menu_page e add_submenu_page sono ben descritte nella documentazione ufficiale.

Se è definito un parametro è possibile aggiungerlo in qualunque punto del tema con il metodo

$carattere=get_option('carattere_speciale');

e nel file del plugin è possibile definire una azione per aggiungere ad ogni pagina-contenuto un elemento per visualizzare il parametro stesso.

add_action( 'the_content', 'text_from_option' );
function text_from_option ( $content ) {
  $carattere=get_option('carattere_speciale');
  return $content .= "<p>Il carattere speciale è $carattere </p>";
}

Questo esempio ed altri più complessi sono disponibili nella documentazione ufficiale. Questa tecnica è molto usata dalla maggior parte dei plugin professionisti, alcuni dei quali sono stati anche usati nei precedenti articoli.

Nella sezione amministrativa è possibile definire una lista salvata in una tabella nel database così da essere stabile e disponibile. Per questo bisogna definire tre metodi per l'installazione e l'aggiornamento delle tabelle. Un esempio completo del metodo per definire il Database è un po' articolato ma semplice, per esempio il mio alnao_handbook è sviluppato:

global $alnao_handbook_db_version;
global $alnao_handbook_db_table;
$alnao_handbook_db_version = '1.0'; 
$alnao_handbook_db_table='alnaohandbook';
function alnao_handbook_install()
{
	global $wpdb;
	global $alnao_handbook_db_version;
	global $alnao_handbook_db_table;
	$table_name = $wpdb->prefix . $alnao_handbook_db_table;
	$sql = "CREATE TABLE " . $table_name . " (
	  id int(11) NOT NULL AUTO_INCREMENT,
	  page tinytext NOT NULL,
	  title tinytext NOT NULL,
	  post tinytext NOT NULL,
	  level int(11) NULL,
	  ordine int(11) NULL,
	  PRIMARY KEY  (id)
	);";
	require_once(ABSPATH . 'wp-admin/includes/upgrade.php');
	dbDelta($sql);
	add_option('alnao_handbook_db_version', $alnao_handbook_db_version);
	//in caso di aggiornamento da vecchia versione
	$installed_ver = get_option('alnao_handbook_db_version');
	if ($installed_ver != $alnao_handbook_db_version) {
		$sql = " TODO INSTALL UPDATE SQL SCRIPT";
		require_once(ABSPATH . 'wp-admin/includes/upgrade.php');
		dbDelta($sql);
		update_option('alnao_handbook_db_version', $alnao_handbook_db_version);
	}
}
register_activation_hook(__FILE__, 'alnao_handbook_install');

Un esempio completo del metodo per definire dei dati di default:

function alnao_handbook_install_data(){
	global $wpdb;
	global $alnao_handbook_db_table;
	$table_name = $wpdb->prefix . $alnao_handbook_db_table;
	$wpdb->insert($table_name, array(
		'page' => 'AWS',
		'title' => 'Titolo',
		'post' => 'Post',
		'level' => 1,
		'ordine' => 1		
	));
}
register_activation_hook(__FILE__, 'alnao_handbook_install_data');

Gestione degli update automatici

function alnao_handbook_update_db_check(){
  global $alnao_handbook_db_version;
  if (get_site_option('alnao_handbook_db_version') != $alnao_handbook_db_version) {
    alnao_handbook_install();
  }
}
add_action('plugins_loaded', 'alnao_handbook_update_db_check');

Per la definizione della voce di menù è indispensabile:

function alnao_handbook_admin_menu() {
  add_menu_page( 'AlNao Handbook', 'AlNao Handbook' , 'administrator', 'AlNaoHandbook_main', 'alnao_handbook_page_handler');		
  add_submenu_page('AlNaoHandbook_main', __('Add new', 'alnao_handbook'), __('Add new', 'alnao_handbook'), 'administrator', 'AlNaoHandbook_form', 'alnao_handbook_form_page_handler');
  add_submenu_page('AlNaoHandbook_main', __('Carattere', 'alnao_handbook'), __('Carattere', 'alnao_handbook'), 'administrator', 'AlNaoHandbook_carattere', 'alnao_handbook_settings_page');
  add_action( 'admin_init', 'alnao_handbook_plugin_settings' );
}
add_action('admin_menu', 'alnao_handbook_admin_menu');

function alnao_handbook_languages(){
  load_plugin_textdomain('alnao_handbook', false, dirname(plugin_basename(__FILE__)));
}
add_action('init', 'alnao_handbook_languages');

Dopo aver definito la forma della tabella è possibile sviluppare un piccolo gestionale che permetta all'utente amministratore di inserire e modificare i dati all'interno della sezione amministrativa nella pagina del plugin. Per fare questo si usa un plugin ufficiale di WordPress-List-Table importabile con il comando

if (!class_exists('WP_List_Table')) {
   require_once(ABSPATH . 'wp-admin/includes/class-wp-list-table.php');
}

poi bisogna definire una classe per la gestione della tabella:

// check http://codex.wordpress.org/Creating_Tables_with_Plugins
class AlNao_Handook_List_Table extends WP_List_Table{ 
  function __construct(){ // costruttore obbligatorio
	global $status, $page;
	parent::__construct(array(
		'singular' => 'handbook','plural' => 'handbooks',
	));
  }
  function column_default($item, $column_name){//[REQUIRED] this is a default 
	return $item[$column_name];
  }
  function column_name($item){//opzionale: colonna per un campo name
	$actions = array(
		'edit' => sprintf('<a href="?page=handbook_form&id=%s">%s</a>',
                       $item['id'], __('Edit', 'alnao_handbook')),
		'delete' => sprintf('<a href="?page=%s&action=delete&id=%s">%s</a>', 
                       $_REQUEST['page'], $item['id'], __('Delete', 'alnao_handbook')),
	);
	return sprintf('%s %s',$item['page'],$this->row_actions($actions));
  }
  function column_cb($item){//[REQUIRED] this is how checkbox column renders
 	return sprintf('<input type="checkbox" name="id[]" value="%s" />',$item['id']);
  }
  function get_columns(){//[REQUIRED] This method return columns to display
	$columns = array(
		'cb' => '<input type="checkbox" />', //Render a checkbox instead of text
		'page' => __('Page', 'alnao_handbook'),
		'title' => __('Titolo', 'alnao_handbook'),
		'post' => __('Post', 'alnao_handbook'),
		'level' => __('Livello', 'alnao_handbook'),
		'ordine' => __('Ordine', 'alnao_handbook')
	);
	return $columns;
  }
  function get_sortable_columns(){//[OPTIONAL] This method return columns sortable
	$sortable_columns = array(
		'page' => array('page', true),
		'title' => array('title', true),
		'post' => array('post', false),
		'ordine' => array('ordine', false),
	);
  	return $sortable_columns;
  }
}

in questa classe sono stati definiti i metodi per la definizione della gestione delle colonne (campi) della tabella. In particolare il metodo column_name viene usato per il campo "name" per visualizzare i link di modifica e cancellazione di un item nella pagina della lista.

In questo articolo sono descritti i metodi della classe per gestire le varie azione di inserimento, modifica e cancellazione:

function get_bulk_actions(){//[OPTIONAL] Return array of bult actions if has any
  return array('delete' => 'Delete');
}
function process_bulk_action(){//[OPTIONAL] This method processes bulk actions
	global $wpdb;
	global $alnao_handbook_db_table;
	$table_name = $wpdb->prefix . $alnao_handbook_db_table;
	if ('delete' === $this->current_action()) {
	  $ids = isset($_REQUEST['id']) ? $_REQUEST['id'] : array();
	  if (is_array($ids)) $ids = implode(',', $ids);
	  if (!empty($ids)) {
	    $wpdb->query("DELETE FROM $table_name WHERE id IN($ids)");
	  }
	}
}
function prepare_items(){//[REQUIRED] This is the most important method
	global $wpdb;
	global $alnao_handbook_db_table;
	$table_name = $wpdb->prefix . $alnao_handbook_db_table; 
	$per_page = 100; // constant, how much records will be shown per page
	$columns = $this->get_columns();
	$hidden = array();
	$sortable = $this->get_sortable_columns();
	$this->_column_headers = array($columns, $hidden, $sortable);
	$this->process_bulk_action();// [OPTIONAL] process bulk action if any
	$total_items = $wpdb->get_var("SELECT COUNT(id) FROM $table_name");
	$paged = isset($_REQUEST['paged']) ? 
          max(0, intval($_REQUEST['paged'] - 1) * $per_page) : 0;
	$orderby = (isset($_REQUEST['orderby']) && in_array($_REQUEST['orderby'],
          array_keys($this->get_sortable_columns())))
	  ? $_REQUEST['orderby'] : 'page,ordine';
	$order = (isset($_REQUEST['order']) && 
          in_array($_REQUEST['order'], array('asc', 'desc'))) 	 
          ? $_REQUEST['order'] : 'asc';
	$this->items = $wpdb->get_results($wpdb->prepare("SELECT * FROM $table_name 
          ORDER BY $orderby $order LIMIT %d OFFSET %d", $per_page, $paged), ARRAY_A);
	// [REQUIRED] configure pagination
	$this->set_pagination_args(array(
	  'total_items' => $total_items, // total items defined above
	  'per_page' => $per_page, // per page constant defined at top of method
	  'total_pages' => ceil($total_items / $per_page) // calculate pages count
	));
}

A questa classe ovviamente manca la parte grafica che verrà definita in un prossimo articolo.

Nella pagina amministrativa bisogna definire la logica per visualizzare e gestire i dati e lo si può sviluppare con un paio di metodi. Il primo metodo serve per definire il comportamento della pagina principale:

function alnao_handbook_page_handler(){//List page handler, /wp-admin/includes/class-wp-*-list-table.php for examples
	global $wpdb;
	$table = new AlNao_Handook_List_Table();
	$table->prepare_items();
	$message = '';
	if ('delete' === $table->current_action()) {
		$message = '<div class="updated below-h2" id="message"><p>' ;
		$message.= sprintf(__('Items deleted: %d', 'alnao_handbook'), count($_REQUEST['id'])) . '</p></div>';
	}?>
	<div class="wrap">
		<div class="icon32 icon32-posts-post" id="icon-edit"><br></div>
		<h2><?php _e('Persons', 'alnao_handbook')?> 
			<a class="add-new-h2"
			href="<?php echo get_admin_url(get_current_blog_id(), 'admin.php?page=AlNaoHandbook_form');?>">
			<?php _e('Add new', 'alnao_handbook')?></a>
		</h2>
		<?php echo $message; ?>
		<form id="persons-table" method="GET">
			<input type="hidden" name="page" value="<?php echo $_REQUEST['page'] ?>"/>
			<?php $table->display() ?>
		</form>
	</div><?php
}

Il secondo metodo serve per gestire la pagina del form di modifica:

function alnao_handbook_form_page_handler(){//Form page handler checks is there some data posted and tries to save it
	global $wpdb;
	global $alnao_handbook_db_table;
	$table_name = $wpdb->prefix . $alnao_handbook_db_table;
	$message = '';
	$notice = '';
	$default = array('id' => 0,'post' => '','page' => '','title' => '','level' => 0,'ordine' => 0);
	// here we are verifying does this request is post back and have correct nonce
	if ( isset($_REQUEST['nonce']) && wp_verify_nonce($_REQUEST['nonce'], basename(__FILE__))) {
		$item = shortcode_atts($default, $_REQUEST);// combine our default item with request params
		// validate data, and if all ok save item to database
		// if id is zero insert otherwise update
		$item_valid = alnao_handbook_validate_person($item);
		if ($item_valid === true) {
			if ($item['id'] == 0) {
				$result = $wpdb->insert($table_name, $item);
				$item['id'] = $wpdb->insert_id;
				if ($result) {
					$message = __('Item was successfully saved', 'alnao_handbook');
				} else {
					$notice = __('There was an error while saving item', 'alnao_handbook');
				}
			} else {
				$result = $wpdb->update($table_name, $item, array('id' => $item['id']));
				if ($result) {
					$message = __('Item was successfully updated', 'alnao_handbook');
				} else {
					$notice = __('There was an error while updating item', 'alnao_handbook');
				}
			}
		} else {
			// if $item_valid not true it contains error message(s)
			$notice = $item_valid;
		}
	}else {// if this is not post back we load item to edit or give new one to create
		$item = $default;
		if (isset($_REQUEST['id'])) {
			$item = $wpdb->get_row($wpdb->prepare("SELECT * FROM $table_name WHERE id = %d", $_REQUEST['id']), ARRAY_A);
			if (!$item) {
				$item = $default;
				$notice = __('Item not found', 'alnao_handbook');
			}
		}
	}
	// here we adding our custom meta box
	add_meta_box('alnao_handbook_form_meta_box', 'HandBook data', 'alnao_handbook_form_meta_box_handler', 'alnao_handbook', 'normal', 'default');
	?>
	<div class="wrap">
		<div class="icon32 icon32-posts-post" id="icon-edit"><br></div>
		<h2><?php _e('HandBook', 'alnao_handbook')?> 
			<a class="add-new-h2"
			href="<?php echo get_admin_url(get_current_blog_id(), 'admin.php?page=AlNaoHandbook_main');?>">
			<?php _e('back to list', 'alnao_handbook')?></a>
		</h2>
		<?php if (!empty($notice)): ?>
		<div id="notice" class="error"><p><?php echo $notice ?></p></div>
		<?php endif;?>
		<?php if (!empty($message)): ?>
		<div id="message" class="updated"><p><?php echo $message ?></p></div>
		<?php endif;?>
		<form id="form" method="POST">
			<input type="hidden" name="nonce" value="<?php echo wp_create_nonce(basename(__FILE__))?>"/>
			<input type="hidden" name="id" value="<?php echo $item['id'] ?>"/>
			<div class="metabox-holder" id="poststuff">
				<div id="post-body">
					<div id="post-body-content">
						<?php do_meta_boxes('alnao_handbook', 'normal', $item); ?>
						<input type="submit" value="<?php _e('Save', 'alnao_handbook')?>" id="submit" class="button-primary" name="submit">
					</div>
				</div>
			</div>
		</form>
	</div><?php
}

Rispetto agli articoli precedenti mancano solo due metodi: il primo per visualizzare il codice del form mentre il secondo per la validazione dei dati inseriti per i campi obbligatori o le varie regole di inserimento dati:

function alnao_handbook_form_meta_box_handler($item){//This function renders our custom meta box
?><table cellspacing="2" cellpadding="5" style="width: 100%;" class="form-table">
<tbody>
  <tr class="form-field">
    <th valign="top" scope="row">
       <label for="page">Pagina di riferimento</label>
    </th>
    <td>
       <input id="page" name="page" type="text" 
          style="width: 95%" value="<?php echo esc_attr($item['page'])?>"
          size="50" class="code" placeholder="Pagina di riferimento" required>
    </td>
  </tr>
... campi ...
</tbody>
</table><?php
}

function alnao_handbook_validate_person($item){ //function that validates data
  $messages = array();
  if (empty($item['page'])) $messages[] = __('Page is required', 'alnao_handbook');
  if (empty($item['title']))$messages[] = __('Title is required', 'alnao_handbook');
  if (empty($item['post'])) $messages[] = __('Post is required', 'alnao_handbook');
  if (!ctype_digit($item['level'])) $messages[] = __('Level in wrong format', 'alnao_handbook');
  if (!ctype_digit($item['ordine'])) $messages[] = __('Ordine in wrong format', 'alnao_handbook');
  if (empty($messages)) return true;
  return implode('<br />', $messages);
}

Una volta definite tutti i metodi per la gestione della lista nella sezione amministrativa bisogna definire come visualizzare i dati della lista nel sito. In questo esempio viene visualizzata la lista salvata in una pagina, il titolo della pagina deve corrispondere al campo page della lista mentre viene visualizzato la lista di contenuti come coppia di title e post. I campi level e ordine vengono usati per gestire l'ordinamento e l'indentazione in modo da simulare una gestione di menù a livelli.

function add_mod_hatom_data($content) {
  global $wpdb;
  global $alnao_handbook_db_table;
  $table_name = $wpdb->prefix . $alnao_handbook_db_table;
  //cerco elementi di WP nella tabella agganciati al titolo pagina
  $titoloPagina=get_the_title();
  $total_items = $wpdb->get_var(
    "SELECT COUNT(id) FROM $table_name where page='$titoloPagina' ");
  $contentPosts="<span id='result-text' style='display:none;'> </span>";
  $contentTitoli="";
  if ($total_items > 0){ //se ci sono elementi li visualizzo
    $items = $wpdb->get_results($wpdb->prepare(
     "SELECT * FROM $table_name where page='$titoloPagina' order by ordine"),ARRAY_A);
    foreach ($items as $item) { 
      if ($item["level"]=="0") { $padre=$item["id"] ; }//reset padre
      $my_post = get_page_by_title( $item["post"], OBJECT); 
      if ($my_post->post_title!=""){
        $identificavo=$my_post->post_name; //al posto di $item["id"]
        $contentTitoli.="<li class='alnaoHBlinkMenu ";
        $contentTitoli.="'><a padre='$padre' class='alnaoHBlinkMenu ";
        $contentTitoli.="' href='#_".$identificavo."' id='__".$identificavo."'>";
        $contentTitoli.=$item["title"]."</a></li>";
        $contentPosts.="<div class='item entry elementoSito elementoSitoHandbook' "
        $contentPosts.="id='_".$identificavo."' >"; 
        $contentPosts.="<div class='storycontent elementoContenuto'>";
        $contentPosts.="<div class='categorieTitolo' >";
        $contentPosts.="<a href='".get_permalink($my_post->ID)."' ";
        $contentPosts.=" class='linkElementoSito'>";
        $contentPosts.="".$titoloPostVisualizzato."</a></div>";
        $contentPosts.="<span class='elementoContenutoHandbook'>";
        $contentPosts.=$my_post->post_content ;
        $contentPosts.="<span></div></div>";
        $titoloPostVisualizzato=$my_post->post_title;
     } 
   }
   $content.="<div class='alnaoHandbookContainer'><div class='alnaoHBlistaTitoli'>";
   $content.="<ul class='alnaoHBlistaTitoliUL '>".$contentTitoli."</ul></div>";
   $content.="<div class='alnaoHBcontentPost'>".$contentPosts."</div></div>";
  }
  return $content;
}

Alla fine bisogna aggiungere ai contenuti del sito la il metodo

add_filter('the_content', 'add_mod_hatom_data');

Questa definizione aggancia a tutti i contenuti del sito il metodo che verrà eseguito sempre senza alcuna distinzione tra articoli o pagina, il filtro deve essere eseguito all'interno oppure usato un selettore diverso da the_content che rappresenta il contenuto generico di wordpress.

Se un plugin necessita di script o stili dedicati, è possibile modificare il comportamento del sito se il plugin è attivo aggiungendo componenti nel head del sito, in caso di disattivazione del plugin gli script vengono spenti e non vengono inseriti nelle pagina del sito. L'esempio più semplice è aggiungere script e stili nel wp_head tramite una funzione che descrive i componenti in line:

add_action( 'wp_head', 'my_header_scripts' );
function my_header_scripts(){ ?>
  <script>
    $('.alnaoHBlistaTitoliUL li a').click(function() {
      $('.alnaoHBlistaTitoliUL li').removeClass('active');
      $(this).parent().addClass('active');
    });
  </script>
  <style>
    .alnaoHandbookContainer{align-items: center;}
    .alnaoHBcontentPost{width:700px;margin-left: 285px;}
    .alnaoHBlistaTitoli{position: sticky;top: 10px;overflow: hidden;}
  </style><?php 
}

però è possibile creare file css e js all'interno della cartella del plugin per poi essere caricati con i metodi

wp_enqueue_script('alnao-handbook-js', plugins_url('file.js',__FILE__), $jquery_deps, PLUGIN_VERSION);
wp_enqueue_style('alnao-handbooj-css', plugins_url('file.css',__FILE__), array(), PLUGIN_VERSION);

per usare questa tecnica bisogna aggiungere due costanti:una per la versione del plugin e una per le dipendenze javascript, per aggiungere la dipendenza da librerie ufficiali come jquery:

define('PLUGIN_VERSION', '1.0.0');
$jquery_deps = array('jquery');

Per esportare il plugin ed installarlo manualmente in un altro sito basta prendere la cartella del plugin e creare uno zip con il nome della cartella stessa.

Successivamente nel sito, all'interno della pagina dove si esegue la ricerca per l'installazione "Aggiungi nuovo", è presente un bottone "Carica plugin" dove si può eseguire l'upload del file zip che va ad installare il plugin. Una volta installato si può attivare o disattivare e, se necessario eliminare.

Per le successive versioni si può ri-eseguire il procedimento però ricordandosi di modificare il commento iniziale del file principale modificando la versione altrimenti l'import dell'aggiornamento genera un errore per versione già presente.

I contenuti di AlNao.it potrebbero avere inesattezze o refusi. Non potrà in alcun caso e per qualsiasi motivo essere ritenuta responsabile di eventuali imprecisioni ed errori né di danni causati. Il sito web e tutte le informazioni ed i contenuti in esso pubblicati potranno essere modificati in qualsiasi momento e di volta in volta e senza preavviso. Poiché ogni materiale sarà scaricato o altrimenti ottenuto attraverso l’uso del servizio a scelta e a rischio dell’utente, ogni responsabilità per eventuali danni a sistemi di computer o perdite di dati risultanti dalle operazioni di scarico effettuato dall'utente, ricade sull'utente stesso e non potrà essere imputata ad AlNao.it che declina ogni responsabilità per eventuali danni derivanti dall'inaccessibilità ai servizi presenti sul sito o da eventuali danni causati da virus, file danneggiati, errori, omissioni, interruzioni del servizio, cancellazioni dei contenuti, problemi connessi alla rete, ai provider o a collegamenti telefonici e/o telematici, ad accessi non autorizzati, ad alterazioni di dati, al mancato e/o difettoso funzionamento delle apparecchiature elettroniche dell’utente stesso.

AlNao.it ha adottato ogni possibile accorgimento al fine di evitare che siano pubblicati, nel sito web, contenuti che descrivano o rappresentino scene o situazioni inappropriate o tali che, secondo la sensibilità degli utenti, possano essere ritenuti lesivi delle convinzioni civili, dei diritti umani e della dignità delle persone, in tutte le sue forme ed espressioni. In ogni caso non garantisce che i contenuti del sito web siano appropriati o leciti in altri Paesi, al di fuori dell’Italia. Tuttavia, qualora tali contenuti siano ritenuti non leciti o illegali in alcuni di questi Paesi, ti preghiamo di evitare di accedere al nostro sito e ove scegliessi, in ogni caso, di accedervi, ti informiamo che l’uso che deciderai di fare dei servizi forniti dal sito sarà di tua esclusiva e personale responsabilità. L’utente sarà esclusivo responsabile della valutazione delle informazioni e del contenuto ottenibile mediante il sito web. Il sito web e tutte le informazioni ed i contenuti in esso pubblicati potranno essere modificati in qualsiasi momento e di volta in volta e senza preavviso.

Le pagine di questo sito sono protette dal diritto d’autore (copyright). In particolare a norma della legge sul diritto d’autore e il contenuto del sito è protetto contro duplicazioni, traduzioni, inserimento o trasformazione dello stesso in altri media, incluso l’inserimento o la trasformazione con mezzi elettronici. La riproduzione e lo sfruttamento economico di tutto o di parte del contenuto di questo sito sono consentite solo a seguito del consenso scritto dell’avente diritto. Sia il contenuto che la struttura del sito sono protetti dal diritto d’autore. In particolare, la duplicazione di informazioni o dati, l’uso dei testi o di parte di essi o delle immagini contenute nel sito (eccetto per le foto ad uso stampa) è consentita solo previo consenso scritto dell’avente diritto. Anche le illustrazioni, a norma dell’art. 1 della legge 633/1941 – e successive modifiche e integrazioni – sono protette dal diritto d’autore. Il diritto di pubblicazione e riproduzione di questi disegni è di titolarità dell’avente diritto. Il diritto d’autore sui disegni rimane in vigore anche per i disegni automaticamente o manualmente aggiunti a un archivio. Nulla di quanto contenuto in questo sito vale come concessione a terzi dei diritti di proprietà industriale ed intellettuale indicati in questa sezione. Ci riserviamo tutti i diritti di proprietà intellettuale del sito web.

Marchi ed immagini riferibili a soggetti terzi utilizzati in questo sito non appartengono a AlNao.it e sono da ritenersi di proprietà esclusiva dei rispettivi titolari. Le denominazioni dei prodotti pubblicati su questo sito web o delle società menzionate, anche qualora non siano indicate con il simbolo identificativo della registrazione del marchio sono marchi di titolarità di terzi e sono protetti dalla legge sui marchi (D.lgs. 30/2005 e successive modifiche e integrazioni) e dalle norme in tema di concorrenza sleale. Qualsiasi riproduzione degli stessi è da ritenersi vietata ai sensi di legge. In particolare è espressamente vietato qualsiasi uso di questi marchi senza il preventivo consenso scritto del relativo titolare ed, in particolare, è vietato utilizzarli in modo da creare confusione tra i consumatori in merito all'origine dei prodotti o per finalità di sponsorizzazione, nonché in qualsiasi modo tale da svilire e discreditare il titolare del marchio. Tutti i diritti che non sono espressamente concessi sono riservati al titolare del marchio.

In aggiunta a quanto indicato in altre previsioni delle Condizioni Generali d’Uso, AlNao.it non potrà essere ritenuta in alcun caso responsabile di alcun danno derivante dall'utilizzo o dall'impossibilità di utilizzare il sito web, i contenuti, le informazioni o connessi alla qualità degli stessi.