Share
La publication d'un thème WordPress sur un marché, tel que ThemeForest, où le public est si vaste et si diversifié, présente certains défis. Vous ne pouvez pas tester une solution directement avec le client. Vous devez planifier à l'avance tous les cas critiques et vous assurer que votre thème est aussi personnalisable que possible. Si vous êtes inexpérimenté, il y a de fortes chances que certaines choses glissent malheureusement entre les mailles du filet. Heureusement pour vous, nous avons fait appel à notre sagesse durement acquise pour vous aider à éviter de répéter les mêmes erreurs que nous avons commises..
WordPress a la possibilité de créer une publication protégée par mot de passe: les visiteurs ne doivent pouvoir accéder à ce type de contenu qu'après avoir saisi le mot de passe. Vous n'avez pas besoin de faire quoi que ce soit de spécial concernant la publication elle-même, mais si vous oubliez de vérifier avant d'afficher des commentaires, les visiteurs verront toujours tous les commentaires sur la publication protégée, ce qui irait à l'encontre du but de la protection de la publication. Vous pouvez remédier à cela avec un simple enregistrement commentaires.php:
Il y a un fichier modèle spécial, pièce jointe.php, qui est utilisé lorsqu'un visiteur clique sur une pièce jointe. Les pièces jointes peuvent être des images, des vidéos, des fichiers de musique… tout ce qui est inséré avec les boutons de pièce jointe de l'éditeur:
En créant pièce jointe.php n'est pas obligatoire: si le modèle n'est pas là, le navigateur n'affichera que le fichier, avec un plugin approprié si nécessaire. Je dirais que le principal avantage de pièce jointe.php est que lorsque le visiteur décide de voir, par exemple, une image en taille réelle, la navigation sur le site reste accessible. Vous pouvez également afficher des informations personnalisées sur la pièce jointe. Le thème TwentyTen par défaut dans WordPress 3.0 présente un intérêt pièce jointe.php qui affiche les tailles d'image.
Accentsconagua
if (wp_attachment_is_image ()) echo ' | '; $ metadata = wp_get_attachment_metadata (); printf (__ ('La taille normale est% s pixels', 'vingtaine'), sprintf ('% 3 $ s ×% 4 $ s', wp_get_attachment_url (), esc_attr (__ ('Lien vers l'image en taille réelle', ' vingtième ')), $ métadonnées [' largeur '], $ métadonnées [' hauteur '])); Vous avez peut-être entendu parler de la prise en charge des langues de droite à gauche, mais à moins de maîtriser vous-même l'une de ces langues, vous pouvez imaginer que c'est très compliqué..
Introduire dans votre thème une prise en charge des langues écrites de droite à gauche, telles que l'arabe et l'hébreu, est en réalité assez simple. Les styles dans rtl.css remplacera ceux de la principale style.css lorsque la variable WP_LANG dans settings.php est défini sur une langue de droite à gauche, par exemple l'arabe:
define ('WP_LANG', 'ar') Votre rtl.css d'abord besoin de cette déclaration:
corps direction: rtl; unicode-bidi: incorporer;
La première propriété est explicite. Le second "ouvre un niveau supplémentaire d'intégration par rapport à l'algorithme bidirectionnel" (W3C).
le rtl.css fichier n'a pas besoin de dupliquer tous les styles style.css, juste les choses qui doivent changer en lisant de gauche à droite. Pensez comme si le site était vu dans un miroir: les flottants changent de direction (float: gauche devient flottant: droite et vice versa) et les marges et les marges sont inversées (margin-right: 18px devient margin-left: 18px; margin-right: 0) Pensez également aux grandes sections du site: quelle direction l'en-tête va-t-il flotter? N'oubliez pas tous les petits détails, comme l'inversion des tirets de vos listes de définitions et de vos guillemets. Pour vous en faire une idée, vous pouvez essayer de passer de la langue à l'arabe ou à l'hébreu sur des sites tels que Facebook ou Wikipedia, ou visiter des sites internationaux comme Al Jazeera..
Croyez-le ou non, c'est à peu près tout ce qu'il y a à savoir.
Pour styler l'éditeur TinyMCE fourni avec WordPress, créez simplement un fichier nommé editor-style.css dans votre répertoire de thème. Il est très facile à remplir, car il vous suffit de faire correspondre la typographie avec celle de la feuille de style principale et vous n'avez pas à vous soucier de la disposition des blocs. TinyMCE a cependant quelques bizarreries. Vous pouvez éviter les lignes trop longues en définissant une propriété max-width sur la classe .mceContentBody.
Si vous incluez le support pour les langues de droite à gauche via rtl.css, vous devez également ajouter un fichier nommé editor-style-rtl.css, comme certaines propriétés, telles que les marges et les marges de la liste, doivent également être modifiées dans l'éditeur.
Entrées paginées (à ne pas confondre avec une paginée liste des entrées) sont séparées en pages par leur auteur avec le nom Quicktag. Certes, cette fonctionnalité ne semble pas être très utilisée sur la plupart des sites WordPress, mais si vous oubliez de faire votre part, les visiteurs ne pourront pas lire au-delà de la première page. Pour autoriser la lecture de tout le contenu, vous devez utiliser la balise wp_link_pages dans The Loop.
wp_link_pages (array ('before' => 'Pages: ',' après '=>'
',' next_or_number '=>' numéro ')); Pour un article de trois pages, cela génère ce qui suit:
Pages: 1 2 3
Les visiteurs peuvent ensuite cliquer sur les numéros de page pour lire le post en entier. La documentation complète de cette fonction est disponible sur le codex WordPress.
Bien que vous ne puissiez pas définir tous les widgets possibles au soleil, il est judicieux de vérifier que tous les widgets fournis avec WordPress s'affichent correctement. Tous peuvent recevoir un titre optionnel et certains ont des apparences différentes. Par exemple, le Catégorie Le widget peut être affiché sous forme de liste déroulante et également afficher plusieurs niveaux de catégories ou de balises imbriquées. Assurez-vous donc de styliser les listes imbriquées. Portez une attention particulière au calendrier. C'est un tableau et vous voudrez généralement que les jours soient centrés dans leurs cellules, de manière à ce qu'ils s'alignent sur les jours de la semaine dans l'en-tête. Sur la première photo, les chiffres semblent légèrement décalés, alors qu'ils sont correctement alignés sur la deuxième photo..
Enfin, cela vous aidera si vous commencez par concevoir de bons styles pour le .widget classe, car il sera appliqué à tous les widgets, même ceux provenant de tiers. Avec des mises en page flexibles en particulier, assurez-vous que vos widgets ne s'étirent pas excessivement, car cela les rend vraiment bizarres.
Les commentaires sont un peu une énigme de conception. Il y a beaucoup de choses à afficher (avatars, noms des commentateurs, dates des commentaires, corps des commentaires, boutons de réponse), vous devez donc lui laisser un peu de place, mais en même temps, cela ne devrait pas submerger le contenu principal , et devrait être visuellement distincte d’une manière ou d’une autre. Les commentaires filetés aggravent toutes ces difficultés, car vous devez également distinguer les réponses. Généralement, ceci est obtenu avec une marge, mais comme vous ne pouvez pas savoir combien de niveaux de réponses il y aura, vous risquez toujours de ne pas autoriser une largeur suffisante ou d'en autoriser trop..
N'oubliez pas non plus que le formulaire de réponse apparaîtra non seulement au bas de la page, mais également au milieu du fil de commentaire lorsque quelqu'un clique sur le bouton de réponse. Les marges et le rembourrage doivent donc être suffisants dans les deux cas. Il y a aussi le lien 'annuler la réponse' qui doit être stylé et positionné.
Enfin, vous devez vous assurer que la pagination des commentaires fonctionne, que les commentaires sont rendus correctement, qu’il y en ait très peu ou beaucoup, et que les commentaires threadés ne débordent pas les limites de leur conteneur. Veillez à ne pas mélanger les commentaires ensemble et à ne pas oublier de vérifier la disposition lorsque les avatars sont activés et désactivés.
wp_footer () et wp_head () Appel wp_footer () juste avant de fermer la balise body, et wp_head () juste avant la balise de tête de fermeture. Les deux fonctions sont des crochets d’action pouvant être utilisés par les développeurs de plugins et de thèmes. Si vous les omettez, certaines fonctionnalités et certains plugins risquent de ne pas fonctionner, notamment les en-têtes personnalisés..
Bien que de nombreux thèmes reposent encore sur des plugins, tels que TimThumb, WordPress, depuis la version 2.9, prend en charge les miniatures ("images en vedette") prêtes à l'emploi. Pour tirer parti de cette fonctionnalité, il vous suffit d'ajouter quelques lignes dans functions.php:
add_theme_support ('post-vignettes'); set_post_thumbnail_size (70, 70); La première ligne indique à WordPress que votre thème prend en charge les vignettes, tandis que la seconde force la taille de la vignette à 70x70px, pour éviter de casser votre mise en page avec des vignettes de tailles différentes. En outre, vous pouvez choisir la stratégie de redimensionnement. L’exemple ci-dessus ne fera que redimensionner l’image, tandis que
set_post_thumbnail_size (70, 70, TRUE);
rognera également l'image pour l'adapter au rapport donné. Vous pouvez également rendre disponibles des tailles de vignettes supplémentaires, pour les utiliser dans différentes zones du site:
add_image_size ('big-thumb', 500, 500); À présent,
the_post_thumbnail ();
affiche une miniature 70x70 et
the_post_thumbnail ('big-thumb'); affiche une vignette 500x500.
WordPress 3.0 a introduit les menus personnalisés attendus depuis longtemps, il est donc temps que vos utilisateurs profitent de cette fonctionnalité. Après avoir enregistré le support de thème, comme suit:
register_nav_menu ('main_nav', __ ('Menu de navigation principal', 'Mytheme')); … Vous pouvez afficher un menu personnalisé avec wp_nav_menu ():
wp_nav_menu (array ('theme_location' => 'main_nav')); Soyez prudent, car le système vous permet d'insérer des éléments imbriqués, ce qui peut entraîner des résultats étranges si vous ne les planifiez pas..
Même si vous fournissez des menus déroulants ou des menus de style barre de navigation, il est difficile d’afficher élégamment plus de niveaux de navigation. Pour protéger votre mise en page, choisissez un niveau en dessous duquel tous les éléments seront identiques ou désactivez l'affichage des niveaux inférieurs. Par exemple, pour limiter l'affichage à deux niveaux, utilisez:
wp_nav_menu (tableau ('profondeur' => 2)); Ceci est une nouvelle fonctionnalité de WordPress 3.0, et c'est aussi la plus simple à implémenter. C'est littéralement une ligne:
add_custom_background ();
C'est tout! Les utilisateurs peuvent maintenant choisir l’arrière-plan personnalisé de leur choix:
Dans le même esprit, mais avec un peu plus d'effort, vous pouvez permettre de changer l'arrière-plan de l'en-tête du site, ainsi que la couleur du titre du site. Cette fonctionnalité ne fonctionnera que si vous commencez par définir un ensemble de constantes. Remplacez 'yourwidth' et 'yourheight' par les mesures correspondant à votre thème:
define ('HEADER_TEXTCOLOR', '000'); define ('HEADER_IMAGE', get_bloginfo ('stylesheet_directory'). 'chemin / vers / votre / image'); define ('HEADER_IMAGE_WIDTH', 'votre largeur'); define ('HEADER_IMAGE_HEIGHT', 'votre hauteur'); Une fois que cela est en place, vous devez écrire la fonction qui appliquera l’arrière-plan à votre en-tête. Comme il n’existe pas de balisage standard pour un en-tête de site, WordPress ne peut pas deviner comment appliquer le code CSS requis pour vous. Par exemple, pour ajouter un arrière-plan personnalisé à la div avec l'id 'header', procédez comme suit:
Vous devez également créer une fonction, par exemple mytheme_admin_preview_header (), pour attribuer un style au volet de visualisation de l’administrateur afin qu’il corresponde au résultat final. La zone d'aperçu a l'identifiant #headimg, tandis que le titre du site et la description du site ont les identifiants #name et #desc. Expérimentez avec l'aperçu jusqu'à ce que vous soyez satisfait. Enfin, pour permettre au Apparence> En-tête panneau, appelez:
add_custom_image_header ('mytheme_header_image', 'mytheme_admin_preview_header'); Tout le monde ne souhaite pas que son blog soit affiché en anglais. Enveloppez chaque chaîne que les utilisateurs doivent lire avec le __ () si vous souhaitez le traduire, ou _e () si vous souhaitez également le renvoyer, comme:
__ ('Hello', 'mytheme') _e ('Hello', 'mytheme') // Affiche également la chaîne traduite. Le deuxième argument doit être un identifiant unique pour votre thème, afin que différentes traductions n'entrent pas en conflit.
Une fois que chaque chaîne est encapsulée dans une fonction de traduction, vous devez utiliser le makepot.php scénario. La méthode recommandée pour obtenir ce script consiste à installer Subversion, puis à exécuter:
svn co http://svn.automattic.com/WordPress-i18n/tools/trunk
Vous obtiendrez un répertoire, nommé 'trunk' contenant, entre autres, makepot.php.
Le script est exécuté comme ça
php makepot.php wp-theme mytheme
mon thème est le chemin d'accès à votre répertoire de thème. Vous obtiendrez un fichier nommé mytheme.pot, prêt à être utilisé dans un programme, tel que Poedit, pour produire un fichier. .po fichier contenant une traduction.
Pour finir, vous devez indiquer à WordPress où se trouvent les traductions dans votre répertoire de thèmes, par exemple:
load_theme_textdomain ('mytheme', TEMPLATEPATH. '/ languages'); Ici, 'mytheme' est l'identifiant unique de votre thème; le deuxième argument indique où sont les fichiers de traduction. TEMPLATEPATH est une constante spéciale définie par WordPress qui pointe toujours vers le répertoire du thème actuel..
Celui-ci est un peu optionnel, car vous pouvez laisser cela à la discrétion des utilisateurs ou des autres développeurs. Vous saurez que WordPress prend en charge l’ajout de champs personnalisés à chaque publication. Dans de nombreux thèmes, ces champs ne s'affichent généralement pas du tout, sauf s'ils sont utilisés pour une fonction spéciale. Certains utilisateurs peuvent être déroutés, car ils pensent pouvoir utiliser des champs personnalisés pour générer les informations souhaitées..
Il y a une fonction,
the_meta ()
à appeler dans The Loop, qui affiche tous les champs personnalisés attachés à une publication, sous forme de liste non ordonnée sous la forme clé: valeur. Certes, ce n'est pas très utile, mais il vaut peut-être mieux laisser quelqu'un se demander pourquoi les champs personnalisés ne sont affichés nulle part.
L'une des difficultés de la thématisation d'un système dynamique, tel que WordPress, réside dans le fait qu'il existe de nombreux cas marginaux qui ne se produisent pas trop souvent, mais qui peuvent quand même gâcher l'apparence du site. Pensez aux publications avec des commentaires fermés ou avec des corps très courts. Assurez-vous qu'aucun espace étrange ne se glisse ou que des éléments ne sont pas mélangés car quelque chose ne s'affiche pas. La section de commentaire peut ne pas s'afficher si les commentaires ne sont pas autorisés ou un champ de saisie du mot de passe peut remplacer le contenu habituel de la publication lorsque celle-ci est protégée par un mot de passe..
Essayez également de faire correspondre les commentaires avec le corps principal. Ce dernier point nécessite une attention particulière, car, en règle générale, l'espace réservé aux commentaires est plus limité - en particulier lors de l'utilisation de commentaires filetés et chaque réponse est décalée à droite (ou à gauche, pour RTL)..
WordPress.org propose un exemple de fichier de contenu que vous pouvez importer dans votre installation WordPress, qui contient un assortiment d'articles, de pages et d'images de test..
Pour importer le fichier dans WordPress 3.0, vous devez d'abord installer le plug-in WordPress Importer. Alors choisi Outils> Importer> WordPress. Assurez-vous de cocher la case "Télécharger et importer les pièces jointes" lorsque vous y êtes invité. Sinon, vous n'obtiendrez pas les images associées à certains exemples de publications..
Une fois l’importation terminée, vous pouvez utiliser cette liste de contrôle pour déterminer si le contenu s’affiche comme il se doit..
Nous avons appris que les choses à surveiller sont multiples. Certaines sont des fonctionnalités rarement utilisées, d’autres sont des possibilités de personnalisation, alors que d’autres ressemblent davantage à des problèmes de conception courants, qui se répètent avec tous les sites WordPress que vous concevez. Notre liste est loin d’être exhaustive, nous souhaitons donc vous entendre dans les commentaires! Quelles sont selon vous les fonctionnalités les plus souvent oubliées??
