WordPress - Twenty Seventeen Full Width Template

google-plus Scritto da . Postato in WordPress

Chi usa il nuovo tema gratuito di WordPress, si è sicuramente trovato di fronte a questo dilemma.

Di certo, c'è molto da fare se si usa un tema gratuito. Il tema Twenty Seventeen, aiuta poi allo scopo, d'altronde, è stato creato in modo tale da lasciare molto spazio alle personalizzazioni.

Ed è di questo che si parla, cioè personalizzare il tema per fare in modo che si modelli alle nostre necessità. 

Nel caso mio specifico, la mia volontà era quella di trasformare il tema in un template mono colonna che avesse margini laterali più contenuti che consentissero di sfruttare al meglio la larghezza dello schermo dei dispositivi che ne visualizzassero i conenuti ivi espressi.

Navigando in internet, si trova su GitHub il codice necessario ad avere un template aggiuntivo per le pagine del nostro tema. L'utente Netzberufler, propone la sua soluzione funzionale. Il codice/file sono utilizzabili così come sono. Sono solo da inserire nella nostra installazione di WordPress nella maniera corretta per poterne sfruttare le caratteristiche.

Twenty Seventeen Full Width page

Aprite la pagina di GitHub corrispondente per visualizzare e copiare il codice:

Twenty Seventeen Full Width page template

Da un lato avete il codice da inserire nel file style.css del tema, dall'altra il page template da creare ex-novo nel file template-full-width.php.

Ma dove devo inserire il codice per avere il risultato sperato?

Una cosa da tenere in considerazione quando si modella un tema in WordPress, è che se si fanno modifiche direttamente al template in questione, cioé al tema Twenty Seventeen nel nostro caso, si rischia che ad ogni aggiornamento le modifiche effettuate vengano azzerate.

Questo perché l'aggiornamento sovrascriverà i file aggiornati, e se tra questi ci sono quelli da voi modificati addio modifiche.

Creare il Child Theme

Per questo, è indispensabile nel caso di personalizzazioni dei temi, utilizzare i child themes dei quali ho già parlato in un altro articolo:

Potrebbe interessarti il seguente articolo:

WordPress - Child Themes, come e perché

Per prima cosa, create il vostro child theme e dategli il nome desiderato. Nel mio caso, il nome del nuovo tema sarà srlRevolution, dal nome del sito che rappresenta l'azienda che lo adotta: Revolution Srl.

Per poter operare ora sul nuovo child theme, se il sito web è già online, avrete bisogno di un client FTP per poter caricare/scaricare i file che di volta in volta dovrete modificare con il vostro editor di testo preferito.

Se il vostro sito è ancora in locale sul vostro PC, allora avrete necessità solo di un buon editor di testi come NotePad++

Modificare/creare i nuovi file

Una volta creato il child theme, aprite e modificate il file style.css aggiungendo alla fine di esso il codice:

body.page-template-template-full-width #content #primary {
max-width: 100%;
}

body.page-template-template-full-width #content #primary .entry-header,
body.page-template-template-full-width #content #primary .entry-content {
float: none;
width: 100%;
}

body.page-template-template-full-width #content #primary .entry-header {
margin-bottom: 4em;
}

Non dovesse funzionare, aggiungete i seguenti selettori al file css per forzare l'ampiezza del contenitore al 100%:

.wrap{
max-width:100%;
}

.navigation-top .wrap{
max-width:100%;
}

Il secondo step, consiste nel creare un nuovo file template-full-width.php con il codice seguente:

<?php
/**
 * Template Name: Full Width
 *
 * Description: A custom template for displaying a fullwidth layout with no sidebar.
 *
 * @package Twenty Seventeen Child
 */
get_header(); ?>

<div class="wrap">
<div id="primary" class="content-area">
<main id="main" class="site-main" role="main">

<?php
while ( have_posts() ) : the_post();
get_template_part( 'template-parts/page/content', 'page' );
// If comments are open or we have at least one comment, load up the comment template.
if ( comments_open() || get_comments_number() ) :
comments_template();
endif;
endwhile; // End of the loop.
?>
 
</main><!-- #main -->
</div><!-- #primary -->
</div><!-- .wrap -->
<?php get_footer();
Dove andrà inserito questo nuovo file? E' semplice. Con il vostro client FTP (o il vostro File Manager se in locale), create la struttura di cartelle nella radice del vostro nuovo child theme così come illustrato:
/wp-content/themes/CHILD-THEME/template-parts
Ovviamente al posto di CHILD-THEME dovrà esserci il nome della cartella che ospita il vostro child theme. 
 
Una volta terminata la modifica e inserito il nuovo file template all'interno del tema child, il nuovo layout di pagina sarà disponibile per essere applicato alle pagine del vostro sito.
Vi basterà aprire la pagina in modifica, guardare nella colonna a destra, nel blocco "Attributi della pagina" e sotto la voce modello selezionare Full Width.
Aggiornate o salvate la pagina per rendere effettivo l'uso del nuovo modello:
 
modello full width applicato
 
Nel prossimo articolo dedicato al tema gratuito e nativo di WordPress Twenty Seventeen, vedremmo come aggiungere importanti e piacevoli modifiche come l'aggiunta di una sidebar, aggiungere un'enorme immagine in evidenza a ogni post e/o pagina, cambiare la famosa scritta “Proudly powered by WordPress” ed altro ancora...

Se hai gradito l'articolo, condividilo, basta un click!

Aggiungi commento


Codice di sicurezza
Aggiorna

  • logo prontopro
  • logo boutique serramento
  • koilab japan and tropical fish farm
  • Trasloco economico - gruppo Arco Traslochi
  • logo flash pulizie
  • logo revolution
  • logo planetkoi small
  • logo finiture
  • ick logo template
  • montaggio mobili trento

Realizzato da: Daniele Gagliardi
Viale Monache 3 - 38062 Arco - TN
- Contattami -

Per essere più facile ed intuitivo, il blog fa uso dei cookie, piccole porzioni di dati che consentono di capire come gli utenti navighino e ne visualizzino le pagine. I cookie non registrano alcuna informazione personale sull'utente ed eventuali dati identificabili non verranno memorizzati. La nostra Privacy Policy è cambiata: Ti invitiamo a prenderne visione. Oppure visiona la nostra Cookie Policy: