Créer son plugin WordPress orienté objet – techniques OOP

Le code orienté objet, entre autres choses, peut aider à organiser et à ajouter une réutilisation à votre code. Dans ce tutoriel, je vais vous apprendre les bases de l’écriture d’un plugin WordPress en utilisant des techniques orientées objet. Nous utiliserons l’API de Dribbble comme exemple pour ce tutoriel. Prêt?

Ce que nous allons apprendre:

• Avantages de l’utilisation d’OOP pour les plugins WordPress.
• Comment configurer un shortcode.
• Comment configurer une étiquette de modèle.
• Comment activer le shortcode dans les widgets WordPress.
• Exemple du monde réel en utilisant l’API de Dribbble.

Pourquoi utiliser OOP?

Avant d’aller plus avec ce tutoriel, vous devriez avoir au moins une compréhension élémentaire de l’écriture d’un plugin WordPress. Jonathan a écrit un tutoriel incroyable sur “Comment écrire un plugin WordPress” . Jetez y un coup d’oeil 

La création de plugins WordPress avec un code orienté objet est assez efficace et ordonnée, par rapport à l’utilisation du code procédural. Il est plus facile de gérer la base de code et de l’étendre en utilisant les techniques d’héritage, ce qui peut être particulièrement utile lors de l’écriture d’un grand plugin.

Dribble

Pour écrire un plugin WordPress, nous avons d’abord besoin d’un sens de direction. Nous allons écrire un plugin qui affichera les derniers plans de Dribbble , en utilisant leur API REST. Nous allons ensuite ajouter un support de shortcode pour les publications et les widgets, et un modèle de template d’étiquette pour les thèmes.

Étape 1 – Configuration de la classe Plugin

Le code orienté objet est basé sur des classes et des méthodes (fonctions). Créons notre classe principale, qui interagira avec les hooks et les filtres de WordPress.

class WPDribbble {
    public function __construct()
    {
    }
}
 
$wpDribbble = new WPDribbble();

Les classes PHP ont une fonction constructeur, __construct, qui est exécuté dès qu’une nouvelle instance d’une classe est instanciée. Tous les hooks et filtres WordPress seront enregistrés sous le constructeur de notre classe de plugins. Poursuivons et enregistrons un code court pour notre plugin. La fonction/hook add_shortcode() se placera sous la fonction constructeur.

La nouvelle instance d’une classe/objet est enregistrée en utilisant le mot-clé new. Reportez-vous à la dernière ligne du code ci-dessous.

class WPDribbble {
    public function __construct()
    {
        add_shortcode('Dribbble', array($this, 'shortcode'));
    }
     
    public function shortcode()
    {
    }
}
 
$wpDribbble = new WPDribbble();

• Add_shortcode – Le premier paramètre est la balise shortcode, et la seconde est la fonction callback.
  Avez vous Remarqué comment nous utilisons un array dans le paramètre de la fonction de rappel ? Pour enregistrer les fonctions de rappel dans un objet, nous devons utiliser un array.

Le premier élément du tableau renvoie l’objet, via $this. Le deuxième élément dans le array est le nom de la méthode dans la classe. Tous les hooks et les filtres doivent être référencés comme ceci dans une classe.

Encore confus?

# 1. Standard usage
add_shortcode('shortcode_name', 'shortcode_func');
 
function shortcode_func()
{
 // Contents of this function will execute when the blogger
// uses the [shortcode_name] shortcode.
}
 
# 2. With PHP 5.3, we can pass an anonymous function.
add_shortcode('shortcode_name', function() {
   // Contents of this function will execute when the blogger
  // uses the [shortcode_name] shortcode.
});
 
#3. Within a class
class WPDribbble {
    public function __construct()
    {
        add_shortcode('Dribbble', array($this, 'shortcode'));
    }
     
    public function shortcode()
    {
           // Contents of this function will execute when the blogger
          // uses the [shortcode_name] shortcode.
    }
}

Étape 2 – Dribbble API Class

Étant donné que nous n’exigons actuellement aucune fonction API fantaisiste, nous allons créer un wrapper API assez simple pour Dribbble. Il existe déjà une bibliothèque disponible pour Dribbble, mais, dans l’intérêt de ce tutoriel, nous allons en écrire. Cela vous aidera à comprendre les concepts derrière ce tutoriel.

Nous allons écrire un object DribbbleAPI et enregistrer une method appelée getPlayerShots() pour interagir avec l’API de Dribbble et renvoyer un array des dernières prises de vue.

Créons un nouveau fichier pour cette classe, appelé DribbbleAPI.php

class DribbbleAPI {
    // url to Dribbble api
    protected $apiUrl = 'http://api.dribbble.com/';
     
    // Dribbble username or user id
    protected $user;
}

Ci-dessus, nous configurons deux variables de classe.

• $ApiUrl – Le lien vers l’API Dribbble, où les appels seront envoyés.
• $User – Le nom d’utilisateur ou l’identifiant utilisateur d’un utilisateur Dribbble. Cette valeur sera définie à partir de la méthode constructeur ( __construct ).

