---
# System prepended metadata

title: Développer un site Web avec Wordpress
tags: [' wordpress', nocode, ' support']

---

---
title: Développer un site Web avec Wordpress
tags: nocode, support, wordpress
robots: noindex, nofollow
author: Julien Noyer ^LIHl@lY^0r7)&MaFB
---


# Développer un site Web avec Wordpress

![](https://i.imgur.com/xnUNTAK.png)

[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 actuel 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.

<br>

---

<br><br><br>

# 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 correctment, le mettr een 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 tamplate.

<br><br>

## 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 exeiste un 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 template 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 suffi de vous rendre dans la section `Apparences / Thèmes` pour sélectionner un thèmes dans la liste proposé ou télécharger un thème.

<br><br>

## Assurer la mise à jour du thème

Dans la plupart des cas un thème [Wordpress](https://fr.wordpress.org) ne suffi 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 approté. 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 permit de crére le thème enfant.

Grâce au thème enfant vous pourrez modifier le CSS, créer des template 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.

<br><br>

## Les extensions Wordpress

Tout comme les thèmes il esiste un très grand nombre d'extension - ou plugins - [Wordpress](https://fr.wordpress.org). Le but de ce document n'est pas d'en desser 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 dasn 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 correpondent 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) 

<br>

---

<br><br><br>

# 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 template 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.

Voci 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();

```

<br>

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écessaire à 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.

<br><br>

## 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 dossuer "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.


<br>

---

<br><br><br>

# Les fonctions Wordpress

![](https://i.imgur.com/ZINNGUE.png)

Pour faire en sorte de pouvoir développer toutes vos envie 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 ou 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 ou ces extensions ne sont pas suffisament simple 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).

<br><br>

## 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>
```

<br><br>

## 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.


<br><br>

## 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 formualre 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();
```

<br><br>

## 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 sont contenu. Sur une page d'acceuil par exemple il y à souvent une liste d'artiles 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 si-dessus plusieurs fonctions sont utilisées, voici meur définition : 

- **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


<br><br>

## wp_nav_menu() : Charger un menu

Selon le thème [Wordpress](https://fr.wordpress.org) que vous utilisez, plusieurs zones de menu sont définis. 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.