Diese Präsentation wurde erfolgreich gemeldet.
Wir verwenden Ihre LinkedIn Profilangaben und Informationen zu Ihren Aktivitäten, um Anzeigen zu personalisieren und Ihnen relevantere Inhalte anzuzeigen. Sie können Ihre Anzeigeneinstellungen jederzeit ändern.
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

2.096 Aufrufe

Veröffentlicht am

Vortrag beim WordCamp Berlin am 14. November 2015

Veröffentlicht in: Internet
  • Als Erste(r) kommentieren

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

×