M3202 – TD #3

DĂ©veloppement web S3

Les fichiers modèles

Les fichiers modèles (template files) servent à générer les fichiers HTML à partir de la base de données. Il y en a plusieurs :

index.php
le fichier principal
page.php, single.php
pour afficher une seule page/article
header.php, footer.php, sidebar.php
pour générer des parties du code HTML
searchform.php, search.php
pour afficher un formulaire de recherche et son résultat
archive.php
afficher la liste d'articles triés par mois
404.php
la page d'erreur 404
comments.php
pour les commentaires
category.php, tag.php
liste d'articles pour une catégorie/étiquette
image.php
pour afficher une image

Les fichiers modèles utilisent de fonctions définies par WordPress, comme get_header(), is_home(), etc.

Pour voir ce qu'elles font, on peut chercher dans le code source de WordPress. Par exemple, la fonction get_header() est définie dans le fichier wp-includes/general-template.php.

Sinon, on peut les chercher sur la documentation de WordPress

Le fichier modèle index.php

Voyons en détail le fichier modèle index.php du thème «Twenty Nineteen». 

<?php
/**
 * The main template file
 *
 * This is the most generic template file in a WordPress theme
 * and one of the two required files for a theme (the other being style.css).
 * It is used to display a page when nothing more specific matches a query.
 * E.g., it puts together the home page when no home.php file exists.
 *
 * @link https://developer.wordpress.org/themes/basics/template-hierarchy/
 *
 * @package WordPress
 * @subpackage Twenty_Nineteen
 * @since 1.0.0
 */

get_header();
?>

  <section id="primary" class="content-area">
    <main id="main" class="site-main">

    <?php
    if ( have_posts() ) {

      // Load posts loop.
      while ( have_posts() ) {
        the_post();
        get_template_part( 'template-parts/content/content' );
      }

      // Previous/next page navigation.
      twentynineteen_the_posts_navigation();

    } else {

      // If no content, include the "No posts found" template.
      get_template_part( 'template-parts/content/content', 'none' );

    }
    ?>

    </main><!-- .site-main -->
  </section><!-- .content-area -->

<?php
get_footer();

Le code HTML généré : 

<!doctype html>
<html lang="en-US">
<head>
  <meta charset="UTF-8" />
  <meta name="viewport" content="width=device-width, initial-scale=1" />
  <link rel="profile" href="https://gmpg.org/xfn/11" />
  <title>Blanksite &#8211; Just another WordPress site</title>
<meta name='robots' content='noindex,follow' />
<link rel='dns-prefetch' href='//s.w.org' />
<link rel="alternate" type="application/rss+xml" title="Blanksite &raquo; Feed" href="http://localhost/m3202-2019/blanksite/feed/" />
<link rel="alternate" type="application/rss+xml" title="Blanksite &raquo; Comments Feed" href="http://localhost/m3202-2019/blanksite/comments/feed/" />
    <script type="text/javascript">
      window._wpemojiSettings = {"baseUrl":"https:\/\/s.w.org\/images\/core\/emoji\/12.0.0-1\/72x72\/","ext":".png","svgUrl":"https:\/\/s.w.org\/images\/core\/emoji\/12.0.0-1\/svg\/","svgExt":".svg","source":{"concatemoji":"http:\/\/localhost\/m3202-2019\/blanksite\/wp-includes\/js\/wp-emoji-release.min.js?ver=5.2.3"}};
      !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([55357,56424,55356,57342,8205,55358,56605,8205,55357,56424,55356,57340],[55357,56424,55356,57342,8203,55358,56605,8203,55357,56424,55356,57340]),!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='wp-block-library-css'  href='http://localhost/m3202-2019/blanksite/wp-includes/css/dist/block-library/style.min.css?ver=5.2.3' type='text/css' media='all' />
