Infinite Scroll do WordPress e PollDaddy - Devin
Integração do Infinite Scroll com PollDaddy (Ratings)
Integração do Infinite Scroll com ShareThis
No WordPress, existe um plugin chamado Infinite-Scroll que faz justamente isso. Toda vez que um usuário vai até o final da página, o plugin reconhece e manda uma requisição AJAX pedindo a próxima página. Quando o navegador a recebe, o plugin monta automaticamente via JS e seletores CSS a parte dos posts no lugar correto, implementando assim o recurso de scroll infinito.
Em uma grande variedade de temas, ele funciona automaticamente. Mas esse não foi o caso daqui do Devin, que precisou ter uma configuração específica para o tema (o que o plugin suporta muito bem). Em resumo, eu só precisei configurar o plugin para identificar a div de conteúdo e o link que passa para a próxima página (que no WordPress é geralmente o /page/2/, /page/3/, e por aí vai). O resultado é o que dá para ver na versão atual desse site, nas listagens de posts.
Problema: diversos plugins para WordPress montam a sua funcionalidade em javascript. Quando uma página é carregada via AJAX e montada em outra, o javascript da página não é carregado automaticamente. Por isso, as páginas seguintes de listagem de posts poderiam ficar incompletas.
Para resolver isso, o Infinite-Scroll tem uma configuração chamada Callback. Uma callback serve para você executar um código JavaScript depois do carregamento do plugin. E é assim que resolvemos o problema desses plugins com o Infinite-Scroll…
O PollDaddy é um plugin da Automattic (mesma empresa que faz o WordPress) que disponibiliza enquetes e votações para sites. Aqui no Devin, usei o Polldaddy para fazer os "joínhas" (e os "joínhas, só que não) dos posts. Ele possui um plugin específico para WordPress, o Polldaddy Polls & Ratings, que faz a integração entre o site e o serviço da Polldaddy.
Depois de instalado e ativado, você pode dizer ao plugin para incluir automaticamente os botões nos lugares certos, mas não era o que eu queria. Como o meu tema é bem personalizado, eu queria incluir as tags em algum lugar específico.
E descobri que para incluir o PollDaddy em algum lugar específico, basta chamar a função:
if (function_exists('polldaddy_get_rating_html')) { echo polldaddy_get_rating_html(); }
(Detalhe: só consegui descobrir isso depois de olhar uma linha do ChangeLog!)
Até aí tudo bem. Mas vendo como o plugin funciona, percebi que essa função de tema apenas gera um trecho de HTML, mas todo o conteúdo importante é gerado por um javascript. Esse javascript é executado automaticamente no rodapé da página (footer), e apesar de funcionar bem na página, quando o Infinite-Scroll carrega a outra via AJAX, esse javascript não é carregado! E não tinha função específica que pudesse ser colocada na Callback do Infinite-Scroll pra remediar isso…
A solução! O WordPress.com já tinha implementado o Infinite Scroll em seus blogs e temas, por isso o plugin do Polldaddy tinha suporte a isso (só que estava bem obscuro. Então eis a solução que encontrei:
1. Edite o arquivo functions.php de seu tema, incluindo a seguinte função:
// Suporte a Infinite Scroll + Polldaddy
// $id = ID da Coleçao no Polldaddy
function polldaddyrating($id, $postid, $title = "", $permalink = "") {
$unique_id = is_page() ? 'wp-page-'.$postid : 'wp-post-'.$postid;
$item_id = is_page() ? '_page_'.$postid : '_post_'.$postid;
$unique_id = wp_strip_all_tags( $unique_id );
$item_id   = wp_strip_all_tags( $item_id );
$item_id   = preg_replace( '/[^_a-z0-9]/i', '', $item_id );
$settings = json_encode(array(
'title'     => rawurlencode( trim( $title ) ),
'permalink' => esc_url( $permalink ),
'item_id'   => $item_id
$data = esc_attr($settings);
return <<<SCRIPT
<div class="pd-rating" id="pd_rating_holder_{$id}{$item_id}" data-settings="{$data}"></div>
PDRTJS_settings_{$id}{$item_id}={$settings};
Isso é basicamente a mesma coisa que o plugin faz quando usa o suporte à Infinite Scroll no WordPress.com. A idéia do funcionamento é inteligente: ao invés de executar um javascript, ele armazena as informações de cada post (que é um JSON) em um atributo HTML5 (data-settings) para depois ser lida pela CallBack do Infinite-Scroll.
2. Agora no arquivo do seu tema, utilize a função para gerar o HTML correto:
// Variáveis no começo do template, para serem usadas depois
$polldaddy_id = '<ID DO SEU POLLDADDY>';
$title = apply_filters( 'wp_title', get_the_title(), '', '' );
<?php echo polldaddyrating($polldaddy_id, $postid, $title, $permalink); ?>
Esse código vai gerar o código HTML para o post atual dentro do Loop.
3. Carregue o javascript no rodapé da sua página
Logo antes da tag </body>:
<script type="text/javascript" charset="UTF-8" src="http://i.polldaddy.com/ratings/rating.js"></script>
4. Configure o Infinite-Scroll para, no Callback, executar esse javascript novamente
Em Configurações – Infinite Scroll – Callback, adicione as seguintes linhas:
// Polldaddy Ratings
var PDRTJS_doc = document.getElementsByTagName("div");
var PDRTJS_id = "";
for (var i = 0; i < PDRTJS_doc.length; i++) {
if (PDRTJS_doc[i].id.substring(0, 17) == "pd_rating_holder_") {
PDRTJS_id = PDRTJS_doc[i].id.replace(/pd_rating_holder_/, "");
var PD_SETTINGS = document.getElementById('pd_rating_holder_' + PDRTJS_id);
PD_SETTINGS = PD_SETTINGS.getAttribute('data-settings');
eval("PDRTJS_" + PDRTJS_id + " = new PDRTJS_RATING(" + PD_SETTINGS + ");");
Toda vez que o Infinite Scroll carregar uma nova página via AJAX, esse javascript irá procurar por todos as tags div que começam com pd_rating_holder_, ler as configurações da tag HTML5 data-settings que geramos no passo 1 e executar o código para gerar os botões de rating.
Essa função foi obtida diretamente do rating.js e modificada para ler em tempo real os atributos HTML5.
Agora além dos ratings estarem em qualquer lugar que você queira dentro do tema, o Infinite Scroll vai executar a geração dos botões nas páginas que requisitar via AJAX.
Aproveitando a deixa, o plugin de WordPress Share This foi utilizado aqui para gerar botões para compartilhar nas redes sociais e outros sites. Este plugin também monta os botões com uma chamada javascript, e por isso a página carregada via AJAX pelo Infinite Scroll não vai executar essa montagem automaticamente.
Agora é mais fácil, basta ir em Configurações – Infinite Scroll – Callback e adicionar a linha:
// Botões do ShareThis
Polldaddy Support – Poll callback
Polldaddy Support – Dynamically Load a Poll or Rating
WordPress Suport – Infinite scroll + addthis
ajax dica infinite scroll javascript php plugins Wordpress
Uma resposta para "Infinite Scroll do WordPress e PollDaddy"
Sytropin disse:
21 de novembro de 2015 às 6:53 am
They aswell abate the block bounden of to androgen receptors. The liposterolic abstract of saw palmetto accumulated with beta-sitosterol a phytosterol accepted to abounding plants and grains has produced notable