Erstellen eines Quicksand-Portfolios mit WordPress

German (Deutsch) translation by Valentina (you can also view the original English article)

Heute verwandeln Sie Ihr einfaches Portfolio mit der Magie von Quicksand von Razorjack in etwas Erstaunliches.

Einführung

Wollten Sie schon immer das jQuery-Plugin Quicksand verwenden? Haben Sie jemals versucht, es mit WordPress zu implementieren? Aber fanden Sie es ein Albtraum, beides zu tun? Nun, ich werde eine einfache Schritt-für-Schritt-Anleitung durchgehen, um Sie mit Quicksand von einem leeren WordPress-Theme zu einem schönen benutzerdefinierten Portfolio zu führen. Ich werde ein benutzerdefiniertes Theme verwenden, das für die Zwecke dieses Tutorials zusammen mit WordPress 3.0+ entfernt wurde.

Öffnen Sie also Ihren bevorzugten Texteditor und fangen wir an!

Schritt 1 Erstellen Sie einen Beitragstyp

Mit WordPress sind wir in der Lage, benutzerdefinierte Beitragstypen zu erstellen, in denen wir alle unsere Inhalte verwalten können. Wir werden einen benutzerdefinierten Beitragstyp erstellen, um alle unsere Portfolioelemente in einem speziellen Admin-Bereich zu speichern.

Für eine einfache Codeverwaltung erstellen wir zunächst einen Ordner namens portfolio und eine PHP-Datei namens portfolio-post-types.php (oder etwas, das Sie für geeignet halten).

Nachdem Sie eine Datei erstellt haben, fügen wir etwas Code hinzu...

Beginnen wir mit der Erstellung einer Funktion:

<?php

	// function: post_type BEGIN
	function post_type()
	{
		// We will fill this function in the next step
	} // function: post_type END

Nachdem wir nun unsere leere Funktion erstellt haben, fügen wir etwas Code hinzu, damit diese Funktion etwas Besonderes macht. Erstellen Sie zunächst die Labels für unseren benutzerdefinierten Beitragstyp. Fügen Sie den folgenden Code in unsere post_type-Funktion ein:

$labels = array(
	'name' => __( 'Portfolio'), 
	'singular_name' => __('Portfolio'),
	'rewrite' => array(
		'slug' => __( 'portfolio' ) 
	),
	'add_new' => _x('Add Item', 'portfolio'), 
	'edit_item' => __('Edit Portfolio Item'),
	'new_item' => __('New Portfolio Item'), 
	'view_item' => __('View Portfolio'),
	'search_items' => __('Search Portfolio'), 
	'not_found' =>  __('No Portfolio Items Found'),
	'not_found_in_trash' => __('No Portfolio Items Found In Trash'),
	'parent_item_colon' => ''
);

Eine Aufschlüsselung des Codes, den wir gerade geschrieben haben:

Die Variable 'labels' ist ein Array von Strings, die Ihren Beitragstyp darstellen. Jeder der Strings ist Text, der für die jeweilige Funktion ausgegeben wird.

name – Die Pluralform des Namens Ihres Beitragstyps.
singular_name – Die Singularform des Namens Ihres Beitragstyps.
rewrite – Schreibe Permalinks mit diesem Format neu.
add_new – Der Menüpunkt zum Hinzufügen eines neuen Beitrags.
edit_item – Die Kopfzeile, die beim Bearbeiten eines Beitrags angezeigt wird.
new_item – Wird im Favoritenmenü im Admin-Header angezeigt.
view_item – Wird neben dem Permalink auf dem Bildschirm zum Bearbeiten von Beiträgen angezeigt.
search_items – Schaltflächentext für das Suchfeld auf dem Bildschirm zum Bearbeiten von Beiträgen.
not_found – Text, der angezeigt werden soll, wenn durch die Suche im Admin keine Beiträge gefunden werden.
not_found_in_trash – Text, der angezeigt werden soll, wenn sich keine Beiträge im Papierkorb befinden.
parent_item_colon – Wird als Label für einen übergeordneten Beitrag auf dem Bildschirm zum Bearbeiten von Beiträgen verwendet. Nur sinnvoll für hierarchische Beitragstypen.

Erstellen Sie als Nächstes die Argumente für unseren benutzerdefinierten Beitragstyp. Fügen Sie den folgenden Codeabschnitt in unsere post_type-Funktion ein:

$args = array(
	'labels' => $labels,
	'public' => true,
	'publicly_queryable' => true,
	'show_ui' => true,
	'query_var' => true,
	'rewrite' => true,
	'capability_type' => 'post',
	'hierarchical' => false,
	'menu_position' => null,
	'supports' => array(
		'title',
		'editor',
		'thumbnail'
	)
);

