Good Mood

cela va être un tutoriel amusant où nous inspectons comment créer votre propre thème WordPress à partir de zéro. En fait, nous allons commencer avec absolument zéro fichier et zéro ligne de code. La seule façon de comprendre comment fonctionnent les thèmes WordPress est de vraiment sauter à un niveau bas et de faire chaque chose vous-même. Oui, il est tentant d’éviter cela car vous pouvez faire tout WordPress pour vous sans aucune compréhension du code qui l’alimente., Cela peut être PHP, JavaScript, CSS ou même le HTML de base. À la fin de ce tutoriel étape par étape sur le thème WordPress, vous comprendrez comment tout s’emboîte et comment plier WordPress à votre volonté avec facilité.

Il y a tellement de thèmes gratuits à votre disposition lorsque vous exécutez un site Web WordPress. Au-delà des thèmes gratuits, vous pouvez également choisir de payer une prime pour les thèmes WordPress professionnels qui ont fière allure et ont des fonctionnalités fantastiques. Alors, pourquoi apprendre à créer votre propre thème à partir de zéro?, La réponse est que peu importe le thème que vous utilisez, il va venir un moment où vous voulez apporter des modifications simples à votre site web. Certains de ces changements pourraient être accommodés par un simple plugin ou widget. Plusieurs fois cependant, il est plus logique de comprendre ce que vous voulez changer, comment le changer et éviter de transformer votre site WordPress en un gâchis de plugins et d’add-ons qui deviennent difficiles à manier. Avec juste un peu de connaissances de base, vous serez confiant dans la modification de votre thème, ou tout simplement construire votre propre à partir de zéro., Vous saurez quel fichier Modifier et quel code Ajouter ou Modifier pour créer le résultat souhaité.

Étape 1: Créez un dossier pour contenir vos fichiers de thème.

Si nous allons créer des thèmes, nous devons savoir où vivent les fichiers qui composent un thème WordPress dans une Installation WordPress. C’est assez facile. Nous savons qu’une installation WordPress a généralement un répertoire racine nommé wordpress. Voici à quoi ressemble notre répertoire racine dans PHP Storm.,

Ce répertoire contient les fichiers et dossiers suivants:

Fichiers

Dossiers

• wp-admin
• wp-content
• wp-includes

Le dossier qui nous intéresse le plus en ce moment est l’wp-content dossier. Dans le dossier wp-content se trouve un dossier nommé thèmes. Savez-vous ce que ce dossier est pour? Yep, c’est bon! C’est le dossier qui contient un ou plusieurs des thèmes que vous souhaitez utiliser avec votre site WordPress., Dans ce dossier Thèmes, nous trouvons trois dossiers supplémentaires de twentyfifteen, twentysixteen et twentyseventeen. Ces dossiers contiennent les trois thèmes avec lesquels WordPress est livré par défaut. Notez ci-dessous qu’il existe également un dossier nommé customtheme. Allez-y et créez ce dossier aussi bien dans votre installation que c’est là que nous allons créer notre thème WordPress à partir de zéro.

Étape 2: Créer le style.la css et de l’index.php dans votre dossier de thème personnalisé

Nous savons maintenant où thème WordPress fichiers sont dans le système de fichiers., Nous avons également créé un nouveau dossier nommé customtheme dans notre dossier thèmes. Nous allons maintenant créer deux fichiers vides dans ce répertoire. L’un est appelé index.php et l’autre est appelé style.CSS.

nous allons maintenant remplir ces fichiers avec le strict minimum, nous avons besoin pour obtenir un nouveau thème dans WordPress.

style.css

WordPress lit en fait les commentaires que vous placez dans le style.fichier css. C’est là que vous spécifiez des informations spécifiques sur le thème que vous construisez.

Le style.,css est un fichier de feuille de style (CSS) requis pour chaque thème WordPress. Il contrôle la présentation (conception visuelle et mise en page) des pages du site web.

dans notre extrait, nous attribuons simplement un nom de thème, L’auteur, L’URI de L’auteur et le numéro de Version de notre thème.,

index.,php

dans ce fichier, nous voulons juste sortir quelque chose à l’écran pour prouver que notre thème personnalisé fonctionne.

bon Travail! Croyez-le ou non, vous avez créé votre premier thème WordPress.,

Étape 3: Activez votre thème À partir du tableau de bord WordPress

à ce stade, nous pouvons visiter notre tableau de bord WordPress et naviguer vers apparence->thèmes et voilà, nous voyons le nouveau thème que nous avons créé.

Nous pouvons cliquer sur « Détails du thème” pour explorer notre thème personnalisé et trouver que les informations que nous avions entrées dans le style.le fichier css a fonctionné. Nous pouvons voir qu’ils ont un nom de customtheme, avec la Version 1.0, par L’auteur Vegibit, et un lien vers L’URI que nous avions fourni. Très cool.,

Et maintenant le moment de vérité! Allez-y et cliquez sur « Activer » sur le nouveau customtheme, puis visitez le site. Il ne va pas gagner tout Webby awards, mais nous avons nous-mêmes un bon départ sur un nouveau thème personnalisé!

Étape 4: Ajouter du Code pour afficher le titre du message et le texte du message

Nous avons pris la liberté de remplir quelques exemples de messages dans la base de données afin que nous puissions travailler avec ces données pendant ce tutoriel. En ce moment, notre thème sort juste thème personnalisé!, à la page lorsque nous visitons notre site, peu importe le nombre de messages dans la base de données. Passons maintenant à la récupération de certaines données de la base de données et à leur sortie sur la page. Plus précisément, nous voulons récupérer le titre du message et le contenu du message de tous les messages et les afficher sur la page d’accueil. Nous allons donner un coup de maintenant. Voyons d’abord ce que nous avons pour les messages dans le tableau de bord WordPress.

en Tirant parti de La Boucle WordPress

Maintenant, nous pouvons parler un peu de la Boucle WordPress. La boucle WordPress est vraiment le moteur qui fait fonctionner WordPress., C’est via cette boucle que les développeurs de thèmes vérifient les publications et les affichent sur la page au besoin. Si suit le format suivant. Si la base de données contient des messages, bouclons-les Alors qu’il y a encore des messages, sinon nous ferons savoir à l’utilisateur qu’il n’y a pas de messages. Cela ressemble à ceci dans le code PHP.,

Notez que La Boucle fait usage de deux fonctions dans sa forme la plus basique. Ce sont have_posts () et the_post (). La fonction have_posts () ne fait qu’une chose. Il vous indique s’il y a des messages dans la base de données à Boucler., Cette fonction retourne true ou false et c’est tout. S’il renvoie true, il y a des messages disponibles pour boucler. S’il renvoie false, il n’y a pas de messages à Boucler. L’autre fonction, the_post () ne renvoie rien. Son travail est d’obtenir WordPress prêt à publier des messages. Plus précisément, il récupère le post suivant, configure le post, définit la propriété in_the_loop sur true., Jusqu’à présent, notre page ne produira toujours aucune information sur nos articles de blog, mais nous pouvons le mettre à jour maintenant dans notre index.fichier php.

Ok cool. Nous avons maintenant utilisé deux fonctions WordPress supplémentaires, the_title () et the_content (). Le plus souvent, ces fonctions sont utilisées à l’intérieur de la boucle et ce qu’elles font est d’aller chercher le titre et le contenu de chaque article au fur et à mesure que la boucle itère sur chacun d’eux dans la base de données. Donc, au fur et à mesure que la boucle s’exécute, elle rencontrera le premier message., À ce moment-là, la fonction the_title() affichera le titre de la publication sur la page et the_content() affichera le corps de cette publication sur la page. Lors de la boucle suivante, ces fonctions récupéreront à nouveau le titre et le contenu suivants et les afficheront sur la page. Donc, avec ceux-ci en place, nous devrions maintenant voir certaines informations sur nos messages envoyés à l’écran. Nous allons essayer! Nous visitons http://wordpresstutorial.dev et voyons que cela fonctionne!,

