WordPress

Comment créer un thème WordPress facilement sans s’y connaître ?

Introduction

Les thèmes WordPress sont un ensemble de fichiers qui définissent la mise en page de votre site. Un thème comprend du HTML, PHP et CSS, et utilise souvent aussi du JavaScript / jQuery.

Dans ce tutoriel WordPress, vous apprendrez à créer un thème WordPress en utilisant HTML5, CSS3 et des principes de conception responsive. Vous apprendrez également à séparer les différentes parties de votre thème en «templates».

Les thèmes, comme les plugins, sont distincts du code WordPress principal. Les thèmes permettent à votre site Web d’avoir une mise en page cohérente pour chaque page et chaque article, et peuvent être modifiés rapidement pour modifier l’apparence de votre site. Pour afficher des informations à partir de WordPress ou le contenu d’un article, vous devez utiliser des tags de templates fournis par WordPress, et cela sera expliqué dans ce didacticiel.

Après avoir terminé ce tutoriel, il est recommandé de suivre le tutoriel sur comment créer un thème enfant WordPress pour étendre ce que vous avez appris ici. Le thème que vous créez dans ce tutoriel vous donnera des bonnes bases à utiliser dans le tutoriel sur le thème enfant.

Ce dont vous aurez besoin

Pour compléter les étapes de ce tutoriel de développement de thème WordPress, vous aurez besoin d’un éditeur de texte tel que Notepad ++ ou NetBeans. Vous aurez également besoin d’un accès FTP à votre compte d’hébergement et d’une installation WordPress fonctionnelle en cours d’exécution .

Il est également recommandé de télécharger la cheatsheet CSS (en anglais) et de la consulter puisque dans ce tutoriel, vous éditerez le fichier WordPress style.css .

Qu’est-ce que HTML5 et pourquoi vous devriez l’utiliser?

HTML5 est la dernière version de la langue de balisage Web HTML et offre un excellent ensemble de fonctionnalités modernes qui permettent d’afficher plus facilement votre contenu sur n’importe quel ordinateur, ordinateur portable, tablette ou téléphone portable.

Le plus grand changement est qu’il existe un nouvel ensemble d’éléments HTML sémantiques. Par exemple, le pied de page de n’importe quelle page HTML peut maintenant être défini à l’aide de l’ élément <footer></footer> , ce qui indique au navigateur que le contenu contenu figure dans le footer/pied de page. Dans les anciennes versions de HTML, le contenu du footer était créé à l’aide d’éléments génériques tels que <div></div> .

Un document HTML5 de base ressemblera à ceci:

<!DOCTYPE html>
<html lang="en">
  <head>
    <title>My HTML5 Page</title>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="stylesheet" href="css/normalize.min.css">
    <link rel="stylesheet" href="css/main.css">
  </head>
  <body>
    <header>
      <h1>My Website</h1>
    </header>
    <main>
      <section>
        <header>
          <h2>My Articles</h2>
        </header>
        <article>
          <header> 
            <h2>An Article</h2> 
          </header>
          <p class="inline-text-box">Left</p><p class="inline-text-box">Right</p>
        </article>
      </section>
    </main>
    <footer>
        <p>Copyright &copy; 2017</p>
    </footer>
  </body>
</html>

Qu’est-ce qu’un design responsive?

Un design responsive signifie que votre site Web est automatiquement affiché dans le meilleur format pour le visiteur en fonction de la taille de son écran. La mise en page de la page «répond» littéralement à l’espace disponible sur l’écran du visiteur. Le contenu est placé parfaitement afin que rien ne soit coupé, que rien ne déborde de l’écran, et que votre site Web soit aussi propre que possible.

Qu'est-ce que le design responsive?

Vous devriez penser à la mise en page de votre site Web comme une série de grilles et donner au contenu un pourcentage de la largeur de la grille. Par exemple, un div pourrait prendre 50% de l’espace disponible, plutôt que d’avoir une largeur de 800 px. Une largeur de page en fullscreen prend 100% de l’espace disponible, donc, si vous voulez disposer quatre divs en ligne équitables, chacune obtiendra 25% de l’espace.

Pour les images, vous pouvez les définir de manière à avoir une largeur maximale à 100% de leur taille réelle et régler la hauteur sur auto. Lorsque le conteneur de l’image est réduit, l’image diminue automatiquement en largeur et en hauteur.

Pour les images, en utilisant la width: 100% au lieu de la max-width: 100% amènera une image à occuper 100% de l’espace disponible au lieu de s’arrêter à sa largeur réelle en pixels. Si l’image est d’une largeur de 200px, mais dans une div qui prend 100% de l’écran, la largeur maximale signifie que l’image ne sera jamais supérieure à 200px de largeur.

