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.
Carioca, arquiteto de soluções e desenvolvedor de software desde 1996. Atualmente moro em Vila Nova de Gaia, Porto, Portugal.
“Perhaps the greatest challenge of my career is to identify which part of my profession is not a hobby.
The ease of logical understanding and the constant search for knowledge are great drivers of my career.”
You may also like this
Solução para consulta de distritos, concelhos, códigos postais e apartados da CTT Portugal
Web App Angular para consulta de CEP
Como alterar o país de onde acesso a internet com túnel. Mas é seguro?
WordPress com SQLite Otimizado
