Für die Realisierung einer Pagination Bar für das direkte Ansteuern von Beitragsseiten in WordPress bedarf es keine Plugins. Snippet genügt.

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 sm_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('sm_paging_bar')) { ?>
    <li class="pages">
      <?php sm_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 sm_paging_bar erwartet einen optionalen Parameter, der die Anzahl der Links um die aktuelle Webseite steuert.