/* GOOD WIDTH */
.inline-text-box {
  width: 50%;
}
/* BAD WIDTH */
.inline-text-box {
  width: 800px;
}
/* GOOD IMAGE */
img {
  max-width: 100%;
  height: auto
}
/* BAD IMAGE */
img {
  width: 100%;
  height: auto;
}

 

Pour que le thème WordPress soit pleinement responsive, vous pouvez également utiliser une fonction CSS3 appelée media queries (ou media querie). Dans les media querie, vous pouvez éventuellement définir un type de média pour y affecter (screen, print, etc.) au moins une fonction média (max-width, orientation etc.) . Les fonctionnalités des médias peuvent être enchaînées en utilisant le motclé and .

/* Media Type and Media Feature and Media Feature*/
@media only screen and (min-width: 400px) and (max-width: 800px) {
  .inline-text-box {
    width: 100%;
    display: block;
  }
}
/* Media Feature Only */
@media (max-width: 1200px) {
  .inline-text-box {
    width: 50%;
  }
}

 

  • Dans le premier exemple, le CSS sera appliqué à n’importe quel écran (moniteur, téléphone, etc.) qui a une largeur visible (la zone à l’intérieur du navigateur, et non la fenêtre entière) entre 400px et 800px.
  • Le deuxième exemple sera appliqué à tout type de média.
  • Un autre type de média est «print», ce qui signifie que le CSS n’est appliqué que si l’utilisateur regarde un aperçu avant impression de votre page.

Une liste complète des types de médias et des fonctionnalités multimédias est disponible sur le site Web Mozilla Developer Network .

Dans votre feuille de style CSS, vous définissez les règles de modification du contenu, quel contenu est modifié et comment ce contenu est modifié. Vous pouvez modifier n’importe quel attribut CSS de cette façon, comme la largeur d’une zone de texte ou la couleur de fond d’une div. Quelques exemples de règles de fonctionnalités média prioritaires:

  • max-width – la largeur maximale de la zone visible du navigateur, plus large que celle-ci et la règle ne sera pas appliquée
  • min-width – la largeur minimale pour la zone visible, inférieure à celle-ci et la règle n’est pas appliquée
  • orientation – si l’écran est en mode portrait ou paysage

Un exemple commun est le moment où vous disposez deux boxs de texte côte à côte pour que chacune prennent 50% de l’écran. Au fur et à mesure que la fenêtre du navigateur diminue, les cases s’ajustent automatiquement à 50% de la largeur de la fenêtre au lieu de disparaître sur le côté. Si la fenêtre du navigateur devient trop petite pour afficher correctement tout le texte dans ces boxs, vous pouvez leur dire de prendre 100% de la taille de la fenêtre et de l’afficher l’une sur l’autre. Vous pouvez également cacher le contenu entièrement si cela est plus approprié.

Étape 1 – Enregistrement de votre thème et de ses fichiers

Faire des modifications mineures à un thème peut provoquer des erreurs et rendre votre site inutilisable. Un problème commun est qu’après avoir apporté des modifications à votre code, vous essayiez de charger votre site Web et vous vous retrouvez face à WSOD… une page blanche quoi ! Le débogage de la page blanche peut être difficile mais jamais impossible.

Pour éviter toute perturbation de votre site Web, il est important de tester toutes les modifications sur une version hors connexion. Une fois que vos modifications sont terminées, vous pouvez télécharger la version de travail sur votre site Web en ligne (en anglais) . Vous pouvez apprendre à créer un serveur de développement WordPress local sur Windows ici (en anglais), un didacticiel pour savoir comment exécuter WordPress sur Docker (tout OS) peut être trouvé ici .

Commençons le didacticiel réel et apprenons comment créer un thème WordPress!

Les thèmes WordPress sont stockés dans leur propre dossier dans le dossier wp-content/themes.

Dans le dossier wp-content/themes , créez un nouveau dossier nommé my-theme . Le dossier que vous avez créé nécessite un nom unique, descriptif et court de manière à l’identifier facilement.

Remarque: les noms de dossier de thème ne doivent pas contenir de nombres ou d’espaces. Votre thème ne doit pas avoir le même nom de dossier qu’un autre thème. Si vous prévoyez de partager votre thème, vous devez vérifier qu’un autre thème avec ce nom n’a pas déjà été téléchargé sur l’ annuaire thématique WordPress.org .

Les thèmes WordPress peuvent être créés avec seulement deux fichiers – index.php et style.css – et WordPress les utilisera pour afficher toutes les pages et publier sur votre site.

De façon réaliste, vous voudrez que les articles, les pages et d’autres sections de votre site Web aient leur propre mise en page. Chaque section de votre site Web a un fichier propre pour contenir HTML et PHP, qui ne s’applique qu’à cette section – chaque fichier est alors appelé «template».

