{"id":782,"date":"2016-04-30T21:58:10","date_gmt":"2016-04-30T19:58:10","guid":{"rendered":"http:\/\/lamartinieredesign.fr\/?page_id=782"},"modified":"2018-04-05T18:45:55","modified_gmt":"2018-04-05T16:45:55","slug":"creer-un-theme-complet-part-5","status":"publish","type":"page","link":"https:\/\/lamartinieredesign.fr\/?page_id=782","title":{"rendered":"Cr\u00e9er un th\u00e8me complet &#8211; Part 5"},"content":{"rendered":"<p>Dans cette partie, je vous propose d&rsquo;aller plus loin en explorant quelques techniques de personnalisation d&rsquo;un th\u00e8me et du contenu.<\/p>\n<h4>La personnalisation des th\u00e8mes<\/h4>\n<p>Cela permet d&rsquo;inclure des r\u00e9glages personnalis\u00e9s pour l&rsquo;usage du th\u00e8me, directement dans le Dashboard.<br \/>\n<a href=\"https:\/\/codex.wordpress.org\/Theme_Customization_API\" target=\"_blank\" rel=\"noopener\">https:\/\/codex.wordpress.org\/Theme_Customization_API<\/a><a href=\"http:\/\/bargeo.fr\/blog\/2013\/11\/05\/comment-modifier-le-menu-personnaliser-de-votre-theme-wordpress\/\" target=\"_blank\" rel=\"noopener\"><\/p>\n<blockquote class=\"wp-embedded-content\" data-secret=\"2GNKOzpBYd\"><p><a href=\"https:\/\/bargeo.fr\/blog\/2013\/11\/05\/comment-modifier-le-menu-personnaliser-de-votre-theme-wordpress\/\">Comment modifier le menu \u00ab\u00a0Personnaliser\u00a0\u00bb de votre th\u00e8me WordPress<\/a><\/p><\/blockquote>\n<p><iframe class=\"wp-embedded-content\" sandbox=\"allow-scripts\" security=\"restricted\" style=\"position: absolute; clip: rect(1px, 1px, 1px, 1px);\" src=\"https:\/\/bargeo.fr\/blog\/2013\/11\/05\/comment-modifier-le-menu-personnaliser-de-votre-theme-wordpress\/embed\/#?secret=2GNKOzpBYd\" data-secret=\"2GNKOzpBYd\" width=\"474\" height=\"267\" title=\"\u00ab\u00a0Comment modifier le menu \u00ab\u00a0Personnaliser\u00a0\u00bb de votre th\u00e8me WordPress\u00a0\u00bb &#8212; Bargeo Cr\u00e9ation\" frameborder=\"0\" marginwidth=\"0\" marginheight=\"0\" scrolling=\"no\"><\/iframe><br \/>\n<\/a><a href=\"https:\/\/2014.wptech.fr\/session\/api-customizer\/\" target=\"_blank\" rel=\"noopener\">https:\/\/2014.wptech.fr\/session\/api-customizer\/<\/a><\/p>\n<p>Il existe d\u00e9j\u00e0 par d\u00e9faut des propositions de personnalisation, \u00e0 partir de Dashboard &gt; Apparence &gt; Personnaliser, mais il est possible d&rsquo;en ajouter d&rsquo;autres. Cela se fait dans le fichier functions.php, en plusieurs \u00e9tapes :<br \/>\n&#8211; cr\u00e9er la personnalisation<br \/>\n&#8211; ajouter une section dans l&rsquo;interface<br \/>\n&#8211; ajouter un r\u00e9glage<br \/>\n&#8211; ajouter un contr\u00f4le pour l&rsquo;utilisateur<br \/>\n&#8211; et enfin, appliquer l&rsquo;option de personnalisation au th\u00e8me<\/p>\n<p>Dans tous les cas, il faut commencer par cr\u00e9er une fonction qui va contenir l&rsquo;ajout de la section, du r\u00e9glage et du contr\u00f4le. Cette fonction, que nous choisirons d&rsquo;appeler <em>theme_customize_register<\/em> est li\u00e9e \u00e0 un argument qui est une variable PHP (comme toute variable PHP, son nom commence par le signe <em>$<\/em>) nomm\u00e9e <em>$wp_customize<\/em> :<br \/>\n<code>function theme_customize_register($wp_customize){}<\/code><\/p>\n<h4>Prenons l&rsquo;exemple de la personnalisation de l&rsquo;image d&rsquo;arri\u00e8re-plan de l&rsquo;en-t\u00eate.<\/h4>\n<p><strong>Ajouter la section, le r\u00e9glage et le contr\u00f4le<\/strong><\/p>\n<p>\u00c0 l&rsquo;int\u00e9rieur des accolades, on commence par d\u00e9clarer la section dans l&rsquo;interface (on ajoute litt\u00e9ralement une section \u00e0 notre variable par la commande <em>add_section<\/em>). Il faut choisir un identifiant ( ici <em>header_section<\/em>, \u00e0 adapter en fonction du contenu de la section), le nom qui sera visible dans l&rsquo;interface (ici, <em>En-t\u00eate de la page<\/em>) et une description. Ces param\u00e8tres sont d\u00e9clar\u00e9s dans un tableau (<em>array<\/em>) :<br \/>\n<code>$wp_customize-&gt;add_section('header_section', array(<\/code><br \/>\n<code>\u00a0\u00a0 \u00a0'title' =&gt; 'En-t\u00eate de la page',<\/code><br \/>\n<code>\u00a0\u00a0 \u00a0'description' =&gt; 'Personnalisation du header',<\/code><br \/>\n<code>\u00a0\u00a0 \u00a0'priority' =&gt; 200,<\/code><br \/>\n<code>));<\/code><\/p>\n<p>La valeur de la priorit\u00e9 d\u00e9termine la place de la section par rapport aux autres, la plus haute ayant le nombre le plus faible.<\/p>\n<p>Puis on ajoute un r\u00e9glage (<em>add_setting<\/em>) dont on doit \u00e9galement choisir le nom (<em>charge_image<\/em>) :<br \/>\n<code>$wp_customize-&gt;add_setting('charge_image');<\/code><\/p>\n<p>Enfin, on ajoute un contr\u00f4le (<em>add_control<\/em>). C&rsquo;est un peu plus compliqu\u00e9. Il faut choisir par une l\u00e9gende (<em>label<\/em>) le texte de l&rsquo;interface qui indique quoi faire (<em>Image d\\&rsquo;arri\u00e8re-plan : 960&#215;250 px<\/em>). Vous noterez l&rsquo;anti slash qui permet d&rsquo;interpr\u00e9ter correctement l&rsquo;apostrophe comme du texte et non comme du code. Le reste \u00e9tablit le lien avec la section et le r\u00e9glage :<br \/>\n<code>$wp_customize-&gt;add_control(new WP_Customize_Image_Control($wp_customize,'charge_image', array(<\/code><br \/>\n<code>\u00a0\u00a0 \u00a0'label' =&gt; 'Image d\\'arri\u00e8re-plan : 960x250 px',<\/code><br \/>\n<code>\u00a0\u00a0 \u00a0'section' =&gt; 'header_section',<\/code><br \/>\n<code>\u00a0\u00a0 \u00a0'settings' =&gt; 'charge_image'<\/code><br \/>\n<code>\u00a0\u00a0 \u00a0)<\/code><br \/>\n<code>));<\/code><\/p>\n<p>Il reste \u00e0 faire suivre la fonction de la ligne suivante, ce qui permet \u00e0 WordPress d&rsquo;ajouter automatiquement le code n\u00e9cessaire dans les fichiers php :<br \/>\n<code>add_action('customize_register', 'theme_customize_register');<\/code><\/p>\n<p><strong>Ajouter les r\u00e8gles CSS<br \/>\n<\/strong><\/p>\n<p>La derni\u00e8re phase consiste \u00e0 g\u00e9n\u00e9rer les r\u00e8gles css n\u00e9cessaires \u00e0 l&rsquo;affichage de l&rsquo;image (ou \u00e0 l&rsquo;application des options) sur les pages. Il faut bien faire attention \u00e0 reprendre ici les s\u00e9lecteurs adapt\u00e9s, \u00e0 partir de votre code CSS ( ou \u00e0 voir dans le code PHP des templates concern\u00e9s).<\/p>\n<p>On cr\u00e9e donc une nouvelle fonction nomm\u00e9e theme_customize_css, dont voici le code complet :<br \/>\n<code>function theme_customize_css() {<\/code><br \/>\n<code>\u00a0 ?&gt;<\/code><br \/>\n<code>\u00a0\u00a0\u00a0 &lt;style type=\"text\/css\"&gt;<\/code><br \/>\n<code>\u00a0\u00a0\u00a0\u00a0\u00a0 #wrap header{<\/code><br \/>\n<code>\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0 background-image: url(&lt;?php echo get_theme_mod('charge_image','none'); ?&gt;);<\/code><br \/>\n<code>\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0 height: &lt;?php if(get_theme_mod('charge_image')!=='') { echo '250px' ; } else { echo 'auto' ; } ?&gt;;<\/code><br \/>\n<code>\u00a0\u00a0\u00a0\u00a0\u00a0 }<\/code><br \/>\n<code>\u00a0\u00a0\u00a0 &lt;\/style&gt;<\/code><br \/>\n<code>\u00a0 &lt;?php<\/code><br \/>\n<code>}<\/code><br \/>\n<code>add_action( 'wp_head', 'theme_customize_css');<\/code><\/p>\n<p>&nbsp;<\/p>\n<p>&nbsp;<\/p>\n<p>&nbsp;<\/p>\n<p>&nbsp;<\/p>\n<p>&nbsp;<\/p>\n","protected":false},"excerpt":{"rendered":"<p>Dans cette partie, je vous propose d&rsquo;aller plus loin en explorant quelques techniques de personnalisation d&rsquo;un th\u00e8me et du contenu. La personnalisation des th\u00e8mes Cela permet d&rsquo;inclure des r\u00e9glages personnalis\u00e9s pour l&rsquo;usage du th\u00e8me, directement dans le Dashboard. https:\/\/codex.wordpress.org\/Theme_Customization_API Comment modifier le menu \u00ab\u00a0Personnaliser\u00a0\u00bb de votre th\u00e8me WordPress https:\/\/2014.wptech.fr\/session\/api-customizer\/ Il existe d\u00e9j\u00e0 par d\u00e9faut des &hellip; <a href=\"https:\/\/lamartinieredesign.fr\/?page_id=782\" class=\"more-link\">Continuer la lecture de <span class=\"screen-reader-text\">Cr\u00e9er un th\u00e8me complet &#8211; Part 5<\/span>  <span class=\"meta-nav\">&rarr;<\/span><\/a><\/p>\n","protected":false},"author":1,"featured_media":0,"parent":635,"menu_order":0,"comment_status":"closed","ping_status":"closed","template":"","meta":{"_lmt_disableupdate":"","_lmt_disable":"","footnotes":""},"_links":{"self":[{"href":"https:\/\/lamartinieredesign.fr\/index.php?rest_route=\/wp\/v2\/pages\/782"}],"collection":[{"href":"https:\/\/lamartinieredesign.fr\/index.php?rest_route=\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/lamartinieredesign.fr\/index.php?rest_route=\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/lamartinieredesign.fr\/index.php?rest_route=\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/lamartinieredesign.fr\/index.php?rest_route=%2Fwp%2Fv2%2Fcomments&post=782"}],"version-history":[{"count":11,"href":"https:\/\/lamartinieredesign.fr\/index.php?rest_route=\/wp\/v2\/pages\/782\/revisions"}],"predecessor-version":[{"id":1162,"href":"https:\/\/lamartinieredesign.fr\/index.php?rest_route=\/wp\/v2\/pages\/782\/revisions\/1162"}],"up":[{"embeddable":true,"href":"https:\/\/lamartinieredesign.fr\/index.php?rest_route=\/wp\/v2\/pages\/635"}],"wp:attachment":[{"href":"https:\/\/lamartinieredesign.fr\/index.php?rest_route=%2Fwp%2Fv2%2Fmedia&parent=782"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}