Come individuare i problemi di visualizzazione del sito su Smartphone Android

magnaromagna 1 Comment

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

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

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.

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

Come evidenziare il commento dell’autore del post

Franco B. 1 Comment

Sei proprietario o editore di un blog con lo spazio dei commenti aperto? Ti piace interagire con gli utenti che lasciano commenti nel tuo sito? Esiste la possibilità di mettere in evidenza il commento dell’autore, senza necessità di installare un plugin apposito, ma aggiungendo qualche riga di foglio di stile. Per intenderci, installare un plugin che abbia questa funzione è semplice, ma non dobbiamo mai dimenticare che troppi plugins installati possono far male al nostro blog, sia in termini di sicurezza (se un plugin non viene aggiornato è facile porta di accesso degli hackers), sia in termini di performance del sito (un plugin scritto male o plugins che interagiscono male fra loro rallentano la velocità del sito, e possono anche mandarlo in crash). Per una funzione come evidenziare i commenti dell’autore possiamo utilizzare semplicemente un’aggiunta nel foglio di stile del tema che stiamo utilizzando. Come fare? Possiamo farlo sia tramite FTP o pannello di gestione file del sito (fornito dall’hosting), oppure direttamente tramite il pannello di controllo di WordPress.
In tutti i casi, il file da editare è il style.css
Dove si trova?
Se utilizziamo FTP (o il sistema di gestione file fornito dal vostro fornitore di hosting), il percorso è

../public_html/wp-content/themes/NOME-DEL-TEMA/style.css

Se volete editarlo direttamente dal pannello di controllo wordpress, allora dovete andare in:

Aspetto –> Editor –> Style.css

Una volta aperto questo files, potete aggiungere in fondo le (poche) righe di foglio di stile:

.bypostauthor {
RIGHE DEL FOGLIO DI STILE
}

Quindi ora tocca a noi personalizzarlo come vogliamo. L’esempio seguente mette come sfondo (background-color) il grigio, e come bordo (border) un tratto grosso, continuo (solid) di 1px, di colore rosso

.bypostauthor {
color: #fff;
background-color: #eee;
background-image: none;
border: 1px solid #ff0000;
box-shadow: none;
padding: 0;
}

Questo funziona con i temi classici per wordpress. Se avete un tema diverso, o premium, allora dovete verificare se anche questi funzionino con il .bypostauthor. Come fare? Andate in una qualsiasi pagina del vostro sito dove abbiate postato un commento come autore. Se utilizzate un browser come Firefox o Chrome, andate dove avete c’è il commento e cliccate con il tasto destro, e poi Ispeziona: si aprirà la console di debug/ispezione del codice del sito. Andate con il mouse sopra il nome dell’autore, e vedrete come viene richiamato il codice, come ben illustrato nella figura seguente.

Come vedete, in questo tema, si vede bypostauthor. Se ci fosse stato scritto bypincopallinotheme, allora nel vostro foglio di stile dovrete cambiare di conseguenza. E’ più facile a farsi che a dirsi.

Categories: Tutorial & Modifiche Tags: Tag: commenti, css