partie 1: création des fichiers de bases at design du site

Êtes-vous curieux de savoir comment créer un thème WordPress à partir de zéro? En seulement neuf étapes, je vais vous donner le chéminement pour créer votre modèle WordPress. Nous utiliserons HTML 5 que nous convertirons en thème. Si vous souhaitez appliquer cela à un site Web publié sur le net, vous devez comprendre la logique derrière les étapes. Voici les étapes à suivre:
  • Téléchargez un thème HTML5 / Bootstrap gratuit ou achètez en ligne
  • Créez un dossier avec les fichiers PHP requis dans le dossier wp-content/themes de votre serveur
  • Sectionnez  le code HTML 5 en différentes parties (généralement Tête, Contenu principal et Pied de page)
  • Créer une fonction PHP pour faire apparaître les fichiers CSS et Js sur le site
  • Utilisez des fonctions WordPress intégrées pour connecter des modèles
  • Apportez quelques modifications à header.php et footer.php
  • Donnez un nom à votre thème
  • Créer le fichier png de capture d'écran
  • Activez et commencez à utiliser notre thème
Êtes-vous curieux de savoir comment créer un thème WordPress à partir de zéro? En seulement neuf étapes simples, je donnerai quelques étapes nécessaires pour créer votre modèle.

Objectif

L'objectif de cette article est de pouvoir créer un simple thème WordPress à partir de zéro et en quelques étapes simple. Cette article est spécialement fait de façon simple pour les personnes qui n'ont pas de compétences techniques en programmation.

Introduction

WordPress est un système de gestion de contenu (CMS) gratuit, libre et open source. On utilise WordPress pour les sites Web tels que: les vitrines, les commerces en ligne, les blogues ou même les portfolio. L'utilisation du logiciel WordPress est très répandu de nos jours.
Nous utiliserons pour cette article un modèle HTML 5 que nous convertirons ensuite en un thème WordPress. Si vous souhaitez appliquer cela à un site Web en direct, vous devez comprendre la logique derrière les étapes.

Pourquoi utiliser WordPress

WordPress est un logiciel gratuit et open source qui s'adapte à n'importe quel type de site Web. Il est capable de supporter plusieurs types de médias et les thèmes et Plugins sont déjà incorporés dans le logiciel. Une énorme communauté de développeurs assure la maintenance du logiciel et vous pouvez également avoir le contrôle total de votre site internet. Nous ne pouvons pas oublier le fait que WordPress est très simple à utiliser et vous n'avez pas besoin de compétences techniques très avancées pour l'utiliser.

Étapes principales pour la création d'un simple thème WordPress

Voici les étapes principales que nous suivrons pour la création d'un thème WordPress à partir d'un thème HTML5:
  • Obtenez un thème HTML5 / Bootstrap est gratuit en ligne
WordPress.com et WordPress.org sont entièrement gratuits. WordPress.com est très recommandé  pour les débutants.
  • Créez un dossier de modèles avec les fichiers PHP requis
  • Divisez votre code HTML 5 en différentes parties (généralement on a trois partie: Header.php, footer.php et java script)
  • Créer une fonction pour mettre en file d'attente les styles et les scripts de votre thème
  • Utilisez des fonctions WordPress intégrées pour connecter des modèles
  • Apportez quelques modifications aux sections header.php et footer.php
  • Donnez un nom à votre thème (le nom doit être unique)
  • Créer le fichier png de capture d'écran
  • Activez et commencez à utiliser notre thème
Note: WordPress est très utilisé par les grandes entreprises qui lui font confiance. Aujourd’hui le CMS est enfin reconnu à sa juste valeur. Il est possible de l’adapter à tous les besoins (même dans le cadre de la création des boutiques en ligne).

Conclusion

Ces neufs (9) grandes étapes sont les principales dans la création d'un thème WordPress à partir d'un thème html5. Dans nos prochaines articles nous allons détailler chaque étape de façon pratique pour vous permettre de mettre en pratique vos connaissances. Nous aurons également des vidéos de tutoriel qui seront très faciles et pratiques. N'hésitez pas à nous contacter si vous avez des questions ou des commentaires.