class DribbbleAPI {
    // url to Dribbble api
    protected $apiUrl = 'http://api.dribbble.com/';
     
    // Dribbble username or user id
    protected $user;
     
    public function __construct($user)
    {
        $this->user = $user;
    }
}

Le constructeur est passé une variable $user, qui est transmise par le constructeur à la propriété de classe, appelée user .

Nous préfixons la propriété, ou le nom de la variable avec public pour spécifier que la valeur de cette propriété peut être récupérée de l’extérieur de la class . Si nous souhaitons plutôt limiter l’accès à la propriété uniquement dans cette class, et peut-être que toute class qui hérite de celle-ci, nous utiliserions le préfixe protected. Cette pratique est appelée encapsulation.

Nous avons la base prête pour notre emballage Dribbble API. Maintenant, nous allons écrire une nouvelle method, appelée getPlayerShots(). Le but de cette method sera d’interroger l’API et de convertir le résultat en un array pour l’utilisation dans notre plugin.

class DribbbleAPI {
    // url to Dribbble api
    protected $apiUrl = 'http://api.dribbble.com/';
     
    // Dribbble username or user id
    protected $user;
     
    public function __construct($user)
    {
        $this->user = $user;
    }
     
    public function getPlayerShots($perPage = 15)
    {
        $user = $this->user;
         
        $json = wp_remote_get($this->apiUrl . 'players/' . $user . '/shots?per_page=' . $perPage);
         
        $array = json_decode($json['body']);
         
        $shots = $array->shots;
         
        return $shots;
    }
}

En savoir plus sur wp_remote_get .

La fonction getPlayerShots retrive l’utilisateur à partir de la variable de classe. Il utilise la fonction wp_remote_get de WordPress pour interroger l’API Dribbble. L’API répond ensuite à notre requête avec une chaîne JSON, qui est ensuite analysée dans un array et renvoyée à la fonction en utilisant le mot-clé return .

C’est tout ce que nous exigeons de l’API en ce moment – tout simplement un array de prises de vue. Si nous nécessitons plus de fonctionnalités à l’avenir, nous pouvons soit ajouter plus de method à la class actuelle, soit créer une nouvelle class qui étend à celle-ci. Encore une fois, cela est appelé héritage.

Étape 3 – Intégrer la classe DribbbleAPI

C’est la partie amusante; La class DribbbleAPI fraîchement créée entrera en vigueur. Nous allons boucler sur les prises de vues depuis l’API, et générer une liste html de plans, qui sera transmis au shortcode et au modèle de template. Pendant la boucle, les images Dribbble de grande taille seront mises en cache et sauvegardées dans le dossier du plugin, et les miniatures seront générées à l’aide de TimThumb.

Pour déterminer si les images complètes sont déjà stockées localement, le plugin path est requis. De plus, pour générer les vignettes avec timthumb , l’url du plugin est requise. Pour cela, nous créerons deux variables de classe appelées pluginPath et pluginURL dans notre classe WPDribbble, puis assigner leurs valeurs à partir de la methode constructeur.

Paramétrage PluginPath et PluginUrl

class WPDribbble {
    protected $pluginPath;
    protected $pluginUrl;
     
