Il arrive un moment où vous devez faire les choses correctement. Et quel meilleur moyen que de les faire vous-même?

Réfléchissons WordPress et le grand nombre de thèmes qu’il propose – à la fois gratuit et prime. Offrent-ils la même fonctionnalité, l’unicité et le genre de look que vous préférez que votre site Web ait? Très probablement, votre réponse est «NON».

En tant que tel, vous pourriez être tenté de créer votre propre thème WordPress personnalisé à partir de zéro pour améliorer l’expérience utilisateur de votre site Web, réactivité, front-end et fonctionnalité. En termes simples, un thème personnalisé peut aider à définir la conception de votre site.

Bien que le développement de votre propre thème puisse sembler écrasant – surtout si vous êtes débutant, la bonne nouvelle est qu’avec des connaissances techniques de base en développement Web, le développement d’un thème personnalisé sur WordPress est assez simple. Grâce aux nombreux outils de la plateforme et à la convivialité inhérente.

Dans ce didacticiel, nous vous guiderons sur comment créer un thème WordPress réactif à partir de zéro en utilisant CSS3 et HTML5. Mais avant de commencer, répondons à quelques questions de base.

Pourquoi créer un thème WordPress personnalisé?

Il y a plusieurs raisons pour lesquelles vous choisissez de créer un thème personnalisé dans WordPress. Tout d’abord, avec un thème personnalisé, vos publications et pages Web peuvent avoir une mise en page cohérente. De plus, vous pouvez rendre votre site unique, améliorer sa conception globale et disposer de toutes les fonctionnalités dont vous avez besoin.

Qu’est-ce qu’une conception de thème WordPress adaptative?

Lorsque nous parlons d’un site Web non réactif, nous voulons dire que la mise en page des pages ne répond pas à l’espace disponible ou à la taille de l’écran du visiteur.

Cela signifie que le contenu affiché semble déborder ou se couper, ce qui rend votre site Web encombré. Avec un design réactif, cependant, les pages répondent indépendamment de la taille de l’écran du visiteur. De plus, le contenu est correctement placé pour garantir que rien ne déborde, ne soit coupé ou brouillé.

Lors de la création d’un thème WordPress, il est primordial de s’assurer que vous appliquez quelques principes pour vous assurer d’obtenir un thème dont la conception est réactive.