1 -Obtenez un thème HTML5 / Bootstrap gratuit en ligne

Il existe de nombreux modèles que vous pouvez obtenir en ligne gratuitement. Bien sûr, si vous avez l'intention de créer un site Web professionnel attrayant, il est préférable d'en acheter un. Pour ce didacticiel, nous allons télécharger un modèle d'amorçage d'une page à partir de Démarrer l'amorçage. Sur ce site, il existe des modèles gratuits et payants. Veuillez vous référer à leurs termes et conditions pour comprendre les mots à télécharger. Je vais télécharger le modèle Freelancer Clean Blog

Capture d'ecran: Start Bootstrap

2- Créez un dossier de thème WordPress avec les fichiers PHP requis

Dans votre environnement de développement sous le répertoire wp-content / themes, créez un dossier. Vous donnerez un nom au dossier; par exemple,  "portfolios" ou ce que vous voulez.

Fichiers PHP WordPress

Pour créer et activer un modèle, WordPress n'a besoin que d'index.php et de style.css. Cependant, pour profiter pleinement de certaines fonctionnalités, vous avez besoin de modèles de pages:
  • header.php - pour ajouter toutes les informations à la section d'en-tête de votre site Web. (1)
  • footer.php - pour ajouter toutes les informations à la section pied de page de votre site. (2)
  • page.php - le modèle de page par défaut (3)
  • functions.php - ajouter toutes vos fonctions PHP (4)
Nous aurons également besoin d'un fichier image appelé screen screenshot.png pour présenter notre modèle. (5) Donc, si vous ne l'avez pas encore fait, créez des fichiers PHP vides 1 à 4 et (style.css + index.php) Vous devriez avoir quelque chose de similaire à l'écran d'impression ci-dessous. files

Importez votre modèle HTML

Dans votre dossier "portfolios", créez un autre dossier appelé modèles et importez les thèmes de bootstrap téléchargés à partir de Start Bootstrap. Si vous extrayez votre fichier zip, vous aurez probablement ces fichiers: template

3- Divisez notre code HTML5 en différentes parties

Nous utiliserons le fichier index.html de notre thème bootstrap pour créer notre modèle Wordpress. Pour ce faire, nous devrons ouvrir le fichier index.html et le diviser en trois parties. En-tête, corps et pied de page.

index.html

<!DOCTYPE html>
<html lang="en">

<head><meta http-equiv="Content-Type" content="text/html; charset=utf-8">

  
  <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
  <meta name="description" content="">
  <meta name="author" content="">

  <title>Clean Blog - Start Bootstrap Theme</title>

  <!-- Bootstrap core CSS -->
  <link href="vendor/bootstrap/css/bootstrap.min.css" rel="stylesheet">

  <!-- Custom fonts for this template -->
  <link href="vendor/fontawesome-free/css/all.min.css" rel="stylesheet" type="text/css">
  <link href='https://fonts.googleapis.com/css?family=Lora:400,700,400italic,700italic' rel='stylesheet' type='text/css'>
  <link href='https://fonts.googleapis.com/css?family=Open+Sans:300italic,400italic,600italic,700italic,800italic,400,300,600,700,800' rel='stylesheet' type='text/css'>

  <!-- Custom styles for this template -->
  <link href="css/clean-blog.min.css" rel="stylesheet">

</head>

