Accentsconagua
Zone de texte: ". $ Textarea."
"; écho "Case à cocher: ". $ Case à cocher."
"; écho "Boutons radio: ". $ Radio."
"; écho "Liste déroulante: ". $ Select."
"; écho "Plan du site
"; écho "- ". wp_list_pages (array ('title_li' =>")). "
Share
Dans la première partie de cette série de didacticiels, j’ai introduit le concept de base des modèles de page dynamiques et créé un modèle de page standard qui servira de base aux travaux futurs. Un thème enfant WordPress basé sur le thème parent Twenty Seventeen a été utilisé pour implémenter le modèle de page.
Dans ce tutoriel, vous allez apprendre plus de détails sur les modèles de page dynamiques et comment les utiliser dans vos propres projets WordPress..
Je vous montrerai également, étape par étape, comment étendre le modèle de page à partir du premier tutoriel et le transformer en votre tout premier modèle de page dynamique fonctionnel.!
Alors, comment rendre les modèles de page plus flexibles, et pourquoi cela serait-il utile de toute façon??
Supposons que vous disposiez d'un modèle de page de portefeuille générant une galerie d'éléments de portefeuille individuels. Chaque article aurait une taille fixe, et seul un nombre suffisant pourrait tenir sur chaque rangée.
Nous pourrions bien sûr ajouter un autre modèle de page pour afficher des portefeuilles de différentes tailles. Mais que faire si nous voulions montrer des portefeuilles petits, moyens ou grands? Pour cela, nous aurions besoin de trois modèles de page distincts, chacun ayant des tailles différentes pour les éléments de portefeuille..
Cela pourrait être instantanément rendu plus flexible en ajoutant un contrôle déroulant pour sélectionner la taille du portefeuille (c'est-à-dire, petit, moyen ou grand). Ceci est plus pratique pour l'utilisateur car la boîte de modèle de page est moins encombrée de choix inutiles..
Cela a également plus de sens pour le développeur, qui n'a qu'un seul modèle de page à gérer plutôt que trois! Ceci suit le principe de développement du logiciel Don't Repeat Yourself (DRY).
Il est à noter que tous les modèles de page ne bénéficieraient pas nécessairement d'être dynamiques. Si vous avez un modèle de page qui fait une chose, et une seule chose, alors tout va bien. Dans ce cas, cela n'aurait aucun sens d'ajouter des contrôles personnalisés et une logique supplémentaire à un modèle de page..
Mais comme vous le verrez à la fin de ce didacticiel, de nombreux modèles de page gagneraient à être plus flexibles..
Un autre exemple utile pour un modèle de page dynamique serait un formulaire de contact. De nombreux contrôles personnalisés peuvent être ajoutés pour rendre ce modèle de page extrêmement flexible..
Par exemple, plutôt que de générer un ensemble fixe de champs de formulaire, des contrôles de modèle de page pourraient être ajoutés pour vous permettre d’omettre certains champs. Ou peut-être qu'un champ Captcha pourrait éventuellement être affiché pour empêcher la soumission de formulaires de spam? Il y a tellement de façons de personnaliser un formulaire de contact..
Je vais créer un modèle de page de formulaire dynamique dans la partie 3 de cette série de didacticiels. Mais commençons par la création d’un modèle de page dynamique à usage général.
Pour commencer, nous allons créer un gabarit de page dynamique de base pour montrer comment toutes les composantes s'emboîtent. Des contrôles personnalisés seront ajoutés à l'éditeur de page, qui seront utilisés ultérieurement pour contrôler la sortie du modèle de page..
Les contrôles de modèle de page personnalisés que nous allons ajouter prochainement sont les suivants:
Idéalement, les contrôles doivent être ajoutés directement sous la zone de liste déroulante des modèles de page pour indiquer qu'ils sont liés à un modèle de page..
Cependant, WordPress ne fournit aucun accroc pour cela, vous devrez donc vous contenter (pour le moment) d’ajouter des contrôles de modèle de page personnalisés à une zone de méta personnalisée. Dans la troisième partie de cette série de didacticiels, je vais vous montrer comment résoudre ce problème..
Les crochets sont essentiels au développement de WordPress. Ils permettent aux développeurs d'étendre la base de code sans avoir à recourir à l'édition de fichiers de base, ce qui est généralement considéré comme une mauvaise idée. En effet, tout code personnalisé serait effacé chaque fois qu'une mise à jour WordPress est effectuée (ce qui peut se produire assez régulièrement)..
Pour afficher notre méta-boîte sur l'écran de l'éditeur de page, ajoutez le load-post.php et load-post-new.php accroche au thème de l'enfant init () méthode que nous avons créée dans la première partie.
Nous utilisons deux crochets WordPress pour nous assurer que la boîte de méta s’affiche dans l’éditeur de pages, que vous créiez une nouvelle page ou en modifiiez une existante. Il y a aussi
save_postcrochet qui gère la sauvegarde des méta-données postales, que je couvrirai un peu plus tard.Ajoutez les quatre méthodes de classe suivantes pour créer, afficher et enregistrer des données pour la boîte méta.
/ * Ajout d'un crochet de méta-boîte. * / fonction publique page_template_meta_box () add_action ('add_meta_boxes', array ($ this, 'add_page_template_meta_box'));/ * Enregistrer la méta-boîte. * / fonction publique add_page_template_meta_box () add_meta_box ('page-template-meta-box', esc_html __ ('Modèle de méta-boîte de page', 'vingt-dix-sept ans-enfant'), tableau ($ this, 'display_page_template_meta_box'), 'page ',' side ',' default ');/ * Rend la méta-boîte sur l'éditeur de page. * / fonction publique display_page_template_meta_box ($ object) wp_nonce_field (nom_base (__FILE__), 'page_template_meta_box_nonce');Je n'entrerai pas dans les détails ici sur les méta-boîtes WordPress, car il pourrait s'agir d'un didacticiel complet, mais notez les points suivants concernant le code que j'ai ajouté ci-dessus:
page_template_meta_box () et add_page_template_meta_box () les méthodes de classe enregistrent la meta box avec WordPress.add_page_template_meta_box (), la 'page' paramètre spécifie que cette méta-boîte ne sera affichée que sur l'éditeur de type de publication 'page' dans l'administrateur WordPress.display_page_template_meta_box () La méthode class rend la boîte méta et crée un nonce pour sécuriser davantage les contrôles de formulaire.Si tout va bien, vous devriez maintenant avoir une boîte de méta affichée sur l'éditeur de page, comme indiqué ci-dessous.
C'est un peu vide pour le moment, ajoutons donc quelques contrôles.
Si vous vous rappelez d'en haut, nous allons ajouter une zone de texte, une zone de texte, une case à cocher, un bouton radio et des contrôles de zone de sélection à la boîte de méta. Commencez par ajouter le code suivant à la display_page_template_meta_box () méthode sous la fonction nonce.
ID, 'page_template_text', true); $ textarea = get_post_meta ($ object-> ID, 'page_template_textarea', true); $ checkbox = get_post_meta ($ object-> ID, 'page_template_chk', true); $ radio = get_post_meta ($ object-> ID, 'page_template_radio', true); $ select = get_post_meta ($ object-> ID, 'page_template_select', true);
Ceci récupère les valeurs actuelles de nos contrôles meta box et les stocke dans des variables locales. Maintenant, ajoutez le code HTML suivant directement après, pour rendre les contrôles de la boîte méta.
?>
/>
>
>
>
Chaque contrôle est contenu dans une balise de paragraphe et sa valeur actuelle est mise à jour via la variable locale créée précédemment. Cela garantit que les contrôles de la boîte méta affichent toujours les paramètres corrects.
Cependant, cela ne se produira que si nous sauvegardons les données de contrôle de la méta-boîte actuelle dans la base de données WordPress..
Un peu plus tôt, j'ai enregistré un hook pour exécuter une méthode de classe chaque fois que l'éditeur de page était mis à jour. Ajoutons cette méthode à notre classe de thème enfant maintenant.
post_type) return $ post_id; $ page_template_text_value = isset ($ _POST ['page-template-text'])? $ _POST ['page-template-text']: "; update_post_meta ($ post_id, 'page_template_text', $ page_template_text_value); $ page_template_textarea_value = $ _POST ['page-template-textarea'])? $ _POST [' -template-textarea ']: "; update_post_meta ($ post_id, 'page_template_textarea', $ page_template_textarea_value); $ page_template_chk_value = isset ($ _POST ['page-template-chk'])? $ _POST ['page-template-chk']: "; update_post_meta ($ post_id, 'page_template_chk', $ page_template_chk_value); $ page_template_radio_value = isset ($ _POST ['page-template-align'])? $ _POST ['page -template-align ']: "; update_post_meta ($ post_id, 'page_template_radio', $ page_template_radio_value); $ page_template_select_value = isset ($ _POST ['page-template-select'])? $ _POST ['page-template-select']: "; update_post_meta ($ post_id, 'page_template_select', $ page_template_select_value);le
save_page_template_meta ()La méthode class gère l'enregistrement des données de contrôle de la boîte à méta. Il enregistre uniquement les données de la boîte à méta si le nonce est vérifié, les utilisateurs actuels peuvent modifier les publications, et nous sommes sur l'écran administrateur de l'éditeur de page.Si ces conditions sont remplies, nous extrayons les données pour chaque contrôle qui sont stockées dans le fichier global.
$ _POSTvariable. Cette variable est définie chaque fois qu'un formulaire est soumis.Enfin, les données de contrôle de la méta-boîte sont enregistrées dans la base de données WordPress en tant que méta-données pour la page en cours..
Avec les contrôles de modèles de page personnalisés ajoutés, notre boîte méta devrait ressembler à ceci.
Saisissez du texte pour la zone de texte et la zone de texte, puis effectuez des sélections pour la case à cocher, le bouton radio et la zone de sélection. Appuyez sur update pour enregistrer vos modifications, et lorsque l’éditeur de page sera rechargé, vos contrôles de boîte méta devraient afficher les données que vous venez de saisir..
Le code source complet du fichier functions.php du thème enfant est présenté ci-dessous..
ID, 'page_template_text', true); $ textarea = get_post_meta ($ object-> ID, 'page_template_textarea', true); $ checkbox = get_post_meta ($ object-> ID, 'page_template_chk', true); $ radio = get_post_meta ($ object-> ID, 'page_template_radio', true); $ select = get_post_meta ($ object-> ID, 'page_template_select', true); ?>post_type) return $ post_id; $ page_template_text_value = isset ($ _POST ['page-template-text'])? $ _POST ['page-template-text']: "; update_post_meta ($ post_id, 'page_template_text', $ page_template_text_value); $ page_template_textarea_value = $ _POST ['page-template-textarea'])? $ _POST [' -template-textarea ']: "; update_post_meta ($ post_id, 'page_template_textarea', $ page_template_textarea_value); $ page_template_chk_value = isset ($ _POST ['page-template-chk'])? $ _POST ['page-template-chk']: "; update_post_meta ($ post_id, 'page_template_chk', $ page_template_chk_value); $ page_template_radio_value = isset ($ _POST ['page-template-align'])? $ _POST ['page -template-align ']: "; update_post_meta ($ post_id, 'page_template_radio', $ page_template_radio_value); $ page_template_select_value = isset ($ _POST ['page-template-select'])? $ _POST ['page-template-select']: "; update_post_meta ($ post_id, 'page_template_select', $ page_template_select_value); $ ts_child_theme = new DPT_Twenty_Seventeen_Child (); $ ts_child_theme->;
/>
>
>
>
La dernière pièce du puzzle consiste à utiliser les données de contrôle de la boîte à méta dans notre modèle de page au recto. Ouvrez le
test-page-template.phpfichier que nous avons créé dans la partie 1 et remplacer le contenu par ce code mis à jour.Zone de texte: ". $ Text.""; écho " Zone de texte: ". $ Textarea."
"; écho "Case à cocher: ". $ Case à cocher."
"; écho "Boutons radio: ". $ Radio."
"; écho "Liste déroulante: ". $ Select."
"; écho "Plan du site
"; écho "". wp_list_pages (array ('title_li' =>")). "
"; endwhile; // Fin de la boucle.?>Assurez-vous que le "Modèle de page de test" est le modèle de page actuellement sélectionné et affichez la page au recto.
Comme vous pouvez le constater, le modèle de page inclut désormais les valeurs qui viennent d'être définies pour les contrôles de la boîte méta dans l'éditeur de page. C’est au cœur du reste du didacticiel, car nous allons nous baser sur cet exemple élémentaire pour créer divers exemples de modèles de page dynamiques pleinement opérationnels que vous pouvez utiliser dans vos propres projets WordPress..
Conclusion
Dans ce tutoriel, nous avons expliqué comment créer un modèle de page dynamique fonctionnel. Pour le moment, même s'il est fonctionnel, notre modèle de page de base n'est pas très utile.
Dans la troisième et dernière partie de cette série de didacticiels, je vais vous montrer comment créer, du début à la fin, différents modèles de page dynamiques que vous pouvez utiliser (et développer) dans vos propres projets WordPress..
Si vous avez des questions, s'il vous plaît laissez-moi un message dans les commentaires ci-dessous. J'aimerais entendre vos commentaires sur le tutoriel.
