Comment créer un thème WordPress personnalisé

Publié: 2021-08-06

WordPress occupe un pourcentage énorme des sites Web du monde, représentant 37 % de tous les sites actuellement en ligne. Bien qu'il existe de nombreuses raisons et facteurs à l'origine de ce succès, l'une des principales raisons est la popularité des fonctionnalités disponibles pour tous les utilisateurs. Plugins, thèmes, publications, pages, catégories, taxonomies, rôles d'utilisateur et gestion des médias pour n'en nommer que quelques-uns. Pour tirer le meilleur parti de WordPress, il est recommandé aux utilisateurs d'étudier et d'apprendre à utiliser toutes ces fonctionnalités. Dans ce blog, nous nous concentrerons sur les thèmes WordPress et en discuterons et vous expliquerons les bases requises pour créer un thème personnalisé WordPress.

Qu'est-ce qu'un thème personnalisé ?

Tout ce qui se trouve sur le frontend de votre site est exécuté et contrôlé à l'aide de ce qu'on appelle un "thème". Le thème d'un site Web est responsable de la conception et de la fonctionnalité spécifiques du site Web. Vous pouvez consulter le référentiel de thèmes WordPress ou Themeforest pour des exemples de thèmes ; vous trouverez ici des milliers de thèmes répertoriés à explorer et à télécharger.

Bien que les thèmes WordPress établis soient excellents, si vous en avez la capacité et le besoin, vous pouvez également créer votre propre thème personnalisé pour un client, pour vous-même ou le soumettre aux marchés avec l'intention de le vendre. Lors de la création d'un thème commercial, vous devrez suivre les directives des marchés pour les normes de codage, la structure des fichiers et des dossiers, etc. Vous pouvez trouver plus de détails concernant ces directives sur les sites Web des marchés .

Dans ce blog, nous allons parcourir un tutoriel pour vous montrer un aperçu de base sur la façon de créer votre propre thème WordPress en couvrant toutes les bases et les étapes associées au processus.

Créer un thème WordPress personnalisé

Les thèmes WordPress sont construits avec des fichiers modèles, des scripts, des styles, des images, etc. Pour continuer, vous devez avoir une connaissance pratique de PHP, HTML et CSS, qui sont nécessaires pour créer un thème personnalisé. Comprendre JavaScript peut également être un avantage supplémentaire.

Pour commencer, nous nommerons d'abord le thème 'Updraft'. Créez un dossier appelé 'Updraft' dans wp-content/themes . Dans ce dossier "Updraft", vous allez écrire le code lié à votre thème, stocker des fichiers, des images, des polices, etc.

Les principaux fichiers du thème WordPress personnalisé sont :

  • style.css
  • index.php
  • fonctions.php

Le style.css sera le fichier de feuille de style principal et vous pouvez ajouter tous vos CSS dans ce fichier. N'oubliez pas que vous devez inclure un en-tête d'information sur le thème. L'en-tête doit ressembler au format ci-dessous et se trouver au-dessus de style.css .

 [code]
/*
Nom du thème : Ascendance
URI du thème : https://updraftplus.com
Auteur : UpdraftPlus
URI de l'auteur : https://updraftplus.com
Description : le thème personnalisé conçu pour le site Web.
Version : 1.0
Licence : Licence publique générale GNU v2 ou ultérieure
URI de la licence : http://www.gnu.org/licenses/gpl-2.0.html
Domaine de texte : updraft
*/
[/code]

Ensuite, allez dans Apparence >> Thèmes, où vous verrez votre thème répertorié. Activez-le. Lorsque vous vérifiez l'interface de votre site, il affichera un écran vide - car nous n'avons encore rien ajouté au thème.

N'oubliez pas de stocker vos images, scripts et styles dans votre répertoire de thèmes. Le répertoire du thème fait référence au dossier 'wp-content/themes/Updraft'. Assurez-vous de les organiser en utilisant une bonne structure de dossiers, en créant des dossiers spécifiques pour les images, les scripts et les styles ; Copiez les fichiers dans le répertoire correspondant.

