Archive - Wordpress RSS Feed

WordPress: Passare a Prettify per evidenziare il codice

Ho utilizzato SyntaxHighlighter Evolved per tanti anni. Un buon plugin che mi ha sempre permesso di evidenziare ed indentare correttamente codici di diversi linguaggi con facilit√†. Ci ho rinunciato. Non l’ho fatto per una passione spentasi nel tempo ma per una questione di velocit√† nel caricarsi durante la lettura di un articolo. Il tempo necessario al plugin per mostrare il codice era ormai diventata abbastanza insopportabile e necessitavo di qualcosa di pi√Ļ veloce e pi√Ļ snello.

Prettify

Ho conosciuto cos√¨ il progetto “Prettify” che √® disponibile pubblicamente su Google Code: code.google.com/p/google-code-prettify. Script pi√Ļ leggero, personalizzabile facilmente tramite CSS (anche se il default va gi√† pi√Ļ che bene) e disponibile gi√† in versione plugin per WordPress: wordpress.org/plugins/wp-code-prettify. Si utilizza tramite il tag “<pre>” al quale baster√† aggiungere la classe “prettyprint” come qui di seguito (ovviamente senza gli spazi volutamente lasciati per potervi mostrare il codice):

< pre class="prettyprint" >
codice
< /pre >

Installate il plugin e attivatelo, andate nelle sue opzioni (wp-admin/options-general.php?page=wp-code-prettify) e fategli caricare il javascript nel footer (cos√¨ da non rallentare il caricamento del resto dei materiali del blog), gi√† che ci siete ditegli di non caricare il file js quando non ce n’√® realmente bisogno. Io ho scelto di includere altri dettagli nel CSS custom cos√¨ da poter convivere al meglio con gli altri elementi del tema.

A questo punto √® gi√† tutto funzionante e inserendo la giusta classe nei tag <pre> potrete godervi il risultato. Immagino per√≤ che non vogliate fare tutto il lavoro manualmente, √® per questo che esiste la possibilit√† di creare un nuovo pulsante nell’editor visuale di WordPress che possa fare per voi il lavoro sporco. Scopriamo insieme come fare.

Senza mani!

Mi sono basato sull’ottimo articolo di Tuts+ per capire e realizzare un nuovo bottone da aggiungere all’editor visuale di WordPress che mi permettesse rapidamente di evidenziare una parte di testo e trasformarla in codice con la giusta classe dichiarata. Trovate l’originale all’indirizzo code.tutsplus.com/tutorials/wordpress-shortcodes-the-right-way–wp-17165 e qui di seguito vi suggerisco cosa scrivere in quali file e dove salvare il tutto per mettere in funzione il nuovo pulsante.

Si parte creando il file javascript che corrisponder√† all’azione richiamata dal pulsante:

(function() {
    tinymce.create('tinymce.plugins.prettycode', {
        init : function(ed, url) {
            ed.addButton('prettycode', {
                title : 'Prettify',
                image : url+'/iconabottone_Prettify.png',
                onclick : function() {
                     ed.selection.setContent('<pre class="prettyprint">' + ed.selection.getContent() + '</pre>');
 
                }
            });
        },
        createControl : function(n, cm) {
            return null;
        },
    });
    tinymce.PluginManager.add('prettycode', tinymce.plugins.prettycode);
})();

salvate il file come “nomechevolete.js” e caricatelo nella cartella principale nel tema o -meglio- nella cartella “js” ammesso che questa esista (vostrotema/js/, ndr). Come voi stessi potrete vedere nel file appena salvato trovate il nome che comparir√† quando punterete il mouse sul bottone (title: ‘Prettify’,), l’immagine da assegnare e che ovviamente dovr√† esistere nella stessa cartella del file .js (image: url+’/iconabottone_Prettify.png’,) ed infine quel “setContent” che andr√† a ritoccare la riga (o l’intero) paragrafo evidenziato trasformandolo in blocco di codice poi evidenziato tramite Prettify.

Caricate nello spazio FTP il file js e l’immagine e aprite in modifica il file functions.php del tema per richiamare il tutto e creare il nuovo pulsante nell’editor, inserite quindi questo codice prima del termine del file (oppure dove pi√Ļ ritenete opportuno):