Étape 5: Ajouter un lien à chaque article

Qu’en est-il de la liaison à chaque article individuel afin que nous puissions afficher un article sur son propre plutôt que dans le cadre de la page d’accueil. Nous pouvons le faire assez facilement, encore une fois avec des fonctions spéciales que WordPress fournit. Pour cette tâche, nous pouvons utiliser la fonction the_permalink (). Nous pouvons mettre à jour notre code comme suit:

maintenant, nous pouvons cliquer sur chaque titre de publication individuel et naviguer vers une page qui n’a qu’un seul message. Très cool!,

Étape 6: Ajouter un en-tête et un pied de page au thème personnalisé

le titre et le contenu de la publication sont essentiels à la création d’un bon thème. Presque aussi important est d’avoir un en-tête et le pied de votre thème. Ces sections contiendraient le contenu qui est toujours visible sur toutes les pages du site web. Ces sections sont au-dessus et au-dessous du contenu de la publication. Pour ce faire, vous l’aurez deviné, nous utiliserons des fonctions spéciales fournies par WordPress pour obtenir l’en-tête et pour obtenir le pied de page. Voyez – vous un modèle qui commence à se développer?, Presque tout ce que vous pouvez faire en tant que développeur de thème dans WordPress a déjà été fait pour vous au moyen de ces fonctions personnalisées. Vous constaterez donc qu’il est payant de mémoriser ces fonctions couramment utilisées dans le développement de thèmes WordPress. Allons-y et ajoutons maintenant les fonctions get_header() et get_footer() à notre fichier de thème.

il serait bon que vous regardez?! Nous pouvons voir que notre thème personnalisé a maintenant une zone d’en-tête ainsi que d’une zone de pied de page., Dans l’en-tête se trouve le nom et le slogan du site tandis que dans le pied de page, nous voyons le texte familier, WordPress Tutorial est fièrement propulsé par WordPress. Ce sont les options d’en-tête et de pied de page par défaut lors de l’utilisation de ces fonctions. Qu’en est – il quand nous voulons avoir un en-tête et un pied de page personnalisés? À venir jusqu’à!

de 2 fichiers de thème à 4

Jusqu’à présent dans ce tutoriel, nous avons deux fichiers qui vivent dans notre dossier customtheme (qui se trouve lui-même dans le dossier themes). Ces fichiers sont style.la css et de l’index.php. À ce stade, nous allons avoir besoin d’ajouter plus de fichiers pour aller plus loin., Allez-y et créez deux nouveaux fichiers dans le dossier customtheme. Ces fichiers seront commodément appelés en-tête.php et pied de page.php.

maintenant, ces fichiers vont écraser les dispositions d’en-tête et de pied de page par défaut fournies par défaut lorsque vous appelez les fonctions get_header() ou get_footer (). En fait, si nous actualisons notre site web, il semble que l’en-tête et le pied de page aient disparu. C’est parce que nous n’avons pas encore ajouté de balisage à ces fichiers. Juste pour les sourires, configurez les fichiers comme ça pour tester cela.

en-tête.,php

footer.,php

Working with header.,php

notre exemple ci-dessus a très bien fonctionné, et il nous montre comment ce fichier fonctionne à son niveau le plus basique. Tête.le fichier php est en fait assez important cependant, alors ne négligeons pas les détails trop rapidement! C’est là que vous incluez le code auquel toutes les pages de votre site auront besoin d’accéder d’une manière ou d’une autre. Pour commencer, toutes les pages HTML auront un doctype. Vous spécifiez cela dans ce fichier. De plus, toutes les pages auront une balise html d’ouverture, une section de tête et une balise de corps d’ouverture. Tout ce qui peut aller dans l’en-tête.fichier php., Ajoutons rapidement certaines de ces choses que toutes les pages web utiliseraient. Nous allons utiliser quelques nouvelles fonctions WordPress ici aussi. Ce seront language_attributes (), bloginfo () et body_class ().

en-tête.php

