Didacticiel WordPress: Comment créer un plugin Témoignages

Article écrit par:
  • WordPress
  • Mise à jour: août 12, 2013

Nous voici donc pour notre deuxième tutoriel hebdomadaire sur WordPress. Nous avons appris à créer un site de défilement infini WP et plug-in page-flip autrefois. Aujourd'hui, nous en apprendrons un peu plus sur les types d'articles personnalisés et sur le chargement de leurs données.

Cette fonctionnalité est vraiment importante sur votre site, car elle vous permet de montrer aux gens qui vous recommandent. Les témoignages sont une excellente preuve sociale de votre génialité. Et vous n'avez pas besoin de plugins complexes ni de beaucoup de code pour y parvenir. Comme vous le verrez avec quelques fichiers, vous pouvez créer une présentation sexy pour vos témoignages.

Commençons alors!

Zip & Installer

Si vous êtes pressé de vérifier cela, vous pouvez Télécharger et l'installer.

Vous devrez ensuite ajouter quelques données, en ajoutant quelques témoignages à l'aide des nouveaux témoignages que vous pourrez voir dans votre tableau de bord:

liste-témoignages

Ensuite, vous pouvez utiliser le shortcode de base pour charger cela:

[témoignages rand = 0 max = 5]

Lorsque vous avez ajouté ce code, vous verrez quelque chose comme ceci dans votre page:

principaux témoignages

Nous allons maintenant voir comment créer et explorer cela (en ajoutant plus de fonctions et en modifiant le look).

Les bases

Comme nous l’avons déjà dit, vous devrez ajouter le métadonnées d’en-tête, créez le fichier de plug-in et appelez vos scripts. En résumé, vous allez créer un nouveau dossier avec le nom de votre plugin sous wp-content / plugins, puis créer un fichier portant le même nom que le dossier qui sera votre fichier de plugin principal.

Une fois que vous avez fait cela, copiez et collez comme suit:

<? php / * Nom du plugin: Témoignages Description: Affichez les témoignages de clients. Version: 1.0 Auteur: Licence de blog Web Revenue: GPL2 * / // scripts et styles de mise en file d'attente function plugin_scripts () {wp_enqueue_script ('jquery'); wp_enqueue_script ('flexslider', plugins_url ('js / jquery.flexslider-min.js', __FILE__), array ('jquery'), '2.2', false); wp_enqueue_script ('testimonials', plugins_url ('js / testimonials.js', __FILE__), array ('jquery'), '1.0', false); wp_enqueue_style ('flexsliderCSS', plugins_url ('css / flexslider.css', __FILE__), false, '2.2', 'all'); wp_enqueue_style ('testimonialsCSS', plugins_url ('css / testimonials.css', __FILE__), false, '1.0', 'tous'); } add_action ("wp_enqueue_scripts", "plugin_scripts");

Voici ce que nous faisons:

  • Dire au WP quel est le nom de notre plugin, son auteur, ce qu'il fait
  • Création d'une fonction, dans laquelle nous insérons des scripts réguliers (tels que jQuery) et des scripts personnalisés (tels que flexslider) et des feuilles de style
  • Dire au WP de charger la fonction de script dans son appel de script par défaut, afin qu'ils soient réellement chargés dans les pages

Tout cela est plutôt cool, mais n'oubliez pas de créer les fichiers sous / js et / css. Vous pouvez simplement les télécharger dans notre contenu de démonstration afin que vous n'ayez pas besoin de creuser beaucoup pour trouver les fichiers flexslider.

Maintenant que nous avons tous les éléments de base en place, nous pouvons commencer la partie amusante.

Le type de message personnalisé

Par défaut, WordPress utilise les types de publication, les pages et les publications courantes 2. Mais il existe également de nombreux types de publication internes (tels que les pièces jointes). La définition de «type de publication» est donc la suivante: Chaque type de données à stocker.

Comme notre plugin créera une nouvelle fonctionnalité, WP n’a pas d’emplacement intégré pour le stocker, nous devons donc le créer. N'ayez pas peur petite sauterelle, c'est assez simple, vous pouvez utiliser ce code:

// la magie noire pour créer la fonction de type de message create_post_type () {register_post_type ('testimonials', // nouveau tableau de type de message ('labels' => array ('name' => __ (Témoignages '),' singular_name ' => __ ('Témoignage')), 'public' => true, / * Le type de publication est destiné à un usage public. Cela inclut les interfaces frontale et wp-admin. * / 'Supports' => array ('title ',' editor ',' thumbnail ',' custom_fields '),' hierarchical '=> false)); }

Ici, nous utilisons simplement la fonction register_post_type () pour dire à WP "Hey Buddy, nous devons stocker ce type de données, veuillez être prêt à le recevoir".

Nous lui disons également que ce type de données s'appelle des «témoignages», il devrait être accessible au public (il crée donc un nouvel élément de menu dans votre tableau de bord), les champs dont nous avons besoin, et s'il est hiérarchique. ou non (comme les pages dont nous avons les pages parent et enfant).

Ensuite, nous devons l'appeler chaque fois que nous chargeons WordPress. Ce crochet le fera:

add_action ('init', 'create_post_type');

Les champs personnalisés

Maintenant, nos types de messages personnalisés ont le titre (nom de la personne), le contenu (témoignage de la personne), une image (image sélectionnée), mais il manque un lien, car si la personne a la gentillesse de parler de vous, vous devriez au moins créer un lien vers leur site, non?

Nous pourrions le faire avec les champs personnalisés habituels, mais il est bien préférable d'avoir un champ «fermé», où l'utilisateur n'a pas besoin de taper le nom du champ, et où vous pouvez également ajouter des règles de validation.

Tout d’abord, nous devons créer un nouveau métabox, c’est-à-dire ces jolis panneaux que vous avez dans votre zone de post-édition, chaque petit panneau est un métabox. Cette fonction va créer et l'appeler:

// ajout du champ de la boîte à méta de la fonction d'URL, fonction add_custom_metabox () {add_meta_box ('custom-metabox', __ ('Lien'), 'url_custom_metabox', 'testimonials', 'side', 'low') } add_action ('admin_init', 'add_custom_metabox');

La fonction add_meta_box () requiert les paramètres suivants:

  1. ID - L'identifiant unique pour cela. Vous pouvez utiliser quelque chose d'unique ici, comme «licorne mangeuse d'arc-en-ciel» ou «témoignage-lien». Tout ce qui peut être utilisé en interne
  2. Titre - Qu'est-ce qui sera affiché pour l'utilisateur? Ici, il est important d’utiliser la fonction __ (), c’est la fonction qui permet aux utilisateurs de langues étrangères de traduire votre plugin avec des fichiers .po (sans modifier les fichiers du plugin).
  3. Callback - La fonction dans laquelle vous avez le contenu actuel de la métabox
  4. Type de message - Dans notre cas, nous souhaitons qu'il ne soit visible que pour les témoignages.
  5. Contexte - Où dans la page vous voulez le montrer
  6. Priorité - Si cela devrait être avant d'autres articles de la même position ou après eux

Nous devons maintenant créer la fonction url_custom_metabox (), puisque nous l’avons appelée.

// HTML pour la fonction de zone administrative url_custom_metabox () {global $ post; $ urllink = get_post_meta ($ post-> ID, 'urllink', true); // validation! if (! preg_match ("/ http (s?): ///", $ urllink) && $ urllink! = "") {$ errors = "Cette URL n'est pas valide"; $ urllink = "http: //"; } // affiche le message invlid url et ajoute le http: // au champ de saisie if (isset ($ errors)) {echo $ errors; }?> <p> <label pour = "siteurl"> URL: <br /> <input id = "siteurl" size = "37" name = "siteurl" value = "<? php if (isset ($ $ urllink) ) {echo $ urllink;}?> "/> </ label> </ p> <? php}

Ok, traduisons maintenant ceci en anglais clair:

  • La variable globale $ post est appelée, ainsi nous pouvons savoir quel est le POSTID de l'élément en cours
  • Nous chargeons la valeur actuelle de l'URL
  • Nous validons Si la valeur que l'utilisateur a insérée est valide. S'il y a au moins une occurrence «http» ou «https», la valeur est OK, sinon elle est valide et nous devons utiliser la valeur par défaut.
  • Ensuite, nous montrons les erreurs, s'il y en a
  • Nous commençons maintenant avec le code HTML actuel, en ajoutant la valeur par défaut dans le champ de saisie, comme dans PHP

Après cela, nous devons enregistrer ce qui est envoyé par l'utilisateur. Nous utiliserons le crochet «save_post». Ainsi, chaque fois que WordPress enregistre un message, elle appelle cette fonction:

// enregistre la fonction de données de champ personnalisé save_custom_url ($ post_id) {global $ post; if (isset ($ _ POST ['siteurl'])) {update_post_meta ($ post-> ID, 'urllink', $ _POST ['siteurl']); }} add_action ('save_post', 'save_custom_url');

Ici, nous vérifions simplement s’il existe des données postales appelées «sitelink» qui est notre nom de champ. S'il existe un lien annexe, sauvegardons-le.

Une fois que tout est en place, voici à quoi ressemblera votre nouvelle page de témoignage:

nouveau témoignage

Chargement de nos données personnalisées

Nous devons maintenant charger nos éléments et utiliser la fonction get_posts (), principalement parce que nous ne disposons que de données simples. Nous n'avons donc pas besoin d'une boucle WP appropriée (cela ajouterait beaucoup d'appels à la base de données et pas besoin).

Donc, commençons par créer une fonction pour obtenir le lien de notre site, le cas échéant.

// retourne l'URL d'une fonction post get_url ($ post) {$ urllink = get_post_meta ($ post-> ID, 'urllink', true); return $ urllink; }

Maintenant, nous pouvons lancer la fonction shortcode. Un moyen simple de valider et de valider les données de shortcode consiste à créer les attributs de la boucle sous forme de tableau, afin que nous puissions ajouter de nouveaux éléments selon nos besoins, comme ceci:

// enregistrement du shortcode pour afficher les témoignages function load_testimonials ($ a) {$ args = array ("post_type" => "testimonials"); if (isset ($ a ['rand'])) && $ a ['rand'] == true) {$ args ['orderby'] = 'rand'; } if (isset ($ a ['max'])) {$ args ['posts_per_page'] = (int) $ a ['max']; } // obtenir tous les témoignages $ posts = get_posts ($ args); // SORTIE HTML} add_shortcode ("testimonials", "load_testimonials");

Comme vous pouvez le constater, les attributs de shortcode sont chargés et passés au tableau $ args lors de leur validation, dans le format utilisé par WordPress, afin que nous puissions charger les publications les utilisant.

Nous devons maintenant ajouter du code HTML à la suite de la structure par défaut de flexslider. Voici à quoi ça va ressembler:

echo '<div>'; echo '<ul>'; foreach ($ posts en tant que $ post) {// obtention de l'image thumb $ url_thumb = wp_get_attachment_thumb_url (get_post_thumbnail_id ($ post-> ID)); $ link = get_url ($ post); echo '<li>'; if (! empty ($ url_thumb)) {echo '<img src = "'. $ url_thumb. '" />'; } echo '<h2>'. $ post-> post_title. '</ h2>'; if (! empty ($ post-> post_content)) {echo '<p>'. $ post-> post_content. '<br />'; } if (! empty ($ link)) {echo '<a href="'.$link.'"> Accéder au site </a> </ p>'; } echo '</ li>'; } echo '</ ul>'; echo '</ div>';

Attendez, mais pourquoi créerions-nous le code HTML dans la fonction PHP? En effet, nous ne pouvons charger le contenu de manière conditionnelle que si l'utilisateur a ajouté du contenu. Vous n'aurez donc pas de balises HTML vides, vous n'attendez que de gâcher votre mise en page.

Qu'en est-il de la barre latérale?

La plupart des gens veulent juste afficher des témoignages dans la barre latérale, et ce plugin ne fonctionnera pas très bien, car les widgets de texte ne traitent pas les codes courts. Il existe une solution simple pour cela, ajoutez simplement ceci dans votre code:

add_filter ('widget_text', 'do_shortcode');

Quelle est la prochaine?

Alors, avez-vous apprécié ce tutoriel? Qu'ajouteriez-vous comme option pour votre shortcode de témoignage? Avez-vous des idées pour les prochains articles? Faites-nous savoir en utilisant la section commentaires!

A propos de Rochester Oliveira

Je suis un concepteur de sites Web et un entrepreneur de Itajubá (MG), Brésil. J'aime écrire sur des sujets obscurs et faire des trucs sympas.