Questa guida vi svelerà alcune funzioni specifiche anche con esempi reali di programmazione.

Perché usare Multisite?

Multisite è una grande opzione per i liberi professionisti, imprese e organizzazioni che gestiscono più siti web con WordPress. Un libero professionista che vuole offrire hosting e manutenzione ai clienti, o un editore deve organizzazione al massimo il proprio lavoro è la soluzione potrebbe essere quella di centralizzare le operazioni.

La gestione di più siti web con una singola installazione di WordPress permette di aggiornare facilmente i plugin e i temi. È possibile condividere le funzionalità in più siti web con i plugin di rete, così come standardizzare elementi di design in più siti web usando un tema genitore.

Panoramica delle prestazioni

• Gli utenti possono accedere facilmente e gestire più siti web con un singolo account.
• Gli utenti possono accedere a un particolare sito web o di ogni sito web utilizzando lo stesso account.
• I contenuti di un un sito sono completamente isolate dagli altri.
• I contenuti possono essere facilmente condivisi con gli altri.
• I temi possono essere condivisi tra più siti web
• Aggiornamenti e upgrade sono implementati  una sola volta per l’intera rete riducendo i tempi e i costi di manutenzione.
• In questa guida non vi spiegherò come installare e configurare Multisite . Tante altre info sono disponibili nel Codex di WordPress .

Lavorare con le funzioni Multisite

Se vi trovate a sviluppare temi e plugin per WordPress Multisite, considerate i seguenti suggerimenti per personalizzare e migliorare la connettività della rete.

Visualizzazione delle informazioni di una rete

Potreste trovarvi in ​​una situazione in cui si desidera visualizzare il numero di siti web o gli utenti della rete. Fornendo un link al sito principale della rete sarebbe anche bello, in modo che i visitatori possano avere più informazioni sulla vostra attività.

Le opzioni globali sono localizzate nella tabella del database wp_sitemeta , come ad esempio il nome di rete ( site_name ), l’ indirizzo e-mail dell’amministratore ( admin_email ) e l’ URL del sito primario ( SiteURL ). Per accedere a queste opzioni, è possibile utilizzare la funzione get_site_option () .

In questo esempio, ho usato  get_site_option ()  con get_blog_count () e get_user_count () per visualizzare alcune informazioni sulla rete.

<!--?php if( is_multisite() ): ?-->

   The<a href="<?php echo esc_url( get_site_option( 'siteurl' ) ); ?>"><!--?php echo esc_html( get_site_option( 'site_name' ) ); ?--> network</a> currently powers<strong><!--?php echo get_blog_count(); ?--></strong> websites and<strong><!--?php echo get_user_count(); ?--></strong> users.

<!--?php endif; ?-->

Verrà visualizzato il seguente codice HTML:

The <a href="http://www.smashingmagazine.com">Smashing Magazine network</a> currently powers <strong>52</strong> websites and <strong>262</strong> users.

Costruire un menu di navigazione di rete

Molti WMU hanno un menù dinamico che appare su tutti i siti, rendendo facile per i visitatori esplorare la rete. Utilizzando la classe db $wpdb database di classe , insieme a possiamo creare un menu di rete totalmente dinamico, definiremo una classe ( . current-site-item ) per evidenziare il sito web corrente.

La query SQL che abbiamo creato in questo esempio necessita di molte risorse è potrebbe creare dei problemi, per questo motivo, useremo delle API memorizzando temporaneamente nella cache i risultati nella tabella sitemeta utilizando le funzioni set_site_transient () e get_site_transient () .

La query SQL verrà eseguita ogni due ore, ei dati effettivi saranno restituiti dalla funzioni, rendendo la struttura molto più efficiente. Ho incluso due parametri, $size e $expires , consentendo di controllare il numero e il tempo di scadenza.

Uno degli elementi più potenti di questo esempio è l’uso di switch_to_blog () e restore_current_blog () . Queste due funzioni Multisite ci permettono di passare temporaneamente ad un altro sito (per ID), raccogliere informazioni o contenuti, e quindi tornare al sito originale.

Aggiungere quanto segue al vostro file functions.php :

<pre>/**
 * Build a list of all websites in a network
 */