Si nous rechargeons la page et affichons ensuite la source de la page dans notre navigateur, nous pouvons avoir une idée de ce que font ces fonctions. Nous mettons en évidence les lignes qui ont une sortie provenant de ces fonctions ci-dessous:

encore une fois, nous pouvons voir l’utilisation très libérale des fonctions WordPress lors du développement de vos propres thèmes dans WordPress., En fait, nous n’avons pas encore écrit de code personnalisé. Nous apprenons simplement ce que les différentes fonctions WordPress peuvent nous offrir, puis les mettons au travail dans notre thème personnalisé.

y compris wp_head ()

wp_head() est une sorte de fonction spéciale lorsque vous travaillez avec des thèmes WordPress. Ce n’est pas aussi simple que tous les autres que nous avons examinés jusqu’à présent. Le but de cette fonction est de finaliser la sortie dans le <tête> section de votre en-tête.fichier php., En fait il est destiné à aller juste avant la balise fermante </tête> balise. Cela devient important lorsque vous commencez à ajouter divers plugins à votre site. Il imprime des scripts ou des données dans la balise head sur le frontal. Il est recommandé de toujours inclure wp_head () dans vos thèmes, car de nombreux autres plugins peuvent s’appuyer sur ce hook pour ajouter des styles, des scripts ou des méta-éléments dans la zone <head> du site. Nous l’ajouterons en tant que tel ici:

en-tête.php

terminer le pied de page.,php

Nous avons fini d’ajouter les bases de ce dont nous aurons besoin dans l’en-tête.fichier php. Allons-y maintenant et complétons le pied de page.fichier php. La sont quelques choses que nous devons faire. Rappelons que dans notre tête.fichier php nous avons des balises html et body d’ouverture. Ceux-ci doivent être fermés à un moment donné. Le pied de page.fichier php est un endroit idéal pour le faire. Nous allons donc ajouter de fermeture </html> et </body> balises en plus de faire un appel à la wp_footer() fonction.
le pied de page.,php

le Changement de Site d’Informations Dans Le tableau de bord de WordPress

vous Vous demandez peut-être pourquoi nous avons eu à faire usage de tous ces fantaisie fonctions de construire notre thème. Par exemple, lorsque nous voulions répertorier le nom et le slogan de notre site, nous avons utilisé la fonction bloginfo() en passant les paramètres de nom et de description., La raison en est que, généralement, vous ne voulez jamais coder en dur ces valeurs dans votre site. Ce sont des informations qui pourraient changer. En outre, si vous mettez votre thème à la disposition du public, ils auront leur propre nom et slogan pour leur site web. Ils devraient pouvoir simplement visiter le tableau de bord d’administration dans WordPress et mettre à jour leurs paramètres généraux pour voir ces données se remplir automatiquement.

lier le titre du Site à la page d’accueil

La plupart des thèmes offrent la possibilité de cliquer sur le texte du titre du site web et de diriger l’utilisateur vers la page d’accueil du site., De cette façon, peu importe où l’utilisateur se trouve sur le site, il peut toujours cliquer sur le texte du titre et revenir directement à la page principale du site. Ajoutons ce lien maintenant dans l’en-tête.php.

Étape 7: Ajouter une fonction.fichier php de votre thème

À ce moment, nous avons quatre fichiers dans notre thème personnalisé. Ces index sont.php, le style.css, de l’en-tête.php, et le pied de page.php. Probablement le prochain fichier le plus important que nous devons avoir est les fonctions.fichier php.

Les fonctions.fichier php dans WordPress fait beaucoup de choses pour votre thème. C’est le fichier où vous placez du code pour modifier le comportement par défaut de WordPress., Vous pouvez presque penser aux fonctions.php comme une forme de plugin pour WordPress avec quelques points clés à retenir:

• ne nécessite pas de texte D’en-tête unique
• stocké dans le dossier qui contient vos fichiers de thème
• S’exécute uniquement lorsque dans le répertoire du thème actuellement activé
• ne S’applique qu’au thème actuel
• peut appeler des fonctions PHP, des fonctions WordPress ou des fonctions personnalisées

