Développement web S3 (M3202) — TP n° 4

Dans cette séance de TP on va intégrer Bootstrap dans une thème WordPress.
Avant de commencer, créez un répertoire nommé m3202-tp4 contenant les répertoires exo1 et exo2. Chacun de ces répertoires contient votre travail sur l'exercice correspondant.
Si dans votre ordinateur il y a déjà un répertoire m3202td2, effacez-le et et remplacez-le par l'original (à télécharger dans le section «TD 2/5» sur AMeTICE).
À la fin de la séance, vous devez compresser le répertoire m3202-tp4 en format ZIP et le soumettre sur AMeTICE.
Bootstrap dans WordPress

Le but de ce TP est d'utiliser le framework Bootstrap dans un thème de WordPress pour structurer le contenu des articles dans une grille. Il y a donc plusieurs étapes :
Créer un thème enfant
Faire le lien vers Bootstrap (seulement) dans les articles
Modifier la page pour utiliser les classes .row, .col-*, etc.
Vous savez déjà comment faire un thème enfant, donc on passe aux liens vers Bootstrap.
Exercice 1

Dans cet exercice vous allez insérer Bootstrap dans les articles du thème «Twenty Sixteen».
Faites un thème enfant appelé twentysixteen-child-tp4.
Pour insérer les liens vers les fichiers CSS et le JS de Bootstrap, il faut passer par le fichier functions.php. N'essayez pas d'écrire les liens directement sur les fichiers header.php et footer.php. Vous trouverez comment faire ceci correctement dans cette page de la documentation de WordPress.
Il est recommandé d'avoir les fichiers de Bootstrap en local, dans le répertoire de votre thème enfant. Comme vous utilisez un thème enfant, il faut utiliser la fonction get_stylesheet_directory_uri() à la place de get_template_directory_uri().
Pour importer Bootstrap seulement dans les articles, il faudra utiliser la fonction de WordPress is_single(). Dans la documentation il y a un exemple de comment le faire.
Envoyez seulement le fichier functions.php de votre nouveau thème enfant.
Si ça a marché, vous devriez voir les pages affichant les articles un peu différentes avec le thème «twentysiteen-child-tp4». Vérifiez-le avant de continuer.
Utiliser une grille Bootstrap

