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.
ENHANCEyour
WordPress development
With TWIG and CLARKSON
Jaime Martínez at WordCamp Barcelona 2016
Do you know
TWIG?
Have you worked with
TWIG?
So what is
TWIG?
TWIG?Twig is a modern template engine for PHP.
TWIG?
So what is
CLARKSON?
Clarkson is a WordPress plugin which
encourages writing maintainable and object-
oriented code.
What PROBLEM
Are we trying to SOLVE?
Separation of Concern
&
Reusable models
Templates
-
View
Logic
-
Controller
WP Objects
-
Model
Presentation
-
View
Logic
-
Controller
Data access
-
Model
Templates
-
View
Logic
-
Controller
WP Objects
-
Model
Seperation of concern
How do I magically register variables?
Menu item a Menu item b
©WCNL Just some footer text - 2015
<footer class="content-info">

<?php if ( has_nav_menu( 'footer-menu' ) ) { ?>

<nav class="footer-nav">

<?php wp_nav_men...
<footer class="content-info">

{% if ( footer.menu is empty ) %}

<nav class="footer-nav">

{{ footer.menu }}

</nav>

{% ...
class Footer {

static function get_text(){

return get_option('ll-footer-text') .' - Copyright
' . date('Y');

}

static ...
class Footer {
function __construct() {

add_filter( 'clarkson_context_args', array( $this,
'add_context_args' ) );

}

fu...
<footer class="content-info">

{% if ( footer.menu is empty ) %}

<nav class="footer-nav">

{{ footer.menu }}

</nav>

{% ...
How do I set up my
TEMPLATES?
single.php > single.twig
This is a sidebar
https://level-level.com/clarkson-core-op-wordcamp-nederland-2016/
Sidebar post block
Single post with 2-...
COLUMN
TWO
PAGE SINGLE
COLUMN
TWO
PAGE SINGLE
{% include 'defaults/header.twig' %}
<main class="main">

{% block content %}

{% include 'partials/content.twig' %}

{% e...
COLUMN
TWO
PAGE SINGLE
{% extend 'layouts/2-columns.twig' %}



{% block content %}


{% include 'post/content.twig' %}
{# Or some other custom H...
Autotaalglas Jaime’s talk on WCNL
Prefix - Level
WCNL JAIME
This is a link and this is regular
https://level-level.com
Autotaalglas Jaime’s talk on WCNL
Prefix - Level
WCNL JAIME
This is a link and this is regular
https://level-level.com
CELL
GRID
POST POST
PARTNER
AD
POST POST
PARTNER
AD
CELL
GRID
<div class="grid-cell">
{% block content %}
Default fallback content

{% endblock %}
</div>
Global partial template
grid/p...
{% extend 'partials/grid-cell.twig' %}
{% block content %}
<script type="text/javascript">

// Some Javascript to load Adv...
How to work with
CUSTOM POST TYPES and
WORDPRESS OBJECTSthe
Autotaalglas Jaime’s talk on WCNL
Prefix - Level
WCNL JAIME
This is a link and this is regular
https://level-level.com
Autotaalglas Jaime’s talk on WCNL
Prefix - Level
WCNL JAIME
This is a link and this is regular
https://level-level.com
Autotaalglas Jaime’s talk on WCNL
Prefix - Level
WCNL JAIME
This is a link and this is regular
POST
POST
PARTNER
POST
AD
ht...
Autotaalglas live! Jaime’s talk on WCNL 2016
Prefix - Level Level
WCNL JAIME
This is a link and this is regular
grid-cell
1...
POST
CLARKSON
POST
POST
PARTNER
AD
POST
CLARKSON
POST
POST
PARTNER
AD
class post extends Clarkson_Post {


public function get_grid_size(){


return get_post_meta( $this->get_id(), 'll-
grid-s...
<div class="grid-cell grid-cell-
{{ object.get_grid_size() }}">


<a href="{{ object.get_permalink() }}">

{{ object.get_t...
POST
CLARKSON
POST
POST
PARTNER
AD
class ll_partner_post extends post {

public function get_title() {



$title = parent::get_title();

$title ="Prefix - " ...
SO:

Encourage separation of concern & modularity
Twig templating:

Include, extend, macros, embed & overwrite blocks
Magi...
results:

Easier to maintain projects
200% more happy developers
Happier support team
10% less broken keyboards
ADIOS!

Visit wp—clarkson.com by Level Level.
Jaime Martínez
@jmslbam
level-level.com
Enhance your WordPress development with Twig through Clarkson - WordCamp Barcalona 2016
Enhance your WordPress development with Twig through Clarkson - WordCamp Barcalona 2016
Nächste SlideShare
Wird geladen in …5
×

Enhance your WordPress development with Twig through Clarkson - WordCamp Barcalona 2016

194 Aufrufe

Veröffentlicht am

This presentation is slightly different presentation then the one from WordCamp Netherlands 2016

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

Enhance your WordPress development with Twig through Clarkson - WordCamp Barcalona 2016

  1. 1. ENHANCEyour WordPress development With TWIG and CLARKSON Jaime Martínez at WordCamp Barcelona 2016
  2. 2. Do you know TWIG?
  3. 3. Have you worked with TWIG?
  4. 4. So what is TWIG?
  5. 5. TWIG?Twig is a modern template engine for PHP.
  6. 6. TWIG? So what is CLARKSON?
  7. 7. Clarkson is a WordPress plugin which encourages writing maintainable and object- oriented code.
  8. 8. What PROBLEM Are we trying to SOLVE?
  9. 9. Separation of Concern & Reusable models
  10. 10. Templates - View Logic - Controller WP Objects - Model
  11. 11. Presentation - View Logic - Controller Data access - Model Templates - View Logic - Controller WP Objects - Model
  12. 12. Seperation of concern How do I magically register variables? Menu item a Menu item b ©WCNL Just some footer text - 2015
  13. 13. <footer class="content-info">
 <?php if ( has_nav_menu( 'footer-menu' ) ) { ?>
 <nav class="footer-nav">
 <?php wp_nav_menu(['theme_location' => 'footer- menu']); ?>
 </nav>
 <?php } ?> 
 <?php echo get_option('ll-footer-text') .' - Copyright ' . date('Y');?>
 </footer> get_template_part(‘footer’)
  14. 14. <footer class="content-info">
 {% if ( footer.menu is empty ) %}
 <nav class="footer-nav">
 {{ footer.menu }}
 </nav>
 {% endif %}
 
 {{ footer.text | raw }} 
 </footer> footer.twig
  15. 15. class Footer {
 static function get_text(){
 return get_option('ll-footer-text') .' - Copyright ' . date('Y');
 }
 static function get_menu() {
 return wp_nav_menu(['theme_location' => 'footer-
 menu']);
 }
 } model/footer.php
  16. 16. class Footer { function __construct() {
 add_filter( 'clarkson_context_args', array( $this, 'add_context_args' ) );
 }
 function add_context_args( $objects ) {
 $objects['footer']['menu'] = Footer::get_menu()
 $objects['footer']['text'] = Footer::get_text(); 
 return $objects;
 }
 } controllers/footer.php
  17. 17. <footer class="content-info">
 {% if ( footer.menu is empty ) %}
 <nav class="footer-nav">
 {{ footer.menu }}
 </nav>
 {% endif %}
 
 {{ footer.text | raw }} 
 </footer> footer.twig
  18. 18. How do I set up my TEMPLATES?
  19. 19. single.php > single.twig
  20. 20. This is a sidebar https://level-level.com/clarkson-core-op-wordcamp-nederland-2016/ Sidebar post block Single post with 2-column template
  21. 21. COLUMN TWO PAGE SINGLE
  22. 22. COLUMN TWO PAGE SINGLE
  23. 23. {% include 'defaults/header.twig' %} <main class="main">
 {% block content %}
 {% include 'partials/content.twig' %}
 {% endblock %}
 </main> <sidebar> {% block sidebar %}
 {% include 'partials/sidebar.twig' %}
 {% endblock %} </sidebar> {% include 'defaults/footer.twig' %} Set up a template file layouts/2-columns.twig
  24. 24. COLUMN TWO PAGE SINGLE
  25. 25. {% extend 'layouts/2-columns.twig' %}
 
 {% block content %} 
 {% include 'post/content.twig' %} {# Or some other custom HTML #}
 {% endblock %} Extend this layout file
 ( single.twig )
  26. 26. Autotaalglas Jaime’s talk on WCNL Prefix - Level WCNL JAIME This is a link and this is regular https://level-level.com
  27. 27. Autotaalglas Jaime’s talk on WCNL Prefix - Level WCNL JAIME This is a link and this is regular https://level-level.com
  28. 28. CELL GRID POST POST PARTNER AD
  29. 29. POST POST PARTNER AD CELL GRID
  30. 30. <div class="grid-cell"> {% block content %} Default fallback content
 {% endblock %} </div> Global partial template grid/partials/grid-cell.twig
  31. 31. {% extend 'partials/grid-cell.twig' %} {% block content %} <script type="text/javascript">
 // Some Javascript to load Advertisement
 </script> {% endblock %} Extend the grid-cell grid/partials/internal-ad.twig
  32. 32. How to work with CUSTOM POST TYPES and WORDPRESS OBJECTSthe
  33. 33. Autotaalglas Jaime’s talk on WCNL Prefix - Level WCNL JAIME This is a link and this is regular https://level-level.com
  34. 34. Autotaalglas Jaime’s talk on WCNL Prefix - Level WCNL JAIME This is a link and this is regular https://level-level.com
  35. 35. Autotaalglas Jaime’s talk on WCNL Prefix - Level WCNL JAIME This is a link and this is regular POST POST PARTNER POST AD https://level-level.com
  36. 36. Autotaalglas live! Jaime’s talk on WCNL 2016 Prefix - Level Level WCNL JAIME This is a link and this is regular grid-cell 1x2 grid-cell 1x1 grid-cell 2x1 grid-cell 1x1 https://level-level.com
  37. 37. POST CLARKSON POST POST PARTNER AD
  38. 38. POST CLARKSON POST POST PARTNER AD
  39. 39. class post extends Clarkson_Post { 
 public function get_grid_size(){ 
 return get_post_meta( $this->get_id(), 'll- grid-size'); 
 }
 } themes/wcbarca2016/wordpress-objects/post.php
  40. 40. <div class="grid-cell grid-cell- {{ object.get_grid_size() }}"> 
 <a href="{{ object.get_permalink() }}">
 {{ object.get_title() | upper }}
 </a>
 </div> Twig template grid/partials/grid-cell.twig
  41. 41. POST CLARKSON POST POST PARTNER AD
  42. 42. class ll_partner_post extends post {
 public function get_title() {
 
 $title = parent::get_title();
 $title ="Prefix - " . $title;
 
 return $title; } } themes/wcbarca2016/wordpress-objects/ll-partner-post.php
  43. 43. SO:
 Encourage separation of concern & modularity Twig templating:
 Include, extend, macros, embed & overwrite blocks Magically register variables OO WordPress Objects
  44. 44. results:
 Easier to maintain projects 200% more happy developers Happier support team 10% less broken keyboards
  45. 45. ADIOS!
 Visit wp—clarkson.com by Level Level. Jaime Martínez @jmslbam level-level.com

×