Desde que falei sobre templates do WordPress, abordei alguns mecanismos diferentes disponíveis:
Se você está olhando para o Mustache, então você pode estar interessado em Handlebars, e se você está olhando para o Blade, então eu recomendo verificar o Sage da equipe Roots.
Mas para este post final, vou continuar com o Timber que foi o que apresentei ontem. Eu não sou muito sobre o que está sendo usado (já que todos eles têm suas vantagens), desde que seja consistente.
Modelagem do WordPress: usando madeira
Com isso dito, veja como você pode começar a usar o Timber em seus projetos.
Para começar, você precisará estar familiarizado com o Composer e precisará ter uma configuração de ambiente de desenvolvimento local. Se você não tem nenhum desses ou precisa de ajuda, então eu tenho o que você precisa:
Depois de percorrer as etapas em cada um desses guias, você deve estar pronto para ir. Então aqui está o que vamos fazer.
1 Configure uma instalação local para madeira
Vou usar o Valet para isso, o que significa que terei um diretório com a versão mais recente do WordPress (que é 4.8.3) instalada em seu diretório.
Isso significa que terei um banco de dados já pronto:
E vou emitir os seguintes comandos para configurar o Laravel e uma instalação segura (para imitar um ambiente de teste):
$ valet link
$ valet securePara que eu possa acessar o site em um navegador.
Para quem tem curiosidade, estou usando:
- WordPress 4.8.3
- vinte e quinze
- Limpar permalinks
E nenhum outro plugin. É apenas uma instalação de baunilha diferente do que você vê acima.
Neste ponto, estou pronto para instalar o Timber.
2 Instalando Madeira
Supondo que você seguiu os guias acima para Valet e Composer, você deve estar pronto para ir. Então, usando um terminal, navegue até o diretório de instalação do WordPress.
Em seguida, emita o seguinte comando:
$ composer require timber/timber
Isso instalará o Timber, mas você ainda precisará atualizar o arquivo functions.php do seu tema para que ele use corretamente o autoloader do Composer.
Supondo que tudo tenha corrido corretamente, você poderá atualizar seu site, navegar para quaisquer postagens, páginas e assim por diante e nada deve estar fora de ordem.
3 Inicializando Madeira
Finalmente, é hora de usar o Timber para substituir muito do que estamos acostumados a ver no contexto de um template WordPress.
Estou optando por fazer isso dentro do content-page.php para facilitar o acompanhamento. Observe que o segmento de código que estou alterando originalmente se parece com isso:
<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-## -->Neste post, não vou recriar completamente o que você vê acima, mas vou começar com o que é necessário para começar a usar um mecanismo de modelagem dentro do contexto de uma base PHP.
Primeiro, você precisará criar um modelo que possa ser aplicado à página de amostra em uma instalação padrão do WordPress. Eu chamei o meu template-timber-page.php e ficou assim:
<?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
);
No código acima, veja o que está acontecendo:
- Estou instanciando o objeto Timber.
- Então, estou recebendo um contexto Timber. O contexto contém muitas informações úteis no modelo (ou no site), dependendo de onde você está usando o modelo.
- Depois disso, estou pegando um TimberPost que é essencialmente uma extensão de um post do WordPress. Ele tem os dados do WP_Post mas disponibiliza para nossos templates.
- Em seguida, defino o índice de postagem do array $context com uma referência ao Timber Post (que chamei de $post ).
- Por fim, digo ao Timber para renderizar uma página chamada content-sample-page.twig usando o contexto fornecido.
É aqui que é importante criar o arquivo twig real (que é a extensão do arquivo de modelo Timber). Então eu criei content-sample-page.twig e ficou assim:
{% 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 %}
Depois de instanciar o objeto Timber e substituir o código que você vê acima, você notará que o código lê um pouco diferente (embora não seja totalmente difícil de seguir).
4 Aplicando o Modelo
Para aplicar o modelo, navegue até Páginas no WordPress. Localize a página de amostra e, no menu suspenso do modelo, escolha a que acabamos de criar usando o título acima:
Feito isso, você pode visualizar a postagem. Você notará que parece um pouco nu em comparação com o que estamos acostumados a ver:
Mas você tem uma ideia geral de como podemos usar o contexto para acessar muitas das mesmas propriedades que estamos acostumados a ver no WordPress sem ter que encher o código com marcação e PHP e qualquer outra coisa que estejamos usando para usar.
Mais recursos
Eu sei que este é predominantemente um curso intensivo de modelagem e não cobre tanto quanto poderia. Como este post se aproxima de 1000 palavras, preciso traçar a linha em algum lugar, então estou optando por fazê-lo aqui.
Isso não significa que eu terminei de discutir isso, no entanto. Pretendo voltar a tópicos mais avançados sobre modelagem em potes futuros.
Mas se você estiver interessado, recomendo seguir o guia Getting tarted for Timber e o projeto no GitHub.
Isso pelo menos lhe dará um ponto de partida a partir do qual você pode progredir ainda mais em seus esforços para criar um código mais limpo e logicamente separado do que estamos acostumados a ver no WordPress.