// Bottone per pre con Google Prettify - Gioxx 09/02/2015
// RICHIEDE: nella cartella del tema devono esistere il file bottone_prettycode.js e iconabottone_Prettify.png
add_action('init', 'add_button');
function add_button() {
   if ( current_user_can('edit_posts') &&  current_user_can('edit_pages') )
   {
     add_filter('mce_external_plugins', 'add_plugin');
     add_filter('mce_buttons', 'register_button');
   }
}
function register_button($buttons) {
   array_push($buttons, "prettycode");
   return $buttons;
}
function add_plugin($plugin_array) {
   $plugin_array['prettycode'] = get_bloginfo('template_url').'/bottone_prettycode.js';
   return $plugin_array;
}

Salvate anche stavolta e godetevi il risultato. Io ho utilizzato l’icona ufficiale di Notepad++ per rappresentare il mio nuovo pulsante:

Prettify-Schermata 2015-02-14 alle 15.52.43

Tutto funziona a meraviglia e vi sarete appena evitati di modificare ogni singolo blocco “pre” manualmente.

WordPress: utilizzo di un file functions.php aggiuntivo

WordpressHackSourceCodeNon √® legge, non √® una delle pratiche che “non potete farvi mancare“, √® solo un consiglio dettato da una mia personale esperienza fatta di anni e installazioni di WordPress per me e per le persone che conosco. Il tema √® quel set di script ed elementi grafici che oggi utilizzate e che domani potreste voler cambiare a meno di chiamarvi Gioxx, quello che scelto un tema diversi anni fa e nonostante un suo aggiornamento ha continuato a mantenere e modellare quello (ci sono affezionato, davvero).

Il file functions.php fa parte del tema e contiene tipicamente codici che permettono di aggiungere o correggere funzionalit√† del vostro WordPress secondo esigenze ben precise: si va dall’impostazione massima delle dimensioni di un’immagine all’interno di un post al nascondere la versione del software, passando dalla forzatura di uno username all’interno di un modulo Jetpack. Quel file pu√≤ contenere una marea di codice spesso facile da cercare sul web e includere all’interno della propria installazione (talvolta raccolgo qualche buon articolo su delicious.com/gioxx/wordpress). Lo stesso file contiene spesso e volentieri gi√† del codice suggerito o utilizzato da chi il tema lo ha creato, finendo cos√¨ per avere vostro e suo codice insieme, rendendo un pelo pi√Ļ difficile intervenire evitando possibili danni. Se decidete di cambiare tema poi finirete per doverlo aprire, tagliare e incollare ci√≤ che vi serve all’interno del nuovo functions.php.

Il mio suggerimento? Creare un file PHP dove inserire le vostre funzioni custom che potrete facilmente spostare e includere all’interno del tema con una sola stringa. Come? √ą estremamente semplice. Includete tutto il codice che volete tra i tag di apertura e chiusura php (nell’esempio qui di seguito una modifica alle dimensioni dell’embed Twitter):

<?php

/*-------------------------------------------------*
 * Standard Theme: Custom Functions (Gioxx's Wall)
 * GSolone 2015
 *-------------------------------------------------*/
 
// Modifica dimensione embed Twitter - Gioxx 17012014
add_filter('oembed_result','twitter_no_width',10,3);

?>

Prima della chiusura classica (?>) continuate ad inserire il vostro codice e salvate il file all’interno della cartella principale del tema (con un nome facilmente individuabile se un domani doveste decidere di portare via quel file). A questo punto aprite il vero file functions.php e includete quello che avete creato poco prima:

// Inserisco i file functions custom per Gioxx's Wall
require_once(get_template_directory() . '/custom_functions.php');

Sostituendo ovviamente quel “custom_functions.php” con il nome che avete dato voi al vostro file. Questo vi permetter√† di far caricare a WordPress il codice del file functions.php e del vostro custom_functions.php con in pi√Ļ la possibilit√† un domani di portare via quest’ultimo con estrema facilit√†.

