Come aggiungere modelli e design personalizzati ai formati dei post sul blog di Divi (parte 1 di 3)

Benvenuto al giorno 1 di 3 nella nostra serie su Come aggiungere stili personalizzati ai formati dei post sul blog di Divi. Per impostazione predefinita, Divi viene fornito con sei formati di post del blog: Standard, Video, Audio, Citazione, Galleria e Link. In questa serie ti insegniamo come personalizzarli con php e css.

Nei prossimi 3 giorni, ti guiderò attraverso la personalizzazione di tutti i formati dei post del blog Divi: Standard, Preventivo, Link, Video, Audio e Galleria. La modifica di tutti questi (per i progetti che ho in mente) richiede la modifica del file modello single.php. Per farlo correttamente, dobbiamo creare un tema figlio Divi che conterrà il nostro file modello Single.php modificato. E prima di farlo, dovremmo anche creare un'installazione locale di WordPress utilizzando Desktopserver. Questo ci fornirà uno spazio di sviluppo sicuro per giocare senza rischiare nulla su un sito web live.

Come suggerisce il titolo di questo post, avremo bisogno di tre giorni per coprire tutto dall'inizio alla fine. Oggi ti mostrerò come creare un'installazione locale di WordPress utilizzando Desktopserver e creare il tema figlio che utilizzeremo per ospitare i nostri formati di post del blog modificati.

Considererei questa serie più "avanzata" rispetto alla maggior parte dei tutorial pubblicati qui. Ma, se sei un principiante, questa serie è in realtà una grande opportunità per te per migliorare le tue capacità di sviluppo e diramarti in qualcosa di nuovo in una serie di post sicura, gratuita e guidata.

Iniziamo!

Un'anteprima di ciò che verrà

Ecco una rapida occhiata ai design che realizzeremo in questa serie. Dopo aver gettato le basi per loro nel post di oggi, ti mostrerò come modificare il file single.php (il modello per tutti i formati di post del nostro blog), e poi come modellare ulteriormente quel modello per ogni formato con CSS. Sarà un bel viaggio!

Preparare le risorse di sviluppo

Ecco cosa dovrai seguire insieme al tutorial di oggi e ai tutorial che ho creato per i prossimi 2 giorni:

• Un editor di codice come Atom, Sublime, Brackets o Notepad++ (come preferisci)
• Un'installazione di WordPress locale utilizzando DesktopServer (a meno che tu non ne abbia già uno)
• Un tema Divi Child, che creeremo!

Consiglio vivamente che se hai intenzione di seguire questa serie, lo fai su un'installazione di WordPress configurata solo per test e sviluppo. L'ultima cosa che voglio è che le persone sperimentino con il loro sito web live e rovinino qualcosa.

Se non sei sicuro di come configurare un'installazione di sviluppo locale di WordPress, ti consiglio di utilizzare la versione gratuita di desktopserver. Dovrebbe essere installato e funzionante con un'installazione locale di WordPress in pochi minuti (senza esagerare).

Configurazione di DesktopServer sul tuo computer

Ecco alcuni passaggi per iniziare con DesktopServer.

Visita il loro sito Web e scarica la versione gratuita facendo clic sul pulsante "Gratuito - Aggiungi al carrello" nella colonna di destra.

Nella pagina di pagamento, inserisci le tue informazioni personali, accetta i loro termini e fai clic su Acquista.

Nella pagina di conferma dell'acquisto, seleziona il download corretto per il tuo sistema operativo. Suggerisco di installare l'ultima versione di Mac o Windows.

Decomprimi il download ed esegui l'installazione dell'applicazione sul tuo computer.

Ora puoi trovare l'applicazione DesktopServer in una cartella chiamata "xampplite", nella radice del tuo disco locale (C:) Drive.

Una volta installato Desktopserver, leggi le loro istruzioni per aiutarti a iniziare con la configurazione dell'installazione di wordpress locale.

Creazione del tema Divi Child per questa serie

Per creare un tema figlio Divi, devi accedere ai file del tuo tema WordPress. Se hai seguito le impostazioni predefinite durante l'installazione di DesktopServer, i file del tema dovrebbero trovarsi nella cartella dei documenti all'interno di una cartella denominata "Siti Web".

Individua la cartella dei temi e aggiungi una nuova cartella chiamata "figlio".

Ora aggiungerai il tuo file style.css alla cartella del tema figlio. Questo è il primo di 3 file che comporranno il tuo tema figlio.

Apri il tuo editor di testo e crea un nuovo file con la seguente intestazione CSS nella parte superiore del documento.

/*
 Theme Name:     Divi Child
 Theme URI: 
 Description:	   Divi Child Theme
 Author:
 Author URI:   
 Template:       Divi
 Version:        1.0.0
 License:  
 License URI:  
 Tags:  
 Text Domain: 
*/

Puoi aggiungere il resto delle informazioni per l'intestazione CSS del tema figlio per adattarla al tuo sito secondo necessità.

Salva il tuo nuovo file con il nome e l'estensione “style.css”. E aggiungilo alla cartella del tema figlio:

Il prossimo file che devi aggiungere alla cartella del tuo tema figlio è il file functions.php.

Torna al tuo editor di testo e crea un altro nuovo file e aggiungi il seguente codice php nella parte superiore del documento:

<?php 
function my_theme_enqueue_styles() {
    $parent_;
    wp_enqueue_style( $parent_style, get_template_directory_uri() . '/style.css' );
    wp_enqueue_style( 'child-style',
        get_stylesheet_directory_uri() . '/style.css',
        array( $parent_style ),
        wp_get_theme()->get('Version')
    );
}
add_action( 'wp_enqueue_scripts', 'my_theme_enqueue_styles' );
?>

Salva il file con il nome esatto e l'estensione "functions.php" e aggiungilo alla tua cartella figlio:

Il file finale di cui hai bisogno per il tuo tema figlio è il file single.php di Divi. Oltre ad aggiungere nuovi CSS al tuo file style.css del tema figlio, utilizzeremo una copia del file single.php di Divi per modificare il layout per i diversi tipi di post.

Per trovare il file single.php, vai alla cartella del tema Divi (genitore).

Copia il file single.php e incollalo nella cartella del tema figlio:

Ora siamo pronti per personalizzare il file single.php del tuo tema figlio.

Attiva il tuo nuovo tema bambino

Prima di iniziare a personalizzare il file modello single.php, vai avanti e attiva il tuo nuovo tema figlio.

Dalla dashboard di wordpress, vai su Aspetto → Temi e seleziona il pulsante Attiva sul tuo nuovo tema figlio chiamato Divi Child.

Questo è tutto per ora!

So che non è ancora troppo eccitante, ma spero che tu rimanga con me. È importante gettare le basi giuste per i tuoi progetti e questo post è un ottimo punto di partenza.

Cosa arriva domani?

Ora con l'installazione locale di WordPress e il tema figlio attivato, sei pronto per la parte successiva di questa serie. Domani ti mostrerò come modificare il file single.php di Divi per creare un layout completamente unico per i formati dei post del tuo blog.

Non vedo l'ora di leggere il tuo feedback qui sotto. L'impostazione di un tema figlio su un server locale può portare ad alcuni problemi per i principianti, quindi cercherò di rispondere a tutte le domande che posso. Tuttavia, se hai più problemi tecnici, il nostro team di supporto è pronto e pronto ad aiutarti. Per non parlare della gente di Desktop Server!

Saluti!