loadmore

Este gancho é utilizado para adicionar a funcionalidade de carregamento assíncrono de posts dinamicamente, renderizando o script JavaScript necessário na página e preparando a URL de carregamento conforme o contexto atual ( posts, categorias, busca ).

Exemplo de uso:

Hook::append_action( 'loadmore', function() { 
    loadmore();
});

Com argumentos opcionais:

Hook::append_action( 'loadmore', function() { 
    loadmore([ 
        'selector'      => '#paging', 
        'file_location' => 'content/post-data.php', 
        'button_text'   => 'Ver mais' 
    ]); 
});

Argumentos padrões:

'selector'      => '#loader'
'button_text'   => 'Carregar mais'
'file_location' => 'loader.php'

Exemplo do JavaScript adicionado no código fonte da página:

<script src="https://dominio.ext/web/assets/js/loadmore.js"></script>
<script> 
new loadmore ({ 
    limit: 20, 
    content: '#loader', 
    url: 'https://dominio.ext/templates/content/loader.php?context=categoria&slug=dicas&async=true', 
    button: 'Carregar mais'
});
</script>
</body>
</html>

Observação: limit exibe o valor definido para Exibição de post por paginação em configurações de leitura no painél de controle.

Configuração necessária:

1. Dependências
/web/request/dependencies-loadmore.php
Este arquivo é responsável por carregar as dependências necessárias para que as requisições assíncronas utilizadas no loadmore.js para que funcionem corretamente.

Observação:
O código do arquivo dependencies-loadmore.php não é exibido na documentação, mas ele inclui configurações essenciais do sistema. O próprio nome do arquivo já deixa claro seu propósito.

2. Ajustes nos Templates
Nos templates como index.php, category.php, search.php que utilizam listagem com rows_exists() e show_rows(), remova os loops padrão e adicione um seletor id no elemento container onde o conteúdo será carregado.

Exemplo de template:

<div id="primary" class="flexbox">
    <?php search_title('<h1 id="master-title" class="cn_100">', '</h1>') ?> 
    <div class="cn_100"><?php post_count() ?></div>
    
    <main id="loader" class="cn_70"></main> <!-- id="loader" -->
</div>

O conteúdo será carregado automaticamente dentro do seletor #loader.

3. Arquivo de conteúdo assíncrono

O arquivo passado no parâmetro file_location, se nunhum passado: loader.php é o padrão. Deve conter:

<?php
require dirname(__DIR__, 2) . '/web/request/dependencies-loadmore.php';

if( rows_exists() ) :

    ob_start();

    while( rows_exists() ) : show_rows(); ?>

        <article>
            <h2><a href="<?php permalink(); ?>"><?php title() ?></a></h2>
            <?php featured_image_url('medium') ?>
            <div><?php content_summary() ?></div>
        </article>

    <?php endwhile;

    $content = ob_get_clean();

    echo json_encode([
        'content' => $content,
        'button'  => true
    ]);

else :

    echo json_encode([
        'content' => end_rows('Você chegou ao fim.'),
        'button'  => false
    ]);

endif; ?>

Esse é um exemplo básico

Importante:
O uso de:

require dirname(__DIR__, 2) . '/web/request/dependencies-loadmore.php';

é necessário para carregar as dependências do sistema no arquivo assíncrono carregado.
Com o template sendo utilizado no modo padrão, ou seja, não na raiz do diretório templates
Se o arquivo file_location estiver em um subdiretório do template ajuste o nível de diretório usando dirname(__DIR__, 3), ou mais, conforme a estrutura.

Notas:

• O gancho loadmore prepara automaticamente a URL de carregamento assíncrono de acordo com o contexto da página.
• O gancho é chamado na função foot() para garantir o carregamento correto do script.
• É possível personalizar o seletor id, o texto do botão e o arquivo PHP responsável por renderizar o conteúdo carregado, diretamente na função loadmore() passada no gancho.
• O gancho deve ser registrado no arquivo features.php do template ou um addon.
• A função end_rows() foi criada para exibir uma mensagem padrão no final da listagem e pode ser usada para evitar a repetição de código e manter tudo organizado no template.
• Seletores para estilização do botão e end_rows(): É só olhar no DOM :p ( ͡° ͜ʖ ͡°)