Développer un site Web avec Wordpress

La solution CMS OpenSource historique

© Julien Noyer - All rights reserved for educational purposes only

---

Introduction

Wordpress est l'un des CMS les plus complet du marché, il est considéré que plus de 90% des sites Web actuels peut être développé avec Wordpress ce qui le place comme l'un des outils essentiel à maîtriser pour toutes personnes désirant travailler dans le domaine du digitale.

Il est important de noter que Wordpress est plus qu'un outil "No Code" dans la mesure ou, pour faire en sorte de développer des compétence poussées en Wordpress, la manipulation des principes de programmation et des différents langages du Web (HTML, CSS, Javascript et PHP) sont obligatoires.

---

Installation de Wordpress

Pour installer et utiliser Wordpress vous devez avoir à disposition les éléments suivants :

• Le dossier contenant Wrodpress
• Un serveur Apache
• Une base de données MySql

Dans un premier temps, il est conseillé d'installer Wordpress en local (via MAMP par exemple) pour ensuite, une fois que les différentes pages, articles, extensions et thème soit créés et configurés correctement, le mette en ligne via le protocole FTP.

Ce document ne traite pas de l'installation de Wordpress, ni même de l'utilisation basique du backoffice, mais des techniques particulières pour faire de Wordpress un outil plus poussé que la simple mise en ligne d'un site utilisant un template.

---

Les thèmes Worpress

Les thèmes Wordpress sont des design de site Web qu'il est possible d'intégré dans un site Wordpress. Il est existe une très grande quantité, plus ou moins biens élaborés, qui vont du gratuit au payant. Il est conseillé de ne travailler qu'avec des templates payants ou avec les template directement ptoposé par Wordpress car ils vous assurent plus de stabilité.

Pour installer un thèmes Wordpress, il vous suffit de vous rendre dans la section Apparences / Thèmes pour sélectionner un thème dans la liste proposé ou télécharger un thème.

Assurer la mise à jour du thème

Dans la plupart des cas, un thème Wordpress ne suffit pas et vous allez devoir être capable de la modifier tout en vous assurant de pouvoir mettre à jour le thème sans perdre les changements qui vous aurez apporté. C'est pourquoi, une fois que vous avez sélectionné et mis en place votre thème vous devez absoluement créer un thème enfant.

Pour créer un thème enfant, vous devez installer l'extension Child Theme Configurator et suivre les étapes de création d'un thème enfant basé sur le thème que vous aurez choisi. Une fois le thème enfant créé, vous devez vous rendre dans la section Apparences / Thèmes pour activer le thème enfant que vous aurez créé.

Il est impératif de ne pas supprimer le thème parent ayant permis de créer le thème enfant.

Grâce au thème enfant, vous pourrez modifier le CSS, créer des templates de page ou même modifier la totalité du template mais toutes les modifications que vous approterez devront être faite dans le dossier de votre thème enfant.

Tous les fichiers ayant le même nom dans le thème enfant remplacerons ceux présent dans le thème parent.

Les extensions Wordpress

Tout comme les thèmes il existe un très grand nombre d'extension - ou plugins - Wordpress. Le but de ce document n'est pas d'en dresser une liste exhaustive, mais de vous présenter les extensions les plus intéressantes.

Afin de ne pas surcharger un site et d'optimiser son chargement dans le navigateur, il est conseiller de ne pas utiliser plus de 7 extensions et de bien faire attention à ne pas en utiliser celles qui ne correspondant pas à votre version de Wordpress ou qui n'ont que très peu d'étoiles ou d'installation actives.

Voici la liste des extensions qu'il vous est conseillé d'installer :

• Child Theme Configurator : gestion des thèmes enfants (à supprimer une fois utilisée)
• Contact Form 7 : gestion des formualire de contacts
• Shortcode Ultimate : gestiocomplète de shortcode
• ACF : gestion des métadonnées d'une page
• Yoast SEO : gestion du SEO
• Duplicate Post : dupluquer des articles et des pages
• Duplicator : extension de migration (à supprimer une fois utilisée)

---

Les templates de page