Fichier de fonctions

Le functions.php est le fichier dans lequel vous pouvez ajouter du code à des fins différentes. Ce fichier est automatiquement chargé lors de l'initialisation de WordPress, et le code qui y est écrit est exécuté automatiquement.

Les opérations suivantes dans le fichier functions.php sont généralement effectuées dans cet ordre :

  • Mettez en file d'attente les feuilles de style et les scripts de thème (ajoutez les fichiers JS et CSS au site Web).
  • Activer les barres latérales, les menus de navigation, les vignettes de publication, etc.
  • Définissez les fonctions utilisées dans l'ensemble de l'application.
  • Etc.

L'utilisateur peut ajouter ses styles et ses scripts à partir du fichier functions.php comme suit. Veuillez consulter le lien suivant pour plus de documentation .

 [code]
fonction include_js_css() {
wp_register_style( "bootstrap", get_stylesheet_directory_uri() .
"/styles/bootstrap.min.css", array(), false, "all" );
wp_enqueue_style( "bootstrap" );
wp_register_script('bootstrap', get_stylesheet_directory_uri() .
'/scripts/bootstrap.min.js', tableau(), faux, vrai);
wp_enqueue_script('bootstrap');
}
add_action('wp_enqueue_scripts', 'include_js_css');
[/code]

La fonction get_stylesheet_directory_uri() donne un chemin relatif du répertoire du thème actif. Le reste du code peut être considéré comme le chemin des actifs.

De même, pour ajouter des menus de navigation, publier des vignettes :

 [code]
function updraft_theme_setup() {
add_theme_support( 'post-vignettes' );
register_nav_menus(
déployer(
'primaire' => __( 'Menu principal' ),
'footer1=' => __( 'Menu Pied de page' ),
'boutique' => __( 'Menu Page Boutique' ),
)
);
}
add_action( 'after_setup_theme', 'updraft_theme_setup' );
[/code]

Ensuite, accédez au tableau de bord WordPress et ajoutez un article ou une page. Vous devriez voir la section "Image en vedette". De plus, sous Apparence >> Menus, vous trouverez le menu principal et le menu de pied de page sous Gérer les emplacements .

Ce ne sont là que quelques-unes des fonctionnalités de base que vous pouvez couvrir lors de l'utilisation du fichier "Fonction". Il y a beaucoup plus que vous pouvez ajouter dans ce fichier si vous le souhaitez.

Fichiers modèles

Lors de la création de votre thème, les fichiers modèles peuvent être utilisés pour affecter la mise en page et la conception des différentes parties de votre site Web. Par exemple, vous utiliserez le modèle header.php pour créer un en-tête, ou le modèle comments.php pour inclure des commentaires sur votre site. Les fichiers modèles ont une extension .php . Comme il s'agit de fichiers PHP, toutes les pages sortent au format HTML.

À l'aide de modèles, les développeurs peuvent répartir le code entre plusieurs fichiers. Voici quelques-uns des fichiers en question.

  • index.php : Le modèle principal. Ce fichier devrait être responsable de la liste des publications. Lorsque vous définissez la page Messages à partir de Paramètres >> Lectures , ce modèle est exécuté.
  • page.php : Ce template est responsable du rendu de vos pages. Ce paramètre peut être remplacé en attribuant un modèle de page personnalisé à des pages individuelles.
  • single.php : utilisé lorsqu'un seul article est interrogé.
  • header.php : Ajoutez votre partie d'en-tête dans ce modèle.
  • footer.php : Ajoutez votre pied de page dans ce modèle.
  • sidebar.php : Ajouter des widgets dans ce modèle.

Obtenez une liste de tous les fichiers modèles disponibles ici .

Modèles de pages personnalisés

Par défaut, toutes vos pages sont rendues via le modèle page.php . Mais en pratique, il faut parfois afficher des flux séparés sur des pages différentes. Dans ce scénario, il est recommandé d'utiliser la puissance des modèles de page personnalisés.