function wp_list_sites( $expires = 7200 ) {
   if( !is_multisite() ) return false;

   // Because the get_blog_list() function is currently flagged as deprecated
   // due to the potential for high consumption of resources, we'll use
   // $wpdb to roll out our own SQL query instead. Because the query can be
   // memory-intensive, we'll store the results using the Transients API
   if ( false === ( $site_list = get_transient( 'multisite_site_list' ) ) ) {
      global $wpdb;
      $site_list = $wpdb->get_results( $wpdb->prepare('SELECT * FROM wp_blogs ORDER BY blog_id') );
      // Set the Transient cache to expire every two hours
      set_site_transient( 'multisite_site_list', $site_list, $expires );
   }

   $current_site_url = get_site_url( get_current_blog_id() );

   $html = '
<ul id="network-menu">' . "\n";

   foreach ( $site_list as $site ) {
      switch_to_blog( $site->blog_id );
      $class = ( home_url() == $current_site_url ) ? ' class="current-site-item"' : '';
      $html .= "\t" . '
<li id="site-' . $site->blog_id . '" '="" .="" $class=""><a href="' . home_url() . '">' . get_bloginfo('name') . '</a></li>

' . "\n";
      restore_current_blog();
   }

   $html .= '</ul>

<!--// end #network-menu -->' . "\n\n";

   return $html;
}</pre>

Attenzione: Il get_blog_list () è una funzione deprecata a causa dell’elevato consumo di risorse se una rete contiene più di 1000 siti web. Attualmente, non esiste una funzione di sostituzione. In futuro probabilmente sarà rilasciata una migliore alternativa. 

Questa funzione verifica innanzitutto che la funzione multisite sia abilitata, raccoglie un elenco di ID di tutti i siti della rete in ordine crescente. Successivamente, scorre ogni sito web della lista, utilizzando switch_to_blog (). Poi crea il link posizionando una voce di elenco nei i nostri menù.

Per utilizzare questo nel tema, chiamare il wp_list_sites () funzione in cui si desidera che il menu di rete da visualizzare. Perché i controlli prima funzione di un Multisite abilitato l’installazione, è necessario verificare che il valore restituito non è falso prima di visualizzare il codice HTML corrispondente.

<pre><?php
// Multisite Network Menu
$network_menu = wp_list_sites();
if( $network_menu ):
?>
<div id="network-menu">
   <?php echo $network_menu; ?>
</div>

<!--// end #network-menu -->
<?php endif; ?>

E’ possibile creare un elenco dei post più recenti di tutti i siti web. Purtroppo, WordPress non ha una funzione incorporata per fare questo, ma è possibile creare una query personalizzata per visualizzare gli ultimi messaggi della rete.

Inizio con l’aggiunta del wp_recent_across_network () nel file functions.php 

<pre>/**
 * List recent posts across a Multisite network
 *
 * @uses get_blog_list(), get_blog_permalink()
 *
 * @param int $size The number of results to retrieve
 * @param int $expires Seconds until the transient cache expires
 * @return object Contains the blog_id, post_id, post_date and post_title
 */
function wp_recent_across_network( $size = 10, $expires = 7200 ) {
   if( !is_multisite() ) return false;

   // Cache the results with the WordPress Transients API
   // Get any existing copy of our transient data
   if ( ( $recent_across_network = get_site_transient( 'recent_across_network' ) ) === false ) {

      // No transient found, regenerate the data and save a new transient
      // Prepare the SQL query with $wpdb
      global $wpdb;

      $base_prefix = $wpdb->get_blog_prefix(0);
      $base_prefix = str_replace( '1_', '' , $base_prefix );

      // Because the get_blog_list() function is currently flagged as deprecated
      // due to the potential for high consumption of resources, we'll use
      // $wpdb to roll out our own SQL query instead. Because the query can be
      // memory-intensive, we'll store the results using the Transients API
      if ( false === ( $site_list = get_site_transient( 'multisite_site_list' ) ) ) {
         global $wpdb;
         $site_list = $wpdb->get_results( $wpdb->prepare('SELECT * FROM wp_blogs ORDER BY blog_id') );
         set_site_transient( 'multisite_site_list', $site_list, $expires );
      }

      $limit = absint($size);

      // Merge the wp_posts results from all Multisite websites into a single result with MySQL "UNION"
      foreach ( $site_list as $site ) {
         if( $site == $site_list[0] ) {
            $posts_table = $base_prefix . "posts";
         } else {
            $posts_table = $base_prefix . $site->blog_id . "_posts";
         }

         $posts_table = esc_sql( $posts_table );
         $blogs_table = esc_sql( $base_prefix . 'blogs' );

         $query .= "(SELECT $posts_table.ID, $posts_table.post_title, $posts_table.post_date, $blogs_table.blog_id FROM $posts_table, $blogs_table\n";
         $query .= "\tWHERE $posts_table.post_type = 'post'\n";
         $query .= "\tAND $posts_table.post_status = 'publish'\n";
         $query .= "\tAND $blogs_table.blog_id = {$site->blog_id})\n";

         if( $site !== end($site_list) )
            $query .= "UNION\n";
         else
            $query .= "ORDER BY post_date DESC LIMIT 0, $limit";
      }

      // Sanitize and run the query
      $query = $wpdb->prepare($query);
      $recent_across_network = $wpdb->get_results( $query );

      // Set the Transients cache to expire every two hours
      set_site_transient( 'recent_across_network', $recent_across_network, 60*60*2 );
   }

   // Format the HTML output
   $html = '
<ul>';
   foreach ( $recent_across_network as $post ) {
      $html .= '
<li><a href="' . get_blog_permalink( $post->blog_id, $post->ID ) . '">' . $post->post_title . '</a></li>

';
   }
   $html .= '</ul>

';

   return $html;
}</pre>