<body>

  <!-- Navigation -->
  <nav class="navbar navbar-expand-lg navbar-light fixed-top" id="mainNav">
    <div class="container">
      <a class="navbar-brand" href="index.html">Start Bootstrap</a>
      <button class="navbar-toggler navbar-toggler-right" type="button" data-toggle="collapse" data-target="#navbarResponsive" aria-controls="navbarResponsive" aria-expanded="false" aria-label="Toggle navigation">
        Menu
        <i class="fas fa-bars"></i>
      </button>
      <div class="collapse navbar-collapse" id="navbarResponsive">
        <ul class="navbar-nav ml-auto">
          <li class="nav-item">
            <a class="nav-link" href="index.html">Home</a>
          </li>
          <li class="nav-item">
            <a class="nav-link" href="about.html">About</a>
          </li>
          <li class="nav-item">
            <a class="nav-link" href="post.html">Sample Post</a>
          </li>
          <li class="nav-item">
            <a class="nav-link" href="contact.html">Contact</a>
          </li>
        </ul>
      </div>
    </div>
  </nav>

  <!-- Page Header -->
  <header class="masthead" style="background-image: url('img/home-bg.jpg')">
    <div class="overlay"></div>
    <div class="container">
      <div class="row">
        <div class="col-lg-8 col-md-10 mx-auto">
          <div class="site-heading">
            <h1>Clean Blog</h1>
            <span class="subheading">A Blog Theme by Start Bootstrap</span>
          </div>
        </div>
      </div>
    </div>
  </header>

  <!-- Main Content -->
  <div class="container">
    <div class="row">
      <div class="col-lg-8 col-md-10 mx-auto">
        <div class="post-preview">
          <a href="post.html">
            <h2 class="post-title">
              Man must explore, and this is exploration at its greatest
            </h2>
            <h3 class="post-subtitle">
              Problems look mighty small from 150 miles up
            </h3>
          </a>
          <p class="post-meta">Posted by
            <a href="#">Start Bootstrap</a>
            on September 24, 2019</p>
        </div>
        <hr>
        <div class="post-preview">
          <a href="post.html">
            <h2 class="post-title">
              I believe every human has a finite number of heartbeats. I don't intend to waste any of mine.
            </h2>
          </a>
          <p class="post-meta">Posted by
            <a href="#">Start Bootstrap</a>
            on September 18, 2019</p>
        </div>
        <hr>
        <div class="post-preview">
          <a href="post.html">
            <h2 class="post-title">
              Science has not yet mastered prophecy
            </h2>
            <h3 class="post-subtitle">
              We predict too much for the next year and yet far too little for the next ten.
            </h3>
          </a>
          <p class="post-meta">Posted by
            <a href="#">Start Bootstrap</a>
            on August 24, 2019</p>
        </div>
        <hr>
        <div class="post-preview">
          <a href="post.html">
            <h2 class="post-title">
              Failure is not an option
            </h2>
            <h3 class="post-subtitle">
              Many say exploration is part of our destiny, but it’s actually our duty to future generations.
            </h3>
          </a>
          <p class="post-meta">Posted by
            <a href="#">Start Bootstrap</a>
            on July 8, 2019</p>
        </div>
        <hr>
        <!-- Pager -->
        <div class="clearfix">
          <a class="btn btn-primary float-right" href="#">Older Posts &rarr;</a>
        </div>
      </div>
    </div>
  </div>

  <hr>

  <!-- Footer -->
  <footer>
    <div class="container">
      <div class="row">
        <div class="col-lg-8 col-md-10 mx-auto">
          <ul class="list-inline text-center">
            <li class="list-inline-item">
              <a href="#">
                <span class="fa-stack fa-lg">
                  <i class="fas fa-circle fa-stack-2x"></i>
                  <i class="fab fa-twitter fa-stack-1x fa-inverse"></i>
                </span>
              </a>
            </li>
            <li class="list-inline-item">
              <a href="#">
                <span class="fa-stack fa-lg">
                  <i class="fas fa-circle fa-stack-2x"></i>
                  <i class="fab fa-facebook-f fa-stack-1x fa-inverse"></i>
                </span>
              </a>
            </li>
            <li class="list-inline-item">
              <a href="#">
                <span class="fa-stack fa-lg">
                  <i class="fas fa-circle fa-stack-2x"></i>
                  <i class="fab fa-github fa-stack-1x fa-inverse"></i>
                </span>
              </a>
            </li>
          </ul>
          <p class="copyright text-muted">Copyright &copy; Your Website 2019</p>
        </div>
      </div>
    </div>
  </footer>

  <!-- Bootstrap core JavaScript -->
  <script src="vendor/jquery/jquery.min.js"></script>
  <script src="vendor/bootstrap/js/bootstrap.bundle.min.js"></script>

  <!-- Custom scripts for this template -->
  <script src="js/clean-blog.min.js"></script>

</body>

</html>
Pour diviser notre code, nous allons
  • couper de la ligne 1 à la ligne 70 à header.php
  • De la ligne 71 à 137 ira à la page.php
  • et de 138 à 183 ira à footer.php