Si vous utilisez des types de article personnalisés, vous pouvez créer des templates qui ne s’appliquent qu’aux postes de ce type. Si vous souhaitez que les articles d’une catégorie spécifique soient conçus différemment, vous pouvez le faire en utilisant if … then… dans une boucle.

Chaque fichier de template doit utiliser le nom correct tel que défini par la documentation de WordPress.

Certains des fichiers de template (autres que index.php) :

  • header.php – contient n’importe quel code HTML qui se trouve en haut de vos pages,après <!DOCTYPE html>
  • single.php – utilisé lors de l’affichage d’un seul Article de votre blog
  • page.php – utilisé lors de l’affichage d’une seule Page de votre blog
  • comments.php – définit comment les commentaires et la zone de texte du commentaire s’affichent
  • footer.php – contient tout HTML qui se trouve au bas de vos pages, y compris </html>

Pour une liste complète de templates, visitez le manuel de développement de thème WordPress.

Maintenant que vous avez un dossier pour stocker le thème, vous devez créer des fichiers template de base.

Étape 2 – Création des fichiers de templates et de la feuille de style CSS

Dans le dossier my-theme , créez les fichiers PHP suivants:

  • header.php
  • index.php
  • footer.php
  • functions.php
  • sidebar.php
  • single.php
  • page.php

En plus des fichiers PHP, créez un nouveau fichier CSS nommé style.css (la feuille de style principale doit s’appeler style.css).

Créer des fichiers de thème WordPressLa première étape après la création de tous les fichiers est d’ajouter des informations en haut de style.css, que WordPress lira et affichera dans le panneau de contrôle d’administration.

L’information doit être écrite en tant que commentaire CSS multi-ligne, chaque header sur sa propre ligne, en commençant par un mot-clé d’header.

Il existe un certain nombre de mots-clés d’header disponibles pour définir des informations telles que l’auteur (votre nom), le site Web de l’auteur, une description du thème, le nom du thème, la version du thème, etc. Pour la liste complète des mots-clés d’header pour thèmes, visitez la page WordPress Codex – File Header .

Le format pour écrire des headers est Motclé: Information

/*
Theme Name: My Theme
Author: Hostinger
Author URI: http://www.hostinger.com/tutorials
Description: My first responsive HTML5 theme
Version: 1.0
License: GNU General Public License v3 or later
License URI: http://www.gnu.org/licenses/gpl-3.0.html
*/

REMARQUE:  les septième et huitième lignes ne sont nécessaires que si vous prévoyez de partager votre thème sur WordPress.org. Si vous utilisez le thème sur votre propre site Web, vous pouvez ignorer ces deux lignes et fermer la section des commentaires.

À ce stade, votre thème est déjà visible dans la section thème du panneau de contrôle d’administration. Vous verrez une image à damiers blanc et gris avec My Theme écrit en-dessous. Une fois votre thème terminé, vous pouvez afficher une capture d’écran à afficher ici.

Nouveau thème dans la zone Admin d'WordPressSi vous activez le thème à ce stade, vous obtiendrez une page d’accueil vierge car votre index.php est vide et aucun template n’existe.

Maintenant, nous allons ajouter une seule règle au fichier CSS qui modifie la couleur d’arrière-plan de la page.

Ajoutez une ligne vierge après la fermeture du commentaire */ à la ligne 10.

Sur la ligne suivante, la ligne 11 du fichier, écrivez ce qui suit.

* {
  box-sizing: border-box;

}

body {
    background-color: #f9f9f9;
    font-family: Helvetica;
}

La première entrée est une partie importante du style responsive. * est un caractère générique et correspond à chaque classe qui se trouve dans le document HTML. Il indique que la largeur et la hauteur finales de chaque élément sur la page devraient inclure du contenu, du padding et une bordure. Si vous ne définissez pas cela et que vous disposez de deux box larges de 50% qui sont côte à côte avec un padding ou une bordure, ils ne seront pas côte à côte car leur taille réelle est supérieure à 100%. Une box large à 100% avec 1% de padding fait en fait 102% de large, car 1% de padding est ajouté à gauche et à droite. Cette règle ajoute effectivement le padding à l’intérieur de la box au lieu de l’en sortir.

La deuxième entrée modifie simplement la couleur d’arrière-plan du blanc afin que nous puissions rapidement voir si la feuille de style est utilisée. Nous définissons également la police par défaut qui sera utilisée dans notre thème.

Étape 3 – Avant de commencer le développement

Avant de commencer à créer votre mise en page de thème WordPress, vous devez ajouter quelques morceaux de code à différents fichiers pour vous donner un bon point de départ sur lequel vous appuyer. Ces étapes ne sont pas requises, mais sont fortement recommandées.

Ces étapes auront de brèves explications afin que vous puissiez rapidement passer à la construction d’une mise en page.

