Archives For Wordpress

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"!

Quello che vedete nel titolo dell’articolo è un messaggio che potrebbe comparire durante l’aggiornamento di un plugin, un tema o qualsiasi altro componente facente parte della vostra installazione WordPress. La modalità di “Maintenance” è una cosa più che comune per il CMS di Matt Mullenweg, lo stesso che non siamo abituati a veder fallire ammesso che non si trovi ad avere meno risorse del previsto, come il caso dell’errore nel titolo.

Briefly unavailable for scheduled maintenance. Check back in a minute. 1

Si perché nel caso in cui il software non riesca a terminare l’operazione per tempo, subentrerà un timeout che presenterà poi a monitor quell’errore con un carattere molto ben leggibile e poco rassicurante. In realtà vi basterà andare a rimuovere il file.maintenance” che WordPress avrà creato nella cartella principale di installazione (via FTP o equivalente da pannello di controllo del proprio Hosting Provider).

Aggiornate ora la pagina e asciugate la fronte. Provate ora ad aggiornare nuovamente il plugin o il tema che ha fatto andare in “surriscaldamento” il motore del vostro sito web ;-)

Avete scritto il vostro pezzo, lo avete pubblicato e nel momento in cui questo viene condiviso su Facebook scoprite che l’immagine scelta dal Social Network non è quella che speravate o pensavate dovesse essere presa. Ci sono un paio di metodi validi per risolvere questo problema: il primo richiederà la più classica delle modifiche al functions.php, l’altro passa dal plugin semplice e veloce da installare tramite dashboard amministrativa del CMS.

Wordpress: niente immagine di anteprima su Facebook? Risolvere il problema 2

Primo metodo: functions.php

Mano al file functions.php del vostro tema, questo codice dovrebbe risolvere agilmente il problema e consentirvi finalmente di utilizzare l’immagine “featured” (o nell’eventualità la prima riportata nell’articolo o una terza di emergenza da voi scelta, ndr) come sfondo del vostro blocco condiviso tramite la pagina del profilo Facebook:

function insert_image_src_rel_in_head() {
    global $post;
    if ( !is_singular()) //se non si tratta di un post o di una pagina
        return;
    if(!has_post_thumbnail( $post->ID )) { //articolo privo di featured image, utilizza quindi la default scelta
        $default_image="http://VOSTROURL/IMMAGINEDEFAULT.jpg"; //Modifica URL e nome immagine con quelli del tuo blog
        echo '<meta property="og:image" content="' . $default_image . '"/>';
    } else {
        $thumbnail_src = wp_get_attachment_image_src( get_post_thumbnail_id( $post->ID ), 'medium' );
        echo '<meta property="og:image" content="' . esc_attr( $thumbnail_src[0] ) . '"/>';
    }
    echo "";
}
add_action( 'wp_head', 'insert_image_src_rel_in_head', 5 );

Codice all’interno del quale dovrete andare a modificare “http://VOSTROURL/IMMAGINEDEFAULT.jpg” con l’indirizzo corretto ed assoluto dell’immagine di default da utilizzare nel caso in cui il codice non trovi un’immagine da utilizzare per la pubblicazione su Facebook.

Secondo metodo: plugin

Più facile, veloce e con la possibilità di caricare un’immagine di default direttamente da dashboard, chiaramente il metodo perfetto per chi non vuole sporcarsi le mani o rischiare di fare danni all’interno del codice PHP della propria installazione.

Wordpress: niente immagine di anteprima su Facebook? Risolvere il problema 1

In questo caso vi consiglio “Facebook Like Thumbnail“, lo si trova nel repository su WordPress.org (quindi ricercabile e installabile direttamente dal vostro WordPress) e richiede la sola impostazione dell’immagine di default da utilizzare in caso di non presenza della featured.

Trovate la sua voce dedicata sotto “Settings” e dopo aver impostato la “Default FB Like thumbnail” non richiederà ulteriore intervento da parte dell’utente, inizierà sin da subito a funzionare (ricordate di pulire la cache prima nel caso in cui abbiate un plugin ad-hoc anche per gestire quella).

Può capitare di avere impostato nel CSS una dimensione massima per le immagini (magari responsive, che aiuta) e di non andare oltre i 4 soliti tagli proposti da WordPress: thumbnail (tipicamente 150×150 o giù di lì), Medium, Large e Full Size. Magari però, come per un mio caso specifico, avreste gradito un’ulteriore taglio, più grande del Large ma sotto al Full Size e magari senza l’utilizzo dell’ennesimo plugin che sicuramente facilita la vita ma spesso aggiunge carico inutile all’installazione di WordPress. La risposta è “si può fare“, e qui di seguito vi spiego come.

Wordpress: aggiungere nuove dimensioni immagini

In poche parole: WordPress (anche il vostro) supporta già questa possibilità ma aspetta una vostra istruzione (vostra o del tema utilizzato) a riguardo che possa indicargli una nuova misura da aggiungere a quelle disponibili. Una volta fatto questo primo passaggio, un secondo permetterà di far comparire quella misura all’interno del menu a tendina che tutti siamo abituati ad utilizzare quando inseriamo un’immagine in un post.