Cela nous permettra d'avoir les éléments suivants:

header.php

<!DOCTYPE html>
<html lang="en">

<head><meta http-equiv="Content-Type" content="text/html; charset=utf-8">

  
  <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
  <meta name="description" content="">
  <meta name="author" content="">

  <title>Clean Blog - Start Bootstrap Theme</title>

  <!-- Bootstrap core CSS -->
  <link href="vendor/bootstrap/css/bootstrap.min.css" rel="stylesheet">

  <!-- Custom fonts for this template -->
  <link href="vendor/fontawesome-free/css/all.min.css" rel="stylesheet" type="text/css">
  <link href='https://fonts.googleapis.com/css?family=Lora:400,700,400italic,700italic' rel='stylesheet' type='text/css'>
  <link href='https://fonts.googleapis.com/css?family=Open+Sans:300italic,400italic,600italic,700italic,800italic,400,300,600,700,800' rel='stylesheet' type='text/css'>

  <!-- Custom styles for this template -->
  <link href="css/clean-blog.min.css" rel="stylesheet">

</head>

<body>

  <!-- Navigation -->
  <nav class="navbar navbar-expand-lg navbar-light fixed-top" id="mainNav">
    <div class="container">
      <a class="navbar-brand" href="index.html">Start Bootstrap</a>
      <button class="navbar-toggler navbar-toggler-right" type="button" data-toggle="collapse" data-target="#navbarResponsive" aria-controls="navbarResponsive" aria-expanded="false" aria-label="Toggle navigation">
        Menu
        <i class="fas fa-bars"></i>
      </button>
      <div class="collapse navbar-collapse" id="navbarResponsive">
        <ul class="navbar-nav ml-auto">
          <li class="nav-item">
            <a class="nav-link" href="index.html">Home</a>
          </li>
          <li class="nav-item">
            <a class="nav-link" href="about.html">About</a>
          </li>
          <li class="nav-item">
            <a class="nav-link" href="post.html">Sample Post</a>
          </li>
          <li class="nav-item">
            <a class="nav-link" href="contact.html">Contact</a>
          </li>
        </ul>
      </div>
    </div>
  </nav>

  <!-- Page Header -->
  <header class="masthead" style="background-image: url('img/home-bg.jpg')">
    <div class="overlay"></div>
    <div class="container">
      <div class="row">
        <div class="col-lg-8 col-md-10 mx-auto">
          <div class="site-heading">
            <h1>Clean Blog</h1>
            <span class="subheading">A Blog Theme by Start Bootstrap</span>
          </div>
        </div>
      </div>
    </div>
  </header>

