Como permitir que os usuários alterem dinamicamente o número de postagens por página no WordPress

Considere o seguinte cenário: você tem um blog WordPress com centenas de posts. Na página de arquivo do seu blog, seis postagens aparecem por vez. Claro, há paginação para alternar entre postagens mais antigas e mais recentes. Mas e se você quiser dar aos usuários a opção de escolher o número de postagens que desejam exibir por página?

Neste novo tutorial, aprenderemos como obter essa funcionalidade. Para esta demonstração, trabalharei em uma instalação local com um tema filho de Twenty Twenty-One (v1.6 no momento da redação deste documento). No entanto, você pode incorporar facilmente o código que fornecerei aqui em seus temas personalizados.

Aqui está um vídeo rápido que demonstra a funcionalidade esperada:

Preste atenção em como a URL obtém um parâmetro extra quando a opção selecionada é alterada.

Isso soa como um bom exercício? Vamos mergulhar então!

1. Configurar o número de postagens exibidas por página

Por padrão, todas as páginas de arquivo do WordPress exibem dez postagens por página. Isso é algo que você pode querer configurar com base em seus layouts. Por exemplo, se seu design for baseado em um layout de três colunas, você provavelmente desejará mostrar nove postagens por página.

Para fazer isso, navegue até o Leitura submenu do Definições menu e alterar o valor do As páginas do blog mostram no máximo opção. No meu caso, vou mudar isso para seis.

2. Criar algumas postagens

Para testar isso, precisaremos de algum conteúdo. No meu caso, criei 35 posts.

3. Adicione o PHP e JavaScript necessários ao seu tema

Como mencionei anteriormente, para este exemplo, configurarei um ambiente local e trabalharei com um tema filho do tema Twenty Twenty-One. Vou nomear meu site local Parque infantil. Presumo que você esteja familiarizado com a criação de temas filhos, portanto, pularei essas etapas e discutirei apenas as partes responsáveis ​​pela criação da funcionalidade de destino.

Você pode encontrar todos os arquivos do tema filho neste repositório do GitHub caso queira instalá-lo e segui-lo como seu tema ativo.

Aqui está a estrutura do tema:

Crie a lista suspensa

Vamos começar do front-end e construir o menu suspenso que permitirá que os usuários decidam quantas postagens serão exibidas por página.

Aqui estão os passos que seguiremos:

• Pegue o padrão postagens por página valor (6) e gerar alguns múltiplos deste valor (12, 18, 24). Claro, aqui, você pode passar valores independentes do padrão posts_per_page opção.
• Armazene todos esses valores gerados dentro do $posts_to_show variedade.
• Crie um select elemento com opções que virão dos valores do array.
• O valor de cada opção será o URL atual (o valor de $_SERVER['REQUEST_URI']) com o adicional posts_to_show parâmetro anexado a ele. Para isso, usaremos o add_query_arg() função.
• Adicione o selected atribuir à opção apropriada com base no valor da posts_to_show parâmetro.

Aqui está o código PHP necessário:

  
    >
      
    
  							

E a marcação gerada:

Dependendo da estrutura do seu tema, esse código pode existir em lugares diferentes. No meu caso, vou colocá-lo no dynamic-posts-per-page.php Arquivo. Em seguida, incluirei esse arquivo nas áreas em que preciso dessa funcionalidade. Como eu preciso nas páginas inicial, blog e arquivo, substituirei o tema pai index.php e archive.php arquivos da seguinte forma:

Vale a pena notar que ao invés de ter alguns valores pré-definidos a partir dos quais os usuários podem escolher os posts por página, uma implementação alternativa será dar-lhes a liberdade de digitar o número desejado por meio de um input elemento.

Em qualquer caso, uma boa regra geral é higienizar os dados de entrada (e geralmente o que é gerado), especialmente quando não temos controle total sobre eles, para evitar ataques comuns como XSS (Cross-site scripting). Felizmente, o WordPress vem com várias funções integradas para esse alvo, mas sempre podemos usar outras funções PHP integradas. Por exemplo, para você ter uma ideia, no código acima eu usei o esc_url() função para escapar da URL de saída.

Alterar a consulta principal

Para alterar o padrão posts_per_page valor e mostrar as postagens corretas com base na seleção dos usuários, aproveitaremos o pre_get_posts gancho.

Aqui está o que faremos:

• Use duas condicionais para garantir que essa modificação ocorra apenas para a consulta principal e nas páginas de front-end. A partir daqui, podemos dar um passo adiante se quisermos e limitar essa funcionalidade apenas a determinados tipos de postagem, a página do blog, etc. Aqui estão as tags condicionais que o WordPress fornece e podem ajudá-lo a ser mais específico.
• Verifique se o posts_to_show parâmetro foi definido na URL. Lembre-se que se estiver definido, significa que o usuário fez uma seleção. Nesse caso, usaremos esse valor de parâmetro para definir as postagens desejadas por página. Em qualquer outro caso, o posts_per_page O valor da opção determinará o número de posts que devem aparecer em cada página.

Aqui está o código PHP necessário que devemos adicionar ao functions.php Arquivo:

function filter_posts( $query ) {
  if ( $query->is_main_query() && ! is_admin() ) :
    if ( isset( $_GET['posts_to_show'] ) ) :
      $posts_to_show = $_GET['posts_to_show'];
    else :
      $posts_to_show = get_option( 'posts_per_page' );
    endif;
    $query->set( 'posts_per_page', $posts_to_show );
  endif;
}
add_action( 'pre_get_posts', 'filter_posts' );

Recarregue a página

Por último, mas não menos importante, forçaremos a página a recarregar sempre que um usuário alterar a opção selecionada.

Aqui está o código JavaScript que devemos adicionar ao nosso tema:

forcePageReloadOnSelectChange();

function forcePageReloadOnSelectChange() {
  const selects = document.querySelectorAll("select.posts-per-page");
  for (const select of selects) {
    select.addEventListener("change", function () {
      location.href = this.value;
    });
  }
}

No meu caso, vou adicionar esta peça ao main.js arquivo localizado no assets pasta.

Conclusão

Isso é tudo, pessoal! Hoje aprendemos como dar aos usuários a opção de escolher as postagens que desejam exibir por página. Isso pode ser um ótimo complemento para seus sites WordPress, especialmente se suas páginas de arquivo contiverem muitas postagens e os usuários precisarem clicar muito até ver todas elas.

Espero que você tenha gostado deste pequeno exercício do WordPress tanto quanto eu e que tenha ajudado você a aprender uma ou duas coisas sobre o desenvolvimento de temas do WordPress.

Como sempre, muito obrigado por ler!