D’abord, nous allons inclure un fichier CSS nommé normalize.css. Les différents navigateurs ont des paramètres par défaut différents pour les marges de la page et le padding. normalize.cs définit explicitement un certain nombre d’attributs pour s’assurer que tous les navigateurs affichent votre page de la même manière. Si vous n’utilisez pas une feuille de style pour définir ces valeurs par défaut, un problème commun est que lorsque vous essaierez de faire démarrer votre header principal en haut à gauche de votre page, il y aura effectivement un espace vide au-dessus de l’header.

functions.php

Ouvrez functions.php et  collez le code suivant

<?php
// This function enqueues the Normalize.css for use. The first parameter is a name for the stylesheet, the second is the URL. Here we
// use an online version of the css file.
function add_normalize_CSS() {
    wp_enqueue_style( 'normalize-styles', "https://cdnjs.cloudflare.com/ajax/libs/normalize/7.0.0/normalize.min.css");
}

Ensuite, vous devez activer les widgets de la barre latérale. Si vous n’incluez pas ce code, le lien du menu des widgets ne sera pas visible dans le panneau de contrôle de l’administrateur et vous ne pourrez pas ajouter de widgets. Tout en étant encore dans functions.php , en dessous de la fonction précédente, ajoutez le code suivant:

// Register a new sidebar simply named 'sidebar'
function add_widget_Support() {
                register_sidebar( array(
                                'name'          => 'Sidebar',
                                'id'            => 'sidebar',
                                'before_widget' => '<div>',
                                'after_widget'  => '</div>',
                                'before_title'  => '<h2>',
                                'after_title'   => '</h2>',
                ) );
}
// Hook the widget initiation and run our function
add_action( 'widgets_init', 'add_Widget_Support' );

Maintenant, nous devons enregistrer un menu de navigation personnalisé pour permettre l’utilisation de la fonction Apparence -> Menu dans le panneau d’administration. Au-dessous du code précédent, ajoutez ce qui suit:

// Register a new navigation menu
function add_Main_Nav() {
  register_nav_menu('header-menu',__( 'Header Menu' ));
}
// Hook to the init action hook, run our navigation menu function
add_action( 'init', 'add_Main_Nav' );

Enregistrez functions.php et téléchargez-le dans le répertoire de votre thème.

sidebar.php

Ouvrez maintenant le fichier sidebar.php  et collez le code suivant. Cela fait apparaître la barre latérale et les widgets dans votre thème partout où get_sidebar()  est appelé.

<?php if ( is_active_sidebar( 'sidebar' ) ) : ?>
  <aside id="primary-sidebar" class="primary-sidebar widget-area" role="complementary">
    <?php dynamic_sidebar( 'sidebar' ); ?>
  </aside>
<?php endif; ?>

La première ligne indique à WordPress que si aucun widget n’est activé, la barre latérale HTML ne doit pas être affichée. La deuxième ligne définit les attributs de l’élément qui contient les widgets. HTML5 fournit l’élément ‘aside’ pour les barres latérales. La troisième ligne est la fonction WordPress pour afficher réellement les widgets. La dernière ligne ferme l’instruction if initiale.

Enregistrez et téléchargez sidebar.php dans le répertoire de votre thème.

Pour faciliter la navigation entre les articles et les pages, ouvrez le panneau de contrôle d’administration et ajoutez les widgets Pages et Articles récents dans la barre latérale. Maintenant, nous allons passer à la construction de la mise en page.

Étape 4 – Création d’une mise en page avec des templates

header.php

header.php définira le haut de notre document, en commençant par la déclaration DOCTYPE .

Tous les documents HTML doivent commencer par une déclaration DOCTYPE qui indique à votre navigateur comment interpréter le document. Le doctype HTML5 est simplement html . La balise <html> d’ouverture a besoin d’un attribut de langue, et WordPress fournit une fonction pour entrer le code de langue correct pour la langue que vous avez choisie lors de l’installation – language_attributes() .

Dans le champ du titre, vous utilisez une ligne de code qui affiche le nom de votre site, suivie d’une déclaration abrégée if … then … pour afficher le slogan de votre site Web ou le titre de la page ou de l’article actuelle que vous consultez.

Le caractère ? est un opérateur conditionnel PHP nommé opérateur ternaire. Dans cette ligne de code, is_front_page()  est une fonction WordPress qui renvoie TRUE si on regarde la page d’accueil, ou FALSE si vous regardez un article ou une page. La fonction avant le colon est utilisée si TRUE a été renvoyé et la fonction après le colon est utilisée si FALSE est renvoyé.

Comme vous le verrez plus loin, la fonction bloginfo()  est utilisée à plusieurs reprises avec différents paramètres pour obtenir différentes informations à partir de la base de données WordPress. Avant que la balise <head> ne soit fermée avec </head> , vous devrez inclure le crochet d’action wp_head() pour vous assurer que toutes les fonctions qui y sont attachées sont exécutées.