<link rel='stylesheet' id='wp-block-library-theme-css'  href='http://localhost/m3202-2019/blanksite/wp-includes/css/dist/block-library/theme.min.css?ver=5.2.3' type='text/css' media='all' />
<link rel='stylesheet' id='twentynineteen-style-css'  href='http://localhost/m3202-2019/blanksite/wp-content/themes/twentynineteen/style.css?ver=1.4' type='text/css' media='all' />
<link rel='stylesheet' id='twentynineteen-print-style-css'  href='http://localhost/m3202-2019/blanksite/wp-content/themes/twentynineteen/print.css?ver=1.4' type='text/css' media='print' />
<link rel='https://api.w.org/' href='http://localhost/m3202-2019/blanksite/wp-json/' />
<link rel="EditURI" type="application/rsd+xml" title="RSD" href="http://localhost/m3202-2019/blanksite/xmlrpc.php?rsd" />
<link rel="wlwmanifest" type="application/wlwmanifest+xml" href="http://localhost/m3202-2019/blanksite/wp-includes/wlwmanifest.xml" /> 
<meta name="generator" content="WordPress 5.2.3" />
    <style type="text/css">.recentcomments a{display:inline !important;padding:0 !important;margin:0 !important;}</style>
    </head>

<body class="home blog wp-embed-responsive hfeed image-filters-enabled">
<div id="page" class="site">
  <a class="skip-link screen-reader-text" href="#content">Skip to content</a>

    <header id="masthead" class="site-header">

      <div class="site-branding-container">
        <div class="site-branding">

                <h1 class="site-title"><a href="http://localhost/m3202-2019/blanksite/" rel="home">Blanksite</a></h1>
      
        <p class="site-description">
        Just another WordPress site     </p>
        <nav id="site-navigation" class="main-navigation" aria-label="Top Menu">
      <div class="menu-menu-des-pages-container"><ul id="menu-menu-des-pages" class="main-menu"><li id="menu-item-10" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-10"><a href="http://localhost/m3202-2019/blanksite/un-tres-tres-tres-treeeees-long-titre/">Un très très très trèeeees long titre</a></li>
<li id="menu-item-19" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-has-children menu-item-19"><a href="http://localhost/m3202-2019/blanksite/page-2/" aria-haspopup="true" aria-expanded="false">Page #2</a><button class="submenu-expand" tabindex="-1"><svg class="svg-icon" width="24" height="24" aria-hidden="true" role="img" focusable="false" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path d="M7.41 8.59L12 13.17l4.59-4.58L18 10l-6 6-6-6 1.41-1.41z"></path><path fill="none" d="M0 0h24v24H0V0z"></path></svg></button>
<ul class="sub-menu">
  <li id="menu-item--1" class="mobile-parent-nav-menu-item menu-item--1"><button class="menu-item-link-return" tabindex="-1"><svg class="svg-icon" width="24" height="24" aria-hidden="true" role="img" focusable="false" viewBox="0 0 24 24" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"><path d="M15.41 7.41L14 6l-6 6 6 6 1.41-1.41L10.83 12z"></path><path d="M0 0h24v24H0z" fill="none"></path></svg>Page #2</button></li>
  <li id="menu-item-20" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-20"><a href="http://localhost/m3202-2019/blanksite/page-2/page-2-b/">Page #2.b</a></li>
  <li id="menu-item-21" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-21"><a href="http://localhost/m3202-2019/blanksite/page-2/page-2-a/">Page #2.a</a></li>
</ul>
</li>
</ul></div><div class="main-menu-more"><ul class="main-menu"><li class="menu-item menu-item-has-children"><button class="submenu-expand main-menu-more-toggle is-empty" tabindex="-1" aria-label="More" aria-haspopup="true" aria-expanded="false"><span class="screen-reader-text">More</span><svg class="svg-icon" width="24" height="24" aria-hidden="true" role="img" focusable="false" width="24" height="24" xmlns="http://www.w3.org/2000/svg"><g fill="none" fill-rule="evenodd"><path d="M0 0h24v24H0z"/><path fill="currentColor" fill-rule="nonzero" d="M12 2c5.52 0 10 4.48 10 10s-4.48 10-10 10S2 17.52 2 12 6.48 2 12 2zM6 14a2 2 0 1 0 0-4 2 2 0 0 0 0 4zm6 0a2 2 0 1 0 0-4 2 2 0 0 0 0 4zm6 0a2 2 0 1 0 0-4 2 2 0 0 0 0 4z"/></g></svg></button><ul class="sub-menu hidden-links"><li id="menu-item--1" class="mobile-parent-nav-menu-item menu-item--1"><button class="menu-item-link-return"><svg class="svg-icon" width="24" height="24" aria-hidden="true" role="img" focusable="false" viewBox="0 0 24 24" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"><path d="M15.41 7.41L14 6l-6 6 6 6 1.41-1.41L10.83 12z"></path><path d="M0 0h24v24H0z" fill="none"></path></svg>Back</button></li></ul></li></ul></div>   </nav><!-- #site-navigation -->
    </div><!-- .site-branding -->
      </div><!-- .site-branding-container -->

          </header><!-- #masthead -->

  <div id="content" class="site-content">

  <section id="primary" class="content-area">
    <main id="main" class="site-main">

    
