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/

1. Crea un tema compatibile
con le ultime novità
WordPress

2. Attento a queste
icone ;-)

3. skillsandmore.org/wctrn-theme
mentor - developer - writer
Chi sono e cosa faccio

4. Chi sono e cosa faccio
skillsandmore.org/wordpress-inbound-marketing

5. facciamo conoscere il
brand
I loghi

7. //Agganciati ad after_setup_theme
add_theme_support( 'custom-logo' );
Aggiungi il supporto

8. Aspetta...
C’è molto di più da
poter configurare!

9. $custom_logo = array(
'height' => 100,
'width' => 360,
'flex-height' => true,
'flex-width' => true,
);
add_theme_support( 'custom-logo', $custom_logo );

10. $custom_logo = array(
'height' => 100,
'width' => 360,
'flex-height' => true,
'flex-width' => true,
);

11. figata!
I custom header
sono una

12. add_theme_support(
'custom-header',
$defaults
);

13. $defaults = array(
'default-image' => 'path'
'header-text' => false,
'default-text-color' => '000',
'width' => 1000,
'height' => 198,
'random-default' => false,
'uploads' => false,
);

14. Puoi creare un
Header
Responsive

15. $defaults = array(
'flex-height' => false,
'flex-width' => false,
);

16. le immagini da usare
Suggerisci

17. $header = array(
'default-image' => array(
'url' => '%s/path/img.jpg',
'thumbnail_url' => '%s/path/img.jpg',
'description' => 'Immagine',
),
);
register_default_headers( $header );

18. $header = array(
'default-image' => array(
'url' => '%s/path/img.jpg',
'thumbnail_url' => '%s/path/img.jpg',
'description' => 'Immagine',
),
);
register_default_headers( $header );

19. $header = array(
'background' => array( … ),
'maglietta' => array( … ),
'scarpe' => array( … ),
);
register_default_headers( $header );

20. Attenzione ai percorsi!
Child theme?

21. $header = array(
'default-image' => array(
'url' => '%2$s/path/img.jpg',
'thumbnail_url' => '%2$s/path/img.jpg',
'description' => 'Immagine',
),
);
register_default_headers( $header );

22. Ora puoi
inserire video!

23. $defaults = array(
'default-image' => 'path'
'width' => 1000,
'height' => 198,
'flex-height' => true,
'flex-width' => true,
'video' => true
);

24. Come inserire i
Custom Header
nel tema?

25. //header.php
if ( get_header_image() ) {
the_custom_header_markup();
}

26. Ricordi come funziona la
Gerarchia
WordPress?

28. get_template_part( $slug, $name );

29. get_template_part( 'loop', 'index' );

30. 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

31. Come fare la stessa cosa per
JS, CSS e
immagini?

32. //Directory Tema Genitore
get_template_directory() . 'path';

33. //Directory Tema Figlio
get_stylesheet_directory() . 'path';

34. Perché era un
problema?

35. //Rimuovo script genitore
wp-dequeue-script( $handle );
//Aggiungo script figlio
wp-enqueue-script( $handle );

36. to the rescue!
Version 4.7

37. get_theme_file_uri( '/js/script.js' ),

38. get_theme_file_uri( '/js/script.js' ),
wp-content/themes/child/js/script.js
wp-content/themes/parent/js/script.js

39. i file da sovrascrivere
Limitare

40. get_parent_theme_file_uri('path');

41. //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' );

42. per modificare la gerarchia
Nuovo filtro

43. {$type}_template_hierarchy
//Valori possibili
404_template_hierarchy
category_template_hierarchy
author_template_hierarchy

44. add_filter(
'date_template_hierarchy',
function( array $templates ) {
$year = get_query_var( 'year' );
array_unshift(
$templates,
"year-{$year}.php"
);
return $templates;
} );

45. add_filter(
'date_template_hierarchy',
function( $templates ) {
$year = get_query_var( 'year' );
array_unshift(
$templates,
"year-{$year}.php"
);
return $templates;
} );