Prenons un exemple de site dont le contenu doit être divisé en quatre éléments de division (

  • La première chose à faire est de considérer la mise en page de votre site en termes de grilles au lieu de pixels (px).
  • Divisez ensuite chaque section de contenu en pourcentage (%), c’est-à-dire la largeur des grilles. Dans notre cas, par exemple, la largeur de chaque div occupe 100% de l’espace disponible. Vous devrez donc allouer 25% de l’espace disponible à chaque div afin d’avoir quatre divisions.

Cela s’applique au contenu, mais qu’en est-il des images? Pour images, assurez-vous que la largeur maximale est définie à 100% de la taille réelle (largeur maximale: 100%) et la hauteur définie sur auto. Cela garantira que la hauteur de l’image et l’image s’ajusteront automatiquement lorsque la taille du conteneur est réduite.

Par conséquent, en supposant que vous avez une image d’une largeur de 200 pixels et que vous souhaitez l’insérer dans une division qui occupe 100% de l’espace disponible, l’écran affichera la largeur réelle de l’image.

Cela implique, comme nous l’avons indiqué précédemment, que l’utilisation de largeur: 100% garantira que l’image occupe tout l’espace disponible au lieu de s’arrêter à sa largeur d’origine en pixels.

Voici une syntaxe pour créer un design réactif.

/* GOOD WIDTH */

.inline-text-box {

width: 50%;

}

/* BAD WIDTH */

.inline-text-box {

width: 800px;

}

/* GOOD IMAGE */

img {

max-width: 100%;

height: auto;

}

/* BAD IMAGE */

img {

width: 100%;

height: auto;

}

Pourquoi utiliser HTML5 et CSS3?

HTML5 est la cinquième version et la plus améliorée du langage de balisage Web HTML.

Le nouveau langage de balisage Web est livré avec de nouveaux attributs, éléments et un ensemble plus diversifié de technologies qui vous permet de créer des sites Web plus puissants et plus réactifs dont le contenu peut être affiché sur n’importe quel périphérique de sortie tel qu’un smartphone, un ordinateur ou un ordinateur portable.

En outre, il est livré avec une fonction de méta-tag qui vous permet de contrôler l’affichage de votre navigateur sur la fenêtre d’affichage de chaque navigateur.

CSS3, d’autre part, est la version la plus récente et la plus avancée du langage CSS (Cascading Style Sheets). Le langage CSS3 apporte de nombreuses nouveautés telles que de nouvelles mises en page et un nouveau formatage. Il dispose également d’une fonction de requêtes de médias qui utilise la règle @media pour définir des règles spécifiques ou déterminer si certaines conditions sont remplies. Par exemple, les requêtes multimédias peuvent être utilisées pour:

  • Vérifiez la capacité de l’appareil au lieu du type de l’appareil.
  • Vérifiez la hauteur et la largeur de la fenêtre.
  • Vérifiez la hauteur et la largeur de l’appareil.

Comme vous pouvez le voir, avec HTML5 et CSS3, vous pouvez contrôler le comportement de votre site Web dans différentes tailles d’écran.

Dans ce didacticiel, nous utiliserons HTML5 et CSS3 pour créer notre premier thème WordPress personnalisé.

Étapes pour développer votre premier thème WordPress réactif

Étape 1: créer un environnement local et installer WordPress

Maintenant que vous vous êtes habitué à ce que nous allons faire, il est enfin temps de commencer à créer votre premier thème WordPress personnalisé.

Mais d’abord, vous devrez télécharger et installer WordPress localement sur votre ordinateur. À des fins d’apprentissage, un environnement local vous aidera à tester le ou les thèmes avant de les télécharger sur un serveur en direct.

Vous pouvez utiliser un Serveur de bureau ou installez un WAMP serveur et installez WordPress. Les deux serveurs sont libres d’utilisation. Lisez notre article sur comment installer et configurer le serveur WAMP sur votre ordinateur.

WAMP est relativement facile pour les débutants. Cependant, il est uniquement compatible avec les systèmes d’exploitation Windows tandis que Desktop Server est compatible avec les systèmes d’exploitation Windows et Mac. Vous pouvez vérifier comment installer un serveur de bureau à partir de son site Web officiel.

Étape 2: créer un dossier pour stocker votre thème et ses fichiers

Une fois que vous avez installé WordPress sur votre serveur local, il est maintenant temps de commencer. Ce que vous devez faire ici, accédez au dossier racine WordPress, puis au contenu wp, puis au dossier thèmes (- / wp-content / themes /). Suivez ces étapes.

  • Allez à votre Gestionnaire de fichiers sur votre cPanel ou hPanel.
  • Ensuite aller à public_html / wp-content / themes. Vous verrez quelques thèmes préinstallés.
  • Créez maintenant un nouveau dossier et donnez-lui un nom unique et court tel que «mythème». Assurez-vous de ne pas utiliser d’espaces ou de chiffres lors de la dénomination.

Étape 3: créer des fichiers de modèle WordPress essentiels et une feuille de style CSS

Fondamentalement, vous avez besoin de deux fichiers de modèle pour créer un thème WordPress. C’est le style.css et le index.php fichier modèle. Ces fichiers sont cruciaux car ils définiront l’apparence générale de tout le contenu de votre site.

Cependant, pour pouvoir créer différentes mises en page pour vos pages et vos publications, vous devez disposer de modèles distincts contenant PHP et HTML5. Il convient de noter que chaque modèle doit être nommé en fonction des règles WordPress.

Ces modèles incluent:

  • header.php – contient le code HTML de la section d’en-tête de votre thème. Cela commence par .
  • footer.php – le modèle qui contient le code HTML qui gère la section de pied de page. Il comprend .
  • page.php – modèle pour afficher une seule page de blog à partir de votre site Web.
  • single.php – il s’agit d’un modèle spécifique qui affichait un seul article, quel que soit le type de message.
  • comments.php – le modèle qui détermine comment la zone de texte des commentaires et les soumissions apparaîtront.

Vous pouvez obtenir la liste complète des fichiers de modèle de thème WordPress ici. Cependant, pour les types de publication personnalisés, vous pouvez créer des modèles de publication spécifiques.

Pour créer des fichiers de modèle WordPress, suivez les étapes ci-dessous:

  1. Accédez au dossier «mytheme» et créez les fichiers PHP suivants: index.php, footer.php, header.php, page.php, sidebar.php et funtions.php.
  2. À partir de là, générez un style.css fichier.
  3. Entrez les commentaires nécessaires en haut de la style.css fichier. Ceci afin de permettre à WordPress de connaître le nom de notre thème ainsi que d’autres commentaires facultatifs tels que l’URI du thème, l’auteur, la version, la licence, etc.

Il est essentiel de garder à l’esprit que les informations que vous entrez doivent commencer par un mot-clé et que chaque en-tête doit être sur sa propre ligne. Plus important encore, il doit être écrit sous forme de commentaire CSS sur plusieurs lignes. Voici à quoi cela devrait ressembler:

/*
Theme Name: My-Theme
Author: XYZAuthor
URI: http://www.xyz.com/tutorials
Description: My first responsive HTML5 theme
Version: 1.0
License: GNU General Public License v3 or laterLicense
URI: http://www.gnu.org/licenses/gpl-3.0.html
*/

Notez que le format des en-têtes commence par Mot-clé suivi des informations, c’est-à-dire – Mot-clé: informations.

Une fois que vous avez atteint ce point, vous devriez pouvoir voir votre «mythème» dans la section thème de votre tableau de bord. Il doit apparaître comme une image de case à cocher grise et blanche.

Voici comment cela devrait apparaître sur votre tableau de bord WordPress, comme indiqué dans la capture d’écran ci-dessous.

thème wordpress

L’activation du thème vous donnera une page d’accueil vierge. C’est parce que votre modèle index.php est vide.

  1. Ensuite, vous devrez modifier la couleur d’arrière-plan de votre thème. Pour ce faire, vous devez ajouter une seule règle au fichier CSS responsable du changement de couleur, puis ajouter une ligne vierge après * / sur la dixième ligne (* / indique la fermeture du commentaire). Vous allez maintenant saisir le code suivant.
* {  box-sizing: border-box;}
body {background-color: #f9f9f9;font-family: royalblue;}

La première entrée est cruciale lors de la création d’un thème WordPress réactif. Le * dans la syntaxe est un caractère générique. Il correspond à chaque classe du HTML document.

Dans ce cas, cela indique que la hauteur et la largeur finales de chaque élément de la page doivent inclure la bordure, le rembourrage et le contenu. Il s’agit d’une règle qui garantit que le rembourrage est ajouté à l’intérieur de la boîte plutôt qu’à l’extérieur de la boîte.

La deuxième entrée, d’autre part, sert à changer la couleur de l’arrière-plan en blanc ainsi qu’à définir une police par défaut qui sera appliquée dans le thème.

Étape 4: ajouter quelques morceaux de codes

Avant de plonger profondément dans le processus de développement du thème, il y a quelques éléments importants de codes que vous devrez ajouter votre sidebar.php et function.php. Ces codes sont ajoutés pour garantir la flexibilité de votre thème.

functions.php

  • Dans votre fichier function.php, ajoutez un fichier CSS par le nom css. Pour ajouter le fichier, insérez le code suivant.

  • Ensuite, vous devrez ajouter le code suivant pour activer les widgets de la barre latérale sur votre panneau de configuration administrateur.
// Register a new sidebar simply named 'sidebar'
function add_widget_Support() {
  register_sidebar(
    array(
      'name'          => 'Sidebar',
      'id'            => 'sidebar',
      'before_widget' => '
', 'after_widget'  => '
', 'before_title'  => '

', 'after_title'   => '

', ) ); } // Hook the widget initiation and run our function add_action( 'widgets_init', 'add_Widget_Support' );
  • Pour continuer, vous aurez besoin d'un menu de navigation personnalisé. Cela vous permettra d'utiliser la fonction Apparence> Menu. Pour enregistrer un menu de navigation, vous devrez saisir le code ci-dessous.
// Register a new navigation menu
function add_Main_Nav() {
  register_nav_menu( 'header-menu', __( 'Header Menu' ) );
}
// Hook to the init action hook, run our navigation menu function
add_action( 'init', 'add_Main_Nav' );
  • Maintenant, enregistrez et fermez le fichier.

Sidebar.php

Toute zone widgetisée de votre thème est appelée une barre latérale. L'inclusion d'une barre latérale garantit que vos utilisateurs peuvent ajouter du contenu via le panneau d'administration des widgets ou le personnalisateur. Pour charger un get_sidebar () modèle, insérez le code source suivant sur le sidebar.php fichier et enregistrez.


  

Étape 5: Créez une mise en page pour votre thème WordPress

À ce stade, nous allons créer une mise en page pour notre thème. Pour ce faire, nous utiliserons les requêtes multimédias pour modifier les fichiers header.php, footer.php, index.php, style.php, page.php et single.php.

header.php

Le fichier header.php définit la totalité de la zone supérieure d'un site Web. Le fichier header.php doit avoir les paramètres suivants.

  • DOCTYPE Html - cette déclaration informe votre navigateur sur la façon dont le document doit être interprété.
  • Attributs de langue_ - cette fonction affiche les attributs de langue pour la balise Html.
  • le éléments - ce sont des éléments de tête html où vos métadonnées. Ces éléments peuvent également apparaître comme étiquette, étiquette, , les fonctions bloginfo () et le crochet d'action wp_head ().
  • La fonction body_class: il donne à l'élément body les classes CSS standard définies par WordPress.
  • le wp_nav_menu () - cette fonction affiche un menu de navigation. En termes simples, il active l'interface de création de menus par glisser-déposer.

Balises méta

N'oubliez pas que notre intention est de créer un thème WordPress avec un design réactif. Par conséquent, pour vous assurer que votre site Web s'adapte automatiquement aux différentes tailles d'écran et qu'il est compatible avec tous les navigateurs, vous devrez ajouter une balise Meta sous votre titre.

La syntaxe de la balise meta doit apparaître comme celle ci-dessous:

Une fois inséré, votre site Web devrait pouvoir s'adapter à différentes tailles d'écran et fenêtres. Le code final devrait donc ressembler à celui montré sur la capture d'écran ci-dessous.

final-code-php

index.php

Il s'agit d'un fichier PHP utilisé pour contrôler le HTML et les données de sortie générales sur votre page d'accueil. Il est donc requis par tous les thèmes pour les mises en page par défaut lorsque des modèles particuliers tels que page.php et single.php sont manquants.

Pour vous assurer que les codes d'en-tête, de pied de page et de barre latérale sont inclus sur votre page d'accueil, il est recommandé d'utiliser des balises de modèle. Vous devrez également insérer divers éléments sémantiques HTML5 tels que

,

,

, et

.

Un autre élément important que vous devrez utiliser est la boucle WordPress pour afficher le contenu des articles. Par conséquent, la boucle finale aura les balises de modèle suivantes.

  • - cette balise affiche l'URL du message.
  • - son affiche le titre exact de la publication par rapport au lien.
  • - affiche le titre de l'article.
  • - affiche le nom des auteurs.
  • il génère automatiquement l'extrait du message.

Ainsi, la syntaxe finale du fichier index.php devrait ressembler à celle ci-dessous.

indexphp

Enregistrez maintenant le fichier. Vous devriez pouvoir voir une page simple de votre site Web une fois que vous rechargez votre site.

footer.php

Le fichier footer.php définit la zone inférieure de votre site. Ce fichier ferme toutes les balises ouvertes à partir du header.php comme le et Mots clés. Sans fichier footer.php, vous remarquerez que certains éléments sont manquants, comme la barre d’administration.

Pour vous assurer que le fichier footer.php ne manque pas, utilisez le

Élément sémantique HTML5. Gardez à l'esprit que pour que tout code JavaScript ou WordPress soit ajouté, il doit avoir le crochet d'action wp_footer (). L'enregistrement du fichier footer.php garantit que toutes les balises HTML ouvertes sont fermées.

Voici à quoi cela devrait ressembler.

Copyright © 2019

single.php

Single.php est un fichier générique à publication unique. Il définit la mise en page d'une publication unique sur votre site. Dans cet article, nous utiliserons la fonction «the_content» dans le code pour que vous compreniez à quoi ressemblera l'article complet.

singlephp

Lors de l'enregistrement du fichier single.php, votre page doit s'afficher comme une seule page.

page.php

Ce fichier dicte comment les pages sont affichées. N'oubliez pas que si le fichier page.php est manquant, le fichier index.php est utilisé.

Contrairement au fichier single.php, nous ajouterons une barre latérale dans le fichier page.php. Il s'agit de s'assurer que la variation est plus visible. Pour modifier le fichier page.php, ajoutez le code suivant.

pagephp (2)

style.css

Il s'agit du modèle de feuille de style principal sur votre thème WordPress qui décrit comment les éléments écrits en HTML doivent être affichés à l'écran. Il vise simplement à contrôler la mise en page et la conception de votre site Web.

Vous pouvez ajouter les lignes suivantes pour voir comment votre thème répond aux différents styles et largeurs CSS.

cssstyle

Si vous avez suivi toutes les étapes ci-dessus, vous devez disposer de tous les modèles et feuilles de style requis pour votre nouveau thème WordPress.

En règle générale, vous souhaiterez peut-être embellir votre thème. Pour ce faire, vous devrez modifier davantage le fichier CSS en ajoutant des animations, des images et d'autres contenus.

Cependant, vous devrez peut-être posséder des connaissances de base en PHP et HTML. Heureusement, avec un générateur de thème WordPress, vous pouvez y parvenir sans avoir à écrire une seule ligne de code.

Balises de modèle, boucles et crochets d'action: comment s'intègrent-ils à WordPress?

Balises de modèle

Ce sont des fonctions PHP qui sont utilisées dans les thèmes pour extraire le contenu de votre base de données du site Web dans votre thème. Le contenu peut être quelque chose d'une barre latérale complète à un Blog Titre.

Ils sont préférés car:

  • Ils sont capables de diviser le thème en petites sections faciles à comprendre.
  • Ils sont faciles à utiliser pour gérer plusieurs fichiers de thème.
  • Il peut afficher et générer des informations de manière dynamique.

Par exemple, la balise get_footer () communique avec WordPress pour obtenir le fichier footer.php et l'inclure dans le fichier de thème actuel. La même chose s'applique à la balise get_header ().

Il existe de nombreuses balises de modèle telles que:

  • the_title () - indique à WordPress d'obtenir le titre du message ou de la page.
  • Bloginfo ("nom") - obtenez le titre du blog dans la base de données

La boucle WordPress

Il s'agit d'un code PHP utilisé dans les thèmes WordPress pour afficher une liste des publications demandées sur une page Web. La boucle est incontestablement l'une des fonctionnalités les plus importantes de WordPress. Sans la boucle, il serait impossible d'interroger la base de données ou d'afficher votre contenu.

En tant que telle, la boucle se trouve dans chaque fichier de modèle de votre thème. C'est l'une des principales raisons pour lesquelles elle est appelée boucle car elle continue de se répéter jusqu'à ce qu'il ne reste plus rien à afficher.

Crochet d'action

Action Hook est une fonction PHP personnalisée fournie par WordPress. Il est défini dans votre thème (ou plugin) pour répondre à des événements spécifiques se déroulant dans WordPress. Ces événements incluent l'affichage à l'écran, le changement de thème et la publication d'un article.

Presque tous les thèmes WordPress ont trois crochets d'action intégrés.

Ceux-ci inclus:

  • wp_head () - cette fonction est incluse dans la section principale du thème. Il vous permet d'ajouter des styles, des scripts et toute autre information nécessaire. Dans votre en-tête de thème, l'appel du crochet d'action wp_head () appelle le do_action () fonction dans le code de base.
  • wp_footer () - cette fonction est incluse dans la section pied de page du thème. Il vous permet d'ajouter des styles, des scripts et toute autre information nécessaire avant de fermer la balise body du document HTML. Tout comme le wp_head, appeler le wp_footer appelle le do_action fonctionner à l'intérieur des fichiers de base.
  • comment_form - ce crochet d'action modifie la conception ainsi que les champs des formulaires de commentaires existants.

Emballer

Comme vous pouvez le voir, créer votre propre thème WordPress personnalisé à partir de zéro n'est pas une tâche facile, surtout si vous êtes débutant. Cependant, avec les connaissances techniques de base, vous trouverez que le processus est plus facile à faire que prévu.

Pour récapituler rapidement, examinons rapidement certaines des choses que vous devez faire pour créer un thème WordPress réactif:

  • Configurez un environnement local en installant WAMP ou Desktop Server.
  • Créez un dossier pour votre thème et donnez-lui un nom unique.
  • Créez les fichiers nécessaires.
  • Modifiez les fichiers en modifiant les codes, puis testez les modifications.
  • Créez une mise en page pour votre thème.
  • N'oubliez pas les requêtes médias et les balises META pour la réactivité.

Décomposer le processus, c'est facile. Nous espérons que ce tutoriel vous sera utile lorsque vous vous préparerez à créer votre premier thème WordPress réactif.


Source link