WordPress Galerie in Einzelseiten arrangieren

0

Wer sich schon einmal näher mit der standardmäßig in WordPress integrierten Galeriefunktion beschäftigt hat, weiß, dass diese zwar durchaus brauchbar ist, jedoch an einigen Stellen wichtige Funktionen fehlen, die man üblicherweise benötigt. Darunter fällt zum Beispiel die Möglichkeit, umfangreiche Galerien in einzelne Galerie-Seiten mit beispielsweise 20 Galeriebildern umzubrechen. Diese wird standardmäßig nicht unterstützt und muss nachträglich zum Beispiel mithilfe eines Plugins nachgerüstet werden. Im Folgenden möchte ich Ihnen zeigen, wie Sie diese nützliche Funktion mit ein paar Handgriffen auf Ihrer Website nachrüsten können, sodass Sie auf den Einsatz eines Plugins und damit unnötigen “Ballast” verzichten können.

1) Funktion zum Theme hinzufügen

Um diese Funktion zu Ihrem WordPress-Theme hinzuzufügen, kopieren Sie den unten stehenden Code in die functions.php Ihres Themes. Passen Sie gegebenenfalls die Anzahl der Galeriebilder, die auf jeder Galerie-Seite angezeigt werden sollen, in Zeile 10 an.

// Add custom gallery shortcode for pagination
remove_shortcode('gallery');
add_shortcode('gallery', 'LB_paginated_gallery');

// Custom paginated gallery shortcode
function LB_paginated_gallery( $attr ) {
	global $post;	
	static $instance = 0;
	$instance++;	
	$imagesPerPage = '42'; // Number of Post being displayed on each gallery page
	
	// Define some default options
	$options = array(
		'id' => '',
		'order' => 'ASC', 
		'orderby' => 'menu_order ID',
		'itemtag' => 'dl',
		'icontag' => 'dt', 
		'captiontag' => 'dd', 
		'columns' => 3, 
		'size' => 'thumbnail', 
		'perpage' => $imagesPerPage, 
		'link' => 'attachment', 
		'show_edit_links' => 'Y', 
		'use_shortcode' => 'gallery', 
		'exclude' => ''
	);
	
	// We're trusting author input, so let's at least make sure it looks like a valid orderby statement
	if( isset( $attr['orderby'] ) ) {
		$attr['orderby'] = sanitize_sql_orderby( $attr['orderby'] );
		if( !$attr['orderby'] )
			unset( $attr['orderby'] );
	}
	
	// Overwrite the defaults with any options passed in
	if( is_array($attr) ) $options = array_merge($options, $attr);
	
	// Start by getting the attachments
	$attachments = get_children(array(
		'post_parent' => $post->ID, 
		'post_status' => 'inherit', 
		'post_type' => 'attachment', 
		'post_mime_type' => 'image', 
		'order' => $options['order'], 
		'orderby' => $options['orderby'], 
		'exclude' => $options['exclude']
	));
	
	// If we don't have any attachments - output nothing
	if( empty($attachments) ) return '';
	
	// Output feed if requested
	if( is_feed() ) {
		$output = "\n";

		foreach( $attachments as $id => $attachment )
			$output .= wp_get_attachment_link($id, $options['size'], true) . "\n";
		return $output;
	}
	
	// Work out how many pages we need and what page we are currently on
	$imageCount = count($attachments);
	$pageCount = ceil($imageCount / $imagesPerPage);
	
	$currentPage = intval($_GET['galleryPage']);
	if( empty($currentPage) || $currentPage <= 0 ) $currentPage = 1;
	
	$maxImage = $currentPage * $imagesPerPage;
	$minImage = ($currentPage-1) * $imagesPerPage;
	
	if( $pageCount > 1 ) {
		$page_link = get_permalink();
		$page_link_perma = true;
		if ( strpos($page_link, '?') !== false )
			$page_link_perma = false;

		$gplist = '<div class="gallery-pages-list"><span class="gallery-page">' . __('Page', 'lbprojects') . '</span>';
		for( $j = 1; $j <= $pageCount; $j++ ) {
			if( $j == $currentPage ) {
				$gplist .= '<span class="gallery-page-numbers current">' . $j . '</span>';
			}
			else {
				$gplist .= '<a class="gallery-page-numbers" href="' . $page_link . ($page_link_perma ? '?' : '&amp;') . 'galleryPage=' . $j . '">' . $j . '</a>';
			}
		}
		$gplist .= '</div>';
	}
	else {
		$gplist= '';
	}
	
	$itemtag = tag_escape($options['itemtag']);
	$captiontag = tag_escape($options['captiontag']);
	$columns = intval($options['columns']);
	$itemwidth = $options['columns'] > 0 ? floor(100/$options['columns']) : 100;
	$float = is_rtl() ? 'right' : 'left';
	$icontag = $options['icontag'];
	$id = $options['id'];
	$size = $options['size'];
	
	$selector = "gallery-{$instance}";

	$gallery_style = $gallery_div = '';
	if( apply_filters( 'use_default_gallery_style', true ) )
		$gallery_style = "
		<style type='text/css'>
			#{$selector} {
				margin: auto;
			}
			#{$selector} .gallery-item {
				float: {$float};
				margin-top: 10px;
				text-align: center;
				width: {$itemwidth}%;
			}
			#{$selector} img {
				border: 2px solid #cfcfcf;
			}
			#{$selector} .gallery-caption {
				margin-left: 0;
			}
		</style>
		<!-- see gallery_shortcode() in wp-includes/media.php -->";
	$size_class = sanitize_html_class( $size );
	$gallery_div = "<div id='$selector' class='gallery galleryid-{$id} gallery-columns-{$columns} gallery-size-{$size_class}'>";
	$output = apply_filters( 'gallery_style', $gallery_style . "\n\t\t" . $gallery_div );
	
	$i = 0;
	$k = 0;
	
	foreach( $attachments as $id => $attachment ) {
		if( $k >= $minImage && $k < $maxImage ) {
			$link = isset($options['link']) && 'file' == $options['link'] ? wp_get_attachment_link($id, $size, false, false) : wp_get_attachment_link($id, $size, true, false);
			
			$output .= "<{$itemtag} class='gallery-item'>";
			$output .= "
				<{$icontag} class='gallery-icon'>
					$link
				</{$icontag}>";
			if( $captiontag && trim($attachment->post_excerpt) ) {
				$output .= "
					<{$captiontag} class='wp-caption-text gallery-caption'>
					" . wptexturize($attachment->post_excerpt) . "
					</{$captiontag}>";
			}
			$output .= "</{$itemtag}>";
			if( $columns > 0 && ++$i % $columns == 0 )
				$output .= '<br style="clear: both" />';
		}
		$k++;
	}
	$output .= "\n<div style='clear: both;'></div>$gplist\n</div>\n";

	return $output;
}

