Comment implémenter la pagination d'articles dans WordPress

Comment implémenter la pagination d'articles dans wordpress ?

En raison de la longueur, la vitesse de chargement de la page est trop lente et l'expérience utilisateur est réduite. Par conséquent, nous devons trouver un moyen de paginer le long article. Après avoir cherché, j'ai trouvé une solution de code. c'est très bien. Après utilisation personnelle, il est effectivement efficace, je le partage donc ici Si vous êtes intéressé, ne le manquez pas

Recommandé : "tutoriel wordpress"

Récemment, j'ai découvert que de nombreux articles sont accompagnés d'images et sont relativement longs. Cela entraînera un chargement trop lent de la page, ce qui n’est pas propice à l’expérience utilisateur. Surtout la page de thème WordPress nouvellement ajoutée, bien qu'il n'y ait pas beaucoup de texte, chaque thème WordPress doit être accompagné d'une petite image pour donner aux lecteurs une compréhension générale. Décidez si vous souhaitez faire une présentation. Donc si vous additionnez près d’une trentaine de thèmes WordPress, la page sera très longue. Il faut donc trouver un moyen de paginer les articles longs.

J'ai cherché sur Google et trouvé une solution de code qui est très bonne. Après l'avoir utilisé moi-même, cela fonctionne vraiment, alors je le partage ici.

1. Ajouter un bouton de pagination

Si vous n'avez pas peur des ennuis, vous pouvez passer en mode HTML lors de la rédaction d'un article et insérer la ligne de code suivante. Vous n'aurez pas besoin de l'ajouter. bouton de pagination.

Le code est le suivant :

<p><!--nextpage--></p>

En fait, il est beaucoup plus simple d'ajouter un bouton de pagination à l'éditeur. J'ai déjà vu cette fonction implémentée en modifiant le code, mais je l'ai oubliée. Parce que j'utilise le plug-in d'amélioration de l'éditeur WordPress : TinyMCE Advanced. Ce bouton existe depuis longtemps, je n’entrerai donc pas dans les détails ici.

Supplément du 17/06/2012 : Ajoutez des boutons de pagination à l'éditeur de texte WordPress 3.4

Parce que mon site Web "Si vous êtes la seule invitée féminine" fc.guansoft.com est également utilisé dans ce article Présentation du code de pagination pour les articles longs. Mais ce site n'a pas installé le plugin TinyMCE Advanced. Je suis donc allé en ligne pour trouver un moyen relativement simple d'ajouter ce bouton de pagination dans l'éditeur WordPress. La méthode est la suivante :

Trouver le fichier /wp-includes/class-wp-editor.php. Recherchez « wp_more », tag : (à la ligne 366)

Le code est le suivant :

$mce_buttons = apply_filters(&#39;mce_buttons&#39;, array(&#39;bold&#39;, &#39;italic&#39;, &#39;strikethrough&#39;, &#39;¦&#39;, &#39;bullist&#39;, &#39;numlist&#39;, &#39;blockquote&#39;, &#39;¦&#39;, &#39;justifyleft&#39;, &#39;justifycenter&#39;, &#39;justifyright&#39;, &#39;¦&#39;, &#39;link&#39;, &#39;unlink&#39;, <SPAN style="TEXT-DECORATION: underline"><STRONG><SPAN style="COLOR: #ff0000; TEXT-DECORATION: underline">&#39;wp_more&#39;,</SPAN></STRONG></SPAN> &#39;¦&#39;, &#39;spellchecker&#39;, &#39;fullscreen&#39;, &#39;wp_adv&#39; ), $editor_id);

Ajoutez « wp_page » après « wp_more », (y compris les guillemets simples et les virgules). Le code modifié est le suivant :

Le code est le suivant :

$mce_buttons = apply_filters(&#39;mce_buttons&#39;, array(&#39;bold&#39;, &#39;italic&#39;, &#39;strikethrough&#39;, &#39;¦&#39;, &#39;bullist&#39;, &#39;numlist&#39;, &#39;blockquote&#39;, &#39;¦&#39;, &#39;justifyleft&#39;, &#39;justifycenter&#39;, &#39;justifyright&#39;, &#39;¦&#39;, &#39;link&#39;, &#39;unlink&#39;, <SPAN style="TEXT-DECORATION: underline"><STRONG><SPAN style="COLOR: #ff0000; TEXT-DECORATION: underline">&#39;wp_more&#39;,&#39;wp_page&#39;,</SPAN></STRONG></SPAN> &#39;¦&#39;, &#39;spellchecker&#39;, &#39;fullscreen&#39;, &#39;wp_adv&#39; ), $editor_id);

À ce moment, vous pouvez voir une icône similaire au bouton de balise plus sur l'éditeur de texte sur l'écriture en arrière-plan et édition des pages d'articles.

De même, un bouton page suivante apparaîtra dans l'éditeur de code.

2. Ajouter une fonction de pagination

Wordpress a en fait sa propre fonction de pagination, mais elle n'a pas été appelée. Ainsi, lorsque nous modifions l'article, nous insérons des sauts de page, mais nous ne voyons aucun changement. Comment puis-je appeler cette fonction ? La méthode est très simple. Recherchez une ligne de code similaire à la suivante dans le fichier de modèle de thème single.php.

Le code est le suivant :

<?php the_content(); ?>

Ajoutez le code suivant après cette ligne de code pour implémenter une fonction de pagination simple.

Le code est le suivant :

<?php wp_link_pages(); ?>

3. Embellissez l'effet de pagination

Bien qu'après les deux étapes ci-dessus, la fonction de pagination des articles longs puisse être réalisée. Mais ce n’est pas si joli, alors embellissons-le pour rendre l’effet de pagination plus parfait.

Tout d'abord, remplacez le code de la fonction de pagination à l'étape précédente par le code suivant.

Le code est le suivant :

<?php wp_link_pages(array(&#39;before&#39; => &#39;<div class="fenye">分页阅读：&#39;, &#39;after&#39; => &#39;&#39;, &#39;next_or_number&#39; => &#39;next&#39;, &#39;previouspagelink&#39; => &#39;上一页&#39;, &#39;nextpagelink&#39; => "")); ?> <?php wp_link_pages(array(&#39;before&#39; => &#39;&#39;, &#39;after&#39; => &#39;&#39;, &#39;next_or_number&#39; => &#39;number&#39;, &#39;link_before&#39; =>&#39;<span>&#39;, &#39;link_after&#39;=>&#39;</span>&#39;)); ?> <?php wp_link_pages(array(&#39;before&#39; => &#39;&#39;, &#39;after&#39; => &#39;</div>&#39;, &#39;next_or_number&#39; => &#39;next&#39;, &#39;previouspagelink&#39; => &#39;&#39;, &#39;nextpagelink&#39; => "下一页")); ?>

Ensuite, embellissez le style CSS.

Mettez les codes suivants directement à la fin du fichier de thème style.css.

Le code est le suivant :

/**页面分页**/ 
.fenye{text-align:center;margin:0px auto 10px;font-weight:bold} 
.fenye span{background-color:#DDDDDD;color:#fff;font-weight: bold;margin:0px 1px;padding:1px 6px;display:inline-block;text-decoration:none;border:1px solid #e0e0e0;} 
.fenye a{text-decoration:none;} 
.fenye a span{background-color:#F6F6E8;font-weight: normal;color: #000;text-decoration: none;} 
.fenye a:hover span{background-color:#DDDDDD;color: #fff;}

L'effet d'affichage final est tel qu'indiqué dans la figure ci-dessous :

4. problème de titres répétés après pagination des articles, ce qui est néfaste à l'Impact SEO

Les articles longs étant paginés, les titres de ces pages sont les mêmes. Je ne sais pas si cela aura un impact négatif sur le référencement. Mieux vaut l'éviter ! Vous pouvez résoudre le problème des titres en double en ajoutant des numéros de page à la pagination des articles WordPress. Nous pouvons le modifier comme suit :

Code de pagination des articles longs WordPress simple et pratique—Plug-in WordPress de Guanshuo

Code de pagination des articles longs WordPress simple et pratique—Page 2—Guanshuo朔Plug-in wordpress

Code de pagination d'article long wordpress simple et pratique - Page 3 - Plug-in wordpress Guanshuo

Trouvez quelque chose comme