Un template de page en Wordpress est un fichier PHP placé dans le dossier actif du thème Wordpress dans lequel il est possible d'utiliser toutes les techniques de développement Web. Il est possible de créer autant de templates de page que nécessaire, le nombre n'est pas limité, mais il est conseillé de bien réfléchir avant de ce lancer dans la création d'un template pour ne pas réécrire des lignes de code inutile.

Voici un code de départ pour créer un template de page :

<?php
/**
 * Template Name: DEFINIT UN NOM SP2CIFIQUE
 * Template Post Type: page
 */
	
get_header();?>

<!-- 
    Ajouter du contenu HTML et/ou PHP
-->

<?php
get_footer();

Selon le thème de base que vous aurez choisi, il est conseiller de respecter la structure du fichier "page.php" pour s'assurer de bien reprendre tous les éléments nécessaires à l'affichage d'une page. Prenons l'exemple du thème "Twenty Seventeen" et la création d'un template de page nommé "Page contacts" :

<?php
/**
 * Template Name: Page contacts
 * Template Post Type: page
 */

get_header();?>

<div class="wrap">
    <div id="primary" class="content-area">
        <main id="main" class="site-main" role="main">

            <?php
            while ( have_posts() ) :
                the_post();

                get_template_part( 'template-parts/page/content', 'page' );

                // If comments are open or we have at least one comment, load up the comment template.
                if ( comments_open() || get_comments_number() ) :
                    comments_template();
                endif;

            endwhile; // End the loop.
            ?>

        </main><!-- #main -->
    </div><!-- #primary -->
</div><!-- .wrap -->

<?php
get_footer();

Tout comme pour les pages, il est possible de définir des templates pour les articles.

Structure d'un template de page

Il est très important voir essentiel de bien structurer un template de page pour mieux se repérer dans les fichiers. Comme il est indiqué dans le code ci-dessous, une fonction "get_template_part()" est utilisé pour charger un fichier, vous devez donc bien prendre en compte cette notion dans la création de vos templates.

Dans un premier temps, vous devez créer un dossier "template-parts" à la racine du dossier de votre thème enfant. Vous devez ensuite créer des dossiers dans le dossier "template-parts" pour organiser vos différentes templates. Voici à quoi correspond la ligne de code suivante :

get_template_part( 'template-parts/page/content', 'page' );

Le fichier content-page.php est chargé dans le template de page Page contacts depuis le dossier page situé dans le dossier template-parts.

Si le fichier n'existe pas dans ni le dossier du thème enfant, ni dans le dossier du thème parent, il y aura une erreur de chargement.

---

Les fonctions Wordpress

Pour faire en sorte de pouvoir développer toutes vos envies de site Web, il est essentiel de ne pas considérer l'utilisation de Wordpress uniquement avec des thèmes, car vous serez vite limité. Au-delà de vos besoins spécifiques en développement, il est important de conserver le principe du backoffice de Wordpress intact dans la mesure où vous ne serez pas le ou la seul-e à mettre à jour le site. C'est pourquoi l'utilisation de "Elementor" ou tout autre type de module de gestion de contenu est à proscrire dans la mesure où ces extensions ne sont pas suffisamment simples d'utilisation. Un backoffice doit rester simple pour les administrateurs finaux qui seront dans la plupart des cas vos clients.

C'est pourquoi, plutôt que de travailler avec une extension de gestion de contenu, il faut travailler sur des templates de page et y intégrer des fonctions Wordpress spécifiques dont les définitions se trouvent le Codex Wordpress.

get_stylesheet_directory_uri() : Charger un fichier externe

Selon les cas, vous pourrez avoir besoin de charger un fichier externe dans votre template de page (du CSS ou du Javascript par exemple). Pour ce faire, vous devez créer un dossier dans le dossier de votre thème enfant pour ensuite le charger dans votre template de page. La méthode en Wordpress consiste à capter l'URL du thème actif pour ensuite aller chercher dans le bon dossier le fichier que vous souhaitez.

Dans l'exemple ci-dessous nous chargeons un fichier Javascript nommé script.js, placé dans un dossier js à la racine de notre thème enfant :

<script src="<?php echo get_stylesheet_directory_uri(); ?>/js/script.js"></script>