Une chose dont nous avons grandement besoin dans notre thème est un meilleur style! Nous allons créer une fonction dans nos fonctions.fichier php pour inclure le style.fichier css dans notre thème., Voici comment nous pouvons atteindre cet objectif.

Ce morceau de code inclura, ou rendra active, la feuille de style de notre thème personnalisé. Maintenant, vous vous demandez peut-être pourquoi nous utilisons une fonction personnalisée, alors qu’il semble que nous puissions tout aussi facilement lier manuellement la feuille de style nous-mêmes dans l’en-tête.fichier php. Eh bien, cela revient à faire un peu plus de travail à l’avance pour un plus grand retour sur votre effort plus tard. Comme les thèmes deviennent plus complexes et les plus actifs sont ajoutés, vous serez heureux d’avoir cette fonction qui permet de gérer tout le levage lourd pour vous.,

maintenant, il est temps de rendre les choses un peu plus jolies. Tout d’abord, nous allons ajouter un emballage <div> avec une classe de conteneur. L’ouverture de la balise <div> sera dans l’en-tête.php, alors que la fermeture <div> sera en pied de page.php. Nous allons également envelopper la sortie post dans l’index.php avec un <article de> balise qui a une classe de l’après. Cela nous donnera des cours à cibler dans notre style.,fichier css afin que nous puissions définir la largeur de la page, entre autres choses. Nous allons également ajouter un meilleur style au style.css dans cette étape.

Étape 8: ajoutez du Style à votre thème

en-tête.php
l’Ajout d’une ouverture <div> de l’en-tête.fichier php.

le pied de page.php
l’Ajout d’une balise de fermeture </div> le pied de page.fichier php.

index.php
Emballage de la poste de sortie avec un <article de> balise

le style.,css
Enfin, nous ajoutons diverses améliorations de style CSS pour rendre le thème un peu plus agréable.

lorsque nous visitons notre site de test maintenant dans le navigateur, nous pouvons voir que le thème WordPress que nous avons développé étape par étape dans ce tutoriel est plutôt bon!

tutoriel de développement de thème WordPress résumé étape par étape

passons en revue tout ce que nous avons appris dans ce tutoriel de base de thème WordPress étape par étape pour les débutants., Nous avons appris à créer notre premier thème personnalisé dans WordPress en créant notre propre dossier à côté du dossier Thèmes de notre installation WordPress. Dans ce dossier, nous avons ajouté différents fichiers qui correspondent à différentes sections de votre site web. Dans notre tutoriel, nous avons commencé avec les minimums nus que vous devriez avoir dans un thème WordPress. À l’avenir, vous ajouteriez beaucoup plus de fichiers à ce dossier que ce que nous avons couvert. Passons en revue chaque fichier que nous avons créé dans ce tutoriel, et ce qu’ils ont fait pour nous.

• style.,css ce fichier est l’endroit où vous ajoutez des commentaires css afin que WordPress connaisse des informations sur votre thème personnalisé. Il contient également le style css personnalisé que vous appliquerez à votre thème.
• index.php Ce fichier contrôle le html et la sortie générale de votre thème. C’est le fichier principal utilisé pour la sortie des données sur votre page d’accueil.
• en-tête.,php vous Permet de définir la zone à contenir des informations importantes au sujet de votre site web dans le <tête> région ainsi que de l’ouverture de <html>, <corps>, et ,<div class=”container”> balises.
• le pied de page.php le pied de page fermera toutes les balises d’ouverture que vous avez spécifiées dans la zone d’en-tête, en plus de vous donner un endroit pour appeler la fonction wp_footer ().
• fonctions.,php vous permet d’appeler des fonctions, à la fois PHP et WordPress intégré, et de définir vos propres fonctions afin de changer les comportements par défaut de WordPress

donc là vous l’avez! Nous avons pu créer un thème WordPress personnalisé entièrement fonctionnel avec seulement 5 fichiers. Cela nous donne les connaissances de base pour créer des thèmes et des fonctions WordPress plus avancés. Excellent Travail!