page.php


  <!-- Main Content -->
  <div class="container">
    <div class="row">
      <div class="col-lg-8 col-md-10 mx-auto">
        <div class="post-preview">
          <a href="post.html">
            <h2 class="post-title">
              Man must explore, and this is exploration at its greatest
            </h2>
            <h3 class="post-subtitle">
              Problems look mighty small from 150 miles up
            </h3>
          </a>
          <p class="post-meta">Posted by
            <a href="#">Start Bootstrap</a>
            on September 24, 2019</p>
        </div>
        <hr>
        <div class="post-preview">
          <a href="post.html">
            <h2 class="post-title">
              I believe every human has a finite number of heartbeats. I don't intend to waste any of mine.
            </h2>
          </a>
          <p class="post-meta">Posted by
            <a href="#">Start Bootstrap</a>
            on September 18, 2019</p>
        </div>
        <hr>
        <div class="post-preview">
          <a href="post.html">
            <h2 class="post-title">
              Science has not yet mastered prophecy
            </h2>
            <h3 class="post-subtitle">
              We predict too much for the next year and yet far too little for the next ten.
            </h3>
          </a>
          <p class="post-meta">Posted by
            <a href="#">Start Bootstrap</a>
            on August 24, 2019</p>
        </div>
        <hr>
        <div class="post-preview">
          <a href="post.html">
            <h2 class="post-title">
              Failure is not an option
            </h2>
            <h3 class="post-subtitle">
              Many say exploration is part of our destiny, but it’s actually our duty to future generations.
            </h3>
          </a>
          <p class="post-meta">Posted by
            <a href="#">Start Bootstrap</a>
            on July 8, 2019</p>
        </div>
        <hr>
        <!-- Pager -->
        <div class="clearfix">
          <a class="btn btn-primary float-right" href="#">Older Posts &rarr;</a>
        </div>
      </div>
    </div>
  </div>

  <hr>
 <!-- Footer -->
  <footer>
    <div class="container">
      <div class="row">
        <div class="col-lg-8 col-md-10 mx-auto">
          <ul class="list-inline text-center">
            <li class="list-inline-item">
              <a href="#">
                <span class="fa-stack fa-lg">
                  <i class="fas fa-circle fa-stack-2x"></i>
                  <i class="fab fa-twitter fa-stack-1x fa-inverse"></i>
                </span>
              </a>
            </li>
            <li class="list-inline-item">
              <a href="#">
                <span class="fa-stack fa-lg">
                  <i class="fas fa-circle fa-stack-2x"></i>
                  <i class="fab fa-facebook-f fa-stack-1x fa-inverse"></i>
                </span>
              </a>
            </li>
            <li class="list-inline-item">
              <a href="#">
                <span class="fa-stack fa-lg">
                  <i class="fas fa-circle fa-stack-2x"></i>
                  <i class="fab fa-github fa-stack-1x fa-inverse"></i>
                </span>
              </a>
            </li>
          </ul>
          <p class="copyright text-muted">Copyright &copy; Your Website 2019</p>
        </div>
      </div>
    </div>
  </footer>

  <!-- Bootstrap core JavaScript -->
  <script src="vendor/jquery/jquery.min.js"></script>
  <script src="vendor/bootstrap/js/bootstrap.bundle.min.js"></script>

  <!-- Custom scripts for this template -->
  <script src="js/clean-blog.min.js"></script>

</body>

</html>

4- Créer une fonction pour mettre en file d'attente les styles et les scripts

Nous allons créer une fonction qui devrait aller à functions.php pour mettre en file d'attente les styles et les scripts. Les styles et le script de mise en file d'attente devront supprimer tous les liens CSS et Javascript des en-têtes.php et footer.php et les appeler sur le site à l'aide d'une fonction. Pour y parvenir, nous avons besoin des fonctions wp_enqueue_style et wp_enqueue_script. Vous pouvez en savoir plus sur ces deux fonctions sur le développeur Word Press wp_enqueue_style nous permettra de mettre en file d'attente les styles et wp_enqueue_script aidera à mettre le script en file d'attente. Si vous avez tous les fichiers CSS et JS et créez votre fonction, vous devriez avoir quelque chose de similaire au bloc de codes ci-dessous:

functions.php

<?php  
function prositeweb_scripts() {
     wp_enqueue_style( 'bootstraps', get_template_directory_uri(). '/templates/vendor/bootstrap/css/bootstrap.min.css', false, false ); 
     wp_enqueue_style( 'all', get_template_directory_uri(). '/templates/vendor/fontawesome-free/css/all.min.cs', false, false ); 
     wp_enqueue_style( 'blog', get_template_directory_uri(). '/templates/css/clean-blog.min.css', false, false ); 
     wp_enqueue_script( 'jquermin',get_template_directory_uri().'/templates/vendor/jquery/jquery.min.js', false, false, true );
    wp_enqueue_script( 'bundle',get_template_directory_uri().'/templates/vendor/bootstrap/js/bootstrap.bundle.min.js', false, false, true );
    wp_enqueue_script( 'cleanblog',get_template_directory_uri().'/templates/js/clean-blog.min.js', false, false, true );
}
add_action( 'wp_enqueue_scripts', 'prositeweb_scripts' );
?>

5- Utilisez des fonctions de thème WordPress intégrées pour connecter les modèles

Maintenant que vous avez créé avec succès vos fichiers de modèles et mis en file d'attente vos scripts et styles à l'aide de fonctions, nous allons voir comment connecter des fichiers à l'aide de fonctions intégrées. WordPress utilisera:
  • get_header() pour connecter header.php à un fichier-modèle. Dans notre cas, page.php
  • et get_footer() pour connecter footer.php à un fichier-modèle.