function_exists() : Tester la présence de méta-données ACF

Comme vu précédemment, l'extension ACF permet d'ajouter des méta-données dans une page. Pour récupérer la valeur de ces méta-données il existe une fonction Wordpress spécifique qu'il faut utiliser de la manière suivante :

<?php
/**
 * Template Name: Utilisation de ACF
 * Template Post Type: page
 */

if ( function_exists('get_field') ) {
	$linkedin = get_field('linkedin');
	$instagram = get_field('instagram');
}

get_header();?>

<ul>
    <li><a href="<?php echo $linkedin ?>" target="_blank" rel="noopener noreferrer">LinkedIn</a></li>
    <li><a href="<?php echo $instagram ?>" target="_blank" rel="noopener noreferrer">Instagram</a></li>
</ul>

<?php
get_footer();

Les méta-données linkedin et instagram doivent au préalable avoir été configurés dans le backoffice.

do_shortcode() : Charger le contenu d'un shortcode

Que ce soir avec Shortcode Ultimate ou une autre extension proposant des shortcode, il est possible d'utiliser la fonction "do_shortcode()" dans un template de page pour charger le contenu d'un shortcode.

Dans l'exempel ci-dessous nous chargeons un formulaire de contact généré avec Contact Form 7 :

<?php echo do_shortcode( '[contact-form-7 id="1" title="Formulaire de contact"]' ) ?>

Vous pouvez faire en sorte de définir en backoffice le formule spécifique à charger dans votre template de page en associant la fonction "function_exists()" de la manière suivante :

<?php
/**
 * Template Name: Page contact
 * Template Post Type: page
 */

if ( function_exists('get_field') ) {
	$contactForm = get_field('contact-form');
}

get_header();?>

<?php echo do_shortcode( $contactForm ) ?>

<?php
get_footer();

query_posts() : Charger une liste d'articles

Une page Wordpress peut être constituée de plusieurs éléments en plus de son contenu. Sur une page d'accueil par exemple il y à souvent une liste d'articles mis en avant, il est possible de le faire grâce à la fonction query_posts().

La mise en place de cette fonction ce fait de la manière suivante :

<?php
/**
 * Template Name: Page d'accueil
 * Template Post Type: page
 */
get_header();?>

<?php echo do_shortcode( $contactForm ) ?>

<section>
    <?php query_posts('cat=5&order=DESC'); while (have_posts()) : the_post(); ?>
        <article>
            <img src="<?php echo get_the_post_thumbnail_url() ?>" alt="<?php echo get_the_title(); ?>">
            <?php the_title( '<h2>', '</h2>' ); ?>
            <?php the_content() ?>
        </article>
    <?php 
        endwhile; 
        wp_reset_query();
    ?>
</section>

<?php
get_footer();

Dans le code ci-dessus plusieurs fonctions sont utilisées, en voici les définitions :

• get_the_post_thumbnail_url() : récupérer l'URL de l'image mise en
• the_title() : afficher le titre de l'article dans une balise HTML
• get_the_title : récupérer le texte brute du titre de l'article
• the_content() : afficher le contenu de l'article

wp_nav_menu() : Charger un menu

Selon le thème Wordpress que vous utilisez, plusieurs zones de menu sont définies. Si ce n'est pas le cas, vous pouvez en créer une en éditant le fichier "functions.php" de votre thème enfant en y ajoutant le code suivant :

function wpb_custom_new_menu() {
  register_nav_menu('my-custom-menu',__( 'My Custom Menu' ));
}
add_action( 'init', 'wpb_custom_new_menu' );

Une fois votre zone de menu créée, vous pouvez l'éditer depuis le backoffice pour y ajouter les liens que vous désirez pour ensuite utiliser une fonction dans un template de page de la manière suivante :

<?php
/**
 * Template Name: Page menu custom
 * Template Post Type: page
 */
get_header();?>

<?php echo do_shortcode( $contactForm ) ?>

<?php wp_nav_menu(array('theme_location' => 'my-custom-menu')); ?>

<?php
get_footer();

L'utilisation de la fonction wp_nav_menu() intégre dans la page une liste HTML contenant des liens.