WordPress: Seitenumbruch

Blog-Artikel aufteilen

Eine recht häufige Frage in unseren beiden WordPress-Workshops, war die Frage nach der Möglichkeit einen langen Blog-Artikel auf mehrere Seiten aufzuteilen.

Die Möglichkeit in WordPress einen Artikel aufzuteilen bzw. mit Seitenumbrüchen zu versehen existiert so ziemlich von Anfang an. Man muss lediglich <!--nextpage--> in der HTML-Ansicht eingeben wo man den Seitenumbruch haben möchte.

Bis Version 1.5.1 gab es den Seitenumbruch als Button im HTML-Editor, aber warum er entfernt wurde kann ich nicht mehr nachvollziehen.

Seitenumbruch und die Editoren

Wer wie ich meistens in der HTML-Ansicht arbeitet hat es sehr einfach den Artikel aufzuteilen. Entweder man greift zu einer Textbausteine-Erweiterung, wie zum Beispiel BBCode für Firefox, installiert das Plugin AddQuicktags um die Quicktag-Leiste zu erweitern oder fügt ganz einfach jedes Mal <!--nextpage--> manuell ein.

Die Möglichkeit die Quicktag-Leiste manuell zu bearbeiten, wie ich es vor mehr als vier Jahren in Die Quicktags anpassen beschreiben habe, ist zwar nach wie vor immer möglich, aber etwas umständlicher als vorher.

Die Datei /wp-includes/js/quicktags.js ist mittlerweile komprimiert (also unübersichtlich) und alles was auskommentiert wurde kommt hier nicht mehr rein. Daher muss man die Datei /wp-includes/js/quicktags.dev.js bearbeiten. Sie ist nicht komprimiert und enthält auch auskommentierte Sachen. Man begebe sich in die Zeile 131:

/*
edButtons[edButtons.length] =
new edButton('ed_next'
,'page'
,'<!--nextpage-->'
,''
,'p'
,-1
);
*/

Dort entfernt man dann in der Zeile 131 und 140 den Kommentar (/* und */). Speichert die Datei als quicktags.js ab und lädt sie hoch. Wer Wert auf Performance legt, kann natürlich die Datei komprimieren. Der Nachteil bei dieser Variante ist natürlich das beim jeden automatischen Update die Änderungen futsch sind.

Seitenumbruch in der visuellen Ansicht bzw. dem WYISWYG-Editor

Die einfachste, aber nicht die eleganteste Art, auch in der visuellen Ansicht einen Seitenumbruch einzufügen, wäre das man kurz in die HTML-Ansicht wechselt und dort das <!--nextpage--> absetzt, weil der visuelle Editor hier die spitzen Klammern „entschärft“: aus <; wird &lt;. Das gute an dieser Methode ist, das beim anschließenden Wechsel in die visuelle Ansicht der Seitenumbruch sichtbar wird:

WordPress: Seitenumbruch im visuellen Editor

Seitenumbruch in visueller Ansicht

Wem dies nicht sexy genug ist, der kann die Template-Datei functions.php um folgenden Code erweitern:

add_filter('mce_buttons','wysiwyg_editor');
function wysiwyg_editor($mce_buttons) {
    $pos = array_search('wp_more',$mce_buttons,true);
    if ($pos !== false) {
        $tmp_buttons = array_slice($mce_buttons, 0, $pos+1);
        $tmp_buttons[] = 'wp_page';
        $mce_buttons = array_merge($tmp_buttons, array_slice($mce_buttons, $pos+1));
    }
    return $mce_buttons;
}

Code gefunden bei jerm.com.

Danach hat man im WYSIWYG-Editor einen zusätzlichen Button:

WordPress: Seitenumbruch-Button im WYSIWYG-Editor

Seitenumbruch-Button im WYSIWYG-Editor

Frank Bültge hat mich in einem Kommentar auf WordPress-Buch.de auf WordPress-Plugin aufmerksam gemacht welches die Anpassungen, die man durch AddQuicktag (siehe weiter oben) am HTML-Editor vornimmt auch in der visuellen Ansicht verfügbar macht:

WordPress: Seitenumbruch-Button in visueller Ansicht

Zusätzliche Möglichkeit für den seitenumbruch-Button

Diese Plugin bindet die neu erstellten Buttons aus AddQuicktag in den visuellen Editor in Form einer Auswahlliste mit dem Namen Weitere Formate. Der Nachteil bei dieser Methode ist allerdings, dass der Seitenumbruch erst sichtbar wird wenn man kurz in die HTML-Ansicht und dann zurück wechselt oder das Browser-Fenster neu lädt.

Das WordPress-Theme für den Seitenumbruch rüsten

Damit die Seitenumbrüche im Frontend funktionieren muss das eingesetzte Theme den entsprechenden Template-Tag beinhalten. Es handelt sich dabei um den Tag wp_link_pages();.

Dieser Template-Tag muss innerhalb des Loops untergebracht werden. Ich füge ihn meistens direkt unter the_content(); ein.

Bei der Ausgabe werden die Links zu den einzelnen Seiten in eine div-Box eingepackt, die ein class="page-link" spendiert bekommt.

Nachtrag: bitte unter WordPress: Paginierung und die Indizierung den ergänzenden Artikel lesen.

Divi: Premium-Theme für WordPress
Werbung

Geschrieben von Vladimir

Vladimir Simović, arbeitet seit 2000 mit HTML & CSS und seit Januar 2004 mit WordPress. Im Laufe der Jahre hat er diverse Fachbücher und Fachartikel publiziert.

  1. Hallöchen,

    danke für die tolle Erklärung.

    Wer nicht ganz so firm ist, die entsprechenden Codes zu ändern und zusätzlich zu dem Seitenbutton z. B. noch komfortabel Tabellen einfügen möchte, der ist auch mit dem WordPress-Plugin TinyMCE Advanced super bedient.

    Liebe Grüße
    Sylvi

  2. Danke, Perun!

    Darauf habe ich lange gewartet.

    Lieber Gruß
    Rata

  3. Der Tipp war mir bekannt, allerdings schreibe ich nur sehr selten bis gar keine Artikel die so lang sind das man die auf 2 oder mehr Seiten packen müsste. 🙂

  4. Das Problem ist leider, dass dann WordPress die URLs/Permalinks extrem dämlich gestaltet (einfach /%Seite%/ dranhängt). Wenn man dann nen Artikel hat, der vllt. über drei oder vier Seiten aufgeteilt wird, habe ich schon das ein oder andere mal festgestellt, dass Google vllt. 2 von denen wirklich indiziert (und das müssen keinesfalls Seite 1 und Seite 2 sein!), da auch die Titel sowie evtl. meta-Daten auf allen Seiten gleich sind… Gibt es da ne Möglichkeit irgendwie was zu machen, dass ich den einzelnen Seiten andere Titel etc. geben kann?!? wpSEO, das ich einsetze, bietet mir da auch keine Funktionalität > Daher hier der Aufruf an Sergej: Das muss sich ändern 😈 🙂 In den Index bekommt man die anderen Seiten zwar durch nen paar Links auf die Seite (einfach nen paar Bookmarks reichen ja), aber trotzdem stören mich halt die gleichen Titel, meta-Daten, etc. 🙄

    1. @Christian,

      zumindest für Seitentitel gibt es da evtl. eine Lösung. ich muss da mal was testen und dann gibt es einen zusätzlichen Blog-Artikel. 🙂

  5. […] habe vor ein paar Tagen darüber geschrieben wie man in WordPress ein Artikel auf mehrere Seiten verteilen kann. In den Kommentaren hat mich Christian darauf hingewiesen, dass so aufgeteilte Artikel nicht […]

  6. @Christian
    Zugegeben, ist mir nie in den Sinn gekommen, einen Artikel auf mehrere Seiten zu gliedern, daher auch die fehlende Unterstützung. Bis dato hat sich auch keiner der Kunden dazu geäußert, ich verspreche Besserung.

  7. Interessante Links am 14. December 2010 » December, WordPress, Artikel, Navigation, Menu, CSS3 » Generation ZweiNull Dienstag, 14. Dezember 2010 am 10:03

    […] WordPress: Artikel auf mehrere Seiten verteilen7. December 2010 […]

  8. @Sergej

    Ja, die Alternative ist halt, für alle Einzelseiten nen eigenen Artikel bzw. Seite anzulegen, aber ist auch irgendwie doof, weil ich dann die Anzahl so aufblähe und das so unübersichtlich in den Artikel/Seitenübersichten wird. Also an einer schicken Lösung mit dem wäre ich sehr interessiert, sodass ich nen uniquen Titel sowie meta-Daten für die Folgeseiten bekomme. 😛

  9. […] Seitenumbrüche generieren kann. Wie man einen Artikel aufteilt habe ich vor ein paar Wochen auf WordPress: Artikel auf mehrere Seiten verteilen […]

  10. […] das geht und worauf man da achten muss habe ich im Artikel WordPress: Artikel auf mehrere Seiten verteilen beschrieben. Aber das Problem bestand darin, dass die Unterseiten sowohl den gleichen Meta-Angaben […]

  11. Hey, danke für den Tipp mit dem button für den Editor.
    Genau den habe ich gesucht. nachdem ich die functions.php angepasst habe war alles wie ich es brauche!

    Gruß
    Flo

  12. […] Im Manual des Plugins gibt es weitere Tipps zu wiederkehrenden Fußnoten und zu Fußnoten in paginierten Artikeln (siehe dazu auch: WordPress: Artikel auf mehrere Seiten verteilen). […]

Kommentare sind geschlossen.