Tutoriel WordPress: Comment créer un plugin de page génial

Article écrit par:
  • Inbound Marketing
  • Mise à jour: Sep 15, 2014

Note: Nous ne supportons plus ce plugin WP car l'auteur n'écrit pas pour nous pour le moment.

À partir d'aujourd'hui, chaque semaine, nous vous proposerons un didacticiel de codage génial, vous expliquant comment créer des contenus personnalisés avec WordPress, du plus simple au plus avancé. Aujourd'hui, nous allons créer un plugin (vous apprendrez donc les étapes de base à suivre) pour générer une galerie «page flip», à l'aide de JS.

Je parie que vous en avez déjà vu une de vos débuts sur le Web, mais celle-ci était principalement basée sur le flash, qui est maintenant assez déprécié (il a toujours sa valeur, mais ce n’est plus la meilleure option pour ce genre de chose).

La fonctionnalité de base sera créer un nouveau type de galerie basé sur quelques images et leurs tailles, via shortcode.

Commençons alors!

Zip & Installer

La meilleure façon de le voir en action est de l'installer vous-même. Vous pouvez télécharger ici. Installez et activez le plugin, il ne vous reste plus qu'à ajouter le shortcode dans une page, comme ceci:

[flip_book ids = "78 79 78 79 79 78 78 79 79" width = "78" height = "300" display = "double"]

Aperçu rapide

Et voici le genre de résultat que vous obtiendrez:

Effet Flipbook

Mais quelle sorte de magie noire s'y passe? Eh bien, c'est assez simple en fait. Apprenons à créer quelque chose comme ça.

L'en-tête

Tout d'abord, vous devrez créer un nouveau dossier et un nouveau fichier .php. À ce stade, il serait formidable de disposer d'un environnement de test afin de pouvoir analyser et tester des éléments.

Le fichier et le dossier doivent avoir un nom simple et unique, vous éviterez ainsi les conflits avec les plugins existants. Ensuite, le contenu de base de notre fichier ressemble à ceci:

/ * Nom du plugin: Galerie FlipBook Description: Créez un shortcode pour les galeries de flipbooks. Version: 1.0 Auteur: Licence de blog Web Revenue: GPL2 * /

Assez simple, hein? Une fois que vous avez créé ce fichier, votre plugin apparaît dans la liste sous WP admin> Plugins. Vous pouvez l'activer (mais si vous ne disposez que de ce contenu dans votre fichier, cela ne modifiera pas beaucoup votre site).

Appeler des scripts

Nous devons maintenant inclure quelques atouts externes importants ici. Les fichiers externes requis pour les fonctionnalités de base sont les suivants:

  • jQuery (1.9 +)
  • Script Turn.js
  • Tournez le style de base

Si vous ajoutez simplement les balises script et style, vous rencontrerez des problèmes. Par exemple, le double appel jQuery va probablement casser votre site. De plus, WordPress lui-même ne "saura" pas que vous avez créé ces éléments, donc si un autre plugin appelle turn.js à nouveau ou un style différent, cela cassera votre site.

C'est pourquoi nous devrions toujours utiliser les fonctions wp_enqueue_script et wp_enqueue_style. Voici l'utilisation de base:

function plugin_scripts () {wp_enqueue_script ('jquery'); wp_enqueue_script ('turn', plugins_url ('js / turn.js', __FILE__), array ('jquery'), '1.3', false); wp_enqueue_style ('turnCSS', plugins_url ('css / style.css', __FILE__), false, '1.3', 'all'); }

Nous appelons les éléments externes de différentes manières 3, les voici:

  • Appeler un élément existant: jQuery - Nous n'avons pas besoin de passer beaucoup de paramètres si nous savons avec certitude que WordPress charge déjà ce script, nous lui disons simplement «Mec, ce script DOIT être ici, sinon notre code ne le sera pas. travail"
  • Création d'un nouveau script - vous devrez transmettre certains attributs tels que nom, emplacement du fichier, éléments obligatoires (dans ce cas, jQuery est nécessaire), version et s'il est chargé dans le pied de page ou dans l'en-tête (false = en-tête, true = pied de page)
  • Création d’un nouveau style - À peu près la même chose que le précédent, avec une petite différence dans le dernier attribut, qui indique le type de support utilisé pour ce style.