Se doveste poi pensare di voler sviluppare qualcosa di pi√Ļ complesso dai semplici codici di modifica rapida del comportamento di WordPress potrete ovviamente creare un terzo file e includere pure quello, non c’√® alcun limite imposto se non quello dettato dal buon senso e dalla velocit√† di caricamento di pi√Ļ file PHP quando viene richiesto un contenuto del vostro blog (ergo: meno ne mettete, meglio √®).

Questa √® la mia personale idea di “trasportabilit√†” verso un diverso tema, l’area commenti √® a vostra totale disposizione per ulteriori suggerimenti o per discutere la mia (o chiedere consigli in merito) :-)

WordPress: Wp Super Cache e le pagine presentate con il template mobile

Pillole

Le pillole sono articoli di veloce lettura dedicati a notizie, script o qualsiasi altra cosa possa essere "divorata e messa in pratica" con poco. Uno spazio del blog riservato ai post "a bruciapelo"!

splatter-grunge-wordpress-logoVi parler√≤ presto (spero) dell’importanza di avere a bordo Wp Super Cache (soprattutto quando si sceglie un hosting condiviso) e di una sua corretta configurazione (basata sempre e comunque su ci√≤ che mette a disposizione il provider, ndr), questo √® il classico consiglio del fine settimana a bruciapelo che potrebbe salvare qualche prezioso minuto della vostra vita nel caso in cui incorriate nel mio stesso –banale– errore ;-)

√ą iniziato tutto con un messaggio di Andrea qualche tempo fa che mi diceva che il blog presentava il template mobile anche navigandolo da un browser Desktop, anomalia apparentemente limitata a lui, in realt√† riscontrata anche da me in seguito utilizzando un diverso browser e niente lettura dalla cache. Ho trovato il tempo di dare un’occhiata a possibili problemi simili dovuti al plugin (avevo rilevato che cancellando i dati da Settings / WP Super Cache / Contents¬† tutto si risolveva, ndr) e ho trovato una discussione che ha fatto al caso mio: wordpress.org/support/topic/wp-super-cache-serves-wrong-version-mobile-to-desktop-desktop-to-mobile.

L’errore stupido: non dire al plugin che utilizzavo il tema mobile di Jetpack nel caso in cui rilevasse una connessione da smartphone o tablet, passo tanto banale quanto fondamentale da fare nelle impostazioni del plugin (Settings / Wp Super Cache / Plugins):

Wp Super Cache Plugin - Jetpack Mobile Theme

Occhio anche a WPTouch, nel caso in cui aveste scelto lui al posto del tema proposto da Jetpack. Una volta abilitata l’opzione specifica per il plugin salvate e andate ad eliminare i dati gi√† in cache per rimettere tutto in sesto ;-)

WordPress e dintorni: un’occhiata all’offerta Seeweb

is-wordpress-secureIn questo ultimo periodo (inteso nell’ultima manciata di mesi che sono passati dall’inizio dell’anno) mi sono rimesso a valutare prodotti di diversa fascia di molti dei provider conosciuti sulla piazza. Ho spostato pi√Ļ volte questo blog dopo l’abbandono del server dedicato in Germania, alcuni mi hanno lasciato appiedato gi√† durante i test, altri si sono rivelati pi√Ļ o meno validi recuperando (o perdendo) punti sul percorso tra una prova e l’altra ma uscendone poi a testa tutto sommato alta, presto vi parler√≤ dell’ultima scelta fatta che attualmente mi ospita e del perch√© io l’abbia presa. Nel frattempo voglio spendere qualche riga riguardo alcuni prodotti offerti da Seeweb, azienda molto conosciuta sul nostro territorio e spesso ricondotta a TopHost, la quale effettivamente √® cliente poich√© ospita all’interno del Datacenter di Seeweb le proprie macchine.

Ora, a meno che non vogliate mettere in piedi un server dedicato per ospitare il vostro blog personale (ammesso che non si tratti di un accumulatore seriale di visite in grado di far saltare in aria pazienza e risorse di un qualsivoglia hosting condiviso -o virtualmente dedicato- professionale), penso che possiate dare un’occhiata ai pacchetti che l’azienda rende disponibile nell’area dello shared hosting (non certo a buon mercato come Tophost ma qui non si √® mai parlato di hosting da pochi spiccioli per tenete in piedi il sito della parrocchia, ndr). Questo tipo di provider garantiscono a voi ogni dettaglio riportato all’interno del “menu della casa“, sarete costantemente monitorati, verrete avvisati in caso di anomalie, aiutati in caso di necessit√†, tutta una serie di plus ai quali difficilmente potrete rinunciare una volta “a bordo“.

