Share
La semaine dernière, nous avons expliqué comment créer des méta-boîtes personnalisées dans le post-éditeur et enregistrer les données que vous y avez entrées. Mais quelles sont quelques applications pratiques de cette technique? Aujourd'hui, l'objectif est de passer en revue trois exemples concrets d'utilisation de boîtes de méta personnalisées pour améliorer la page de publication..
Dans l'article d'introduction, vous avez appris comment implémenter des boîtes à méta et sauvegarder / nettoyer les données. Ce grand! Mais il est temps d'aller au-delà des informations conceptuelles et de mettre en oeuvre ces méta-boîtes personnalisées..
Le scénario: Vous exploitez un site Web qui publie principalement du contenu stimulant. Une des choses que vous faites régulièrement est de mettre des citations en haut de chaque message. Pour séparer ces citations du contenu, vous souhaitez les déplacer dans une boîte méta personnalisée..
Dans l'article "Comment faire", vous avez appris à implémenter les boîtes de méta, mais voici un bref aperçu..
Accrocher une fonction dans le add_meta_boxes qui contient un appel à la add_meta_box une fonction.
Le créer une fonction avec le même nom que le $ callback spécifié dans add_meta_box. Ceci est la pièce qui affiche réellement le contenu de la boîte méta.
Accentsconagua
ID, '_cd_quote_content', true); $ author = get_post_meta ($ post-> ID, '_cd_quote_author', true); $ date = get_post_meta ($ post-> ID, '_cd_quote_date', true); // Nonce pour vérifier l'intention ultérieurement wp_nonce_field ('save_quote_meta', 'quote_nonce'); ?>
Accrocher une fonction dans save_post qui gère d'abord la vérification des autorisations et de l'intention, puis nettoie et enregistre les données.
array ()); if (isset ($ _POST ['_ _cd_quote_content'])) update_post_meta ($ id, '_cd_quote_content', wp_kses ($ _POST ['_ cd_quote_content'], $ autorisé)); if (isset ($ _POST ['_ cd_quote_author'])) update_post_meta ($ id, '_cd_quote_author', esc_attr (strip_tags ($ _POST ['_ cd_quote_author']))); if (isset ($ _POST ['_ cd_quote_date'])) update_post_meta ($ id, '_cd_quote_date', esc_attr (strip_tags ($ _POST ['_ cd_quote_date']))); ?>
Nous pourrions utiliser les données enregistrées dans nos méta-boîtes en modifiant les fichiers de modèle de notre thème. Mais c'est trop facile. Pour que notre code de citation reste modulaire (un fichier de plugin), nous allons utiliser des crochets de filtre, qui font partie de l’API du plugin. Les crochets de filtre sont un peu différents des actions. Lorsque vous vous connectez à un filtre, le but est, la plupart du temps, de modifier l'apparence d'un élément de contenu sur une page. Dans notre cas, nous allons accrocher dans le contenu, et si nous sommes sur une seule page de message qui a une citation, nous l'ajouterons ci-dessus.
Une autre façon de penser action par rapport aux crochets de filtre est que vous écho choses dans les actions (par exemple, wp_head, voir section 2), mais avec les filtres, vous prenez une ou plusieurs variables, modifiez-les, puis revenir leur.
Pour afficher notre devis, nous allons accrocher le contenu, qui transmet une variable par défaut: le contenu d'un message donné. Dans notre fonction accrochée, nous nous assurerons que nous sommes sur un seul post et, si ce n’est pas le cas, nous renverrons le contenu correctement (aucune modification).
Ensuite, nous aurons notre $ post variable. Parce que nous sommes dans la boucle, nous appelons simplement Global $ post. Ensuite, nous aurons notre devis, si aucune valeur ne revient, nous savons qu'aucun devis n'a été entré et nous retournons le contenu une fois de plus sans modification..
ID, '_cd_quote_content', true); // Bail si nous n'avons pas de devis; if (vide ($ quote)) renvoie $ contenu; ?>
Maintenant que nous nous sommes assurés d'être sur un seul poste et que nous avons en fait une citation, nous prenons soin de mettre les choses en place. Nous allons d'abord appeler notre auteur et ses dates via get_post_meta (), alors nous pouvons commencer à construire une chaîne dans le $ out variable. Nous allons d'abord ajouter un et notre citation. Ensuite, nous vérifions si le champ auteur a été rempli. Si c'était le cas, nous commencerions un paragraphe pour l'auteur, puis vérifierions s'il y avait une date et l'ajouterons également au paragraphe. Enfin, nous allons ajouter notre fermeture étiquette.
ID, '_cd_quote_content', true); // Bail si nous n'avons pas de devis; if (vide ($ quote)) renvoie $ contenu; // Assemble notre citation $ author = get_post_meta ($ post-> ID, '_cd_quote_author', true); $ date = get_post_meta ($ post-> ID, '_cd_quote_date', true); $ out = ''. $ quote; if (! empty ($ author)) $ out. = ''; ?>-'. $ auteur; if (! empty ($ date)) $ out. = '('. $ date. ')'; $ out. = '
'; $ out. = '
Maintenant l’étape la plus cruciale: renvoyer la combinaison de nos nouveaux produits $ out chaîne qui contient la citation et le contenu original trouvé dans $ contenu.
ID, '_cd_quote_content', true); // Bail si nous n'avons pas de devis; if (vide ($ quote)) renvoie $ contenu; // Assemble notre citation $ author = get_post_meta ($ post-> ID, '_cd_quote_author', true); $ date = get_post_meta ($ post-> ID, '_cd_quote_date', true); $ out = ''. $ quote; if (! empty ($ author)) $ out. = ''; // Renvoie les valeurs: quote en premier, puis le contenu renvoie $ out. $ contenu; ?>-'. $ auteur; if (! empty ($ date)) $ out. = '('. $ date. ')'; $ out. = '
'; $ out. = '
C'est tout! Vous pouvez voir le résultat.
Le scénario: Vous avez une communauté active de lecteurs qui partagent régulièrement vos articles sur Facebook. C'est génial, et cela génère beaucoup de trafic. Mais vous commencez à remarquer que les images apparaissant avec vos articles sur Facebook ne sont pas idéales. Vous n'êtes pas non plus satisfait de la publication des titres de vos publications. La solution consiste à ajouter des balises méta Open Graph pour contrôler le mode d'affichage de vos articles. Plutôt que de laisser cela se régler automatiquement, vous décidez de mettre en place une méta-boîte personnalisée pour en prendre soin..
Vous avez probablement déjà cela, mais voici le code pour obtenir votre boîte de méta aller.
ID, '_cd_opengraph_title', true); $ desc = get_post_meta ($ post-> ID, '_cd_opengraph_desc', true); $ image = get_post_meta ($ post-> ID, '_cd_opengraph_image', true); // Ajout d'un champ nonce wp_nonce_field ('save_opengraph_meta', 'opengraph_nonce'); ?>
Les petites images carrées fonctionnent mieux.
Pour que le bouton "Télécharger une image" fonctionne, nous allons devoir ajouter un peu de javascript qui détournera le programme de téléchargement WordPress intégré. Cela signifie que nous allons utiliser un autre crochet d’action. Cette fois c'est admin_print_script - $ page.
Lorsque vous ajoutez des scripts et / ou des styles à la zone d'administration de WordPress, il existe une règle d'or: ajoutez uniquement les scripts / styles où vous en avez besoin. Cela empêche votre plugin / thème de casser quelque chose d'autre par accident. admin_print_scripts - $ page vous permet d’insérer des scripts (via la fonction wp_enqueue_script) uniquement sur le $ page spécifié. Dans ce cas, nous devons ajouter notre script à la post.php et post-new.php écrans. Cela nécessite d’accrocher la même fonction aux deux.
Et le javascript.
jQuery (document) .ready (function () var ogfield = null; jQuery ('# cdog-thickbox') .click (function () ogfield = jQuery ('input # og-image') .attr ('name' ); tb_show (", 'media-upload.php? type = image & TB_iframe = true'); renvoyer false;); window.send_to_editor_old = window.send_to_editor; window.send_to_editor = fonction (html) var ogimg; if (ogfield ! = null) ogimg = jQuery ('img', html) .attr ('src'); jQuery ('input # og-image') .val (ogimg); tb_remove (); ogfield = null; else window.send_to_editor_old (html);;); Tout d'abord, nous nous assurons que l'uploader thickbox apparaît lorsque vous cliquez sur le bouton, puis nous configurons une variable qui indique à WordPress que c'est notre bouton sur lequel vous avez cliqué. Ensuite, nous sauvons la window.send_to_editor fonctionner avec un nouveau nom. C'est la fonction qui insère l'image HTML de l'image dans la zone de post-édition. Nous allons détourner cette fonction pour envoyer l'attribut src à notre propre champ de formulaire, mais uniquement si la commande thickbox a été affichée par notre bouton.
Nous allons accrocher dans le wp_head action pour ajouter nos balises méta dans le section. Premièrement, nous allons nous assurer que nous sommes sur une seule page de messages, puis nous allons configurer notre $ post variable. $ post WordPress a déjà décidé quel type d’objet doit être rendu et quel fichier modèle il doit utiliser. Mais, dans le cas contraire, nous récupérerons le message avec get_queried_object ().
get_queried_object (); ?>
Ensuite, nous pouvons parcourir chaque variable Open Graph, en récupérant tout avec get_post_custom (), et, si sa là, écho dans la section de tête de notre page.
get_queried_object (); $ values = get_post_custom ($ post-> ID); if (isset ($ values ['_ cd_opengraph_title']))) echo ''. "\ n"; if (isset ($ values ['_ cd_opengraph_desc']])) echo ''. "\ n"; if (isset ($ values ['_ cd_opengraph_image']))) echo ''. "\ n"; ?>
Le scénario: Vous comptez beaucoup sur le modèle de page de la barre latérale de Twenty Eleven. Mais vous voulez pouvoir basculer entre les barres latérales gauche et droite pour chaque page.
Le code suivant serait quelque chose de mieux laissé dans le fichier de fonctions d'un thème. Cela dit, comme nous utilisons un plugin ici, nous pouvons nous connecter à la init et avec notre fonction vérifier pour vous assurer que Twenty Eleven est le thème actuel. Si ce n'est pas le cas, nous désactiverons le plugin. Cependant, nous définirons d'abord une constante contenant l'URL du répertoire dans lequel réside notre plugin.
Même routine qu'auparavant: ajoutez la méta-boîte, rendez-la et sauvegardez les données. Cette fois, cependant, nous allons afficher notre boîte à méta sur l'écran d'édition des pages. Nous allons également utiliser une fonction wordpress astucieuse appelée get_template_directory_uri, qui retourne une chaîne contenant l'URI du répertoire pour le thème actuel. Nous allons utiliser cela pour emprunter quelques images que Twenty Eleven utilise sur sa page d'options de thème. Nous allons également utiliser la constante que nous avons définie précédemment pour ajouter notre propre image..
ID, '_cd_post_layout', true); // Définit notre variable de mise en page, même sur de nouvelles publications if (vide ($ mise en page)) $ layout = 'default'; // Répertoire de thèmes pour l'emprunt d'images 2011 $ dir = get_template_directory_uri (); wp_nonce_field ('save_post_layout', 'layout_nonce'); ?> Pour embellir un peu notre méta-boîte, nous devrons également ajouter notre propre feuille de style. Rappelles toi admin_print_scripts - $ page du deuxième scénario ci-dessus? Il a un frère, admin_print_styles - $ page, ce qui, comme son nom l'indique, vous permet d'ajouter une feuille de style à l'administrateur wordpress sur des pages spécifiques. Nous devrons nous accrocher à cette fonction pour post.php et post-new.php. Nous allons également utiliser wp_enqueue_style (); cela fonctionne de la même manière que wp_enqueue_script (), que nous avons utilisé dans le deuxième exemple ci-dessus.
Et le CSS.
div.cd-layout width: 200px; float: gauche; entrée div.cd-layout display: block; # cd-sidebar-pos .clearfix: after clear: both; content: "; display: block; taille de la police: 0; hauteur de la ligne: 0; visibilité: cachée; width: 0; hauteur: 0; # cd-sidebar-pos étiquette span display: block; margin-top: 5px;
Twenty Eleven réalise le positionnement de sa barre latérale en s’accrochant à un filtre appelé body_class. Cela fait partie de la fonction appelée , qui, si vous avez conçu un thème auparavant, vous avez probablement utilisé. Si la disposition par défaut est deux colonnes, Twenty Eleven ajoute l'un des deux éléments supplémentaires à body_class: barre latérale droite ou barre latérale gauche. Vous pouvez voir le code correspondant dans le thème inc dossier dans le fichier theme-options.php.
Notre propre code va également s'accrocher à body_class. Tout d'abord, nous allons nous assurer que nous sommes sur une page, et que cette page utilise le Modèle de barre latérale. Ensuite, nous aurons le $ post variable ou définissez-la si elle est vide. Notez deux arguments supplémentaires pour add_filter. 99 est la priorité. Nous voulons que cela se déclenche en dernier, nous utilisons donc un nombre plus élevé. 1 est le nombre ou les arguments à envoyer à notre fonction.
body_class enverra un tableau de tous les éléments qui iront dans le body_class () fonction de sortie. À partir de là, nous devons simplement obtenir nos propres méta-valeurs. Si notre valeur est 'right', nous rechercherons "left-sidebar" dans le tableau de classes body. S'il est là, nous le désinstallons et le remplaçons par "right-sidebar". Vice versa si notre valeur est laissée.
ID, '_cd_post_layout', true); // si nous utilisons la bonne disposition, ajoutez if ($ layout == 'right') $ key = array_search ('left-sidebar', $ classes); if ($ key) unset ($ classes [$ key]); $ classes [] = 'right-sidebar'; elseif ($ layout = 'left') $ key = array_search ('barre de droite', $ classes); if ($ key) unset ($ classes [$ key]); $ classes [] = 'left-sidebar'; return $ classes; ?> Ce qui précède fonctionnerait, mais nous avons laissé de côté un petit détail. Si un utilisateur avait les options de thème de Twenty Eleven définies sur une colonne, aucune des options de notre boîte méta ne fonctionnerait. Laisse donc modifier add_meta_box appeler un peu. Nous aurons d’abord les options de Twenty Eleven, puis nous nous assurerons que l’option de disposition du thème n’est pas définie sur une colonne. Si le thème est défini sur une colonne, nous n'ajouterons pas la boîte de méta.
Comme vous pouvez l’imaginer, il existe de nombreuses autres utilisations des boîtes méta personnalisées? Ce ne sont là que quelques exemples pratiques pour faire travailler votre esprit. Combinés à des types de publication personnalisés, ils vous permettent de créer des écrans d’édition extrêmement personnalisés. La véritable force des boîtes à méta personnalisées réside toutefois dans la manière dont les concepteurs de thèmes et les développeurs de plug-ins peuvent créer des interfaces plus conviviales pour les paramètres de publication ou de page..
Nous espérons que vous avez apprécié le tutoriel!
