WordPress-Templates mit Twig erstellen - PHPUGFFM
•
2 likes•2,050 views
This document provides information about using Twig as a templating language for WordPress projects. It discusses advantages of Twig like separation of HTML and PHP. It also covers how to install and configure Twig, use Twig syntax in templates, integrate Twig with plugins like Timber, extend Twig functionality, and lists some WordPress projects that use Twig. Finally, it provides some resources for getting started with WordPress development using Composer and Twig.
Report
Share
More Related Content
What's hot
What's hot (20)
Viewers also liked
Viewers also liked (16)
Similar to WordPress-Templates mit Twig erstellen - PHPUGFFM
Similar to WordPress-Templates mit Twig erstellen - PHPUGFFM (20)
More from Walter Ebert
More from Walter Ebert (20)
Recently uploaded
Recently uploaded (20)
WordPress-Templates mit Twig erstellen - PHPUGFFM
- 4. 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
- 6. Vorteile von Twig • Trennung von HTML und PHP • Einfacher für Anfänger • Mehr Sicherheit • Vererbung von Templates • Erfahrung aus andere PHP-Projekte nutzen
- 7. Projekte die Twig nutzen • Symfony • Drupal 8 • EZ Publish • Bolt • Grav • Craft • Slim • Sculpin • Satis • Wallabag • (Laravel) • ...
- 8. Nachteile von Twig • Extra Template-Sprache • Code ist (etwas) langsamer
- 9. 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
- 10. composer.json { "require": { "php": "^5.3.2 || ^7.0", "twig/twig": "^1.23" } } https://getcomposer.org/
- 11. composer.json { "require": { "php": "^5.3.2 || ^7.0", "twig/twig": "^1.23", "johnpbloch/wordpress": "*" }, "extra": { "wordpress-install-dir": "web" } } http://composer.rarst.net/
- 12. 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);
- 15. 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/
- 16. 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
- 17. web/index.php <?php define( 'WP_USE_THEMES', true ); require __DIR__ . '/wp/wp-blog-header.php';
- 18. …/theme/single.php <?php $context = Timber::get_context(); $context['post'] = new TimberPost(); Timber::render( 'single.twig', $context );
- 20. …/theme/functions.php function my_context( $data ) { $data['foo'] = 'bar'; $data['menu'] = new TimberMenu(); return $data; } add_filter( 'timber_context', 'my_context' );
- 21. …/theme/page.php <?php $context = Timber::get_context(); $context['foo'] = 'bar'; $context['menu'] = new TimberMenu(); $context['post'] = new TimberPost(); Timber::render( 'page.twig', $context );
- 22. Twig-Syntax {{ }} // Ausgabe {% %} // Logik {# #} // Kommentar
- 23. …/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 %}
- 24. …/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 %}
- 25. …/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 %}
- 26. …/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 %}
- 27. …/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 %}
- 28. 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
- 29. 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 %}
- 30. Übersetzungen <?php echo __( 'Sorry, no posts.', 'textdomain' ) ); ?> <?php _e( 'Sorry, no posts.', 'textdomain' ); ?> -> {{ __('Sorry, no posts.', 'textdomain') }}
- 31. WordPress-Funktionen <?php get_search_form(); ?> -> {{ fn('get_search_form') }}
- 32. Benutzerdefinierte Felder <h3>{{ post.title }}</h3> <div class="intro-text"> {{ post.custom_field }} </div> https://codex.wordpress.org/Custom_Fields
- 33. 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/
- 34. 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
- 35. 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
- 36. Twig-Extensions nutzen add_filter( 'get_twig', function( $twig ) { $twig->addExtension( new Twig_Extensions_Extension_Text() ); return $twig; } ); https://packagist.org/packages/twig/extensions
- 41. WordPress-Projekte starten composer create-project roots/bedrock composer create-project org_heigl/wordpress_bootstrap composer create-project wee/wordpress-project
- 42. 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/