Nous allons ensuite ajouter les fonctions get_header() et get_footer() en haut et en bas de page.php, respectivement. Notre nouveau page.php sera similaire au code ci-dessous.

Votre nouveau modèle page.php

<?php
/**
 * Default Page Template
 * 
 */
//  global $post;

get_header();
?>
  <!-- Main Content -->
  <div class="container">
    <div class="row">
      <div class="col-lg-8 col-md-10 mx-auto">
        <div class="post-preview">
          <a href="post.html">
            <h2 class="post-title">
              Man must explore, and this is exploration at its greatest
            </h2>
            <h3 class="post-subtitle">
              Problems look mighty small from 150 miles up
            </h3>
          </a>
          <p class="post-meta">Posted by
            <a href="#">Start Bootstrap</a>
            on September 24, 2019</p>
        </div>
        <hr>
        <div class="post-preview">
          <a href="post.html">
            <h2 class="post-title">
              I believe every human has a finite number of heartbeats. I don't intend to waste any of mine.
            </h2>
          </a>
          <p class="post-meta">Posted by
            <a href="#">Start Bootstrap</a>
            on September 18, 2019</p>
        </div>
        <hr>
        <div class="post-preview">
          <a href="post.html">
            <h2 class="post-title">
              Science has not yet mastered prophecy
            </h2>
            <h3 class="post-subtitle">
              We predict too much for the next year and yet far too little for the next ten.
            </h3>
          </a>
          <p class="post-meta">Posted by
            <a href="#">Start Bootstrap</a>
            on August 24, 2019</p>
        </div>
        <hr>
        <div class="post-preview">
          <a href="post.html">
            <h2 class="post-title">
              Failure is not an option
            </h2>
            <h3 class="post-subtitle">
              Many say exploration is part of our destiny, but it’s actually our duty to future generations.
            </h3>
          </a>
          <p class="post-meta">Posted by
            <a href="#">Start Bootstrap</a>
            on July 8, 2019</p>
        </div>
        <hr>
        <!-- Pager -->
        <div class="clearfix">
          <a class="btn btn-primary float-right" href="#">Older Posts &rarr;</a>
        </div>
      </div>
    </div>
  </div>

  <hr>
  <?php
   get_footer(); 

?>
  • ajoutez la fonction wp_head au fichier header.php pour afficher une fonction WordPress dans l'en-tête.
  • Et la fonction wp_footer dans le fichier footer.php.

Au final, le fichier header.php ressemblera à ceci:

<?php
/*
 * Core header home template
 *
 * Customise this in your child theme by:
 * - Using hooks and your own functions
 * - Using the 'header-content' template part
 * - For example 'header-content-category.php' for category view or 'header-content.php' (fallback if location specific file not available)
 * - Copying this file to your child theme and customising - it will over-ride this file
 *
 * @package prositeweb
 */
?>

<!DOCTYPE html>
<html <?php language_attributes(); ?>>

<head><meta http-equiv="Content-Type" content="text/html; charset=utf-8">

  
  <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
  <meta name="description" content="">
  <meta name="author" content="">

  <title><?php  echo get_bloginfo( 'name' ); ?></title>

<?php wp_head(); ?>

</head>