Par exemple, si vous avez une page 'Carrière' et que vous souhaitez ajouter votre code à cette page ; pour y parvenir, vous devez créer un fichier career.php dans le répertoire du thème et placer le commentaire ci-dessous en haut du fichier.

 [code]
<?php
/*
Nom du modèle : Carrière
*/
[/code]

Ensuite, accédez à la section d'édition de page et attribuez ce modèle "Carrière" à partir de la zone Attributs de page .

Désormais, lorsque vous visitez la page Carrière, le code de career.php sera exécuté.

En tête de fichier

Votre site Web aura un en-tête commun sur toutes les pages. Vous pouvez placer cet en-tête commun dans le header.php . Le code d'en-tête ressemblera à ceci :

 [code]
<!DOCTYPE html>
<html <?php language_attributes(); ?>>
<tête>
<meta charset="<?php bloginfo('charset'); ?>">
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<?php wp_head(); ?>
</head>
<body <?php body_class(); ?>>
<?php wp_body_open(); ?>
<!-- votre menu -->
[/code]

Dans le code ci-dessus, vous remarquerez que nous avons utilisé certaines fonctions disponibles dans WordPress.

  • wp_head() : Cette méthode insère des éléments cruciaux dans votre document – ​​par exemple, des scripts, des styles et des balises méta.
  • body_class() : Cela ajoutera différentes classes à l'élément body.
  • wp_body_open() : utilisé pour insérer du code immédiatement après l'ouverture de la balise body. Un exemple de ceci serait le script Google Analytics.

Les menus peuvent être ajoutés dynamiquement via la fonction wp_nav_menu() . En supposant que vous ayez déjà créé un menu sous Apparence >> Menus et que vous lui ayez attribué un emplacement "principal". Le code ci-dessous génère dynamiquement les éléments du menu.

 [code]
<?php
wp_nav_menu(
déployer(
'theme_location' => 'primaire',
'container_class' => 'menus',
)
);
?>
[/code]

Une fois votre fichier d'en-tête défini, utilisez la fonction get_header() pour inclure ce fichier dans vos autres modèles.

Fichier de pied de page

Semblable au fichier d'en-tête, votre code commun pour le pied de page ira à l'intérieur du modèle footer.php .

 [code]
<!-- éléments de pied de page -->
<?php wp_footer(); ?>
</body>
</html>
[/code]

Ici, utilisez le wp_footer() qui insère des éléments, en particulier des scripts, à cet emplacement. L'utilisation de get_footer() inclura le contenu de ce fichier à d'autres endroits.

Fichier de la barre latérale

La barre latérale est une colonne verticale utilisée pour afficher des informations sur votre site qui ne figurent pas dans le contenu principal. Il peut inclure des articles populaires, des bannières publicitaires, un formulaire de soumission de newsletter, etc. Les barres latérales contiennent des widgets qu'un administrateur peut personnaliser. Le modèle sidebar.php inclura les widgets de votre site.

Dans cet exemple, nous allons créer une barre latérale de base en ajoutant le code ci-dessous au fichier functions.php .

 [code]
