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.

Crea un tema compatibile con le ultime novità WordPress

2.532 Aufrufe

Veröffentlicht am

Presentazione rilasciata al WordCamp Torino 2017 all'interno della quale vengono presentate le novità per creare un tema WordPress e migliorare il nostro lavoro da sviluppatori.

Trovi tutte le informazioni necessarie a questo indirizzo: https://skillsandmore.org/corso/crea-il-tuo-primo-tema-wordpress/

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

  • Gehören Sie zu den Ersten, denen das gefällt!

Crea un tema compatibile con le ultime novità WordPress

  1. 1. Crea un tema compatibile con le ultime novità WordPress
  2. 2. Attento a queste icone ;-)
  3. 3. skillsandmore.org/wctrn-theme mentor - developer - writer Chi sono e cosa faccio
  4. 4. Chi sono e cosa faccio skillsandmore.org/wordpress-inbound-marketing
  5. 5. facciamo conoscere il brand I loghi
  6. 6. //Agganciati ad after_setup_theme add_theme_support( 'custom-logo' ); Aggiungi il supporto
  7. 7. Aspetta... C’è molto di più da poter configurare!
  8. 8. $custom_logo = array( 'height' => 100, 'width' => 360, 'flex-height' => true, 'flex-width' => true, ); add_theme_support( 'custom-logo', $custom_logo );
  9. 9. $custom_logo = array( 'height' => 100, 'width' => 360, 'flex-height' => true, 'flex-width' => true, );
  10. 10. figata! I custom header sono una
  11. 11. add_theme_support( 'custom-header', $defaults );
  12. 12. $defaults = array( 'default-image' => 'path' 'header-text' => false, 'default-text-color' => '000', 'width' => 1000, 'height' => 198, 'random-default' => false, 'uploads' => false, );
  13. 13. Puoi creare un Header Responsive
  14. 14. $defaults = array( 'flex-height' => false, 'flex-width' => false, );
  15. 15. le immagini da usare Suggerisci
  16. 16. $header = array( 'default-image' => array( 'url' => '%s/path/img.jpg', 'thumbnail_url' => '%s/path/img.jpg', 'description' => 'Immagine', ), ); register_default_headers( $header );
  17. 17. $header = array( 'default-image' => array( 'url' => '%s/path/img.jpg', 'thumbnail_url' => '%s/path/img.jpg', 'description' => 'Immagine', ), ); register_default_headers( $header );
  18. 18. $header = array( 'background' => array( … ), 'maglietta' => array( … ), 'scarpe' => array( … ), ); register_default_headers( $header );
  19. 19. Attenzione ai percorsi! Child theme?
  20. 20. $header = array( 'default-image' => array( 'url' => '%2$s/path/img.jpg', 'thumbnail_url' => '%2$s/path/img.jpg', 'description' => 'Immagine', ), ); register_default_headers( $header );
  21. 21. Ora puoi inserire video!
  22. 22. $defaults = array( 'default-image' => 'path' 'width' => 1000, 'height' => 198, 'flex-height' => true, 'flex-width' => true, 'video' => true );
  23. 23. Come inserire i Custom Header nel tema?
  24. 24. //header.php if ( get_header_image() ) { the_custom_header_markup(); }
  25. 25. Ricordi come funziona la Gerarchia WordPress?
  26. 26. get_template_part( $slug, $name );
  27. 27. get_template_part( 'loop', 'index' );
  28. 28. get_template_part( 'loop', 'index' ); wp-content/themes/child/loop-index.php wp-content/themes/parent/loop-index.php wp-content/themes/child/loop.php wp-content/themes/parent/loop.php
  29. 29. Come fare la stessa cosa per JS, CSS e immagini?
  30. 30. //Directory Tema Genitore get_template_directory() . 'path';
  31. 31. //Directory Tema Figlio get_stylesheet_directory() . 'path';
  32. 32. Perché era un problema?
  33. 33. //Rimuovo script genitore wp-dequeue-script( $handle ); //Aggiungo script figlio wp-enqueue-script( $handle );
  34. 34. to the rescue! Version 4.7
  35. 35. get_theme_file_uri( '/js/script.js' ),
  36. 36. get_theme_file_uri( '/js/script.js' ), wp-content/themes/child/js/script.js wp-content/themes/parent/js/script.js
  37. 37. i file da sovrascrivere Limitare
  38. 38. get_parent_theme_file_uri('path');
  39. 39. //Ottengo la URL get_theme_file_uri( 'path' ); get_parent_theme_file_uri( 'path' ); //Ottengo il percorso al file get_theme_file_path( 'path' ); get_parent_theme_file_path( 'path' );
  40. 40. per modificare la gerarchia Nuovo filtro
  41. 41. {$type}_template_hierarchy //Valori possibili 404_template_hierarchy category_template_hierarchy author_template_hierarchy
  42. 42. add_filter( 'date_template_hierarchy', function( array $templates ) { $year = get_query_var( 'year' ); array_unshift( $templates, "year-{$year}.php" ); return $templates; } );
  43. 43. add_filter( 'date_template_hierarchy', function( $templates ) { $year = get_query_var( 'year' ); array_unshift( $templates, "year-{$year}.php" ); return $templates; } );
  44. 44. add_filter( 'date_template_hierarchy', function( $templates ) { $year = get_query_var( 'year' ); array_unshift( $templates, "year-{$year}.php" ); return $templates; } );
  45. 45. Personalizza la struttura Post Template
  46. 46. <?php /* Template Name: Esempio di Post Template */ // Personalizza la struttura
  47. 47. <?php /* Template Name: Esempio di Post Template Template Post Type: post, page, product */ // Personalizza la struttura
  48. 48. Rendiamolo retro Compatibile
  49. 49. //Check code in examples/post-template.php!!! function wctrn_exclude_pt( $pt ) { if ( version_compare( $wp_version, '4.7', '<' ) ){ unset( $pt['path/pt.php'] ); } return $pt; } add_filter( 'theme_page_templates', 'wctrn_exclude_pt' );
  50. 50. //Check code in examples/post-template.php!!! function wctrn_exclude_pt( $pt ) { if ( version_compare( $wp_version, '4.7', '<' ) ){ unset( $pt['path/pt.php'] ); } return $pt; } add_filter( 'theme_page_templates', 'wctrn_exclude_pt' );
  51. 51. //Check code in examples/post-template.php!!! function wctrn_exclude_pt( $pt ) { if ( version_compare( $wp_version, '4.7', '<' ) ){ unset( $pt['path/pt.php'] ); } return $pt; } add_filter( 'theme_page_templates', 'wctrn_exclude_pt' );
  52. 52. Preparare contenuto di Esempio
  53. 53. add_theme_support( 'starter-content' );
  54. 54. $sc = array( //Configurazione Starter Content ); add_theme_support( 'starter_content', $sc );
  55. 55. $sc = array( 'widgets' => array( … ), 'posts' => array( … ), 'attachments' => array( … ), 'nav_menus' => array( … ), 'options' => array( … ), 'theme_mod' => array( … ) );
  56. 56. $sc = array( 'widgets' => array( … ), 'posts' => array( … ), 'attachments' => array( … ), 'nav_menus' => array( … ), 'options' => array( … ), 'theme_mod' => array( … ) );
  57. 57. $sc = array( 'widgets' => array( 'sidebar-1' => array( 'text_business_info', 'my_text' => array( 'title' => 'Ciao Torino!!!', 'text' => 'WordCamp' ) ) ) );
  58. 58. $sc = array( 'widgets' => array( … ), 'posts' => array( … ), 'attachments' => array( … ), 'nav_menus' => array( … ), 'options' => array( … ), 'theme_mod' => array( … ) );
  59. 59. $sc = array( 'posts' => array( 'home', 'wctrn' => array( 'post_type' => 'page', 'post_title' => '#wctrn 2017', 'post_content' => 'Is Back!', 'thumbnail' => '{{image-wctrn}}', 'template' => 'wctrn-pt.php', ) ) );
  60. 60. $sc = array( 'widgets' => array( … ), 'posts' => array( … ), 'attachments' => array( … ), 'nav_menus' => array( … ), 'options' => array( … ), 'theme_mod' => array( … ) );
  61. 61. $sc = array( 'attachments' => array( 'image-wctrn' => array( 'post_title' => 'WordCamp Torino', 'file' => 'images/wctrn-image.jpg' ) ) );
  62. 62. $sc = array( 'attachments' => array( 'image-wctrn' => array( 'post_title' => 'WordCamp Torino', 'file' => 'images/wctrn-image.jpg' ) ) ); 'thumbnail' => '{{image-wctrn}}'
  63. 63. $sc = array( 'attachments' => array( 'image-wctrn' => array( 'post_title' => 'WordCamp Torino', 'file' => 'images/wctrn-image.jpg' ) ) );
  64. 64. $sc = array( 'widgets' => array( … ), 'posts' => array( … ), 'attachments' => array( … ), 'nav_menus' => array( … ), 'options' => array( … ), 'theme_mod' => array( … ) );
  65. 65. $sc = array( 'nav_menus' => array( 'page_home' => array( 'type' => 'post_type', 'object' => 'page', 'object_id' => '{{home}}' ), 'link_sam' => array( 'title' => 'SkillsAndMore', 'url' => 'https://skillsandmore.org' ) ) );
  66. 66. $sc = array( 'nav_menus' => array( 'page_home' => array( 'type' => 'post_type', 'object' => 'page', 'object_id' => '{{home}}' ), 'link_sam' => array( 'title' => 'SkillsAndMore', 'url' => 'https://skillsandmore.org' ) ) ); 'posts' => array( 'home' )
  67. 67. Ed è arrivato il Customizer
  68. 68. function wctrn_customize_register( $wp_customize ) { $wp_customize->add_panel(); $wp_customize->add_section(); $wp_customize->add_setting(); $wp_customize->add_control(); } add_action( 'customize_register', 'wctrn_customize_register' );
  69. 69. function wctrn_customize_register( $wp_customize ) { $wp_customize->add_panel(); $wp_customize->add_section(); $wp_customize->add_setting(); $wp_customize->add_control(); } add_action( 'customize_register', 'wctrn_customize_register' );
  70. 70. $wp_customize->add_section( 'id_sezione', array( 'title' => 'Titolo sezione', 'description' => 'Descrizione sezione', 'priority' => 160, 'capability' => 'edit_theme_options', ) );
  71. 71. function wctrn_customize_register( $wp_customize ) { $wp_customize->add_panel(); $wp_customize->add_section(); $wp_customize->add_setting(); $wp_customize->add_control(); } add_action( 'customize_register', 'wctrn_customize_register' );
  72. 72. $wp_customize->add_setting( 'id impostazione', array( 'type' => 'theme_mod', 'capability' => 'edit_theme_options', 'default' => '', 'transport' => 'refresh', 'sanitize_callback' => '', ) );
  73. 73. function wctrn_customize_register( $wp_customize ) { $wp_customize->add_panel(); $wp_customize->add_section(); $wp_customize->add_setting(); $wp_customize->add_control(); } add_action( 'customize_register', 'wctrn_customize_register' );
  74. 74. $wp_customize->add_control( 'id_impostazione', array( 'type' => 'date', 'priority' => 10, 'section' => 'id_sezione', 'label' => 'Titolo', 'description' => 'Descrizione controllo', 'input_attrs' => array( 'class' => 'my-custom-class-for-js', 'style' => 'border: 1px solid #900', ), ) );
  75. 75. $wp_customize->add_control( 'id_impostazione', array( 'type' => 'date', 'priority' => 10, 'section' => 'id_sezione', 'label' => 'Titolo', 'description' => 'Descrizione controllo', 'input_attrs' => array( 'class' => 'my-custom-class-for-js', 'style' => 'border: 1px solid #900', ), ) ); ->add_section( 'id_sezione'
  76. 76. Scorciatoie per la Personalizzazione
  77. 77. $wp_customize->get_setting()->transport = 'postMessage'; $wp_customize ->get_setting( 'blogname' ) ->transport = 'postMessage';
  78. 78. $wp_customize->selective_refresh->add_partial() $wp_customize ->selective_refresh ->add_partial( 'blogname', array( 'selector' => '.site-title a', 'render_callback' => 'wctrn_atcpb', ) );
  79. 79. function wctrn_atcpb(){ bloginfo('name'); }
  80. 80. Grazie per gli Applausi!
  81. 81. Ricorda di aggiungere la stella ;) https://skillsandmore.org/wctrn-theme

×