Créer son thème WordPress – Part. 3

Dans cette partie, nous allons nous concentrer sur le fichier HEADER.php et tous ses composants. Mais avant de rentrer dans le vif du sujet, nous allons devoir lister ces composants et communiquer avec WordPress pour les déclarer ou les activer.

1- De quoi avons nous besoin pour le thème MARY ?

J’ai fait le choix d’utiliser BOOTSTRAP et ses composants JS pour développer ce thème. Je vais également avoir besoin de déclarer des composants personnalisés, tels que mes propres feuilles de style ou encore mes propres scripts JS.

Il me faudra également activer un certain nombre de supports WordPress et enregistrer des menus ou des widgets pour rendre administrables certaines zones de mes pages.

Et c’est là qu’intervient notre fichier FUNCTIONS.php que vous devez créer à la racine de votre thème.

1-1 comment travailler proprement avec functions.php ?

Les HOOKS

Nous allons devoir faire appel à de nombreuses fonctions via les HOOK, également appelés ACTION, de WordPress.

Les hooks (ou crochet, hameçon en français) est un mécanisme permettant d’effectuer une action supplémentaire à un instant donné prévu par le système.

http://www.guillaumevoisin.fr/

En d’autres termes, dans WordPress les HOOK sont déclarer à certains endroits du code source et vous pourrez faire appel à vos fonctions PHP, aux endroits souhaités, grâce à eux.

En créant vos propres thèmes ou plugins, vous pourrez également créer vos propres HOOK et permettre à d’autres développeurs de les utiliser pour implémenter/appeler leurs propres fonctions.

(Je vous avez dit qu’on utiliserait beaucoup le terme propre…)

Organisation du fichier functions.php

Pour travailler proprement, nous allons créer un dossier INC à la racine de notre thème. Ce dossier va accueillir par la suite d’autres fichiers PHP, qui vont nous permettre de regrouper les déclarations de nos fonctions selon leur rôle.

Commencez à créer le fichier setup.php dans ce nouveau dossier INC. Dans votre fichier functions.php vous allez lier setup.php avec la fonction require_once comme ci-dessous :

<?php
require_once('inc/setup.php');

IMPORTANT : on ne ferme toujours pas la balise PHP.

A présent votre fichier setup.php fait partie intégralement de votre fichier functions.php. Écrire du code dans le setup.php c’est écrire du code dans functions.php. Mais pas le contraire.

1-2 Déclarer nos feuilles de style

Grâce à ce nouveau fichier setup.php, je vais pouvoir commercer à lier tous les fichiers feuilles de style (CSS) dont j’ai besoin :

• le style.css de mon thème
• le CSS de BOOTSTRAP
• le CSS de FONTAWESOME pour utiliser des pictogrammes
• Et par la suite tout autre CSS qui serait utilisé pour l’éditeur en admin, la mise en page print, etc.

Il nous faut donc les fichiers sources de BOOTSTRAP et de FONTAWESOME pour les inclure dans notre thème.

• Version compilée CSS & JS de BOOTSTRAP
• Création de votre kit gratuit FONTAWESOME

Organiser à présent toutes ces ressources dans un dossier ASSETS à la racine de votre thème, en les distribuant, selon leur type, dans les sous-dossiers à créer ci-dessous :

• CSS
• JS
• WEBFONT

Activation des CSS dans setup.php

Il ne reste plus qu’à déclarer une fonction mary_register_styles() qui ajoutera ces ressources à nos pages :

<?php

/* enregistrement des styles du site */
function mary_register_styles() {
        /* Récupère la version du thème */
	$theme_version = wp_get_theme()->get( 'Version' );

	/* add bootstrap */
	wp_enqueue_style( 'mary-bootstrap-style', get_template_directory_uri() . '/assets/css/bootstrap.min.css', null, $theme_version, 'screen' );

	/* add fontawesome */
	wp_enqueue_style( 'mary-fontawesome-style', get_template_directory_uri() . '/assets/css/all.min.css', null, $theme_version, 'screen' );

	/* add style du thème */
	wp_enqueue_style( 'mary-style', get_stylesheet_uri(), array(), $theme_version );

}

Les fonctions rencontrées :

• wp_enqueue_style() : Permet d’ajouter un fichier CSS à votre thème en passant son chemin, son identifiant, la version du thème et le type de media associé en argument.
• get_template_directory_uri() : permet de récupérer le chemin absolut du dossier de votre thème. vous n’avez plus qu’à concaténer le reste du chemin vers votre fichier en commençant par un « / ».
• get_stylesheet_uri() : récupère et retourne le chemin complet vers votre fichier style.css qui est à la racine de votre thème.