Rapida parentesi riguardo lo stesso posto ma per un’offerta diversa. Tempo fa vi avevo parlato di soluzioni home-made per conservare il backup dei dati costantemente prelevati dalle vostre installazioni WordPress (anche se nell’articolo parlo di Dokuwiki, la sostanza rimane la stessa). Quei dati esportati possono essere chiaramente caricati su Dropbox, Google Drive, box.com, Copy e mille altri servizi ad-hoc per versioning e protezione del proprio lavoro. Se per voi questo tipo di servizi non √® sufficientemente affidabile o se preferite una soluzione di tipo enterprise con alti standard di sicurezza e possibilit√† di rivolgersi ad un supporto che scrive e parla in italiano e che possa quindi dare risposta ad ogni vostra esigenza ho notato che la stessa azienda propone una soluzione di backup online sicuramente pi√Ļ costosa ma che di certo non dovrebbe deludere le alte aspettative. Sia chiaro, stiamo parlando di qualcosa paragonabile a ci√≤ che si fa in azienda quotidianamente con il giro backup, non di un qualcosa di entry-level.

Questo √® solo il primo (in realt√† non proprio il primo) di una serie di articoli che spero di poter pubblicare entro breve (pi√Ļ o meno) sul mondo dell’hosting italiano “di un certo livello“. Nel frattempo ringrazio Seeweb per avermi coinvolto e avermi dato la possibilit√† di esplorare il loro mondo di servizi ;-)

WordPress: migrazione delle immagini, verifica URL, pulizia

WordpressHackSourceCodeQuando ho deciso di creare un piccolo spazio personale su WordPress.com le idee erano ancora poco chiare, fino ad allora non avevo sentito la necessit√† di un blog personale, ne gestivo e scrivevo su generici gi√† da anni, eppure volevo qualcosa di mio. In previsione di un futuro fatto di dominio di primo livello e hosting dedicato, avevo ben pensato di caricare tutte le immagini all’esterno dell’installazione WordPress. Un piccolo trucco che sicuramente rallentava (un po’) il caricamento della pagina, ma che mi ha permesso in seguito di migrare il blog molto pi√Ļ rapidamente.

Dopo anni ho deciso di migrare quei contenuti a bordo di WordPress. Vuoi per velocit√† di accesso, vuoi perch√© lo spazio non manca e vuoi anche perch√© cos√¨ in caso di down del sito dove conservo le immagini questo pu√≤ continuare a lavorare correttamente (c’√® sempre la cache attiva eh, ma in ogni caso √® meglio che le immagini siano raggiungibili), ho effettuato la migrazione. Con l’occasione ho rimesso a posto i puntamenti nei post, nei link verso l’esterno e rimosso ogni immagine inutilizzata all’interno dei post. Vi spiego cosa ho fatto, il tutto adattato a chi non sa mettere mano al proprio database SQL cos√¨ da evitare ogni danno, solo plugin e un po’ di pazienza :-)

Plugin necessari

Ho usato 3 plugin differenti, ve ne parlerò nello specifico qui di seguito: Attach Unattached Images (Media Tools Hack), Image Cleanup e Velvet Blues Update URLs. Se gli ultimi due sono facilmente rintracciabili e installabili tramite Wodpress stesso, il primo è il risultato di un hack di un diverso plugin (Media Tools, ndr) e che vi toccherà installare manualmente.

Per vostra comodit√† ho raccolto tutti e 3 i plugin in un unico archivio che potrete scaricare da app.box.com/s/m3lk84mtlqngzeyenn2j. Scompattatelo sul vostro disco e collegatevi in FTP al vostro blog, quindi caricate il contenuto nella cartella wp-content/plugins del vostro WordPress. Ricordatevi poi di andare nell’area di amministrazione ad abilitare i 3 plugin (nel caso in cui ci siano aggiornamenti, installateli).