    public function __construct()
    {
        // Set Plugin Path
        $this->pluginPath = dirname(__FILE__);
     
        // Set Plugin URL
        $this->pluginUrl = WP_PLUGIN_URL . '/wp-Dribbble';
         
        add_shortcode('Dribbble', array($this, 'shortcode'));
    }

Méthode getImages()
Créez une nouvelle method dans la class WPDribbble , appelée getImages .

Dans une class , vous pouvez utiliser des noms génériques pour les fonctions. Ils ne seront pas en conflit avec d’autres plugins ou les fonctions intégrées de WordPress, car ils sont sous l’espace de noms de la classe.

public function getImages($user, $images = 3, $width = 50, $height = 50, $caption = true)
{
}

• $User – Nom d’utilisateur ou ID utilisateur de Dribbble. $user sera utilisé lors de l’enregistrement d’une nouvelle instance de la classe DribbbleAPI .
• $Images – Nombre d’images à rendre. $images seront utilisées lors de l’interrogation de l’API via la méthode getPlayerShots .
• $Width et $height – Timthumb sera utilisé pour générer des vignettes.
• $Caption – Option pour rendre le titre d’une image.

Ensuite, nous allons inclure la classe DribbbleAPI dans la fonction getImages() et créer une nouvelle instance pour saisir les images.

public function getImages($user, $images = 3, $width = 50, $height = 50, $caption = true)
{
    include 'DribbbleAPI.php';
     
    $DribbbleAPI = new DribbbleAPI($user);
    $shots = $DribbbleAPI->getPlayerShots($images);
     
    if($shots) {
    }
}

La variable $shots dans le code est remplie d’un array de trois Dribbles récents du $user .

Comme mentionné précédemment, nous allons passer à travers le tableau $shots, et sauvegarder les images en taille réelle localement pour la mise en cache. Les images en cache seront utilisées avec TimThumb pour servir les miniatures. Pour stocker des images complètes et des miniatures générées par TimThumb, nous allons créer deux dossiers. Nous utiliserons full-images/ pour stocker les images en taille réelle, et cache/ pour les vignettes, car c’est le nom de dossier par défaut pour TimThumb.

Le code HTML de la liste sera généré dans la boucle $shots.

public function getImages($user, $images = 3, $width = 50, $height = 50, $caption = true)
{
 include 'DribbbleAPI.php';
 
 $DribbbleAPI = new DribbbleAPI($user);
 $shots = $DribbbleAPI->getPlayerShots($images);
 
 if($shots) {
 $html[] = '<ul class="wp-Dribbble">';
 
 foreach($shots as $shot) {
 $image = $shot->image_url; // url of the image
 $fileName = $shot->id . '.png'; // generating a filename image_id.png
 
 if (!file_exists($this->pluginPath . '/full-images/' . $fileName)) { // check if the full image exists
 $rawImage = wp_remote_get($image); // get the full image
 $newImagePath = $this->pluginPath . '/full-images/' . $fileName;
 $fp = fopen($newImagePath, 'x');
 fwrite($fp, $rawImage['body']); // save the full image
 fclose($fp);
 }
 
 // generate thumbnail url
 $localImage = $this->pluginUrl . '/timthumb.php?src=' . strstr($this->pluginPath, 'wp-content') . '/full-images/' . $fileName . '&w=' . $width . '&h=' . $height . '&q=100';
 
 if($caption) { // if caption is true
 $captionHTML = '<p class="wp-Dribbble-caption">' . $shot->title . '</p>';
 }
 
 // combine shot url, title and thumbnail to add to the ul list
 $html[] = '<li class="wp-Dribbble-list"><a href="' . $shot->url . '" title="' . $shot->title . '"><img src="' . $localImage . '" alt="' . $shot->title . '" /></a>'.$captionHTML.'</li>';
 }
 
 $html[] = '</ul>';
 
 return implode("\n", $html);
 }
}

Ajout de classes
C’est toujours une bonne idée d’ajouter des classes à chaque élément de votre plugin. Cela fournit aux utilisateurs avancés de votre plugin la liberté de le personnaliser. Évitez d’utiliser le CSS en ligne pour le contenu généré via votre plugin.

Étape 4 – Configuration du code court

Shortcodes, comme son nom l’indique, permet aux utilisateurs d’ajouter facilement du contenu complexe à des articles de blog.

Nous avons déjà le hook add_shortcode prêt dans notre constructeur de classe de plugin. Maintenant, nous allons écrire la method de shortcode dans notre class, ce qui va extraire les attributs shortcode et renvoyer les images en utilisant la méthode getImages() .

Nous allons appeler notre shortcode [Dribbble]. Comme mentionné précédemment, le nom du shortcode est déterminé par le premier paramètre dans la fonction add_shortcode. Il sera utilisé avec les attributs requis pour la méthode getImages() . Par exemple: [Dribbble user=haris images=5 width=100 height=100 caption=true].

public function shortcode($atts)
{
    // extract the attributes into variables
    extract(shortcode_atts(array(
        'images' => 3,
        'width' => 50,
        'height' => 50,
        'caption' => true,
    ), $atts));
     
    // pass the attributes to getImages function and render the images
    return $this->getImages($atts['user'], $images, $width, $height, $caption);
}

Ajouter un support Shortcode pour les widgets WordPress
Par défaut, les widgets WordPress ne prennent pas en charge les Shortcode, cependant, en utilisant le filtre widget_text, nous pouvons forcer le support shortcode dans les widgets WordPress.

Nous pouvons ajouter le filtre dans notre constructeur de la classe WPDribbble .

public function __construct()
{
    // Set Plugin Path
    $this->pluginPath = dirname(__FILE__);
 
    // Set Plugin URL
    $this->pluginUrl = WP_PLUGIN_URL . '/wp-Dribbble';
     
    add_shortcode('Dribbble', array($this, 'shortcode'));
     
    // Add shortcode support for widgets
    add_filter('widget_text', 'do_shortcode');
}

Étape 5 Configuration du modèle de template

Le modèle de template peut être utilisé directement dans les thèmes de WordPress. L’objectif principal modèle de template sera de créer une nouvelle instance de notre classe WPDribbble et appeler la méthode getImages(). Le modèle de template sera une fonction PHP simple et elle doit être enregistrée en dehors de la class plugin. Il doit avoir un nom unique; Sinon, il entrera en conflit avec les fonctions/plugins avec un nom similaire. Comme notre plugin s’appelle WP-Dribbble, nous appelons la modèle de template, wp_Dribbble() .

function wp_Dribbble($user, $images = 3, $width = 50, $height = 50, $caption = true)
{
    $wpDribbble = new WPDribbble;
    echo $wpDribbble->getImages($user, $images, $width, $height, $caption);
}

Voila!

Toutes nos félicitations ! Vous avez réussi à écrire un plugin WordPress avec OOP. Si vous avez des questions, faites-le moi savoir, et je ferai de mon mieux pour vous aider