Dienstag, 16. Juni 2009
Da Wordpress standardmäßig kein vernünftiges Paging – Blättern durch die Artikel beinhaltet – lässt es sich, wie schonmal von mir beschrieben mit einem Plugin um ein solches erweitern. Dies macht das Blättern im Blog für den Besucher viel angenehmer.
Nun wollte ich das Paging nicht mehr mit Hilfe eines Plugins lösen, sondern fest in das Theme einbauen. Bevor ich Euch erkläre, wie ich das gelöst habe, möchte ich Euch zeigen, wie das fertige Paging aussieht.
Nun zum Programm-Code. Zuerst habe ich folgende Funktion geschrieben, die das Paging berechnet und es herausschreibt:
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
| function wp_pagination_navi ($num_page_links = 5 , $min_max_offset = 2 ){
global $wp_query;
// Do not show paging on single pages
if( !is_single () ){
$current_page = intval(get_query_var ('paged'));
$total_pages = $wp_query->max_num_pages;
$left_offset = floor(($num_page_links - 1 ) / 2 );
$right_offset = ceil(($num_page_links -1 ) / 2 );
if( empty($current_page) || $current_page == 0 ) {
$current_page = 1;
}
// More than one page -> render pagination
if ( $total_pages > 1 ) {
echo '<div class="pagination_navi">';
if ( $current_page > 1 ) {
echo '<a href="' .get_pagenum_link ($current_page-1) .'" title="vorherige Seite">«</a>';
}
for ( $i = 1; $i <= $total_pages; $i++) {
if ( $i == $current_page ){
// Current page
echo '<a href="'.get_pagenum_link ($current_page).'" class="current-page" title="Seite '.$i.'" >'.($current_page).'</a>';
} else {
// Pages before and after the current page
if ( ($i >= ($current_page - $left_offset)) && ($i <= ($current_page + $right_offset)) ){
echo '<a href="'.get_pagenum_link ($i).'" title="Seite '.$i.'" >'.$i.'</a>';
} elseif ( ($i <= $min_max_offset) || ($i > ($total_pages - $min_max_offset)) ) {
// Start and end pages with min_max_offset
echo '<a href="'.get_pagenum_link ($i).'" title="Seite '.$i.'" >'.$i.'</a>';
} elseif ( (($i == ($min_max_offset + 1 )) && ($i < ($current_page - $left_offset + 1 ))) ||
(($i == ($total_pages - $min_max_offset)) && ($i > ($current_page + $right_offset ))) ) {
// Dots after/before min_max_offset
echo '<span class="dots">...</span>';
}
}
}
if ( $current_page != $total_pages ) {
echo '<a href="'.get_pagenum_link ($current_page+1).'" title="nächste Seite">»</a>';
}
echo '</div>'; //Close pagination
}
}
} |
Der erste Parameter gibt die Zahl der Seitenlinks an, die angezeigt werden sollen. Eine ungerade Zahl ist hier am Besten. Der zweite Parameter legt fest, wie viele Seitenlinks am Anfang und am Ende dargestellt werden sollen.
Diese Funktion muss in die functions.php im Theme Ordner.
Nun kann man diese Funktion in die Theme Dateien, welche mehrere Artikel auflisten und diese über mehrere Seiten verteilen, mit diesem Code aufrufen und das Paging somit in diese Seiten einfügen:
1
2
3
4
5
| <?php
if( function_exists('wp_pagination_navi') ) {
wp_pagination_navi ();
}
?> |
Bei den Dateien handelt es sich um die index.php, die archive.php und die search.php. Am Besten ersetzt man darin folgende Code Zeilen:
1
2
3
4
| <div class="navigation">
<div class="alignleft"><?php next_posts_link(__('« Older Entries'), 'kubrick'); ?></div>
<div class="alignright"><?php previous_posts_link(__('Newer Entries »', 'kubrick')); ?></div>
</div> |
Wie Ihr sehen könnt, habe ich die Funktion ohne Parameter aufgerufen, da mir die Standardeinstellungen genügen.
Damit das Paging jetzt auch noch gut aussieht, muss man folgende Zeilen in die style.css einfügen:
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
| .pagination_navi{
text-align: center;
}
.pagination_navi a {
border:1px solid #6EA1CE;
font-size: 0.7em;
font-weight:normal;
padding: 2px 6px;
margin: 2px 4px;
}
.pagination_navi a.current-page{
border:1px solid #fff;
color: #fff;
}
.pagination_navi a:hover{
border:1px solid #46C;
color: #46C;
} |
Den Code könnt Ihr nach belieben anpassen und ändern. Über Verbesserungsvorschläge und Ideen würde ich mich freuen. 
Tags: Paging, Theme, Webentwicklung, Wordpress
Veröffentlicht in Webentwicklung, Wordpress | 5 Kommentare »