<body <?php body_class(); ?>>

  <!-- Navigation -->
  <nav class="navbar navbar-expand-lg navbar-light fixed-top" id="mainNav">
    <div class="container">
      <a class="navbar-brand" href="index.html">Start Bootstrap</a>
      <button class="navbar-toggler navbar-toggler-right" type="button" data-toggle="collapse" data-target="#navbarResponsive" aria-controls="navbarResponsive" aria-expanded="false" aria-label="Toggle navigation">
        Menu
        <i class="fas fa-bars"></i>
      </button>
      <div class="collapse navbar-collapse" id="navbarResponsive">
        <ul class="navbar-nav ml-auto">
          <li class="nav-item">
            <a class="nav-link" href="index.html">Home</a>
          </li>
          <li class="nav-item">
            <a class="nav-link" href="about.html">About</a>
          </li>
          <li class="nav-item">
            <a class="nav-link" href="post.html">Sample Post</a>
          </li>
          <li class="nav-item">
            <a class="nav-link" href="contact.html">Contact</a>
          </li>
        </ul>
      </div>
    </div>
  </nav>

  <!-- Page Header -->
  <header class="masthead" style="background-image: url('img/home-bg.jpg')">
    <div class="overlay"></div>
    <div class="container">
      <div class="row">
        <div class="col-lg-8 col-md-10 mx-auto">
          <div class="site-heading">
            <h1>Clean Blog</h1>
            <span class="subheading">A Blog Theme by Start Bootstrap</span>
          </div>
        </div>
      </div>
    </div>
  </header>
 <!-- Footer -->
  <footer>
    <div class="container">
      <div class="row">
        <div class="col-lg-8 col-md-10 mx-auto">
          <ul class="list-inline text-center">
            <li class="list-inline-item">
              <a href="#">
                <span class="fa-stack fa-lg">
                  <i class="fas fa-circle fa-stack-2x"></i>
                  <i class="fab fa-twitter fa-stack-1x fa-inverse"></i>
                </span>
              </a>
            </li>
            <li class="list-inline-item">
              <a href="#">
                <span class="fa-stack fa-lg">
                  <i class="fas fa-circle fa-stack-2x"></i>
                  <i class="fab fa-facebook-f fa-stack-1x fa-inverse"></i>
                </span>
              </a>
            </li>
            <li class="list-inline-item">
              <a href="#">
                <span class="fa-stack fa-lg">
                  <i class="fas fa-circle fa-stack-2x"></i>
                  <i class="fab fa-github fa-stack-1x fa-inverse"></i>
                </span>
              </a>
            </li>
          </ul>
          <p class="copyright text-muted">Copyright &copy; <?php echo get_bloginfo( 'name' ); ?> <?php echo date("Y"); ?></p>
        </div>
      </div>
    </div>
  </footer>

  <?php 

  wp_footer(); ?>

</body>

</html>

7-Donnez un nom à votre thème

À ce stade, nous éditerons le fichier style.css pour donner un nom à notre thème. WordPress copie le nom du thème à partir du fichier style.css. Cependant, si nous laissons le style.css vide, WordPress utilisera le nom du dossier comme nom de thème. Tout ce que nous devons faire, c'est
  • ouvrir le fichier style.css
  • et collez le code ci-dessous
  • Changer le nom et d'autres informations
/*
Theme Name: My first template
Theme URI: https://www.prositeweb.ca/
Author: Empowering Pro Website
Author URI: https://www.prositeweb.ca/
Description: My first template
Version: 1.1
License: WordPress theme is comprised of two parts: (1) The PHP code is licensed under the GPL license as is WordPress itself.  You will find a copy of the license text in the same directory as this text file. Or you can read it here: http://codex.wordpress.org/GPL (2) All other parts of the theme including, but not limited to the CSS code, images, and design are licensed according to the license purchased. Read about licensing details here: http://wiki.envato.com/support/legal-terms/licensing-terms/
License URI: license.txt
Tags: one-column, two-columns, right-sidebar, custom-header, custom-menu, editor-style, featured-images, microformats, post-formats, rtl-language-support, sticky-post, translation-ready
Text Domain: prositeweb
*/

8-Créer le fichier png de capture d'écran

Si vous n'ajoutez pas de fichier de capture d'écran, vous pouvez toujours activer votre thème. Mais vous aurez une couverture vierge, comme illustré dans l'écran d'impression ci-dessous. blank Pour remplacer l'image vierge, nous devons ajouter un fichier image screenshot.png à notre dossier de thème.

9- Activez et commencez à utiliser notre thème

Et enfin, vous pouvez aller dans votre Admin -> Apparence -> Thème et activer votre thème. Si vous suivez toutes les étapes, vous aurez quelque chose de similaire à l'image de la bannière. Il y a beaucoup d'autres personnalisations à faire. Mais les étapes ont fourni les étapes nécessaires pour commencer. Si vous souhaitez en savoir plus sur le développement de modèles, vous pouvez cliquer sur ce lien pour télécharger le didacticiel actuel.

Lien pour télécharger le thème