Die Funktionsweise des Codes, der auf dem Plugin Paginated Gallery von Phil Barker basiert, ist verhältnismäßig einfach. Zunächst wird der standardmäßige Shortcode [gallery] entfernt und durch einen gleichnamigen Shortcode ersetzt, der allerdings an die nachfolgende Funktion gebunden ist, sodass diese nun anstatt des in WordPress integrierten Codes ausgeführt wird. Im großen und ganzen entspricht die Funktion zwar derjenigen, die standardmäßig die Ausgabe der Bildergalerie in WordPress übernimmt, allerdings werden nicht alle Bilder auf einer einzeigen Seite angezeigt, sondern auf einer bestimmten Anzahl an Unterseiten. Deren Zahl wird durch die Anzahl der tatsächlich vorliegenden Bilder und der Anzahl der Bilder pro Seite berechnet. Anschließend wird eine Navigation ausgegeben, mit deren Hilfe man zwischen den Unterseiten der Bildergalerie blättern kann.

2) Das Stylesheet

Im Rohzustand gibt die Funktion nur einige aneinandergereihte Links zusammen mit dem Label “Seite” aus. Mithilfe von CSS kann die Navigation nun angepasst und um Effekte erweitert werden. Auch die aktuelle Seite kann besonders hervorgehoben werden.

.gallery-pages-list {
	margin-bottom: 12px;
	padding-left: 15px;
}

.gallery-page {
	margin-right: 4px;
	padding: 2px 6px 2px 6px;
	display: inline;
	border: 1px solid #ddd;
	color: #666;
	background-color: #fff;	
}

a.gallery-page-numbers,
a.gallery-page-numbers:active,
a.gallery-page-numbers:visited,
.gallery-page-numbers.current {
	margin-right: 4px;
	padding: 2px 6px 2px 6px;
	border: 1px solid #ddd;
	color: #666;
	background-color: #fff;
	transition: background-color .1s;
	-moz-transition: background-color .1s;
	-webkit-transition: background-color .1s; 
	-o-transition: background-color .1s;
	-ms-transition: background-color .1s;	
}

a.gallery-page-numbers:hover {
	text-decoration: none; 
	background-color: #ddd;
}

.gallery-page-numbers.current {
	padding: 3px 7px 3px 7px;
	border: 1px solid #ddd;
	background-color: #444;
	color: #fff;
}

3) Das Endergebnis

Das Endergebnis ist eine in Unterseiten arrangierte Bildergalerie. Mithilfe der Navigation kann man nun durch die verschiedenen Unterseiten der Galerie blättern. Alles in allem hilft die Funktion, die meines Erachtens standardmäßig in WordPress integriert sein sollte, den Überblick innerhalb einer umfangreichen Bildergalerie zu wahren.

Große Bildergalerien werden in einzelne Seiten umgebrochen.

Sofern das Theme, das Sie verwenden, über ein Admin-Panel verfügt, bietet es sich auch an, einige Optionen für das neue Feature zu erstellen. Zum Beispiel könnten Sie eine Option erstellen, mit deren Hilfe Sie die Anzahl der Galeriebilder pro Seite anpassen können, ohne den Code ändern zu müssen.

Hinterlasse eine Antwort

Ihre Email-Adresse wird nicht veröffentlicht. Erforderliche Felder sind markiert.

*

Zu diesem Artikel sind bisher keine freigegebenen Kommentare vorhanden.