Criando um site de notícias personalizado no WordPress

pensamento-comportamento
Padrão

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:

Notícias Atualizadas

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

 

 

 

 

 

OutSystems

outsystems
Padrão

Já ouviu falar em OutSystems?

Segundo a própria fabricante portuguesa:

The OutSystems Platform is a high-productivity platform as a service (PaaS) intended for developing and delivering enterprise web and mobile applications, which run in the cloud, on-premises or in hybrid environments. The current version is 10, for both the paid and unpaid versions – developers are permitted personal cloud environments to use the platform without charge.

Ainda estou no início do estudo mas imagine a capacidade de, a partir de um modelo de dados sólido, e bem construído, gerar um aplicativo pronto.

Em meados de 2005, diante da necessidade de aumentar a produção para gerar aplicativos que atendessem a campanhas de telemarketing específicas da Embratel, cheguei a criar uma ferramenta parecida, em Delphi, que gerava códigos-fonte Delphi para novas aplicações. Era basicamente o mesmo engine, mas bem mais limitado porque não era um projeto e sim uma ferramenta de produção.

A partir do meu modelo de dados, realizava a leitura do dicionário de dados diretamente do banco de dados e gerava automaticamente um novo sistema, com controladores, gerentes de negócio, modelos e views, em Delphi, a partir do schema.

Mas porque será que remeti minha lembrança ao meu engine? Porque a OutSystems resolveu alguns dilemas e criou uma interface pronta para a edição do sistema, bem representado e dividido, facilitando a manutenção e evolução, minimizando a ocorrência de erros semânticos e lógicos, totalmente na nuvem.

No YouTube existem inúmeros vídeos explicativos no canal da OutSystems.

Senhor Programador, se tiver um tempinho, não deixe ler sobre ele. É bem interessante. Se tiver interesse em aprender, acesse a plataforma de treinamento.

Grande Abraço