Startseite mit Page Pagnation

Die Startseite von unsere-schule.org soll aktuelle Beiträge automatisch in Kachelform anzeigen. Damit die erste Seite nur die aktuellen Beiträge anzeigt, benötigt man eine „Page Pagnation“. Es sollen z.B. die letzten 10 Beiträge angezeigt werden, alle weiteren sollen dann auf darauffolgenden Seiten angezeigt werden:

Die alte Seite hat alle Beiträge ohne Seitenumbruch dargestellt, was am Ende über 300 Beiträge betraf:

Ziel war es ein eigenes Seitentemplate für die Startseite zu erstellen, welches den Pagnation Code hat:

 <?php
    /*$paged = ( get_query_var( 'paged' ) ) ? get_query_var( 'paged' ) : 1;*/
	$paged = ( get_query_var( 'page' ) ) ? get_query_var( 'page' ) : 1;

   $args = array(
      'post_type' => 'page',
      'meta_query' => array(
        'relation' => 'OR',
        array(
            'key'     => 'list_home',
            'value'   => '0',
            'compare' => '!=',
        ),
        array(
            'key'     => 'list_home',
            'value'   => '0',
            'compare' => 'NOT EXISTS',
        ),
      ),
      'posts_per_page' => 12,
      'paged' => $paged
    );

    $customQuery = new WP_Query($args);
    if($customQuery->have_posts() ): 
      while($customQuery->have_posts()) :
        $customQuery->the_post();
        echo '<a href="'.get_page_link().'">'.get_the_title().'</a><br>';
	endwhile; 
    endif; 

    wp_reset_query();

    if (function_exists("start_us_pagination")) {
		start_us_pagination($customQuery->max_num_pages, 3); 
    }

	?>

Zuerst wird eine „$paged“ Variable abgefragt und geschaut ob diese gesetzt ist. Diese Variable gibt die aktuelle Seite an (1-n).

Im Anschluss wird ein neuer WP_Query mit den nötigen Abfragen erstellt. In diesen Abfragen wird auch die „$paged“ Variable mit übergeben, damit nur die aktuell benötigten Beiträge aus der Datenbank geholt werden. Interessant ist hier der „meta_query“ mit Hilfe dessen kann man verschiedene Metawerte der page abfragen. Für die Webseite habe ich ein Customfeld „list_home“ erstellt. Wenn eine Seite diesen Feld mit 0 gefüllt hat, wird die Seite nicht auf der Startseite angezeigt. Da ich nicht alle Seiten mit diesem Customfeld befüllen wollte, listet der „meta_querry“ auch alle Seiten auf, bei denen dieses Feld nicht existiert.

Am Ende wir noch die Funktion „start_us_pagination“ aufgerufen, die die Navigation erstellt.

  • $pages gibt die Anzahl der benötigten Seiten zur Darstellung aller Beiträge an.
  • $range gibt an, wie viele Seitenlinks nach recht und links der aktuellen Seite ausgegeben werden sollen:
Pagnation mit $range von 3
//  Custom pagination function for pages on startpage
function start_us_pagination($pages, $range)
{
	global $paged;
	if(empty($paged)) $paged = 1;
	if($pages == '')	{
		global $wp_query;
		$pages = $wp_query->max_num_pages;
		if(!$pages)		{
			$pages = 1;
		}
	}
	if(1 != $pages){
		echo "<nav aria-label='Page navigation'>  <ul class='pagination'> <span>Page ".$paged." of ".$pages."</span>";
		// First button
		if($paged > $range+1) echo "<a href='".get_pagenum_link(1)."'>First</a>";
		// Previous button
		if($paged > 1) echo "<a href='".get_pagenum_link($paged - 1)."'>Previous</a>";
		for ($i=1; $i <= $pages; $i++)		{
			// pages 1 - n
			if (1 != $pages &&( !($i >= $paged+$range+1 || $i <= $paged-$range-1) )){
				echo ($paged == $i)? "<li class=\"page-item active\"><a class='page-link'>".$i."</a></li>":"<li class='page-item'> <a href='".get_pagenum_link($i)."' class=\"page-link\">".$i."</a></li>";
			}
		}
		// Next button
		if ($paged < $pages ) echo " <li class='page-item'><a class='page-link' href=\"".get_pagenum_link($paged + 1)."\">Next</a></li>";
		// Last button
		if ($paged + $range < $pages ) echo " <li class='page-item'><a class='page-link' href='".get_pagenum_link($pages)."'>Last</a></li>";
		echo "</ul></nav>\n";
	}
}

Das Template wurde auf die Startseite angewandt und sieht mit etwas CSS verschönert so aus:

Links

unsere-schule.org

×

Startseite mit Page Pagnation

Code: