WordPress: Pagebar zum Blättern der Seiten ohne Plugins realisieren

Startseite › WordPress / 21. Mai 2010

WordPress: Pagebar zum Blättern der Seiten ohne Plugins realisieren

Nach allen Regeln der Usability wurden die Archivseiten des Blogs um eine erweiterte Blätterfunktion expandiert. Jeweils am unteren Rand der Seiten platziert, umfasst das modifizierte Konzept zusätzlich zu den allgegenwärtigen Schaltflächen Ältere und Neuere (Webseiten) auch die Möglichkeit, fünf Webseiten des Blog-Archivs direkt per Klick anzusteuern – eine so genannte Pagination Bar. Diesem Feature zu Grunde liegende Technik wird im Beitrag offen gelegt, die Funktionsweise skizziert.

Weiterkommen mit direkten Seitensprüngen
Der Umfang, meist aber der Quelltext der bereits existenten Ansätze (u.a. Plugin, Script) waren für die gestellte Zielsetzung zu überdimensioniert, auch wenn flexibel. Die nachfolgende Eigenentwicklung ist dagegen smart und schnell, da an eigene Ansprüche optimiert. Der Plan: Anzeige von beliebig vielen, durchnummerierten und aneinander angereihten Schaltflächen als konkrete Verknüpfung mit Archivseiten – ähnlich der Seitenpagination bei Google.

WordPress Pagebar: Momentane Seite im Mittelpunkt

Einbau des Unterprogramms
Die Implementierung der Lösung komplettiert sich aus 3 Schritten:

Theme-Datei functions.php um den Code ausbauen (PHP-Part)
Theme-Templates mit Steuerelementen versehen (HTML-Part)
Stylesheets für die Formatierung setzen (CSS-Part)

Der Motor der Blätterfunktion (PHP-Part)

<?php
/**
* Blätterfunktion im Blog
*
* @author Sergej Müller
* @param  integer  $range  Links um aktuelle Seite [optional]
*/

function the_paging_bar($range = 4) {
  /* Init */
  $count = @$GLOBALS['wp_query']->max_num_pages;
  $page = (int)get_query_var('paged');;
  $ceil = ceil($range / 2);

  /* Kein Paging? */
  if ($count <= 1) {
    return false;
  }

  /* Erste Seite? */
  if (!$page) {
    $page = 1;
  }

  /* Limit errechnen */
  if ($count > $range) {
    if ($page <= $range) {
      $min = 1;
      $max = $range + 1;
    } elseif ($page >= ($count - $ceil)) {
      $min = $count - $range;
      $max = $count;
    } elseif ($page >= $range && $page < ($count - $ceil)) {
      $min = $page - $ceil;
      $max = $page + $ceil;
    }
  } else {
    $min = 1;
    $max = $count;
  }

  /* Ausgabe der Links */
  if (!empty($min) && !empty($max)) {
    for($i = $min; $i <= $max; $i++){
       echo sprintf(
        '<a href="%s"%s>%d</a>',
        get_pagenum_link($i),
        ($i == $page ? ' class="active"' : ''),
        $i
      );
     }
  }
}

Aufruf in (Archiv-)Templates (HTML-Part)

<ul id="paging">
  <li class="prev">
    <?php previous_posts_link('Neuere Beiträge') ?>
  </li>

  <?php if (function_exists('the_paging_bar')) { ?>
    <li class="pages">
      <?php the_paging_bar() ?>
    </li>
  <?php } ?>

  <li class="next">
    <?php next_posts_link('Ältere Beiträge') ?>
  </li>
</ul>

Alternative: Link für die erste Seite im Archiv

<a href="<?php echo get_pagenum_link(1) ?>">Anfang<a>

Alternative 2: Link für die letzte Seite im Archiv

<a href="<?php echo get_pagenum_link($GLOBALS['wp_query']->max_num_pages) ?>">Ende<a>

Exemplarisch: Visuelle Anpassung der Pagebar (CSS-Part)

#paging {
  width: 501px;
  height: 30px;
  list-style: none;
}
#paging li {
  float: left;
  height: 30px;
  text-align: center;
}
#paging li.prev,
#paging li.next {
  width: 80px;
}
#paging li.pages {
  width: 301px;
  margin: 0 20px;
}
#paging li.pages a {
  margin: 0 5px;
  padding: 5px;
  display: inline-block;
  background: #ccc;
}
#paging li.pages a.active {
  padding: 4px;
  border: 1px solid #ccc;
  background: #fff;
}

Bemerkungen zu den Snippets