function updraft_widgets_init() {
register_sidebar(
déployer(
'name' => esc_html__( Barre latérale d'accueil' ),
'id' => 'barre latérale-1',
'description' => esc_html__( 'Ajoutez des widgets ici pour qu'ils apparaissent dans votre barre latérale.' ),
'before_widget' => '<section class="widget">',
'after_widget' => '</section>',
'before_title' => '<h2 class="widget-title">',
'after_title' => '</h2>',
)
);
}
add_action( 'widgets_init', 'updraft_widgets_init' );
[/code]

Ensuite, allez dans Apparence >> Widgets . Vous trouverez ici la barre latérale ci-dessus. Dans cet exemple, nous allons ajouter des widgets à cette barre latérale. Pour ajouter cette barre latérale au frontend, ajoutez le code suivant dans sidebar.php.

 [code]
<div class="sidebar">
<?php
si ( is_active_sidebar( 'sidebar-1' ) ) {
dynamic_sidebar( 'sidebar-1' );
}
?>
</div>
[/code]

Enfin, n'oubliez pas de nommer la méthode ' get_sidebar ()' afin que vous puissiez facilement inclure la barre latérale n'importe où sur d'autres pages en cas de besoin.

Rendu des pages et des publications

Comme déjà mentionné, toutes les pages WordPress sont rendues et exécutées à l'aide du code que vous avez écrit dans le fichier page.php , à l'exception des pages avec un modèle de page personnalisé. Le code ci-dessous est un exemple qui affichera une page contenant le titre de la page, la description et l'image en vedette.

 [code]
<?php
get_header();
?>
<div class="content-area">
<main class="site-main">
<?php
tandis que ( have_posts() ) :
la poste();
?>
<?php
si ( has_post_thumbnail() ) :
the_post_thumbnail();
fin si;
?>
<header class="entry-header">
<?php le_titre(); ?>
</header>
<div class="entry-content">
<?php le_contenu(); ?>
</div>
<?php
pendant ce temps;
?>
</main>
</div>
<?php
get_footer();
[/code]

Un code similaire ira dans le fichier single.php pour afficher les informations de publication. Pour afficher correctement la liste des publications (votre index.php ), en plus des méthodes ci-dessus, vous pouvez également utiliser ce qui suit :

  • the_catgeory() : Affiche la liste des catégories pour un article.
  • the_permalink() : Affiche le permalien du message actuel.
  • the_excerpt() : Affiche l'extrait du message.

I18n pour les thèmes personnalisés WordPress

Lors de la création d'un thème personnalisé, essayez de vous rappeler qu'il doit être développé de manière à prendre en charge l'internationalisation. Ce faisant, il est possible de traduire facilement votre thème dans d'autres langues.

Pour ajouter le support I18n, n'oubliez pas d'utiliser un domaine de texte dont vous pouvez analyser les fichiers source et extraire les chaînes traduisibles. Dans cet exemple, nous utilisons le domaine de texte "Updraft", mais vous pouvez choisir n'importe quel identifiant unique. Nous pouvons définir le domaine du texte comme suit.

 [code]
fonction i18n_setup() {
load_theme_textdomain( 'updraft', get_stylesheet_directory() . '/languages' );
}
add_action( 'after_setup_theme', 'i18n_setup' );
[/code]

Désormais, chaque fois que vous utilisez des chaînes statiques dans vos fichiers de thème, placez-les dans les fonctions __() ou _e() .

 [code]
<h2><?php _e('Prénom', 'updraft); ?></h2>
<?php echo __('E-mail de l'utilisateur', 'updraft'); ?>
[/code]

Il existe des outils spéciaux disponibles comme POEDIT qui aident à générer des fichiers de langue traduits. Veuillez consulter ce blog pour plus d'informations.

Ce blog a couvert les bases de la création de thèmes personnalisés WordPress. Cependant, c'est un vaste sujet qui demande beaucoup de temps et de patience. Vous trouverez ci-dessous quelques ressources utiles avec lesquelles vous devriez vous familiariser et qui vous aideront à commencer à créer vos thèmes WordPress.

  • La boucle WordPress
  • Balises de modèle
  • Pages de catégorie
  • Function_Reference
  • Balise conditionnelle
  • Normes de codage WordPress

Lorsque vous créez un nouveau thème pour votre site WordPress, n'oubliez pas que vous devrez le sauvegarder après chaque modification ou risquer de perdre tout votre travail. Utilisez UpdraftPlus - Le plugin de sauvegarde, de restauration et de clonage WordPress leader et le plus fiable au monde.

Le post Comment créer un thème personnalisé WordPress est apparu en premier sur UpdraftPlus. UpdraftPlus – Plugin de sauvegarde, de restauration et de migration pour WordPress.