A présent il nous faut appeler cette fonction, mary_register_styles(), via le HOOK WordPress « wp_enqueue_scripts » dans le fichier functions.php :

<?php

require_once('inc/setup.php');

/* ADD ACTION FONCTIONS SETUP.PHP */
add_action( 'wp_enqueue_scripts', 'mary_register_styles' );

Toutes ces nouvelles ressources CSS sont maintenant disponibles dans votre thème. Vous pouvez afficher le code source dans votre navigateur préféré pour vous en rendre compte.

Il ne vous reste plus qu’à ajouter du code CSS à votre style.css pour commencer la personnalisation de vos éléments. Même si il y en a peu pour l’instant.

Bibi.

1-3 Activer des supports WordPress

Vous allez créer la fonction mary_theme_support() dans votre fichier setup.php :

/* Ajout de support WORDPRESS au thème */

function mary_theme_support() {
	// Permet de choisir une couleur de fond dans "personnaliser" en admin.
	add_theme_support(
		'custom-background',
		array(
			'default-color' => 'f5efe0',
		)
	);

	/* Active la gestion de l'image à la une pour article et page */
	add_theme_support( 'post-thumbnails' );

	// Initialiser les valeurs de dimension des images à la une
	set_post_thumbnail_size( 1200, 9999 );

	// Ajoute un nouveau format d'image à la gestion des images wordpress.
	add_image_size( 'mary-fullscreen', 1980, 9999 );

	// Dimensions du logo personnalisé.
	$logo_width  = 120;
	$logo_height = 90;

	// double les dimensions du logo si le mode retina est actif.
	if ( get_theme_mod( 'retina_logo', false ) ) {
		$logo_width  = floor( $logo_width * 2 );
		$logo_height = floor( $logo_height * 2 );
	}

	add_theme_support(
		'custom-logo',
		array(
			'height'      => $logo_height,
			'width'       => $logo_width,
			'flex-height' => true,
			'flex-width'  => true,
		)
	);

	/* WordPress peut gérer les balises title dans les meta */
	add_theme_support( 'title-tag' );

	/* Autorise la traduction du thème avec le textdomain */
	load_theme_textdomain( 'mary' );
}

Dans cette nouvelle fonction nous faisons successivement appel à la fonction add_theme_support de WordPress qui, selon les paramètres passés en argument, va activer des fonctionnalités de WordPress. En reprenant dans l’ordre voici ce que nous avons activé ici :

• Ajouter la possibilité de saisir une couleur de fond dans Apparence > Personnaliser.
• Activer la gestion des images à la une pour nos publications.
• Paramétrer les dimensions par défaut des images à la une et ajouter une nouvelle dimension pour les images de la bibliothèque de média.
• Paramétrer et ajouter la possibilité de gérer un logo personnalisé dans Apparence > Personnaliser.
• Autoriser WordPress à ajouter les balises <TITLE> en en-tête.
• Enregistrer le text-domain qui sera utiliser pour toutes nos futures chaines de caractère à venir, et permettre de créer des fichiers de traductions.

Il ne reste plus qu’à appeler la fonction mary_theme_support() dans notre fichier functions.php sur le HOOK « after_setup_theme« .

<?php

require_once('inc/setup.php');

/* ADD ACTION FONCTIONS SETUP.PHP */
add_action( 'wp_enqueue_scripts', 'mary_register_styles' ); //ajout des CSS
add_action( 'after_setup_theme', 'mary_theme_support' ); //Activation des supports WordPress

1-4 Ajout d’une zone de MENU

Toujours dans setup.php nous allons déclarer une nouvelle fonction mary_menus() comme ceci :

function mary_menus() {
	$locations = array(
		'primary'  => __( 'Menu principal', 'mary' ),
		'mobile'   => __( 'Menu mobile', 'mary' ),
		'footer'   => __( 'Menu pied de page', 'mary' ),
		'social'   => __( 'Partage social', 'mary' ),
	);
        /* enregistrement des identifiants de nos zones de menu */
	register_nav_menus( $locations );
}

Dans cette fonction, nous commençons par créer un tableau qui va lister toutes les entités de menu que nous souhaitons enregistrer et utiliser dans notre thème. L’index correspond à l’identifiant du menu et la valeur est l’intitulé qui sera utilisé en administration.

la fonction __() nous permet d’enregistrer la chaîne de caractère avec notre text-domain « mary » pour être reconnue et utiliser par les fichiers de traduction. Normalement pour bien faire on devrait déjà tout écrire en anglais, langue par défaut de développement de WordPress.

1-5 Désactiver des fonctions wordpress inutiles