EcletticaMente

Con la ripresa delle attività di EcletticaMente ho ripreso le attività di esplorazione tecnologica che da sempre ha contraddistinto questo blog. In particolare, come forse ricorderete, da tempo mi interesso ai tlog ed alle loro opportunità, oltre ad esserne un attivo frequentatore con l’esperienza del Piccolo Eclettico.

La sfida da parte mia era quella di riuscire ad integrare Tumblr con la piattaforma Wordpress su cui opero, di modo da dare un’esperienza unica al visitatore. Esistono due approcci, entrambi con aspetti positivi e negativi, ed entrambi che trovano attuazione sulla versione attuale di EcletticaMente. Il primo prevede l’integrazione grafica di un Tumblr esistente con il proprio blog Wordpress, attraverso la creazione di un tema dedicato. Il secondo prevede invece l’importazione dei contenuti di un Tumblr all’interno della piattaforma Wordpress. Ma vediamo nel dettaglio di cosa si tratta.

Integrazione Grafica

L’integrazione tra un sito gestito con Wordpress e un Tlog gestito su Tumblr è abbastanza semplice, anche se occorre una certa dimestichezza con i temi sia di Tumblr che di Wordpress. In pratica, occorre realizzare un nuovo tema di Tumblr che contenga Header e Footer del vostro tema Wordpress.La cosa può richiedere un po’ di tempo soprattutto per testare al meglio il vostro layout definitivo, ma sarà un’operazione tutto sommato semplice. Attenzione: per seguire questo articolo è necessario avere una certa dimestichezza sui temi Wordpress.

Gli step necessari da compiere sono essenzialmente questi:

1. Creare un file (va benissimo un semplice file di testo) per il tema Tumblr che vorrete. A questo punto copiate l’header dal vostro tema per Wordpress (normalmente lo troverete in un file che si chiama header.php nella directory del vostro tema¹. Copiate anche il footer (file footer.php) se contiene porzioni di testo che vi interessa mostrare anche dal vostro tumblr.
2. A questo punto, occorre rimuovere tutte le porzioni di codice PHP presenti nel file. In alcuni casi si possono sostituire con gli appositi tag tumblr, in altri casi potrebbe essere più semplice sostituirli con informazioni statiche. Ad esempio, alcune URL non verranno modificate, per cui è sufficiente mettere quelle statiche.
3. Ora occorrerà inserire i tag per il tema tumblr. Tumblr usa due tipi di operatori per rendere il vostro tema. Le Variabili, e i Blocchi. Troverete tutte le informazioni aggiornate direttamente sulla guida online.
   Le variabili possono trovar posto in tutto il vostro template, e ad esempio possono essere utili per costruire i title della pagina. I Blocchi servono invece per mostrare le diverse categorie dei post disponibili su tumblr.
   La parte più complessa riguarda chiaramente i blocchi principali. Il mio suggerimento in questo caso è prendere spunto da uno degli innumerevoli temi di Tumblr già esistenti. Basandovi sulla resa che volete che i blocchi abbiano nel vostro tema, copiate le porzioni di codice più appropriate.
4. Realizzare il foglio di stile. Normalmente i temi di Tumblr contengono le indicazioni css all’interno del medesimo file. In questo caso potrebbe essere più pratico linkare il foglio di stile del vostro tema Wordpress, oppure crearne uno apposito².
5. A questo punto siete pronti per pubblicare il tema su Tumblr. Per farlo è sufficiente accedere alla sezione “customize” del vostro tumblr, cliccare sul tab “theme” e cliccare su “use custom theme“, incollando il vostro tema nell’apposito spazio. Sarà necessario fare alcune prove per ottenere il risultato desiderato, ma ne varrà la pena.

Esempi

Ad esempio vediamo come va modificato il codice per il del tag <title> dal tema Wordpress che normalmente sarà simile a questo:

<title> <?php wp_title(); ?> <?php bloginfo('name'); ?></title>

per includervi invece gli operatori tumblr. La stringa sarà dunque così:

<title>{Title}{block:PostTitle} - {PostTitle}{/block:PostTitle} </title>

La sezione del body tipica di un tema wordpress è simile a questa

<?php if (have_posts()) : ?>
    <?php while (have_posts()) : the_post(); ?>
        <h3><?php the_time('F jS, Y') ?><!-- by <?php the_author() ?> --></h3>
           <h2><a href="<?php the_permalink() ?>" rel="bookmark" title="Permanent Link to <?php the_title_attribute(); ?>"><?php the_title(); ?></a></h2>
           <p><?php the_tags('Tags: ', ', ', '<br />'); ?> Archiviato in <?php the_category(', ') ?> | <?php edit_post_link('Edit', '', ' | '); ?>  <?php comments_popup_link('Nessun Commento »', '1 Commento »', '% Commenti »'); ?></p>
          <div>
          <?php the_content('Continua &raquo;'); ?>
         </div>
     <?php endwhile; ?>
...

nel nostro caso dovremo invece inserire i blocchi tumblr così:

{block:Posts}
     {block:Text}
        <li>
           {block:Title}
              <h3><a href="{Permalink}">{Title}</a></h3>
           {/block:Title}
           {Body}
        </li>
     {/block:Text}
...
{/block:Posts}

Chiaramente si tratta solo di esempi. A voi di trovare la migliore soluzione operativa specifica per il vostro blog.

Per vedere un esempio pratico, vi sarà sufficiente andare su Piccolo Eclettico. Come vedete, è perfettamente integrato al resto di Wordpress.

Nota Bene

Fate attenzione a non lasciare codice PHP dentro il vostro tema. Potrebbe causare degli errori di layout. Inoltre, chiaramente non potete importare contenuti direttamente dal vostro blog principale. Per cui, ad esempio, non è possibile utilizzare alcuni dei placeholder tipicamente utilizzati per posizionare alcune funzionalità di wordpress.

Riferimenti

Un articolo interessante sullo stesso tema è disponibile sul sito di Lisa Brewster (in inglese), con anche alcuni modelli da copiare ed ai quali riferirvi.

Popularity: 7% [?]

1. Per maggiori informazioni sui temi Wordpress, verifica le pagine specifiche sui Temi di Wordpress. org [↩]
2. La scelta dipende da quanto volete customizzare il layout del tumblr. Nel mio caso ho optato per avere un foglio di stile separato, di modo da non dover ridichiarare due volte ogni singolo tag. [↩]