labels – Ein Array von Labels für diesen Beitragstyp.
public – Metaargument, das verwendet wird, um Standardwerte für publicly_queriable, show_ui, show_in_nav_menus und exclude_from_search zu definieren.
publicly_queryable – Ob Abfragen vom Typ Post vom Frontend aus durchgeführt werden können.
show_ui – Ob eine Standardbenutzeroberfläche für die Verwaltung dieses Beitragstyps generiert werden soll.
query_var – False, um Abfragen zu verhindern, oder Zeichenfolgenwert der Abfragevariable, die für diesen Beitragstyp verwendet werden soll.
rewrite - Permalinks mit diesem Format neu schreiben.
capability_type – Die Zeichenfolge, die zum Erstellen der Lese-, Bearbeitungs- und Löschfunktionen verwendet werden soll.
hierarchical – Ob der Beitragstyp hierarchisch ist. Ermöglicht die Angabe des übergeordneten Elements.
menu_position – Die Position in der Menüreihenfolge, an der der Beitragstyp im Admin erscheinen soll.
supports – Ein Alias für den direkten Aufruf von add_post_type_support().

Lesen Sie mehr über add_post_type_support im WordPress-Codex

Jetzt ist unser Beitragstyp mit den Einstellungen eingerichtet, wir müssen den Beitragstyp registrieren. Wir registrieren unseren Beitragstyp, indem wir den folgenden Code in unsere post_type-Funktion einfügen:

1	register_post_type(__( 'portfolio' ), $args);

Ausgabe des benutzerdefinierten Posttyps formatieren

Wir haben jetzt unseren benutzerdefinierten Beitragstyp erstellt. Lassen Sie uns die Ausgabe formatieren, damit wir benutzerfreundliche Nachrichten erhalten. Beginnen Sie damit, eine weitere Funktion in unserer Datei portfolio-post-type.php zu erstellen.

// function: portfolio_messages BEGIN
function portfolio_messages($messages)
{
	$messages[__( 'portfolio' )] = 
		array(
			0 => '', 
			1 => sprintf(('Portfolio Updated. <a href="%s">View portfolio</a>'), esc_url(get_permalink($post_ID))),
			2 => __('Custom Field Updated.'),
			3 => __('Custom Field Deleted.'),
			4 => __('Portfolio Updated.'),
			5 => isset($_GET['revision']) ? sprintf( __('Portfolio Restored To Revision From %s'), wp_post_revision_title((int)$_GET['revision'], false)) : false,
			6 => sprintf(__('Portfolio Published. <a href="%s">View Portfolio</a>'), esc_url(get_permalink($post_ID))),
			7 => __('Portfolio Saved.'),
			8 => sprintf(__('Portfolio Submitted. <a target="_blank" href="%s">Preview Portfolio</a>'), esc_url( add_query_arg('preview', 'true', get_permalink($post_ID)))),
			9 => sprintf(__('Portfolio Scheduled For: <strong>%1$s</strong>. <a target="_blank" href="%2$s">Preview Portfolio</a>'), date_i18n( __( 'M j, Y @ G:i' ), strtotime($post->post_date)), esc_url(get_permalink($post_ID))),
			10 => sprintf(__('Portfolio Draft Updated. <a target="_blank" href="%s">Preview Portfolio</a>'), esc_url( add_query_arg('preview', 'true', get_permalink($post_ID)))),
		);
	return $messages;

} // function: portfolio_messages END

Wir haben gerade eine Funktion namens portfolio_messages erstellt, die ein Argument namens $messages akzeptiert. Anschließend erstellen wir eine Variable, die ein Array für alle unsere Nachrichten speichert. Wir lassen "0" in unserem Array leer, weil wir unsere Indizierung bei 1 mit unseren Nachrichten beginnen. Dann endlich unser Array an unsere Funktion zurückgeben.

Taxonomie erstellen

Schließlich müssen wir unsere Taxonomie erstellen. Beginnen Sie mit der Erstellung einer weiteren Funktion namens portfolio_filter und geben Sie den folgenden Code ein:

// function: portfolio_filter BEGIN
function portfolio_filter()
{
	register_taxonomy(
		__( "filter" ),
		array(__( "portfolio" )),
		array(
			"hierarchical" => true,
			"label" => __( "Filter" ),
			"singular_label" => __( "Filter" ),
			"rewrite" => array(
				'slug' => 'filter',
				'hierarchical' => true
			)
		)
	);
} // function: portfolio_filter END

Wir beginnen mit der Registrierung unseorer Taxonomie und wenden die Taxonomie dann auf unser prtfolio mit benutzerdefinierten Posttypen an. Anschließend wenden wir die endgültigen Einstellungen der Taxonomie an und geben die erstellten Labels ein. Der Grund, warum wir eine Taxonomie erstellen, ist, dass wir sie beim Sortieren unseres Portfolios mit Quicksand als Referenzschlüssel verwenden.

Nachdem nun unser gesamter benutzerdefinierter Beitragstyp mit der richtigen Formatierung und unserer eigenen Taxonomie abgeschlossen ist, müssen wir endlich unseren gesamten Code initialisieren, damit er im Admin angezeigt wird. Beginnen wir mit dem Hinzufügen des folgenden Codes am Ende unserer Datei:

