Share
Prêt à apprendre à créer votre premier thème WordPress? Cette série de tutoriels suivra une approche étape par étape, utilisant un "thème d'apprentissage" appelé affectueusement WordPress Roues De Formation, pour aider à enseigner la matière. Cette série présentera le novice absolu de WordPress à travers les étapes de base nécessaires pour convertir n'importe quel modèle HTML en un thème WordPress entièrement fonctionnel.
Lorsque j'ai commencé à utiliser WordPress en 2006, il n'y avait pas beaucoup de tutoriels à l'époque sur le développement de thèmes..
J'ai appris à la dure, par essais et erreurs, en exploitant le codex WordPress, ainsi que des quelques tuts qui existaient à l'époque. Au cours des deux ou trois dernières années, j'ai enseigné le développement de base de thèmes WordPress, et j'ai remarqué que, pour ceux qui ne sont pas très familiarisés avec les systèmes de gestion de contenu, la plupart des tutoriels existants pour enseigner le développement à partir de zéro sont beaucoup trop compliqués..
J'ai donc développé une approche pas à pas, utilisant un "thème d'apprentissage" appelé affectueusement WordPress Roues De Formation, cela prendra le novice complet de WordPress à travers les étapes de base nécessaires pour convertir n'importe quel modèle HTML en un thème WordPress entièrement fonctionnel. Cependant, nous allons commencer lentement, en particulier pour ceux qui n’ont pas le luxe d’avoir déjà travaillé avec du code CMS ou PHP. D'où le nom "Training Wheels". Les codeurs hardcore se retirent, nous sommes sur le point de nettoyer la piste!
Nous nous concentrerons principalement sur le code WordPress, pas sur le design. Ainsi, le gabarit est volontairement simpliste avec un style léger afin de ne pas conduire votre vélo sur une falaise par ennui.
Pour une très bonne introduction au développement Web à l'aide de HTML et de CSS, consultez la série de tutoriels Net Tuts - Développement Web à partir de rien.
Les thèmes WordPress sont essentiellement des modèles HTML simples, avec quelques balises PHP spécifiques à WordPress jetées dans les zones où le contenu dynamique doit être chargé à partir de la base de données. Pour cette raison, une bonne compréhension de HTML serait nécessaire pour donner suite à cette série..
Les thèmes WordPress, bien que composés principalement de HTML, ne peuvent pas être affichés par défaut dans votre navigateur en raison du code PHP qu’ils contiennent, ce qui modifie leur mode de fonctionnement. Ils doivent être exécutés sur un serveur capable d'interpréter le code PHP. C'est pourquoi il est essentiel de travailler sur un serveur Web compatible PHP lors du développement de thèmes WordPress..
Nous allons ignorer le processus d'installation de WordPress pour le moment, car nous allons nous concentrer uniquement sur le développement de thèmes. J'ai lié à un excellent didacticiel vidéo sur l'installation de WordPress sur un serveur en direct. Des tonnes de plus peuvent être trouvés en ligne pour les serveurs Live et virtuels.
"Un serveur virtuel est essentiellement un serveur fonctionnant sur votre ordinateur de bureau local et pouvant être configuré à l'aide de MAMP (mac), XAMPP (mac & windows) ou WAMP (windows)."
Pour savoir comment installer WordPress localement sur un serveur virtuel, consultez la vidéo suivante.
Ils ne l'appellent pas l'installation célèbre 5 minutes pour rien. En fait, si vous l'avez fait suffisamment de fois, cela prend moins de 5 minutes.
Consultez www.freecss templates.org pour une tonne de modèles qui sont parfaits pour commencer et qui sont déjà conçus pour être utilisés comme thèmes WordPress..
Une fois votre test d’installation de WordPress en cours d’exécution, vous avez besoin d’un modèle HTML de base (index.html) avec une feuille de style (style.css). J'encourage tous ceux qui apprennent le processus de conversion HTML à WordPress à s'exercer en téléchargeant de simples modèles HTML et CSS gratuits et en en convertissant quelques-uns pour la pratique..
Je vais utiliser le thème WordPress Training Wheels pendant la durée de cette série de tutoriels et je vous encourage à faire de même afin que nous ne vendions pas dans des directions différentes pour commencer. Le thème Training Wheels est un modèle dépouillé, rien de racé ni de clinquant, mais qui contient tous les composants familiers d’un thème WordPress typique, c’est-à-dire? En-tête, menu, barres latérales, colonne de contenu et pied de page. Le thème sera nommé roues d'entraînement-0.0 au début, et le nom changera progressivement au fur et à mesure que nous ajouterons du code et que nous progressons pour devenir un thème à part entière. A la fin de cette leçon, le nom changera en roues d'entraînement-0.1
Regardez la structure HTML de base ci-dessous. Très simple.
Si vos fichiers de démarrage ne portent pas le nom indiqué ci-dessus, vous devrez les renommer. WordPress Nécessite des fichiers avec ces noms au minimum pour qu'un thème soit fonctionnel. De plus, nous aurons un dossier d'images pour garder toutes les images soigneusement cachées de notre chemin.
Le fichier index.html, qui constituera la structure de base du thème, doit être renommé en index.php. Je recommande toujours de conserver une copie de index.html sur le côté, au cas où quelque chose ne va pas, comme il se doit. Pensez-y comme un pneu de secours au cas où vous rencontriez une crevaison. Confession: même après des années de développement de thèmes, je fais toujours des bêtises, en particulier après minuit, quand mon cerveau ne peut plus fonctionner mais que le café me fait avancer.
Nous nous retrouvons avec ce qui suit. Les miens sont logés dans le dossier appelé training-wheels-0.0
Si vous avez déjà essayé d'ajouter un modèle HTML simple dans le répertoire des thèmes WordPress, vous remarquerez qu'il ne figure pas dans les options d'activation des thèmes. Avec les anciennes versions de WordPress, vous constateriez également que si votre feuille de style ne contenait pas le commentaire de la feuille de style ci-dessous, un message d'erreur s'afficherait. En effet, WordPress a utilisé l'extrait de commentaire CSS ci-dessous pour enregistrer votre thème en tant que thème WordPress valide. Actuellement, il n'est plus nécessaire d'avoir ce commentaire pour que votre thème soit enregistré, mais votre thème apparaîtrait sans aucun détail, autre que le nom du dossier, comme indiqué ci-dessous..
Le code ci-dessous doit être modifié pour contenir vos propres détails uniques ainsi que des informations uniques sur le thème que vous créez..
/ * Nom du thème: URI du thème: Description: Version: Auteur: URI de l'auteur: * /
Avec les détails de mon thème Training Wheels inclus, cela ressemblerait à ceci:
/ * Nom du thème: Training Wheels URI du thème: http://www.wpbedouine.com Description: Un thème pour apprendre le développement de thèmes WordPress à partir de zéro Version: 0.1 Auteur: Nur Ahmad Furlong URI de l'auteur: http: //www.nomad-one .com * /
Certains paramètres supplémentaires peuvent être ajoutés, notamment si vous envisagez de diffuser votre thème au public, de le vendre ou de le charger dans le répertoire de thèmes officiel de wordpress.org..
Vous trouverez un exemple de commentaire de feuille de style plus détaillé permettant de fournir le plus de détails possible sur le thème dans le thème par défaut vingt-onze. Comme vous pouvez voir quelques informations de balises supplémentaires pour aider les utilisateurs lors de la recherche de types de thèmes spécifiques via la recherche de thèmes du tableau de bord ou sur le répertoire de thèmes présent. Une description détaillée ainsi que des informations sur les licences de thème sont incluses. Nous allons les ignorer pour cet exercice.
/ * Nom du thème: Twenty Eleven Thème URI: http://wordpress.org/extend/themes/twentyeleven Auteur: l'équipe WordPress Auteur URI: http://wordpress.org/ Description: Le thème 2011 pour WordPress est sophistiqué et léger. et adaptable. Personnalisez-le avec un menu personnalisé, une image d’en-tête et un arrière-plan. Ensuite, allez plus loin avec les options de thème disponibles pour le jeu de couleurs claires ou sombres, les couleurs des liens personnalisés et trois choix de disposition. Twenty Eleven est équipé d'un modèle de page Showcase qui transforme votre page d'accueil en une vitrine pour présenter votre meilleur contenu, d'un nombre considérable de supports de widgets (barre latérale, trois zones de pied de page et d'une zone de widget de page Showcase), ainsi que d'un widget "Ephemera" personnalisé affichez vos publications réservées, liées, citées ou d'état. Sont inclus les styles pour l’impression et l’éditeur d’admin, la prise en charge des images en vedette (images d’entête personnalisées dans les articles et les pages, et de grandes images dans les articles «collants» en vedette), ainsi que des styles spéciaux pour six formats différents. Version: 1.2 Licence: GNU General Public License Licence URI: license.txt Tags: sombre, clair, blanc, noir, gris, une colonne, deux colonnes, barre latérale gauche, barre latérale droite, largeur fixe, largeur flexible , arrière-plan personnalisé, couleurs personnalisées, en-tête personnalisé, menu personnalisé, style éditeur, en-tête-d'image-sélectionnée, images-en-vedette, modèle de largeur, microformats, post-formats, support de langue, support -post, options de thème, traduction prête * /
Une fois que vos commentaires sur la feuille de style sont en place, votre thème est maintenant prêt à être activé via le tableau de bord d'administration WordPress, sous Apparence "Thèmes".
Pour vous aider, ainsi que les autres utilisateurs du thème, à reconnaître rapidement le thème dans la zone d'installation des thèmes du tableau de bord, une image screenshot.png a été automatiquement affichée si elle se trouve à la racine du dossier de votre thème..
Idéalement, vous voudriez avoir une capture d'écran qui donne une bonne représentation de l'aspect du thème. Je trouve que de nombreux concepteurs de thèmes incluent ici un logo, ce qui n’aide pas toujours l’utilisateur final à identifier le thème qu’il recherche, en particulier dans le cas où l’utilisateur a déjà une tonne de thèmes déjà installés, ce qui est assez courant, je crois..
Le fichier screenshot.png doit être de 240 pixels x 180 pixels, ce qui correspond à la taille de la vignette dans le tableau de bord. Vous pouvez insérer une taille différente, mais l'image sera redimensionnée pour s'adapter à ces dimensions. Il est préférable de conserver la taille correcte du premier coup pour un affichage optimal et une expérience de chargement de page.
Avant d'aller plus loin, nous devons nous orienter un peu avec la structure du langage de développement PHP, et plus important encore, la structure de PHP spécifique à WordPress. Le PHP utilisé dans les thèmes WordPress est spécialement conçu pour fonctionner dans l’environnement WordPress uniquement. Nous allons commencer par la structure contenant tout code PHP, comme avec HTML entre crochets, le code PHP est encapsulé.
Toutes les fonctionnalités se trouvent à l’intérieur des crochets, avec le code que nous appelons généralement les fonctions PHP. Assurez-vous toujours qu'il y a un espace entre le tag contenant et le code PHP interne. La plus simple de ces fonctions que nous allons traiter est la bloginfo (); une fonction. Notez qu'après le nom de la fonction, nous avons 2 crochets arrondis, l'ouverture et la fermeture, avec un point-virgule à la fin, la fonction est fermée et dans de nombreux cas, elle est essentielle. Les crochets arrondis finiront parfois par contenir des paramètres supplémentaires, pour indiquer le bloginfo (); fonction, en particulier ce qu'il doit faire.
Certaines fonctions WordPress n'ont pas besoin de paramètres entre crochets arrondis pour exécuter une fonction, bien qu'elles puissent en avoir éventuellement pour rendre leur fonction plus spécifique. Le bloginfo (); paramètre cependant, a besoin d’un juste pour fonctionner du tout. Nous aborderons certaines des fonctions supplémentaires qui fonctionnent sans paramètres au fil du temps.
Remarquez comment le nom du mot est écrit avec des guillemets simples entre parenthèses arrondies.
est le code que nous utilisons à la place du nom du site, partout où nous souhaitons que ce nom apparaisse dans notre modèle. Par exemple, là où j’ai écrit "WordPress Training Wheels", je pourrais simplement remplacer ce texte par la fonction.
Portez une attention particulière à la structure de cette fonction, car le reste du code WordPress suit une structure similaire. Si vous laissez de côté une partie essentielle, comme les crochets arrondis, le point-virgule après les crochets arrondis ou l'espace entre php et le mot bloginfo, votre code ne fonctionnera pas correctement. Dans certains cas, cela pourrait tuer votre page entière. Je sais que c'est une douleur d'être si prudent, mais développer de bonnes habitudes tôt aide. Respectez les règles de la route et votre voyage sera beaucoup moins chaotique.
Lors du chargement du site WordPress exécutant cette fonction, WordPress interroge la base de données et trouve le nom que vous avez inséré dans le champ Nom du blog sous Paramètres "Général.
C'est également le nom que vous avez inséré au tout début lorsque vous lancez l'installation pour configurer WordPress pour la première fois. Si vous modifiez ce nom dans les paramètres généraux, votre modèle reflétera immédiatement ce changement. C’est essentiellement ainsi que fonctionne WordPress, ou n’importe quel autre système de gestion de contenu. Les balises dynamiques remplacent les contenus statiques, ce qui permet de gérer les contenus via l'interface d'administration au lieu de modifier directement les modèles..
Votre thème n'est pas encore prêt à être enregistré dans WordPress. Il manque une étape essentielle qui permet à WordPress d'afficher votre thème correctement.
Quelques pas en arrière, notre index.html pouvait facilement se lier à la feuille de style qui l’accompagnait, car ils se trouvaient dans le même dossier et qu’il suffisait d’insérer le nom du fichier de la feuille de style dans le lien. Ce n'est plus le cas cependant. Les thèmes WordPress ne résident pas au niveau racine du site, car ils sont installés dans le wp-content "thèmes dossier dans le logiciel WordPress.
Comme vous pouvez le voir ci-dessous lors de l'activation du thème, nous ne voyons toujours pas l'image complète. Bien que la structure HTML soit chargée, la feuille de style n’est pas liée, ce qui donne une page sans style..
Sans expliquer trop de détails sur la manière dont WordPress appelle les modèles à partir de ces dossiers, nous devons être conscients que les fichiers ne peuvent plus être liés aussi facilement que nous le faisons dans des sites HTML simples. Nous avons besoin d’utiliser certaines fonctions WordPress supplémentaires pour compléter les étapes entre le répertoire racine et le dossier du thème actuellement activé. Nous faisons cela avec l'aide d'un autre bloginfo (); fonction, cette fois en détectant l'URL de la feuille de style du thème actuellement activé. Quel que soit le nom du dossier du thème, WordPress remplira les espaces et insérera le chemin du fichier style.css..
Cette fonction est insérée dans la balise de lien de la feuille de style
qui devient maintenant
Si vous inspectez votre code source en utilisant view source ou quelque chose comme firebug, vous verrez que WordPress inclut le chemin d'accès complet de la racine du site à la feuille de style. Le dossier racine de mon exemple de site est situé à http://www.wpbedouine.com/training-wheels/. WordPress génère donc:
Le même stylesheet_url La fonction insérera automatiquement le chemin d'accès à n'importe quel thème actuellement activé de la même manière, sans qu'aucun code source ne soit modifié. Vous verrez un motif émerger, avec du contenu codé en dur remplacé par des fonctions dynamiques qui extraient des données de la base de données à la volée..
Vous sentez que l'air se précipite dans vos cheveux maintenant? Ne vous inquiétez pas, les roues de formation se détacheront bientôt! Je promets.
Placez vos fichiers index.php et style.css dans leur propre dossier, nommé en fonction de ce que vous voulez que le thème soit nommé, puis chargé sur votre wp-content "thèmes dossier dans votre version hôte en direct ou virtuel de votre installation WordPress, comme indiqué ci-dessous.
Et sans plus tarder, allez à Apparence "Thèmes et cliquez sur Activer sous votre thème nouvellement créé. Pour le reste des lecteurs de ce site, ces étapes ont peut-être été simples, mais je connais personnellement le sentiment de cliquer enfin avec ce processus et d'activer mon tout premier thème dans WordPress. C'est inestimable pour le débutant.
Avant de terminer, utilisons quelques autres blogs très simples, bloginfo (); fonctions pour remplir le contenu dynamique. Nous avons déjà introduit le bloginfo ('nom'); et bloginfo ('stylesheet_url');. Ci-dessous nous avons le code HTML initial pour l'en-tête div de notre thème.
WordPress Roues De Formation
Un petit coup de pouce pour vous permettre de rouler gratuitement avec WordPress
Nous allons remplacer le contenu de l'attribut href link href, qui ne contient actuellement qu'un symbole de hachage et qui ressemble habituellement à href = "home.html", par le bloginfo ('url'); une fonction.
">
De plus, nous remplacerons le slogan h2 sous le nom du site par:
donc notre extrait de code semble maintenant beaucoup plus wordpressish.
">
Un dernier problème à résoudre est le lien vers l’image de contenu dans la colonne du milieu du modèle. Semblable à la question de la liaison de la feuille de style, nous devons utiliser un autre bloginfo (); fonction pour remplir le chemin de l'image car images / imagename.jpg ne fonctionnera plus.
Roues d'Entrainement Leçon 1
Pour résoudre ce problème, nous utilisons le code suivant avant d'appeler le répertoire images
Nous allons donc nous retrouver avec ce qui suit.
Roues d'Entrainement Leçon 1
Faites très attention à la barre avant juste après le crochet de fermeture et avant le nom du dossier images!
Accentsconagua
; ?>/images_26/wordpress-theme-development-training-wheels-day-one_4.jpg )
bloginfo ('nom'); bloginfo ('url'); bloginfo ('description'); bloginfo ('template_directory'); Le bloginfo (); fonction a une tonne d'utilisations pour générer divers contenus à partir de votre site.
Pour une liste plus complète des paramètres de bloginfo (); consultez la documentation WordPress Codex sur cette fonction - http://codex.wordpress.org/Function_Reference/bloginfo.
Une autre excellente ressource pour les nombreuses fonctions WordPress est la référence de balise DBS Interactive WordPress, qui est essentiellement une présentation plus ordonnée et ordonnée du code répertorié dans le codex WordPress..
J'ai ajouté des extraits du code couvert dans cette leçon à mon compte d'extraits.
Une roue libre avec WordPress va bientôt suivre. J'entends ces roues d'entraînement claquer pour se décoller :)
