Conception de la page WordPress: Modèles de pages Shortcodes V

Personnalisation du thème WordPress: comparaison du modèle de page et du code court

WordPress a une position dominante dans la conception Web avec ses fonctionnalités puissantes et sa flexibilité. De nombreuses conceptions de pages étonnantes sont dérivées des capacités de personnalisation du thème de WordPress, et les modèles de pages et les shortcodes jouent un rôle clé. Cet article explorera ces deux technologies en profondeur pour vous aider à choisir celui qui convient le mieux à vos besoins.

Points de base

• WordPress implémente principalement la conception de la page personnalisée via des modèles de page et des codes courts. Les modèles de page sont utilisés pour afficher les catégories, les articles et les pages dans le sujet par défaut; les codes courts sont des extraits de code réutilisables qui fournissent des fonctionnalités complexes et des options d'affichage.
• Lorsque vous devez personnaliser la page entière, vous devez donner la priorité au modèle de page;
• Les codes courts sont plus efficaces lorsque plusieurs pages nécessitent le même modèle de conception. L'ajout de shortcodes au plugin rend les modèles compatibles avec plusieurs thèmes.
• Choisissez un code court ou un modèle de page dépend de facteurs tels que la réutilisabilité, la dépendance, la portabilité et la facilité d'utilisation. Les codes courts conviennent à plusieurs fins, indépendamment des sujets;

Comment travailler dans la conception personnalisée

Chaque thème a son propre mécanisme pour implémenter la conception de page personnalisée. Il existe deux technologies principales:

Modèle de page

La rubrique par défaut contient des types de pages spécifiques utilisés pour afficher les catégories, les articles et les pages. Nous pouvons ajouter notre propre conception de pages à l'aide de modèles de page WordPress. Définissez simplement le nom du modèle en haut de la page. Le code suivant contient un modèle de page de base:

<?php
/*
Template Name: 我的自定义模板
*/
get_header();
?>

    <!-- 内容 -->

<?php get_sidebar(); ?>

<?php get_footer(); ?>

Après avoir défini un modèle, vous pouvez l'affecter à la page nouvellement ajoutée comme indiqué dans la figure suivante:

Code court

Les codes courts sont des extraits de code réutilisables qui agissent comme des raccourcis qui fournissent des fonctionnalités complexes et des options d'affichage. En règle générale, les modèles de conception de code court sont placés dans l'éditeur de page, et vous pouvez ajouter ou modifier les données nécessaires pour générer une conception personnalisée. L'image suivante montre un code court pour créer une conception d'onglet:

Les deux méthodes ont leurs propres avantages et inconvénients. Le défi pour les développeurs WordPress est de choisir la bonne méthode pour différentes situations. Les développeurs inexpérimentés ont tendance à abuser des deux techniques, nous devons donc considérer ce qui suit avant de choisir un code ou un modèle de page court pour fournir une conception personnalisée.

Comment intégrer la conception personnalisée dans la page?

Une page WordPress normale contient plusieurs sous-tempates telles que l'en-tête, la barre latérale, le contenu et le pied de page. Tout d'abord, jetons un coup d'œil à la structure de la page Web en utilisant l'écran suivant:

La page doit contenir l'en-tête, le pied de page et le contenu. La barre latérale est facultative et nous pouvons l'aligner à droite ou à gauche en fonction de nos préférences. Maintenant, voyons comment les conceptions personnalisées créées avec des codes et des modèles de page s'insèrent dans les pages ci-dessus.

Les codes courts peuvent être insérés dans l'éditeur de contenu dans la zone de création de la page du panneau d'administration. Par conséquent, toute conception générée à partir du code court ne s'applique qu'au contenu de la page. À moins que nous ne personnalisons le fichier de modèle, nous ne pouvons pas utiliser de code court pour créer des conceptions personnalisées pour l'en-tête, le pied de page et la barre latérale. Les modèles de page sont placés dans le sujet en tant que fichiers séparés. Par conséquent, nous pouvons personnaliser le fichier de modèle de page et ajouter un type de conception différent à chacun des quatre composants affichés dans l'écran ci-dessus.

Conclusion

Si vous avez besoin de personnaliser la page entière, vous devez hiérarchiser le modèle de page. Les codes courts conviennent pour ajouter des conceptions personnalisées à la zone de contenu principale.

Remplissez les données dans la conception personnalisée

Les développeurs de thème ne peuvent pas simplement créer des modèles avec des exemples de données, puis demander aux utilisateurs de gérer leurs propres données en modifiant le fichier source. WordPress est un système de gestion de contenu où les utilisateurs devraient pouvoir utiliser la zone de gestion pour remplir des données dans des conceptions personnalisées. WordPress offre la possibilité d'ajouter des données dynamiques à une page à l'aide de champs personnalisés. Cependant, les utilisateurs non techniques ne connaissent pas l'ajout de clés et de valeurs nécessaires aux champs personnalisés. Par conséquent, la plupart des concepteurs de thème utilisent le panneau Options du thème pour remplir des données dans des modèles de page prédéfinis. L'inconvénient de cette méthode est que chaque modèle de page ne peut avoir qu'une seule page. Autoriser les données sur plusieurs pages rendra le panneau d'option très complexe et difficile à gérer. Voici l'exemple du panneau d'options pour remplir des données sur la page d'accueil:

