Ce diaporama a bien été signalé.
Nous utilisons votre profil LinkedIn et vos données d’activité pour vous proposer des publicités personnalisées et pertinentes. Vous pouvez changer vos préférences de publicités à tout moment.

WordPress Theme Structure

3 403 vues

Publié le

Efficient, organised and reusable WordPress theme development.

Publié dans : Internet
  • ♣♣ 10 Easy Ways to Improve Your Performance in Bed... ▲▲▲ http://ishbv.com/rockhardx/pdf
       Répondre 
    Voulez-vous vraiment ?  Oui  Non
    Votre message apparaîtra ici
  • ♣♣ 10 Easy Ways to Improve Your Performance in Bed... ▲▲▲ http://ishbv.com/rockhardx/pdf
       Répondre 
    Voulez-vous vraiment ?  Oui  Non
    Votre message apparaîtra ici

WordPress Theme Structure

  1. 1. WordPress theme structure Efficient, organised, (and fun!) 
 WordPress theme development
  2. 2. What is a WordPress theme? WordPress Themes are files that work together to create the design and functionality of a WordPress site. Each Theme may be different, offering many choices for site owners to instantly change their website look. - https://codex.wordpress.org/Theme_Development
  3. 3. What is a WordPress theme? WordPress Themes are files that work together to create the design and functionality of a WordPress site. Each Theme may be different, offering many choices for site owners to instantly change their website look. - https://codex.wordpress.org/Theme_Development
  4. 4. What is a WordPress theme? WordPress Themes are files that work together to create the design and functionality of a WordPress site. Each Theme may be different, offering many choices for site owners to instantly change their website look. - https://codex.wordpress.org/Theme_Development
  5. 5. What we’ll cover • Theme considerations • What should go into a theme • File and folder structure • Assets • Functions • Page templates • Template parts • Theme wrappers
  6. 6. About me • Keith Devon • Freelance WordPress developer for 5 years • Starting an agency • Primarily build custom themes • Focus on performance, SEO, business goals keith@keithdevon.com | @keithdevon
  7. 7. Theme considerations • development speed • modular • reusable • DRY • lightweight • collaboration • WP coding standards • intuitively named • high performance • site speed • SEO • a11y • growth/evolution
  8. 8. What to include (and what to leave out) Themes • Front-end display • Visual enhancements • Navigation Plugins • Content structure • Custom post types • Custom taxonomies • Custom fields • Other functionality and logic • API integrations
  9. 9. Theme structure assets/ scss/ css/ js/ img/ functions/ scripts.php images.php menus.php wrapper.php page-templates/ template-name.php parts/ site-header.php site-footer.php head.php testimonial.php base.php index.php single.php page.php style.css functions.php
  10. 10. assets/ scss/ css/ js/ img/ functions/ scripts.php images.php menus.php wrapper.php page-templates/ template-name.php parts/ site-header.php site-footer.php head.php testimonial.php base.php index.php single.php page.php style.css functions.php • CSS, JS, images, fonts, etc • Preprocessors • SASS, LESS, etc. • Task runners • Grunt, Gulp, Mixture, CodeKit Assets
  11. 11. Assets assets/ scss/ css/ js/ img/ functions/ scripts.php images.php menus.php wrapper.php page-templates/ template-name.php parts/ site-header.php site-footer.php head.php testimonial.php base.php index.php single.php page.php style.css functions.php • SASS • Bourbon and Neat • CodeKit • Speeds up development • Performance wins • Modular • style.css used for theme info CSS
  12. 12. Assets assets/ scss/ css/ js/ img/ functions/ scripts.php images.php menus.php wrapper.php page-templates/ template-name.php parts/ site-header.php site-footer.php head.php testimonial.php base.php index.php single.php page.php style.css functions.php SCSS structure scss/ project.scss base/ __variables.scss __normalize.scss _layout.scss _type.scss modules/ _site-header.scss _site-footer.scss _testimonial.scss templates/ _front-page.scss @import "bourbon", "neat";
 
 @import "base/*";
 @import "templates/*";
 @import "modules/*";
  13. 13. Assets assets/ scss/ css/ js/ img/ functions/ scripts.php images.php menus.php wrapper.php page-templates/ template-name.php parts/ site-header.php site-footer.php head.php testimonial.php base.php index.php single.php page.php style.css functions.php • Similar to SASS structure • Use CodeKit • Concatenate and minify files • Ideally 2 JS files JS
  14. 14. Assets assets/ scss/ css/ js/ img/ functions/ scripts.php images.php menus.php wrapper.php page-templates/ template-name.php parts/ site-header.php site-footer.php head.php testimonial.php base.php index.php single.php page.php style.css functions.php JS structure js/ min/ header.min.js footer.min.js modules/ _testimonial.js source/ modernizer.js header.js footer.js // @codekit-prepend "source/modernizer.js";
  15. 15. Functions assets/ scss/ css/ js/ img/ functions/ scripts.php images.php menus.php wrapper.php page-templates/ template-name.php parts/ site-header.php site-footer.php head.php testimonial.php base.php index.php single.php page.php style.css functions.php Functions • Break up your functions into files • as many as you need • include them from functions.php • easy!
  16. 16. functions.php include 'functions/scripts.php';
 include 'functions/images.php';
 include 'functions/menu.php'; include 'functions/wrapper.php';

  17. 17. scripts.php assets/ scss/ css/ js/ img/ functions/ scripts.php images.php menus.php wrapper.php page-templates/ template-name.php parts/ site-header.php site-footer.php head.php testimonial.php base.php index.php style.css functions.php Scripts (and styles) • wp_enqueue_script() • wp_enqueue_style() • with wp_enqueue_scripts() • cache busting
  18. 18. 
 function load_the_css(){
 if(!is_admin()){
 $css_link = get_stylesheet_directory_uri() . '/assets/css/project.css';
 $css_file = get_stylesheet_directory() . '/assets/css/project.css';
 wp_enqueue_style('theme-style', $css_link, array(), filemtime($css_file), 'all');
 }
 } add_action('wp_enqueue_scripts', 'load_the_css');
  19. 19. Page templates assets/ scss/ css/ js/ img/ functions/ scripts.php images.php menus.php wrapper.php page-templates/ template-name.php parts/ site-header.php site-footer.php head.php testimonial.php base.php index.php single.php page.php style.css functions.php • Main templates have to live in root • index.php • single.php • page.php • archive.php • etc. • Custom page templates can live in sub- directory
  20. 20. Template parts assets/ scss/ css/ js/ img/ functions/ scripts.php images.php menus.php wrapper.php page-templates/ template-name.php parts/ site-header.php site-footer.php head.php testimonial.php base.php index.php single.php page.php style.css functions.php Template parts • keeps code tidy and modular • part names same a .scss and .js files • get_template_part(‘parts/part-name’) • include(locate_template(‘parts/part-name.php’))
  21. 21. <?php 
 /*
 Template Name: Contact Page
 */ 
 ?>
 
 <?php get_header(); ?>
 
 <?php get_template_part('parts/page', 'header'); ?> <?php get_template_part(‘parts/content', 'contact'); ?> <?php get_template_part('parts/page', 'footer'); ?>
 
 <?php get_footer(); ?>
  22. 22. Theme Wrapper assets/ scss/ css/ js/ img/ functions/ scripts.php images.php menus.php wrapper.php page-templates/ template-name.php parts/ site-header.php site-footer.php head.php testimonial.php base.php index.php single.php page.php style.css functions.php • DRY • Tags always open and close in the same file • First found this in Roots theme • https://roots.io/sage/docs/theme-wrapper/ Add code from github.com/roots/sage/blob/master/lib/wrapper.php to your wrapper.php file
  23. 23. <!DOCTYPE html> <html <?php language_attributes(); ?>> 
 <?php get_template_part('parts/head'); ?> 
 <body <?php body_class(); ?>> 
 <?php get_template_part('parts/site-header'); ?> 
 <?php include sage_template_path(); ?> 
 <?php get_template_part('parts/site-footer'); ?> 
 </body> 
 </html> base.php
  24. 24. <?php if (have_posts()) : ?>
 
 <?php while (have_posts()) : the_post(); ?> 
 <?php get_template_part('parts/content'); ?> 
 <?php endwhile; ?>
 
 <?php else: ?>
 
 <?php get_template_part('parts/none'); ?>
 
 <?php endif; ?> index.php
  25. 25. In conclusion • No right way • Find what works for you • Keep it organised, modular and reusable • Have fun!
  26. 26. Thanks keith@keithdevon.com | @keithdevon

×