Créer son thème WordPress (1/2)

Article écrit par valentin et publiée le 21 septembre 2022

Lorsque l’on débute sur WordPress, on cherche un thème sur la marketplace du CMS.

Cependant, après avoir fait plusieurs sites, on peut avoir l’envie de pousser plus loin la personnalisation. La solution la plus simple est de passer par un theme builder tel qu’Elementor ou Divi. Ces solutions, bien que totalement fonctionnel entraîne souvent un ralentissement du site et donc une perte de trafic ou un besoin de l’optimisation.

Dans ce tutoriel, nous verrons comment créer un thème entièrement et facilement qui respecte les standards actuels du web tout en proposant des performances intéressantes.

A la fin de cette formation, vous comprendrez le fonctionnement d’un thème sur WordPress en plus d’avoir la possibilité d’avoir un portfolio responsive et facile à gérer.

Trouver la documentation relative à la création de thème WordPress

Pour commencer, il est intéressant de se rendre sur la documentation officielle de WordPress afin de pouvoir vérifier l’architecture demandé par le CMS. Cette documentation reste également essentiel dans le développement d’un nouveau thème ou d’une extension, je vous conseille donc de garder ce lien. Ceci étant, lors d’une première lecture, tout cela peut sembler confus.

Débuter la création des fichiers

La première étape sera de créer un dossier vide sur votre ordinateur. Lorsque vous aurez terminé, ce dossier sera zippé puis téléverser sur votre site.

Le premier fichier à créer sera la feuille de style du site puis le fichier d’index :

style.css

/*
Theme Name: Portfolio
Theme URI: https://web-essentials.fr
Author: Valentin Dubrulle
Author URI: https://vdnet.fr
Description:  Thème créé depuis un article sur le site Web Essentials
Requires at least: 5.3
Tested up to: 5.9.3
Requires PHP: 5.6
Version: 1.4
License: GNU General Public License v2 or later
License URI: http://www.gnu.org/licenses/gpl-2.0.html
Text Domain: 
Tags:
*/

index.php

<?php



/**

 * The main template file

 *

 * This is the most generic template file in a WordPress theme

 * and one of the two required files for a theme (the other being style.css).

 * It is used to display a page when nothing more specific matches a query.

 * E.g., it puts together the home page when no home.php file exists.

 *

 * @link https://developer.wordpress.org/themes/basics/template-hierarchy/

 *

 * @package WordPress

 * @subpackage portfolio

 * @since portfolio 1.0

 */

?>

<h1>Hello World</h1>

Votre thème est désormais créé et est reconnu par WordPress.

Cependant, celui-ci n’affiche aucun contenu en dehors d’un titre, Hello World.

Nous allons donc nous attaquer à la partie suivante : préparer l’affichage des pages ainsi que les fonctions que l’on souhaite avoir sur notre site. Afin de pouvoir effectuer facilement cela, nous utiliserons Bootstrap. D’autres frameworks pourraient cependant être utilisés ou d’écrire toutes ses règles dans la feuille de style CSS.

Nous allons donc créer un nouveau fichier qui regrouperas les fonctionnalité du thème.

functions.php

<?php



/**

 * Functions and definitions

 *

 * @link https://developer.wordpress.org/themes/basics/theme-functions/

 *

 * @package WordPress

 * @subpackage portfolio

 * @since portfolio 1.0

 */



// Sécurisation basique du thème :

defined('ABSPATH') || exit;



// Options par défaut :

if (!function_exists('portfolio_theme_support')) {



    function portfolio_theme_support()

    {



        //Génération dynamique du titre :

        add_theme_support('title-tag');



        // Ajoute des tailles par défaut des photos :

        add_theme_support('post-thumbnails');

        add_image_size('custom-thumb', 300, 200, array('center', 'center'));



        // Validation de la version HTML en 5	

        add_theme_support(

            'html5',

            array(

                'comment-list',

                'comment-form',

                'search-form',

                'gallery',

                'caption',

                'style',

                'script'

            )

        );



        //permet de remplacer dynamiquement un logo sur le site

        add_theme_support('custom-logo');


        add_theme_support('customize-selective-refresh-widgets');



        //Enregistre 2 menus : menu-1 qui sera placé en header en footer qui sera en bas de page

        register_nav_menus(array(

            'menu-1'    => __('Header Menu', 'portfoliotheme'),

            'footer'    => __('Footer Menu', 'portfoliotheme'),

        ));



        //enregistre une classe. Celle-ci nous permettras plus tard de réaliser un menu à niveau pour notre header

        require_once get_template_directory() . '/classes/class-wp-bootstrap-navwalker.php';

    }

}

add_action('after_setup_theme', 'portfolio_theme_support');







// Ajoute le CSS

function add_custom_css()

{

    // Feuille Bootstrap par défaut

    wp_enqueue_style('bootstrap-css', get_stylesheet_directory_uri() . '/assets/css/bootstrap.min.css', false, '5', 'all');

    // ajoute la feuille CSS après, nous permettant d'outrepasser certaines règles Bootstrap

    wp_enqueue_style('portfolio-theme', get_stylesheet_uri());

}

add_action('wp_enqueue_scripts', 'add_custom_css');





// ajoute le JS

function add_custom_js()

{

    // ajoute le JS de Bootstrap

    wp_enqueue_script('bootstrap-js', get_stylesheet_directory_uri() . '/assets/js/bootstrap.bundle.min.js', '', '5', true);

}

add_action('wp_enqueue_scripts', 'add_custom_js');

Créer les dossiers nécessaires

Sur ce code, on note qu’il nous faudras des dossiers incluant des fichiers pour le fonctionnement de Bootstrap mais aussi du menu.

Ces dossiers et fichiers sont disponible sur ce zip :

Il vous suffit de le télécharger puis de le placer dans votre dossier de thème WordPress.

Maintenant que les fonctions sont prêtes, il nous faut rajouter les fichiers correspondant aux pages à afficher ainsi que le l’en-tête et le pied de page.