<article id="post-25" class="post-25 post type-post status-publish format-standard hentry category-uncategorized entry">
  <header class="entry-header">
    <h2 class="entry-title"><a href="http://localhost/m3202-2019/blanksite/titre-en-h1-jespere/" rel="bookmark">Titre, en h1 j&#8217;espère</a></h2>  </header><!-- .entry-header -->

  
  <div class="entry-content">
    
<p style="background-color:#3998c1" class="has-background has-text-color has-background has-secondary-color has-white-background-color has-drop-cap has-dark-gray-color has-light-gray-background-color">Texte du paragraphe. Modifié <a href="http://localhost/m3202-2019/blanksite/un-tres-tres-tres-treeeees-long-titre/" target="_blank" rel="noreferrer noopener" aria-label="directement (opens in a new tab)">directement</a> en html<br />Tu vois?</p>



<h4 style="text-align:center">Petit titre</h4>



<blockquote class="wp-block-quote is-style-default"><p>Born to be alive</p><cite>Patrick Sebastien</cite></blockquote>



 <a href="http://localhost/m3202-2019/blanksite/titre-en-h1-jespere/#more-25" class="more-link">plus</a><div class="page-links">Pages: <a href="http://localhost/m3202-2019/blanksite/titre-en-h1-jespere/" class="post-page-numbers">1</a> <a href="http://localhost/m3202-2019/blanksite/titre-en-h1-jespere/2/" class="post-page-numbers">2</a></div>  </div><!-- .entry-content -->

  <footer class="entry-footer">
    <span class="byline"><svg class="svg-icon" width="16" height="16" aria-hidden="true" role="img" focusable="false" viewBox="0 0 24 24" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"><path d="M12 12c2.21 0 4-1.79 4-4s-1.79-4-4-4-4 1.79-4 4 1.79 4 4 4zm0 2c-2.67 0-8 1.34-8 4v2h16v-2c0-2.66-5.33-4-8-4z"></path><path d="M0 0h24v24H0z" fill="none"></path></svg><span class="screen-reader-text">Posted by</span><span class="author vcard"><a class="url fn n" href="http://localhost/m3202-2019/blanksite/author/m3202/">m3202</a></span></span><span class="posted-on"><svg class="svg-icon" width="16" height="16" aria-hidden="true" role="img" focusable="false" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><defs><path id="a" d="M0 0h24v24H0V0z"></path></defs><clipPath id="b"><use xlink:href="#a" overflow="visible"></use></clipPath><path clip-path="url(#b)" d="M12 2C6.5 2 2 6.5 2 12s4.5 10 10 10 10-4.5 10-10S17.5 2 12 2zm4.2 14.2L11 13V7h1.5v5.2l4.5 2.7-.8 1.3z"></path></svg><a href="http://localhost/m3202-2019/blanksite/titre-en-h1-jespere/" rel="bookmark"><time class="entry-date published" datetime="2019-10-02T06:51:56+00:00">October 2, 2019</time><time class="updated" datetime="2019-10-02T07:31:10+00:00">October 2, 2019</time></a></span><span class="cat-links"><svg class="svg-icon" width="16" height="16" aria-hidden="true" role="img" focusable="false" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path d="M10 4H4c-1.1 0-1.99.9-1.99 2L2 18c0 1.1.9 2 2 2h16c1.1 0 2-.9 2-2V8c0-1.1-.9-2-2-2h-8l-2-2z"></path><path d="M0 0h24v24H0z" fill="none"></path></svg><span class="screen-reader-text">Posted in</span><a href="http://localhost/m3202-2019/blanksite/category/uncategorized/" rel="category tag">Uncategorized</a></span><span class="comments-link"><svg class="svg-icon" width="16" height="16" aria-hidden="true" role="img" focusable="false" viewBox="0 0 24 24" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"><path d="M21.99 4c0-1.1-.89-2-1.99-2H4c-1.1 0-2 .9-2 2v12c0 1.1.9 2 2 2h14l4 4-.01-18z"></path><path d="M0 0h24v24H0z" fill="none"></path></svg><a href="http://localhost/m3202-2019/blanksite/titre-en-h1-jespere/#respond">Leave a comment<span class="screen-reader-text"> on Titre, en h1 j&#8217;espère</span></a></span>  </footer><!-- .entry-footer -->
</article><!-- #post-25 -->

<article id="post-5" class="post-5 post type-post status-publish format-standard has-post-thumbnail hentry category-sans-categorie category-uncategorized entry">
  <header class="entry-header">
    <h2 class="entry-title"><a href="http://localhost/m3202-2019/blanksite/titre-de-larticle/" rel="bookmark">Titre de l&#8217;article</a></h2> </header><!-- .entry-header -->

  
    <figure class="post-thumbnail">
      <a class="post-thumbnail-inner" href="http://localhost/m3202-2019/blanksite/titre-de-larticle/" aria-hidden="true" tabindex="-1">
        <img width="224" height="279" src="http://localhost/m3202-2019/blanksite/wp-content/uploads/2019/10/rana-e1569998098187.jpg" class="attachment-post-thumbnail size-post-thumbnail wp-post-image" alt="" sizes="(max-width: 34.9rem) calc(100vw - 2rem), (max-width: 53rem) calc(8 * (100vw / 12)), (min-width: 53rem) calc(6 * (100vw / 12)), 100vw" />     </a>
    </figure>

      
  <div class="entry-content">
    
<p style="text-align:left">Un paragraphe avec du texte. Attends&#8230; Le <strong>Lorem Ipsum</strong> est simplement du faux texte employé  dans la composition et la mise en page avant impression. Le Lorem Ipsum  est le faux texte standard de l&#8217;imprimerie depuis les années 1500, quand  un imprimeur anonyme assembla ensemble des morceaux de texte pour  réaliser un livre spécimen de polices de texte. Il n&#8217;a pas fait que  survivre cinq siècles, mais s&#8217;est aussi adapté à la bureautique  informatique, sans que son contenu n&#8217;en soit modifié. Il a été  popularisé dans les années 1960 grâce à la vente de feuilles Letraset  contenant des passages du Lorem Ipsum, et, plus récemment, par son  inclusion dans des applications de mise en page de texte, comme Aldus  PageMaker. </p>



<hr class="wp-block-separator">



<ul><li>Un</li><li>deux</li><li>troisss</li></ul>
  </div><!-- .entry-content -->

  <footer class="entry-footer">
    <span class="byline"><svg class="svg-icon" width="16" height="16" aria-hidden="true" role="img" focusable="false" viewBox="0 0 24 24" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"><path d="M12 12c2.21 0 4-1.79 4-4s-1.79-4-4-4-4 1.79-4 4 1.79 4 4 4zm0 2c-2.67 0-8 1.34-8 4v2h16v-2c0-2.66-5.33-4-8-4z"></path><path d="M0 0h24v24H0z" fill="none"></path></svg><span class="screen-reader-text">Posted by</span><span class="author vcard"><a class="url fn n" href="http://localhost/m3202-2019/blanksite/author/m3202/">m3202</a></span></span><span class="posted-on"><svg class="svg-icon" width="16" height="16" aria-hidden="true" role="img" focusable="false" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><defs><path id="a" d="M0 0h24v24H0V0z"></path></defs><clipPath id="b"><use xlink:href="#a" overflow="visible"></use></clipPath><path clip-path="url(#b)" d="M12 2C6.5 2 2 6.5 2 12s4.5 10 10 10 10-4.5 10-10S17.5 2 12 2zm4.2 14.2L11 13V7h1.5v5.2l4.5 2.7-.8 1.3z"></path></svg><a href="http://localhost/m3202-2019/blanksite/titre-de-larticle/" rel="bookmark"><time class="entry-date published" datetime="2019-10-01T12:38:50+00:00">October 1, 2019</time><time class="updated" datetime="2019-10-02T06:29:06+00:00">October 2, 2019</time></a></span><span class="cat-links"><svg class="svg-icon" width="16" height="16" aria-hidden="true" role="img" focusable="false" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path d="M10 4H4c-1.1 0-1.99.9-1.99 2L2 18c0 1.1.9 2 2 2h16c1.1 0 2-.9 2-2V8c0-1.1-.9-2-2-2h-8l-2-2z"></path><path d="M0 0h24v24H0z" fill="none"></path></svg><span class="screen-reader-text">Posted in</span><a href="http://localhost/m3202-2019/blanksite/category/sans-categorie/" rel="category tag">Sans catégorie</a>, <a href="http://localhost/m3202-2019/blanksite/category/uncategorized/" rel="category tag">Uncategorized</a></span><span class="comments-link"><svg class="svg-icon" width="16" height="16" aria-hidden="true" role="img" focusable="false" viewBox="0 0 24 24" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"><path d="M21.99 4c0-1.1-.89-2-1.99-2H4c-1.1 0-2 .9-2 2v12c0 1.1.9 2 2 2h14l4 4-.01-18z"></path><path d="M0 0h24v24H0z" fill="none"></path></svg><a href="http://localhost/m3202-2019/blanksite/titre-de-larticle/#respond">Leave a comment<span class="screen-reader-text"> on Titre de l&#8217;article</span></a></span> </footer><!-- .entry-footer -->
</article><!-- #post-5 -->

<article id="post-1" class="post-1 post type-post status-publish format-standard hentry category-uncategorized entry">
  <header class="entry-header">
    <h2 class="entry-title"><a href="http://localhost/m3202-2019/blanksite/hello-world/" rel="bookmark">Hello world!</a></h2> </header><!-- .entry-header -->

  
  <div class="entry-content">
    
<p>Welcome to WordPress. This is your first post. Edit or delete it, then start writing!</p>
  </div><!-- .entry-content -->

  <footer class="entry-footer">
    <span class="byline"><svg class="svg-icon" width="16" height="16" aria-hidden="true" role="img" focusable="false" viewBox="0 0 24 24" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"><path d="M12 12c2.21 0 4-1.79 4-4s-1.79-4-4-4-4 1.79-4 4 1.79 4 4 4zm0 2c-2.67 0-8 1.34-8 4v2h16v-2c0-2.66-5.33-4-8-4z"></path><path d="M0 0h24v24H0z" fill="none"></path></svg><span class="screen-reader-text">Posted by</span><span class="author vcard"><a class="url fn n" href="http://localhost/m3202-2019/blanksite/author/m3202/">m3202</a></span></span><span class="posted-on"><svg class="svg-icon" width="16" height="16" aria-hidden="true" role="img" focusable="false" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><defs><path id="a" d="M0 0h24v24H0V0z"></path></defs><clipPath id="b"><use xlink:href="#a" overflow="visible"></use></clipPath><path clip-path="url(#b)" d="M12 2C6.5 2 2 6.5 2 12s4.5 10 10 10 10-4.5 10-10S17.5 2 12 2zm4.2 14.2L11 13V7h1.5v5.2l4.5 2.7-.8 1.3z"></path></svg><a href="http://localhost/m3202-2019/blanksite/hello-world/" rel="bookmark"><time class="entry-date published updated" datetime="2019-10-01T07:47:09+00:00">October 1, 2019</time></a></span><span class="cat-links"><svg class="svg-icon" width="16" height="16" aria-hidden="true" role="img" focusable="false" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path d="M10 4H4c-1.1 0-1.99.9-1.99 2L2 18c0 1.1.9 2 2 2h16c1.1 0 2-.9 2-2V8c0-1.1-.9-2-2-2h-8l-2-2z"></path><path d="M0 0h24v24H0z" fill="none"></path></svg><span class="screen-reader-text">Posted in</span><a href="http://localhost/m3202-2019/blanksite/category/uncategorized/" rel="category tag">Uncategorized</a></span><span class="comments-link"><svg class="svg-icon" width="16" height="16" aria-hidden="true" role="img" focusable="false" viewBox="0 0 24 24" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"><path d="M21.99 4c0-1.1-.89-2-1.99-2H4c-1.1 0-2 .9-2 2v12c0 1.1.9 2 2 2h14l4 4-.01-18z"></path><path d="M0 0h24v24H0z" fill="none"></path></svg><a href="http://localhost/m3202-2019/blanksite/hello-world/#comments">1 Comment<span class="screen-reader-text"> on Hello world!</span></a></span> </footer><!-- .entry-footer -->
