venti Seventeen è il tema predefinito più versatile di WordPress mai visto. Tuttavia, le opzioni integrate nel tema lasciano a desiderare.

In questo tutorial, ti mostrerò cinque metodi per personalizzare questo tema in modo che corrisponda il tuo blog. Inizieremo dalle basi per poi passare alle personalizzazioni più difficili e di grande impatto.

Quando avremo finito, sarai in grado di trasformare Twenty Seventeen in un sito bellissimo e moderno per aziende o blog. Non mi credi? Guarda, ecco cosa puoi creare:

Twenty diciassette personalizzazioni

#1 Crea un menu di link social

Bene, questa prima parte è più di un semplice hack. Ma è una personalizzazione da fare solo su Twenty Seventeen.

Venti diciassette ha un menu interessante per i collegamenti sociali a piè di pagina.

Venti diciassette link sociali

Il problema è che alcuni utenti hanno riferito di avere difficoltà a capire come aggiungere i loro collegamenti di social network a questo menu. Fortunatamente, è davvero molto semplice una volta che sai come farlo.

Tutto quello che devi fare è creare un menu con collegamenti ai tuoi social network e assegnarlo alla posizione del menu Collegamenti social.

  • Esploriamo attraverso il processo.
  • Inizia aprendo il "Customizer" (Aspetto> Personalizza).
  • Seleziona l'opzione "Menu" quindi seleziona "Menu link social".
  • Rinominare il nuovo menu.
  • Aggiungi un link a ciascuno dei social network disponibili.
  • Seleziona la casella accanto a " Collegamenti sociali '.

Al termine, il menu dovrebbe apparire così:

Venti diciassette pagina di personalizzazione

L'ultimo passaggio è fare clic sul pulsante "Salva e pubblica" nell'utilità di personalizzazione per salvare il nuovo menu. I tuoi collegamenti ai social network verranno ora visualizzati nel menu in fondo alla pagina.

# 2 Cambia la firma "Proudly powered by WordPress"

Situazione di Wordpress

Ci sono due ragioni per cui potresti voler modificare il testo nel piè di pagina che dice che il tuo sito è "Orgogliosamente alimentato da WordPress". "

Forse vuoi ampliarlo, aggiungendo testo aggiuntivo: “Orgogliosamente alimentato da WordPress, progettato da WebPress Designs e ospitato da LAMPpress Hosting. "

Forse vuoi cambiare completamente la tua firma per qualcosa di più personale.

La prima cosa che devi fare è creare e attivare un tema figlio (suggerimento: se vuoi semplificarti la vita, scarica il tema bambino preconcetto per quello).

Dopo aver creato e attivato il tema figlio, copia il file "footer.php". Quindi apri questo file "footer.php" e trova questo pezzo di codice: get_template_part ('template-parts / footer / site', 'info');.

Ora hai due opzioni. Puoi semplicemente commentare questa riga aggiungendo "//" subito prima del codice, oppure potresti prendere in considerazione la possibilità di sostituirlo con il tuo testo a piè di pagina personalizzato. Ecco il codice da aggiungere per creare il testo del piè di pagina.

Piè di pagina personalizzato

#3 Menu di navigazione avanzata

Oltre a creare un menu di navigazione funzionale su una pagina di navigazione, correggeremo anche l'effetto al passaggio del menu di navigazione e aggiungeremo uno scorrimento fluido per migliorare l'esperienza complessiva.

Innanzitutto, inizieremo ad aggiungere il seguente codice sul tuo tema (figlio):

/ * Codice di navigazione di una pagina * / jQuery (document) .ready (function () {/ * Aggiungi padding e ID a ciascuna sezione della prima pagina * / jQuery ("h2.entry-title") .each (function () {var panelId = jQuery (this) .html (). toLowerCase (). replace (/ s + / g, "-"); jQuery (this) .wrapInner (function () {return " ";})}) / * Rimuovi l'evidenziazione del collegamento di navigazione * / jQuery ('# top-menu li'). RemoveClass ('current-menu-item current_page_item'); / * Aggiungi l'evidenziazione al clic * / jQuery ('# top -menu li a '). on (' click ', function (event) {jQuery (this) .parent (). parent (). find (' li '). removeClass (' current-menu-item '); jQuery (this) .parent (). addClass ('current-menu-item');}); / * Controlla l'URL corrente ed evidenzia nav per la pagina corrente * / jQuery ('# top-menu li a'). each (function () {var pageUrl = jQuery (location) .attr ('href'); var navUrl = jQuery (this) .attr ('href'); if (navUrl == pageUrl) {jQuery (this) .parent (). addClass ('current-menu-item');}})})

È possibile aggiungere questo codice su un file JavaScript caricato da un tema figlio (ciò che è raccomandato) o utilizza un plugin che ti consenta di aggiungere JavaScript al tuo sito. Assicurati di caricare il codice dopo che jQuery è già stato caricato.

Dai un'occhiata ai commenti nel codice per avere un quadro completo di quello che sta succedendo.

Inoltre, possiamo rendere il movimento di ciascuna sezione molto più fluido installando e attivando un plugin gratis: jQuery scorrimento Smooth.

Ovviamente, dovrai comunque creare il tuo menu di navigazione aggiungendo un collegamento personalizzato a ciascuna sezione usando il nome della pagina visualizzata in questa sezione.

Ad esempio, per collegarti alla sezione "Informazioni", devi creare un link personalizzato e utilizzare " #about Come l'ancora del collegamento. Per maggiori dettagli, vedi Come personalizzare il tema " Venti Seventeen WordPress '.

Con un piccolo sforzo arriverete a un risultato convincente:

Venticinque risultati di navigazione

Questo non è certamente tutto ciò che possiamo fare con Twenty Seventeen, in seguito offriremo altri tutorial su Twenty Seventeen.