1	add_action( 'init', 'post_type' );
2	add_action( 'init', 'portfolio_filter', 0 );
3	add_filter( 'post_updated_messages', 'portfolio_messages' );

Nachdem wir dies eingegeben haben, müssen wir unsere Datei functions.php öffnen und die folgende Codezeile einfügen:

1	include("portfolio/portfolio-post-types.php");

Wir müssen unseren benutzerdefinierten Portfolio-Typ in unsere Datei functions.php aufnehmen, damit das Skript ausgeführt wird, wenn die Funktionen Ihres WordPress-Themen aufgerufen werden. Jetzt sehen Sie in Ihrem Admin-Panel einen Abschnitt mit dem Titel Portfolio mit 3 Unternavigationselementen namens "Portfolio", "Element hinzufügen" und "Filter".

Schritt 2 Portfolioseite erstellen

Jetzt haben wir unsere gesamten Portfolio-Einstellungen abgeschlossen, wir müssen unsere Portfolio-Elemente ausgeben. Wir beginnen dies, indem wir eine neue PHP-Datei namens portfolio.php erstellen. Lassen Sie uns zunächst einige der wesentlichen Elemente für die Erstellung einer Seitenvorlage hinzufügen:

<?php /* Template Name: Portfolio */ ?>

	<?php get_header(); ?>
	
	<!-- #content  BEGIN  -->
	<div  id="content" class="clearfix">
	
		// We will add  our content later 
		
	</div><!-- #content  END -->
	
<?php  get_footer(); ?>

Jetzt haben wir unsere grundlegende Seitenvorlage erstellt, die wir zum Auffüllen unseres Portfolios benötigen. Wir müssen zuerst eine Seite erstellen, die als unsere Portfolio-Seite fungiert. Gehen Sie also zu Seiten -> Neu hinzufügen in unserem Dashboard. Auf der rechten Seite sehen Sie ein Feld mit dem Titel Seitenattribute mit einem Dropdown-Menü von Standardvorlage, wählen Sie die gewünschte Vorlage aus, die Sie in unserem Fall-Portfolio verwenden möchten, und wählen Sie dann Veröffentlichen.

Den Filter anzeigen

Kehren wir nun zur Bearbeitung unserer Portfolio-Seitenvorlage zurück und beginnen mit dem Einfügen des Filters für unser Portfolio. Zuerst packen wir den Filter in eine ungeordnete Liste und jede der Kategorien wird ein Element in unserer Liste sein.

<ul class="filter clearfix">

	<li><strong>Filter:</strong></li>
	<li class="active"><a href="javascript:void(0)" class="all">All</a></li>

</ul>

Fügen wir unserem Filter etwas PHP hinzu, um automatisch die Filterkategorien zu generieren, die in unserem Portfolio verwendet werden.

<?php
	$terms = get_terms('filter', $args);
	$count = count($terms); 
	$i=0;
	if ($count > 0) {
		foreach ($terms  as $term) {
		$i++;
		$term_list  .= '<li><a href="javascript:void(0)" class="'.  $term->slug .'">' . $term->name . '</a></li>';
		
			if ($count  != $i)
			{
				$term_list .= '';
			}
			else
			{
				$term_list .= '';
			}
		}
		echo $term_list;
	}
?>

Was wir hier tun, ist zunächst die Initialisierung der Taxonomie, die wir erhalten möchten, in unserem Fall-Filter. Zweitens richten Sie mit unseren Kategorien eine Zählung ein, damit wir jedes Element innerhalb unseres Filters erhöhen können, und wenden Sie dann eine bedingte Anweisung an, um zu überprüfen, ob die von uns festgelegte Zählung kleiner als 0 ist; d.h. wenn keine Kategorien im Filter vorhanden sind oder einem Portfolioelement keine Kategorien zugeordnet sind, wird nichts ausgegeben. Wenn unser Filter Kategorien enthält, möchten wir die Ausgabe für jedes Element ändern.

Wir tun dies durch die folgende Zeile in unserem Codesegment:

1	$term_list .= '<li><a href="javascript:void(0)" class="'. $term->slug .'">' . $term->name . '</a></li>';

Wir erstellen ein Listenelement, das in unsere ungeordnete Liste passt, und setzen dann "href" auf ein leeres Ziel, da Quicksand die Organisation des Inhalts übernimmt, dann setzen wir unseren Klassennamen auf den Slug des Portfolioelements für eine konsistente Referenzierung. und schließlich den Namen der Kategorie innerhalb unserer Filter auszugeben.

Zeigen Sie die Portfolioelemente an

Genial, wir haben jetzt einen dynamischen Filter implementiert. Jetzt werden wir unsere Portfolio-Elemente ausgeben. Beginnen wir mit der Abfrage unserer Datenbank, um alle Beiträge für den Portfolio-Beitragstyp abzurufen und unseren WordPress Loop einzurichten. Wir beginnen damit, ein neues WP_Query-Objekt einzurichten und ihm die richtigen Parameter zu übergeben.

