Modèles de page dynamiques dans WordPress, partie 3

Dans les deux premières parties de cette série de didacticiels, nous avons expliqué quels étaient les modèles de page dynamiques et pourquoi ils étaient nécessaires. Nous avons également examiné le code requis pour les implémenter. 

Dans ce troisième et dernier tutoriel de la série, je vais créer deux exemples de modèles de page dynamiques entièrement fonctionnels que vous pouvez utiliser dans vos propres projets. Ceux-ci ont été spécifiquement choisis pour être facilement extensibles pour répondre à vos propres besoins, et sont conçus comme une inspiration pour tout autre type de modèles de page dynamiques auxquels vous pouvez penser..

Les deux modèles de page dynamiques que nous allons examiner prochainement sont les suivants:

• Formulaire de contact simple
• Archives d'articles de blog

En plus d'implémenter nos modèles de page, je vais également vous montrer comment ajouter du vernis supplémentaire, via CSS et JavaScript personnalisés, pour rendre l'interaction beaucoup plus intuitive pour les utilisateurs finaux..

De plus, nous verrons comment utiliser les modèles de page pour tout Type de poste. Depuis WordPress 4.7, vous pouvez spécifier le type de publication auquel un modèle de page est associé. Nous verrons comment vous pouvez modifier un modèle de page dynamique existant pour tirer parti de cette nouvelle fonctionnalité afin qu'elle fonctionne avec n'importe quel type de publication..

Nous avons beaucoup à couvrir dans ce tutoriel, alors commençons!

Configuration du thème

Nous utiliserons à nouveau un thème pour enfants WordPress Twenty Seventeen, comme nous l'avons fait dans la partie 2 de cette série de didacticiels, pour ajouter notre code de modèle de page dynamique. Commençons par un thème enfant vierge.

Créez un dossier de thème enfant appelé vingt-sept enfant et ajoutez les fichiers suivants:

• functions.php
• style.css

À l'intérieur style.css, ajouter:

/ * Nom du thème: Twenty Seventeen Child Description: Twenty Seventeen Child Auteur: David Gwyer Modèle: vingtseventeen Version: 0.1 Licence: GNU General Public License v2 ou version ultérieure URI de la licence: http://www.gnu.org/licenses/gpl- 2.0.html Domaine de texte: vingt-dix-sept ans * /

Et à l'intérieur functions.php, ajouter:

init (); 

Ajoutez le thème enfant à votre répertoire de thèmes WordPress, comme nous le faisions auparavant. Si vous ne savez pas comment procéder, reportez-vous à la deuxième partie de cette série de didacticiels..

Nous avons maintenant un thème enfant (vide) prêt pour que nous puissions ajouter notre code de modèle de page dynamique à.

Modèle de page de formulaire dynamique

Notre première implémentation réelle d'un modèle de page dynamique est un simple formulaire de contact. Nous ajouterons les champs suivants:

• Titre
• prénom
• Assujettir
• Email
• Numéro de téléphone

Ce sont des champs de saisie de texte, à part l'en-tête, qui est une balise d'en-tête HTML standard..

Avant d'implémenter le modèle de page proprement dit, nous devons toutefois ajouter à l'éditeur de page des contrôles personnalisés nous permettant de modifier la sortie du modèle de page. Ensuite, lors de la création du modèle de page, il sera rendu conformément aux paramètres de contrôle de l'éditeur de page..

Dans la partie 2 de cette série de tutoriels, j'ai mentionné qu'il n'y avait pas de moyen facile d'ajouter des contrôles personnalisés directement à la boîte de méta "Attributs de page", où se trouve la liste déroulante du modèle de page..

Cela signifie que nous devons ajouter nos contrôles de modèles de page dynamiques ailleurs pour le moment. Je vais vous montrer un peu plus tard comment contourner cette limitation, avec un peu de magie CSS et JavaScript. Mais pour le moment, nous devrons nous contenter d’ajouter nos contrôles personnalisés à une méta-boîte séparée..

dans le DPT_Twenty_Seventeen_Child classe, enregistrez deux nouveaux crochets d’action dans le init méthode, et une nouvelle méthode appelée page_template_meta_boxes.

