--- title: Développer un site Web avec Wordpress tags: lowcode, cms, wordpress robots: noindex, nofollow author: Julien Noyer ^LIHl@lY^0r7)&MaFB --- # Développer un site Web avec Wordpress *La solution CMS OpenSource historique* ![](https://i.imgur.com/QoV8qOS.png) > &copy; [Julien Noyer](https://www.linkedin.com/in/julien-n-21219b28/) - All rights reserved for educational purposes only --- ## Introduction [Wordpress](https://fr.wordpress.org) 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](https://fr.wordpress.org) 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](https://fr.wordpress.org), 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](https://fr.wordpress.org) 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](https://fr.wordpress.org) 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](https://fr.wordpress.org), ni même de l'utilisation basique du backoffice, mais des techniques particulières pour faire de [Wordpress](https://fr.wordpress.org) 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](https://fr.wordpress.org). 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](https://fr.wordpress.org) car ils vous assurent plus de stabilité. Pour installer un thèmes [Wordpress](https://fr.wordpress.org), 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](https://fr.wordpress.org) 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](https://fr.wordpress.org/plugins/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](https://fr.wordpress.org). 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](https://fr.wordpress.org) 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**](https://fr.wordpress.org/plugins/child-theme-configurator/) : gestion des thèmes enfants (à supprimer une fois utilisée) - [**Contact Form 7**](https://fr.wordpress.org/plugins/contact-form-7/) : gestion des formualire de contacts - [**Shortcode Ultimate**](https://getshortcodes.com) : gestiocomplète de shortcode - [**ACF**](https://fr.wordpress.org/plugins/advanced-custom-fields/) : gestion des métadonnées d'une page - [**Yoast SEO**](https://fr.wordpress.org/plugins/wordpress-seo/) : gestion du SEO - [**Duplicate Post**](https://fr.wordpress.org/plugins/copy-delete-posts/) : dupluquer des articles et des pages - [**Duplicator**](https://fr.wordpress.org/plugins/duplicator/) : extension de migration (à supprimer une fois utilisée) --- # Les templates de page ![](https://i.imgur.com/rHIqh41.png) Un template de page en [Wordpress](https://fr.wordpress.org) est un fichier PHP placé dans le dossier actif du thème [Wordpress](https://fr.wordpress.org) 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 : ```htmlmixed= <?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" : ```htmlmixed= <?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 : ```php= 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 ![](https://i.imgur.com/ZINNGUE.png) 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](https://fr.wordpress.org) 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](https://fr.wordpress.org) 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](https://fr.wordpress.org) spécifiques dont les définitions se trouvent le [**Codex Wordpress**](https://codex.wordpress.org/fr:Accueil). ## 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](https://fr.wordpress.org) 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 : ```htmlmixed= <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](https://fr.wordpress.org/plugins/advanced-custom-fields/) 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](https://fr.wordpress.org) spécifique qu'il faut utiliser de la manière suivante : ```htmlmixed= <?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](https://getshortcodes.com) 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](https://fr.wordpress.org/plugins/contact-form-7/) : ```htmlmixed= <?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 : ```htmlmixed= <?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](https://fr.wordpress.org) 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 : ```htmlmixed= <?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](https://fr.wordpress.org) 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 : ```php= 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 : ```htmlmixed= <?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.