Je nach Theme variiert die Anzahl der anzupassenden Templates.
Die aktuell aufgerufene Seite bekommt stillschweigend die CSS-Klasse active zugewiesen und kann gezielt angesteuert werden.
Farbwerte und Größen im obigen CSS-Beispiel dienen zur Demonstrationszwecken und gehören an das Theme-Aussehen adaptiert.
Der Funktionsaufruf the_paging_bar erwartet einen optionalen Parameter, der die Anzahl der Links um die aktuelle Webseite steuert.

[Der Autor] Sergej Müller ist enthusiastischer Software Engineer mit Schwerpunkten Webentwicklung und WordPress. Seit 2007 programmiert und vertreibt er wpSEO, das weltberühmte und patentierte SEO-Plugin für WordPress-Blogs.

31 Kommentare zum Artikel

111 Tage zuvor | #1 ad

Ich würde die Umlaute noch maskieren (das heißt doch so, oder?), damit das Ganze auch valide wird.

111 Tage zuvor | #2 Sergej Müller

@ad
Im Zeitalter des UTF-8 ist so etwas nicht notwendig. Du markierst ja deine Umlaute beim Verfassen der Beiträge auch nicht und da macht WordPress auch nichts mehr dran (es sei denn, du hast eine andere Kodierung).

Wie ich oben auch sagte, die gleiche Lösung verwende ich auch hier im Blog und schau mal, was der W3C Validator zu meiner Startseite sagt: http://j.mp/bUKtri

111 Tage zuvor | #3 Michael

Wummer. Und schon fliegt das PageNav-Plugin.

111 Tage zuvor | #4 ad

Ok, nehme alles zurück und behaupte das Gegenteil! :D

111 Tage zuvor | #5 Dominik

Da sag’ ich doch mal schnell Danke =)

Ich arbeite gerade an einem neuen Theme für den Relaunch meines Blogs und hab’ schon einiges im Theme gecodet um mir Plugins zu sparen – jetzt muss ich die Pagination nichtmal selbst schreiben (obwohl ich das natürlich könnte).

111 Tage zuvor | #6 LexX Noel

Hammer, fleissiges Bienchen. :-D

Baue ich direkt ein, beim nächsten arbeiten am Blog Design, denn auf dieser Basis so ganz ohne Plugin und dazu in CSS in der Gestaltung gefällt mir das echt super!

111 Tage zuvor | #7 Tobias

Genau das wäre meine nächste Aufgabe für mein Blog gewesen.
Also “Dank” hab ich gleich mal bei t3n gevotet.

Danke schön :)

111 Tage zuvor | #8 Sergej Müller

Tobias, dankeschön.

111 Tage zuvor | #9 Susi

Vielen Dank!
Hab ich direkt mal eingebaut. Der Einbau, sowie die Gestaltung per CSS war super einfach! Wieder ein Plugin weniger in meiner Liste.

111 Tage zuvor | #10 Michael

Klasse!
Werde es bei mir auch mal testen.
Vielen Dank!

110 Tage zuvor | #11 Benni

Ich habe mir über selbiges vor einiger Zeit auch so meine Gedanken gemacht und selbst ein bisschen Code geschrieben. Meine Ausführungen gibt es hier:

http://j.mp/c62HLh

109 Tage zuvor | #12 Nicki

Super – dickes Danke!

109 Tage zuvor | #13 BTTV

Super Beitrag. Damit kann ich jetzt das Plugin Pagebar2 eliminieren. Danke!

109 Tage zuvor | #14 Francesco

Erstmal: Vielen Dank!

Wäre es nicht semantischer im PHP-Part die Ausgabe der Links mit einem li zu umhüllen und im HTML-Part das li-Element mit der Klasse »pages« zu löschen? Die einzelnen Seiten sind doch genauso einzelne Listenpunkte wie »Neuere Beiträge« und »Ältere Beiträge«.

109 Tage zuvor | #15 Sergej Müller

@Francesco
Das ist nur ein Vorschlag der möglichen Umsetzung. Allerdings, ist bei mir keine Umsetzung ohne Grund: Wenn du die einzeln nummerierten Links in jeweils einen LI steckst, dann kannst du diese nicht ohne weiteres elegant zentriert zwischen den “Pfeil”-Buttons abbilden. Und so sind die Links im gesamten LI immer zentriert dargestellt, ganz unabhängig von der Anzahl der Seiten.

Praktisch, valide, smart.

109 Tage zuvor | #16 Francesco

@Sergej

Du hast Recht, es ist praktisch und valide. Allgemein gesprochen hat valider Code allerdings überhaupt nichts mit gutem Code zu tun (siehe die Absätze in der rechten Spalte unter »Kategorien« und »Plugins« auf dieser Website, die eigentlich Listen sind).

Die einzelnen Seiten nicht als das auszuzeichnen, was sie sind (einzelne Listenpunkte), nur damit ein bestimmtes Erscheinungsbild erzielt werden kann, ist einfach nicht im Sinne von HTML.