le load-post.php et load-post-new.php les crochets d'action sont exécutés chaque fois qu'une publication (de tout type) est modifiée ou créée. Lorsque cela se produit, nous enregistrons un autre crochet d’action. add_meta_boxes qui déclenchera la création de notre méta-boîte personnalisée, qui se fait via le add_page_template_meta_boxes fonction de rappel. Implémentons cette fonction maintenant.
Le rendu réel des contrôles de la boîte à méta sera géré via le display_form_page_template_meta_box fonction de rappel, qui a été spécifiée ci-dessus comme l'un des arguments de add_meta_box ().
Ajoutez des contrôles ici… 
Pour l'instant, j'ai ajouté du texte de substitution afin que nous puissions voir notre nouvelle boîte méta sur l'éditeur de page..
N'oubliez pas que notre modèle de page de formulaire comportera un en-tête et quatre champs de texte. Il existe de nombreuses façons de personnaliser la sortie du formulaire, mais dans notre cas, ajoutons des cases à cocher pour chaque champ nous permettant d’activer / désactiver leur visibilité. Mettre à jour display_form_page_template_meta_box () inclure le code suivant.
ID, 'pt_chk_form_heading', true); $ name = get_post_meta ($ object-> ID, 'pt_chk_form_name', true); $ subject = get_post_meta ($ object-> ID, 'pt_chk_form_subject', true); $ email = get_post_meta ($ object-> ID, 'pt_chk_form_email', true); $ phone = get_post_meta ($ object-> ID, 'pt_chk_form_phone', true); ?> 
 
  /> 
 
 
  /> 
 
 
  /> 
 
 
  /> 
 
 
  /> 
 
 
 
Nous incluons un champ nonce pour la sécurité qui sera vérifié ultérieurement, juste avant de sauvegarder les valeurs du formulaire dans la base de données..
Remarque: Si, pour une raison quelconque, la valeur de nonce ne peut pas être vérifiée, les paramètres ne seront pas enregistrés.. 
Ensuite, les valeurs de formulaire actuelles sont extraites de la base de données avant que les champs de formulaire personnalisés ne soient exportés dans la boîte méta..
Actuellement, nos cases à cocher ne seront pas enregistrées lorsque la publication sera mise à jour. Pour que les paramètres de formulaire persistent, nous devons enregistrer un nouveau hook dans le dossier init () méthode qui déclenche au cours d'une save_post action, puis implémenter le rappel pour mettre à jour manuellement les paramètres post meta.
post_type) return $ post_id;  $ heading = isset ($ _POST ['pt_chk_form_heading'])? $ _POST ['pt_chk_form_heading']: "; update_post_meta ($ post_id, 'pt_chk_form_heading', $ cap); $ name = isset ($ _POST ['pt_chk_form_name'])? $ _POST ['pt_chk_form_name']:"; update_post_meta ($ post_id, 'pt_chk_form_name', $ name); $ subject = isset ($ _POST ['pt_chk_form_subject'])? $ _POST ['pt_chk_form_subject']: "; update_post_meta ($ post_id, 'pt_chk_form_subject', $ subject); $ email = isset ($ _POST ['pt_chk_form_email'])? $ _POST ['pt_chk_form_email']; update_post_meta ($ post_id, 'pt_chk_form_email', $ email); $ phone = isset ($ _POST ['pt_chk_form_phone'])? $ _POST ['pt_chk_form_phone']: "; update_post_meta ($ post_id, 'pt_chk_form_phone', $ phone); 
Une fois que la valeur de non-forme du formulaire et les autorisations de l'utilisateur ont été vérifiées, ainsi qu'une vérification pour nous assurer que le type de publication est correct, nous pouvons tester les valeurs de formulaire publiées et les sauvegarder en toute sécurité dans la base de données..
Nos cases à cocher sont maintenant entièrement fonctionnelles, nous pouvons donc aller de l'avant et implémenter le modèle de page réel! Dans le dossier du thème enfant racine, ajoutez un nouveau dossier appelé modèles de page, et ajoutez-y un nouveau fichier appelé formulaire-page-template.php.
Ajoutez le code suivant au nouveau fichier pour créer un modèle de page vierge.
 
 
 
  
 
 
 
Pour réduire la complexité du code, notre formulaire de contact ne valide pas la saisie de l'utilisateur. Nous avons également procédé aux vérifications et à la validation habituelles du formulaire, car nous souhaitons nous concentrer uniquement sur la création dynamique du formulaire sans code superflu..
Tout d'abord, nous devons récupérer les valeurs de la case à cocher du formulaire de contact dynamique.
Ensuite, nous pouvons ajouter dans le code du formulaire. Ceci est très similaire pour chaque champ de formulaire. Jetons un coup d'oeil au prénom code de champ.
  
 
Nous testons la valeur de la case à cocher à partir des paramètres du modèle de page et ne générons le champ de formulaire que s'il est coché. Sinon, rien ne sera sorti. Ceci est répété pour chaque champ de formulaire.
Une fois le formulaire soumis, nous envoyons un courrier électronique à l’administrateur du site et affichons un message à l’écran. En réunissant tout cela, nous avons notre code de modèle de page final.
 
 
 
 Mail envoyé avec succès!