</article><!-- #post-1 -->

    </main><!-- .site-main -->
  </section><!-- .content-area -->


  </div><!-- #content -->

  <footer id="colophon" class="site-footer">
    
  <aside class="widget-area" role="complementary" aria-label="Footer">
              <div class="widget-column footer-widget-1">
          <section id="search-2" class="widget widget_search"><form role="search" method="get" class="search-form" action="http://localhost/m3202-2019/blanksite/">
        <label>
          <span class="screen-reader-text">Search for:</span>
          <input type="search" class="search-field" placeholder="Search &hellip;" value="" name="s" />
        </label>
        <input type="submit" class="search-submit" value="Search" />
      </form></section>   <section id="recent-posts-2" class="widget widget_recent_entries">    <h2 class="widget-title">Recent Posts</h2>    <ul>
                      <li>
          <a href="http://localhost/m3202-2019/blanksite/titre-en-h1-jespere/">Titre, en h1 j&#8217;espère</a>
                  </li>
                      <li>
          <a href="http://localhost/m3202-2019/blanksite/titre-de-larticle/">Titre de l&#8217;article</a>
                  </li>
                      <li>
          <a href="http://localhost/m3202-2019/blanksite/hello-world/">Hello world!</a>
                  </li>
          </ul>
    </section><section id="recent-comments-2" class="widget widget_recent_comments"><h2 class="widget-title">Recent Comments</h2><ul id="recentcomments"><li class="recentcomments"><span class="comment-author-link"><a href='https://wordpress.org/' rel='external nofollow' class='url'>A WordPress Commenter</a></span> on <a href="http://localhost/m3202-2019/blanksite/hello-world/#comment-1">Hello world!</a></li></ul></section><section id="archives-2" class="widget widget_archive"><h2 class="widget-title">Archives</h2>   <ul>
        <li><a href='http://localhost/m3202-2019/blanksite/2019/10/'>October 2019</a></li>
    </ul>
      </section><section id="categories-2" class="widget widget_categories"><h2 class="widget-title">Categories</h2>    <ul>
        <li class="cat-item cat-item-2"><a href="http://localhost/m3202-2019/blanksite/category/sans-categorie/">Sans catégorie</a>
</li>
  <li class="cat-item cat-item-1"><a href="http://localhost/m3202-2019/blanksite/category/uncategorized/">Uncategorized</a>
</li>
    </ul>
      </section><section id="meta-2" class="widget widget_meta"><h2 class="widget-title">Meta</h2>      <ul>
            <li><a href="http://localhost/m3202-2019/blanksite/wp-login.php">Log in</a></li>
      <li><a href="http://localhost/m3202-2019/blanksite/feed/">Entries <abbr title="Really Simple Syndication">RSS</abbr></a></li>
      <li><a href="http://localhost/m3202-2019/blanksite/comments/feed/">Comments <abbr title="Really Simple Syndication">RSS</abbr></a></li>
      <li><a href="https://wordpress.org/" title="Powered by WordPress, state-of-the-art semantic personal publishing platform.">WordPress.org</a></li>     </ul>
      </section>          </div>
          </aside><!-- .widget-area -->

    <div class="site-info">
                    <a class="site-name" href="http://localhost/m3202-2019/blanksite/" rel="home">Blanksite</a>,
            <a href="https://wordpress.org/" class="imprint">
        Proudly powered by WordPress.     </a>
                </div><!-- .site-info -->
  </footer><!-- #colophon -->

