Decidi criar uma página para o site que contivesse notícias atualizadas de forma que eu pudesse as ler de uma só fonte e de qualquer lugar ou dispositivo que estiver usando.

O melhor protocolo para receber as notícias é claro que é o RSS, sem sombras de dúvidas, já que a maioria utilização este padrão. No passado, havíam projetos opensource que faziam este trabalho bem, como o projeto do SourceForge Gregarius, mas infelizmente foi descontinuado em 2013.

Estudei alguns frameworks e optei pela versão gratuita do plugin WP RSS Aggregator para fazer o trabalho mais complicado de obter organizadamente as notícias e cadastrá-las no wordpress. O WP RSS Aggregator me poupou todo o trabalho de fazer a leitura e de gerar atividades para o gestor de tarefas da plataforma. Só que ao iniciar a utilização percebi que são necessários plugins adicionais para poder ter mais controle da camada de apresentação. Recorri ao site deles para melhorar a apresentação usando as classes CSS, que ajudaram muito, mas ainda não tinha as informações que eu queria: IMAGEM e DESCRIÇÃO, para ampliar a auto-interpretação da notícia e, decisão, se farei ou não a leitura, in loco, clicando no link. Normalmente os add-ons oferecidos no site resolvem a grande maioria dos casos.

Foi aí que veio o insight de obter tais informações diretamente das publicações através do Protocolo OpenGraph, que tanto tem ajudado nas otimizações SEO. Para usar o OpenGraph, sem ter que re-inventar a roda, usei a classe php do projeto github OpenGraph do Scott MacVicar.

Criei uma rotina em javascript acessando actions do wordpress, em php, por ajax, de forma que pudesse manipular a informação depois da página toda completa, causando um efeito de lazy-loading para as imagens e para a descrição da notícia, enquanto já posso ir lendo.

Para usar o protocolo OpenGraph no worpress é preciso, primeiramente, declarar a classe do Scott no arquivo functions.php do tema ativo:

require_once(‘/caminho-completo/opengraph-master/OpenGraph.php’);

Feito isso já pode ser criada a action no wordpress. Eu poderia (e deveria) ter feito uma action, mas por fins de depuração, separei as duas, como você pode ver abaixo.

A primeira action, obterImagemOpenGraph, obtém o link da imagem, a partir de uma URL:

add_action(‘wp_ajax_obterImagemOpenGraph’,’obterImagemOpenGraph’);
add_action(‘wp_ajax_nopriv_obterImagemOpenGraph’,’obterImagemOpenGraph’);
function obterImagemOpenGraph(){
$urlParam = $_POST[‘URL’];
$graph = OpenGraph::fetch($urlParam);
$retorno = ”;
foreach ($graph as $key => $value) {
if ($key == ‘image’) {
$retorno .= “$value”;
}
}
echo $retorno;
}

A segunda action, obterDescricaoOpenGraph, obtém a descrição, também usando a url como parâmetro.

add_action(‘wp_ajax_obterDescricaoOpenGraph’,’obterDescricaoOpenGraph’);
add_action(‘wp_ajax_nopriv_obterDescricaoOpenGraph’,’obterDescricaoOpenGraph’);
function obterDescricaoOpenGraph(){
$urlParam = $_POST[‘URL’];
$graph = OpenGraph::fetch($urlParam);
$retorno = ”;
foreach ($graph as $key => $value) {
if ($key == ‘description’) {
$retorno .= “$value”;
}
}
echo $retorno;
}

Por fim, o código javascript que realiza a leitura após a página estar toda carregada.

<?php
$script = ‘<script>’;
$script .= ‘var ajaxurl = “‘ . admin_url(‘admin-ajax.php’) . ‘”;’;
$script .= ‘</script>’;
echo $script;
?>

<script>
window.onload = function() {
var list = document.getElementsByClassName(“rss-aggregator”)[0];
Array.prototype.forEach.call(list.childNodes, function(el) {
var texto = el.innerHTML;
var urlNews = el.childNodes[0].href;
var img = urlNews;
jQuery.ajax({ url: ajaxurl, type: ‘POST’,
data: { ‘action’: ‘obterImagemOpenGraph’, ‘URL’: urlNews },
success: function( data ){
jQuery.ajax({ url: ajaxurl, type: ‘POST’,
data: { ‘action’: ‘obterDescricaoOpenGraph’, ‘URL’: urlNews },
success: function( data2 ){
var retorno = data2.substring(0,data2.length-1);
el.innerHTML = “<div class=’wprss-avm-img’><img class=’img-responsive’ src='”+ data +”‘></div>” + “<div class=’wprss-avm-text’>”+ retorno +”</div><br><span class=’wprss-avm-leiamais’>Leia Mais: </span>” + texto;
},
error: function (response){
console.log(response);
}
});
},
error: function (response){
console.log(response);
}
});
});
};
</script>

 

A integração completa por ser vista diretamente na página:

https://www.andremesquita.com/news/

Espero que esta pequena implementação e integração de códigos ajude.

 

 

 

 

 

Etiquetas:, ,

Leave a Reply