The Loop
<?php get_header(); ?>
<?php if ( have_posts() ) : while ( have_posts() ) :
the_post(); ?>
<h2><a href="<?php the...
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
• Satis
• Wallabag
• (La...
Nachteile von Twig
• Extra Template-Sprache
• Code ist (etwas) langsamer
Twig PHP-Erweiterung
git clone https://github.com/twigphp/Twig.git
cd Twig/ext/twig
phpize
./configure
make
sudo make inst...
composer.json
{
"require": {
"php": "^5.3.2 || ^7.0",
"twig/twig": "^1.23"
}
}
https://getcomposer.org/
composer.json
{
"require": {
"php": "^5.3.2 || ^7.0",
"twig/twig": "^1.23",
"johnpbloch/wordpress": "*"
},
"extra": {
"wor...
Twig laden
require_once '/path/to/vendor/autoload.php';
$loader = new Twig_Loader_Filesystem('/path/to/templates');
$twig ...
WordPress Packagist
{
"repositories" : [
{"type": "composer", "url": "http://wpackagist.org"}
],
"require": {
"php": "^5.3...
web/wp-config.php
require __DIR__ . '/../vendor/autoload.php';
...
define( 'WP_HOME', 'http://example.com' );
define( 'WP_...
web/index.php
<?php
define( 'WP_USE_THEMES', true );
require __DIR__ . '/wp/wp-blog-header.php';
…/theme/single.php
<?php
$context = Timber::get_context();
$context['post'] = new TimberPost();
Timber::render( 'single.tw...
…/theme/functions.php
function my_context( $data ) {
$data['foo'] = 'bar';
$data['menu'] = new TimberMenu();
return $data;...
…/theme/page.php
<?php
$context = Timber::get_context();
$context['foo'] = 'bar';
$context['menu'] = new TimberMenu();
$co...
Twig-Syntax
{{ }} // Ausgabe
{% %} // Logik
{# #} // Kommentar
…/theme/views/single.twig
{# Dies ist ein Beitrag #}
{% extends "base.twig" %}
{% block content %}
<h2>{{ post.title|upper...
…/theme/views/single.twig
{# Dies ist ein Beitrag #}
{% extends "base.twig" %}
{% block content %}
<h2>{{ post.title|upper...
…/theme/views/single.twig
{# Dies ist ein Beitrag #}
{% extends "base.twig" %}
{% block content %}
<h2>{{ post.title|upper...
…/theme/views/single.twig
{# Dies ist ein Beitrag #}
{% extends "base.twig" %}
{% block content %}
<h2>{{ post.title|upper...
…/theme/views/single.twig
{# Dies ist ein Beitrag #}
{% extends "base.twig" %}
{% block content %}
<h2>{{ post.title|upper...
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 echo __( 'Sorry, no posts.', 'textdomain' ) ); ?>
<?php _e( 'Sorry, no posts.', 'textdomain' ); ?>
->
...
WordPress-Funktionen
<?php get_search_form(); ?>
->
{{ fn('get_search_form') }}
Benutzerdefinierte Felder
<h3>{{ post.title }}</h3>
<div class="intro-text">
{{ post.custom_field }}
</div>
https://codex....
Advanced Custom Fields
<h3>{{ post.title }}</h3>
<div class="intro-text">
{{ post.get_field('meins_intro_text') }}
</div>
...
Timber-Klassen erweitern
class MySitePost extends TimberPost {
var $_issue;
public function issue() {
if (!$this->_issue) ...
Eigene Twig-Filter erstellen
add_filter( 'get_twig', function( $twig ) {
$twig->addFilter(
new Twig_SimpleFilter(
'comment...
Twig-Extensions nutzen
add_filter( 'get_twig', function( $twig ) {
$twig->addExtension(
new Twig_Extensions_Extension_Text...
Praxisbeispiele
https://github.com/jarednova/timber/wiki/Showcase
https://github.com/laras126/karenmcgrane
https://github....
WordPress-Projekte starten
composer create-project roots/bedrock
composer create-project org_heigl/wordpress_bootstrap
com...
WordPress-Termine
Jeden 2. Dienstag des Monats, WP-Meetup Frankfurt
https://wpmeetup-frankfurt.de/
16.-17. April 2016, Wor...
walter.ebert.engineering
@wltrd
walterebert.de
slideshare.net/walterebert
WordPress-Templates mit Twig erstellen - PHPUGFFM
WordPress-Templates mit Twig erstellen - PHPUGFFM
WordPress-Templates mit Twig erstellen - PHPUGFFM
WordPress-Templates mit Twig erstellen - PHPUGFFM
WordPress-Templates mit Twig erstellen - PHPUGFFM
WordPress-Templates mit Twig erstellen - PHPUGFFM
WordPress-Templates mit Twig erstellen - PHPUGFFM
WordPress-Templates mit Twig erstellen - PHPUGFFM
WordPress-Templates mit Twig erstellen - PHPUGFFM
WordPress-Templates mit Twig erstellen - PHPUGFFM
Nächste SlideShare
Wird geladen in …5
×

WordPress-Templates mit Twig erstellen - PHPUGFFM

849 Aufrufe

Veröffentlicht am

Vortrag bei der PHP Usergroup Frankfurt am 21. Januar 2016

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

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

Keine Notizen für die Folie

WordPress-Templates mit Twig erstellen - PHPUGFFM

  1. 1. The Loop <?php get_header(); ?> <?php if ( have_posts() ) : while ( have_posts() ) : the_post(); ?> <h2><a href="<?php the_permalink(); ?>"> <?php echo strtoupper( get_the_title() ); ?> </a></h2> <?php if ( has_post_thumbnail() ) the_post_thumbnail(); ?> <div class="content"><?php the_content(); ?></div> <?php comments_template(); ?> <?php endif; ?> <?php get_footer(); ?> https://codex.wordpress.org/The_Loop
  2. 2. Vorteile von Twig • Trennung von HTML und PHP • Einfacher für Anfänger • Mehr Sicherheit • Vererbung von Templates • Erfahrung aus andere PHP-Projekte nutzen
  3. 3. Projekte die Twig nutzen • Symfony • Drupal 8 • EZ Publish • Bolt • Grav • Craft • Slim • Sculpin • Satis • Wallabag • (Laravel) • ...
  4. 4. Nachteile von Twig • Extra Template-Sprache • Code ist (etwas) langsamer
  5. 5. 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
  6. 6. composer.json { "require": { "php": "^5.3.2 || ^7.0", "twig/twig": "^1.23" } } https://getcomposer.org/
  7. 7. composer.json { "require": { "php": "^5.3.2 || ^7.0", "twig/twig": "^1.23", "johnpbloch/wordpress": "*" }, "extra": { "wordpress-install-dir": "web" } } http://composer.rarst.net/
  8. 8. Twig laden require_once '/path/to/vendor/autoload.php'; $loader = new Twig_Loader_Filesystem('/path/to/templates'); $twig = new Twig_Environment($loader); // WordPress Voodoo $data→ echo $twig->render('index.twig', $data);
  9. 9. WordPress Packagist { "repositories" : [ {"type": "composer", "url": "http://wpackagist.org"} ], "require": { "php": "^5.3.2 || ^7.0", "composer/installers": "~1.0", "johnpbloch/wordpress": "*", "twig/twig": "^1.23", "wpackagist-plugin/timber-library": "*", "wpackagist-theme/twentyfifteen": "*" } "extra": { "wordpress-install-dir": "web/wp", "installer-paths": { "web/wp-content/mu-plugins/{$name}" : ["type:wordpress-muplugin"], "web/wp-content/plugins/{$name}": ["type:wordpress-plugin"], "web/wp-content/themes/{$name}": ["type:wordpress-theme"] } } } http://wpackagist.org/
  10. 10. web/wp-config.php require __DIR__ . '/../vendor/autoload.php'; ... define( 'WP_HOME', 'http://example.com' ); define( 'WP_SITEURL', 'http://example.com/wp' ); define( 'WP_CONTENT_URL', 'http://example.com/wp-content' ); define( 'WP_CONTENT_DIR', __DIR__ . '/wp-content/' ); https://codex.wordpress.org/Editing_wp-config.php
  11. 11. web/index.php <?php define( 'WP_USE_THEMES', true ); require __DIR__ . '/wp/wp-blog-header.php';
  12. 12. …/theme/single.php <?php $context = Timber::get_context(); $context['post'] = new TimberPost(); Timber::render( 'single.twig', $context );
  13. 13. …/theme/functions.php function my_context( $data ) { $data['foo'] = 'bar'; $data['menu'] = new TimberMenu(); return $data; } add_filter( 'timber_context', 'my_context' );
  14. 14. …/theme/page.php <?php $context = Timber::get_context(); $context['foo'] = 'bar'; $context['menu'] = new TimberMenu(); $context['post'] = new TimberPost(); Timber::render( 'page.twig', $context );
  15. 15. Twig-Syntax {{ }} // Ausgabe {% %} // Logik {# #} // Kommentar
  16. 16. …/theme/views/single.twig {# Dies ist ein Beitrag #} {% extends "base.twig" %} {% block content %} <h2>{{ post.title|upper }}</h2> {% if post.thumbnail %} <img src="{{ post.thumbnail.src }}"> {% endif %} <div class="content">{{ post.content }}</div> {% include 'comments.twig' %} {% endblock %}
  17. 17. …/theme/views/single.twig {# Dies ist ein Beitrag #} {% extends "base.twig" %} {% block content %} <h2>{{ post.title|upper }}</h2> {% if post.thumbnail %} <img src="{{ post.thumbnail.src }}"> {% endif %} <div class="content">{{ post.content }}</div> {% include 'comments.twig' %} {% endblock %}
  18. 18. …/theme/views/single.twig {# Dies ist ein Beitrag #} {% extends "base.twig" %} {% block content %} <h2>{{ post.title|upper }}</h2> {% if post.thumbnail %} <img src="{{ post.thumbnail.src }}"> {% endif %} <div class="content">{{ post.content }}</div> {% include 'comments.twig' %} {% endblock %}
  19. 19. …/theme/views/single.twig {# Dies ist ein Beitrag #} {% extends "base.twig" %} {% block content %} <h2>{{ post.title|upper }}</h2> {% if post.thumbnail %} <img src="{{ post.thumbnail.src }}"> {% endif %} <div class="content">{{ post.content }}</div> {% include 'comments.twig' %} {% endblock %}
  20. 20. …/theme/views/single.twig {# Dies ist ein Beitrag #} {% extends "base.twig" %} {% block content %} <h2>{{ post.title|upper }}</h2> {% if post.thumbnail %} <img src="{{ post.thumbnail.src }}"> {% endif %} <div class="content">{{ post.content }}</div> {% include 'comments.twig' %} {% endblock %}
  21. 21. 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 ); https://codex.wordpress.org/Class_Reference/WP_Query
  22. 22. 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 %}
  23. 23. Übersetzungen <?php echo __( 'Sorry, no posts.', 'textdomain' ) ); ?> <?php _e( 'Sorry, no posts.', 'textdomain' ); ?> -> {{ __('Sorry, no posts.', 'textdomain') }}
  24. 24. WordPress-Funktionen <?php get_search_form(); ?> -> {{ fn('get_search_form') }}
  25. 25. Benutzerdefinierte Felder <h3>{{ post.title }}</h3> <div class="intro-text"> {{ post.custom_field }} </div> https://codex.wordpress.org/Custom_Fields
  26. 26. Advanced Custom Fields <h3>{{ post.title }}</h3> <div class="intro-text"> {{ post.get_field('meins_intro_text') }} </div> https://wordpress.org/plugins/advanced-custom-fields/
  27. 27. Timber-Klassen erweitern class MySitePost extends TimberPost { var $_issue; public function issue() { if (!$this->_issue) { $issues = $this->get_terms('issues'); if (is_array($issues) && count($issues)) { $this->_issue = $issues[0]; } } return $this->_issue; } } https://github.com/jarednova/timber/wiki/Extending-Timber
  28. 28. Eigene Twig-Filter erstellen add_filter( 'get_twig', function( $twig ) { $twig->addFilter( new Twig_SimpleFilter( 'comment_text', function( $text ) { return apply_filters( 'comment_text', $text ); } ) ); return $twig; } ); https://github.com/jarednova/timber/wiki/Extending-Timber
  29. 29. Twig-Extensions nutzen add_filter( 'get_twig', function( $twig ) { $twig->addExtension( new Twig_Extensions_Extension_Text() ); return $twig; } ); https://packagist.org/packages/twig/extensions
  30. 30. 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 http://responsivewebdesign.com/toast/backend/
  31. 31. WordPress-Projekte starten composer create-project roots/bedrock composer create-project org_heigl/wordpress_bootstrap composer create-project wee/wordpress-project
  32. 32. WordPress-Termine Jeden 2. Dienstag des Monats, WP-Meetup Frankfurt https://wpmeetup-frankfurt.de/ 16.-17. April 2016, WordCamp Nürnberg https://nuremberg.wordcamp.org/2016/ 24.-26. Juni 2016, WordCamp Europe, Wien https://2016.europe.wordcamp.org/ September/Oktober 2016, WordCamp Frankfurt https://frankfurt.wordcamp.org/
  33. 33. walter.ebert.engineering @wltrd walterebert.de slideshare.net/walterebert

×