46. add_filter(
'date_template_hierarchy',
function( $templates ) {
$year = get_query_var( 'year' );
array_unshift(
$templates,
"year-{$year}.php"
);
return $templates;
} );

47. Personalizza la struttura
Post Template

48. <?php
/*
Template Name: Esempio di Post Template
*/
// Personalizza la struttura

49. <?php
/*
Template Name: Esempio di Post Template
Template Post Type: post, page, product
*/
// Personalizza la struttura

50. Rendiamolo retro
Compatibile

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. //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' );

53. //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' );

54. Preparare contenuto di
Esempio

56. add_theme_support( 'starter-content' );

57. $sc = array(
//Configurazione Starter Content
);
add_theme_support( 'starter_content', $sc );

58. $sc = array(
'widgets' => array( … ),
'posts' => array( … ),
'attachments' => array( … ),
'nav_menus' => array( … ),
'options' => array( … ),
'theme_mod' => array( … )
);

59. $sc = array(
'widgets' => array( … ),
'posts' => array( … ),
'attachments' => array( … ),
'nav_menus' => array( … ),
'options' => array( … ),
'theme_mod' => array( … )
);

60. $sc = array(
'widgets' => array(
'sidebar-1' => array(
'text_business_info',
'my_text' => array(
'title' => 'Ciao Torino!!!',
'text' => 'WordCamp'
)
)
)
);

61. $sc = array(
'widgets' => array( … ),
'posts' => array( … ),
'attachments' => array( … ),
'nav_menus' => array( … ),
'options' => array( … ),
'theme_mod' => array( … )
);

62. $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',
)
)
);

63. $sc = array(
'widgets' => array( … ),
'posts' => array( … ),
'attachments' => array( … ),
'nav_menus' => array( … ),
'options' => array( … ),
'theme_mod' => array( … )
);

64. $sc = array(
'attachments' => array(
'image-wctrn' => array(
'post_title' => 'WordCamp Torino',
'file' => 'images/wctrn-image.jpg'
)
)
);

65. $sc = array(
'attachments' => array(
'image-wctrn' => array(
'post_title' => 'WordCamp Torino',
'file' => 'images/wctrn-image.jpg'
)
)
);
'thumbnail' => '{{image-wctrn}}'

66. $sc = array(
'attachments' => array(
'image-wctrn' => array(
'post_title' => 'WordCamp Torino',
'file' => 'images/wctrn-image.jpg'
)
)
);

67. $sc = array(
'widgets' => array( … ),
'posts' => array( … ),
'attachments' => array( … ),
'nav_menus' => array( … ),
'options' => array( … ),
'theme_mod' => array( … )
);

68. $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'
)
)
);

69. $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' )

70. Ed è arrivato
il Customizer

72. 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' );

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. $wp_customize->add_section( 'id_sezione', array(
'title' => 'Titolo sezione',
'description' => 'Descrizione sezione',
'priority' => 160,
'capability' => 'edit_theme_options',
) );

75. 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' );

76. $wp_customize->add_setting( 'id impostazione', array(
'type' => 'theme_mod',
'capability' => 'edit_theme_options',
'default' => '',
'transport' => 'refresh',
'sanitize_callback' => '',
) );

77. 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' );

78. $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',
),
) );

79. $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'

80. Scorciatoie per la
Personalizzazione

82. $wp_customize->get_setting()->transport = 'postMessage';
$wp_customize
->get_setting( 'blogname' )
->transport = 'postMessage';

83. $wp_customize->selective_refresh->add_partial()
$wp_customize
->selective_refresh
->add_partial(
'blogname',
array(
'selector' => '.site-title a',
'render_callback' => 'wctrn_atcpb',
)
);

84. function wctrn_atcpb(){
bloginfo('name');
}

85. Grazie per gli
Applausi!

86. Ricorda di aggiungere
la stella ;)
https://skillsandmore.org/wctrn-theme