WordPress

Bienvenue dans la documentation WordPress ! Cette ressource avancée vous guidera à travers les différents aspects de la création et de la personnalisation d'un site WordPress, consultez la documentation officielle. Utilisez les liens fournis pour accéder à des ressources détaillées sur chaque sujet.

1. Les Templates WordPress

1.1 Introduction aux Templates

WordPress utilise des templates qui sont des modèles de conception pour définir l'apparence d'un site. Voici les fichiers principaux d'un thème WordPress :

• index.php
• style.css
• functions.php
• header.php
• footer.php
• sidebar.php
• front-page.php
• home.php
• singular.php
• single.php
• single-{post-type}.php
• archive.php
• archive-{post-type}.php
• page.php
• page-{slug}.php
• category.php
• author.php
• date.php
• search.php
• attachment.php
• image.php
• 404.php
• comments.php

Pour en savoir plus sur les templates, consultez la documentation WordPress.

1.2 Fichiers obligatoires dans un Thème

• index.php : Template principal, si aucun autre template n’existe, c’est lui qui sera pris en compte.
• style.css : Feuille de style principale, il contient les informations d’en-tête de votre thème, c'est-à-dire les informations principales qui définissent votre thème (nom, auteur, version...).
• functions.php : Cœur des fonctionnalités du thème, il permet d’ajouter, modifier ou supprimer des possibilités offertes par WordPress.

1.3 Personnalisation des Templates

• header.php : Partie haute d'un template, de la balise html jusqu’à l’ouverture de la balise body.
• footer.php : Partie basse d'un template, de la balise footer jusqu’à la fermeture de la balise html.
• single.php : Page d'un article.
• single-{post-type}.php : Page d'un article d’un type précis.
• archive.php : Liste des articles.
• archive-{post-type}.php : Liste des articles d’un type précis.
• category.php : Liste des articles d'une catégorie.
• taxonomy.php : Liste des articles d'une taxonomie.
• search.php : Résultats d'une recherche.

2. Fichiers statiques

2.1 Organisation des fichiers statiques

Les fichiers statiques, qui sont les fichiers chargés par le navigateur (images, css, js), permettent d'organiser les fichier WordPress. Un thème enfant est un thème qui hérite d’un autre thème. il est possible de modifier le thème enfant pour ajouter, modifier ou supprimer des comportements du thème parent.

Pour organiser vos styles, créez un dossier css avec un fichier theme.css à l'intérieur.

2.2 Chargement du style

Utilisez la fonction wp_enqueue_style pour charger les feuilles de styles sur les pages dans functions.php :

add_action('wp_enqueue_scripts', 'theme_enqueue_styles');
function theme_enqueue_styles()
{
    wp_enqueue_style('parent-style', get_template_directory_uri() . '/style.css');
    wp_enqueue_style('theme-style', get_stylesheet_directory_uri() . '/css/theme.css', array(), filemtime(get_stylesheet_directory() . '/css/theme.css'));
}

La fonction filemtime, permet de récupérer le timestamp de la dernière mise à jour d’un fichier, cela dans le but de versionner les fichiers statiques.

3. Shortcodes WordPress

Les shortcodes vous permettent d'insérer du contenu prédéfini dans vos articles et pages. Un shortcode s’écrit entre crochets, sous deux formes possible :

