DIY WordPress Framework Partie 2 Créer le thème

La dernière fois que je vous ai quitté, nous avions examiné certains principes de conception, exploré d’autres cadres et abouti à la conclusion inévitable que nous construirions le nôtre. Dans ce tutoriel, nous allons décrire les étapes que j'ai suivies pour créer ce que j'ai appelé mon Boilerplate WordPress, en examinant de près le CSS, les functions.php et en sélectionnant des pages de modèle..

Tout au long du développement, il est important de garder à l’esprit que nous voulons garder cette règle assez générale pour que nous puissions facilement l’adopter / la développer dans des thèmes futurs; Je me suis également fixé comme objectif personnel de faire en sorte que cela soit assez bon pour rester sur le thème du barebone. Rappelons-nous que pour aller de l'avant.

CSS du thème

La première chose à faire est d’arranger le CSS. Le contenu CSS de mon Boilerplate WordPress comprend 2 composants principaux: style.css, requis, et le dossier / css /, qui comprend tous les CSS du cadre. Dans style.css, vous trouverez deux sections: la définition du thème et les appels à mon CSS actuel. Le fichier style.css complet ressemble à ceci:

 / * Nom du thème: WordPress 3.0 URI du thème de la plaque de chaudière: http://casabona.org/ Description: Un thème de plaque de la chaudière pour WP 3.0. Maintenant avec plus de HTML5! Version: 1.5 Auteur: Joe Casabona URI de l'auteur: http://www.casabona.org * / @import url ("css / reset.css"); @import url ("css / master.css"); @import url ("css / ie.css");

Après la définition du thème, vous voyez trois @importation lignes. C'est là que tout le gros du travail pour le CSS va. reset.css est évidemment la réinitialisation CSS. En fait, j'ai récemment changé cela pour utiliser normalize.css pour plusieurs raisons. La première raison est qu'au lieu de tout réinitialiser à un style par défaut non formaté, il crée les styles que vous attendez d'un navigateur par défaut. Par exemple, dans une réinitialisation standard, n'est plus en gras. Dans normalize.css, c'est le cas. La deuxième raison est qu'il a des styles par défaut pour les éléments HTML5, nécessaires pour les navigateurs plus anciens qui ne prennent pas en charge les nouveaux..

Remarque: J'utilise HTML5 dans ce thème. Cela fonctionne dans Firefox, Chrome, Safari et IE7-9.

Après l'appel de reset.css, j'appelle ma feuille de style principale, master.css (conventions de nommage grâce à Dan Cederholm de SimpleBits). C'est le noeud de la question! Tous mes styles par défaut après réinitialisation seront ici. Je ne vais pas coller tous les fichiers CSS ici, mais j'ai inclus les fichiers que vous pouvez visualiser. En créant le CSS, j'ai gardé à l'esprit des styles qui restent généralement les mêmes d'un site à l'autre; des éléments tels que la largeur du conteneur dans son ensemble, mes styles de navigation, la manière dont j'organise ma barre latérale, etc. J'utilise aussi généralement des marges / marges de 10 sur 15 pour les éléments de paragraphe et de liste. J'ai donc quelques définitions de base pour celles-ci..

J'inclus également les styles par défaut pour certaines classes WordPress courantes, y compris celles générées par l'éditeur WordPress. Elles sont: .navigation, .post, .postmetadata, ol.commentlist, ol.commentlist li, ol.commentlist li .vcard, ol.commentlist li .vcard img, formulaire # commentform, formulaire # commentform p étiquette, formulaire # commentform entrée, formulaire # commentform textarea, formulaire # commentform textarea, formulaire # commentform input [type = "submit"], img.centered, .alignright, .alignleft, .aligncenter, div.aligncenter, .wp-caption, .wp-caption img, .wp- légende p.wp-caption-text.

La dernière chose que j'inclus dans master.css est une classe qui permettra aux divs de "se dégager de tout". Autrement dit, cela éliminera la nécessité d’un .clearfix div (encore une fois, merci à Dan Cederholm pour cela).

/ * self-clear floats * / .group: after content: "."; bloc de visualisation; hauteur: 0; clarifier les deux; visibilité: cachée;

Après l'appel de master.css, j'appelle dans la dernière pièce de notre puzzle, ie.css. C'est là que tous les correctifs IE vont aller. Pour l'instant, il ne s'agit que d'un correctif pour .group et d'un correctif PNG. Gardez à l'esprit que l'ordre d'importation est très important ici, car certaines choses peuvent être remplacées, et changer l'ordre peut déranger les styles que nous avons définis.

Fonctions.php

Le fichier functions.php est tout aussi important que le contenu CSS. C’est là que nous ajouterons toutes les fonctions générales que nous prévoyons d’utiliser dans le thème, ainsi que les définitions des barres latérales, des menus, etc. Je commence par deux lignes:

define ('TEMPPATH', get_bloginfo ('stylesheet_directory')); define ('IMAGES', TEMPPATH. "/ images");

Ce sont deux constantes que j'utilise assez souvent dans le thème. Le premier est le chemin du template; c'est bien pour référencer des fichiers spécifiques à un thème. J'ai utilisé 'stylesheet_directory' au lieu de 'template_directory', car si nous l'utilisions comme thème parent (le tutoriel viendrait bientôt), 'template_directory' prendrait le mauvais chemin (à savoir celui-ci au lieu du chemin de l'enfant). La deuxième ligne utilise en fait TEMPPATH pour créer un chemin d'accès au répertoire / images /, que nous utiliserons également très fréquemment, que ce soit dans ce thème ou dans les thèmes enfants..

Après ces deux lignes, j’ajoute la prise en charge des menus dynamiques et de 2 barres latérales sous forme de widgets; l'un est la barre latérale principale et l'autre est une deuxième barre latérale "juste au cas où". Généralement, je vais l'utiliser dans le pied de page de mon thème. Enfin, j'ai créé deux autres fonctions que j'utilisais régulièrement:

fonction print_post_nav () ?>

Aucun article trouvé. Essayez une autre recherche?

Le premier imprime la navigation du message et doit être utilisé en dehors de la boucle. Cela signifie que nous pouvons l’utiliser sur n’importe quelle page répertoriant des publications (index, recherche et tout modèle de type publication personnalisé). La deuxième fonction crée la zone "Messages non trouvés", que j'utilisais sur presque toutes les pages de modèles..

Bien entendu, il n'y a pas de limite au nombre de fonctions que vous créez ici. C'étaient juste ceux que j'utilisais fréquemment.

Pages de modèle

Ensuite, les pages de modèles. Nous allons examiner 4 pages spécifiques: header.php, footer.php, single.php et page.php. Les autres sont essentiellement des dérivés de la page ou des modèles uniques.

En-tête et pied de page

Vous trouverez ci-dessous l'intégralité de notre fichier header.php:

<?php bloginfo('name'); ?> | <?php wp_title(); ?>

">

'Principale' )); ?>

Vous pouvez voir cela en dehors de notre habituelle déclarations, il n'y a pas trop. j'inclus pour vous assurer que notre thème est compatible HTML5, puis dans le corps, créez un en-tête de base avec le nom et la navigation du site, appelez la barre latérale et lancez la zone "contenu", le tout entouré par #container div prédéfini. Vous pouvez voir que la manière dont je présente les choses est cohérente avec la définition de mon CSS (par exemple, la barre latérale, que je flotte à droite, est au-dessus de la zone de contenu principale)..

Remarque: Je ne parle pas du modèle sidebar.php, car il est identique à chaque barre latérale standard: vérifiez si une zone de widget est définie; sinon, affiche quelques widgets par défaut.

La même chose vaut pour notre pied de page:

© ">

J'imprime deux sauts de ligne, principalement pour que le code soit joli, termine le contenu div, puis commence sur le pied de page. J'inclus la barre latérale secondaire dans le pied de page car c'est quelque chose que je fais souvent, puis j'ai quelques informations générales sur les droits d'auteur, et j'achève le thème en fermant les balises ouvertes. Encore une fois, j'essaie de ne pas trop en faire avec le pied de page puisqu'il s'agit d'un cadre, mais je fournis quelques options pour ajouter des informations au pied de page si besoin est..

Une seule page

Ces fichiers sont également assez basiques. J'ai essayé de supprimer la plupart des éléments inutiles tout en laissant les informations que vous vous attendez à voir sur chacun d'eux. single.php devrait avoir l'air familier:

>

Lire le reste de cet note "
'); ?>
Posté sur à | Catégorie | Commentaire | Les commentaires sont actuellement fermés | Commentaire | Les commentaires ainsi que les pings sont actuellement fermés. |

Nous avons l'en-tête et le pied de page et notre boucle. J'ai conservé les classes communes à la plupart des thèmes WordPress afin que ceux qui l'utilisent puissent simplement définir ces classes dans le CSS sans avoir à changer le modèle single.php. J'inclus également les méta-données post standard et une zone de commentaires. Notez que je n'utilise pas la fonction de navigation post que j'écris dans functions.php. C'est parce que c'est à l'intérieur de la boucle, et cette fonction se comporterait de manière imprévisible.

Le modèle page.php est un peu plus court:

Lire le reste de cette page "
'); ?> '
Pages: ',' après '=>'
',' next_or_number '=>' numéro ')); ?>

Encore une fois, je n'inclus que ce qui est nécessaire. Il n'y a pas de cours ou d'informations supplémentaires. Les pages sur les sites Web se concentrent sur le contenu, c'est pourquoi j'ai essayé de rationaliser ce modèle autant que possible..

Autres modèles

Évidemment, je ne peux pas couvrir chaque page de modèle ici; Je vous suggère de vérifier la source incluse. Pour chaque modèle, j'ai essayé de supprimer ce que je n'utilisais pas et, dans certains cas, j'ai laissé des modèles (informations par défaut de WordPress). Puisque nous codons tous différemment, j’ajoute des choses qui ne vous conviennent peut-être pas, mais j’ai essayé de le rendre aussi général que possible..

Voici à quoi ressemble le thème hors de la boîte:

Le thème WordPress Boilerplate

Conclusion

Alors, voici un aperçu avec quelques exemples de création d'un cadre de thème. En regardant mon exemple de code, vous pouvez voir que je n'ai pas essayé de faire trop avec un seul fichier modèle. Si je veux ajouter quoi que ce soit à ce thème, ce sera dans le fichier functions.php car les fichiers de modèle doivent rester basiques, en particulier si nous allons simplement les écraser lors de la création d'un thème enfant. En parlant de ça, c'est ce que nous ferons la prochaine fois, alors restez à l'écoute!

Code