Crie Plugins WordPress com Técnicas OOP

0
Tutoriais
10/12/2022
A+ A-
Email Print

O código orientado a objetos, entre outras coisas, pode ajudar a organizar e adicionar capacidade de reutilização ao seu código. Neste tutorial, ensinarei o básico para escrever um plugin WordPress usando técnicas orientadas a objetos. Usaremos a API do Dribbble como exemplo para este tutorial. Preparar?

O que vamos aprender:

  • Benefícios de usar OOP para plugins do WordPress.
  • Como configurar um shortcode.
  • Como configurar uma tag de modelo.
  • Como habilitar shortcode em widgets do WordPress.
  • Exemplo do mundo real usando a API do Dribbble.

A propósito, se isso parece muito avançado e você está apenas procurando por alguns plugins prontos que você pode baixar e usar em seu site, confira nosso curso gratuito sobre os melhores plugins WordPress para SEO, backup, segurança, e mais.

Por que usar POO?

Antes de prosseguir com este tutorial, você deve ter pelo menos uma compreensão elementar de escrever um plugin WordPress. Jonathan escreveu um tutorial incrível sobre “Como escrever um plug-in do WordPress”. Dê uma lida.

Criar plugins WordPress com código orientado a objeto é bastante eficiente e organizado, quando comparado ao uso de código processual. É mais fácil gerenciar a base de código e expandi-la usando técnicas de herança, que podem ser particularmente úteis ao escrever um plug-in grande.

Drible

Para escrever um plugin WordPress, primeiro precisamos de um senso de direção. Vamos escrever um plug-in que exibirá as últimas jogadas do Dribbble, usando sua API REST. Em seguida, adicionaremos suporte de shortcode para postagens e widgets e tag de modelo para temas.

1. Configurando a Classe Plugin

O código orientado a objetos é baseado em classes e métodos (funções). Vamos criar nossa classe principal, que irá interagir com os ganchos e filtros do WordPress.



As classes PHP têm uma função construtora, __construct, que é executado assim que uma nova instância de uma classe é instanciada.  Todos os ganchos e filtros do WordPress serão registrados no construtor de nossa classe de plugin.  Vamos seguir em frente e registrar um shortcode para nosso plugin.  o add_shortcode() function/hook ficará sob a função do construtor.


A nova instância de uma classe é registrada usando o new palavra-chave.  Consulte a última linha no código abaixo.




add_shortcode: O primeiro parâmetro é a tag shortcode e o segundo é a função de retorno de chamada.




Observe como estamos usando um array no parâmetro da função callback?  Para registrar funções callback dentro de um objeto, temos que usar um array.




O primeiro item do array faz referência ao objeto, via $this.  O segundo item no array é o nome do método dentro da classe.  Todos os ganchos e filtros devem ser referenciados assim quando dentro de uma classe.


Assim, sempre que o Dribbble shortcode precisa ser executado, ele chamaria o shortcode método do WPDribbble classe.


Ainda confuso?





2. Classe da API do Dribbble


Como atualmente não exigimos nenhuma função de API sofisticada, criaremos um wrapper de API bastante simples para o Dribbble.  Já existe uma biblioteca disponível para o Dribbble, mas, para este tutorial, vamos criar a nossa.  Isso ajudará você a entender os conceitos por trás deste tutorial.


Nós vamos escrever um DribbbleAPI objeto e registre um método chamado getPlayerShots() para interagir com a API do Dribbble e retornar uma série das últimas tacadas.


Vamos criar um novo arquivo para esta classe, chamado DribbbleAPI.php




No DribbbleAPI class, estamos configurando a seguinte variável de classe:


    

  • 
$apiUrl: O link para a API do Dribbble, para onde serão enviadas as chamadas.
    • 



Prefixamos a propriedade ou o nome da variável com public para especificar que o valor dessa propriedade pode ser recuperado de fora da classe.  Se, em vez disso, desejarmos limitar o acesso à propriedade apenas a esta classe e talvez a qualquer classe herdada dela, usaríamos o método protected prefixo.  Essa prática é conhecida como encapsulamento.  No nosso caso, definimos o $apiUrl propriedade como um protected propriedade.


