WordPress Galerie-Widget

0

In diesem Artikel möchte ich Ihnen zeigen, wie Sie ein WordPress-Widget erstellen können, mit dessen Hilfe Sie zufällige Bilder aus Ihrer Mediathek zum Beispiel in der Sidebar oder im Footer Ihrer Website anzeigen können. Ein solches Widget sehen Sie zum Beispiel auch auf meiner Seite im Footer. Klicken Sie auf eines der Bilder, gelangen sie zum zugehörigen Artikel.

1) Der Widget-Code

Ein Widget erstellen Sie, indem Sie den unten stehenden Code in die functions.php Ihres Themes kopieren. Übersichtlicher ist es jedoch, eine neue Datei für das Widget zu erstellen und diese dann in der Funktions-Datei zu verlinken. Dazu können sie auf die Funktion require_once() zurückgreifen.

require_once(get_template_directory() . '/widgets/gallery_widget.php');

Der Code des Widgets ist recht schnell erklärt. Es handelt sich hierbei um eine Klasse, in der sich insgesamt vier Funktionen befinden. Die erste definiert die Eigenschaften des Widgets, wie Name und Beschreibung. die zweite Funktion enthält den Code, der dort ausgeführt wird, wo das Widget später angezeigt wird, also beispielsweise in der Sidebar. Hierrauf möchte ich später näher eingehen. Die nächste Funktion speichert die Werte, die im Backend in das Widget-Formular eingegeben wurde. Das sind beispielsweise der Titel des Widgets sowie die Anzahl der zu zeigenden Bilder. Welche Elemente dieses Formular enthält wird in der letzten Funktion festgelegt.

<?php

/*
*	Widget for display of random images from the media library
*/

class LB_random_images_widget extends WP_Widget {

	function LB_random_images_widget() {
		$wp_options = array('description' => __('This Widget displays random images from your media library.', 'lbprojects'));
		parent::WP_Widget(false, $name = __('LB - Images', 'lbprojects'), $wp_options);
	}

	function widget($args, $instance) {
		extract( $args );
		$title = apply_filters('widget_title', $instance['title']);
		$count = $instance['count'];
		
		echo $before_widget;
		
		echo '<div class="random-images">';
		
			if($title) echo $before_title . $title . $after_title;

			$attachments = get_posts( array( 'post_type' => 'attachment', 'orderby' => 'rand',  'numberposts' => $instance['count'], 'status' => 'publish', 'post_mime_type' => 'image' ) );

			if ($attachments) {
			
				foreach ($attachments as $attachment) {
				
					$parent_id = $attachment->post_parent;
				
					echo '<div class="random-thumbnail"><a href="' . get_permalink( $parent_id ) . '" title="' . get_the_title( $parent_id ) . '">';
					echo '<span class="image-layer"><i class="icon-circle-arrow-right"></i></span>';
					echo wp_get_attachment_image( $attachment->ID, array( 105, 105 ) );
					echo '</a></div>';
					
				}
				
			}

			echo '<div class="clear"></div>';

		echo '</div>';

		echo $after_widget;
	}

	function update($new_instance, $old_instance) {               

		$instance = $old_instance;

		$instance['title'] = strip_tags( $new_instance['title'] );
		$instance['count'] = strip_tags( $new_instance['count'] );

		return $instance;
	}

	function form($instance) {
		$default_settings = array( 'title' => __('Images', 'lbprojects'), 'count' => '4' );
		$instance = wp_parse_args( (array) $instance, $default_settings );		

		echo '<p>';
			echo '<label for="' . $this->get_field_id( 'title' ) . '">' . __('Title:', 'lbprojects') . '</label>';
			echo '<input class="widefat" type="text" id="' . $this->get_field_id( 'title' ) . '" name="' . $this->get_field_name( 'title' ) . '" value="' . $instance['title'] . '" />';
		echo '</p>';
		echo '<p>';
			echo '<label for="' . $this->get_field_id( 'count' ) . '">' . __('Count:', 'lbprojects') . ' ' . '</label>';
			echo '<input type="text" id="' . $this->get_field_id( 'count' ) . '" name="' . $this->get_field_name( 'count' ) . '" value="' . $instance['count'] . '" size="3" />';
		echo '</p>';
	}
}

?>

Galerie-Widget im Backend

Damit ist das Widget soweit fertiggestellt und kann über das Backend aktiviert werden, indem es per Drag & Drop an die entsprechende Stelle des Themes, also beispielsweise die Sidebar verschoben wird. Im Backend sieht das Widget wie auf dem Bild rechts aus.

Die Kernfunktion des Widgets stellt dabei die Funktion get_posts() dar, an die einige Parameter übergeben werden. So gibt die Funktion schließlich eine bestimmte Anzahl an Attachment-Artikel in zufälliger Reihenfolge zurück. in einer Foreach-Schleife werden die einzelnen Schlüssel des Aarrys schließlich ausgelesen und das an den Artikel angehängte Bild zurückgegeben und angezeigt.

2) Gestaltung des Widgets

Nun hat man im Frontend allerdings nur eine Liste mit Bildern. Diese kann man nach Belieben mithilfe von CSS gestalten. Das Stylesheet für mein Widget sieht man beispielsweise unten. Das Besondere ist der zusätzliche Layer, der über dem Bild angezeigt wird, sobald man es mit der Maus überfährt. Er verdunkelt das Bild und enthält einen Pfeil, sodass der Leser weiß, dass er hierüber zum entsprechenden Artikel gelangt.

/* Widget: Images */

.random-images .random-thumbnail {
	margin: 5px;
	float: left;
	position: relative;
	border: 2px solid #ddd;
	border-radius: 2px;
	-moz-border-radius: 2px;
	-webkit-border-radius: 2px;
	-o-border-radius: 2px;
	-ms-border-radius: 2px;
}

.random-images .random-thumbnail img {
	width: 105px;
	height: 105px;
	float: left;
}

#footer .random-images .random-thumbnail {
	border: 2px solid #33363b;
}

#footer .random-images .random-thumbnail img {
	width: 99px;
	height: 99px;
}

.random-images .random-thumbnail .image-layer{
	width: 100%;
	height: 100%;
	position: absolute;
	left: 0;
	top: 0;
	text-align: center;
	line-height: 100%;
	font-size: 50px;
	cursor: pointer;
	color: #fff;
	background-color: #33363b;
	opacity: 0;
	filter: alpha(opacity = 0);
	transition: opacity .2s linear;
	-moz-transition: opacity .2s linear;
	-webkit-transition: opacity .2s linear;
	-o-transition: opacity .2s linear;
	-ms-transition: opacity .2s linear;
}

.random-images .random-thumbnail:hover .image-layer{
	opacity: 0.8;
	filter: alpha(opacity = 80);
}

.random-images .random-thumbnail i {
	margin-top: 25px;
}

Hinterlasse eine Antwort

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

*

Zu diesem Artikel sind bisher keine freigegebenen Kommentare vorhanden.