</div><!-- #page -->

<script type='text/javascript' src='http://localhost/m3202-2019/blanksite/wp-content/themes/twentynineteen/js/priority-menu.js?ver=1.1'></script>
<script type='text/javascript' src='http://localhost/m3202-2019/blanksite/wp-content/themes/twentynineteen/js/touch-keyboard-navigation.js?ver=1.1'></script>
<script type='text/javascript' src='http://localhost/m3202-2019/blanksite/wp-includes/js/wp-embed.min.js?ver=5.2.3'></script>
  <script>
  /(trident|msie)/i.test(navigator.userAgent)&&document.getElementById&&window.addEventListener&&window.addEventListener("hashchange",function(){var t,e=location.hash.substring(1);/^[A-z0-9_-]+$/.test(e)&&(t=document.getElementById(e))&&(/^(?:a|select|input|button|textarea)$/i.test(t.tagName)||(t.tabIndex=-1),t.focus())},!1);
  </script>
  
</body>
</html>

index.php contient de fonctions de WordPress : get_header(), have_posts(), get_template_part(), twentynineteen_the_posts_navigation(), etc.

Exercice #1

La fonction get_header() inclut le fichier header.php 

<?php
/**
 * The header for our theme
 *
 * This is the template that displays all of the <head> section and everything up until <div id="content">
 *
 * @link https://developer.wordpress.org/themes/basics/template-files/#template-partials
 *
 * @package WordPress
 * @subpackage Twenty_Nineteen
 * @since 1.0.0
 */
?><!doctype html>
<html <?php language_attributes(); ?>>
<head>
  <meta charset="<?php bloginfo( 'charset' ); ?>" />
  <meta name="viewport" content="width=device-width, initial-scale=1" />
  <link rel="profile" href="https://gmpg.org/xfn/11" />
  <?php wp_head(); ?>
</head>

<body <?php body_class(); ?>>
<?php wp_body_open(); ?>
<div id="page" class="site">
  <a class="skip-link screen-reader-text" href="#content"><?php _e( 'Skip to content', 'twentynineteen' ); ?></a>

    <header id="masthead" class="<?php echo is_singular() && twentynineteen_can_show_post_thumbnail() ? 'site-header featured-image' : 'site-header'; ?>">

      <div class="site-branding-container">
        <?php get_template_part( 'template-parts/header/site', 'branding' ); ?>
      </div><!-- .site-branding-container -->

      <?php if ( is_singular() && twentynineteen_can_show_post_thumbnail() ) : ?>
        <div class="site-featured-image">
          <?php
            twentynineteen_post_thumbnail();
            the_post();
            $discussion = ! is_page() && twentynineteen_can_show_post_thumbnail() ? twentynineteen_get_discussion_data() : null;

            $classes = 'entry-header';
          if ( ! empty( $discussion ) && absint( $discussion->responses ) > 0 ) {
            $classes = 'entry-header has-discussion';
          }
          ?>
          <div class="<?php echo $classes; ?>">
            <?php get_template_part( 'template-parts/header/entry', 'header' ); ?>
          </div><!-- .entry-header -->
          <?php rewind_posts(); ?>
        </div>
      <?php endif; ?>
    </header><!-- #masthead -->

  <div id="content" class="site-content">

Exercice #2

Exercice #3

Les sous-répertoires d'un thème

Le répertoire du thème contient aussi de sous-répertoires :

template-parts/
contient des sous-parties des fichiers modèle
css/, sass/
pour plus de feuilles de style
js/, javascript/
pour les fichiers JS
inc/, includes/
pour les fichiers PHP

Exercice #4

Conclusion

  • Le code HTML des pages web est gĂ©nĂ©rĂ© avec les fichiers modèle.
  • Ces fichiers utilisent de fonctions PHP de WordPress pour intĂ©ragir avec la base de donnĂ©es.
  • La description des ces fonctions se trouve dans la documentation de WordPress.