Temos a base pronta para nosso wrapper da API do Dribbble.  Agora, vamos escrever um novo método, chamado getPlayerShots().  O objetivo deste método será consultar a API e converter o resultado em um array para uso dentro do nosso plugin.


apiUrl . 'players/' . $user . '/shots?per_page=" . $perPage);
         
        $array = json_decode($json["body']);
         
        $shots = $array->shots;
         
        return $shots;
    }
}




Saiba mais sobre wp_remote_get.




o getPlayerShots método tem dois argumentos.  O primeiro argumento é o user-id, que será usado na URL da API.  E o segundo argumento é o valor limite, que será usado para paginar os registros.


o getPlayerShots método usa WordPress' wp_remote_get função para consultar a API do Dribbble.  A API então responde à nossa consulta com uma string JSON, que é então analisada em uma matriz com a ajuda do json_decode função e enviado de volta para a função usando o return palavra-chave.


Isso é tudo o que exigimos da API no momento - simplesmente uma série de jogadas do jogador.  Se precisarmos de mais funcionalidades no futuro, podemos adicionar mais métodos à classe atual ou criar uma nova classe que estenda esta.  Mais uma vez, isso é chamado de herança.



3. Integrando o DribbbleAPI Classe


Esta é a parte divertida;  o recém-assado DribbbleAPI classe entrará em uso.  Vamos percorrer as fotos recuperadas da API e gerar uma lista html de fotos, que será passada para o shortcode e a tag de modelo.  Durante o loop, as imagens do Dribbble em tamanho real serão armazenadas em cache e salvas na pasta do plug-in, e as miniaturas serão geradas usando a biblioteca Imagine.  Você pode consultar a documentação e instalá-la de acordo com as instruções.  Você também pode usar a biblioteca de processamento de imagem de sua escolha para gerar miniaturas, você só precisará de pequenos ajustes no getImages método.


Para determinar se as imagens completas já estão armazenadas localmente, o caminho do plug-in é necessário.  Além disso, para gerar as miniaturas com a biblioteca Imagine, é necessário o URL do plug-in.  Para isso, criaremos duas variáveis ​​de classe chamadas pluginPath e pluginURL na nossa WPDribbble class e, em seguida, defina seus valores de dentro do método construtor.


Também criaremos o dribbbleApiObject variável para manter o DribbbleAPI objeto, que podemos usar mais tarde no getImages método.  É importante notar que temos que passar o DribbbleAPI objeto quando instanciamos o WPDribbble classe.


Definindo Variáveis ​​de Classe


pluginPath = dirname(__FILE__);
     
        // Set Plugin URL
        $this->pluginUrl = WP_PLUGIN_URL . '/wp-Dribbble';
        
        // Init DribbbleAPI Object
        $this->dribbbleApiObject = $dribbbleApiObject;
         
        add_shortcode('Dribbble', array($this, 'shortcode'));
    }
}


o getImages() Método


Crie um novo método dentro do WPDribbble classe, chamada obter imagens.




Dentro de uma classe, você pode usar nomes genéricos para funções.  Eles não entrarão em conflito com outros plugins ou funções integradas do WordPress, porque estão sob o namespace da classe.




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


    

  • 
$usuário - Nome de usuário ou ID de usuário do Dribbble. $user será usado ao registrar uma nova instância do DribbbleAPI classe.
    • 

  • 
$imagens - Número de imagens para renderizar. $images será usado ao consultar a API por meio do getPlayerShots método.
    • 

  • 
$largura e $altura - Imagine será usado para gerar miniaturas.
    • 

  • 
$caption - Opção para renderizar o título de uma imagem.
    • 



Em seguida, vamos incluir o DribbbleAPI aula no WPDribbble plugin, para que possamos criar uma nova instância dele para capturar as fotos.


...
require_once __DIR__ . '/DribbbleAPI.php';
...


