{"id":704,"date":"2016-04-06T23:10:39","date_gmt":"2016-04-06T21:10:39","guid":{"rendered":"http:\/\/lamartinieredesign.fr\/?page_id=704"},"modified":"2018-04-05T15:38:42","modified_gmt":"2018-04-05T13:38:42","slug":"creer-un-theme-complet-part-2","status":"publish","type":"page","link":"https:\/\/lamartinieredesign.fr\/?page_id=704","title":{"rendered":"Cr\u00e9er un th\u00e8me complet &#8211; part 2"},"content":{"rendered":"<h4>Le fichier header.php<\/h4>\n<p>Il sera int\u00e9gr\u00e9 au d\u00e9but de chaque fichier de contenu, par un \u00ab\u00a0include\u00a0\u00bb PHP. Il en sera de m\u00eame pour les fichiers footer.php et sidebar.php.<\/p>\n<p>Le fichier header.php reprend la structure du d\u00e9but du code HTML, jusqu&rsquo;\u00e0 l&rsquo;ouverture de la <em>&lt;section&gt;<\/em> y compris. Voici pour m\u00e9moire le code HTML \u00e0 adapter en PHP :<\/p>\n<p>[pcsh lang=\u00a0\u00bbxml\u00a0\u00bb tab_size=\u00a0\u00bb4&Prime; message=\u00a0\u00bb\u00a0\u00bb hl_lines=\u00a0\u00bb\u00a0\u00bb provider=\u00a0\u00bbmanual\u00a0\u00bb]<\/p>\n<pre><code>&lt;!DOCTYPE html&gt;\r\n&lt;html&gt;\r\n\t&lt;head&gt;\r\n\t\t&lt;meta charset=&#34;utf-8&#34;&gt;\r\n\t\t&lt;meta name=&#34;viewport&#34; content=&#34;width=device-width, initial-scale=1&#34;&gt;\r\n\t\t&lt;title&gt;Titre du site&lt;\/title&gt;\r\n\t\t&lt;link rel=&#34;stylesheet&#34; href=&#34;style.css&#34;&gt;\r\n\t&lt;\/head&gt;\r\n\r\n\t&lt;body&gt;\r\n\t\t&lt;div id=&#34;wrapper&#34;&gt;\r\n\t\t\t&lt;header id=&#34;en-tete&#34;&gt;\r\n\t\t\t\t&lt;img src=&#34;images\/logo.png&#34; alt=&#34;logo&#34;&gt;\r\n\t\t\t\t&lt;h1&gt;Nom du site&lt;\/h1&gt;\r\n\t\t\t\t&lt;h2&gt;Slogan&lt;\/h2&gt;\r\n\t\t\t\t&lt;nav class=&#34;menu_principal&#34;&gt;\r\n\t\t\t\t\t&lt;!-- ici le menu en html --&gt;\r\n\t\t\t\t&lt;\/nav&gt;\r\n\t\t\t&lt;\/header&gt;\r\n\t\t\t\r\n\t\t\t&lt;section id=&#34;projets&#34;&gt;<\/code><\/pre>\n<p>[\/pcsh]<\/p>\n<p>On va y remplacer tout ce qui doit devenir dynamique par des fonctions WordPress. Chaque fonction s&rsquo;\u00e9crit dans une syntaxe PHP, c&rsquo;est-\u00e0-dire encadr\u00e9e par la balise PHP \u00e0 l&rsquo;int\u00e9rieur de laquelle se trouve la fonction elle-m\u00eame, par exemple pour le titre du site :<br \/>\n<code>&lt;?php\u00a0bloginfo('name'); ?&gt;<br \/>\n<\/code>Ne pas oublier le point virgule \u00e0 la fin de la fonction. Voyons \u00e0 pr\u00e9sent le d\u00e9tail des fonctions WordPress \u00e0 utiliser ici. N&rsquo;h\u00e9sitez pas \u00e0 comparer le code PHP et le code HTML g\u00e9n\u00e9r\u00e9 en affichant le code source de votre page sur WordPress.<\/p>\n<p><strong>Pour la partie &lt;head&gt; :<\/strong><\/p>\n<p>Voici le code PHP correspondant au d\u00e9but et \u00e0 la partie <em>&lt;head&gt;<\/em> :<\/p>\n<p>[pcsh lang=\u00a0\u00bbxml\u00a0\u00bb tab_size=\u00a0\u00bb4&Prime; message=\u00a0\u00bb\u00a0\u00bb hl_lines=\u00a0\u00bb\u00a0\u00bb provider=\u00a0\u00bbmanual\u00a0\u00bb]<\/p>\n<pre><code>&lt;!DOCTYPE html&gt;\r\n&lt;html &lt;?php language_attributes(); ?&gt;&gt;\r\n\r\n\t&lt;head&gt;\r\n\t\t&lt;meta charset=&#34;&lt;?php bloginfo( &#039;charset&#039; ); ?&gt;&#34;&gt;\r\n\r\n\t\t&lt;meta name=&#34;viewport&#34; content=&#34;width=device-width, initial-scale=1&#34;&gt;\r\n\t\t&lt;link rel=&#34;profile&#34; href=&#34;http:\/\/gmpg.org\/xfn\/11&#34;&gt;\r\n\t\t&lt;link rel=&#34;pingback&#34; href=&#34;&lt;?php bloginfo( &#039;pingback_url&#039; ); ?&gt;&#34; \/&gt;\r\n\t\t\r\n\t\t&lt;title&gt;\r\n\t\t\t&lt;?php bloginfo( &#039;name&#039; ); ?&gt;\r\n\t\t\t&lt;?php if (is_home() || is_front_page()) : ?&gt;\r\n\t\t\t\t&amp;mdash; &lt;?php bloginfo( &#039;description&#039; ); ?&gt;\r\n\t\t\t&lt;?php else : ?&gt;\r\n\t\t\t\t&amp;mdash; &lt;?php wp_title( &#34;&#34;, true ); ?&gt;\r\n\t\t\t&lt;?php endif; ?&gt;\r\n\t\t&lt;\/title&gt;\r\n\t\t\r\n\t\t&lt;link rel=&#34;stylesheet&#34; href=&#34;&lt;?php bloginfo(&#039;stylesheet_url&#039;); ?&gt;&#34; type=&#34;text\/css&#34; \/&gt;\r\n\t\t\r\n\t\t&lt;link rel=&#34;shortcut icon&#34; href=&#34;&lt;?php echo get_template_directory_uri(); ?&gt;\/images\/engin.png&#34; type=&#34;image\/x-icon&#34; \/&gt;\r\n\t\t\r\n\t\t&lt;?php wp_head(); ?&gt;\r\n\t&lt;\/head&gt;<\/code><\/pre>\n<p>[\/pcsh]<\/p>\n<ol>\n<li>Ligne 1, le <em>DOCTYPE<\/em> est inchang\u00e9.<\/li>\n<li>Ligne 2, la balise <em>&lt;html&gt;<\/em> re\u00e7oit un attribut de langue et s&rsquo;\u00e9crit :<br \/>\n<code>&lt;html &lt;?php language_attributes() ; ?&gt;<\/code><\/li>\n<li>Ligne 5, le jeu de caract\u00e8re devient :<br \/>\n<code>&lt;meta charset=\"&lt;?php bloginfo( 'charset' ) ; ?&gt;\"&gt;<\/code><br \/>\nIl est \u00e0 noter ici que le code PHP se place \u00e0 l&rsquo;int\u00e9rieur des guillemets.<\/li>\n<li>Ligne 7, la ligne pour le viewport est inchang\u00e9e. On y ajoute cependant, ce qu&rsquo;on aurait pu faire en HTML :<br \/>\n<code class=\"php plain\">&lt;link rel=<\/code><code class=\"php string\">\"profile\"<\/code> <code class=\"php plain\">href=<\/code><code class=\"php string\">\"<a href=\"http:\/\/gmpg.org\/xfn\/11\">http:\/\/gmpg.org\/xfn\/11<\/a>\"<\/code><code class=\"php plain\">&gt;<br \/>\n<\/code>L&rsquo;ensemble sert \u00e0 l&rsquo;affichage correct d&rsquo;un site responsive. Ce n&rsquo;est donc utile que dans ce cas-l\u00e0.<\/li>\n<li>Ligne 9, on ajoute une instruction servant \u00e0 la gestion des r\u00e9troliens (<em>pingback<\/em>), afin d&rsquo;am\u00e9liorer votre indexation, qui rep\u00e8re les liens d&rsquo;autres sites vers le v\u00f4tre :<br \/>\n<code class=\"php plain\">&lt;link rel=<\/code><code class=\"php string\">\"pingback\"<\/code> <code class=\"php plain\">href=<\/code><code class=\"php string\">\"&lt;?php bloginfo( 'pingback_url' ); ?&gt;\"<\/code> <code class=\"php plain\">\/&gt;<\/code><\/li>\n<li>Lignes 11 \u00e0 18, dans la balise <em>&lt;title&gt;<\/em> le titre est remplac\u00e9 par<br \/>\n<code>&lt;?php bloginfo('name') ; ?&gt;<br \/>\n<\/code>ensuite, lignes 13 \u00e0 17, il est possible d&rsquo;ajouter une condition pour ajouter au titre, le slogan sur la page d&rsquo;accueil, le nom de la page ou de l&rsquo;article affich\u00e9 sur les autres pages. L&rsquo;instruction de titre <em>bloginfo(&lsquo;name&rsquo;);<\/em> peut cependant suffire.<\/li>\n<li>Ligne 20, le lien vers la feuille de style se fait par la fonction de l&rsquo;URL de la feuille de style selon WordPress \u00e0 placer entre les guillemets du <em>href<\/em> :<br \/>\n<code>&lt;link rel=\"stylesheet\" href=\"&lt;?php bloginfo('stylesheet_url') ; ?&gt;\" <code class=\"php plain\">type=<\/code><code class=\"php string\">\"text\/css\"<\/code> \/&gt;<\/code><\/li>\n<li>Ligne 22, on sugg\u00e8re d&rsquo;ajouter un favicon, si WordPress ne le propose pas dans le Dashboard &gt; Apparence &gt; Personnaliser &gt; Identit\u00e9 du site &gt; ic\u00f4ne du site. Une image pour le favicon, au format .png ou .ico de 32 pixels de c\u00f4t\u00e9, sera plac\u00e9e dans un dossier <em>images<\/em> \u00e0 cr\u00e9er au premier niveau du th\u00e8me. Le code n\u00e9cessaire est le suivant en adaptant le nom et \u00e9ventuellement le chemin de l&rsquo;image :<br \/>\n<code class=\"php plain\">&lt;link rel=<\/code><code class=\"php string\">\"shortcut icon\"<\/code> <code class=\"php plain\">href=<\/code><code class=\"php string\">\"&lt;?php echo get_template_directory_uri(); ?&gt;\/images\/engin.png\"<\/code> <code class=\"php plain\">type=<\/code><code class=\"php string\">\"image\/x-icon\"<\/code> <code class=\"php plain\">\/&gt;<\/code><br \/>\n<code><\/code><\/li>\n<li>Ligne 24 enfin, le code suivant doit obligatoirement \u00eatre ajout\u00e9 avant la fermeture de la balise <em>&lt;\/head&gt;<\/em> afin de permettre aux extensions d&rsquo;ins\u00e9rer du code \u00e0 cet endroit :<br \/>\n<code>&lt;?php wp_head() ; ?&gt;<\/code><\/li>\n<li>Ligne 23, il est possible d&rsquo;ajouter des liens vers d&rsquo;autres fichiers CSS ou des fichiers JS.<\/li>\n<\/ol>\n<p><strong>Pour la partie &lt;body&gt; :<\/strong><\/p>\n<p>Voici le code PHP correspondant \u00e0 la partie <em>&lt;body&gt;<\/em> :<\/p>\n<p>[pcsh lang=\u00a0\u00bbxml\u00a0\u00bb tab_size=\u00a0\u00bb4&Prime; message=\u00a0\u00bb\u00a0\u00bb hl_lines=\u00a0\u00bb\u00a0\u00bb provider=\u00a0\u00bbmanual\u00a0\u00bb]<\/p>\n<pre><code>&lt;body &lt;?php body_class(); ?&gt;&gt;\r\n\r\n\t\t&lt;div id=&#34;wrapper&#34;&gt;\r\n\r\n\t\t\t&lt;header id=&#34;en_tete&#34;&gt;\r\n\r\n\t\t\t\t&lt;img src=&#34;&lt;?php echo( get_header_image() ); ?&gt;&#34; alt=&#34;image d&#039;en-t\u00eate, chantier&#34; class=&#34;header_image&#34;\/&gt; \r\n\t\t\t\t&lt;h1&gt;&lt;a href=&#34;&lt;?php bloginfo( &#039;url&#039; ); ?&gt;&#34; title=&#34;&lt;?php bloginfo( &#039;name&#039; ); ?&gt;&#34;&gt;\r\n\t\t\t\t\t\t&lt;?php bloginfo( &#039;name&#039; ); ?&gt;\r\n\t\t\t\t&lt;\/a&gt;&lt;\/h1&gt;\r\n\t\t\t\t&lt;h2&gt;&lt;?php bloginfo( &#039;description&#039; ); ?&gt;&lt;\/h2&gt;\r\n\t\t\t\t\r\n\t\t\t\t&lt;div id=&#34;search-block&#34;&gt;\r\n\t\t\t\t\t\t&lt;?php get_search_form(); ?&gt;\r\n\t\t\t\t&lt;\/div&gt;\r\n\t\t\t\t\r\n\t\t\t\t&lt;?php if ( has_nav_menu( &#039;principal&#039; )) : ?&gt;\r\n\t\t\t\t\t&lt;nav class=&#34;menu_principal&#34;&gt;\r\n\t\t\t\t\t\t&lt;?php wp_nav_menu(array( &#039;theme_location&#039; =&gt; &#039;principal&#039; )); ?&gt;\r\n\t\t\t\t\t&lt;\/nav&gt;\r\n\t\t\t\t&lt;?php endif; ?&gt;\t\t\t\t\r\n\r\n\t\t\t&lt;\/header&gt;\r\n\t\t\t<\/code><\/pre>\n<p>[\/pcsh]<\/p>\n<ol>\n<li>Ligne 1, on ajoute une fonction qui va rajouter automatiquement des classes \u00e0 l&rsquo;\u00e9l\u00e9ment body, selon le template utilis\u00e9, ce qui permettra\u00a0 de styler facilement cet \u00e9l\u00e9ment si besoin :<br \/>\n<code>&lt;body &lt;?php body_class(); ?&gt;&gt;<\/code><\/li>\n<li>Ligne 7, l&rsquo;appel \u00e0 une image d&rsquo;arri\u00e8re plan pour le header se fait en rempla\u00e7ant l&rsquo;url \u00ab\u00a0en dur\u00a0\u00bb de l&rsquo;image par le code ci-dessous. Il faut pr\u00e9alablement charger l&rsquo;image dans la biblioth\u00e8que de votre WordPress et l&rsquo;activer depuis le Dashboard &gt; Apparence &gt; Personnaliser &gt; Image d&rsquo;en-t\u00eate :<br \/>\n<code class=\"php string\">&lt;?php echo( get_header_image() ); ?&gt;<\/code><\/li>\n<li>Lignes 8 \u00e0 10, dans le <em>&lt;h1&gt;<\/em> le contenu du titre est remplac\u00e9 par :<br \/>\n<code><code>&lt;?php bloginfo('name') ; ?&gt;<br \/>\n<\/code><\/code>et est entour\u00e9 d&rsquo;un lien vers la page d&rsquo;accueil du site en l&rsquo;entourant de :<br \/>\n<code>&lt;a href=\"&lt;?php bloginfo('url') ; ?&gt;\" title=\"&lt;?php bloginfo( 'name' ); &gt; &lt;\/a&gt;<code><\/code><\/code><\/li>\n<li>Ligne 11,\u00a0 dans le &lt;h2&gt; le sous-titre (le slogan pour WordPress) est remplac\u00e9 par :<br \/>\n<code>&lt;?php bloginfo('description') ; ?&gt;<\/code><\/li>\n<li>Lignes 13 \u00e0 15, une zone de recherche peut \u00eatre ajout\u00e9e en incluant ce code dans un conteneur (ici une <em>&lt;div&gt;<\/em>) :<br \/>\n<code class=\"php plain\">&lt;?php get_search_form(); ?&gt;<\/code><\/li>\n<li>Enfin, Lignes 17 \u00e0 21, le contenu de la balise <em>&lt;nav&gt;<\/em> est remplac\u00e9 par un appel au menu principal d\u00e9fini dans WordPress :<br \/>\n<code>&lt;?php wp_nav_menu(array( 'theme_location' =&gt; 'principal' )); ?&gt;<br \/>\n<\/code>Les arguments de la fonction d&rsquo;appel au menu sont d\u00e9termin\u00e9s par la d\u00e9claration d&rsquo;une zone de Menu dans le fichier functions.php, nous verrons cel\u00e0 plus loin.<br \/>\nLa &lt;nav&gt; pour le menu est ins\u00e9r\u00e9e dans un test, non obligatoire, mais recommand\u00e9 pour savoir si la zone de Menu a bien \u00e9t\u00e9 d\u00e9clar\u00e9e :<br \/>\n<code>&lt;?php if ( has_nav_menu( 'principal' )) : ?&gt;\u00a0 &lt;?php endif; ?&gt;<\/code><\/li>\n<li>Il est possible de rajouter une image de contenu, type logo, dans le header. Celle-ci doit \u00eatre plac\u00e9e dans un dossier sp\u00e9cifique, le dossier <em>images<\/em> par exemple, et il faut rajouter le chemin du dossier images dans le th\u00e8me. Indiquer ceci avant le nom de l&rsquo;image :<br \/>\n<code><tt>&lt;?php bloginfo('template_directory');\u00a0?&gt;<\/tt>\/ images\/<\/code><br \/>\nSi cela ne fonctionne pas, il est \u00e9galement possible d&rsquo;utiliser :<br \/>\n<code><tt>&lt;?php echo get_template_directory_uri(); ?&gt;\/images\/<\/tt><\/code><\/li>\n<li>Le fichier se termine par l&rsquo;ouverture de la balise <em>&lt;section&gt;<\/em> qui se retrouvera donc dans tous les autres fichiers et notamment le fichier index.php et sera donc ferm\u00e9e dans ce fichier. Il arrive aussi que cette balise soit referm\u00e9e dans le fichier footer.php.<\/li>\n<\/ol>\n<p>Voici donc ci-dessous le code complet de la page header.php. Il faut cr\u00e9er \u00e0 partir de votre \u00e9diteur un nouveau fichier et l&rsquo;enregistrer dans le dossier de votre th\u00e8me sous le nom header.php. Il ne reste plus qu&rsquo;\u00e0 y copier le code qui suit et l&rsquo;adapter \u00e0 vos besoins :<\/p>\n<p>[pcsh lang=\u00a0\u00bbxml\u00a0\u00bb tab_size=\u00a0\u00bb4&Prime; message=\u00a0\u00bb\u00a0\u00bb hl_lines=\u00a0\u00bb\u00a0\u00bb provider=\u00a0\u00bbmanual\u00a0\u00bb]<\/p>\n<pre><code>&lt;!DOCTYPE html&gt;\r\n&lt;html &lt;?php language_attributes(); ?&gt;&gt;\r\n\r\n\t&lt;head&gt;\r\n\t\t&lt;meta charset=&#34;&lt;?php bloginfo( &#039;charset&#039; ); ?&gt;&#34;&gt;\r\n\t\t&lt;meta name=&#34;viewport&#34; content=&#34;width=device-width, initial-scale=1&#34;&gt;\r\n\t\t&lt;link rel=&#34;profile&#34; href=&#34;http:\/\/gmpg.org\/xfn\/11&#34;&gt;\r\n\t\t&lt;link rel=&#34;pingback&#34; href=&#34;&lt;?php bloginfo( &#039;pingback_url&#039; ); ?&gt;&#34; \/&gt;\r\n\t\t\r\n\t\t&lt;title&gt;\r\n\t\t\t&lt;?php bloginfo( &#039;name&#039; ); ?&gt;\r\n\t\t\t&lt;?php if (is_home() || is_front_page()) : ?&gt;\r\n\t\t\t\t&amp;mdash; &lt;?php bloginfo( &#039;description&#039; ); ?&gt;\r\n\t\t\t&lt;?php else : ?&gt;\r\n\t\t\t\t&amp;mdash; &lt;?php wp_title( &#34;&#34;, true ); ?&gt;\r\n\t\t\t&lt;?php endif; ?&gt;\r\n\t\t&lt;\/title&gt;\r\n\t\t\r\n\t\t&lt;link rel=&#34;stylesheet&#34; href=&#34;&lt;?php bloginfo(&#039;stylesheet_url&#039;); ?&gt;&#34; type=&#34;text\/css&#34; \/&gt;\r\n\t\t\r\n\t\t&lt;link rel=&#34;shortcut icon&#34; href=&#34;&lt;?php echo get_template_directory_uri(); ?&gt;\/images\/engin.png&#34; type=&#34;image\/x-icon&#34; \/&gt;\r\n\r\n\t\t&lt;?php wp_head(); ?&gt;\r\n\t&lt;\/head&gt;\r\n\r\n&lt;body &lt;?php body_class(); ?&gt;&gt;\r\n\r\n\t\t&lt;div id=&#34;wrapper&#34;&gt;\r\n\r\n\t\t\t&lt;header id=&#34;en_tete&#34;&gt;\r\n\r\n\t\t\t\t&lt;img src=&#34;&lt;?php echo( get_header_image() ); ?&gt;&#34; alt=&#34;image d&#039;en-t\u00eate, chantier&#34; class=&#34;header_image&#34;\/&gt; \r\n\t\t\t\t&lt;h1&gt;&lt;a href=&#34;&lt;?php bloginfo( &#039;url&#039; ); ?&gt;&#34; title=&#34;&lt;?php bloginfo( &#039;name&#039; ); ?&gt;&#34;&gt;\r\n\t\t\t\t\t\t&lt;?php bloginfo( &#039;name&#039; ); ?&gt;\r\n\t\t\t\t&lt;\/a&gt;&lt;\/h1&gt;\r\n\t\t\t\t&lt;h2&gt;&lt;?php bloginfo( &#039;description&#039; ); ?&gt;&lt;\/h2&gt;\r\n\t\t\t\t\r\n\t\t\t\t&lt;div id=&#34;search-block&#34;&gt;\r\n\t\t\t\t\t\t&lt;?php get_search_form(); ?&gt;\r\n\t\t\t\t&lt;\/div&gt;\r\n\t\t\t\t\r\n\t\t\t\t&lt;?php if ( has_nav_menu( &#039;principal&#039; )) : ?&gt;\r\n\t\t\t\t\t&lt;nav class=&#34;menu_principal&#34;&gt;\r\n\t\t\t\t\t\t&lt;?php wp_nav_menu(array( &#039;theme_location&#039; =&gt; &#039;principal&#039; )); ?&gt;\r\n\t\t\t\t\t&lt;\/nav&gt;\r\n\t\t\t\t&lt;?php endif; ?&gt;\t\t\t\t\r\n\r\n\t\t\t&lt;\/header&gt;\r\n\t\t\t\r\n\t\t\t&lt;section id=&#34;projets&#34;&gt;<\/code><\/pre>\n<p>[\/pcsh]<\/p>\n<p>&nbsp;<\/p>\n<h4>Le fichier footer.php<\/h4>\n<p>En g\u00e9n\u00e9ral ce fichier ne contient pas grand chose, mais il porte la responsabilit\u00e9 de refermer le code ouvert dans les autres fichiers, particuli\u00e8rement le fichier header.php dans lequel les balises <em>&lt;body&gt;<\/em> et <em>&lt;html&gt;<\/em> ont \u00e9t\u00e9 ouvertes.<\/p>\n<p>De m\u00eame que pour le header.php, il faut cr\u00e9er un nouveau fichier depuis votre \u00e9diteur de code et l&rsquo;enregistrer dans le dossier de votre th\u00e8me sous le nom footer.php. Il restera \u00e0 y placer le code PHP que nous allons \u00e9tudier et le personnaliser.<\/p>\n<p>Reprenons d&rsquo;abord le code HTML \u00e0 convertir :<\/p>\n<p>[pcsh lang=\u00a0\u00bbxml\u00a0\u00bb tab_size=\u00a0\u00bb4&Prime; message=\u00a0\u00bb\u00a0\u00bb hl_lines=\u00a0\u00bb\u00a0\u00bb provider=\u00a0\u00bbmanual\u00a0\u00bb]<\/p>\n<pre><code>\t\t\t&lt;footer id=&#34;pied-de-page&#34;&gt;\r\n\t\t\t\t&lt;p&gt;Copyright&lt;\/p&gt;\r\n\t\t\t&lt;\/footer&gt;\r\n\t\t&lt;\/div&gt;\r\n\t&lt;\/body&gt;\r\n&lt;\/html&gt;<\/code><\/pre>\n<p>[\/pcsh]<\/p>\n<p>Dans notre cas, il n&rsquo;y a rien \u00e0 modifier, sauf si vous souhaitez ajouter du contenu dynamique (ce peut \u00eatre le slogan du site, ou autre).<\/p>\n<p>Pour les r\u00e9seaux sociaux, reportez-vous \u00e0 cette page pour le d\u00e9tail :<br \/>\n<a href=\"http:\/\/atelier-wordpress.com\/ajouter-des-icones-de-reseaux-sociaux-a-un-menu-wordpress\/\" target=\"_blank\" rel=\"noopener\">http:\/\/atelier-wordpress.com\/ajouter-des-icones-de-reseaux-sociaux-a-un-menu-wordpress\/ <\/a>ou encore<br \/>\n<a href=\"http:\/\/www.notuxedo.com\/comment-ajouter-des-icones-de-reseaux-sociaux-sur-wordpress\/\" target=\"_blank\" rel=\"noopener\">http:\/\/www.notuxedo.com\/comment-ajouter-des-icones-de-reseaux-sociaux-sur-wordpress\/<\/a><\/p>\n<p>Pour le faire vous-m\u00eame dans votre th\u00e8me, il faudra ajouter un Widget au footer (ou ailleurs) et suivre le second tuto. Voir dans ce cas, le chapitre suivant sur le fichier sidebar.php<\/p>\n<p>Il est quand m\u00eame obligatoire de rajouter juste avant la balise de fin <em>&lt;\/body&gt;<\/em> le code suivant afin d&rsquo;autoriser des extensions \u00e0 rajouter du code \u00e0 cet endroit :<br \/>\n&lt;?php wp_footer() ; ?&gt;<\/p>\n<p>Voici cependant, le code minimal du fichier footer.php :<\/p>\n<p>[pcsh lang=\u00a0\u00bbxml\u00a0\u00bb tab_size=\u00a0\u00bb4&Prime; message=\u00a0\u00bb\u00a0\u00bb hl_lines=\u00a0\u00bb\u00a0\u00bb provider=\u00a0\u00bbmanual\u00a0\u00bb]<\/p>\n<pre><code>\t\t&lt;footer id=&#34;pied-de-page&#34;&gt;\r\n\t\t\t&lt;p&gt; Copyright &amp;copy; &lt;\/p&gt;\r\n\t\t&lt;\/footer&gt;\r\n\r\n\t&lt;\/div&gt;\r\n\r\n\t&lt;?php wp_footer() ; ?&gt;\r\n&lt;\/body&gt;\r\n&lt;\/html&gt;<\/code><\/pre>\n<p>[\/pcsh]<\/p>\n<h4>le fichier sidebar.php<\/h4>\n<p>Le r\u00f4le d&rsquo;une sidebar dans WordPress est g\u00e9n\u00e9ralement d&rsquo;accueillir des Widgets, c&rsquo;est-\u00e0-dire la possibilit\u00e9 d&rsquo;afficher des informations relatives au site (archives, recherche, derniers articles, texte personnalis\u00e9, etc.) mais aussi des menus secondaires.<\/p>\n<p>Le code est pour cela, relativement restreint. C&rsquo;est un appel \u00e0 la fonction appropri\u00e9e de WordPress, \u00e0 placer dans une liste <em>&lt;ul&gt;<\/em> :<\/p>\n<p>[pcsh lang=\u00a0\u00bbxml\u00a0\u00bb tab_size=\u00a0\u00bb4&Prime; message=\u00a0\u00bb\u00a0\u00bb hl_lines=\u00a0\u00bb\u00a0\u00bb provider=\u00a0\u00bbmanual\u00a0\u00bb]<\/p>\n<pre><code>&lt;aside id=&#34;en-plus&#34;&gt;\r\n\t&lt;ul&gt;\r\n\t\t&lt;?php \r\n\t\t\tif (function_exists(&#039;dynamic_sidebar&#039;)) {\r\n\t\t\t\tdynamic_sidebar();\r\n\t\t\t}\r\n\t\t ?&gt;\r\n\t&lt;\/ul&gt;\r\n&lt;\/aside&gt;<\/code><\/pre>\n<p>[\/pcsh]<\/p>\n<p>Le code PHP est bas\u00e9 sur une condition qui teste d&rsquo;abord l\u2019existence d&rsquo;une fonction (d\u00e9finie dans le fichier functions.php, nous le verrons plus loin), afin de pouvoir appeler cette fonction, dont le r\u00f4le est d&rsquo;autoriser les Widgets dans la sidebar. Ici, nous avons choisi comme nom de fonction : dynamic_sidebar, mais vous avez la libert\u00e9 de choisir un autre nom, l&rsquo;essentiel est que ce soit le m\u00eame que celui d\u00e9fini dans le fichier functions.php.<\/p>\n<p>Ce fichier n&rsquo;est pas obligatoire, mais m\u00eame si vous ne vous en servez pas dans l&rsquo;imm\u00e9diat, il est recommand\u00e9 de le cr\u00e9er a minima.<\/p>\n<p>&nbsp;<\/p>\n<p>Il reste encore \u00e0 r\u00e9aliser le fichier index.php. Ce sera l&rsquo;objet de la troisi\u00e8me partie de cet article. Il contiendra notamment un \u00e9l\u00e9ment essentiel du fonctionnement de WordPress, la boucle WordPress (ou WordPress loop) dons nous verrons bient\u00f4t le principe.<\/p>\n<p>&nbsp;<\/p>\n<p>&nbsp;<\/p>\n<p>&nbsp;<\/p>\n","protected":false},"excerpt":{"rendered":"<p>Le fichier header.php Il sera int\u00e9gr\u00e9 au d\u00e9but de chaque fichier de contenu, par un \u00ab\u00a0include\u00a0\u00bb PHP. Il en sera de m\u00eame pour les fichiers footer.php et sidebar.php. Le fichier header.php reprend la structure du d\u00e9but du code HTML, jusqu&rsquo;\u00e0 l&rsquo;ouverture de la &lt;section&gt; y compris. Voici pour m\u00e9moire le code HTML \u00e0 adapter en &hellip; <a href=\"https:\/\/lamartinieredesign.fr\/?page_id=704\" class=\"more-link\">Continuer la lecture de <span class=\"screen-reader-text\">Cr\u00e9er un th\u00e8me complet &#8211; part 2<\/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\/704"}],"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=704"}],"version-history":[{"count":19,"href":"https:\/\/lamartinieredesign.fr\/index.php?rest_route=\/wp\/v2\/pages\/704\/revisions"}],"predecessor-version":[{"id":1142,"href":"https:\/\/lamartinieredesign.fr\/index.php?rest_route=\/wp\/v2\/pages\/704\/revisions\/1142"}],"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=704"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}