WordPress-Themes
mit Twig entwickeln
Walter Ebert @wltrd
WordCamp Berlin 14. November 2015
https://www.flickr.com/photos/3...
Walter Ebert
@wltrd
walterebert.de
slideshare.net/walterebert
http://twig.sensiolabs.org/http://twig.sensiolabs.org/
Vorteile von Twig
• Trennung von HTML und PHP
• Einfacher für Anfänger
• Mehr Sicherheit
• Vererbung von Templates
• Erfah...
Projekte die Twig nutzen
• Symfony
• Drupal 8
• EZ Publish
• Bolt
• Grav
• Craft
• Slim
• Sculpin
• (Laravel)
• ...
Projekte die Twig nutzen
• Symfony
• Drupal 8
• EZ Publish
• Bolt
• Grav
• Craft
• Slim
• Sculpin
• (Laravel)
• ...
Drupal...
Nachteile von Twig
• Extra Template-Sprache
• Code ist (etwas) langsamer
https://wordpress.org/plugins/timber-library/https://wordpress.org/plugins/timber-library/
https://github.com/jarednova/timber/wikihttps://github.com/jarednova/timber/wiki
Twig PHP-Erweiterung
git clone https://github.com/twigphp/Twig.git
cd Twig/ext/twig
phpize
./configure
make
sudo make inst...
Twig-Syntax
{{ }} // Ausgabe
{% %} // Logik
{# #} // Kommentar
single.twig
{# Dies ist ein Beitrag #}
{% extends "base.twig" %}
{% block content %}
<h1 class="site-title">{{ foo }}</h1>...
single.twig
{# Dies ist ein Beitrag #}
{% extends "base.twig" %}
{% block content %}
<h1 class="site-title">{{ foo }}</h1>...
single.twig
{# Dies ist ein Beitrag #}
{% extends "base.twig" %}
{% block content %}
<h1 class="site-title">{{ foo }}</h1>...
single.twig
{# Dies ist ein Beitrag #}
{% extends "base.twig" %}
{% block content %}
<h1 class="site-title">{{ foo }}</h1>...
single.php
<?php
$context = Timber::get_context();
$context['foo'] = 'Bar!';
$context['post'] = new TimberPost();
Timber::...
Posts
// Posts
$context['posts'] = Timber::get_posts();
// WP_Query
$args = [
'post_type' => 'custom_post_type',
'post_sta...
Posts
{% for post in posts %}
<article id="post-{{ post.ID }}">
<h1>
<a href="{{ post.link }}">{{ post.title }}</a>
</h1>
...
Übersetzungen
<?php _e( 'Sorry, no posts.', 'meins' ); ?>
->
{{ __('Sorry, no posts.', 'meins') }}
WordPress-Funktionen
<?php get_search_form(); ?>
->
{{ fn('get_search_form') }}
Advanced Custom Fields
<h3>{{ post.title }}</h3>
<div class="intro-text">
{{ post.get_field('meins_intro_text') }}
</div>
...
Advanced Custom Fields Pro
<h3>{{ post.title }}</h3>
<div class="intro-text">
{{ post.get_field('meins_intro_text') }}
</d...
http://notlaura.com/the-twig-for-timber-cheatsheet/http://notlaura.com/the-twig-for-timber-cheatsheet/
https://github.com/upstatement/timber-starter-themehttps://github.com/upstatement/timber-starter-theme
Praxisbeispiele
https://github.com/jarednova/timber/wiki/Showcase
https://github.com/laras126/karenmcgrane
https://github....
walter.ebert.engineering
@wltrd
walterebert.de
slideshare.net/walterebert
Nächste SlideShare
Wird geladen in …5
×

WordPress-Themes mit Twig entwickeln

1.392 Aufrufe

Veröffentlicht am

Vortrag beim WordCamp Berlin am 14. November 2015

Veröffentlicht in: Internet
0 Kommentare
2 Gefällt mir
Statistik
Notizen
  • Als Erste(r) kommentieren

Keine Downloads
Aufrufe
Aufrufe insgesamt
1.392
Auf SlideShare
0
Aus Einbettungen
0
Anzahl an Einbettungen
57
Aktionen
Geteilt
0
Downloads
0
Kommentare
0
Gefällt mir
2
Einbettungen 0
Keine Einbettungen

Keine Notizen für die Folie

WordPress-Themes mit Twig entwickeln

  1. 1. WordPress-Themes mit Twig entwickeln Walter Ebert @wltrd WordCamp Berlin 14. November 2015 https://www.flickr.com/photos/37872410@N00/4653843463/https://www.flickr.com/photos/37872410@N00/4653843463/
  2. 2. Walter Ebert @wltrd walterebert.de slideshare.net/walterebert
  3. 3. http://twig.sensiolabs.org/http://twig.sensiolabs.org/
  4. 4. Vorteile von Twig • Trennung von HTML und PHP • Einfacher für Anfänger • Mehr Sicherheit • Vererbung von Templates • Erfahrung aus andere PHP-Projekte nutzen
  5. 5. Projekte die Twig nutzen • Symfony • Drupal 8 • EZ Publish • Bolt • Grav • Craft • Slim • Sculpin • (Laravel) • ...
  6. 6. Projekte die Twig nutzen • Symfony • Drupal 8 • EZ Publish • Bolt • Grav • Craft • Slim • Sculpin • (Laravel) • ... Drupal 8 Release Party 19. November 2015 http://drupalberlin.de/ http://www.drupical.com/ #Celebr8D8
  7. 7. Nachteile von Twig • Extra Template-Sprache • Code ist (etwas) langsamer
  8. 8. https://wordpress.org/plugins/timber-library/https://wordpress.org/plugins/timber-library/
  9. 9. https://github.com/jarednova/timber/wikihttps://github.com/jarednova/timber/wiki
  10. 10. Twig PHP-Erweiterung git clone https://github.com/twigphp/Twig.git cd Twig/ext/twig phpize ./configure make sudo make install php.ini [twig] extension=twig.so
  11. 11. Twig-Syntax {{ }} // Ausgabe {% %} // Logik {# #} // Kommentar
  12. 12. single.twig {# Dies ist ein Beitrag #} {% extends "base.twig" %} {% block content %} <h1 class="site-title">{{ foo }}</h1> <h2>{{ post.title|upper }}</h2> {% if post.thumbnail %} <img src="{{ post.thumbnail.src }}" /> {% endif %} <div class="content">{{ post.content }}</div> {% endblock %}
  13. 13. single.twig {# Dies ist ein Beitrag #} {% extends "base.twig" %} {% block content %} <h1 class="site-title">{{ foo }}</h1> <h2>{{ post.title|upper }}</h2> {% if post.thumbnail %} <img src="{{ post.thumbnail.src }}" /> {% endif %} <div class="content">{{ post.content }}</div> {% endblock %}
  14. 14. single.twig {# Dies ist ein Beitrag #} {% extends "base.twig" %} {% block content %} <h1 class="site-title">{{ foo }}</h1> <h2>{{ post.title|upper }}</h2> {% if post.thumbnail %} <img src="{{ post.thumbnail.src }}" /> {% endif %} <div class="content">{{ post.content }}</div> {% endblock %}
  15. 15. single.twig {# Dies ist ein Beitrag #} {% extends "base.twig" %} {% block content %} <h1 class="site-title">{{ foo }}</h1> <h2>{{ post.title|upper }}</h2> {% if post.thumbnail %} <img src="{{ post.thumbnail.src }}" /> {% endif %} <div class="content">{{ post.content }}</div> {% endblock %}
  16. 16. single.php <?php $context = Timber::get_context(); $context['foo'] = 'Bar!'; $context['post'] = new TimberPost(); Timber::render( 'single.twig', $context );
  17. 17. Posts // Posts $context['posts'] = Timber::get_posts(); // WP_Query $args = [ 'post_type' => 'custom_post_type', 'post_status' => 'publish', 'posts_per_page' => 5, ]; $context['posts'] = Timber::get_posts( $args );
  18. 18. Posts {% for post in posts %} <article id="post-{{ post.ID }}"> <h1> <a href="{{ post.link }}">{{ post.title }}</a> </h1> <div class="date"> {{ post.date }} </div> <div class="excerpt"> {{ post.content|excerpt(55) }} </div> </article> {% endfor %}
  19. 19. Übersetzungen <?php _e( 'Sorry, no posts.', 'meins' ); ?> -> {{ __('Sorry, no posts.', 'meins') }}
  20. 20. WordPress-Funktionen <?php get_search_form(); ?> -> {{ fn('get_search_form') }}
  21. 21. Advanced Custom Fields <h3>{{ post.title }}</h3> <div class="intro-text"> {{ post.get_field('meins_intro_text') }} </div> {% for item in post.get_field('meins_repeater') %} <article class="item"> <h1>{{ item.name }}</h1> {{ item.info }} </article> {% endfor %} https://wordpress.org/plugins/advanced-custom-fields/
  22. 22. Advanced Custom Fields Pro <h3>{{ post.title }}</h3> <div class="intro-text"> {{ post.get_field('meins_intro_text') }} </div> {% for item in post.get_field('meins_repeater') %} <article class="item"> <h1>{{ item.name }}</h1> {{ item.info }} </article> {% endfor %} http://www.advancedcustomfields.com/
  23. 23. http://notlaura.com/the-twig-for-timber-cheatsheet/http://notlaura.com/the-twig-for-timber-cheatsheet/
  24. 24. https://github.com/upstatement/timber-starter-themehttps://github.com/upstatement/timber-starter-theme
  25. 25. Praxisbeispiele https://github.com/jarednova/timber/wiki/Showcase https://github.com/laras126/karenmcgrane https://github.com/laras126/mtnmeister-theme https://github.com/laras126/dijifi-theme https://github.com/search?utf8=%E2%9C%93&q=timber+wordp ress&type=Repositories&ref=searchresults
  26. 26. walter.ebert.engineering @wltrd walterebert.de slideshare.net/walterebert

×