Archives For Wordpress

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.

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) :-)