Modelli WordPress per principianti: legno

Da quando ho parlato di modelli di WordPress, ho trattato alcuni diversi motori disponibili:

• Jade-PHP
• Baffi
• Rametto
• Lama

Se stai guardando Moustache, allora potresti essere interessato a Manubri, e se stai guardando Blade, ti consiglio vivamente di dare un’occhiata a Sage dal team Roots.

Ma per questo post finale, continuerò con Timber, che è quello che ho introdotto ieri. Non mi occupo tanto di quale viene utilizzato (poiché tutti hanno i loro compromessi) purché sia ​​coerente.

Template WordPress: utilizzo del legname

Detto questo, ecco come puoi iniziare a utilizzare Timber nei tuoi progetti.

Per iniziare, dovrai avere familiarità con Composer e avrai bisogno di una configurazione dell’ambiente di sviluppo locale. Se non hai nessuno di questi o hai bisogno di aiuto, allora ti ho coperto:

1. Utilizzo di Laravel per lo sviluppo di WordPress
2. Configurazione del compositore per WordPress

Dopo aver eseguito i passaggi in ciascuna di queste guide, dovresti essere a posto. Quindi ecco cosa faremo.

1 Configurare un’installazione locale per il legname

Userò Valet per questo, il che significa che avrò una directory con l’ultima versione di WordPress (che è 4.8.3) installata nella sua directory.

Ciò significa che avrò un database già pronto per l’uso:

E avrò emesso i seguenti comandi per configurare Laravel e un’installazione sicura (per imitare un ambiente di staging):

$ valet link
$ valet secure

In modo da poter accedere al sito in un browser.

Per chi è curioso, sto usando:

• WordPress 4.8.3
• venticinque
• Pulisci i permalink

E nessun altro plugin. È solo un’installazione vanilla diversa da quella che vedi sopra.

A questo punto sono pronto per installare Timber.

2 Installazione del legname

Supponendo che tu abbia seguito le guide sopra per Valet e Composer, dovresti essere a posto. Quindi, usando un terminale, vai alla directory di installazione di WordPress.

Quindi emettere il seguente comando:

$ composer require timber/timber

Questo installerà Timber, ma dovrai comunque aggiornare il file functions.php del tuo tema in modo che utilizzi correttamente il caricatore automatico di Composer.

Supponendo che tutto sia andato correttamente, dovresti essere in grado di aggiornare il tuo sito, navigare su qualsiasi post, pagina e così via e niente dovrebbe essere fuori servizio.

3 Inizializzazione del legname

Infine, è il momento di utilizzare Timber per sostituire gran parte di ciò che siamo abituati a vedere nel contesto di un modello WordPress.

Sto optando per farlo all’interno di content-page.php per renderlo facile da seguire. Nota che il segmento di codice che sto modificando originariamente è simile a questo:

<article id="post-<?php the_ID(); ?>" <?php post_class(); ?>>
    <?php
        // Post thumbnail.
        twentyfifteen_post_thumbnail();
    ?>

    <header class="entry-header">
        <?php the_title( '<h1 class="entry-title">', '</h1>' ); ?>
    </header><!-- .entry-header -->

    <div class="entry-content">
        <?php the_content(); ?>
        <?php
            wp_link_pages( array(
                'before'      => '<div class="page-links"><span class="page-links-title">'. __( 'Pages:', 'twentyfifteen' ). '</span>',
                'after'       => '</div>',
                'link_before' => '<span>',
                'link_after'  => '</span>',
                'pagelink'    => '<span class="screen-reader-text">'. __( 'Page', 'twentyfifteen' ). ' </span>%',
                'separator'   => '<span class="screen-reader-text">, </span>',) );
        ?>
    </div><!-- .entry-content -->

    <?php edit_post_link( __( 'Edit', 'twentyfifteen' ), '<footer class="entry-footer"><span class="edit-link">', '</span></footer><!-- .entry-footer -->' ); ?>

</article><!-- #post-## -->

In questo post, non ricreerò completamente ciò che vedi sopra, ma inizierò con ciò che è necessario per iniziare a utilizzare un motore di modelli nel contesto di una base PHP.

Innanzitutto, dovrai creare un modello che può essere applicato alla pagina di esempio in un’installazione standard di WordPress. Ho chiamato il mio template-timber-page.php e si presenta così:

<?php

/**
 * Template Name: Timber Template
 * Description: Replaces the standard page with a Timber template.
 */

$timber  = new TimberTimber();
$context = Timber::get_context();
$post    = new TimberPost();

$context['post'] = $post;
Timber::render(
  array( 'content-'. $post->post_name. '.twig', 'page.twig' ),
  $context
);

Nel codice sopra, ecco cosa sta succedendo:

1.  Sto istanziando l’oggetto Timber.
2. Quindi, sto ottenendo un contesto Timber. Il contesto contiene molte informazioni utili all’interno del modello (o del sito) a seconda di dove stai utilizzando il modello.
3. Dopodiché, prendo un TimberPost che è essenzialmente un’estensione di un post di WordPress. Ha i dati di WP_Post ma li rende disponibili ai nostri modelli.
4. Successivamente, ho impostato l’ indice del post dell’array $context con un riferimento al Timber Post (che ho chiamato $post ).
5. Infine, dico a Timber di eseguire il rendering di una pagina chiamata content-sample-page.twig utilizzando il contesto specificato.

È qui che è importante creare il file twig effettivo (che è l’estensione del file modello Timber). Quindi ho creato content-sample-page.twig e si presenta così:

{% block content %}
  <article id="post-{{post.ID}}" class="{{body_class}}">

    <header class="entry-header">
      <h1 class="article-h1">{{post.title}}</h1>
    </header><!-- .entry-header -->

    <div class="entry-content">
        {{post.content}}
    </div><!-- .entry-content -->

  </article><!-- #post-## -->
{% endblock %}

Dopo aver creato un’istanza dell’oggetto Timber e aver sostituito il codice che vedi sopra, noterai che il codice si legge in modo leggermente diverso (anche se non del tutto difficile da seguire).

4 Applicazione del modello

Per applicare il modello, vai a Pagine in WordPress. Individua la pagina di esempio, quindi, nel menu a discesa del modello, scegli quella che abbiamo appena creato utilizzando il titolo sopra:

Una volta fatto, puoi visualizzare il post. Noterai che sembra un po’ nudo rispetto a quello che siamo abituati a vedere:

Ma hai un’idea generale su come possiamo usare il contesto per accedere a molte delle stesse proprietà che siamo abituati a vedere all’interno di WordPress senza dover sporcare il codice con markup e PHP e qualsiasi altra cosa siamo usati all’uso.

Più risorse

So che questo è prevalentemente un corso accelerato di creazione di modelli e non copre tanto quanto potrebbe. Poiché questo post si avvicina a 1000 parole, ho bisogno di tracciare la linea da qualche parte, quindi sto optando per farlo qui.

Questo non significa che ho finito di discuterne, però. Ho intenzione di tornare su argomenti più avanzati sulla creazione di modelli nei vasi futuri.

Ma se sei interessato, ti consiglio vivamente di seguire sia la guida Getting tarted per Timber che il progetto su GitHub.

Questo ti darà almeno un punto di partenza da cui puoi fare ancora più progressi nei tuoi sforzi per creare un codice più pulito e logicamente separato rispetto a quello che siamo abituati a vedere in WordPress.