[monshortcode variable1=”valeur"]
[monshortcode]contenu[/monshortcode]

3.1 Création d'un Shortcode

Pour mettre en place un shortcode, on utilise la fonction add_shortcode :

<?php
add_shortcode('banniere-titre', 'banniere_titre_func');
function banniere_titre_func($atts)
{
    $atts = shortcode_atts(array(
        'src' => '',
        'titre' => 'Titre'
    ), $atts, 'banniere-titre'); // Je récupère les attributs mis sur le shortcode
    ob_start(); // Je commence à récupéré le flux d'information
    if ($atts['src'] != "") {
?>
        <div class="banniere-titre" style="background-image: url(<?= $atts['src'] ?>)">
            <h2 class="titre"><?= $atts['titre'] ?></h2>
        </div>
<?php
    }
    $output = ob_get_contents(); // J'arrête de récupérer le flux d'information et le stock dans la fonction $output
    ob_end_clean();
    return $output;
}

4. Templates de page personnalisés

Pour créer un template de page, il faut créer un dossier templates et placer les fichiers de template à l'intérieur. Utilisez get_template_part() pour séparer le template en parties, afin de créer une structure plus facile à faire évoluer et à maintenir. La page d’archive est la page qui va afficher l’ensemble des articles de manière partielle.

Un template de page permet de créer une page personnalisée avec un contenu spécifique, créer un dossier templates et mettre les fichiers de template dedans :

<?php
/**
 * Template Name: template à propos
 */
get_header();
?>
<main id="site-content">Nous sommes dans la page à propos.</main><!-- #site-content -->
<?php get_template_part( 'template-parts/footer-menus-widgets' ); ?>
<?php
get_footer();

5. Fonctions utiles

Voici quelques fonctions très utiles pour personnalisé un thème WordPress:

• the_content() : permet d'afficher le contenu d’une page (pas besoin de echo).
• get_the_excerpt() : permet d'afficher le chapô d’une page.
• the_title() : permet d'afficher le titre d’une page (pas besoin de echo).
• get_the_title() : permet d'afficher le titre d’une page.
• has_post_thumbnail() : permet de savoir si il y a une image à la une.
• get_the_post_thumbnail_url() : permet d'afficher l'image à la une.
• get_the_ID() : permet d'afficher l'id d'une page.
• get_permalink() : permet d'afficher le lien d'une page.
• get_terms() : permet d'afficher les catégories (taxonomy).
• get_the_terms(id, 'nom de la taxo') : permet d'afficher les catégories (pas besoin de echo).

5.1 Menu

Pour personnaliser les menus de WordPress, il faut utiliser cette fonction :

wp_nav_menu([
    'theme_location' => "menu_header",
    'container' => 'ul',
    'menu_class' => 'main-menu',
    'depth' => 3,
    'echo' => false
]);

Consultez la documentation officielle pour les menus.

6. Personnalisation Avancée

6.1 Utilisation des Hooks

Les hooks vous permettent de modifier les templates déjà existants dans functions.php :

function the_category_filter($categories)
{
    return str_replace("Outils", "Tous les outils", $categories);
}
add_filter('the_category', 'the_category_filter');

Consultez la liste de tous les hooks filter disponible sur la documentation officielle.

6.2 Débogage WordPress

Dans le fichier wp-config.php, on peut activer le mode debug du site. Utilisez aussi le plugin Query Monitor pour déboguer WordPress et améliorer ses performances, il contient de multiples outils d'analyse.

Pour mettre un site WordPress en mode maintenance, dans le fichier functions.php :

function maintenace_mode() {
    if ( !current_user_can( 'administrator' ) ) {
        wp_die('Maintenance.');
    }
}
add_action('get_header', 'maintenace_mode');

7. Administration WordPress

7.1 Création de pages dans le backoffice

Utilisez la fonction add_menu_page pour ajouter une page d'administration personnalisée, pour cela dans functions.php :

function cookinfamily_add_admin_pages() {
    add_menu_page(__('Paramètres du thème CookInFamily', 'cookinfamily'), __('CookInFamily', 'cookinfamily'), 'manage_options', 'cookinfamily-settings', 'cookinfamily_theme_settings', 'dashicons-admin-settings', 60);
}
function cookinfamily_theme_settings() {
    echo '<h1>'.get_admin_page_title().'</h1>';
}
add_action('admin_menu', 'cookinfamily_add_admin_pages', 10);

7.2 Création de fonctions dans le backoffice

La fonction register_setting s'exécute lors du chargement de la page d'administration de WordPress (via le hook admin_init) et sert à déclarer un réglage auprès de WordPress :

register_setting( string $option_group, string $option_name, array $args = array() );

7.3 Fonctions utiles dans le backoffice

Voici la liste des principales fonctions pour créer une page en backoffice avec différents réglages sur WordPress :

• register_post_type() : Permet de déclarer un type de contenu personnalisé.
• register_taxonomy() : Permet de déclarer une taxonomy personnalisé.
• register_setting() : Permet de déclarer un lot de réglages.
• add_settings_section() : Permet de déclarer une section pour y ranger nos réglages.
• add_settings_field() : Permet déclare un champ.
• settings_field() : Permet d'afficher les champs cachés nécessaires pour traiter notre formulaire.
• do_settings_sections() :  Permet d'afficher les champs associés aux sections.
• submit_button() : Permet d'affiche le bouton de soumission du formulaire.

8. Internationalisation et Traduction

Utilisez la fonction __() pour permettre la traduction des textes dans votre thème, elle est essentielle pour permettre à WordPress de fournir des sites multilingues et traduire les textes inscrits en "dur" dans le thème.

__('Lire la suite', 'cookinfamily');

9. Extensions Recommandées

• Custom Post Type UI (CPT UI) : Permet aux utilisateurs de créer et de gérer facilement des types de contenu personnalisés directement depuis l'interface d'administration de WordPress, sans avoir besoin de coder ou de modifier le code source du thème.
• Advanced Custom Fields (ACF) : Permet aux utilisateurs de créer des champs personnalisés pour les types de contenu classiques (comme les pages ou les articles) mais également pour les types de contenu personnalisés (comme Ingrédients par exemple).
• Pods : Permet de gérer tous les contenus personnalisé dans un unique emplacement grâce à ce framework.

10. Utilisation de l'AJAX

Pour utiliser l'AJAX, utilisez le hook :

add_action('wp_ajax_nopriv_my_ajax_function', 'my_ajax_function');