Die zentrierten einzelnen Listenpunkte könnte man beispielsweise so realisieren:

Die Liste kriegt ein text-align: center, die Klasse »prev« bekommt einen linken float und die Klasse »next« einen rechten. Fertig. Das ist praktisch, valide, smart … und semantisch. :-)

109 Tage zuvor | #17 Sergej Müller

@Francesco
Dann mach es doch so, wenn du es für richtig hältst. Ganz einfach. Ich muss ja nicht deiner Meinung sein.

108 Tage zuvor | #18 Benjamin Grüning

Hey Sergej,

vielen Dank für den Schnipsel.
Wo kann ich denn einstellen, wieviele Seiten angezeigt werden sollen ?

Beste Grüße

107 Tage zuvor | #19 Robert

Ein großes Dankeschön, für den Codeschnipsel. Genau diese Thematik hatte ich gesucht, da ich kein Plugin benutzen möchte.

106 Tage zuvor | #20 Jaime

@Benjamin
Im PHP-Part … ($range = 4), wenn es dann mehr als 4 Seiten sein sollen einfach die Zahl anpassen.

@Sergej
Auch wenn ich derzeit WP nicht aktiv nutze, im stillen Kämmerlein wird gebastelt und gebastelt … gelesen und gelesen. Gut Ding will Weile haben ;-)

Mehr als nur hilfreich sind dabei dann Artikel, Plugins etc. wie z.B von Dir. Ein eher stiller Leser diverser Webseiten und Blogs zum Thema WP sagt deshalb jetzt: Herzlichen Dank !

106 Tage zuvor | #21 Sergej Müller

@Benjamin
Irgendwie hab ich vermasselt, auf deinen Kommentar zu reagieren, sorry. Jaime hat Recht. Zudem kannst du beim Aufruf der Funktion deine Zahl als Parameter übergeben, also <?php the_paging_bar(8) ?>

@Jaime
Freue mich über Blumen, schönen Dank dafür.

106 Tage zuvor | #22 Jan

Hallo Sergej,

vielen Dank für diese Anleitung. Ich werde das mal testen und hoffe, so wieder ein Plugin einsparen zu können.

Viele Grüße
Jan

105 Tage zuvor | #23 Benjamin Grüning

Danke Jaime & Sergej,

funktioniert einwandfrei und sieht auch besser aus. ;)

MfG

105 Tage zuvor | #24 Frank

Eine kleine Ergänzung, wenn ich richtig bin; $globals['wp_query'] geht nur im Standard-Loop. Eventuell einfach noch einen Parameter ergänzen und den eigene Loop-Variable übergeben.
function the_paging_bar($m, $range = 4) { if (!$m) $m = $GLOBALS['wp_query']; $count = $m->max_num_pages; $page = intval( get_query_var('paged') );

Habe ich bspw. einen Loop beginnend mit
$i = new WP_Query(...
dann genügt der Aufruf the_paging_bar($i, 8);

105 Tage zuvor | #25 Sergej Müller

Frank, danke für deinen Kommentar.

Richtig, könnte man die Funktion auf diese Weise erweitern. Würde ich aber jetzt an der Stelle meinen Code oben nicht anpassen wollen, da der Code unnötig aufgebläht wird. Wer mit weiteren Loops arbeitet, der kann bei Bedarf die Variable in der Funktion auch anpassen.

Der Code soll weiterhin smart und verständlich bleiben und bestenfalls keine Sonderfälle abfangen.

105 Tage zuvor | #26 Frank

ja, habe ich auch so verstanden; sehe es eher als Ergänzung für Leute, die eigene Loops bauen; vermutlich würdest du ja sonst auch die erste und letzte Seite in die Funktion aufnehmen. Aber die Anpassung steht ja jedem offen, darum teilen wir in der Regel ja ;)

105 Tage zuvor | #27 Sergej Müller

Richtig. Wir lassen das vorerst als Kommentar. Ich plane mal ein Tutorial für eine erweiterte Pagebar. Da passt es ausgezeichnet rein.

62 Tage zuvor | #28 Nikolaus

Thx, danke für Deine Arbeit und danke dass Du sie mit uns teilst. Sehr guter Ansatz.

61 Tage zuvor | #29 Sergej Müller

@Nikolaus
Ich hab zu danken für deinen Kommentar – ging wie Butter runter.

59 Tage zuvor | #30 Caspar

Hi Sergej, das spart mir glatt eine Slideshow in Javascript… die beim aktuellen Projekt wahrscheinlich eh zuviel gewesen wäre. So habe ich den gleichen Effekt, aber mit schlakerem Code. Herzlichen Dank!