<?php
	$wpbp = new WP_Query(array(
			'post_type' =>  'portfolio',
			'posts_per_page'  =>'-1'
		)
	);
?>

Wir weisen unser WP_Query-Objekt einer Variablen zu, damit wir beim Initialisieren unserer Schleife auf unsere Abfrage verweisen können. Wir setzen unseren Beitragstyp auf Portfolio, fragen also nur unseren benutzerdefinierten Beitragstyp ab, den wir zuvor erstellt haben, und setzen schließlich die posts_per_page auf -1. Wir verwenden -1, damit es keine feste Begrenzung der Anzahl der Beiträge pro Seite gibt, daher werden alle Portfolioelemente angezeigt, wenn wir möchten, können wir auch eine beliebige Anzahl eingeben und es würde nur die Anzahl der Portfolioelemente angezeigt, die hier eingegeben wurde.

Da wir nun ein Abfrageobjekt haben, auf das wir verweisen können, richten wir unsere Schleife so ein, dass sie unsere Portfolioelemente ausgibt. Wir beginnen mit dem Einfügen des folgenden Codes:

<?php if ($wpbp->have_posts()) : while  ($wpbp->have_posts()) : $wpbp->the_post(); ?>

	<?php // All of our portfolio content will be inserted in  here... ?>
	
<?php endwhile; endif; ?>
<?php wp_reset_query(); ?>

Bevor wir anfangen, Inhalte in unsere Schleife einzugeben, werden wir unsere vorgestellten Bilder einrichten. Öffnen Sie Ihre Datei functions.php und wir fügen einige benutzerdefinierte Bildgrößen hinzu, die für jedes Portfolioelement ausgegeben werden.

Lassen Sie uns zuerst überprüfen, ob die aktuelle Version von WordPress die Funktion der vorgestellten Bilder unterstützt, und dann einige allgemeine Einstellungen vornehmen, damit sie richtig funktioniert. Wir fügen Unterstützung für Post-Thumbnails hinzu und legen eine Standardgröße von 56 x 56 Pixel fest.

if ( function_exists( 'add_theme_support' ) ) 
{
	add_theme_support(  'post-thumbnails' );
	set_post_thumbnail_size(  56, 56, true );
}

Dann möchten wir unsere eigene benutzerdefinierte Miniaturansichtsgröße hinzufügen. Fügen Sie den folgenden Code in eine Zeile darunter ein: set_post_thumbnail_size

1	add_image_size( 'portfolio', 295, 150, true );

Mit dieser Methode können Sie Ihre eigene Miniaturansichtsgröße erstellen, indem Sie zuerst den Referenznamen für die Miniaturansicht festlegen, dann die Breite und Höhe und schließlich, wenn die Miniaturansicht das Bild hart auf die angegebene Größe zuschneiden soll. Sie können die Größe Ihres vorgestellten Bildes an Ihr Layout anpassen. Mit dem Zweck dieses Tutorials habe ich ein 3-Spalten-Raster-Layout.

Nachdem wir unser vorgestelltes Bild eingerichtet haben, kehren wir zu unserer Portfolioseitenvorlage zurück und geben das vorgestellte Bild des Portfolioelements aus.

Da die Organisation für jedes Portfolioelement am besten durch eine ungeordnete Liste gehandhabt wird, erstellen wir zuerst eine und geben dann unser soeben eingerichtetes vorgestelltes Bild aus. Fügen Sie den folgenden Code in Ihre WordPress-Schleife ein:

<ul class="filterable-grid clearfix">
	<li>
	
		<?php if (  (function_exists('has_post_thumbnail')) && (has_post_thumbnail()) ) :  ?>
		
			<?php  the_post_thumbnail('portfolio'); ?>
			
		<?php endif;  ?>
		
		<p><a  href="<?php the_permalink(); ?>"><?php echo  get_the_title(); ?></a></p>
		
	</li>
</ul>

Wir prüfen zunächst, ob das Thema die Thumbnail-Funktion unterstützt. Wenn das Thema diese Funktion unterstützt, wird das vorgestellte Bild in der dedizierten Miniaturansicht ausgegeben, die wir zuvor angegeben haben. Nachdem wir unser vorgestelltes Bild ausgegeben haben, geben wir den Titel des Portfolio-Elements direkt unter dem Bild aus.

Portfolioelemente und Filter verbinden

Wir müssen die verschiedenen Elemente jedes Portfoliolistenelements optimieren, um sicherzustellen, dass die Referenzierung für jedes Portfolio auf die Kategorien korrekt ist, denen das Element zugewiesen ist. Dazu müssen wir zunächst die Kategorien aus unserer Taxonomie abrufen. Fügen Sie den folgenden Code in Ihre Schleife ein:

1	<?php $terms = get_the_terms( get_the_ID(), 'filter' ); ?>

