WordPress-mallar för nybörjare: Timber

Senaste uppdateringen nov 9, 2022

Innehåll

WordPress-mall: Använda Timber

1 Konfigurera en lokal installation för timmer

2 Installation av timmer

3 Initiera timmer

4 Använda mallen

Fler resurser

Sedan jag pratade om WordPress-mallar har jag täckt några olika motorer som är tillgängliga:

Om du tittar på Mustache, då kanske du är intresserad av Styre, och om du tittar på Blade, så rekommenderar jag starkt att kolla in Sage från Roots -teamet.

Men för det här sista inlägget ska jag fortsätta med Timber som jag presenterade igår. Jag är inte så mycket om vilken som används (eftersom de alla har sina kompromisser) så länge det är konsekvent.

WordPress-mall: Använda Timber

Med det sagt, så här kan du komma igång med att använda Timber i dina projekt.

För att komma igång måste du vara bekant med Composer, och du kommer att behöva ha en lokal utvecklingsmiljö. Om du inte har någon av dessa eller behöver hjälp, så har jag dig täckt:

När du har gått igenom stegen i var och en av dessa guider bör du vara bra att gå. Så här är vad vi ska göra.

1 Konfigurera en lokal installation för timmer

Jag kommer att använda Betjänad för detta, vilket innebär att jag kommer att ha en katalog med den senaste versionen av WordPress (som är 4.8.3) installerad i dess katalog.

Det betyder att jag redan har en databas redo att gå:

Och jag kommer att ha utfärdat följande kommandon för att ställa in Laravel och en säker installation (för att efterlikna en iscensättningsmiljö):

$ valet link
$ valet secure

Så att jag kan komma åt sidan i en webbläsare.

För den som är nyfiken använder jag:

WordPress 4.8.3
tjugofemton
Rengör permalänkar

Och inga andra plugins. Det är bara en annan vaniljinstallation än vad du ser ovan.

Vid det här laget är jag redo att installera Timber.

2 Installation av timmer

Förutsatt att du följde guiderna ovan för betjänt och kompositör, bör du vara bra att gå. Så med hjälp av en terminal, navigera till din WordPress-installationskatalog.

Ge sedan följande kommando:

$ composer require timber/timber

Detta kommer att installera Timber, men du behöver fortfarande uppdatera ditt temas functions.php-fil så att den korrekt använder Composers autoloader.

Förutsatt att allt har gått rätt till bör du kunna uppdatera din webbplats, navigera till eventuella inlägg, sidor och så vidare och ingenting ska vara ur funktion.

3 Initiera timmer

Slutligen är det dags att använda Timber för att ersätta mycket av det vi är vana vid att se inom ramen för en WordPress-mall.

Jag väljer att göra detta inom content-page.php för att göra det enkelt att följa. Observera att kodsegmentet jag ändrar ursprungligen ser ut så här:

<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-## -->

I det här inlägget kommer jag inte att helt återskapa det du ser ovan, men jag ska komma igång med vad som behövs för att börja använda en mallmotor inom ramen för en PHP-stiftelse.

Först måste du skapa en mall som kan appliceras på exempelsidan i en vanlig WordPress-installation. Jag ringde min template-timber-page.php och det ser ut så här:

<?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
);

I koden ovan är det här vad som händer:

Jag instansierar Timber-objektet.
Sedan får jag ett Timber-sammanhang. Kontexten innehåller mycket information som är användbar inom mallen (eller webbplatsen) beroende på var du använder din mall.
Efter det tar jag tag i en TimberPost som i huvudsak är en förlängning av ett WordPress-inlägg. Den har data från WP_Post men gör den tillgänglig för våra mallar.
Därefter ställer jag in postindexet för $context- arrayen med en referens till Timber Post (som jag har kallat $post ).
Slutligen ber jag Timber att rendera en sida som heter content-sample-page.twig med det givna sammanhanget.

Det är här det är viktigt att skapa själva kvistfilen (som är förlängningen av Timber-mallfilen). Så jag skapade content-sample-page.twig och det ser ut så här:

{% 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 %}

Efter att ha instansierat Timber-objektet och sedan ersatt koden du ser ovan, kommer du att märka att koden läses lite annorlunda (men inte helt svårt att följa).

4 Använda mallen

För att tillämpa mallen, navigera till Sidor i WordPress. Leta upp exempelsidan och välj sedan den som vi just skapade med titeln ovan i mallens rullgardinsmeny:

När det är gjort kan du se inlägget. Du kommer att märka att den ser lite naken ut i jämförelse med vad vi är vana vid att se:

Men du får den allmänna uppfattningen om hur vi kan använda sammanhanget för att komma åt många av samma egenskaper som vi är vana vid att se inom WordPress utan att behöva strö koden med markup och PHP och vad vi än använder att använda.

Fler resurser

Jag vet att det här huvudsakligen är en snabbkurs i mallarbete och att den inte täcker så mycket som den kunde. Eftersom det här inlägget närmar sig 1000 ord måste jag dra gränsen någonstans, så jag väljer att göra det här.

Det betyder dock inte att jag är färdig med att diskutera det. Jag planerar att återkomma till mer avancerade ämnen kring mallning i framtida krukor.

Men om du är intresserad rekommenderar jag starkt att följa både Getting tarted- guiden för Timber och projektet på GitHub.

Detta kommer åtminstone att ge dig en utgångspunkt från vilken du kan göra ännu mer framsteg i dina ansträngningar att skapa renare, mer logiskt separat kod än vad vi är vana vid att se i WordPress.

Inspelningskälla: tommcfarlin.com