Di seguito il codice html che restituisce l’output

<?php
// Display recent posts across the entire network
$recent_network_posts = wp_recent_across_network();
if( $recent_network_posts ):
?>
<div class="recent-accross-network">
   <?php echo $recent_network_posts; ?>
</div>

<?php endif; ?>

Recuperare un messaggio singolo da un altro sito web nella Rete

In alcune situazioni, può risultare utile fare riferimento a una singola pagina o post da un sito della rete. La funzione get_blog_post () rende questo processo molto semplice.

Ad esempio, si può decidere di visualizzare the_content () da una pagina “About” del sito principale della tua rete.

<pre><?php
// Display "About" page content from the network's primary website
$about_page = get_blog_post( 1, 317 );
if( $about_page ):
?>
<div class="network-about entry">
   <?php echo $about_page->post_content; ?>
</div>

<?php endif; ?></pre>

Spero possa esservi utile!

Grazie ad alcune semplici modifche è possibile ampliare questa libertà d’azione creando altri menù che si gestiscono esattamente come quello principale e non devono essere necessariamente richiamati nelle sidebar.

In questo post riporto i passaggi che ho realizzato per aggiungere nuovi menù.

Prima di tutto verificare che il tema in uso supporti la funzionalità

Aprire il file FUNCTIONS.PHP del proprio tema, posizionarsi intorno alla riga 100 e individuare le seguenti righe di codice:

// This theme uses wp_nav_menu() in one location.
 register_nav_menu( 'primary', __( 'Primary Menu', 'twentyeleven' ) );
  

posizionarsi quindi immediatamente dopo e incollare il codice seguente:

 // Attivo una seconda funzione menu.
 register_nav_menu( 'secondary', __( 'Secondary Menu', 'twentyeleven' ) );

Possiamo subito notare che nel pannello di amministrazione del nostro blog alla voce Aspetto/Menu è comparso un nuovo campo nel box “Poszizione dei Temi”

Non ci resta che visualizzare il nostro nuovo menù in un punto qualsiasi del sito incollando in codice seguente

<?php wp_nav_menu( array( 'theme_location' => 'secondary' ) ); ?>

non rimane quindi che agire sul foglio di stile per stilizzare il proprio menu.

Vediamo un semplice esempio ciò che si potrebbe realizzare:

Il nuovo network sta riscuotendo un discreto successo oltre oceano, si sente forse l’esigenza di passare a rapporti strettamente personali?

PrettyPhoto è una libreria JQuery che replica il noto effetto LightBox per la visualizzazione di immagini o gallerie di immagini.

IMMAGINE 1: VISUALIZZAZIONE FINESTRA CON EFFETTO LIGHTBOX

Per ottenere questo risultato ovviamente ho prima cercato tra i plugin di wordpress e in effetti esiste un plugin specifico: Wp-prettyPhoto. Purtroppo non sembra funzionare e soprattutto non consente impostazioni di visualizzazione avanzate.

Ho così deciso di implementare PrettyPhoto direttamente sul mio tema, senza utilizzare un plugin, a partire dalla libreria “originale”. Potete vedere il risultato finale nella pagina portfolio di questo sito.

Questo articolo riassume i vari passaggi che ho utilizzato per visualizzare automaticamente le gallerie di immagini dei post o delle pagine di WP con l’effetto PrettyPhoto. 

Spero possa tornarvi utile.

PASSO 1

Scarica questa cartella: prettyphoto-files.zip

All’interno troverai i seguenti file e cartelle che dovrai aggiungere nella cartella del tuo tema (wp-content\themes\yourtheme):