";?> 
  
Modèle de page de formulaire dynamique!
    
    
    
    
  
 
  
 
 
 
Pour vérifier que tout fonctionne correctement, assurez-vous que toutes les cases du modèle de page de formulaire sont cochées et mettez à jour la publication. Ensuite, jetez un coup d'oeil au modèle de page sur le front-end.
Essayez maintenant de décocher certaines des cases à cocher du modèle de page de formulaire. Seuls les champs spécifiés sont sortis. Vous avez un contrôle total sur la façon dont le formulaire est affiché! Dans la capture d'écran ci-dessous, j'ai décoché uniquement les cases d'e-mail et de téléphone..
Remarque: si vous travaillez sur un environnement WordPress local, le courrier la fonction peut ne pas réellement envoyer le courrier électronique. Cela ne fonctionnera que si vous avez un serveur de messagerie configuré et en cours d'exécution.
Le formulaire pourrait facilement être étendu pour ajouter un nombre quelconque de contrôles de tous types. Par exemple, vous pouvez ajouter un champ CAPTCHA facultatif à votre formulaire ou spécifier l’ordre des champs générés, voire le texte de l’en-tête / des libellés du formulaire. Le point ici est que vous pouvez utiliser des modèles de page dynamiques pour personnaliser votre formulaire comme vous le souhaitez. Les possibilités sont littéralement infinies!
Organisation de nos contrôles de modèles de page
Vous avez peut-être remarqué quelques problèmes d’utilisabilité avec les contrôles d’administration de notre modèle de page dynamique. Fonctionnellement, c'est bon, mais idéalement, les contrôles de modèles de page dynamiques doivent se trouver dans la même boîte méta que la liste déroulante de modèles de page. 
Rappelez-vous que la raison pour laquelle nous avons dû ajouter nos contrôles de modèle de page à une méta-boîte distincte était qu’il n’y avait actuellement aucun crochet WordPress disponible pour ajouter des contrôles personnalisés directement à la méta-boîte du modèle de page..
De même, lorsqu'un modèle de page dynamique est sélectionné, nous souhaitons uniquement que les commandes associées à ce modèle soient visibles. Nous pouvons compléter les deux exigences en ajoutant des CSS et JavaScript personnalisés à l'éditeur de page..
Plus précisément, nous devons:
 
Masquer la meta box du formulaire.
 
Attendez que la page de l'éditeur d'administrateur se charge complètement.
 
Déplacez les contrôles de formulaire vers la boîte à méta "Attributs de page".
 
Afficher les contrôles de formulaire admin uniquement si le modèle de page associé est sélectionné.
 