Als nächstes fügen wir unserem Listenelement (li) einige Attribute hinzu. Wir beginnen damit, dass wir unserem Listenelement eine data-id hinzufügen, um jedem der Portfolioelemente eine eindeutige Identität zu verleihen. Wir werden auch einen data-type hinzufügen; dies dient als unsere Referenz zu unserem Filter. Lassen Sie uns unser Eröffnungslistenelement (li) durch den folgenden Code ersetzen:

1	<li data-id="id-<?php echo $count; ?>" data-type="<?php foreach ($terms as $term) { echo strtolower(preg_replace('/\s+/', '-', $term->name)). ' '; } ?>">

Wir wenden eine Zählung auf unsere data-id an, und beim Durchlaufen jedes Elements wird die Zählung erhöht (wir werden die Zählung in Kürze hinzufügen). Wir durchlaufen dann jede Kategorie in unserer Taxonomie und wenden einen regulären Ausdruck an, um die Leerzeichen zu finden, und ersetzen ihn durch ein "-", um dem Slug der Kategorie zu entsprechen, und fügen schließlich ein Leerzeichen am Ende ein, damit wir uns anwenden können mehr als eine Kategorie zu einem Portfolioelement.

Schließlich werden wir sicherstellen, dass wir unsere Anzahl erhöhen und eine eindeutige Referenz zu jedem unserer Portfolioelemente bereitstellen. Wir müssen den folgenden Code hinzufügen, kurz bevor wir die Schleife beenden:

1	<?php $count++; ?>

Endgültiger Code zum Anzeigen des Portfolios

<ul class="filterable-grid clearfix">

	<?php $wpbp = new WP_Query(array(  'post_type' => 'portfolio', 'posts_per_page' =>'-1' ) ); ?>

	<?php if ($wpbp->have_posts()) :  while ($wpbp->have_posts()) : $wpbp->the_post(); ?>

	<?php $terms = get_the_terms(  get_the_ID(), 'filter' ); ?>

		<li data-id="id-<?php echo  $count; ?>" data-type="<?php foreach ($terms as $term) { echo  strtolower(preg_replace('/\s+/', '-', $term->name)). ' '; } ?>">
	
			<?php if ( (function_exists('has_post_thumbnail')) && (has_post_thumbnail()) ) :  ?>
			
				<?php  the_post_thumbnail('portfolio'); ?>
			
			<?php endif; ?>
		
			<p><a href="<?php the_permalink(); ?>"><?php echo get_the_title();  ?></a></p>
	
		</li>

	<?php $count++; ?>
	<?php endwhile; endif; ?>
	<?php wp_reset_query(); ?>

</ul>

Schritt 3 jQuery und Quicksand

Wir machen jetzt Fortschritte, aber bevor wir fortfahren, müssen wir einige jQuery-Skripte herunterladen. Wir müssen die folgenden Skripte herunterladen:

jQuery 1.7 (Version enthalten in WordPress 3.3.1)
Quicksand-Plugin (neueste Version von GitHub)
Easing Plugin (Version 1.3)

Wir müssen auch eine JavaScript-Datei erstellen, um all unsere benutzerdefinierten jQuery zu verarbeiten, die wir in Kürze schreiben werden. Erstellen wir also eine leere JavaScript-Datei namens jquery.custom.js. Nachdem wir nun alle unsere wesentlichen Skripte haben, öffnen wir unsere functions.php und erstellen eine leere Funktion namens register_js. Sobald wir unsere leere Funktion haben, werden wir unsere Skripte mit den Methoden wp_register_script und wp_enqueue_script einfügen. Zuerst müssen wir überprüfen, dass wir nicht im Admin sind, um sicherzustellen, dass die Skripte nur im Frontend geladen werden. Fügen Sie den folgenden Code in unsere Funktion ein:

// Register our scripts
function register_js()
{
	if ( !is_admin() )
	{
		wp_register_script( 'quicksand', get_template_directory_uri() . '/js/jquery.quicksand.js', 'jquery' );

		wp_register_script( 'easing', get_template_directory_uri() . '/js/jquery.easing.1.3.js', 'jquery' );

		wp_register_script( 'custom', get_template_directory_uri() . '/js/jquery.custom.js', 'jquery', '1.0', true );

		wp_enqueue_script( 'jquery' );
		wp_enqueue_script( 'quicksand' );
		wp_enqueue_script( 'easing' );
		wp_enqueue_script( 'custom' );
	}
}

Zuerst geben wir mit wp_register_script ein Handle als erstes Argument als Referenz beim Einreihen der Skripte an, dann fügen wir als zweites Argument den Quelllink zum Skript hinzu (dies gilt für jede Registrierung eines Skripts). Wir geben auch jquery als Abhängigkeit an, um die in WordPress enthaltene Version von jQuery zu laden, wenn wir das Skript in die Warteschlange stellen.

Nachdem wir alle unsere Skripte registriert haben, reihen wir sie mit wp_enqueue_script in die Warteschlange ein. Wir übergeben alle Handles, die wir bei der Registrierung verwendet haben, als Referenz, um unsere Skripte in die Warteschlange einzureihen. Schließlich müssen wir unsere Funktion initialisieren, indem wir den folgenden Code in unsere Datei functions.php einfügen:

1	add_action('init', 'register_js');

Quicksand schreiben

Nachdem wir nun alle unsere Skripte eingerichtet haben, können wir damit beginnen, unser benutzerdefiniertes jQuery-Skript für die Handhabung von Quicksand zu schreiben. Öffnen wir unser jquery.custom.js-Skript und richten wir die Umgebung ein, indem wir den folgenden Code einfügen:

jQuery(document).ready(function() {

	// We will insert our quicksand script in here

}); // END OF DOCUMENT

Jetzt haben wir unsere Skriptstruktur, wir erstellen eine Funktion namens portfolio_quicksand und führen sie nur aus, wenn das Quicksand-Plugin existiert.

function portfolio_quicksand() {

	// All of our quicksand handling will happen in this function

}

if(jQuery().quicksand) {

	portfolio_quicksand();

}

Ich werde das Folgende in kleinere Schritte unterteilen, damit Sie alles verstehen, was beim Erstellen eines Quicksand-Portfolios passiert. Beginnen wir mit der Einrichtung unserer Variablen. Fügen Sie den folgenden Code in unsere portfolio_quicksand-Funktion ein:

var $filter;
var $container;
var $containerClone;
var $filterLink;
var $filteredItems;

Wir werden diese Variablen häufiger verwenden, daher ist es immer eine gute Möglichkeit, eine solide Grundlage für die Einrichtung von Variablen zu schaffen. Als nächstes werden wir unsere Variablen zuweisen:

1	$filter = $('.filter li.active a').attr('class');
2	$filterLink = $('.filter li a');
3	$container = $('ul.filterable-grid');
4	$containerClone = $container.clone();

Wir richten unseren Filter zuerst auf die ungeordnete Listenklasse aus unserer Portfolioseitenvorlage ein. Zweitens richten wir einen filterLink ein; dies wird als unser angeklickter Artikel in unserem Filter fungieren. Dann müssen wir unseren Container unserer Portfolioelemente zuweisen und schließlich benötigen wir eine geklonte Version unseres Containers, um die Daten mit Quicksand zu manipulieren.

Als Nächstes werden wir unsere Klickfunktion schreiben. Wenn ein Benutzer eine Kategorie auswählt, sollte der Container manipuliert und die Ausgabe des Inhalts angezeigt werden. Beginnen wir mit dem Aufruf einer Klickfunktion auf unserem filterLink:

$filterLink.click(function(e) {

	// We will add the content for this function now...	

});

Lassen Sie uns nun den aktiven Zustand des Listenelements behandeln. Wir beginnen damit, dass wir zuerst jede Klasse mit einem aktuellen aktiven Status entfernen, dann den Filter durchsuchen und den Filter in separate Elemente aufteilen und schließlich eine aktive Klasse auf das angeklickte Element (Kategorie) anwenden:

	$('.filter li').removeClass('active');
	
	$filter = $(this).attr('class').split(' ');
			
	$(this).parent().addClass('active');

Dies hilft beim Gestalten Ihres Filters, da Sie aktive Zustände bereitstellen können, wenn ein Benutzer eine Kategorie ausgewählt hat.

Im Folgenden werden wir eine Bedingung für die Filterung unserer Daten behandeln. Wir prüfen zunächst, ob alle ausgewählt wurden. Wenn alle ausgewählt wurde, zeigen Sie alle Elemente innerhalb unseres Containers an, andernfalls zeigen Sie die Elemente innerhalb des Containers an, die durch den Filter ausgewählt wurden.

Wenn wir zuvor unsere Portfolioseitenvorlage erstellt und jedem unserer Portfolioelemente einen data-type zugewiesen haben, verwenden wir ihn hier als Referenzschlüssel, um unsere ausgewählten Daten zu finden.

	if ($filter == 'all') {
		$filteredItems = $containerClone.find('li'); 
	}
	else {
		$filteredItems = $containerClone.find('li[data-type~=' + $filter + ']'); 
	}

Schließlich rufen wir die Quicksand-Methode auf und übergeben unsere filteredItems und alle unsere Animationsoptionen:

	$container.quicksand($filteredItems, 
	{
		duration: 750,
		easing: 'easeInOutCirc',
		adjustHeight: 'dynamic' 
	});

Endgültiger Code für unseren Quicksand

