Como criar um plugin de feed do Twitter para WordPress
Nem é preciso dizer o quanto o Twitter é popular? Muitos sites estão exibindo seus tweets mais recentes para os usuários. Normalmente, esses tweets são colocados na barra lateral ou no rodapé. No post de hoje, criaremos um plugin simples para WordPress que exibe os últimos tweets onde você quiser. Vamos criar um shortcode que pode ser colocado em qualquer lugar do seu site.
Como criar um plugin
Criar um plugin para WordPress não é uma ciência espacial. Um homem que conhece PHP e WordPress pode criar facilmente o plugin. Para nossa tarefa, estou criando uma pasta chamada ‘twitter-api’ no diretório ‘wp-content / plugins’.
Em seguida, crio ‘twitter-api.php’ e coloco na pasta ‘plugins / twitter-api’. Nosso arquivo de plugin ‘twitter-api.php’ precisa de alguns comentários, então eu o adiciono no formato abaixo.
/*
Plugin Name: Twitter API
Plugin URI: https://artisansweb.net
Description: This plugin will fetch your latest tweets and display it using shortcode [tweets]
Version: 1.0
Author: Sajid
Author URI: https://artisansweb.net
License: GPLv2 or later
Text Domain: artisansweb
*/Após adicionar o comentário acima, nosso plugin aparecerá na página de plugins de onde podemos ativá-lo. Mas como não escrevemos nenhum código, ele apenas é ativado, mas não faz nada. Vamos adicionar muito código em nosso plugin. Mas, por enquanto, apenas criamos a estrutura básica do nosso plugin.
class Twitter_API {
public function __construct() {
}
}Para evitar o acesso direto aos arquivos PHP de nosso plugin, devemos adicionar a linha abaixo após o comentário do plugin.
defined( 'ABSPATH') or die( 'No script kiddies please!' );Instale a biblioteca PHP do Twitter
O Twitter fornece APIs REST para desenvolvedores. Para nosso plugin, estamos usando uma biblioteca popular para Twitter que é construída em PHP. Aqui está o URL do git-hub para a biblioteca –https://github.com/abraham/twitteroauth
Para instalar esta biblioteca, irei abrir um prompt de comando na minha pasta ‘plugins / twitter-api’ e executar o comando abaixo.
composer require abraham/twitteroauthDepois de instalar a biblioteca, colocarei as linhas abaixo em nosso arquivo ‘twitter-api.php’.
require('vendor/autoload.php');
use AbrahamTwitterOAuthTwitterOAuth;Agora é a hora de registrar nosso aplicativo do Twitter. Para criar o aplicativo, vá para Aplicativos do Twitter e siga as etapas abaixo.
- Clique no botão ‘Criar novo aplicativo’.
- Preencha os campos Nome, Descrição e Site.
- Aceite o acordo e clique no botão ‘Criar seu aplicativo Twitter’.
- Na página seguinte, clique na aba ‘Chaves e Tokens de Acesso’. Nessa guia, você encontrará sua Chave e Segredo do consumidor. Copie esses detalhes e guarde-os em local seguro.
- Na mesma guia, você verá a seção ‘Seu token de acesso’. Clique no botão ‘Criar Token de Acesso’.
- Nesta etapa, copie seu token de acesso e o segredo do token de acesso. Mantenha esses detalhes seguros.
Criamos nosso aplicativo Twitter e também estamos prontos com nossas chaves de API. Para usar esses detalhes em nosso plugin, primeiro precisamos armazená-lo. Para isso, estamos criando página de opções para nosso plugin. Então, adiciono o código abaixo em nosso arquivo.
function __construct() {
add_action( 'admin_menu', array($this, 'ta_plugin_menu') );
}
function ta_plugin_menu() {
add_options_page('Twitter API', 'Twitter API', 'manage_options', 'twitter_api', array($this, 'ta_settings_page'));
}
function ta_settings_page() {
require_once('inc/ta-settings.php');
}O código acima adicionará nosso menu chamado ‘API do Twitter’ em Configurações em um painel. Neste estágio, precisamos criar o diretório ‘inc’ e colocar o arquivo ‘ta-setting.php’ nele.
No arquivo ‘ta-setting.php’, daremos a opção de armazenar os detalhes da API do Twitter. Estou adicionando o código abaixo neste arquivo. Estamos buscando valor (que armazenaremos na próxima etapa) para cada campo do banco de dados.
<h1><?php _e('Twitter Information', 'artisansweb'); ?></h1>
<form method="post">
<table class="form-table">
<tbody>
<tr>
<th scope="row"><label for="blogname"><?php _e('Consumer Key', 'artisansweb'); ?></label></th>
<td><input name="ta_consumer_key" id="ta_consumer_key" value="<?php if(get_option('ta_consumer_key')) echo get_option('ta_consumer_key'); ?>" class="regular-text" type="text"></td>
</tr>
<tr>
<th scope="row"><label for="blogname"><?php _e('Consumer Secret', 'artisansweb'); ?></label></th>
<td><input name="ta_consumer_secret" id="ta_consumer_secret" value="<?php if(get_option('ta_consumer_secret')) echo get_option('ta_consumer_secret'); ?>" class="regular-text" type="text"></td>
</tr>
<tr>
<th scope="row"><label for="blogname"><?php _e('Access Token', 'artisansweb'); ?></label></th>
<td><input name="ta_access_token" id="ta_access_token" value="<?php if(get_option('ta_access_token')) echo get_option('ta_access_token'); ?>" class="regular-text" type="text"></td>
</tr>
<tr>
<th scope="row"><label for="blogname"><?php _e('Access Token Secret', 'artisansweb'); ?></label></th>
<td><input name="ta_access_token_secret" id="ta_access_token_secret" value="<?php if(get_option('ta_access_token_secret')) echo get_option('ta_access_token_secret'); ?>" class="regular-text" type="text"></td>
</tr>
<tr>
<th scope="row"><label for="blogname"><?php _e('Number of Tweets', 'artisansweb'); ?></label></th>
<td><input name="ta_no_of_tweets" id="ta_no_of_tweets" value="<?php if(get_option('ta_no_of_tweets')) echo get_option('ta_no_of_tweets'); ?>" class="regular-text" type="number"></td>
</tr>
</tbody>
</table>
<p class="submit">
<input name="ta-submit" id="submit" class="button button-primary" value="<?php _e('Save Changes', 'artisansweb'); ?>" type="submit">
</p>
</form>Nesta página, inserimos os detalhes da API que precisamos salvar no banco de dados. Portanto, usei a ação ‘init’ e adicionei a lógica de envio na função de retorno de chamada.
add_action('init', array($this, 'ta_submit_callback')); //add this code in constructor
function submit_callback() {
if (isset($_POST['ta-submit'])) {
update_option( 'ta_consumer_key', $_POST['ta_consumer_key'] );
update_option( 'ta_consumer_secret', $_POST['ta_consumer_secret'] );
update_option( 'ta_access_token', $_POST['ta_access_token'] );
update_option( 'ta_access_token_secret', $_POST['ta_access_token_secret'] );
update_option( 'ta_no_of_tweets', $_POST['ta_no_of_tweets'] );
}
}Neste estágio, concluímos as configurações de back-end necessárias para nosso plug-in. Agora, vamos para o front-end, onde precisamos exibir os tweets mais recentes. Estamos criando shortcode para que possamos exibir tweets onde quisermos, apenas colocando nosso shortcode. No construtor, colocarei abaixo da linha de código.
//add this code in constructor
add_shortcode('tweets', array($this, 'ta_latest_tweets'));
if(get_option('ta_consumer_key')) {
$this->consumer_key = get_option('ta_consumer_key');
}
if(get_option('ta_consumer_secret')) {
$this->consumer_secret = get_option('ta_consumer_secret');
}
if(get_option('ta_access_token')) {
$this->access_token = get_option('ta_access_token');
}
if(get_option('ta_access_token_secret')) {
$this->access_token_secret = get_option('ta_access_token_secret');
}
$this->ta_no_of_tweets = get_option('ta_no_of_tweets')? get_option('ta_no_of_tweets'): 3;Também estamos buscando detalhes da API no construtor. Devemos declarar variáveis de classe como abaixo.
protected $consumer_key = '', $consumer_secret = '', $access_token = '', $access_token_secret = '', $ta_no_of_tweets;A seguir, devemos definir nossa função de retorno de chamada de código de acesso.
function ta_latest_tweets() {
$connection = new TwitterOAuth($this->consumer_key, $this->consumer_secret, $this->access_token, $this->access_token_secret);
$arr_tweets = $connection->get("statuses/user_timeline", ["count" => ($this->ta_no_of_tweets), "exclude_replies" => true]);
if ($arr_tweets && !empty($arr_tweets)) {
?>
<ul class="tweet-wrap">
<?php
foreach ($arr_tweets as $tweet) {
?>
<li>
<div>
<img src="<?php echo $tweet->user->profile_image_url; ?>">
<strong><?php echo $tweet->user->name ?></strong> @<span><?php echo $tweet->user->screen_name; ?></span>
</div>
<p><?php echo $tweet->text; ?></p>
</li>
<?php
}
?>
</ul>
<?php
}
}Estamos adicionando um pouco de GUI para nossa lista de tweets. Então, adiciono o arquivo CSS da seguinte maneira.
add_action('wp_enqueue_scripts', array($this, 'ta_include_css')); //add it in constructor
function ta_include_css() {
wp_register_style( "ta-custom-style", plugins_url('/twitter-api'). "/css/custom.css", array(), false, "all" );
wp_enqueue_style( "ta-custom-style" );
}No meu arquivo CSS, adiciono as propriedades abaixo para a classe ‘tweet-wrap’. Se desejar, você pode adicionar mais CSS de acordo com sua necessidade.
.tweet-wrap{
width: 300px;
list-style-type: none;
}Isso é tudo, concluímos nosso plugin que exibe os tweets mais recentes. Você pode baixar um zip de um plug-in clicando no link ‘Obter código do plug-in’ abaixo.