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.
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.
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');
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.