function portfolio_quicksand() {
	
	// Setting up our variables
	var $filter;
	var $container;
	var $containerClone;
	var $filterLink;
	var $filteredItems
	
	// Set our filter
	$filter = $('.filter li.active a').attr('class');
	
	// Set our filter link
	$filterLink = $('.filter li a');
	
	// Set our container
	$container = $('ul.filterable-grid');
	
	// Clone our container
	$containerClone = $container.clone();
 
	// Apply our Quicksand to work on a click function
	// for each of the filter li link elements
	$filterLink.click(function(e) 
	{
		// Remove the active class
		$('.filter li').removeClass('active');
		
		// Split each of the filter elements and override our filter
		$filter = $(this).attr('class').split(' ');
		
		// Apply the 'active' class to the clicked link
		$(this).parent().addClass('active');
		
		// If 'all' is selected, display all elements
		// else output all items referenced by the data-type
		if ($filter == 'all') {
			$filteredItems = $containerClone.find('li'); 
		}
		else {
			$filteredItems = $containerClone.find('li[data-type~=' + $filter + ']'); 
		}
		
		// Finally call the Quicksand function
		$container.quicksand($filteredItems, 
		{
			// The duration for the animation
			duration: 750,
			// The easing effect when animating
			easing: 'easeInOutCirc',
			// Height adjustment set to dynamic
			adjustHeight: 'dynamic' 
		});
	});
}

Schritt 4 Lightbox-Integration (zusätzliches Extra)

Erstaunlich richtig, Sie sollten jetzt ein voll funktionsfähiges Quicksand-Portfolio haben, aber lassen Sie uns nicht damit aufhören. Ich werde ein zusätzliches Extra hinzufügen, dies ist völlig optional, aber es könnte ein beliebtes Feature werden, und das ist Lightbox. Wir werden das jQuery-Plugin namens PrettyPhoto für unsere Lightbox-Integration verwenden.

Als erstes laden wir das PrettyPhoto-Plugin herunter.

PrettyPhoto v3 (oder neueste Version)

Sobald wir unsere PrettyPhoto-Dateien heruntergeladen haben, kopieren wir zuerst die PrettyPhoto-Bilder, die sich im Bilder-Ordner befinden, und dann müssen Sie den Ordner mit dem Titel PrettyPhoto in unser Design kopieren. Wir müssen auch die CSS- und die JavaScript-Datei von PrettyPhoto kopieren, also kopieren wir sie in die entsprechenden Ordner in unserem Design.

Nachdem wir nun alle unsere Dateien an Ort und Stelle haben, müssen wir sie in unserem Thema initialisieren. In unserer Datei functions.php werden wir eine weitere Funktion erstellen, um unsere Stile zu handhaben, und wir nennen diese Funktion register_css. Dann registrieren wir unsere Stile und reihen unsere Stile in die Warteschlange ein, fügen also den folgenden Code in Ihre Datei functions.php ein:

// Register our styles
function register_css()
{
	if (!is_admin()) {
		wp_register_style( 'prettyPhoto', get_template_directory_uri() . '/css/prettyPhoto.css' );
		wp_enqueue_style( 'prettyPhoto' );
	}
}

add_action( 'init', 'register_css' );

Wir haben alle unsere Dateien an Ort und Stelle und sie werden durch unser Thema initialisiert. Jetzt müssen wir dies nutzen und Lightbox in unser Theme implementieren. Öffnen wir unsere portfolio.php (Portfolioseitenvorlage) und fügen wir unserem vorgestellten Bild etwas Code hinzu.

Zuerst müssen wir ein großes Bild des eingestellten vorgestellten Bildes erhalten. Dies wird dann als Vollbild fungieren, wenn der Benutzer auf das Bild klickt und PrettyPhoto geladen wird. In unseren WordPress Loop müssen wir den folgenden Code einfügen:

1	<?php
2	$large_image = wp_get_attachment_image_src( get_post_thumbnail_id(get_the_ID()), 'fullsize', false, '' );
3	$large_image = $large_image[0];
4	?>

Der von uns eingefügte Code findet den aktuellen Beitrag innerhalb der Schleife und findet die Originalquelle des Bildes und dann die Vollversion des Bildes. Sobald wir unser Bild in voller Größe zurückgegeben haben, erzwingen wir, dass das Bild im Array-Index von 0 gespeichert wird. Dies wird für keine Überschreibungen oder Duplikate mit unseren Bildern in voller Größe verwendet.

Sobald wir auf unser Bild in voller Größe zugreifen können, werden wir PrettyPhoto auf unserem vorgestellten Bild initialisieren. Der folgende Code verknüpft das Bild in voller Größe mit dem vorgestellten Bild des Portfolio-Elements und übergibt den Verweis an PrettyPhoto. Ersetzen Sie den Code, in dem Sie Ihr vorgestelltes Bild erstellt haben, durch den folgenden:

1	<a rel="prettyPhoto[gallery]" href="<?php echo $large_image ?>"><?php the_post_thumbnail('portfolio'); ?></a>

Großartig, wir haben alle unsere Dateien und Skripte an Ort und Stelle, wir haben das Bild in voller Größe für unser vorgestelltes Bild und wir haben unser vorgestelltes Bild mit PrettyPhoto auf unser Bild in voller Größe verwiesen. Als nächstes müssen wir unser JavaScript schreiben, damit die Lightbox erscheint und funktioniert.

Kehren wir zu unserer Datei jquery.custom.js zurück und erstellen eine weitere leere Funktion, um unser PrettyPhoto zu verarbeiten:

function lightbox() {

	// Our Lightbox functioning will be added now...

}