Commencez par ajouter css et js des dossiers dans le dossier racine de votre thème enfant. À l'intérieur de css dossier créer un style.css fichier, et dans le js dossier créer un script.js fichier. Vous pouvez appeler tout ce que vous voulez, cependant. Rappelez-vous simplement de noter les noms de fichiers si c'est le cas et de les remplacer dans le code des scripts de mise en file d'attente..
Ensuite, nous devons mettre en file d'attente les deux fichiers seulement sur l'écran de l'éditeur de page. Nous ne voulons pas qu'ils soient ajoutés à tout pages d'admin. Enregistrez un nouveau crochet d’action dans le init () méthode pour charger les scripts sur les pages d'administration et ajouter la fonction de rappel pour mettre en file d'attente les fichiers de script.
Remarquez comment nous ciblons la page type de poste, puis soit le post-new.php ou post.php pages d'admin. Donc, fondamentalement, sauf si nous sommes sur l'éditeur de page, nos scripts ne seront pas chargés, ce que nous voulons..
Continuons maintenant et commençons à ajouter du CSS et du JavaScript pour personnaliser les contrôles de modèle de page de formulaire. Tout d’abord, masquez la totalité de la méta-forme du formulaire avec CSS en l’ajoutant à style.css:
# form-page-template-meta-box display: none; 
Nous aurions pu le faire avec JavaScript, mais nous souhaitons que la méta-forme du formulaire soit immédiatement masquée. Si nous le faisions via JavaScript, nous devions attendre que la page soit chargée et vous verriez un petit flash comme la boîte méta affichée à l'écran et ensuite masquée avec JavaScript. Donc, utiliser CSS dans ce cas est mieux.
Maintenant pour le JavaScript. Ajouter ceci à script.js.
jQuery (document) .ready (function ($) var pt = $ ("#page_template"); var form_controls = $ ("#form_pt_wrapper"); // Déplacer les contrôles de formulaire vers la méta-boîte 'Attributs de page' et les masquer par default form_controls.insertAfter ('#page_template') .hide (); fonction displayControls (ptStr, sel) if (ptStr! == pt.val ()) sel.hide (); else sel.toggle () ; // Appeler lors du chargement de la page displayControls ('page-templates / form-page-template.php', form_controls); // // appel à chaque changement de menu déroulant pt.on ('change', function () displayControls ( this.value, form_controls);););
Je ne vais pas entrer dans les détails concernant JavaScript, mais voici l'aperçu.
Nous mettons d’abord en cache deux sélecteurs CSS et déplaçons les contrôles de formulaire admin vers le Attributs de page meta box. Ensuite, nous avons un displayControls () fonction qui masque ou affiche les contrôles de formulaire en fonction de la valeur actuelle du menu déroulant de modèle de page. Nous appelons displayControls () au chargement de la page, puis à chaque fois que la liste déroulante est modifiée, pour vous assurer que nous sommes toujours synchronisés.
Avec les CSS et JavaScript ajoutés, les contrôles de modèle de page de formulaire s'affichent désormais dans la zone méta appropriée et s'affichent uniquement si le modèle de page associé est sélectionné..
Cela semble beaucoup mieux et est beaucoup plus intuitif pour l'utilisateur. Étant donné que les méta-boîtes peuvent être déplacées autour des écrans d’administration de WordPress, nos contrôles de modèles de page dynamiques n’auraient pas nécessairement été proches de la liste déroulante des modèles de page! Nous avons résolu ce problème de manière élégante afin de nous assurer que nos contrôles apparaissent toujours directement sous la liste déroulante des modèles de page.!
Messages de blog Modèle de page dynamique
Notre prochain modèle de page dynamique affiche une liste de vos derniers articles de blog. Mais plutôt que de simplement répertorier tous les articles, nous allons implémenter une zone de liste (semblable à une liste déroulante) pour vous permettre de choisir la catégorie de message. Non seulement cela, vous serez également en mesure de sélectionner plusieurs catégories de poste.
Commencez par ajouter une nouvelle boîte à méta dans add_page_template_meta_boxes ().
Et maintenant, nous devons implémenter la fonction de rappel pour rendre notre méta-boîte.
ID, 'blog_category', true); $ categories = get_categories (); ?> 
 :  % 3 $ s (% 4 $ s)', esc_attr ($ category-> cat_ID), esc_attr (sélectionné ($ category-> cat_ID, $ this-> q ($ category-> cat_ID, $ blog_category))), esc_html ($ category-> cat_name), esc_html ( $ category-> category_count)); ?>  
 
Décomposons cela. Nous définissons d’abord une variable qui contient la liste des catégories de publications sélectionnées (le cas échéant) depuis la dernière mise à jour de la publication. Une autre variable stocke un tableau de toutes les catégories existantes.
Remarque: nous avons déjà un champ nonce de notre modèle de page de formulaire précédent. Nous n'avons donc pas besoin d'en utiliser un autre ici, car nous sommes sur la même page d'administration..
Nous parcourons ensuite la liste des catégories de sites pour créer un contrôle déroulant au fur et à mesure. Toute catégorie précédemment sélectionnée est à nouveau sélectionnée pour tout synchroniser.
Vous avez peut-être remarqué, cependant, que l'un des arguments pour choisi() est un appel de fonction. Normalement, nous utilisons simplement choisi() pour comparer deux valeurs afin de déterminer s'il faut marquer l'élément actuel comme sélectionné. Cependant, comme nous pouvons sélectionner plusieurs catégories, notre paramètre de base de données est toujours un tableau de valeurs (même si nous ne sélectionnons qu'une seule catégorie)..
La fonction q () est une fonction d'assistance qui nous permet de vérifier l'élément de liste actuel par rapport au tableau de catégories enregistrées.
Pour chaque catégorie, l'ID de catégorie est passé à q () avec le tableau de catégorie enregistré. Si la catégorie actuelle figure dans la liste des catégories enregistrées, elle est renvoyée à la catégorie actuelle. choisi() et correspondra au premier argument. Cela causera choisi() pour marquer la catégorie actuelle comme sélectionnée. C'est une manière élégante de gérer plusieurs options pour un seul contrôle.
Il ne nous reste plus qu'à mettre à jour save_page_template_meta () gérer les catégories de publication de blog. Ajoutez ce code pour le faire.
Nous devons maintenant créer le modèle de page de messages de blog. Dans les thèmes de votre enfant modèles de page dossier, créez un nouveau fichier appelé blog-page-template.php, et ajoutez le code suivant.
 
 
 
  $ paged, 'cat' => $ cat, 'orderby' => 'date', 'order' => 'DESC', 'post_type' => 'post'); $ blog_posts = new WP_Query ($ query_args); ?> have_posts ()):?> have_posts ()): $ blog_posts-> the_post (); ?>    
 
 
 
