L'intermédiaire

Dans la continuité des articles dédiés à mon CMS préféré (WordPress), je vous propose ici de vous présenter « Virgin », un thème WordPress de base que j’ai développé moi-même. Je l’ai nommé « Virgin« . En voici les détails ;

Pourquoi Virgin ?

Car en fait il ne s’agit pas d’un thème comme vous allez en voir sur les sites de téléchargement de thèmes avec une panoplie d’options, des plugins pré installés et munis de photos génériques. Rien de tout ça. Comme son nom l’indique, il est vierge. Une fois installé, vous ne verrez qu’une page blanche avec le premier article présent lors de l’installation d’un nouveau WordPress. Sans couleurs, sans effets, sans fontes et sans images.

L’objectif ?

Ce thème m’est uniquement dédié. Il s’agit d’un bac à sable, une plage vierge mais prêt à implémenter un thème réalisé sur-mesure en front-end, auquel se greffera les fonctions WordPress bien connues pour rendre le site dynamique. (ce qui est quand même le but finale de ce type de plateforme).

Rappelons quelques notions de bases pour bien comprendre de quoi il s’agit. Si nous pourrions segmenter un site WordPress en 3 grandes parties (même s’il est bien plus que cela), nous aurions d’une partie le WordPress installé, en 2, ses outils externes appelés plugins et en 3 ; son thème actif. Il faut savoir que les plugins et les thèmes WordPress peuvent être créé par des développeurs. Virgin est un thème WordPress, mais utilisé seulement pour commencer à implémenter un site-web déjà « dessiné » en front.

Petit rappel …

Vous pouvez créer un thème WordPress avec 3 fichiers obligatoires :

Le fichier index.php qui affichera votre site,
le fichiers functions.php qui fera la liaison entre votre thème et les fonctionnalités WordPress
et enfin le fichier style.css utilisé dans ce cas-ci comme carte d’identité du thème, soit pour le différencier des autres thèmes qui seraient installés.

Remarque : un WordPress peut fonctionner sans plugins, en revanche, il ne peut fonctionner sans thèmes.

Astuce : 3 thèmes minimum

Personnellement, et après avoir lu pas mal d’articles sur le sujet, je mets toujours 3 thèmes lorsque j’installe un nouveau WordPress :

je garde le dernier thème WordPress officiel d’une nouvelle installation. Je ne garde pas les autres car ils peuvent comporter des failles de sécurité. En revanche, je garde une version officiel au cas où mon propre thème serait endommagé.
J’installe ensuite mon propre thème (Virgin)
Suivi d’un thème « enfant« . Sans rentrer dans les détails, un thème enfant est une sorte de « sous thème », ou en tous les cas tributaire du thème parent. Il est en fait obligatoire ou vivement conseillé d’en installer un. La raison ? Si vous mettez à jour votre thème parent, vous risquez de perdre toutes les configurations que vous auriez mis en place !
Mais revenons au thème parent de cet article: Virgin

Virgin

Virgin a tout de même plus de 3 fichiers à sa racine. Il possède différents dossiers propres au style du site à savoir ; un dossier « image« , « css« , « scss« , « fonts » & « js« . Leurs noms parlent d’eux-mêmes. Deux dossiers sont toutefois ajoutés en plus d’une structure habituelle ; il s’agit du dossier « template-parts » et du dossier « include« . Le dossier « template-parts » est souvent utilisés par les développeurs de thème WordPress ; on y met des portions de site utilisées fréquemment sur les pages, comme les menus, les bas de pages ou ce qu’on appelle les sidebars. C’est le dossier « include » qui me parait le plus intéressant à décortiquer pour cet article. Plus précisément, le fichier config_theme.php

Hooks & Fonctionnalités

Comme expliqué précédemment, un thème WordPress ne fonctionnerait pas sans le fichier functions.php.
On n’y met généralement ce qu’on appelle des « hooks » WordPress. Soit, de petit morceaux de codes qui vont modifier le comportement natif d’une fonctionnalité de WordPress. Par exemple, si vous souhaitez modifier le permalien « author » qui afficherait le détail d’un auteur en particulier, vous allez devoir passer par une fonction sans devoir modifier la fonction de base du CMS qui sera rétablie à la prochaine mise à jour. Habituellement donc, on place ce type de code de configuration de thème dans le fichier functions.php. Mais très vite, ce dernier devient très encombré. J’ai pour ma part divisé ces fonctionnalités dans différents fichiers qui composent le dossier include. Voilà quelques bouts de codes que vous pouvez retrouver dans le fichier config_theme pour vous en donner un aperçu ;

function virgin_add_theme() {
  /* Image à la une pour les pages */
  add_theme_support('post-thumbnails');
  
  /* Ajout d'un menu */
  register_nav_menus(
    array(
      'primary' => __('Menu principal', 'virgin'),
    )
  );

  /* Enlève la version de WordPress dans les balises head*/
  remove_action('wp_head', 'wp_generator');
}

Ou encore, voilà comment configurer la page de connexion (vous vous souvenez ?)

/* Modifie le lien du logo de la page de connexion */
function custom_url() {
  return home_url();
}
add_filter( 'login_headerurl', 'custom_url');

/* Modifie le logo de connexion de wordpress */
function virgin_my_custom_login_logo() {
  echo '<style type="text/css">
  h1 a { background-image:url('.get_bloginfo('template_directory').'/img/logo.png) !important; }
  </style>';
}
add_action('login_head', 'virgin_my_custom_login_logo');

Et pour terminer ;

/* Modifie le footer dans le dashboard */
function oz_alter_wp_admin_bottom_left_text( $text ) {
    return sprintf( __( 'Merci de faire d\'<a href="%s" title="L\'intermédiaire" target="_blank">L\'intermédiaire</a> votre agence de communication' ),'https://lintermediaire.be');
}
add_filter('admin_footer_text','oz_alter_wp_admin_bottom_left_text');

/* Change l'url 'author' */
function virgin_change_author_permalinks() {
  global $wp_rewrite;
  $wp_rewrite->author_base = 'auteur';
}
add_action('init','virgin_change_author_permalinks');

Et en conclusion

Comme tous mes projets web et les projets sur la toile en général, Virgin fera l’objet de constantes améliorations. Il me sert pour le moment à gagner du temps à commencer sur de bonnes bases en suivant une organisation qui m’est propre. Les fonctions commentées plus haut, me sont aujourd’hui indispensables. Et pour les autres, il suffit de commenter l’action qui les déclenchent si je ne veux pas les utiliser ou inversement, si elles me sont utile pour le projet en cours. Je veux un slider ? J’appelle le fichier qui va le créer. La possibilité de mettre des images en avant pour les pages ? J’appelle la fonction qui pourra me le permettre. Ainsi, et via mon thème Virgin, je rassemble les hooks WordPress les plus utilisés et toujours dans le but de créer un projet web dynamique.

Vous pouvez télécharger ce thème via mon outils dev en ligne et à cette adresse : https://tools.lintermediaire.be/run2-wp-tools.