Lorsque vous appelez des scripts externes, vous devez prendre en compte l’importance du code qui dépendra de ce plugin. C'est essentiellement ce qui définit si votre fichier sera appelé dans l'en-tête ou le pied de page.

Dans notre cas, nous avons quelques scripts supplémentaires pour configurer la galerie uniquement lorsque son HTML est créé, et cela sera ajouté dans le corps. C’est la raison pour laquelle nous devons obligatoirement ajouter ce script dans la tête, sinon lorsque notre code est appelé la fonction «tourner» n’est pas encore là.

Après ce joli code, nous devons dire à WordPress de les charger en tant que scripts, l'action «wp_enqueue_scripts» fera ceci:

add_action ('wp_enqueue_scripts', 'plugin_scripts');

Le Shortcode

Commençons par l'action pour créer le shortcode. C'est assez simple, il vous suffit d'ajouter le déclencheur de shortcode et la fonction qui sera exécutée:

add_shortcode ("flip_book", "create_flip_book");

Maintenant, nous devons créer notre fonction et obtenir nos attributs. Mais certains attributs peuvent être facultatifs, ce qui signifie que nous devrons leur créer des valeurs par défaut. Nous pourrions créer beaucoup de tests si l'attribut est vide, mais c'est l'un des cas où l'opération ternaire est meilleure que l'appel régulier if.

Les opérations ternaires sont des types d'instructions if directement dans la valeur de la variable. Si suit cette structure:

$ variable = (CONDITION)? "VALEUR SI LA CONDITION EST VRAIE": "VALEUR SI LA CONDITION EST FAUX";

Vous pouvez les voir en action dans la première partie de notre fonction:

function create_flip_book ($ attr) {// Préparation des identifiants à traiter $ array ['ids'] = explode (", $ attr ['ids']); // mode d'affichage $ array ['display'] = empty ($ attr ['display'])? "single": $ attr ['display']; // valeur standard // largeur $ array ['width'] = vide ($ attr ['width'])? 400: $ attr ['width']; // hauteur $ tableau ['hauteur'] = vide ($ attr ['hauteur'])? 300: $ attr ['height'];
    // HTML et le reste du code va ici}

Ensuite, nous devrons créer le code HTML et l'appel de base pour nos images. Un autre point important ici est d'ajuster la taille si nous utilisons le style magazine (la largeur devrait être 2x puisque nous aurons des images 2 au lieu d'une):

<? php if ($ array ['display'] == "double") {$ array ['width'] = $ array ['width'] * 2; } // HTML, JS et Black Magic?> <Div id = "flipbook"> <? Php pour ($ i = 0; $ i <sizeof ($ array ['ids']); $ i ++) {?> < div> <? php echo wp_get_attachment_image ($ array ['ids']] [$ i], 'complet'); if ($ array ['display'] == "single") {?> <span> <? = "". ($ i + 1)?> / <? echo "" .sizeof ($ array ['ids'])?> </ span> <? php} else {?> <spanright ":" left ");?>"> <? php echo "". ($ i + 1)?> / <? echo "" .sizeof ($ array ['ids']); ?> </ span> <? php}?> </ div> <? php}?> </ div> <script type = "text / javascript"> jQuery ("# ​​flipbook"). turn ({width: < ? php echo $ array ['width'];?>, height: <? php echo $ array ['height'];?>, autoCenter: true, display: '<? php echo $ array [' display ']; ?> ', // accélération page simple ou double page: true, gradients:! jQuery.isTouch,}); </ script>

Que pensez-vous?

Maintenant, vous pouvez modifier et modifier cela à votre guise, en ajoutant plus d'options (consultez leurs exemples impressionnants pour plus d'inspiration), en ajustant ce qui ne fonctionne pas pour vous ou en le combinant avec d'autres plugins.

Avez-vous un concept WordPress que vous souhaitez apprendre un peu plus? Peut-être quelque chose que vous voulez apprendre à faire? Faites-nous savoir via les commentaires et nous serons heureux de l'inclure dans un futur post!

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.