En revanche, il est beaucoup plus facile de remplir les données avec des codes courts. Dans l'éditeur TinyMCE, nous pouvons créer des boutons personnalisés pour insérer des codes courts. Après avoir cliqué sur le bouton, le code court sera placé dans l'éditeur de page et vous pouvez remplir le code court avec les données nécessaires au besoin. L'image suivante montre un éditeur de contenu avec des boutons shortcode pour générer des conceptions personnalisées:

Il s'agit de la méthode la plus couramment utilisée et efficace. Nous pouvons créer plusieurs pages en utilisant le même modèle de conception de raccourcis et remplir des données pertinentes que les attributs.

Conclusion

Les codes courts sont plus efficaces lorsque vous devez utiliser le même modèle de conception sur plusieurs pages.

Ajouter des conceptions personnalisées aux thèmes existants

Les thèmes avancés contiennent généralement un ensemble de modèles de page intégrés ou de conceptions de pages personnalisées. Mais supposons que nous voulons créer un nouveau modèle de conception qui n'est pas disponible par défaut. Examinons les solutions possibles à l'aide de shortcodes et de modèles de page.

Modèle de page

Nous pouvons créer un nouveau design comme modèle de page et le copier dans le dossier du thème pour fonctionner immédiatement. Chaque modèle de page est placé dans le dossier de thème actif. Une fois que nous modifions le thème, tout le contenu en utilisant notre nouvelle page de conception se bloque car il n'y a pas de modèle pour cette page dans le nouveau thème.

Code court

Dans ce cas, nous pouvons créer le nouveau design en tant que shortcode et l'utiliser pour les plugins au lieu de l'inclure dans le fichier de thème, ce qui nous permet de l'utiliser comme shortcode sur plusieurs thèmes.

Conclusion

Chaque fois que vous avez besoin d'un nouveau modèle de conception, créez un code court dans le plugin pour rendre le modèle compatible avec plusieurs thèmes.

Comment choisir les codes courts et les modèles de page

Dans la section précédente, nous avons discuté de trois aspects différents à considérer lors de la sélection d'un code court ou d'un modèle de page. Examinons maintenant certaines directives courantes pour nous assurer que nous utilisons ces technologies efficacement.

réutilisabilité

Les codes courts sont plus adaptés lorsque vous souhaitez utiliser le même modèle plusieurs fois. Les modèles de page conviennent plus à une seule page statique. Des pages telles que la page d'accueil, à peu près, sont utilisées comme pages indépendantes dans la plupart des cas. Par conséquent, les modèles de page conviennent à ces pages. Il est préférable de créer des pages dynamiques telles que les services, les portefeuilles, les projets, etc. comme modèles de raccourcis.

dépendance

Les shortcodes peuvent être utilisés comme composants indépendants du thème, tandis que les modèles de page reposent sur des thèmes et des styles. Si vous créez un modèle de conception commun, assurez-vous de le créer en tant que shortcode dans le plugin pour le rendre compatible avec les thèmes croisés.

porabilité

Les modèles de code court sont plus faciles à porter que les modèles de page. Vous pouvez placer les shortcodes n'importe où sur la page et peut être utilisé plusieurs fois. D'un autre côté, vous avez besoin d'une page complète pour utiliser la conception du modèle de page.

facile à utiliser

Les modèles de page sont fournis par le sujet. En tant qu'utilisateur, il vous suffit de sélectionner un modèle de page pour une page donnée. Le code court et les données nécessaires sont placés dans l'éditeur de contenu de la page. Par conséquent, il y a de fortes chances que vous supprimez le contenu par erreur. Dans ce cas, toutes les données avec une conception complète seront perdues. Par rapport aux codes courts, les modèles de page sont permanents et non sujets aux erreurs. Par conséquent, du point de vue d'un utilisateur, les modèles de page sont plus faciles et plus sûrs à utiliser.

Conclusion globale

Il n'y a pas de conclusion claire sur quelle méthode de conception de modèle personnalisée est meilleure. Dans la plupart des cas, cela dépend de la combinaison de divers facteurs mentionnés dans cet article. Vous devez prêter attention à la situation spécifique et choisir la méthode qui convient le mieux à la situation spécifique.

J'espère que mon analyse vous aidera à mieux comprendre la différence entre l'utilisation de codes courts et de modèles de pages, et quelle méthode est la meilleure pour votre propre conception de page personnalisée. Vous devriez maintenant pouvoir sélectionner un modèle de shortcode ou de page pour les trois scénarios suivants:

1. Concevez une page à 3 colonnes sans barre latérale
2. Concevoir une page publicitaire pour votre blog
3. Concevoir une liste de prix pour afficher les prix des packages pour différents produits et services

Au plaisir de partager vos réponses et raisons dans la section des commentaires.

FAQ de conception de page WordPress: codes courts et modèle de page

• Quelles sont les principales différences entre les codes courts et les modèles de page dans WordPress?

Les codes courts et les modèles de page dans WordPress sont utilisés différemment. Les codes courts sont de petits morceaux de code qui peuvent être insérés dans vos messages et pages pour ajouter des fonctionnalités ou des éléments de conception spécifiques, tels que des boutons, des formulaires ou des curseurs. Les modèles de page, en revanche, sont des fichiers qui déterminent la disposition et la conception de pages ou de groupes de pages spécifiques sur un site Web WordPress. Ils peuvent être utilisés pour créer des dispositions uniques pour différentes parties d'un site Web, telles que des pages de portefeuille, des pages de blog ou des pages de contact.

• Comment créer des modèles de page personnalisés dans WordPress?

Pour créer un modèle de page personnalisé dans WordPress, vous devez créer un nouveau fichier PHP dans le répertoire de thème. Vous pouvez nommer ce fichier comme vous le souhaitez, mais il devrait se terminer avec ".php". En haut de ce fichier, vous devez inclure un commentaire que WordPress utilisera pour identifier ce fichier comme modèle de page. Ce commentaire devrait ressembler à ceci: /* Template Name: 我的自定义页面 */. Après cela, vous pouvez ajouter toutes les fonctions HTML, PHP ou WordPress que vous souhaitez utiliser dans le modèle.

• Puis-je utiliser les shortcodes dans mon modèle de page personnalisé?

Oui, vous pouvez utiliser des codes shortcodes dans des modèles de page personnalisés. Pour ce faire, vous devez utiliser la fonction do_shortcode fournie par WordPress. Cette fonction vous permet d'exécuter du code court dans un fichier PHP. Par exemple, si vous avez un shortcode qui affiche un formulaire de contact, vous pouvez l'inclure dans votre modèle de page comme ceci: echo do_shortcode('[contact-form]');.

• Comment attribuer des modèles de page personnalisés aux pages dans WordPress?

Pour attribuer un modèle de page personnalisé à une page dans WordPress, vous devez modifier la page à laquelle vous souhaitez attribuer un modèle. Dans l'éditeur de page, recherchez la zone Propriétés de la page à droite. Dans cette case, vous verrez un menu déroulant marqué "modèle". Cliquez sur ce menu et sélectionnez le modèle que vous souhaitez utiliser. Ensuite, enregistrez vos modifications et affichez votre page pour voir le nouveau modèle.

• Puis-je utiliser à la fois des codes shortcodes et des modèles de page sur la même page?

Oui, vous pouvez utiliser à la fois les raccourcis et les modèles de page sur la même page. Vous pouvez insérer des codes courts dans le contenu de la page et utiliser des modèles de page pour contrôler la disposition globale et la conception de la page. Cela vous offre beaucoup de flexibilité dans la conception et la construction de pages.

• Quelles sont les restrictions sur l'utilisation de codes courts ou de modèles de page?

La principale limitation de l'utilisation de codes courts est que si vous avez de nombreux codes courts sur votre site Web, ils peuvent parfois être difficiles à gérer. Si vous modifiez le thème ou désactivez le plugin qui fournit des shortcodes, le shortcode ne fonctionnera plus et sera visible sur votre site Web. Les modèles de page, en revanche, sont spécifiques au sujet. Si vous modifiez le thème, vous devez recréer le modèle de page dans le nouveau thème.

• Puis-je créer un modèle de page personnalisé sans écrire de code?

Oui, il existe plusieurs plugins WordPress qui vous permettent de créer des modèles de page personnalisés sans écrire de code. Ces plugins fournissent une interface glisser-déposer que vous pouvez utiliser pour concevoir des modèles de page. Certaines options populaires incluent Elementor, Beaver Builder et Divi.

• Comment mettre à jour les modèles de page personnalisés?

Pour mettre à jour le modèle de page personnalisé, vous devez modifier le fichier PHP du modèle dans le répertoire de thème. Apporter les modifications requises et enregistrer le fichier. Des modifications seront appliquées à toutes les pages à l'aide du modèle.

• Puis-je utiliser des shortcodes dans mon gadget?

Oui, vous pouvez utiliser des codes courts dans vos gadgets. Pour ce faire, ajoutez simplement le widget texte à votre zone de widget et insérez votre raccourci dans la zone de contenu du widget.

• Comment créer des shortcodes dans WordPress?

Pour créer un code court dans WordPress, vous devez ajouter la fonction au fichier functions.php du thème ou au plugin personnalisé. Cette fonction doit utiliser la fonction add_shortcode fournie par WordPress pour enregistrer de nouveaux codes short. La fonction add_shortcode prend deux paramètres: le nom du code court et la fonction de rappel qui définit la fonction de code court.

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!