La seule différence réelle par rapport à notre précédent modèle de page dynamique est le code contenu dans le fichier. 
 Balise HTML, regardons de plus près à cela maintenant.
Nous définissons d'abord la valeur du paginé variable de requête, utilisée pour afficher les publications sur plusieurs pages, en fonction du nombre de pages renvoyées par notre requête WordPress. Ensuite, nous obtenons toutes les catégories sélectionnées sur la méta-boîte de l'éditeur de page. Le tableau de catégories est converti en chaîne et reçoit une valeur par défaut s'il est vide. Une nouvelle requête WordPress est ensuite créée et les résultats sont affichés dans une boucle standard..
Le point clé ici est que nous sommes en mesure de contrôler exactement les catégories qui sont passées à l'objet de requête, via les sélections effectuées sur la méta-boîte de l'éditeur de page.. 
Il ne reste plus maintenant qu’à masquer la boîte de méta catégories de blog et à déplacer le contrôle de liste vers le bas. Attributs de page meta box. Comme nous l'avons fait avant.
À l'intérieur style.css mettre à jour les styles pour masquer la meta box des articles du blog:
# formulaire-page-modèle-méta-boîte, # blog-page-modèle-méta-boîte display: none; 
le script.js le fichier a besoin d'un peu plus de code pour être ajouté. Voici le fichier entièrement mis à jour.
jQuery (document) .ready (function ($) var pt = $ ("#page_template"); var form_controls = $ ("#form_pt_wrapper"); var blog_post_controls = $ ("#blog_pt_wrapper"); // Déplacer les contrôles de formulaire dans la boîte à méta 'Attributs de page' et les masquer par défaut form_controls.insertAfter ('#page_template') .hide (); blog_post_controls.insertAfter ('#page_template') .hide (); fonction displayControls (ptStr, sel) if ( ptStr! == pt.val ()) sel.hide (); else sel.toggle (); // // Appelle sur le chargement de page displayControls ('templates de page / formulaire-page-template.php', form_controls); displayControls ('templates-page / blog-page-template.php', blog_post_controls); // Appel à chaque changement de menu déroulant pt.on ('change', function () var controls; if (this.value === 'page-templates / form-page-template.php') controls = form_controls; blog_post_controls.hide (); else if (this.value === 'page-templates / blog-page-template.php ') controls = blog_post_controls; form_controls.hide () else // masquer tous les blog_post_controls.h ide () form_controls.hide ();  displayControls (this.value, controls); ); );
La plupart des changements à noter sont dans la .sur le changement') une fonction. Puisque nous avons maintenant plus d’un modèle de page dynamique, nous devons tester pour voir lequel a été sélectionné dans la liste déroulante, puis le passer dans le sélecteur d’élément correspondant à displayControls ().
Nous devons également masquer tous les autres contrôles de modèle de page, à l'exception de celui sélectionné. Et si le modèle de page par défaut est affiché, nous masquons tous les contrôles de modèle de page. Le code JavaScript pourrait être optimisé davantage, mais comme nous n’avons que deux modèles de page dynamiques, il remplit assez bien nos besoins..
Avec ces modifications en place, nous avons maintenant deux modèles de page dynamiques en fonctionnement, chacun de leurs contrôles associés étant affiché directement sous la liste déroulante des modèles de page..
Modèles de page pour tous
Auparavant, j'ai expliqué comment, dans WordPress 4.7+, vous pouvez maintenant attribuer des modèles de page à tout Type de poste. Avant WordPress 4.7, vous ne pouviez les affecter qu'à des pages, mais plus maintenant!
Tout ce que vous avez à faire est d’ajouter une ligne supplémentaire au bloc de commentaires dans l’en-tête du modèle de page et de spécifier une liste de types de publication séparée par des virgules pour laquelle le modèle de page doit être disponible..
Le nom du type de publication doit être identique à celui du slug entré lors de 



		
			
	   
	




Code