Paginação da página de artigos
1. Carregue a biblioteca jQuery
Como é um Ajax acionado por jQuery, o carregamento da biblioteca jQuery é uma obrigação.
2. Formato da lista de artigos
Na página de sua lista de artigos (página inicial do Index.php, Archive.php), você precisa garantir que haja uma estrutura semelhante da seguinte maneira
<!-Contêiner contendo todos os artigos-> <div id = "content"> <!-contêiner para cada artigo-> <div> </div> <div> </div> <div> </div> <div> </div> <div> </div> <div> </div> <div> </div>
3. Adicione à navegação padrão
Como a paginação do Ajax cada vez recebe o conteúdo da próxima página, você só precisa ligar para a navegação padrão do WordPress. Adicione o código a seguir ao seu index.php (ou outra página de lista de artigos) para gerar a navegação padrão do WordPress.
<div id = "paginação"> <? php next_posts_link (__ ('carregar mais')); ?> </div>4.ajax Obtenha a próxima página
Adicione o seguinte código ao seu tópico arquivo JS
// Use Live () para tornar JS ainda válido para o novo conteúdo obtido através do Ajax $ ("#Paginação A"). Live ("Clique", function () {$ (this) .addclass ("carregamento"). Text ("carregamento ..."); Data (Data) .Find ("#Content .Post"); indefinido) {$ ("#paginação a"). Att ("href", nexthref);5. Virar a página de gatilhos de rolagem
Se você deseja girar automaticamente a página quando o mouse rola na parte inferior da página, você pode alterar o código para o seguinte estilo
// vinte o evento de rolagem $ (janela) .bind ("roll", function () {// determine se a barra de rolagem da janela está próxima da parte inferior da página se ($ (document) .ScrolLtop () + $ (window) .Height ()> $ (document) .height () - 10). "POST", URL: $ (this) .attr ("href") + "#content", sucesso: function (dados) {resultado = $ (dados) .find ("#content .post"); Removeclass ("carregamento"). Texto ("Carregue mais"); });}});6. Adicione CSS de navegação
Adicione uma seção CSS à navegação para embelezá -la. Você também pode preparar um diagrama de GIF para indicar que ele está carregando. A seguir, o estilo de melodia:
#paginação {preenchimento: 20px 0 0 30px; } #Pagination .NextPostSlink {Width: 600px; Cor: #333; Decoração de texto: Nenhum; exibição: bloco; preenchimento: 9px 0; Alinhamento de texto: centro; Size da fonte: 14px; } #Pagination .NextPostSlink: Hover {Background-Color: #cccccc; Decoração de texto: Nenhum; Radio de fronteira: 5px; -Moz-Border-Radius: 5px; -Webkit-Border-Radius: 5px; } #pagination .loading {Background: url ("imagens/carregamento.gif") 240px 9px sem repetição; Cor: #555; } #Pagination .Loading: Hover {Background-Color: transparent; Cursor: padrão; }Paginação de comentários
1. Prepare
Carregando a biblioteca jQuery, isso não é explicado.
2. Paginação de comentário do WordPress aberto
Abrir back -end - Configurações - Discussão, verifique a página para exibir comentários em "Outras configurações de comentários", defina o número de comentários. O número de comentários aqui é calculado apenas para os principais comentários e a resposta aos comentários não será calculada. Aqui, preenchi um número maior (15), porque a paginação de comentários é muito detalhada e tornará inconveniente que os usuários leiam comentários anteriores.
Depois de abrir o comentário do comentário em segundo plano, adicione o código a seguir para onde você precisa adicionar a navegação de paginação em comentários.
<Nav id = "Comentários-navi"> <? php paginate_comments_links ('prev_text =? & next_text =?');?3. SEO de Paging de comentários
Do ponto de vista do SEO, a paginação de comentários causará conteúdo duplicado (o conteúdo da paginação é o mesmo, e as palavras -chave e a descrição são as mesmas), por isso é fácil para blogs com muitos comentários para downgrade de seus direitos, porque eles são muito duplicados. Portanto, alguns tratamentos são necessários no SEO. A maneira mais conveniente e eficaz é usar meta tags. Adicione o código a seguir na metatag original do seu cabeçalho.php, para que as páginas que sejam pagas sejam proibidas de serem incluídas pelos mecanismos de pesquisa e impedem que o conteúdo seja duplicado.
<? php if (is_single () || is_page ()) {if (function_exists ('get_query_var')) {$ cpage = intval (get_query_var ('cpage')); $ commentpage = intval (get_query_var ('comentário-página')); } if (! vazio ($ cpage) ||! vazio ($ commentpage)) {echo '<meta name = "robots" content = "noindex, nofollow" />'; eco "/n"; }}?>4.ajax Comentários
De acordo com o exposto, há comentários no tópico. Para alcançar a paginação de comentários no Ajax, você só precisa de JavaScript para cooperar. No entanto, antes disso, você deve primeiro adicionar um elemento antes da lista de comentários para indicar que a lista está carregando ao exibir uma nova lista de comentários da página. Suponha que a estrutura do módulo de comentários do modelo de tópico comentários.php seja a seguinte:
<div> <h3 id = "Comentários-list-title"> Comentários </h3> <!-mostre novos comentários carregando-> <div id = "carregando-comments"> <pan> carregando ... </span> </div> <!-Lista de comentários-<li> <li> ... </li> ... </diM> <! <a href = "#"> 1 </a> ... </av> </div>
Adicione o seguinte código JS ao seu arquivo JS para implementar a paginação de comentários
// comente paging $ body = (window.opera)? (Document.compatmode == "css1compat"? $ ('Html'): $ ('body')): $ ('html, body'); // aciona a paginação ao clicar no link de navegação de paginação ('#comentários-navi a'). $ .ajax ({type: "get", url: $ (this) .attr ('href'), beforesend: function () {$ ('#comentários-navi'). remover (); $ ('. Comment_list'). REMOT (); $ ('#carregamento-comoll). $ ('#Comentários-listado'). Offset (). Top-65}, 800); $ ('#carregamento de comércio'). Após (resultado.fadein (500));CSS para barra de carregamento (somente para referência)
A cópia do código é a seguinte:
#carregamento de comércio {display: Nenhum; largura: 100%; Altura: 45px; Antecedentes: #A0D536; Alinhamento de texto: centro; Cor: #FFF; Size da fonte: 22px; altura da linha: 45px; }