La fonction body_class()  donne à votre corps les classes CSS par défaut définies par WordPress. La dernière ligne permet d’afficher le menu de navigation, si on l’a créé, dans le panneau de contrôle de l’administration. Le dernier fichier, header.php ressemble à ceci:

<!DOCTYPE html>
<html <?php language_attributes(); ?>
 <head>
   <title><?php bloginfo('name'); ?> &raquo; <?php is_front_page() ? bloginfo('description') : wp_title(''); ?></title>
   <meta charset="<?php bloginfo( 'charset' ); ?>">
   <meta name="viewport" content="width=device-width, initial-scale=1.0">
   <link rel="stylesheet" href="<?php bloginfo('stylesheet_url'); ?>">
   <?php wp_head(); ?>
 </head>
 <body <?php body_class(); ?>>
   <header class="my-logo">
   <h1><a href="<?php echo esc_url( home_url( '/' ) ); ?>"><?php bloginfo('name'); ?></a></h1>
 </header>
 <?php wp_nav_menu( array( 'header-menu' => 'header-menu' ) ); ?>

Si vous souhaitez utiliser un logo comme header, remplacer <?php bloginfo(‘name’); ?> le code de votre image dans les balises <header> .

Enregistrez header.php et téléchargez-le dans le dossier de votre thème.

index.php

index.php définit la page d’accueil et sera également utilisé comme mise en page par défaut si des templates spécifiques (c’est-à-dire single.php , page.php ) ne sont pas trouvés.

Nous utiliserons des tags de template pour nous assurer que le code de l’header ( get_header ), de la barre latérale ( get_sidebar ) et du footer ( get_footer ) est inclus dans notre page d’accueil.

La boucle WordPress affichera une liste de messages et leurs extraits avec plus de balises de template. Nous utiliserons également les éléments sémantiques HTML5 <section> , <main> , <header> et <article> . Certains de nos éléments auront des classes qui leur seront attribués et les classes seront écrites lorsque nous arriverons au fichier style.css .

<?php get_header(); ?>
<main class="wrap">
  <section class="content-area content-thin">
<?php if ( have_posts() ) : while ( have_posts() ) : the_post(); ?>
      <article class="article-loop">
        <header>
          <h2><a href="<?php the_permalink(); ?>" title="<?php the_title_attribute(); ?>"><?php the_title(); ?></a></h2>
          By: <?php the_author(); ?>
        </header>
        <?php the_excerpt(); ?>
      </article>
<?php endwhile; else : ?>
      <article>
        <p>Sorry, no posts were found!</p>
      </article>
<?php endif; ?>
  </section><?php get_sidebar(); ?>
</main>
<?php get_footer(); ?>

La boucle commence à <?php if ( have_posts() ) : while ( have_posts() ) : the_post(); ?>  et se termine à <?php endif; ?> À l’intérieur de la boucle, les balises de template suivantes sont utilisées:

  • <?php the_permalink(); ?> – sort l’URL correcte de l’article actuelle
  • <?php the_title_attribute(); ?> – affiche le titre de l’article dans un format sécurisé pour l’attribut titre du lien
  • <?php the_title(); ?> – affiche le titre de l’article
  • <?php the_author(); ?> – affiche le nom de l’auteur
  • <?php the_excerpt(); ?>  – sort l’extrait du message, qui est généré automatiquement si vous n’écrivez pas le vôtre

Les balises <header> </ header> peuvent être utilisées plusieurs fois sur n’importe quelle page et ne se réfèrent pas spécifiquement à l’header de la page.
Les sections et les articles devraient avoir des éléments d’header où tout texte à l’intérieur de <h1> , <h2> , etc. est utilisé. Si une section ou un article n’a pas de texte d’header, ils peuvent être exclus.

Enregistrez index.php et téléchargez-le dans le répertoire de votre thème. Si vous visitez votre site maintenant, vous verrez une page très simple.

Un aspect simple du nouveau thème créé par WordPressVous pouvez toutefois voir que le titre de l’onglet est le nom et le slogan de votre site Web. Le haut de la page possède le titre de votre site Web (ou votre logo si vous l’utilisez à la place). Tous les messages qui existent ont leur titre, auteur et extrait affichés. Bien que la page s’affiche bien, vous devez toujours fermer les balises <body> et <html> ouvertes dans footer.php .

footer.php

footer.php définit le pied de page de chaque page et doit fermer toutes les balises HTML ouvertes dans d’autres fichiers de template. Dans notre cas, <body> et <html> sont toujours ouverts à partir de header.php .

