WordPress Twenty seventeen theme, breve guida alla personalizzazione.

Premetto subito che questo tutorial non è farina del mio sacco ma bensì ne è una raccolta sintetizzata.
Il fine ultimo che mi sono prefisso è stato quello di aiutare chi, come il sottoscritto, è un dilettante allo sbaraglio, in modo tale di dare delle basi da cui partire per chi volesse personalizzare il tema.
Wordpress è nato come CSM per blog poi nel tempo si è evoluto e questo tema ne è la dimostrazione.
Twenty Seventeen è il tema di default rilasciato nelle ultime versione di wordpress e ricalca il trend, anche nel web ci sono le mode, che vede il famoso effetto Parallax scrolling.
Il tema è essenzialmente adatto per siti tipo e-commerce, aziendali, portfolio e via dicendo ma per un blog bisogna trovare il miglior compromesso possibile.
Twenty Seventeen, oltre ad avere la possibilità di inserire un video nell’header, ha una front page o landing page divisa in sezioni, per un massimo di quattro, che sostanzialmente sono delle pagine che possono essere scelte e impostate accedendo alla corrispettiva opzione nella “Personalizzazione”.


Ad ogni sezione possiamo abbinare una featured image, cosa molto semplice basta impostarla una volta creata la pagina, che dovrà avere una risoluzione 2000 x 1200 px.
La visualizzazione delle sezioni può essere fatta scorrendo la front page manualmente, se clicchiamo sulla voce di menu corrispondente ,invece, apriremo la direttamente la pagina e questo sta a significare che il tema, purtroppo, non prevede l’uso di un menu dinamico quindi è indispensabile effettuare delle modifiche per avere l’effetto parallax scrolling.
La soluzione prevede di assegnare un ID alle voci di menu usando i “Link personalizzati”.
L’indirizzo cambia a secondo dove è installato wordpress, se si trova nella root abbiamo “/#contatti”, se invece è in una sotto directory abbiamo “/nome sottodirectory/#contatti”, nell’immagine ho installato wordpress in locale con xampp nella sottodirectory “wordpress”.

Gli ID vanno scritti in minuscolo preceduti dal simbolo “#”, qualora il nome della voce di menu fosse composto da più parole lo spazio deve essere occupato dal trattino (es. “#chi-sono”).
Tutto molto semplice ma non basta, perché abbiamo la necessità di implementare una breve porzione di codice JS.
Si possono utilizzare diversi plug-in, uno vale l’altro, per facilitare l’operazione comunque, nel caso specifico, quello consigliato è Simple Custom CSS & JS.

Una volta installato si aggiunge lo script da “Add JS code”.

Lo script da inserire è il seguente:

jQuery(document).ready(function( $ ){
jQuery( “h2.entry-title” ).each( function() {
var panelId = jQuery( this ).html().toLowerCase().replace(/\s+/g, “-“);
jQuery( this ).wrapInner(function() {
return ““;
})
})
});

Se vogliamo avere uno scorrimento graduale possiamo utilizzare il plugin JQuery Smooth Scroll.

Ecco l’effetto desiderato:

A questo punto possiamo fare un passo in avanti e usare il reindirizzamento.
Nel senso che se si punta direttamente alla pagina desiderata, verremmo reindirizzati alla sezione nella frontpage; usate il plugin che vi pare.
Possiamo all’aspetto grafico.
Ad esempio vogliamo aggiungere il logo anche nella barra del menu:

I passi da seguire sono i seguenti:

  • Personalizza.
  • Menu.
  • Mostra proprietà avanzate del menu.

 

  • Spuntare la voce Classi CSS.
  • Aggiungere una voce di menu da “link personalizzati” ed etichettarlo con la voce “home”.
  • Nel campo “Classi CSS”, aggiungere la classe chiamata “home”.
  • Salvare

Adesso bisogna aggiungere un codice CSS in “CSS Aggiuntivo”:

.main-navigation.home {
width: 4em;background: url(indirizzo_logo);
background-repeat: no-repeat;
background-position: center;
background-origin: border-box;
background-size: 46px 46px;
text-indent: -9999px; }

Vogliamo usare una immagine come background:

.site-content{ background-image: url(“indirizzo_immagine”);
background-repeat: no-repeat;
background-attachment: fixed; }

Modificare il titolo di ogni pagina nei suoi valori:

.page .panel-content .entry-title,.page-title,body.page:not(.twentyseventeen-front-page)
.entry-title{
color:#A7ADBF;
font-size: 30px;
font-weight: 800;
letter-spacing: 0.14em;
text-transform: uppercase;
}

Se si vuole far apparire il titolo del blog ed il motto e al contempo aumentare la dimensione del logo, che di default è di 80px, bisogna modificare la seguente classe con la dimensione desiderata, senza esagerare:

.custom-logo-link img {display: inline-block;
max-height: …….px;
width: auto;}

E’ vero che le sezioni di default sono 4, ma se avessimo l’esigenza di aumentarle dovremmo aggiungere questa riga di codice nel file functions.php:

fuction.php:add_filter( ‘twentyseventeen_front_page_sections’, function(){ return 6; } );

Come detto in precedenza il tema non è stato strutturato per essere un blog, però possiamo adattarlo per chi volesse comunque utilizzarlo in questa modalità.
Nel caso specifico la prima cosa che ho fatto è stato allargare i margini della front page, in modo che il contenuto possa occupare tutta la sezione.
La classe da modificare, di default la larghezza è impostata al 58%, è la seguente:

.blog:not(.has-sidebar) #primary article,
.archive:not(.page-one-column):not(.has-sidebar)
#primary article,.search:not(.has-sidebar)
#primary article,.error404:not(.has-sidebar)
#primary .page-content,.error404.has-sidebar
#primary .page-content,body.page-two-column:not(.archive)
#primary .entry-content,body.page-two-column
#comments {float:none; width:______%;
}

Ho aggiunto una pagina chiamata “News” scelta come sezione nella front page dove, tramite plug-in a vostra scelta, verranno mostrati gli ultimi post pubblicati con uno slider .


Gli articoli saranno pubblicati in una pagina chiamata “Blog” settata come “Pagina  articoli” , mentre un’altra pagina, chiamata “Home”, sarà settata come “Pagina iniziale” e fungerà da frontpage.


Nel top menu la pagina “Blog”, non dovendo apparire come sezione, l’ho inserita nel sottomenù della voce “Home” e questo vale per tutte le pagine che hanno la stessa caratteristica, ma questo è solo un suggerimento nulla vieta di farle apparire come voce di menu principali.

Queste sono solo alcune personalizzazioni ma per chi vuole andare oltre lascio i link delle fonti e in ogni caso ricordo che, necessariamente, tutte queste modifiche vanno aggiunte su un “child theme”, è ovvio ma ricordarlo non fa mai male.

Fonti:
WPMU
DESIGNBOMBS
KINSTA

Inoltre vi segnalo il link per chi vuole inserire un video nell’ header:

PEXELS

Sandro

Sono un uomo mediocre che ha trovato il suo riscatto nel dolore. Il dolore mi ha destato dal mio ingenuo sonno infantile, mostrandomi l’immagine della divina sopravvivenza. È durato il tempo che un fulmine mostri la sua sgraziata sagoma ed il lume si è spento, annegato nella sua madre cera. Trascino la mia esistenza con malcelato imbarazzo, aspettando il nuovo riscatto. Buona navigazione. Google+

Potrebbero interessarti anche...

Lascia un commento

Il tuo indirizzo email non sarà pubblicato. I campi obbligatori sono contrassegnati *