Téléchargez le thème  

Partie 2: Ajout des fichiers JavaScript et transformation du contenu statique en du contenu dynamique.

Dans la partie 1, si vous l'avez remarqué, le design WordPress obtenu était avec du contenu statique. En d'autre termes, tout le texte et les informations se trouve encore dans le code. Dans la partie 2, nous allons fixer quelques bugs et commencer par la dynamisation du contenu. À la fin de cette partie, Nous aurons un design et fonctionnalités équivalant au design initial. En plus de cela, nous allons remplacer le contenu au fur et à mesure.
Cette vidéo est la deuxième partie de la vidéo sur "comment créer un thème Wordpress à partir de HTML 5". La vidéo est présentement disponible sur notre chaine YouTube. À la fin de cette vidéo combinée aux autres vidéos, vous allez être capable de créer votre premier thème Wordpress.

Objectif

Le but de cette article est de vous permettre de créer un thème WordPress avec toutes les informations de base. Vous serez également capable de rendre le contenu de votre thème WordPress dynamique pour ainsi faciliter les modifications. Note: Cette vidéo est la suite de la première partie, donc n'hésitez pas à consulter l'autre vidéo.

Étapes à suivre

Pour créer votre premier thème WordPress, vous aurez besoin de deux principales étapes:
  • Fixer les erreurs et faire apparaitre toutes les informations de base; et
  • Modifier le contenu statique pour le rendre dynamique.

Comment fixer les erreurs et faire apparaître toutes les informations de base

  • Sur votre design que vous avez créer, si vous cliquez sur « inspect »,  vous verrez des erreurs du type 404 qui s’affichent. Ces erreurs montrent qu'il existe des liens qui sont absents et donc que vous devez insérer.
  • Aller sur fonction.php et ajouter les fichiers java script. Aller sur header.php, ouvrir les fichiers javascript, copier ou couper ces fichiers et coller dans fonction.php. Ainsi vous pourrez transformer les liens en fonctions de base WordPress.
Note : WordPress utilise une fonction appelée wp_script pour faire afficher les fichiers javascript.
  • Dans la structure de wp_script, il existe plusieurs paramètres . Le premier paramètre correspond au nom du lien que vous avez ajouté. Vous devez donc toujours vous rassurer que le nom soit unique pour chaque javascript que vous aurez à ajouter.
  • Après les modifications précédentes, sauvegarder la page et réactualiser votre « template » pour mettre à jour les modifications effectuées.
  • Il existe un autre type d'erreur au niveau de free lancer (on ne s’occupera pas de cette erreur pour le moment). Vous devez juste vous rassurer que les informations de base y sont présentes.
  • Si vous repartez sur « inspect », vous allez voir les fichiers que vous avez remplacés en bas de la page.
Ainsi vous avez déjà toutes vos informations de base et il ne vous reste plus qu'à rendre votre contenu dynamique.

Comment modifier le contenu statique qui est sur le site pour qu’il devienne dynamique.

  • Si vous ouvrer le fichier page.php, les informations présentent sont encore statiques. Ceci voudrait dire que vous ne pouvez pas les modifier sans rentrer dans le code Back end. Ainsi vous devez remplacer les informations pour être capable de les modifier dans l’arrière plan sans toujours repartir dans le code.
  • Aller dans le fichier page.php et localiser l'endroit où se trouve startboostrap
  • Vous pouvez définir la variable global post de WordPress. Ceci  pour permettre de faire appel aux informations d’une page directement à partir de la page sur laquelle on travaille. Vous n'aurez pas besoin de rentrer dans le code Back end toutes les fois que vous faites des changements.
  • Aller dans header.php et définissez la variable global post. Récupérer le titre de la page et faite le remplacement avec votre titre que vous aurez choisi.
  • Ensuite sauvegarder et réactualiser votre template et vous verrez les modifications que vous avez effectués.
Donc en gros vous pouvez aller dans header.php et remplacer les informations existantes par vos informations, ensuite sauvegarder et réactualiser votre template pour voir les informations. J'espère que cette vidéo vous a aidé à apprendre comment créer votre premier thème wordPress. N'hésitez pas à nous contacter si vous avez des questions.