1- Caricare i contenuti in WordPress

Indubbiamente la cosa pi√Ļ semplice. Prendete tutte le immagini che avete fino ad oggi caricato nella diversa posizione rispetto al blog, sul vostro WordPress accedete alla Media Library e aggiungete i file in blocco, a questo punto pazientate perch√© ovviamente il tutto dipende dalla quantit√† di immagini da caricare e dalla velocit√† della vostra linea.

Il risultato? Tutte le immagini saranno presenti ora sullo stesso spazio web di WordPress, bisognerà a questo punto ripuntare ogni immagine, ogni collegamento e fare attach delle immagini per capire quali vi servono e quali no, ma soprattutto a che articoli appartengono.

ATTENZIONE: Da ora in poi verranno effettuate delle operazioni sul vostro database. Consiglio caldamente di effettuare un backup prima di procedere. Esistono miriadi di tool in grado di farlo automaticamente oppure potete scegliere di passare da phpMyAdmin e fare tutto a mano. Posso consigliarvi l’utilizzo di BackupWordpress?

2- Puntare al nuovo URL

Contrariamente a prima ora le immagini si trovano nello stesso spazio del blog, in una cartella differente che -nel 90% dei casi- sar√† wp-content/uploads. Qui ci torna utile “Velvet Blues Update URLs” che tramite la sua comoda e intuitiva interfaccia ci permetter√† di modificare i puntamenti alle immagini. Da Tools / Update URLs accederete al pannello del plugin dove sar√† necessario specificare l’URL di partenza (da ricercare) e quello di destinazione (da sostituire).

velvet-update-urls

Sia chiaro: nel mio caso √® stato “semplice“. Partivo da un concentratore all’interno del quale c’erano tutte le immagini seppur conservate in cartelle differenti, al contrario della destinazione (nuova) che invece puntava tutto nella cartella uploads di WordPress. Ho solo dovuto cambiare pi√Ļ volte il parametro “Old URL” (nella pagina del plugin, come in immagine sopra, ndr) e lanciare il processo di aggiornamenti dei collegamenti, il tutto selezionando solo la prima opzione (URLs in page content) perch√© avevo gi√† fatto un primo lavoro di ricerca e sostituzione collegamenti tramite il sempre fidato Redirection. Avrei potuto utilizzare invece questo plugin anche per aggiornare i collegamenti negli articoli (sarebbe bastato selezionare anche la voce URLs in links).

Il processo è pressoché immediato, lancia una query MySQL sul database.

3- Riassegnare le immagini agli articoli

Ci avete fatto caso? Andando nella Media Library del vostro WordPress noterete che tutte le immagini caricate risultano “Unattached” (si lo so, ho WordPress in inglese e lo preferisco cos√¨), quindi non assegnate ad alcun articolo contenuto nel database. Giusto? Sbagliato. La risposta era ovvia, quello che √® meno ovvio anche perdendo molto tempo sul web per cercare una soluzione √® come porre rimedio. Vi facilito la vita: una modifica di un plugin gi√† esistente (Media Tools, ndr) permette di fare uno scan pressoch√© automatico di tutti gli articoli del blog e passare in rassegna ogni immagine attaccandola a ciascuno di questi senza ulteriore vostro intervento.

Ho ritoccato ancora un po’ il plugin e ho rimosso le opzioni non utili ai fini di questa attivit√†. Una volta caricato nel vostro spazio FTP e attivato potete trovare la voce “Media Tools” sotto “Tools“. Una volta dentro avrete a disposizione una sola opzione (Attach Unattached Images), voi dovrete scegliere “All Contents” per passare in rassegna ogni contenuto del blog oppure “Posts” per specificare ulteriori dettagli. Vi consiglio di selezionare proprio l’ultima voce citata. Per evitare sovraccarichi di CPU / RAM del vostro hosting condiviso e per non affaticare troppo il database (per query a ripetizione) √® pi√Ļ corretto scegliere Posts, selezionare una categoria alla volta (in Categories, ndr) e addirittura un intervallo di date nel caso in cui gli articoli superino i 100 nella categoria indicata.

Messe a posto le necessarie opzioni potrete lanciare il processo tramite il pulsante in fondo alla pagina (Attach Unattached Images, sempre lui ;-)).

