Instalacja

  1. Pobierzcie motyw z https://github.com/palmiak/timber_wcpoznan_2018
  2. Rozpakujcie data/plugins.zip to wp-content/plugins
  3. Uruchomcie wszystkie pluginy
  4. Zaimportujcie dane z data/xygrid.wordpress.2018-07-04.xml

01Porządek w kodzie, czyli jak zaimplentować Timber w WordPressie

Podczas warsztatów dowiemy się, jak wprowadzić Timbera do WordPressa – od podstaw Twiga, poprzez omówienie funkcji Timbera, na rozszerzaniu funkcjonalności kończąc.

Maciek Palmowski

02Czym jest Timber?

03Czemu warto go używać?

  • wymusza rozdzielenie warstwy odpowiadającej za wygląd od logiki
  • posiada czytelniejszą składnię niż "czysty" PHP
  • Twiga można używać nie tylko w WordPress

04Czym jest Twig?

Twig to system templatek stworzony z myślą o PHP. Jest to jeden z wielu projektów Frameworka Symfony.

Jak sami o sobie piszą, jest:

  • szybki
  • bezpieczny
  • elastyczny

05Instalacja

Plugin

Instalujemy plugin z repozytorium WordPress

Tak, to wszystko :)

06Instalacja

Composer

composer require timber/timber

Jeżeli nie używamy autoload z Composera, do functions.php dopisujemy: 

require_once( __DIR__ . '/vendor/autoload.php' );

Inicjalizujemy Timbera: 

$timber = new Timber\Timber();

07Układ plików

nasz-motyw
-- lib
---- Class-post.php
---- Class-post-type.php
---- ...
-- views
---- layouts
------ base.twig
---- parts
------ entry.twig
------ header.twig
------ footer.twig
---- templates
------ front-page.twig
-- functions.php
-- front-page.php
-- ...

08Składnia Twiga

09Funkcja echo


<?php echo $foo; ?>

{{ foo }}

10Komentarze w kodzie


// To jest Komentarze

/*
    To też jest komentarz
    Tylko troszkę dłuższy
*/

{#
    A to komentarz w Twigu
#}

11Instrukcje warunkowe

<?php
if( $a == 1 ) {
    // zróbmy coś fajnego
} else {
    // zróbmy coś innego
}
?>

{% if a == 1 %}
    {# zróbmy coś fajnego #}
{% else %}
    {# zróbmy coś innego #}
{% endif %}

12Instrukcje warunkowe


<?php
echo $foo ? 'prawda' : 'fałsz';
?>

{{ foo ? 'prawda' : 'fałsz' }}

13Pętle

<?php
foreach ( $posts as $post ) {
    // zróbmy coś
}
?>

{% for post in posts %}
    {# zróbmy coś #}
{% endfor %}

14Pętle

<?php
$i = 0;
foreach ( $posts as $post ) {
    // zróbmy coś
    if ( $i==2 ) {
        break;
    } else {
        $i++;
    }
}
?>

{% for post in posts | slice(0,3) %}
    {# zróbmy coś #}
{% endfor %}

15Pętle

{% for post in posts %}
    {{ loop.index0 }}
    {{ loop.index }}
    {{ if loop.first ? 'To dopiero początek' }}
    {{ if loop.last ? 'To już jest koniec' }}
{% endfor %}

16Include

<?php
    include( 'file.php' );
?>

{% include 'file.twig' %}

{% include 'file.twig' with { 'foo' : 'bar' } %}
{% include 'file.twig' with { 'foo' : 'bar' } only %}
{% include ['file-'~ post.slug ~'.twig', 'file.twig'] ignore missing %}

17Filtry

<?php
    $array = array_slice($array, 2, 2);

    foreach( $array as $val ){
        // zróbmy coś
    }
?>

{% for val in array|slice(2,2) %}
    {# zróbmy coś #}
{% endfor %}

18Filtry

<?php
    $string = urlencode( strtolower( trim( $string ) ) );
?>

{{ string | trim | lower | urlencode }}

19Bloki

base.twig
<body>
{% block header %}
HEADER
{% endblock %}

{% block content %}
CONTENT
{% endblock %}

{% block footer %}
FOOTER
{% endblock %}
</body>

20Bloki

index.twig
{% extends "layouts/base.twig" %}
{% block content %}
INNY CONTENT
{% endblock %}

21Bloki


HEADER

INNY CONTENT

FOOTER

22Materiały

  • Oficjalna dokumentacja Timbera - https://timber.github.io/docs/
  • Oficjalna dokumentacja Twiga - https://twig.symfony.com/doc/2.x/
  • https://pandify.pl/2018/01/timber-4-rzeczy-za-ktore-go-pokochalem/
  • https://www.xfive.co/blog/mvc-like-wordpress-development-acf-timber/

23Dziękuję za udział w warsztatch!

Maciek Palmowski

email m.palmowski@spiders.agency

wordpress.org profiles.wordpress.org/palmiak

github github.com/palmiak

CTO & WordPress Developer www.spiders.agency