if(jQuery().prettyPhoto) {
	lightbox();
}

Nachdem wir nun unsere Funktion haben, werden wir PrettyPhoto initialisieren. Wir tun dies, indem wir den folgenden Code in unsere Lightbox-Funktion einfügen:

jQuery("a[rel^='prettyPhoto']").prettyPhoto({
	animationSpeed:'fast',
	slideshow:5000,
	theme:'pp_default',
	show_title:false,
	overlay_gallery: false,
	social_tools: false
});

Die vollständige Dokumentation aller Parameter, die PrettyPhoto bei der Verwendung des Plugins akzeptiert, finden Sie unter: PrettyPhoto jQuery Lightbox Clone

Es ist also alles erledigt! Lightbox-Implementierung in Ihr WordPress-Thema, aber warten Sie, lassen Sie mich raten, wenn Sie auf den Filter klicken und Quicksand verwenden; die Lightbox funktioniert nicht mehr. Das liegt daran, dass wir unser Quicksand-Skript ändern und noch ein kleines Stück Code übergeben müssen, um sicherzustellen, dass Lightbox auch dann funktioniert, wenn wir unser Portfolio durchsuchen.

Beheben wir dieses kleine Problem, indem wir das folgende Skript zu unserer portfolio_quicksand-Funktion in unserer Datei jquery.custom.js hinzufügen:

1	$container.quicksand($filteredItems,
2	function () { lightbox(); }
3	);

Was wir hier tun, ist das Quicksand-Plugin noch einmal aufzurufen und eine Funktion innerhalb dieses Aufrufs an unsere Lightbox-Funktion zu übergeben. Jedes Mal, wenn Quicksand den Inhalt filtert, wird die Lightbox-Funktion aufgerufen, die PrettyPhoto auf jedes Bild anwendet.

Schritt 5 Paginierungsintegration (zusätzliches Extra)

Viele Leute lieben es, Quicksand zu verwenden, aber einige Leute mögen die Verwendung von Quicksand und Paginierung in ihren Portfolios. Dies ist ein weiteres zusätzliches Extra, um eine Paginierung in Ihrem Portfolio zu erstellen. Ich werde das WordPress-Plugin verwenden: WP_PageNavi.

Lassen Sie uns zuerst das Plugin installieren und aktivieren. Gehen Sie zur Seite Plugins -> Neu hinzufügen in unserem Admin-Bereich und suchen Sie nach WP_PageNavi, klicken Sie nach der Installation auf Jetzt installieren und Plugin aktivieren, sobald es installiert ist.

Nachdem wir unser Plugin eingerichtet haben, öffnen wir unsere Portfolioseitenvorlage und nehmen einige Änderungen an unserer Datei vor.

Zuerst müssen wir unsere Seite so einrichten, dass die Paginierung zugelassen wird. Wir tun dies, indem wir das folgende Codesegment einfügen, bevor wir unsere Datenbank abfragen:

1	$paged = get_query_var('paged') ? get_query_var('paged') : 1;

Sobald wir unsere Paginierung initialisiert haben, müssen wir die Datenbankabfrage ändern. Wir ändern post_per_page in eine Zahl, um eine maximale Anzahl von Beiträgen anzuzeigen, die auf jeder Seite angezeigt werden. Dann übergeben wir einen neuen Parameter an unsere ausgelagerte Abfrage und verweisen diesen auf unser Codesegment, das es uns ermöglichte, die Seite zu paginieren, wie der folgende Code zeigt:

1	$wpbp = new WP_Query(array( 'post_type' => 'portfolio', 'posts_per_page' =>'2', 'paged' => $paged ) );

Toll, wir haben ein Portfolio mit Paginierung. Wir brauchen nur einige Steuerelemente, die uns bei der Navigation auf jeder Seite helfen. Der folgende Code prüft, ob das WP_PageNavi-Plugin installiert ist und initialisiert dann das wp_pagenavi mit der als Parameter übergebenen Abfrage der Datenbank. Wir setzen dann unsere Postdaten zurück und alle Inhalte sind korrekt paginiert.

<?php
	if(function_exists('wp_pagenavi'))
	{
		wp_pagenavi(array(  'query' => $wpbp ) );
		wp_reset_postdata();
	}
?>

Das ist es! Sie haben ein voll funktionsfähiges Portfolio mit Quicksand, Lightbox und Pagination.

Abschluss

Geben Sie sich selbst einen Klaps auf die Schulter! Sie haben erfolgreich ein Quicksand-Portfolio mit WordPress erstellt. Die ganze harte Arbeit ist getan und Sie können sie mit jeder Arbeit, die Sie entwickeln, implementieren.

Ich möchte Ihnen ein großes Dankeschön sagen, dass Sie sich die Zeit genommen haben, mein Tutorial zu lesen, ich hoffe, es hat geholfen. Bitte zögern Sie nicht, Kommentare zu hinterlassen, und ich werde mein Bestes geben, um sie zu unterstützen und zu beantworten.