attach unattached images

La durata del processo dipende ovviamente dalla quantit√† di articoli presenti sul database e dalle capacit√† del server che vi ospita. Come gi√† detto (meglio ribadirlo) √® meglio ripetere l’operazione suddividendola in categorie e intervalli di data piuttosto che mandare “in palla” il tutto lanciando un processo su ogni contenuto presente sul vostro blog ;-)

media-tools-attach-unattached

4- Pulizie di primavera

Ancora un ultimo sforzo, ormai ci siamo. Questo √® un passaggio non fondamentale ma credo tutto sommato utile per tutti. Quando si caricano le immagini nel proprio WordPress, lo stesso effettua dei ridimensionamenti e tiene pi√Ļ versioni della stessa immagine cos√¨ da poterle fornire rapidamente all’autore (o agli autori) degli articoli. Se lo storico pubblicato fino ad oggi per√≤ contiene immagini dalle dimensioni ben precise, avere a bordo delle ulteriori versioni delle stesse non fa altro che occupare spazio inutile sul disco.

Può quindi essere utile fare pulizia eliminando ciò che non è necessario? Parbleu, ma certamente! ;-)

In casi come questo pu√≤ tornare molto utile un plugin che ho trovato abbastanza ben fatto e performante dopo averne provati diversi. Si tratta di Image Cleanup. Una volta installato e attivato si potr√† richiamare dal menu Tools della dashboard di WordPress (fa parte anche lui del pacchetto che vi ho preparato e condiviso ad inizio articolo, ndr). Dalla sua schermata principale potrete lanciare un’indicizzazione completa delle immagini presenti in archivio (pulsante Index Images vicino al titolo del plugin) la quale al termine generer√† due voci specifiche: Unreferenced Unused Images e Obsolete Referenced Images.

Image Cleanup WordPress

Selezionando ciascuna delle due voci verranno caricati gli elenchi di immagini non utilizzate rilevati. Dal menu di Bulk Actions potrete scegliere di cancellare tutti i file semplicemente selezionando la voce Delete e confermando con Apply. Ripetendo l’operazione per tutte le pagine dell’elenco si arriver√† ad avere (manco a dirlo) zero entry in lista (in realt√† la lista sar√† comunque popolata ma con un “Deleted” in corrispondenza di ciascuna immagine). Fate attenzione nel caso in cui abbiate temi personalizzati o modifiche al feed RSS che magari vanno ad utilizzare le immagini in dimensioni differenti, queste potrebbero risultare inutilizzate “agli occhi di WordPress” nonostante non lo siano per tema o chiss√† cos’altro (servizi esterni / pagine statiche / ecc.), mi √® successo un errore simile con Fuorigio.co e ho dovuto poi rimediare ripristinando qualche immagine che ho per errore incluso in quelle da cancellare, occhio! ;-)

In conclusione

Spero di avervi dato ogni riferimento possibile nel caso in cui dobbiate replicare questo tipo di operazione sul vostro CMS. Il processo non √® complesso ma √® necessario fare attenzione a dove si mettono le mani e -come sempre- avere un backup a portata di mano per ripristinare ogni cosa nel caso in cui facciate (involontariamente o non) dei danni alla struttura. L’operazione pu√≤ richiedere qualche ora di lavoro (dipende dalla quantit√† di dati e dalle risorse messe a disposizione dal vostro hosting provider) ma di sicuro alla fine vi porter√† al risultato desiderato, permettendovi cos√¨ di dare maggiore velocit√† all’intero sito web, che male non fa mai secondo le analisi di Google & Co.

In caso di dubbi come sempre l’area commenti √® a vostra disposizione. Vale anche per lasciare un vostro consiglio, magari un domani (oppure oggi stesso) √® possibile sostituire qualche passaggio con informazioni e istruzioni pi√Ļ semplici da capire e portare a termine, io ho utilizzato una strada che ho ritenuto affrontabile con uno sforzo non minimo ma neanche insopportabile, capisco che per alcuni utenti potrebbe non essere cos√¨ e per questo vi invito a dire la vostra! :-)

Page 1 of 812345»...Last »