Em seguida, vamos criar a instância do DribbbleAPI classe, quando instanciamos o WPDribbble classe.


...
...
$wpDribbble = new WPDribbble(new DribbbleAPI());
...
...


Como mencionado anteriormente, vamos percorrer o $shots array e salve as imagens em tamanho real localmente para fins de cache.  Para armazenar imagens completas e miniaturas geradas pelo Imagine, crie duas pastas.  nós vamos usar imagens completas para armazenar as imagens em tamanho real e cache para as miniaturas.


O HTML para a lista será gerado dentro do $shots ciclo.


public function getImages(int $user, int $images = 3, int $width = 50, int $height = 50, bool $caption = true) : string
{    
    $shots = $this->dribbbleApiObject->getPlayerShots($user, $images);
     
    if($shots) {
        $html[] = '
    ';
         
        foreach($shots as $shot) {
            $image = $shot->image_url; // url of the image
            $fileName = $shot->id . '.png'; // generating a filename image_id.png
            $thumbFileName="thumb_" .$shot->id . '.png';
            $destThumbFilePath = $this->pluginPath . '/cache/' .  $thumbFileName;
             
            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
            $imagine = new ImagineGdImagine();
            $image = $imagine->open($newImagePath);
            $thumbnail = $image->thumbnail(new ImagineImageBox($width, $height));
            $thumbnail->save($destThumbFilePath);
            $destThumbURL = $this->pluginUrl . '/cache/' .  $thumbFileName;
             
            if($caption) { // if caption is true
                $captionHTML = '
    ' . $shot->title . '
    ';
            }
             
            // combine shot url, title and thumbnail to add to the ul list
            $html[] = '
  • url . '" title="' .  $foto->título .  '">' .  $foto->título .  ''.$captionHTML.'
    • ';
        }
         
        $html[] = '
';
         
        return implode("n", $html);
    }


Adicionando aulas


É sempre uma boa ideia adicionar classes a cada elemento do seu plugin.  Isso fornece aos usuários avançados do seu plug-in a liberdade de personalizá-lo.  Evite usar CSS embutido para conteúdo gerado por meio de seu plug-in.



4. Configurando o código curto




Códigos de acesso, como o nome sugere, permitem que os usuários adicionem facilmente conteúdo complexo em postagens de blog.




Nós já temos o add_shortcode gancho pronto em nosso construtor de classe de plug-in.  Agora, vamos escrever o shortcode method dentro do nosso classque extrairá os atributos de shortcode e retornará as imagens do Dribbble usando o getImages() método.


Nós estaremos chamando nosso shortcode [Dribbble].  Como mencionado anteriormente, o nome do shortcode é determinado pelo primeiro parâmetro no add_shortcode função.  Ele será usado com os atributos necessários para o getImages() método.  Por exemplo: [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);
}


Adicionar suporte de código curto para widgets do WordPress


Por padrão, os widgets do WordPress não suportam shortcodes, no entanto, usando o widget_text filtro, podemos forçar o suporte de shortcode em widgets do WordPress.


Podemos adicionar o filtro em nosso WPDribbble construtor de objetos.


public function __construct(DribbbleAPI $dribbbleApiObject) : void
{
    // 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');

    $this->dribbbleApiObject = $dribbbleApiObject;
}



5. Configurando a tag de modelo


A tag template pode ser usada diretamente nos temas do WordPress.  O objetivo básico da tag template será criar uma nova instância do nosso WPDribbble aula e chame o getImages() método.  A tag template será uma simples função PHP e deve ser registrada fora da classe do plugin.  Ele precisa ter um nome exclusivo;  caso contrário, entrará em conflito com funções/plugins com nomes semelhantes.  Como nosso plugin é chamado WP-Dribbblechamaremos a tag de modelo, wp_Dribbble().


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


Voilá!


Parabéns!  Você escreveu com sucesso um plugin WordPress com OOP.  Se você tiver alguma dúvida, entre em contato e farei o possível para ajudá-lo.

Posted by

Tagged with
Newer Post
Older Post

Deixe uma resposta