Il doit également inclure le  crochet d’action wp_footer() pour s’assurer que tout code final de WordPress et JavaScript est ajouté à la page. Si vous étiez connecté en tant qu’administrateur lorsque vous avez visité votre page d’accueil, vos articles ou vos pages, vous remarquerez que la barre d’administration est absente. Le code qui affiche la barre d’administration est accroché au crochet d’action wp_footer() .

Nous ajouterons également l’élément sémantique HTML5 <footer> </ footer> pour définir explicitement notre pied de page.

<footer>
      <p>Copyright &copy; 2017</p>
    </footer>
    <?php wp_footer(); ?>
  </body>
</html>

Enregistrez footer.php et uploadez-le dans le répertoire de votre thème.

single.php

single.php définit la mise en page lors de la visualisation d’un seul article sur votre site. Il peut être complètement différent de index.php .

Dans ce cas, nous n’ajouterons pas la barre latérale aux articles simplement pour mettre en évidence la différence de mise en page.

Le contenu principal prend toute la largeur de la page car nous lui avons donné la classe full-width de contenu de la feuille de style. Le lien a été supprimé du titre car il n’est pas nécessaire ici. La fonction pour afficher l’article complet est the_content() :

<?php get_header(); ?>
<main class="wrap">
  <section class="content-area content-full-width">
<?php if ( have_posts() ) : while ( have_posts() ) : the_post(); ?>
      <article class="article-full">
        <header>
          <h2><?php the_title(); ?></h2>
          By: <?php the_author(); ?>
        </header>
       <?php the_content(); ?>
      </article>
<?php endwhile; else : ?>
      <article>
        <p>Sorry, no post was found!</p>
      </article>
<?php endif; ?>
  </section>
</main>
<?php get_footer(); ?>

page.php

page.php définit la façon dont les pages sont affichées et peuvent être différentes encore une fois par rapport à l’index et à la mise en page.

Rappelez-vous que si les templates n’existent pas, le template index.php est utilisé à la place. Si vous ne créez pas page.php , il n’utilisera pas la même mise en page que posts.php .

Pour rendre la différence plus visible, nous ajouterons une fois de plus la barre latérale à cette mise en page et ferons que le contenu de la page prenne 70% de la largeur de la page.

<?php get_header(); ?>
<main class="wrap">
  <section class="content-area content-thin">
<?php if ( have_posts() ) : while ( have_posts() ) : the_post(); ?>
      <article class="article-full">
        <header>
          <h2><?php the_title(); ?></h2>
          By: <?php the_author(); ?>
        </header>
        <?php the_content(); ?>
      </article>
<?php endwhile; else : ?>
      <article>
        <p>Sorry, no page was found!</p>
      </article>
<?php endif; ?>
  </section><?php get_sidebar(); ?>
</main>
<?php get_footer(); ?>

Enregistrez page.php et téléchargez-le dans le répertoire de votre thème.

style.css

Ajoutez le code suivant au bas de la feuille de style. Cela fera en sorte que les différentes cases aient un fond blanc et une bordure bleue, afin de permettre de visualiser la quantité d’espace que chacun d’entre eux prend.

/*
Theme Name: My Theme1
Author: Your Name
Author URI: http://www.yourwebsite.com
Description: My first responsive HTML5 theme
Version: 1.0
License: GNU General Public License v3 or later
License URI: http://www.gnu.org/licenses/gpl-3.0.html
*/

* {
  box-sizing: border-box;

}

body {
    background-color: #f9f9f9;
    font-family: Helvetica;
}
.my-logo,
footer {
  width: 100%;
  padding-left: 1%;
  margin-bottom: 8px;
  background-color: #78baff;
  border: 1px solid #78baff;
}
body > header > h1 > a {
color: #ffffff;
font-weight: 400;
}
article > header {

}
footer {
  margin-top: 4px;
}

a {
  text-decoration: none;
}

/* 'Margin: 0 auto' centers block content on the page */
.wrap {
  width: 99%;
  margin: 0 auto;
}

.content-area {
  display: inline-block;
}

.content-thin {
    width: 70%;
}

.content-full-width {
    width: 100%;
}

.content-area,
.primary-sidebar {
  display: inline-block;
}

.primary-sidebar {
  width: 25%;
  padding: 1%;
  vertical-align: top;
  background-color: #ececec;
}

.article-loop {
    width: 45%;
    text-align: left;
    margin: 5px;
    padding: 10px;
}

.article-full {
  width: 99%;
  padding: 1%;
}

.article-loop,
.article-full {
  display: inline-block;
  vertical-align: top;
  background-color: #FFF;
  border-radius: 4px;
  margin-bottom: 4px;
}

Enregistrez style.css et uploadez-le dans le répertoire de votre thème.

Maintenant que vous disposez des templates de base et d’une feuille de style, vous pouvez naviguer facilement à travers vos articles et vos pages. Votre thème nouvellement créé devrait ressembler à ceci.

Didacticiel thématique WordPress - Look thème final

Utilisation de media queries

Étant donné que notre mise en page de base comporte 2 boxs inlines sur la page avant, nous pouvons facilement changer la façon dont elles se comportent lorsque la fenêtre du navigateur est trop petite pour afficher correctement le texte.

Pour ce tutoriel de thème WordPress, nous allons changer la largeur des messages dans la liste des messages lorsque la fenêtre du navigateur est inférieure à 800px. Au lieu d’avoir 2 messages côte-à-côte, chaque article aura sa propre ligne. Nous allons le faire en ajoutant des media querie. Si vous avez besoin d’une mise à jour sur les media querie, reportez-vous à la section «Qu’est-ce qu’un design responsive ?» de ce tutoriel avant de continuer.

Lors de l’écriture de media querie, vous pouvez les écrire n’importe où dans la feuille de style. Vous pouvez mettre toutes les media querie au bas de la feuille de style ou écrire des media querie spécifiques pour des éléments spécifiques juste en dessous de la définition d’origine. C’est juste une question de ce que vous jugez le plus logique à faire.

Nous allons d’abord écrire une media query qui affecte la classe .article-loop , qui a une largeur de 49% par défaut. Nous l’écrireons directement en dessous de la définition initiale. Les media querie indiquent que si la fenêtre du navigateur est inférieure à 800px de large, la classe de .article-loop devrait utiliser 99% de l’espace disponible à la place.

Ensuite, nous écrirons une media query qui, lorsque la fenêtre du navigateur est inférieure à 600px de large, pousse la barre latérale sous le contenu principal et étend le contenu principal et la barre latérale pour prendre 100% de largeur. Ce serait une mise en page beaucoup plus appropriée pour un appareil mobile où l’espace est limité.

Toujours dans style.css, trouvez la boucle d’article qui devrait être à la ligne 73. Audessous de la classe de .article-loop , écrivez ce qui suit:

@media screen and (max-width: 800px) {
  .article-loop {
    width: 99%;
  }
}

La première ligne indique que la media query ne devrait affecter que les écrans (c’est-à-dire pas le mode de prévisualisation d’impression) et n’affecte que les fenêtres du navigateur d’une largeur de 800px ou moins. Enregistrez et téléchargez style.css dans le répertoire de votre thème. Accédez à la page d’accueil de votre site Web. Modifiez la taille de la fenêtre de votre navigateur et, au fur et à mesure qu’elle dépasse 800px de largeur, vous verrez les box pour chaque changer en largeur et se déposer l’une en dessous de l’autre.

Continuez à réduire la largeur de la fenêtre du navigateur jusqu’à ce qu’elle soit aussi petite que possible. Vous verrez que tout le texte devient plus difficile à lire car il a trop peu d’espace, mais à aucun moment il ne disparaît de l’écran. Si les largeurs étaient définies comme des largeurs en pixels au lieu de pourcentages, dès que la fenêtre deviendrait trop petite, la barre latérale disparaîtrait et nécessiterait un défilement horizontal.

La prochaine media query que nous ajouterons sera similaire à celle ci-dessus. Elle indique au contenu principal et à la barre latérale de prendre 100% de l’espace disponible, et la barre latérale tombera sous le contenu principal.

REMARQUE:  Comme cela affecte différentes classes qui se trouvent dans des endroits différents dans la feuille de style, il convient de la placer au bas de la feuille de style.

@media screen and (max-width: 400px) {
  .content-area,
  .primary-sidebar {
    width: 100%;
  }
}

Enregistrez style.css et téléchargez-le dans le répertoire de votre thème. Revenez à votre page d’accueil et redimensionnez la fenêtre du navigateur jusqu’à ce que le contenu reprenne 100% de la largeur et que la barre latérale tombe sous le contenu principal.

En utilisant la barre latérale, cliquez sur n’importe quelle page disponible et vous verrez que la barre latérale se trouve également en dessous du contenu de la page, et tout correspond bien.

Comprendre les  tags de template WordPress et les crochets d’action

Pour intégrer pleinement votre thème avec WordPress, vous devez utiliser des tags de template et des crochets d’action . Ce sont deux choses distinctement différentes.

Tags

Les tags de template sont des fonctions PHP fournies par WordPress pour inclure facilement des fichiers de template (tels que header.php ) à partir de votre thème dans un autre fichier ou pour afficher certaines informations de la base de données.

Par exemple, pour afficher le pied de page sur la page d’accueil, mais pas sur une autre page, ajoutez  get_footer () au bas de index.php , mais pas dans page.php .

Vous trouverez ci-dessous deux brèves listes de certains tags de template importants pour vous donner une idée des tags disponibles.

Tags pour inclure les fichiers de template:

  • get_header() – inclut le template header.php
  • get_sidebar() – inclut le template sidebar.php
  • get_footer() – inclut le template footer.php
  • get_search_form() – inclut le template searchform.php

Tags pour afficher les informations de la base de données

REMARQUE:  Certains tags de template doivent être utilisés dans la boucle. La boucle est expliquée plus loin dans le didacticiel, et signifie simplement le code qui récupère les messages demandés.

  • bloginfo() – affiche les informations demandées en tant que paramètre, c’est-à-dire bloginfo (“nom”) montre le nom de votre site tel que défini dans le Panneau de configuration administrateur ( voir la liste des paramètres )
  • single_post_title() – affiche le titre de l’article actuellement affiché lorsqu’il est utilisé dans single.php
  • the_author() – affiche l’auteur de l’article actuellement affiché
  • the_content() – affiche le texte principal d’un article ou d’une page
  • the_excerpt() – l’extrait du message ou de la page

La liste complète des tags de template WordPress peut être trouvée ici .

Crochets d’action

Les crochets d’action sont des fonctions PHP fournies par WordPress qui ont généralement d’autres fonctions qui leur sont attachées. Certains crochets n’ont pas de fonctions par défaut et existent pour les plugins. Les crochets d’action permettent aux plugins d’attacher leurs propres fonctions et de les faire fonctionner à différents moments du chargement d’une page.

Dans le template header de votre thème, le crochet d’action wp_head() est appelé à inclure l’header HTML WordPress par défaut dans les balises <head></head> . Il dispose de certaines fonctions principales de WordPress pour ajouter du HTML à la page et permet toutes les fonctions qui lui sont attachées par les plugins à exécuter.

Dans la section de pied de page de vos thèmes, le  crochet d’action wp_footer() est appelé à inclure le HTML et le JavaScript par défaut, et exécute toutes les fonctions qui lui sont attachées par des plugins.

Si vous n’utilisez pas les crochets d’action lors de la création du thème WordPress, un code principal important manquerait et les plugins ne pourront pas fonctionner correctement.

Par exemple, ne pas appeler wp_footer() dans votre template footer.php empêche que la barre d’administration supérieure apparaisse lorsque vous êtes connecté en tant qu’administrateur. Le code principal de WordPress qui provoque l’apparition de la barre d’administration est attaché au crochet d’action wp_footer() et les fonctions attachées ne peuvent pas être exécutées si le crochet d’action n’existe pas.

Pour une explication complète des crochets d’action, lisez la section Actions et Crochets d’action du tutoriel sur les plugins WordPress .

La boucle WordPress

La boucle est utilisée pour afficher des messages. Elle peut être utilisée pour afficher un seul article ou tous vos messages publiés sur une seule page. Le code HTML que vous écrivez dans la boucle sera utilisé pour afficher chaque article demandé par la boucle. Le code continue en boucle jusqu’à ce qu’il atteigne l’article finale.

Si vous affichez un article, utilisez la balise de template the_content()  dans la boucle pour afficher le contenu de l’article. Si vous affichez une liste de tous les messages publiés, vous pouvez utiliser the_excerpt() dans la boucle à la place pour que l’intégralité de l’article ne s’affiche pas.

La boucle est un raccourci multi-lignes if … then … une déclaration composée de quatre lignes de code. La première ligne indique que si un article est trouvé, pendant que l’article est disponible, utilisez le code suivant pour afficher l’article. Si aucune pièce correspondante n’est trouvée, vous pouvez définir un texte de remplacement à la place. L’exemple par défaut de WordPress ressemble à ceci et la ligne commentée est l’endroit où vos balises HTML et templates sont écrites:

<?php if ( have_posts() ) : while ( have_posts() ) : the_post(); ?>
// HTML and template tags here to define the layout, and what is shown from the post
<?php endwhile; else : ?>
  <p><?php _e( 'Sorry, no posts matched your criteria.' ); ?></p>
<?php endif; ?>

Conclusion

Toutes nos félicitations! Vous avez créé votre premier thème HTML5 WordPress responsive!

Maintenant que vous comprenez les templates et les tags de template, vous devriez jeter un oeil à la liste des templates et des tags de template Codex de WordPress , et expérimenter l’ajout de nouvelles sections à la mise en page. Expérimentez avec la modification des styles CSS et des largeurs et voyez comment votre navigateur répond à différentes situations. Modifiez les règles pour les media queries et vérifiez s’il existe de meilleures règles qui peuvent être définies.

Vous pouvez également passer au didacticiel Comment créer un thème enfant WordPress .

Ajouter un commentaire

Cliquez ici pour poster un commentaire

This site uses Akismet to reduce spam. Learn how your comment data is processed.

Commencez à économiser dès maintenant !

Hébergement et nom de domaine tout-en-un à partir de

2
45
/mois
>