Come individuare i problemi di visualizzazione del sito su Smartphone Android

    No Comments
    come ispezionare il codice di un sito

    Effettuare il debugging di un sito in versione mobile tramite il proprio computer desktop

    Hai realizzato un bel sito? Bene, ma hai tenuto a mente che la maggior parte della navigazione dei siti web avviene tramite cellulari smartphone e tablet? Questo significa che la versione più importante del tuo sito è quella mobile! Fortunatamente i temi WordPress oramai hanno tutti una versione viewport, che si modifica a seconda del dispositivo utilizzato, mostrando al visitatore la versione giusta per lui. Ma cosa succede se la visualizzazione per smartphone ha qualche imperfezione da sistemare? Dobbiamo fare il debugging, ovvero controllare il codice del sito e localizzare il problema. In questo caso vediamo un esempio di problema CSS. I CSS sono i fogli di stile che permettono al nostro sito la visualizzazione “graficamente elegante” della struttura (colori, indentazioni, spazi, caratteri utilizzati, ecc.). Per fare il debugging di una pagina web (visualizzata dal desktop) ci basta visitare quella pagina, andare nella zona che ci interessa controllare (ad esempio in corrispondenza di un titolo che ha una dimensione o un carattere che vorremmo cambiare), cliccare col tasto destro e scorrere su “Ispeziona” (oppure usare la combinazione di tasti CTRL + Maius + I ), e si aprirà una schermata a lato che ci mostrerà il codice relativo a quella parte di sito (vedi sezione Styles).

    come ispezionare il codice di un sito

    Questo strumento ci permette di individuare quale proprietà di foglio di stile dobbiamo andare a modificare, ovvero come si chiamano i selettori identificativi all’interno del foglio di stile. Senza addentrarci troppo nello specifico (servirebbe un corso completo di CSS a parte), nell’esempio seguente ecco cosa viene visualizzato ispezionando la parte relativa al logo di questo sito (ad esempio vogliamo capire come ridurre lo spazio dall’alto o il margine sinistro, ecc.).

    ispeziona codice sito

    Se ad esempio volessimo ridurre lo spazio tra il logo e la parte sottostante, sappiamo che dobbiamo andare a modificare il codice <em>padding-bottom:15px</em> . Possiamo fare una prova immediata, cliccandoci sopra e modificandone il valore: ad esempio mettendo 50px, e vedremo subito come cambia la visualizzazione del sito. Ma questa è solo un’anteprima, se soddisfatti, ora dovremo andare nel foglio di stile del nostro sito, cercare (con F3) ad esempio .header oppure .logo o altro che ci permetta di individuare quella parte di codice CSS che vogliamo modificare, e una volta trovato fare la modifica e salvare.

    E se dovessimo modificare la visualizzazione per cellulari? Sempre con Chrome Il procedimento è analogo, abbiamo sempre a disposizione strumenti potenti e completi, e possiamo fare così: in alto a destra clicchiamo sui 3 puntini –> scendiamo su altri strumenti –> strumenti per sviluppatori. Anche questa volta si aprirà la consolle di debug. Se guardiamo bene, in alto, c’è un’icona mobile: cliccando su questa “Toggle Device Bar” la consolle di commuterà in visione per cellulare. Se non trovate l’icona, potete usare il comando CTRL + Shift + M. Questa funzione, diventa utile anche per capire come si visualizza il vostro sito web su cellulare.

    debug sito mobile

    Questa consolle di debug per cellulari vi permetterà ora di ispezionare la versione mobile del vostro sito, e anche di cambiare tipo di visualizzazione (dimensione schermo) e tipo di dispositivo (Ios, Android, ecc.). Ora che lo sapete, sarà il compagno di ogni webmaster che realizza un sito o decide di cambiare il tema del proprio sito WordPress e non. Ricordatevi che per vedere le modifiche live dovete cancellare la cache del vostro browser oppure aprire una sessione in incognito.

     

    Categories: Tutorial & Modifiche Tags: Tag:

    bbPress: come mettere un’immagine in evidenza per ogni forum

    1 Comment

    Hai un forum basato sulla piattaforma WordPress + il plugin bbPress? Bene, un bel modo di renderlo più accattivante e meno standardizzato è quello di mettere un’immagine specifica per ogni forum. Ad esempio se si tratta di un forum di viaggi diviso in sezioni, è bello mettere un’immagine del paese o relativo alla sezione in cui l’utente navigherà. Questa funzione non è inclusa nel forum di WordPress, nè è disponibile un plugin per aggiungerla. E allora come fare? Dobbiamo modificare il codice, ma per fortuna si tratta di una semplice modifica. Il codice seguente praticamente attiva una funzione già esistente all’interno di WordPress. In sostanza non dobbiamo creare chissà che cosa ma semplicemente attivare quanto c’è già. Il codice è il seguente:

    // Original Source: http://www.kristarella.com/2013/04/bbpress-forum-icons/
    add_post_type_support('forum', array('thumbnail'));
    function ks_forum_icons() {
    	if ( 'forum' == get_post_type() ) {
    		global $post;
    	    if ( has_post_thumbnail($post->ID) )
    	    	echo get_the_post_thumbnail($post->ID,'thumbnail',array('class' => 'alignleft forum-icon'));
    	 }
    }
    add_action('bbp_theme_before_forum_title','ks_forum_icons');
    

    In sostanza, se ora andate all’interno dell’amministrazione del singolo forum, quello che mettete come “immagine in evidenza” diventerà automaticamente l’immagine che il vostro template mostrerà nel singolo forum (con posizione che può cambiare a seconda del tipo di template che usate). Questo uno screenshot dell’amministrazione:

    Questo il risultato sul singolo forum (vedi forum)
    esempio immagine in evidenza

    Dove e come inserire questo codice?
    Il codice va inserito nel file functions.php del vostro tema. Meglio se è un tema child, ovvero figlio, così in caso di aggiornamenti il codice non verrà sovrascritto. Un’alternativa migliore – rivolta sopratutto ai meno esperti – è di utilizzare un plugin che permetta l’inserimento di questo codice. Io ad esempio utilizzo Code Snippets. Disponibile su wordpress, permette di inserire pezzi di codice nel file di cui sopra, e vi fa anche un controllo generale che il codice che andate ad inserire non provochi errori fatali:

    Ora potete rendere più interessante graficamente il vostro forum.

    Categories: Tutorial & Modifiche Tags: Tag:,

    Come sbloccare wordpress che si blocca durante l’aggiornamento

    1 Comment
    unvailable for maintenance

    Chi utilizza wordpress avrà sicuramente notato che compaiono spesso notifiche di aggiornamenti disponibili, sia per il core (aggiornamenti della versione di wordpress), sia per i plugins che abbiamo installato nel nostro blog: e se ne usiamo tanti, allora gli aggiornamenti sono frequenti, ed importanti (non possiamo non aggiornare in quanto rischiamo di lasciare wordpress con delle vulnerabilità che lasciano entrare hackers).

    Il bello di WordPress è che (quasi) sempre possiamo fare l’aggiornamento in maniera facile ed intuitiva tramite il pannello di controllo, che ci porta all’indirizzo vostrosito/wp-admin/update.php . Dico quasi, perchè se abbiamo dei plugins premium (acquistati tramite marketplace come Codecanyon o comunque da terze parti) a volte non permettono l’aggiornamento diretto bensì bisogna scaricare la nuova versione dal loro sito. Sono comunque una piccola minoranza. In generale, come già avrai sperimentato, alla notifica è disponibile un aggiornamento per questo plugin ti basta cliccare e confermare l’update.

    Nel 99% l’aggiornamento funziona bene, il sistema segue questi passaggi:
    – mette temporaneamente offline il sito
    – disinstalla / sovrascrive il plugin (o la versione wordpress)
    – sovrascrive / reinstalla il plugin (o la versione wordrpress)
    – riattiva il plugin e rimette online il sito

    Ma a volte l’aggiornamento si blocca, non si completa, e se proviamo a fare il refresh della pagina o a navigare nell’amministrazione (o nel sito) compare la seguente schermata di blocco:

    unvailable for maintenance

    Da questo momento il sito è inutilizzabile, sia per i visitatori, sia per gli amministratori. Ma l’avviso “briefly unavailable for scheduled maintenance. Check back in a minute” diventa un’eternità se non risolviamo manualmente. Come sbloccare la situazione e tornare online? L’unico modo è utilizzare il vostro programma FTP (oppure il sistema di gestione files che vi fornisce il vostro hosting) e andare nella root (cartella principale) del vostro sito, dove vengono elencati i file principali (index.php, wp-config.php, ecc.). Una volta aperta/visualizzata la cartella principale, troverete un nuovo file, che viene creato da WordPress nel momento in cui effettua l’aggiornamento: .maintenance . E’ un file “nascosto”, come il file .htaccess : potreste non vederlo in quanto il vostro gestore di files potrebbe avere settato di default di non mostrare questo file. Se così fosse, ad esempio se utilizzate cpanel, in alto a destra cliccare su Impostazioni e selezionare l’opzione “Mostra files nascosti” (o “Show hidden files”). In sostanza, dovrete vedere come in figura:

    file .maintenance

    Ora semplicemente rimuovetelo / cancellatelo, e il vostro sito tornerà funzionante come prima. Una volta rimosso potrete tornare nell’amministrazione, nella sezione aggiornamenti/updates e riprovare a fare l’aggiornamento online. Se il problema torna nuovamente, ripetete la procedura di rimozione, e attendete a rifare l’aggiornamento, potrebbe esserci un temporaneo blocco di importazione files dalla piattaforma wordpress (o terza parte) e il vostro server. Riprovate più tardi, se continua allora contattate il vostro gestore di hosting per controllare il log degli errori e vedere cosa impedisce l’aggiornamento.

     

    Come sistemare Upload “HTTP Error” su WordPress

    1 Comment

    Può capitare che caricando un file immagine mentre stai creando un post o una pagina compaia l’errore http error nella finestra di caricamento immagini. Come risolvere?

    L’errore non è di origine certa, nel senso che le cause possono essere diverse, e allora bisogna provare varie soluzioni. Ecco le cause più comuni e le possibili soluzioni, partendo dalle più semplici alle più tecniche:

    1) E’ finito lo spazio web a disposizione. Se il tuo account ha esaurito lo spazio fisico allocato (limite imposto dall’hosting) allora non può caricare nuovi files.
    Soluzione: liberare spazio fisico oppure chiedere un upgrade del proprio hosting

    2) Riducete la dimensione dell’immagine. Non caricate ad esempio un’immagine da 2000px di larghezza. Riducetela ad esempio 1024px, o meglio ancora – se la dovete inserire all’interno di un post – a 600px. Esistono sia siti internet per ottimizzarle online, sia plugin per ottimizzare le immagini già caricate all’interno del vostro sito.

    3) Il formato del file o dell’immagine non è compatibile. A volte può capitare per alcune immagini.
    Soluzione: provare con un’immagine diversa. Se funziona, allora convertire l’immagine che vogliamo caricare e salvarla in un altro formato. Se ad esempio è una .jpg potete convertirla in .png, e viceversa.

    4) Conflitto con plugin di ottimizzazione immagini.
    Soluzione: disattivate (anche solo temporaneamente) il plugin e riprovate.

    5) La memoria allocata per Apache/PHP nella configurazione di wordpress è troppo bassa/limitata. Si può facilmente verificare ed aumentare.
    Soluzione: aumentare la memoria php. Aprire il file wp-config.php (presente nella root / directory principale del vostro hosting). In questo file vengono elencati tutti i set up della configurazione wordpress. Importante: editatelo solo con un normale programma Notepad o direttamente con il file editor del vostro hosting, NON utilizzate Word e simili. Cercate la riga con questa istruzione:

    define('WP_MEMORY_LIMIT', ' ');

    (avrà un valore in MB all’interno.).
    Cambiatela nel modo seguente (se non presente, semplicemente aggiungetela)

    define('WP_MEMORY_LIMIT', '64MB');

    o meglio

    define('WP_MEMORY_LIMIT', '128MB');

    Salvate il file e riprovate.

    6) Potete provare a risolvere aggiungendo queste righe al file .htaccess, che si trova anch’esso nella directory root del vostro spazio web. Nota importante: editare con il file manager del vostro hosting, oppure con programma apposito, oppure con un semplice Notepad. Non usare word e simili. Codice da aggiungere all’inizio del file .htaccess :

    <IfModule mod_security.c>
    SecFilterEngine Off
    SecFilterScanPOST Off
    </IfModule>

    oppure

    <FilesMatch "(async-upload\.php|wp-cron\.php|xmlrpc\.php)$">
    Satisfy Any
    Order allow,deny
    Allow from all
    Deny from none
    </FilesMatch>

    oppure

    AddType x-mapp-php5 .php

    8) Se questi non funzionano, allora è bene contattare l’assistenza del vostro fornitore di spazio web.

    Categories: Tutorial & Modifiche Tags: Tag:

    Sostituire termini e stringhe nel sito con Search And Replace Db Master

    1 Comment

    Programma gratuito che permette di lavorare facilmente nel database mysql del vostro sito, con interfaccia semplice. Perchè utilizzarlo? Devi correggere delle stringhe, degli indirizzi url, delle parole accentate o altri termini in tutto il sito? Se hai spostato il tuo sito wordpress, o hai trovato degli errori che sono presenti in tutto il sito (esempio parole accentate), o devi cambiare degli url (ad esempio per passare da http ad https) uno strumento molto utile e di facile utilizzo è Search Replace DB Master, che ti permette di trovare la stringa che cerchi, localizzarla, modificarla senza dover scrivere codici in php o query in sql. Il programma, gratuito, ha un’interfaccia chiara e il suo funzionamento è molto semplice. Vediamo come si installa, come si utilizza e qualche esempio pratico.

    Download ed Installazione

    dove installare search replace db masterIl programma, creato da Interconnectit.com, è disponibile per il download tramite Github qui. Una volta scaricato il file zippato e decompresso, estrarre tutti i files in una cartella che chiamerete come volete (esempio Search-Replace-Db-Master) ma che suggerisco vivamente di rinominare in un nome conosciuto solo a voi o con una nota che vi ricordi di cancellare tale directory una volta finito il lavoro. Potete ad esempio creare la cartella “CANCELLAMI-QUANDO-FINITO”, per evitare di lasciare questo potente programma accessibile a tutti una volta completate le sostitutizioni che ci interessano. Create quindi la cartella nella root del vostro spazio web, e caricateci tutti i files decompressi. In breve, la root del vostro spazio web dovrebbe essere qualcosa come nello screenshot seguente.

    Utilizzo

    Una volta caricati tutti i files in questa cartella (ad esempio “search-replace-db-master”), digitate la url vostrosito/nomecartella, e vi troverete già nel pannello di controllo dello script. Noterete subito due aspetti: il primo, è che ci siete arrivati senza dover digitare nessun username o password. La seconda, è che mostra già i dati di accesso del vostro database! Ha già “capito” qual è l’username, quale sia la password, la porta di accesso. Per questo motivo la cartella deve avere un nome conosciuto solo a voi, e sempre per questo motivo va cancellata una volta finito.

    schermata search replace db master

    Testiamo lo script effettuando una semplice ricerca di quello che vorremmo modificare, inserendo il termine o la stringa all’interno della casella Search. Lanciamo il comando Dry Run (che ci permette di fare una sorta di simulazione, ovvero non fare sostituzioni). Ad esempio, dal momento che nel sito di prova stiamo passando da http ad https , vorremmo controllare quanto è ancora presente il vecchio url classico http:// (in modo da poter mettere ovunque il nuovo https:// ). Lanciamo la query e il programma, oltre a ricordarci di aver selezionato l’opzione Dry Run “The dry-run option was selected. No replacements will be made.” ovvero nessuna sostituzione verrà eseguita, ci mostrerà quante volte occorre il termine cercato e in quali tabelle si trova:

    comando dry run

    E’ banale ricordare che, essendo uno strumento potente ed irreversibile, bisogna fare un backup prima di lanciare qualsiasi operazione di sostituzione.

    Opzioni e utilità principali del programma

    Search Replace DB Master permette di:

    • limitare o estendere le tabelle sulle quali cercare e/o operare sostituzioni. E’ un’opzione molto importante e molto comoda, perchè potremmo essere interessati solo a correggere, ad esempio, le parole accentate contenuti nei posts, oppure nei commenti, lasciando stare le opzioni principali del sito stesso, su cui operare in modo diverso
    • specificare le colonne (delle tabelle) su cui andare a cercare e/o operare sostituzioni

    Di default il programma opererà su tutto il sito, possiamo andare a limitare il campo andando a selezionare le tabelle e/o indicando i nomi delle colonne:

    tabelle e colonne

    Sostituzione stringhe, parole ed esempi pratici

    Prima di fare qualsiasi sostituzione è bene quindi, dopo aver fatto un backup, lanciare questa sostituzione tramite il comando Dry Run, per simularla.

    Esempio 1: vogliamo cambiare i percorsi delle immagini da assoluti a relativi (in modo da non avere errori se passiamo all’https), ovvero sostituire

    <img src="http://www.nostrosito.it/immagine1.jpg" />

    con

    <img src="//www.nostrosito.it/immagine1.jpg" />

    Nel campo “Search” inseriamo src=”http://www. e nel campo “replace with” inseriamo src=”//www. . Opzionale: ci interessa fare questa sostituzione solo all’interno dei post? Scriviamo “post_content” nel campo columns to include only (optional, comma separated). Lanciamo il dry run per simulare la sostituzione. Una volta terminata, il programma ci mostrerà dove andrebbe ad operare la sostituzione richiesta. Verifichiamo che sia come avevamo pensato, e se tutto ok, ora possiamo lanciare il comando Live Run, che effettuerà veramente le sostituzioni richieste.

    Esempio 2: vogliamo sistemare le parole accentate. Copiamo la stringa mal accentata nel campo Search. Ad esempio, vorrei cambiare tutte le parole che terminano con è con é, come ad esempio la parola perchè in perché (o anche solo questa). Inserisco il termine sbagliato e quello giusto nei due campi ad inizio schermata, clicco su Dry Run per vedere quali sostituzioni farebbe, lancio il comando Live Run per rendere effettive le sostituzioni
    sostituzioni effettuate

    Esempio 3: vogliamo cambiare gli iframe che richiamano siti esterni (esempio: mappe di google, widget di Facebook) che avevamo inserito con codice normale http e che ora devono essere in https. Nel campo Search inseriamo

    <iframe src="http://

    mentre nel campo Replace with inseriamo

    <iframe src="https://

    Lanciamo il comando Dry Run e poi Live Run, e la sostituzione verrà effettuata in tutto il sito (non solo nelle descrizioni dei post)

    Raccomandazioni

    Come avrete intuito, questo è uno strumento molto potente, i cui effetti sono spesso irreversibili, ma abbiamo gli strumenti per lanciare i comandi di sostituzione con sicurezza: fare prima un backup del database, e per ogni sostituzione lanciare prima la simulazione Dry Run che ci permette di capire in anteprima se stiamo lanciando una query sbagliata. E, molto importante per la sicurezza, al termine cancellare la directory contenente il programma. La stessa schermata mette ben in evidenza il bottone Delete me per rendere il sito sicuro una volta terminato il nostro lavoro.
    delete me
    Se avete domande sulle stringhe da sostituire e in generale sugli errori presenti nel vostro sito i commenti sono a disposizione.

    Categories: Hosting, Tutorial & Modifiche Tags: Tag:,

    WordPress, come passare da http a https (e aumentare le visite al sito)

    7 Comments

    Le operazioni necessarie per gestire correttamente il cambio di indirizzo del sito dal vecchio formato http al nuovo protocollo sicuro https

    Nell’articolo precedente abbiamo parlato delle tipologie di certificati SSL, quale scegliere per il nostro sito e come acquistarlo. Noi, grazie al nostro fornitore di hosting, l’abbiamo acquistato tramite il pannello di controllo hosting cPanel. Questa operazione ha due grossi vantaggi: il certificato di cui ha bisogno il nostro sito ha un prezzo molto accessibile, e inoltre il certificato – una volta rilasciato dall’authority competente – viene direttamente installato sul nostro server. Non dobbiamo preoccuparci di nulla, se non della parte post installazione, ovvero fare le opportune modifiche al nostro wordpress per gestire correttamente il cambio da http ad https senza avere errori nel sito e senza perdere posizionamenti sui motori di ricerca. Anzi, il cambio a protocollo sicuro in teoria ci porterà più visite.

    Dopo aver installato il certificato sul server dobbiamo mettere mano alla nostra installazione wordpress per cambiare le impostazioni (url, media) da http a https. In sostanza si tratta di trasformare le pagine vecchie in pagine nuove, e pertanto non dobbiamo lasciare errori nei link interni, nel caricamento delle immagini, oltre che reindirizzare le pagine linkate da siti esterni verso le la nuova struttura url. Può sembrare un lavoraccio, ma in realtà seguendo pochi semplici passaggi possiamo già sistemare il 95% di tutta la struttura (il restante 5% lo scopriremo in seguito grazie a qualche verifica post migrazione).

    1) Cambio della struttura dei permalink

    Semplice ma fondamentale. Fare il login nel pannello di amministrazione wordpress, andare nel menu Impostazioni e poi su Permalink. Si tratta di quella impostazione che si setta una volta nella vita quando installi wordpress e poi ci si mette mano in occasioni straordinarie. Ecco questa è una di quelle. Nella schermata seguente dei aggiungere la s all’http, ovvero cambiare il percorso del sito da http ad https, come nella figura:

    ssl cambio url wordpress

    Salvate. Il sistema ora vi farà fare il logout, e vi reindirizzerà alla nuova pagina di login https://www.vostrosito.com/wp-login.php . Potete rientrare con stessi username e password di sempre.

    2) Reindirizzare da http ad https tutte le url del sito

    Ora dobbiamo impostare il redirect di tutti gli indirizzi da http ad https, in modo che ogni link/richiesta ad una vecchia pagina tipo http://www.miosito.net/articolo-numero-1/ venga automaticamente indirizzata alla nuova https://www.miosito.net/articolo-numero-1/ . Per fare questo, dobbiamo inserire queste poche righe di codice nel file .htaccess . Quindi, tramite un programma FTP oppure tramite il gestore file del nostro pannello hosting, andiamo ad editare il file .htaccess che si trova nella directory principale dell’installazione wordpress (in genere in /home/vostroaccount/public_html/ ). Ecco le righe da inserire all’inizio:

    <IfModule mod_rewrite.c>
    RewriteEngine On
    RewriteCond %{SERVER_PORT} 80 
    RewriteRule ^(.*)$ https://www.tuttoblog.com/$1 [R,L]
    </IfModule>

    Dove ovviamente al posto di tuttoblog.com metterete l’indirizzo del vostro sito. Dopo aver inserito il codice e aver salvato il file, ogni vostro indirizzo url verrà automaticamente reindirizzato, in maniera permanente, alla nuova versione https. Come ad esempio la vecchia pagina in esempio

    indirizzo http non sicuro

    ricaricando la pagina (tasto F5), verrà automaticamente reindirizzata alla versione https, e comparirà il lucchetto che sancisce la sicurezza del sito

    indirizzo https sicuro, con lucchetto

    Cliccando sul lucchetto, è possibile avere informazioni aggiuntive, ovvero la dicitura “sito sicuro” e ulteriori informazioni sul certificato e da chi è stata emessa la certificazione:

    info sul certificato del sito

    Finito? Diciamo che oltre il 75% del lavoro è già fatto. Se il sito è recente, o comunque è stato realizzato in maniera corretta, allora siamo vicini al 100%. Cosa può essere sfuggito? Immagini e iframe possono causare errore di sicurezza ed impedire al sito di essere sicuro al 100%. Ad esempio il caricamento di immagini interne che abbiamo inserito utilizzando un percorso assoluto. Se la nostra pagina di esempio è ora con indirizzo https://www.nostrosito.it/pagina1/ , e al suo interno un’immagine è stata inserita con percorso tipo

    <img src="http://www.nostrosito.it/immagine1.jpg" />

    allora dovremmo modificare anche questa aggiungendo la s all’http. Ma come facciamo se abbiamo molte immagini da sistemare? Un aiuto ci viene utilizzando in modo corretto il phpmyadmin che gestisce il database: con queste poche istruzioni possiamo cambiare tutti i percorsi di tutte le immagini incluse nei nostri post e nelle nostre pagine. In sostanza, dobbiamo dire alla macchina che ogni volta che (nel database) trova il tag immagine
    src=”http:// lo deve sostituire con il codice src=”// , ovvero il percorso relativo. L’ideale, è avere le immagini richiamate in questo modo:

    <img src="//example.com/image.jpg" alt="nome immagine">

    In questo modo, le immagini che nel nostro wordpress sono inserite con il percorso relativo, sarà il nostro wordpress ad attribuirgli il giusto https davanti. Attenzione: questa istruzione, inserita nello spazio istruzioni sql del nostro phpmyadmin, è irreversibile. Pertanto è opportuno fare un backup del database. Per passare anche le immagini in https andare nel pannello hosting fornito dal vostro provider, aprire il phpmyadmin. Una volta aperto, selezionate il database del vostro wordpress (generalmente trovate solo un database). Nella schermata che si apre, cliccare sul tab “SQL” in alto:

    phpmyadmin tab sql

    Qui possiamo inserire questa istruzione che sostituisce il percorso immagine all’interno del contenuto di post e pagine.

    UPDATE wp_posts 
    SET    post_content = ( Replace (post_content, 'src="http://', 'src="//') )
    WHERE  Instr(post_content, 'jpeg') > 0 
            OR Instr(post_content, 'jpg') > 0 
            OR Instr(post_content, 'gif') > 0 
            OR Instr(post_content, 'png') > 0;

    La ripetiamo nel caso siano state inserite con l’apostrofo ‘ anzichè con le doppie virgolette ” (thanks to css-tricks.com)

    UPDATE wp_posts 
    SET   post_content = ( Replace (post_content, "src='http://", "src='//") )
    WHERE  Instr(post_content, 'jpeg') > 0 
            OR Instr(post_content, 'jpg') > 0 
            OR Instr(post_content, 'gif') > 0 
            OR Instr(post_content, 'png') > 0;

    Secondo lo stesso criterio, aggiusteremo non solo il percorso delle immagini, ma anche quello degli iframes (come ad esempio un video di youtube o un widget con una mappa). Anche questi tag non devono più comparire nella forma

    <iframe src="http://

    bensì nella forma

    <iframe src="https://

    Con il codice seguente, lo sistemiamo all’interno dei postmeta:

    UPDATE wp_postmeta 
    SET meta_value=(REPLACE (meta_value, 'iframe src="http://','iframe src="//'));

    Dopo aver lanciato le query sql appena menzionate, il vostro phpmyadmin vi indicherà l’esito e quante sostituzioni ha effettuato:
    sql query completata

    3) Operazioni aggiuntive e opzionali

    Per rendere più sicuro il pannello di amministrazione, possiamo forzare l’utilizzo del protocollo https anche per tutte le pagine di gestione del sito. E’ sufficiente andare ad editare il file wp-config.php che si trova sempre nella directory principale, andando ad aggiungere il seguente codice:

    define('FORCE_SSL_ADMIN', true);

    Devi informare Google del cambio di dominio da http ad https? Se utilizzi Google Webmaster Tools la risposta è sì. Attenzione: con il redirect 301 che abbiamo inserito (vedi sopra), ogni volta che un motore di ricerca visita il nostro sito viene automaticamente informato che gli url sono cambiati e quali sono quelli nuovi. Un po’ di tempo e il cambio viene digerito. Ma se usi il GWT, allora come indicato da Google qui, è bene inserire la nuova proprietà (dominio con https) e segnalare il cambio nella vecchia proprietà.

    Ora non ti resta che navigare nel tuo sito (se hai un sistema di cache svuota tutto), e verificare che le immagini si carichino correttamente (non dovrebbero esserci problemi) e che sopratutto l’icona del certificato sia ok (se il sito ancora carica immagini non https allora ti comparirà errore). Come è andato il passaggio verso il sito più sicuro?

    Categories: Tutorial & Modifiche Tags: Tag:, ,

    Correggere i link non funzionanti (404) con Broken Link Checker

    1 Comment

    Un “link rotto” o “url non funzionante” è un link verso un sito esterno o una pagina esterna che porta il nostro visitatore alla risorsa specificata, e si ritrova un errore 404 (risorsa non trovata). Questo non solo è irritante per il visitatore, ma tende anche a svalutare il valore del vostro sito agli occhi dei motori di ricerca. Per quanto possiamo fare attenzione, nella storia di un sito si possono sempre creare dei “link rotti” (broken links): la pagina (interna o esterna) che abbiamo linkato non esiste più, oppure l’immagine (interna o esterna) che abbiamo linkato è stata rimossa, oppure la pagina interna è stata rinominata a seguito di un cambio di struttura dell’url. In ogni caso, è bene monitorare questo problema del nostro sito, e fortunatamente abbiamo gli strumenti per risolvere in maniera facile e veloce il problema dei link rotti. Piccola premessa: se utilizzate gli strumenti di Google Webmasters Tools, allora troverete una sezione dedicata proprio al riconoscimento e alla gestione degli “url errati”: Google tiene traccia degli errori 404 che trova nel nostro sito, e ce ne fornisce un elenco, dove vengono segnalate le pagine errate e il link verso questa pagina. Utile, ma in questo caso dovremmo fare un controllo manuale di ogni url errato, e se abbiamo un sito con tanti posts / tante pagine, allora il lavoro diventa lunghissimo. Grazie ai plugin di WordPress, possiamo lanciare una scansione interna, identificare i link errati e le pagine che li contengono, andare ad correggerli o eliminarli con pochi click. Ne esistono diversi, gratuiti, che offrono questa funzione: qui trovate una recensione sul famoso Broken Link Checker, con istruzioni per usarlo al meglio e alcuni consigli aggiuntivi.

    Installazione e setup Opzioni

    Premessa: potete anche lasciare le impostazioni di default e passare direttamente alla scansione, ma essendo questo plugin a consumo intensivo di risorse, è bene impostarlo correttamente affinchè il suo operato non rallenti troppo la visione del vostro sito durante la scansione.

    Per installarlo andate nella voce Plugin, digitate Broken Link Checker, e selezionate quello degli sviluppatori “Janis Elsts, Vladimir Prelovac”. Installate ed attivate
    Ora troverete il pannello di controllo nel menu Impostazioni –> Link Checker. Andiamo a settare le opzioni migliori per la scansione.

    Opzioni Generali

    broken link checker - opzioni generali

    La schermata indica che la scansione è già partita. Dipende dalla dimensione del vostro sito, ma suggerisco di ricevere notifica email per ogni link rotto specificando una casella di email apposita: voi avrete un elenco sul sito su cui lavorare, ma le notifiche ci ricordano che il lavoro è iniziato ma non ancora finito 😉 Il plugin inoltre applicherà una formattazione di stile ai link che risultano rotti, in modo da dare una prima informazione agli utenti che leggono i post o ai motori di ricerca.

    Opzione Dove cercare i link rotti

    broken link checker opzioni cerca link

    Vengono elencati in automatico tutti i campi dove il plugin deve cercare eventuali link rotti. E’ ideale controllarli tutti, ma per la prima scansione va bene anche lasciare solo quelli principali di default, ovvero posts, pagine e commenti.

    Opzione Quali link controllare

    broken link checker quali link controllare

    Qui potete specificare cosa controllare (e cosa escludere). Potete tranquillamente lasciare i valori di default: HTML dei link e delle immagini. Se incorporate video dai vari Youtube, Video, ecc. allora è bene includere anche questi, magari in una seconda scansione.

    Opzioni Avanzate

    broken link checker: opzioni avanzate

    Queste sono opzioni importante per non sovraccaricare il server e rendere lento il vostro sito wordpress (o addirittura mandarlo in crash). Potete decidere se far funzionare la scansione solo quando lasciate aperta la pagina dell’amministrazione, oppure se farlo funzionare anche in background, ovvero quando non siete dentro l’amministrazione. In tutti i casi, è bene settare un timeout non troppo alto (va bene quello di default). Stesso discorso per il tempo massimo di esecuzione. Potete impostare un limite server load: questo è il carico del server. Se il vostro sito si trova su un hosting economico (hosting condiviso) potreste avere dei limiti imposti dal vostro hoster (se il consumo di CPU del vostro sito è alto, il gestore automaticamente limita le vostre risorse per non penalizzare gli altri siti sullo stesso server). Se siete su un server vostro (vps, dedicato), potete giocare di più su questo valore.

    Elenco broken links e correzione

    Una volta terminata la (prima) scansione riceverete una notifica del completamento, e potrete visionare l’elenco dei link errati trovati. Se avete un sito/blog con possibilità di commentare, non stupitevi di trovare molti errori: chi lascia un commento spesso indica anche il (proprio) sito web, e in molti casi: viene digitato erroneamente; non esiste più; è pagina di sito di spam, cambiata o rimossa. Ma la schermata che ci offre il risultato della scansione ci permette di correggere questo, ed altri errori, in maniera veloce ed efficace:

    In questo screenshot, un link ad un’immagine su imageshack segnalata da un commentatore che non funziona più; altri commentatori che hanno inserito nel campo sito web dei valori sbagliati.

    Passando con il mouse sulla riga di errore, ci viene facilmente fornita la soluzione:

    • modificare l’url: possiamo editare l’indirizzo inserendo quello corretto
    • scollegare l’url: semplicemente, viene cancellato l’url errato, lasciando pulito il campo o la parola linkata (se all’interno di un post è stata linkata una parola o un’immagine, allora viene ripulita dell’url errato)
    • segnalare che il link non è da considerarsi rotto
    • chiudere
    • ricontrollare in seguito

    Possiamo anche procedere più velocemente andando a fare una modifica di molti errori contemporaneamente (bulk edit) . Selezioniamo tutti gli errori interessati (ad esempio tutti i commenti con sito web errato) e poi – in alto o in fondo – selezionare Azioni di massa, e qui selezionare una delle voci appena elencate (esempio: scollega)

    In questo modo puliremo velocemente il sito da errori dei link, migliorando l’usabilità per l’utente e aumentandone il valore per Google e gli altri motori di ricerca. Suggerisco di lasciar lavorare questo plugin ancora per qualche scansione (da ripetersi ogni X giorni), facendo attenzione al consumo/carico che ne comporta. Se avete questo timore, disattivatelo, e riattivatelo dopo qualche settimana per un ri-controllo generale. Operazione da farsi più volte all’anno.

    Categories: Plugins Wordpress Tags: Tag: