So implementieren Sie Artikel-Paging in WordPress

Wie implementiert man Artikel-Paging in WordPress?

Aufgrund der langen Länge ist die Ladegeschwindigkeit der Seite zu langsam und die Benutzererfahrung ist eingeschränkt. Daher müssen wir einen Weg finden, den langen Artikel zu paginieren. Nach der Suche habe ich eine Codelösung gefunden das ist sehr gut. Nach dem persönlichen Gebrauch ist es tatsächlich effektiv, daher werde ich es hier teilen. Wenn Sie interessiert sind, sollten Sie es nicht verpassen

Empfohlen: „WordPress-Tutorial“

Kürzlich habe ich festgestellt, dass viele Artikel mit Bildern versehen und relativ lang sind. Dadurch wird die Seite zu langsam geladen, was der Benutzererfahrung nicht zuträglich ist. Insbesondere die neu hinzugefügte WordPress-Themenseite, obwohl es nicht viel Text gibt, muss jedes WordPress-Theme von einem kleinen Bild begleitet werden, um den Lesern ein allgemeines Verständnis zu vermitteln. Entscheiden Sie, ob Sie eine Präsentation halten möchten. Wenn Sie also fast dreißig WordPress-Themes zusammenzählen, wird die Seite sehr lang. Wir müssen also einen Weg finden, lange Artikel zu paginieren.

Ich habe bei Google gesucht und eine Codelösung gefunden, die sehr gut ist. Nachdem ich es selbst verwendet habe, funktioniert es wirklich, deshalb teile ich es hier.

1. Paging-Schaltfläche hinzufügen

Wenn Sie keine Angst vor Ärger haben, können Sie beim Schreiben eines Artikels in den HTML-Modus wechseln und die folgende Codezeile einfügen Paging-Taste.

Der Code lautet wie folgt:

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

Tatsächlich ist es viel einfacher, dem Editor eine Paginierungsschaltfläche hinzuzufügen. Ich habe gesehen, wie diese Funktion durch Ändern des Codes implementiert wurde, aber ich habe sie vergessen. Weil ich das Erweiterungs-Plug-in für den WordPress-Editor verwendet habe: TinyMCE Advanced. Diese Schaltfläche gibt es schon seit langer Zeit, daher werde ich hier nicht näher darauf eingehen.

Ergänzung vom 17.06.2012: Paging-Schaltflächen zum WordPress 3.4-Texteditor hinzufügen

Weil hier auch meine Website „If You Are the One Female Guest Information“ fc.guansoft.com verwendet wird Artikel Einführung in den Paginierungscode für lange Artikel. Auf dieser Site ist jedoch das TinyMCE Advanced-Plugin nicht installiert. Also bin ich online gegangen, um eine relativ einfache Möglichkeit zu finden, diese Paging-Schaltfläche im WordPress-Editor hinzuzufügen. Die Methode ist wie folgt:

Suchen Sie die Datei /wp-includes/class-wp-editor.php. Suchen Sie nach „wp_more“, Tag: (in Zeile 366)

Der Code lautet wie folgt:

$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);

Fügen Sie „wp_page“ nach „wp_more“ hinzu (einschließlich einfacher Anführungszeichen und Kommas). Der geänderte Code lautet wie folgt:

Der Code lautet wie folgt:

$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);

Zu diesem Zeitpunkt können Sie ein Symbol ähnlich der Schaltfläche „Mehr Tag“ im Texteditor auf dem Hintergrund der Schrift und sehen Artikelseiten bearbeiten.

Ebenso wird im Code-Editor eine Schaltfläche „Weitere Seite“ angezeigt.

2. Paging-Funktion hinzufügen

Wordpress verfügt tatsächlich über eine eigene Funktion für die Paging-Funktion, die jedoch nicht aufgerufen wurde. Wenn wir also den Artikel bearbeiten, fügen wir Seitenumbrüche ein, sehen aber keine Änderungen. Wie kann ich diese Funktion aufrufen? Die Methode ist sehr einfach. Suchen Sie in der Theme-Vorlagendatei single.php nach einer Codezeile, die der folgenden ähnelt.

Der Code lautet wie folgt:

<?php the_content(); ?>

Fügen Sie nach dieser Codezeile den folgenden Code hinzu, um eine einfache Paging-Funktion zu implementieren.

Der Code lautet wie folgt:

<?php wp_link_pages(); ?>

3. Verschönern Sie den Paging-Effekt

Obwohl nach den beiden oben genannten Schritten die Paging-Funktion langer Artikel realisiert werden kann. Aber es ist nicht so schön, also verschönern wir es, um den Paging-Effekt perfekter zu machen.

Ersetzen Sie zunächst den Paging-Funktionscode im vorherigen Schritt durch den folgenden Code.

Der Code lautet wie folgt:

<?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; => "下一页")); ?>

Dann verschönern Sie den CSS-Stil.

Fügen Sie die folgenden Codes direkt am Ende der Theme-Datei style.css ein.

Der Code lautet wie folgt:

/**页面分页**/ 
.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;}

Der endgültige Anzeigeeffekt ist wie in der folgenden Abbildung dargestellt:

4 Problem wiederholter Titel nach der Paginierung von Artikeln, was schädlich für die SEO-Auswirkungen ist

Da lange Artikel paginiert werden, sind die Titel dieser Seiten gleich. Ich weiß nicht, ob es negative Auswirkungen auf die Suchmaschinenoptimierung haben wird. Vermeiden Sie es besser! Sie können das Problem doppelter Titel lösen, indem Sie Seitenzahlen zur Paginierung von WordPress-Artikeln hinzufügen. Wir können es wie folgt ändern:

Einfacher und praktischer WordPress-Paginierungscode für lange Artikel – Guanshuo WordPress-Plug-in

Einfacher und praktischer WordPress-Paginierungscode für lange Artikel – Seite 2 – Guanshuo朔WordPress-Plugin

Einfacher und praktischer WordPress-Paging-Code für lange Artikel – Seite 3 – Guanshuo WordPress-Plugin

Suchen Sie etwas wie