• prettyphoto.css: da aggiungere nella directory del tuo tema \yourtheme
• cartella scripts (con jquery-1.7.min.js e jquery.prettyPhoto.js): da aggiungere nella directory del tuo tema \yourtheme)
• cartella prettyPhoto: da aggiungere in \yourtheme\images\

PASSO 2

Apri header.php e incolla il seguente codice all’interno del tag <head>

<link rel="stylesheet" href="<?php bloginfo('template_directory'); ?>/prettyPhoto.css" type="text/css" media="screen" charset="utf-8" />
<script src="<?php bloginfo('template_directory'); ?>/scripts/jquery-1.7.min.js"></script>
<script src="<?php bloginfo('template_directory'); ?>/scripts/jquery.prettyPhoto.js"></script>
<script type="text/javascript">
jQuery(document).ready(function($) {
$("a[href$='.jpg'], a[href$='.jpeg'], a[href$='.gif'], a[href$='.png']").prettyPhoto({
animationSpeed: 'normal', /* fast/slow/normal */
padding: 40, /* padding for each side of the picture */
opacity: 0.35, /* Value betwee 0 and 1 */
showTitle: true /* true/false */
});
})
</script>

PASSO 3

Apri il file prettyPhoto.css e digita CTRL + F (Find). Cerca tutti gli elementi url(../ e sostituisci tutto con url(
Nota: troverai 100 oggetti 

IMMAGINE 2: SCHERMATA CERCA E SOSTITUISCI

PASSO 4

Scarica, installa e attiva il plugin Cleaner Gallery. Quindi vai in Aspetto > Cleaner Gallery e dal menù a tendina “External Image Script” seleziona la voce PrettyPhoto.

Questo plugin risolve eventuali conflitti.

IMMAGINE 3: CLEANER GALLERY SETTINGS

PASSO 5

Inserisci le immagini all’interno del tuo articolo o della tua pagina come fai abitualmente. Infine accertati che le impostazioni della galleria siano come nell’immagine dell’esempio che segue.

IMMAGINE 4: IMPOSTAZIONI GALLERIA

Vediamo il risultato finale che otteniamo inserendo la galleria delle immagini utilizzate in questo stesso articolo:

1. Siti e applicazioni adattabili a tutti i dispositivi

Nel 2012 la qualità di un’applicazione web non potrà prescindere dalla sua adattabilità alle tipologie di dispositivi su cui sarà visualizzata.

Gli sviluppatori dovranno quindi realizzare interfacce con layout fluidi, ovvero utilizzando dimensioni percentuali invece delle dimensioni fisse, e predisporre fogli di stile realizzati per il maggior numero possibile di media.

Guide e tutorial:

• Html.it
• Tuto.rial.com

2. Animazioni realizzate con jQuery/CSS3/HTML5

Sconsigliate a causa delle numerose problematiche connesse all’utilizzo di Flash (indicizzazioni sui motori di ricerca, aggiornamenti complessi, incompatibilità con i dispositivi Mobile) ma sempre molto amate dai clienti, le animazioni hanno ritrovato grandi possibilità di applicazione grazie alla combinazione di librerie jQuery, linguaggio HTML5 e stilizzazioni CSS3.

Siti consigliati, librerie effetti, esempi e tutorial:

• http://jquery.com/
• http://buildinternet.com/project/supersized/
• http://buildinternet.com/project/mosaic/
• http://flex.madebymufffin.com/
• http://addyosmani.com/blog/css3transitions-jquery/

3. Focus on Simplicity

La regola numero uno per un sito internet è guidare l’utente dal punto A al punto B nel più breve tempo possibile. Dunque tutti sappiamo quanto sia fondamentale realizzare interfacce semplici e intuitive. E così molto spesso ci ritroviamo a pensare a progetti “minimalisti” che evitando eccessi grafici ed estetici focalizzano la nostra attenzione alla forma e allo stile, limitando i contenuti all’essenziale. Ed ecco allora che un’interessante sfida per il 2012: possiamo realizzare siti internet che pur raggiungendo l’obiettivo della semplicità non abbiano nessun limite di creatività?

Alcuni esempi:

• http://themetrust.com/demos/craft/
• http://www.girlfriendnyc.com/
• http://eeharbor.com/
• http://www.getcorpus.com/
• http://www.ishuplus.com/IT.php
• http://www.brooksrunning.com/on/demandware.static/Sites-BrooksRunning-Site/Sites-BrooksRunning-Library/default/brooks_shoe_advisor/Default.htm

4. Google Fonts e Cufon Fonts

Quante volte abbiamo sentito parlare dei “font di sistema”? E quanto volte in un passato “remoto” realizzavamo immagini al solo scopo di visualizzare titoli di sezioni o pulsanti con font particolari. Oggi possiamo tranquillamente decidere di utilizzare specifici caratteri senza doverci chiedere come li visualizzeranno gli utenti che non li hanno installati sul proprio computer.

Google Web Fonts rende disponibile una libreria di caratteri open source liberamente utilizzabili nei nostri siti in pochi semplici passi.. http://www.google.com/webfonts

Cùfon Fonts invece consente di trasformare il font in un file javascript che potrà essere facilmente richiamato nel nostro sito.. http://cufon.shoqolate.com/generate/

Il contenuto dell’articolo si può abbreviare semplicemente con il tag more, oppure utilizzando un plugin o agendo sul file function per automatizzare il processo.

Potrebbe però essere necessario abbreviare il titolo per questioni di spazio o esigenze grafiche. (esempio al lato)

Le operazioni da compiere sono semplici è necessario copiare lo script che segue nel file function.php del vostro tema e agire sui valori alla riga 4 e 5. Con il primo settiamo la lunghezza del titolo, con il secondo il punto in cui posizionare i puntini.

function short_title() {
$title = get_the_title();
$count = strlen($title);
if ($count >= 25) {
$title = substr($title, 0, 25);
$title .= '...';
}
echo $title;
}

Ovviamente dovremmo richiamare il titolo in questo modo

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

Capita spesso che venga trascurato il resto dell’URL, l’elemento dopo il nome del dominio. Anch’esso deve essere pertinente, appropriato, professionale, facile da scrivere, da ricordare e leggibile per le stesse ragioni: attirare i clienti e migliorare nel ranking di ricerca.

Per tutto questo ci viene incontro l’attività di URL Rewriting grazie alla quale possiamo trasformare anche gli indirizzi più complessi e brutti in qualcosa di più gradevole e facile da ricordare senza intaccare la struttura di fondo delle vostre pagine.

Che cos’è l’URL Rewriting?

Se dovessimo scrivere una lettera alla nostra banca probabilmente apriremo il nostro elaboratore di testi per creare un file nominandolo con  qualcosa di simile a lettertobank.doc . Il file potrebbe risiedere nella nostra cartella Documenti, il percorso completo potrebbe essere C: \ Windows \ users \ julie \ Documenti \ lettertobank.doc.

Allo stesso modo, se volessimo progettare un sito per una banca, si potrebbe creare una pagina denominata page1.html , caricarla sul server e poi puntare il browser su http://www.mybanksite.com/page1.html. In questo caso, la risorsa è una pagina Web, ma potrebbe essere la pagina di un prodotto contenuto in un CMS.

Facciamo un esempio pratico:

dobbiamo acquistare un prodotto, digitiamo il nome in un motore di ricerca e il risultato che ci viene restituito sono una serie di link tra cui: http://www.diy.com/diy/jsp/bq/nav.jsp?action=detail&fh_secondid=11577676

Siamo in grado di  indovinare il contenuto di questa pagina Web? Non credo ma la pagina contiene proprio quello che stavamo cercando!

La riscrittura degli URL consente di separare completamente l’URL dalla risorsa.  l’URL di solito contiene un codice o numero o il nome che permette il CMS per cercare la risorsa. Ma quello che noi visualizziamo è un nome comprensibile perchè qualcuno ha assegnato un nome a quell’indirizzo.

Se il nostro indirizzo http://www.diy.com/diy/jsp/bq/nav.jsp?action=detail&fh_secondid=11577676 fosse formulato in qualcosa del genere:

http://www.diy.com/prodotti/grondaie/plastica-ondulata sapremo con certezza il prodotto che viene venduto su diy.com ed esattamente in quella posizione.

Il motore di ricerca si comporta esattamente come noi, riuscendo a decifrare la pagina e il contenuto di essa può posizionare correttamente la risorsa in relazione alla ricerca effettuata.

L’indicizzazione di un sito e dei suoi contenuti ovviamente dipende anche da molti altri fattori ma le URL amichevoli e leggibili sono da sempre uno tra i più importanti di questi fattori. Aiutano anche gli esseri umani a capire velocemente il contenuto di una pagina.

Spero di essere stato chiaro e di aver reso l’idea di quanto possa essere importante compiere attività di questo tipo nei propri siti e sopratutto nei siti di commercio elettronico dove la riscrittura degli url potrebbe essere vitale.