Maintenant que Bootstrap est bien chargé pour les articles, vous pouvez modifier le fichier single.php (et tous les fichiers modèles partiels qu'il utilise) pour utiliser la grille responsive de Bootstrap.
Je ne vais pas vous demander de concevoir vous-même cette grille (c'est assez difficile, si on veut respecter au maximum la structure existante de la page web). Il faut ajouter quelques classes de Bootstrap, supprimer quelques classes du thème, et même ajouter quelques éléments <div>. Vous avez ici le code HTML pour l'article «Neuvième Article» avec une grille Bootstrap.
<!DOCTYPE html>
<html lang="fr-FR" class="no-js">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link rel="profile" href="http://gmpg.org/xfn/11">
  <link rel="pingback" href="http://localhost/m3202td2/xmlrpc.php">
  <script>(function(html){html.className = html.className.replace(/\bno-js\b/,'js')})(document.documentElement);</script>
  <title>Neuvième article &#8211; M3202-TD2</title>
  <meta name='robots' content='noindex,follow' />
  <link rel='dns-prefetch' href='//fonts.googleapis.com' />
  <link rel='dns-prefetch' href='//s.w.org' />
  <link rel="alternate" type="application/rss+xml" title="M3202-TD2 &raquo; Flux" href="http://localhost/m3202td2/index.php/feed/" />
  <link rel="alternate" type="application/rss+xml" title="M3202-TD2 &raquo; Flux des commentaires" href="http://localhost/m3202td2/index.php/comments/feed/" />
  <link rel="alternate" type="application/rss+xml" title="M3202-TD2 &raquo; Neuvième article Flux des commentaires" href="http://localhost/m3202td2/index.php/2018/10/21/neuvieme-article/feed/" />
  <script type="text/javascript">
    window._wpemojiSettings = {"baseUrl":"https:\/\/s.w.org\/images\/core\/emoji\/11\/72x72\/","ext":".png","svgUrl":"https:\/\/s.w.org\/images\/core\/emoji\/11\/svg\/","svgExt":".svg","source":{"concatemoji":"http:\/\/localhost\/m3202td2\/wp-includes\/js\/wp-emoji-release.min.js?ver=4.9.8"}};
    !function(a,b,c){function d(a,b){var c=String.fromCharCode;l.clearRect(0,0,k.width,k.height),l.fillText(c.apply(this,a),0,0);var d=k.toDataURL();l.clearRect(0,0,k.width,k.height),l.fillText(c.apply(this,b),0,0);var e=k.toDataURL();return d===e}function e(a){var b;if(!l||!l.fillText)return!1;switch(l.textBaseline="top",l.font="600 32px Arial",a){case"flag":return!(b=d([55356,56826,55356,56819],[55356,56826,8203,55356,56819]))&&(b=d([55356,57332,56128,56423,56128,56418,56128,56421,56128,56430,56128,56423,56128,56447],[55356,57332,8203,56128,56423,8203,56128,56418,8203,56128,56421,8203,56128,56430,8203,56128,56423,8203,56128,56447]),!b);case"emoji":return b=d([55358,56760,9792,65039],[55358,56760,8203,9792,65039]),!b}return!1}function f(a){var c=b.createElement("script");c.src=a,c.defer=c.type="text/javascript",b.getElementsByTagName("head")[0].appendChild(c)}var g,h,i,j,k=b.createElement("canvas"),l=k.getContext&&k.getContext("2d");for(j=Array("flag","emoji"),c.supports={everything:!0,everythingExceptFlag:!0},i=0;i<j.length;i++)c.supports[j[i]]=e(j[i]),c.supports.everything=c.supports.everything&&c.supports[j[i]],"flag"!==j[i]&&(c.supports.everythingExceptFlag=c.supports.everythingExceptFlag&&c.supports[j[i]]);c.supports.everythingExceptFlag=c.supports.everythingExceptFlag&&!c.supports.flag,c.DOMReady=!1,c.readyCallback=function(){c.DOMReady=!0},c.supports.everything||(h=function(){c.readyCallback()},b.addEventListener?(b.addEventListener("DOMContentLoaded",h,!1),a.addEventListener("load",h,!1)):(a.attachEvent("onload",h),b.attachEvent("onreadystatechange",function(){"complete"===b.readyState&&c.readyCallback()})),g=c.source||{},g.concatemoji?f(g.concatemoji):g.wpemoji&&g.twemoji&&(f(g.twemoji),f(g.wpemoji)))}(window,document,window._wpemojiSettings);
  </script>
  <style type="text/css">
    img.wp-smiley,
    img.emoji {
      display: inline !important;
      border: none !important;
      box-shadow: none !important;
      height: 1em !important;
      width: 1em !important;
      margin: 0 .07em !important;
      vertical-align: -0.1em !important;
      background: none !important;
      padding: 0 !important;
    }
  </style>
  <link rel='stylesheet' id='dashicons-css'  href='http://localhost/m3202td2/wp-includes/css/dashicons.min.css?ver=4.9.8' type='text/css' media='all' />
  <link rel='stylesheet' id='admin-bar-css'  href='http://localhost/m3202td2/wp-includes/css/admin-bar.min.css?ver=4.9.8' type='text/css' media='all' />
  <link rel='stylesheet' id='twentysixteen-style-css'  href='http://localhost/m3202td2/wp-content/themes/twentysixteen/style.css?ver=4.9.8' type='text/css' media='all' />
  <link rel='stylesheet' id='twentysixteenchild-style-css'  href='http://localhost/m3202td2/wp-content/themes/twentysixteen-child-tp4/style.css?ver=4.9.8' type='text/css' media='all' />
  <link rel='stylesheet' id='bootstrap-css'  href='http://localhost/m3202td2/wp-content/themes/twentysixteen-child-tp4/bootstrap/css/bootstrap.min.css?ver=4.9.8' type='text/css' media='all' />
  <link rel='stylesheet' id='twentysixteen-fonts-css'  href='https://fonts.googleapis.com/css?family=Merriweather%3A400%2C700%2C900%2C400italic%2C700italic%2C900italic%7CMontserrat%3A400%2C700%7CInconsolata%3A400&#038;subset=latin%2Clatin-ext' type='text/css' media='all' />
  <link rel='stylesheet' id='genericons-css'  href='http://localhost/m3202td2/wp-content/themes/twentysixteen/genericons/genericons.css?ver=3.4.1' type='text/css' media='all' />
      <!--[if lt IE 10]>
      <link rel='stylesheet' id='twentysixteen-ie-css'  href='http://localhost/m3202td2/wp-content/themes/twentysixteen/css/ie.css?ver=20160816' type='text/css' media='all' />
    <![endif]-->
      <!--[if lt IE 9]>
      <link rel='stylesheet' id='twentysixteen-ie8-css'  href='http://localhost/m3202td2/wp-content/themes/twentysixteen/css/ie8.css?ver=20160816' type='text/css' media='all' />
    <![endif]-->
      <!--[if lt IE 8]>
      <link rel='stylesheet' id='twentysixteen-ie7-css'  href='http://localhost/m3202td2/wp-content/themes/twentysixteen/css/ie7.css?ver=20160816' type='text/css' media='all' />
    <![endif]-->
    <script type='text/javascript' src='http://localhost/m3202td2/wp-content/themes/twentysixteen-child-tp4/bootstrap/js/bootstrap.bundle.min.js?ver=4.9.8'></script>
      <!--[if lt IE 9]>
      <script type='text/javascript' src='http://localhost/m3202td2/wp-content/themes/twentysixteen/js/html5.js?ver=3.7.3'></script>
    <![endif]-->
    <script type='text/javascript' src='http://localhost/m3202td2/wp-includes/js/jquery/jquery.js?ver=1.12.4'></script>
    <script type='text/javascript' src='http://localhost/m3202td2/wp-includes/js/jquery/jquery-migrate.min.js?ver=1.4.1'></script>
    <link rel='https://api.w.org/' href='http://localhost/m3202td2/index.php/wp-json/' />
    <link rel="EditURI" type="application/rsd+xml" title="RSD" href="http://localhost/m3202td2/xmlrpc.php?rsd" />
    <link rel="wlwmanifest" type="application/wlwmanifest+xml" href="http://localhost/m3202td2/wp-includes/wlwmanifest.xml" />
    <link rel='prev' title='Huitieme article' href='http://localhost/m3202td2/index.php/2018/02/21/huitieme-article/' />
    <link rel='next' title='Bonjour tout le monde !' href='http://localhost/m3202td2/index.php/2018/10/21/bonjour-tout-le-monde/' />
    <meta name="generator" content="WordPress 4.9.8" />
    <link rel="canonical" href="http://localhost/m3202td2/index.php/2018/10/21/neuvieme-article/" />
    <link rel='shortlink' href='http://localhost/m3202td2/?p=21' />
    <link rel="alternate" type="application/json+oembed" href="http://localhost/m3202td2/index.php/wp-json/oembed/1.0/embed?url=http%3A%2F%2Flocalhost%2Fm3202td2%2Findex.php%2F2018%2F10%2F21%2Fneuvieme-article%2F" />
    <link rel="alternate" type="text/xml+oembed" href="http://localhost/m3202td2/index.php/wp-json/oembed/1.0/embed?url=http%3A%2F%2Flocalhost%2Fm3202td2%2Findex.php%2F2018%2F10%2F21%2Fneuvieme-article%2F&#038;format=xml" />
    <style type="text/css">.recentcomments a{display:inline !important;padding:0 !important;margin:0 !important;}</style>
    <style type="text/css" media="print">#wpadminbar { display:none; }</style>
    <style type="text/css" media="screen">
    html { margin-top: 32px !important; }
    * html body { margin-top: 32px !important; }
    @media screen and ( max-width: 782px ) {
      html { margin-top: 46px !important; }
      * html body { margin-top: 46px !important; }
    }
  </style>
</head>
<body class="post-template-default single single-post postid-21 single-format-standard logged-in admin-bar no-customize-support group-blog">
  <div id="page" class="site container-fluid"><!--TP4-->
    <div><!--TP4-->
      <a class="skip-link screen-reader-text" href="#content">Aller au contenu principal</a>
      <header id="masthead" class="site-header row" role="banner"><!--TP4-->
        <div class="site-header-main col"><!--TP4-->
          <div class="site-branding">
            <p class="site-title"><a href="http://localhost/m3202td2/" rel="home">M3202-TD2</a></p>
            <p class="site-description">Un site utilisant WordPress</p>
          </div><!-- .site-branding -->
          <button id="menu-toggle" class="menu-toggle">Menu</button>
          <div id="site-header-menu" class="site-header-menu">
            <nav id="site-navigation" class="main-navigation" role="navigation" aria-label="Menu principal">
              <div class="menu-menu-principal-container">
                <ul id="menu-menu-principal" class="primary-menu">
                  <li id="menu-item-25" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-25"><a href="http://localhost/m3202td2/index.php/page-d-exemple/">Page d’exemple</a></li>
                  <li id="menu-item-26" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-26"><a href="http://localhost/m3202td2/index.php/politique-de-confidentialite/">Politique de confidentialité</a></li>
                </ul>
              </div>
            </nav><!-- .main-navigation -->
          </div><!-- .site-header-menu -->
        </div><!-- .site-header-main -->
      </header><!-- .site-header -->
      <div id="content" class="site-content row"><!--TP4-->
        <div id="primary" class="col-12 col-md-8"><!--TP4-->
          <main id="main" class="site-main" role="main">
            <article id="post-21" class="row post-21 post type-post status-publish format-standard hentry category-cinema"><!--TP4-->
              <header class="entry-header col-12"><!--TP4-->
                <h1 class="entry-title">Neuvième article</h1>
              </header><!-- .entry-header -->
              <div class="entry-content col-12 col-lg-9 order-1 order-lg-2"><!--TP4-->
                <p>Iamque lituis cladium concrepantibus internarum non celate ut antea turbidum saeviebat ingenium a veri consideratione detortum et nullo inpositorum vel conpositorum fidem sollemniter inquirente nec discernente a societate noxiorum insontes velut exturbatum e iudiciis fas omne discessit, et causarum legitima silente defensione carnifex rapinarum sequester et obductio capitum et bonorum ubique multatio versabatur per orientales provincias, quas recensere puto nunc oportunum absque Mesopotamia digesta, cum bella Parthica dicerentur, et Aegypto, quam necessario aliud reieci ad tempus.</p>
                <div class="author-info">
                  <div class="author-avatar">
                    <img alt='' src='http://2.gravatar.com/avatar/2db4fda28310966cc40afc3e7ebab1a0?s=42&#038;d=mm&#038;r=g' srcset='http://2.gravatar.com/avatar/2db4fda28310966cc40afc3e7ebab1a0?s=84&#038;d=mm&#038;r=g 2x' class='avatar avatar-42 photo' height='42' width='42' />  
                  </div><!-- .author-avatar -->
                  <div class="author-description">
                    <h2 class="author-title"><span class="author-heading">Auteur&nbsp;:</span> m3202</h2>
                    <p class="author-bio">
                      Alfred Hitchcock est un réalisateur, producteur et scénariste de cinéma britannique, né le 13 août 1899 à Leytonstone à Londres et mort le 29 avril 1980 à Bel Air à Los Angeles.     <a class="author-link" href="http://localhost/m3202td2/index.php/author/m3202/" rel="author">
                      Afficher tous les articles par m3202      </a>
                    </p><!-- .author-bio -->
                  </div><!-- .author-description -->
                </div><!-- .author-info -->
              </div><!-- .entry-content -->
              <footer class="entry-footer col-12 order-2 col-lg-3 order-lg-1"><!--TP4-->
                <span class="byline"><span class="author vcard"><img alt='' src='http://2.gravatar.com/avatar/2db4fda28310966cc40afc3e7ebab1a0?s=49&#038;d=mm&#038;r=g' srcset='http://2.gravatar.com/avatar/2db4fda28310966cc40afc3e7ebab1a0?s=98&#038;d=mm&#038;r=g 2x' class='avatar avatar-49 photo' height='49' width='49' /><span class="screen-reader-text">Auteur </span> <a class="url fn n" href="http://localhost/m3202td2/index.php/author/m3202/">m3202</a></span></span><span class="posted-on"><span class="screen-reader-text">Publié le </span><a href="http://localhost/m3202td2/index.php/2018/10/21/neuvieme-article/" rel="bookmark"><time class="entry-date published" datetime="2018-10-21T15:04:09+00:00">21 octobre 2018</time><time class="updated" datetime="2018-12-02T10:04:03+00:00">2 décembre 2018</time></a></span><span class="cat-links"><span class="screen-reader-text">Catégories </span><a href="http://localhost/m3202td2/index.php/category/cinema/" rel="category tag">Cinéma</a></span>    <span class="edit-link"><a class="post-edit-link" href="http://localhost/m3202td2/wp-admin/post.php?post=21&#038;action=edit">Modifier<span class="screen-reader-text"> "Neuvième article"</span></a></span>  
              </footer><!-- .entry-footer -->
            </article><!-- #post-## -->
            <div id="comments" class="comments-area row"><!--TP4-->
              <h2 class="comments-title col-12"><!--TP4-->
                3 réflexions sur « Neuvième article »   
              </h2>
              <ol class="comment-list col-12"><!--TP4-->
                <li id="comment-2" class="comment byuser comment-author-m3202 bypostauthor even thread-even depth-1">
                  <article id="div-comment-2" class="comment-body">
                    <footer class="comment-meta">
                      <div class="comment-author vcard">
                        <img alt='' src='http://2.gravatar.com/avatar/2db4fda28310966cc40afc3e7ebab1a0?s=42&#038;d=mm&#038;r=g' srcset='http://2.gravatar.com/avatar/2db4fda28310966cc40afc3e7ebab1a0?s=84&#038;d=mm&#038;r=g 2x' class='avatar avatar-42 photo' height='42' width='42' />            <b class="fn">Fabrice</b> <span class="says">dit :</span>         
                      </div><!-- .comment-author -->
                      <div class="comment-metadata">
                        <a href="http://localhost/m3202td2/index.php/2018/10/21/neuvieme-article/#comment-2">
                          <time datetime="2018-10-21T22:10:26+00:00">
                          21 octobre 2018 à 22 h 10 min             </time>
                        </a>
                        <span class="edit-link"><a class="comment-edit-link" href="http://localhost/m3202td2/wp-admin/comment.php?action=editcomment&#038;c=2">Modifier</a></span>          
                      </div><!-- .comment-metadata -->
                    </footer><!-- .comment-meta -->
                    <div class="comment-content">
                      <p>Intéressant</p>
                    </div><!-- .comment-content -->
                    <div class="reply"><a rel='nofollow' class='comment-reply-link' href='http://localhost/m3202td2/index.php/2018/10/21/neuvieme-article/?replytocom=2#respond' onclick='return addComment.moveForm( "div-comment-2", "2", "respond", "21" )' aria-label='Répondre à Fabrice'>Répondre</a></div>
                  </article><!-- .comment-body -->
                </li><!-- #comment-## -->
                <li id="comment-3" class="comment byuser comment-author-m3202 bypostauthor odd alt thread-odd thread-alt depth-1">
                  <article id="div-comment-3" class="comment-body">
                    <footer class="comment-meta">
                      <div class="comment-author vcard">
                        <img alt='' src='http://2.gravatar.com/avatar/2db4fda28310966cc40afc3e7ebab1a0?s=42&#038;d=mm&#038;r=g' srcset='http://2.gravatar.com/avatar/2db4fda28310966cc40afc3e7ebab1a0?s=84&#038;d=mm&#038;r=g 2x' class='avatar avatar-42 photo' height='42' width='42' />            <b class="fn">m3202</b> <span class="says">dit :</span>         
                      </div><!-- .comment-author -->
                      <div class="comment-metadata">
                        <a href="http://localhost/m3202td2/index.php/2018/10/21/neuvieme-article/#comment-3">
                          <time datetime="2018-10-21T22:10:37+00:00">
                          21 octobre 2018 à 22 h 10 min             </time>
                        </a>
                        <span class="edit-link"><a class="comment-edit-link" href="http://localhost/m3202td2/wp-admin/comment.php?action=editcomment&#038;c=3">Modifier</a></span>          
                      </div><!-- .comment-metadata -->
                    </footer><!-- .comment-meta -->
                    <div class="comment-content">
                      <p>Pénible</p>
                    </div><!-- .comment-content -->
                    <div class="reply"><a rel='nofollow' class='comment-reply-link' href='http://localhost/m3202td2/index.php/2018/10/21/neuvieme-article/?replytocom=3#respond' onclick='return addComment.moveForm( "div-comment-3", "3", "respond", "21" )' aria-label='Répondre à m3202'>Répondre</a></div>
                  </article><!-- .comment-body -->
                </li><!-- #comment-## -->
                <li id="comment-4" class="comment byuser comment-author-m3202 bypostauthor even thread-even depth-1">
                  <article id="div-comment-4" class="comment-body">
                    <footer class="comment-meta">
                      <div class="comment-author vcard">
                        <img alt='' src='http://2.gravatar.com/avatar/2db4fda28310966cc40afc3e7ebab1a0?s=42&#038;d=mm&#038;r=g' srcset='http://2.gravatar.com/avatar/2db4fda28310966cc40afc3e7ebab1a0?s=84&#038;d=mm&#038;r=g 2x' class='avatar avatar-42 photo' height='42' width='42' />            <b class="fn">Victor</b> <span class="says">dit :</span>          
                      </div><!-- .comment-author -->
                      <div class="comment-metadata">
                        <a href="http://localhost/m3202td2/index.php/2018/10/21/neuvieme-article/#comment-4">
                          <time datetime="2018-10-21T22:11:11+00:00">
                          21 octobre 2018 à 22 h 11 min             </time>
                        </a>
                        <span class="edit-link"><a class="comment-edit-link" href="http://localhost/m3202td2/wp-admin/comment.php?action=editcomment&#038;c=4">Modifier</a></span>          
                      </div><!-- .comment-metadata -->
                    </footer><!-- .comment-meta -->
                    <div class="comment-content">
                      <p>Incompréhensible.</p>
                    </div><!-- .comment-content -->
                    <div class="reply"><a rel='nofollow' class='comment-reply-link' href='http://localhost/m3202td2/index.php/2018/10/21/neuvieme-article/?replytocom=4#respond' onclick='return addComment.moveForm( "div-comment-4", "4", "respond", "21" )' aria-label='Répondre à Victor'>Répondre</a></div>
                  </article><!-- .comment-body -->
                </li><!-- #comment-## -->
              </ol><!-- .comment-list -->
              <div class="col-12"><!--TP4-->
                <div id="respond" class="comment-respond">
                  <h2 id="reply-title" class="comment-reply-title">Laisser un commentaire <small><a rel="nofollow" id="cancel-comment-reply-link" href="/m3202td2/index.php/2018/10/21/neuvieme-article/#respond" style="display:none;">Annuler la réponse</a></small></h2>
                  <form action="http://localhost/m3202td2/wp-comments-post.php" method="post" id="commentform" class="comment-form" novalidate>
                    <p class="logged-in-as"><a href="http://localhost/m3202td2/wp-admin/profile.php" aria-label="Connexion en tant que m3202. Modifier votre profil.">Connecté en tant que m3202</a>. <a href="http://localhost/m3202td2/wp-login.php?action=logout&amp;redirect_to=http%3A%2F%2Flocalhost%2Fm3202td2%2Findex.php%2F2018%2F10%2F21%2Fneuvieme-article%2F&amp;_wpnonce=55165b076c">Déconnexion ?</a></p>
                    <p class="comment-form-comment"><label for="comment">Commentaire</label> <textarea id="comment" name="comment" cols="45" rows="8" maxlength="65525" required="required"></textarea></p>
                    <p class="form-submit"><input name="submit" type="submit" id="submit" class="submit" value="Laisser un commentaire" /> <input type='hidden' name='comment_post_ID' value='21' id='comment_post_ID' />
                      <input type='hidden' name='comment_parent' id='comment_parent' value='0' />
                    </p>
                    <input type="hidden" id="_wp_unfiltered_html_comment_disabled" name="_wp_unfiltered_html_comment_disabled" value="440558a35c" /><script>(function(){if(window===window.parent){document.getElementById('_wp_unfiltered_html_comment_disabled').name='_wp_unfiltered_html_comment';}})();</script>
                  </form>
                </div><!-- #respond -->
              </div><!--TP4-->
            </div><!-- .comments-area -->
            <div class="row"><!--TP4-->
              <div class="col"><!--TP4-->
                <nav class="navigation post-navigation" role="navigation">
                  <h2 class="screen-reader-text">Navigation de l’article</h2>
                  <div class="nav-links">
                    <div class="nav-previous"><a href="http://localhost/m3202td2/index.php/2018/02/21/huitieme-article/" rel="prev"><span class="meta-nav" aria-hidden="true">Précédent</span> <span class="screen-reader-text">Article précédent&nbsp;:</span> <span class="post-title">Huitieme article</span></a></div>
                    <div class="nav-next"><a href="http://localhost/m3202td2/index.php/2018/10/21/bonjour-tout-le-monde/" rel="next"><span class="meta-nav" aria-hidden="true">Suivant</span> <span class="screen-reader-text">Article suivant&nbsp;:</span> <span class="post-title">Bonjour tout le monde !</span></a></div>
                  </div>
                </nav>
              </div><!--TP4-->
            </div><!--TP4-->
          </main><!-- .site-main -->
        </div><!-- .content-area -->
        <aside id="secondary" class="col-12 col-md-3 offset-md-1" role="complementary"><!--TP4-->
          <section id="search-2" class="widget widget_search">
            <form role="search" method="get" class="search-form" action="http://localhost/m3202td2/">
              <label>
                <span class="screen-reader-text">Recherche pour :</span>
                <input type="search" class="search-field" placeholder="Recherche&hellip;" value="" name="s" />
              </label>
              <button type="submit" class="search-submit"><span class="screen-reader-text">Recherche</span></button>
            </form>
          </section>
          <section id="recent-posts-2" class="widget widget_recent_entries">
            <h2 class="widget-title">Articles récents</h2>
            <ul>
              <li>
                <a href="http://localhost/m3202td2/index.php/2018/10/21/bonjour-tout-le-monde/">Bonjour tout le monde !</a>
              </li>
              <li>
                <a href="http://localhost/m3202td2/index.php/2018/10/21/neuvieme-article/">Neuvième article</a>
              </li>
              <li>
                <a href="http://localhost/m3202td2/index.php/2018/02/21/huitieme-article/">Huitieme article</a>
              </li>
              <li>
                <a href="http://localhost/m3202td2/index.php/2018/01/21/septieme-article/">Septième article</a>
              </li>
              <li>
                <a href="http://localhost/m3202td2/index.php/2018/01/21/sixieme-article/">Sixième article</a>
              </li>
            </ul>
          </section>
          <section id="recent-comments-2" class="widget widget_recent_comments">
            <h2 class="widget-title">Commentaires récents</h2>
            <ul id="recentcomments">
              <li class="recentcomments"><span class="comment-author-link">Quentin Tarantino</span> dans <a href="http://localhost/m3202td2/index.php/2018/02/21/huitieme-article/#comment-5">Huitieme article</a></li>
              <li class="recentcomments"><span class="comment-author-link">Victor</span> dans <a href="http://localhost/m3202td2/index.php/2018/10/21/neuvieme-article/#comment-4">Neuvième article</a></li>
              <li class="recentcomments"><span class="comment-author-link">m3202</span> dans <a href="http://localhost/m3202td2/index.php/2018/10/21/neuvieme-article/#comment-3">Neuvième article</a></li>
              <li class="recentcomments"><span class="comment-author-link">Fabrice</span> dans <a href="http://localhost/m3202td2/index.php/2018/10/21/neuvieme-article/#comment-2">Neuvième article</a></li>
              <li class="recentcomments"><span class="comment-author-link"><a href='https://wordpress.org/' rel='external nofollow' class='url'>Un commentateur WordPress</a></span> dans <a href="http://localhost/m3202td2/index.php/2018/10/21/bonjour-tout-le-monde/#comment-1">Bonjour tout le monde !</a></li>
            </ul>
          </section>
          <section id="archives-2" class="widget widget_archive">
            <h2 class="widget-title">Archives</h2>
            <ul>
              <li><a href='http://localhost/m3202td2/index.php/2018/10/'>octobre 2018</a></li>
              <li><a href='http://localhost/m3202td2/index.php/2018/02/'>février 2018</a></li>
              <li><a href='http://localhost/m3202td2/index.php/2018/01/'>janvier 2018</a></li>
              <li><a href='http://localhost/m3202td2/index.php/2017/10/'>octobre 2017</a></li>
              <li><a href='http://localhost/m3202td2/index.php/2017/03/'>mars 2017</a></li>
            </ul>
          </section>
          <section id="categories-2" class="widget widget_categories">
            <h2 class="widget-title">Catégories</h2>
            <ul>
              <li class="cat-item cat-item-4"><a href="http://localhost/m3202td2/index.php/category/cinema/" title="Articles sur l&#039;histoire du cinéma.">Cinéma</a></li>
              <li class="cat-item cat-item-5"><a href="http://localhost/m3202td2/index.php/category/cinema/courtmetrage/" title="Histoire des court-métrages">Court-métrage</a></li>
              <li class="cat-item cat-item-3"><a href="http://localhost/m3202td2/index.php/category/important/" title="Des articles remarquables.">Important</a></li>
              <li class="cat-item cat-item-1"><a href="http://localhost/m3202td2/index.php/category/non-classe/" >Non classé</a></li>
              <li class="cat-item cat-item-2"><a href="http://localhost/m3202td2/index.php/category/vieux/" title="Les premiers articles.">Vieux</a></li>
            </ul>
          </section>
          <section id="meta-2" class="widget widget_meta">
            <h2 class="widget-title">Méta</h2>
            <ul>
              <li><a href="http://localhost/m3202td2/wp-admin/">Admin. du site</a></li>
              <li><a href="http://localhost/m3202td2/wp-login.php?action=logout&#038;_wpnonce=55165b076c">Déconnexion</a></li>
              <li><a href="http://localhost/m3202td2/index.php/feed/">Flux <abbr title="Really Simple Syndication">RSS</abbr> des articles</a></li>
              <li><a href="http://localhost/m3202td2/index.php/comments/feed/"><abbr title="Really Simple Syndication">RSS</abbr> des commentaires</a></li>
              <li><a href="https://wpfr.net" title="Propulsé par WordPress, plate-forme de publication personnelle sémantique de pointe.">Site de WordPress-FR</a></li>
            </ul>
          </section>
        </aside><!-- .sidebar .widget-area -->
      </div><!-- .site-content -->
      <footer id="colophon" class="site-footer row" role="contentinfo"><!--TP4-->
        <nav class="main-navigation col-12" role="navigation" aria-label="Menu principal de pied"><!--TP4-->
          <div class="menu-menu-principal-container">
            <ul id="menu-menu-principal-1" class="primary-menu">
              <li class="menu-item menu-item-type-post_type menu-item-object-page menu-item-25"><a href="http://localhost/m3202td2/index.php/page-d-exemple/">Page d’exemple</a></li>
              <li class="menu-item menu-item-type-post_type menu-item-object-page menu-item-26"><a href="http://localhost/m3202td2/index.php/politique-de-confidentialite/">Politique de confidentialité</a></li>
            </ul>
          </div>
        </nav><!-- .main-navigation -->
        <div class="site-info col-12"><!--TP4-->
          <span class="site-title"><a href="http://localhost/m3202td2/" rel="home">M3202-TD2</a></span>
          <a class="privacy-policy-link" href="http://localhost/m3202td2/index.php/politique-de-confidentialite/">Politique de confidentialité</a><span role="separator" aria-hidden="true"></span>       <a href="https://wordpress.org/" class="imprint">
          Fièrement propulsé par WordPress        </a>
        </div><!-- .site-info -->
      </footer><!-- .site-footer -->
    </div><!-- .site-inner -->
  </div><!-- .site -->
  <script type='text/javascript' src='http://localhost/m3202td2/wp-includes/js/admin-bar.min.js?ver=4.9.8'></script>
  <script type='text/javascript' src='http://localhost/m3202td2/wp-content/themes/twentysixteen/js/skip-link-focus-fix.js?ver=20160816'></script>
  <script type='text/javascript' src='http://localhost/m3202td2/wp-includes/js/comment-reply.min.js?ver=4.9.8'></script>
  <script type='text/javascript'>
    /* <![CDATA[ */
    var screenReaderText = {"expand":"ouvrir le sous-menu","collapse":"fermer le sous-menu"};
    /* ]]> */
  </script>
  <script type='text/javascript' src='http://localhost/m3202td2/wp-content/themes/twentysixteen/js/functions.js?ver=20160816'></script>
  <script type='text/javascript' src='http://localhost/m3202td2/wp-includes/js/wp-embed.min.js?ver=4.9.8'></script>
    <!--[if lte IE 8]>
    <script type="text/javascript">
      document.body.className = document.body.className.replace( /(^|\s)(no-)?customize-support(?=\s|$)/, '' ) + ' no-customize-support';
    </script>
  <![endif]-->
  <!--[if gte IE 9]><!-->
  <script type="text/javascript">
    (function() {
      var request, b = document.body, c = 'className', cs = 'customize-support', rcs = new RegExp('(^|\\s+)(no-)?'+cs+'(\\s+|$)');
      
      request = true;
      
      b[c] = b[c].replace( rcs, ' ' );
        // The customizer requires postMessage and CORS (if the site is cross domain)
        b[c] += ( window.postMessage && request ? ' ' : ' no-' ) + cs;
      }());
  </script>
  <!--<![endif]-->
  <div id="wpadminbar" class="nojq nojs">
    <a class="screen-reader-shortcut" href="#wp-toolbar" tabindex="1">Aller à la barre d’outils</a>
    <div class="quicklinks" id="wp-toolbar" role="navigation" aria-label="Barre d’outils" tabindex="0">
      <ul id="wp-admin-bar-root-default" class="ab-top-menu">
        <li id="wp-admin-bar-wp-logo" class="menupop">
          <a class="ab-item" aria-haspopup="true" href="http://localhost/m3202td2/wp-admin/about.php"><span class="ab-icon"></span><span class="screen-reader-text">À propos de WordPress</span></a>
          <div class="ab-sub-wrapper">
            <ul id="wp-admin-bar-wp-logo-default" class="ab-submenu">
              <li id="wp-admin-bar-about"><a class="ab-item" href="http://localhost/m3202td2/wp-admin/about.php">À propos de WordPress</a>    </li>
            </ul>
            <ul id="wp-admin-bar-wp-logo-external" class="ab-sub-secondary ab-submenu">
              <li id="wp-admin-bar-wporg"><a class="ab-item" href="https://wpfr.net">Site de WordPress-FR</a>   </li>
              <li id="wp-admin-bar-documentation"><a class="ab-item" href="https://codex.wordpress.org/">Documentation</a>    </li>
              <li id="wp-admin-bar-support-forums"><a class="ab-item" href="https://wpfr.net/support/">Forums d’entraide</a>    </li>
              <li id="wp-admin-bar-feedback"><a class="ab-item" href="https://wordpress.org/support/forum/requests-and-feedback">Remarque</a>   </li>
            </ul>
          </div>
        </li>
        <li id="wp-admin-bar-site-name" class="menupop">
          <a class="ab-item" aria-haspopup="true" href="http://localhost/m3202td2/wp-admin/">M3202-TD2</a>
          <div class="ab-sub-wrapper">
            <ul id="wp-admin-bar-site-name-default" class="ab-submenu">
              <li id="wp-admin-bar-dashboard"><a class="ab-item" href="http://localhost/m3202td2/wp-admin/">Tableau de bord</a>   </li>
            </ul>
            <ul id="wp-admin-bar-appearance" class="ab-submenu">
              <li id="wp-admin-bar-themes"><a class="ab-item" href="http://localhost/m3202td2/wp-admin/themes.php">Thèmes</a>   </li>
              <li id="wp-admin-bar-widgets"><a class="ab-item" href="http://localhost/m3202td2/wp-admin/widgets.php">Widgets</a>    </li>
              <li id="wp-admin-bar-menus"><a class="ab-item" href="http://localhost/m3202td2/wp-admin/nav-menus.php">Menus</a>    </li>
              <li id="wp-admin-bar-background" class="hide-if-customize"><a class="ab-item" href="http://localhost/m3202td2/wp-admin/themes.php?page=custom-background">Arrière-plan</a>    </li>
              <li id="wp-admin-bar-header" class="hide-if-customize"><a class="ab-item" href="http://localhost/m3202td2/wp-admin/themes.php?page=custom-header">En-tête</a>   </li>
            </ul>
          </div>
        </li>
        <li id="wp-admin-bar-customize" class="hide-if-no-customize"><a class="ab-item" href="http://localhost/m3202td2/wp-admin/customize.php?url=http%3A%2F%2Flocalhost%2Fm3202td2%2Findex.php%2F2018%2F10%2F21%2Fneuvieme-article%2F">Personnaliser</a>    </li>
        <li id="wp-admin-bar-updates"><a class="ab-item" href="http://localhost/m3202td2/wp-admin/update-core.php" title="1 mise à jour d’extension, Mettre à jour les traductions"><span class="ab-icon"></span><span class="ab-label">2</span><span class="screen-reader-text">1 mise à jour d’extension, Mettre à jour les traductions</span></a>    </li>
        <li id="wp-admin-bar-comments"><a class="ab-item" href="http://localhost/m3202td2/wp-admin/edit-comments.php"><span class="ab-icon"></span><span class="ab-label awaiting-mod pending-count count-0" aria-hidden="true">0</span><span class="screen-reader-text">0 commentaire en attente de modération</span></a>    </li>
        <li id="wp-admin-bar-new-content" class="menupop">
          <a class="ab-item" aria-haspopup="true" href="http://localhost/m3202td2/wp-admin/post-new.php"><span class="ab-icon"></span><span class="ab-label">Créer</span></a>
          <div class="ab-sub-wrapper">
            <ul id="wp-admin-bar-new-content-default" class="ab-submenu">
              <li id="wp-admin-bar-new-post"><a class="ab-item" href="http://localhost/m3202td2/wp-admin/post-new.php">Article</a>    </li>
              <li id="wp-admin-bar-new-media"><a class="ab-item" href="http://localhost/m3202td2/wp-admin/media-new.php">Fichier média</a>    </li>
              <li id="wp-admin-bar-new-page"><a class="ab-item" href="http://localhost/m3202td2/wp-admin/post-new.php?post_type=page">Page</a>    </li>
              <li id="wp-admin-bar-new-user"><a class="ab-item" href="http://localhost/m3202td2/wp-admin/user-new.php">Utilisateur</a>    </li>
            </ul>
          </div>
        </li>
        <li id="wp-admin-bar-edit"><a class="ab-item" href="http://localhost/m3202td2/wp-admin/post.php?post=21&#038;action=edit">Modifier l’article</a>    </li>
      </ul>
      <ul id="wp-admin-bar-top-secondary" class="ab-top-secondary ab-top-menu">
        <li id="wp-admin-bar-search" class="admin-bar-search">
          <div class="ab-item ab-empty-item" tabindex="-1">
            <form action="http://localhost/m3202td2/" method="get" id="adminbarsearch"><input class="adminbar-input" name="s" id="adminbar-search" type="text" value="" maxlength="150" /><label for="adminbar-search" class="screen-reader-text">Recherche</label><input type="submit" class="adminbar-button" value="Recherche"/></form>
          </div>
        </li>
        <li id="wp-admin-bar-my-account" class="menupop with-avatar">
          <a class="ab-item" aria-haspopup="true" href="http://localhost/m3202td2/wp-admin/profile.php">Bonjour, <span class="display-name">m3202</span><img alt='' src='http://2.gravatar.com/avatar/2db4fda28310966cc40afc3e7ebab1a0?s=26&#038;d=mm&#038;r=g' srcset='http://2.gravatar.com/avatar/2db4fda28310966cc40afc3e7ebab1a0?s=52&#038;d=mm&#038;r=g 2x' class='avatar avatar-26 photo' height='26' width='26' /></a>
          <div class="ab-sub-wrapper">
            <ul id="wp-admin-bar-user-actions" class="ab-submenu">
              <li id="wp-admin-bar-user-info"><a class="ab-item" tabindex="-1" href="http://localhost/m3202td2/wp-admin/profile.php"><img alt='' src='http://2.gravatar.com/avatar/2db4fda28310966cc40afc3e7ebab1a0?s=64&#038;d=mm&#038;r=g' srcset='http://2.gravatar.com/avatar/2db4fda28310966cc40afc3e7ebab1a0?s=128&#038;d=mm&#038;r=g 2x' class='avatar avatar-64 photo' height='64' width='64' /><span class='display-name'>m3202</span></a>   </li>
              <li id="wp-admin-bar-edit-profile"><a class="ab-item" href="http://localhost/m3202td2/wp-admin/profile.php">Modifier mon profil</a>   </li>
              <li id="wp-admin-bar-logout"><a class="ab-item" href="http://localhost/m3202td2/wp-login.php?action=logout&#038;_wpnonce=55165b076c">Se déconnecter</a>   </li>
            </ul>
          </div>
        </li>
      </ul>
    </div>
    <a class="screen-reader-shortcut" href="http://localhost/m3202td2/wp-login.php?action=logout&#038;_wpnonce=55165b076c">Se déconnecter</a>
  </div>
</body>
</html>
Exercice 2

Dans cet exercice vous allez modifier votre thème enfant «twentysixteen-child-tp4» pour obtenir le code HTML précédent pour les pages web affichant un article.
J'ai marqué avec un commentaire () les lignes à modifier.
Vous devez trouver vous-même les fichiers PHP qu'il faut modifier. Notez que, comme on veut modifier seulement les articles, il faudra créer de nouveaux fichiers (header-single.php, footer-single.php, etc) qui seront inclus seulement dans single.php.
Envoyez le répertoire contenant votre thème enfant.
Astuce Vous aurez peut-être besoin de comparer deux documents semblables : le code HTML que je vous ai fourni, et celui généré par votre thème enfant. Pour comparer deux documents facilement vous pouvez utiliser le logiciel Meld ou l'outil en ligne Text Compare!.