O slideshow foi denunciado.
Utilizamos seu perfil e dados de atividades no LinkedIn para personalizar e exibir anúncios mais relevantes. Altere suas preferências de anúncios quando desejar.

Customize it.

404 visualizações

Publicada em

Wordpress Customier Presentation at Internetdagarna/WordCamp Stockholm 2016

Publicada em: Internet
  • Seja o primeiro a comentar

  • Seja a primeira pessoa a gostar disto

Customize it.

  1. 1. Customize It! Edmund Turbin, Solutions Engineer @spicecadet Give users control with the Customizer
  2. 2. 1. Introduction 2. Visual Site Building 3. How Users Can Benefit 4. Development Approach 5. New Functionality 6. Summary Agenda
  4. 4. WHAT IS THE CUSTOMIZER? • Visual Editor for making changes • Realtime preview • Can be done directly on a live site • No code changes needed
  5. 5. WHO CAN USE IT? • Super Admin • Administrator
  6. 6. CONFIGURATION VS CODING • Simple to modify items quickly • Developer not required • Great for technical users who know WordPress • No deploy process Pros of Configuration
  7. 7. CONFIGURATION VS CODING • Not suitable for complex fixes • Changes stored in database - no revisions • Limited to functionality defined in theme • May not be a permanent solution • Difficult to move/copy config to another environment Cons of Configuration
  8. 8. CONFIGURATION VS CODING • No limits to solution • Could create a fully custom solution • Code managed in version control • Devs will be knowledgeable about potential solutions • Changes may be vetted through code review Pros of Coding
  10. 10. USING THE CUSTOMIZER •Change basic information about your site •Static Front Page Setting Tagline and Site Settings
  11. 11. USING THE CUSTOMIZER • Logo • Title • Tagline • Site Icon Site Identity
  12. 12. USING THE CUSTOMIZER •Menu Locations •Primary Navigation Menus
  13. 13. USING THE CUSTOMIZER •Add Widgets to any defined widget areas Widgets
  14. 14. WHERE ARE MY SETTINGS SAVED? Site-wide settings - Options • wp_options table Theme specific options - Theme Mods • saved as an array: theme_mods_themename Database
  15. 15. WHERE ARE CUSTOMIZER SETTINGS SAVED? theme_mods_twentyfifteen a:1:{ s:20: “customize_link_color"; s:7: "#b5b5b5"; } customize_link_color, #b5b5b5 Theme Mods
  17. 17. USE CASE: SITE BUILDER •Can make changes without getting into the code •May be appropriate for settings and other visual tweaks Configuration
  18. 18. USE CASE: DEVELOPERS •Configuration can be done in development quickly •Database changes need to be pushed to production Templated Theme Options
  19. 19. USE CASE: MULTISITE •Most of the configuration can be handled by code •Some of the config can be done by users •Logo, colors, background image Template
  21. 21. Customizer Classes •/wp-admin/customize.php • /wp-includes/customize* • wp-admin/js/customize-* • wp-admin/css/customize-* • Your Theme Where are the files?
  22. 22. Customizer Framework •Options can be available based on context • core functionality is to display widget areas on current page • other widget areas displayed when user navigates to a page that uses them Context
  23. 23. Customizer API Object Oriented Panels Sections Controls Settings
  24. 24. Customizer API • Panels • Sections • Controls • Settings Object Oriented Panel Control Setting Control Setting Section Control Setting Control Setting Section
  25. 25. Transports refresh entire frame will refresh postMessage asynchronous request - page updated without reloading How WordPress Delivers Changes to Display Data
  27. 27. New Features in WordPress 4.7 • CSS Editor • Theme Switcher • Content Creation • Persistent Changes • Visual Edit Shortcuts Several Exciting Things
  28. 28. New Feature: CSS Editor •Not suitable for complex styling •No revisions •Styles are being overridden •CSS will only work on the current theme Edit CSS in Real Time
  29. 29. New Feature: Theme Switcher • Allows you to change and preview themes • Directly in the customizer Change themes with live preview
  30. 30. New Feature: Content Creation • Create Slugs for posts and pages directly in the Customizer • Editors can fully populate content later Create content directly from the Customizer
  31. 31. New Feature: Change sets • Changes stored without hitting save • Can be bookmarked, shared and revisited in the future Make changes persistent without saving
  32. 32. New Feature: Visual Edit Shortcuts • Customizer fields are highlighted and easy to identify Change content on page quickly
  33. 33. Configuration Makes it simple for users to customize their site
  34. 34. Give Users Options Customizer can give users more control
  35. 35. Thank you! @spicecadet edmund.turbin@wpengine.com
  36. 36. Learn More Theme Options - The Customizer API https://developer.wordpress.org/themes/advanced-topics/customizer-api/ A Guide to the WordPress Theme Customizer https://code.tutsplus.com/series/a-guide-to-the-wordpress-theme-customizer--wp-33722 A Preview of the Custom CSS Editor Added to the Customizer in WordPress 4.7 https://wptavern.com/a-preview-of-the-custom-css-editor-added-to-the-customizer-in-wordpress-4-7