Nello specifico l’istruzione per aggiungere un nuovo taglio deve essere preceduta dall’attivazione del supporto del tema. Entrambe compongono questo semplice blocco da inserire all’interno del file functions.php del vostro attuale tema:

add_theme_support( 'post-thumbnails' );
add_image_size( 'fullwidth_banner', 900 ); // Banner nelle pagine senza sidebar

Dove il mio “fullwidth_banner” e il “900” a ruota possono e devono essere sostituiti rispettivamente da un nome a vostra scelta ed una diversa misura se necessario, il tutto spiegato per filo e per segno nella pagina dedicata su Codex: codex.wordpress.org/it:Riferimento_funzioni/add_image_size.

A questo punto una seconda parte di codice vi permetterà di far comparire la nuova voce all’interno del menu di scelta dimensione immagine da inserire nel post, questo per la precisione:

function my_custom_sizes( $sizes ) {
  return array_merge( $sizes, array(
    'fullwidth_banner' => __( 'Fullwidth Banner' ),
    //'your-custom-size2' => __( 'Your Custom Size 2 Name' ),
  ) );
}
add_filter( 'image_size_names_choose', 'my_custom_sizes' );

dove chiaramente al posto di “fullwidth_banner” metterete il nome scelto per il vostro ridimensionamento, da rendere più leggibile tra gli apici della parentesi tonda a seguire (‘Fullwidth Banner’). Per comodità ho lasciato anche il “template” per farvi capire meglio (commentato, your-custom-size2, ndr).

Quindi, volendo fare opera completa all’interno del file functions.php (mi raccomando, sempre prima del “?>” finale), questo è il blocco di codice completo:

//=== Aggiungo dimensioni custom per le immagini
add_theme_support( 'post-thumbnails' );
add_image_size( 'fullwidth_banner', 900 ); // Banner nelle pagine senza sidebar
function my_custom_sizes( $sizes ) {
  return array_merge( $sizes, array(
    'fullwidth_banner' => __( 'Fullwidth Banner' ),
    //'your-custom-size2' => __( 'Your Custom Size 2 Name' ),
  ) );
}
add_filter( 'image_size_names_choose', 'my_custom_sizes' );

all’interno del quale per ovvi motivi potrete continuare a dichiarare ulteriori “add_image_size” da riportare in seguito nell’array da mostrare nel menu a tendina della selezione dimensione immagine da inserire nel post.

Buon lavoro! :-)

Fonte codice: wpthememakeover.com/

Consenso per l’uso dei cookie: come comportarsi su WordPressOrmai ci siamo, il prossimo 2 giugno è il limite massimo per mettersi in regola con la nuova normativa per il consenso all’utilizzo dei cookie in tutti i siti web che ne fanno uso, un obbligo stabilito dal Garante per la protezione dei dati personali, il quale testo (completo) è disponibile all’indirizzo garanteprivacy.it/web/guest/home/docweb/-/docweb-display/docweb/3118884.

Siamo agli sgoccioli e ancora molti possessori di blog non hanno ben compreso che si tratta di un obbligo allargato anche a questa categoria, nessuno escluso, e che nonostante ci siano ancora alcuni punti poco chiari è comunque il caso di fare il proprio dovere e correre “ai ripari” per evitare spiacevoli disguidi e multe.

Giovedì della scorsa settimana Tiziano ha realizzato un articolo che spiega in maniera estremamente semplice a cosa si sta andando incontro e come reagire, questo il collegamento: fogliata.net/cookie-notifica-consenso. All’interno dei commenti si fa riferimento ad un ulteriore parere legale in merito che scarica il possessore del blog dall’obbligo di esporre il banner per accettare o rifiutare i cookie utilizzati (alessandrodelninno.it/upload/art_articoli/documenti/00000068.pdf) ma se anche voi -come me- volete comunque informare chi visita il sito web riguardo la vostra politica Cookie / Privacy e magari dirgli come rimuoverli in tutta sicurezza e autonomia dal browser, ecco qualche consiglio rapido:

In ogni caso mi permetto di copiare ed incollare un messaggio di un amico che parla di questa novità e del fatto che forse -in tanti- la si stia “facendo più grossa di quanto non sia“:

In questi lidi si fa uso di ciò che chiunque oggigiorno è abituato ad avere a bordo del blog: Google Analytics, pulsanti di condivisione sui Social Network (da Twitter a Facebook passando per Spotify e altri ancora), commenti via Disqus, banner da Amazon. Vengono inoltre caricate risorse anche da siti web esterni come fuorigio.co (ormai lo conoscete) e noads.it (sempre mio, è il sito ufficiale di ABP X Files). Ho comunque creato una pagina ad-hoc dove trovate un testo molto completo che vi spiega che tipo di Cookie esistono e come rimuoverli facilmente dal browser (gioxx.org/policy/policy-sui-cookie), il testo è farina del sacco di Alessia Martalò.

Voi siete già in regola? Che plugin o modifiche al codice avete utilizzato? Se volete lasciare un suggerimento è sempre tutto ben accetto, l’area commenti è a vostra disposizione, nell’eventualità posso modificare l’articolo e darvi spazio ;-)

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.