L’Outil Surpuissant pour Exploser ton Chiffre d'Affaires en 2025 !
Comment construire un thème WordPress à partir de zéro: les bases –
Dans ce didacticiel, nous allons approfondir la structure des fichiers de thèmes WordPress et apprendre à créer un thème WordPress de base à partir de rien.
Création du thème Bare Minimum
La première chose à faire est d'installer un plugin qui nous permettra de créer par lots des publications WordPress et d'autres contenus. De cette manière, nous pourrons rapidement peupler notre site Web de développement sans perdre trop de temps. Un plugin qui remplit cette fonction est FakerPress de Gustavo Bordoni disponible dans le référentiel de plugins WordPress.
Nous installons et activons rapidement le plugin via WP-CLI.
Maintenant Lorsque nous nous connectons au tableau de bord de l’administrateur, nous voyons que FakerPress est installé et nous pouvons créer toutes sortes de contenus en mode batch, y compris tous les types de messages personnalisés que nous avons.
Maintenant, en utilisant ce plugin, nous allons créer du faux contenu. Ceci est le résultat, en utilisant le défaut TwentySeventeen Thème WordPress:
Maintenant, nous plongeons rapidement et mettons en place un thème minimal simple se compose du fichier fourre-tout index.php et style.css dont nous avons besoin pour que le système de templates WordPress reconnaisse le thème:
/ *
Nom du thème: Botega Simple Theme
URI du thème: https://botega.co.uk
Auteur: Tonino Jankov
URI de l'auteur: https://botega.co.uk
Description: tutoriel sur le thème de base de thème WordPress pour la création de thèmes Sitepoint
Domaine de texte: bsimple
Version: 1.0.0
Licence: Licence publique générale GNU v2 ou ultérieure
* /
Il s'agit du style.css composé uniquement de commentaires méta-CSS pour le moment. Ces commentaires sont obligatoires.
Il s'agit du fichier index.php . Il répondra à toutes les demandes pour l'instant:
<html >
<?php bloginfo('name'); ?>
<link rel = "stylesheet" href = "">
Nous téléchargeons et activons maintenant le thème minimal que nous avons. Je l’active avec WP-CLI:
Le thème est maintenant visible pour WordPress et actif:
Nous n’avons pas fourni de capture d’écran, le
Si nous visitons notre site Web maintenant dans le navigateur, voici ce que nous verrons:
Nous avons évidemment du travail à faire
Si nous voyons le code source de la page d’accueil, nous verrons que la fonction wp_head () a généré beaucoup de balises WordPress par défaut dans telles que CSS, JavaScript , link et balises meta .
La fonction bloginfo () permet de générer des informations sur un site Web .
Notre maison La page est vide, car nous ne produisons rien dans la boucle – un modèle que WordPress utilise dans tous ses modèles pour afficher le contenu.
La page Codex à propos de the Loop entre dans les détails. Une structure typique pour la boucle – qui est basée sur PHP alors que la structure de contrôle – ressemble à ceci:
Nous devons remplir cette boucle pendant que contient du contenu – ou des balises WordPress générant du contenu
Si nous changeons notre boucle, en ajoutant the_title () the_excerpt () et nous ajoutons les balises HTML et the_ID () pour ressembler à ceci:
<div id = "post- "
Nous allons maintenant avoir une liste de posts sur notre page d'accueil, sans style particulier:
WordPress montre Une page de blog – une page d'archive pour tous les articles de blog – par défaut.
Si nous visitons maintenant une seule URL, quelque chose comme http://my-website.com/2018/11/14/sapiente-ad-facilis-quo-repellat-quos/ – nous verrons quelque chose comme ceci:
Notre boucle bien que très rudimentaire, fonctionne réellement.
Structurer notre thème en Fichiers et application du balisage bootstrap
Nous allons maintenant mettre en œuvre des partiels comme header.php et footer.php ainsi que divers modèles spécialisés, tous utilisant . ] Balise Twitter Bootstrap pour que nous puissions la nommer plus facilement.
À partir de index.php nous remplaçons tout le contenu avant et après la boucle par . ] get_header () et get_footer () fonctions:
<div id = "post- ">
Cela signifie que nous devons fournir tout ce contenu dans les partiels que nous avons mentionnés.
Conformément à ce que nous avons dit – nous allons utiliser le thème Twitter Bootstrap – notre fichier header.php ressemblera. comme ceci:
<meta charset = "">
<body >
Notre fichier footer.php ressemblera à ceci:
Nous utilisons des classes Bootstrap dans nos balises HTML et wp_head () et wp_footer () dans le feu wp_head et wp_footer . Action
Nous allons ensuite inclure les CSS et JavaScript de modèle de démarrage propre de startbootstrap.com, fourni avec une licence MIT, pour que nous puissions l’utiliser librement. De cette façon, notre thème viendra avec des styles prédéfinis, une réactivité et nous pourrons toujours le nommer plus loin.
functions.php
functions.php est un fichier fourni avec tous les logiciels thème WordPress sérieux. C’est un fichier qui agit comme une archive de plug-ins pour le pauvre. Il nous permet d’inclure toute fonctionnalité personnalisée dans notre thème.
Nous allons d’abord utiliser ce fichier pour inclure Bootstrap et les styles et scripts de notre thème Bootstrap:
function bsimple_scripts () {
wp_enqueue_style ('bsimple-style', get_stylesheet_uri ());
wp_enqueue_style ('bsimple-clean', get_template_directory_uri (). '/css/clean-blog.min.css');
wp_enqueue_style ('bsimple-bootstrap', get_template_directory_uri (). '/css/bootstrap.min.css');
wp_enqueue_style ('bsimple-fontawesome', get_template_directory_uri (). '/css/fa-all.min.css');
wp_enqueue_style ('bsimple-font1', "https://fonts.googleapis.com/css?family=Lora:400,700,400italic,700italic");
wp_enqueue_style ('bsimple-font2', "https://fonts.googleapis.com/css?family=Open+Sans:300 4 000 centraux de 40000 centraux de 400", 30000 de 400 000 ");
wp_enqueue_script ('bsimple-jq', get_template_directory_uri (). '/js/jquery.min.js');
wp_enqueue_script ('bsimple-bootstrap', get_template_directory_uri (). '/js/bootstrap.bundle.min.js');
wp_enqueue_script ('bsimple-clean', get_template_directory_uri (). '/js/clean-blog.min.js');
}
add_action ('wp_enqueue_scripts', 'bsimple_scripts');
Ceci est une manière idiomatique de WordPress d'inclure des scripts et des styles dans un thème. Cela nous permet de spécifier que la position des scripts sera mise en file d'attente (en-tête ou pied de page) et la priorité de la mise en file d'attente. Nous pouvons même spécifier la dépendance de chaque ressource particulière par rapport à l'autre. Cela garantira que les ressources seront chargées dans le bon ordre.
Nous utilisons le crochet d’action wp_enqueue_scripts ici. Nous pouvons en apprendre plus à ce sujet dans le Codex . (Nous avons abordé les crochets d'action dans l'article précédent .)
Dans notre coutume bsimple_scripts () – à laquelle nous raccordons wp_enqueue_scripts – nous utilisons deux fonctions WordPress pour charger nos scripts et nos styles – de wp_enqueue_script () et de de wp_enqueue_style () . Les arguments pour ces fonctions – comme spécifié dans les pages de référence liées – nous permettent de tirer pleinement parti de la flexibilité mentionnée
. Nous constatons que nous chargeons des styles à partir d’Internet (polices Google) et de notre dossier de thèmes. Par conséquent, nous créons les répertoires css js et webfonts dans notre dossier de thèmes et copions les fichiers CSS, les fichiers JavaScript et les polices FontAwesome de notre thème Bootstrap.
Nous copions également nos fichiers index.php dans les fichiers archive.php page.php et single.php qui nous allons modifier.
Notre structure de fichier de thème ressemblera à ceci:
Ajustement du balisage
Si nous visitons maintenant notre page d'accueil, nous allons voir le menu en haut – bien que la page reste désordonnée – car la ligne suivante de notre en-tête affiche toujours le menu enveloppé dans div et ses propres balises ul il n’est donc pas affecté par nos styles bootstrap:
'primary', 'items_wrap' => '% 3 $ s')); ?>
Pour résoudre ce problème, nous devons d'abord accéder à notre tableau de bord wp-admin et créer – dans le personnalisateur – un nouveau menu. nous le nommerons Menu du haut .
Après cela, nous irons dans notre fichier header.php supprimez ces lignes:
À leur place, nous avons mis ces lignes:
Cela supprimera la balise div et la duplication de la balise ul pour nous, mais nous devons encore appliquer les éléments de navigation et . nav-link à nos éléments de menu (vers les balises li et a respectivement). Comment allons-nous y remédier? wp_nav_menu ne fournit pas d'arguments en ce sens . Nous utiliserons les crochets de filtre de nav_menu_link_attributes et de nav_menu_css_class . Nous mettons cela dans notre fichier functions.php :
function add_menu_link_class ($ atts, $ item, $ args) {
if ($ args-> link_class) {
$ atts ['class'] = $ args-> link_class;
}
renvoyer $ atts;
}
add_filter ('nav_menu_link_attributes', 'add_menu_link_class', 1, 3);
fonction add_menu_list_item_class ($ classes, $ item, $ args) {
if ($ args-> list_item_class) {
$ classes [] = $ args-> list_item_class;
}
retourne $ classes;
}
add_filter ('nav_menu_css_class', 'add_menu_list_item_class', 1, 3);
Nous pouvons maintenant spécifier de nouveaux attributs dans notre dans notre dans notre header.php :
Nos liens de menu supérieurs peuvent maintenant tirer parti des styles déjà définis dans le code CSS de notre thème Bootstrap.
Pour pouvoir utiliser un en-tête dynamique, c’est-à-dire un en-tête différent pour la page de couverture, pour les autres pages sélectionnées ou pour les archives - nous allons définir une fonction dynamic_header () dans notre fichier functions.php dans lequel nous allons afficher notre balisage d'en-tête en fonction de la page chargée par le visiteur.
Alors maintenant, notre fichier header.php se terminera comme suit:
Nous définirons également cette fonction comme suit:
if (! Function_exists ('dynamic_header')) {
function dynamic_header () {
global $ post;
?>
<a href="" rel="home">
<a href="" rel="home">
<a href = "" rel = "home">
<a href="" rel="home">
<a href="" rel="home">
<? php}
}
}
Pour pouvoir utiliser toutes les URL actuelles ou les données de publication - comme dans la boucle -, nous déclarons une variable $ post globale . Ensuite, nous remplissons simplement différents cas de page ou de requête avec l’en-tête de remplissage HTML, que nous terminerons plus tard. Ceci constitue la base d'un en-tête véritablement dynamique.
Nous devons nous assurer que notre page d'accueil - avec le menu principal dynamique - aura fière allure même lorsque l'utilisateur sera connecté. WordPress affiche une barre d'administration . lorsque les visiteurs sont connectés, même lorsqu'ils visitent la page d'accueil. Puisqu'il a position: fixed il recouvre la zone supérieure de notre site Web, couvrant tout ce qui s'y trouve, nous devons donc spécifier un décalage pour notre menu supérieur.
Nous allons ajouter ceci à notre style.css :
body.logged-in.admin-bar #mainNav {
marge supérieure: 32px;
}
Écran @média et (largeur maximale: 782 pixels) {
body.logged-in.admin-bar #mainNav {
marge supérieure: 46px;
}
}
Cela garantit que le #mainNav - notre conteneur de menus - est suffisamment décalé du haut pour qu'il ne soit pas couvert lorsque l'utilisateur est connecté. WordPress ajoute connecté à et admin-bar classe body dans ces cas, de sorte que nous pouvons facilement le cibler.
Nous pouvons voir que nous traitons deux cas dans notre CSS: un défaut et un autre. un pour les écrans plus petits. C’est parce que WordPress affiche une barre d’administration plus large sur les appareils mobiles, nous devons donc fournir un décalage de 46 px.
Sur mobile, nous devrions maintenant avoir un menu déroulant réactif, alimenté par JavaScript:
Conclusion
Dans cette deuxième partie, consacrée à la création d'un thème WordPress à partir de rien, nous avons créé un thème WordPress très basique, dans lequel nous avons inclus des styles et des scripts Bootstrap. Nous avons ajusté la sortie du menu en fonction de nos styles prédéfinis. Nous avons également séparé les sorties d'en-tête et de pied de page dans leurs partiels respectifs.
Le fichier de functions.php un fichier crucial pour le développement d'un thème, est un autre sujet que nous avons introduit et exploité. La sortie d'en-tête a été séparée dans sa propre fonction, qui utilisera des détails de visite de page et des variables définies par le propriétaire du site pour déterminer la sortie finale.
Dans la troisième partie du guide, nous terminerons la construction de modèles particuliers. donnez une meilleure structure à nos fonctions thématiques et partielles et terminez le style de notre site Web
Tonino est un développeur Web et un consultant en informatique qui navigue depuis plus de dix ans dans le code source ouverte. Il est également un passionné de crypto, un fan de Linux et un libertaire modéré.
Source link