Ein Portfolio mit mehreren Layouts im WordPress erstellen

Wordpress wird als Content-Management-System häufig zum Erstellen von Portfolio-Websites verwendet. Mit der Entwicklung des Designs und der Funktionen der Benutzeroberfläche ist ein neuer Trend entstanden: Anzeige von Portfolioelementen in verschiedenen Layouts. Dieses Tutorial beschreibt den Prozess des Erstellens eines dedizierten Portfolio-Abschnitts im Backend von WordPress und der Verwendung von jQuery und CSS3, um das Portfolio auf elegante Weise anzuzeigen.

In diesem Tutorial werden wir die leistungsstarken Funktionen von WordPress wie benutzerdefinierte Beiträge und benutzerdefinierte Taxonomien ausführlich nutzen und eine Funktion zum Abrufen unserer eigenen benutzerdefinierten Auszüge schreiben.

Schritt 1 - Installieren von Wordpress und Initialisieren des Themas.

Der erste Schritt bei der Erstellung unserer Portfolio-Website ist die Installation von Wordpress. Das ist eine einfache Aufgabe, und noch besser, die meisten Webhosts bieten Installationsprogramme mit einem Klick an. Wenn Sie mit diesem Thema noch nicht vertraut sind, finden Sie hier eine großartige Anleitung, die Sie bei der Installation unterstützt.

Nach der Installation müssen wir unser benutzerdefiniertes Thema erstellen, das unser Portfolio anzeigt. Es gibt verschiedene Methoden zum Erstellen benutzerdefinierter Themen. Einige ziehen es vor, eine neue leere weiße Vorlage zu erstellen, während andere untergeordnete Themen der neuen TwentyTen-Vorlage erstellen. In diesem Tutorial verwenden wir das Starker-Thema von Elliot Jay Stocks. Es ist ein völlig leeres Thema ohne Styling. Es ist eine großartige Basis, um auf unserem Thema aufzubauen. Bearbeiten Sie die Datei styles.css und ändern Sie den oben genannten Themennamen. Um das Thema zu installieren, fügen Sie einfach den Themenordner in den Ordner wp-content > themes ein. Sobald das Thema installiert ist, können Sie es aktivieren, indem Sie zur Themenseite gehen.

Schritt 2 - Planen des Layouts

Unsere Portfolio-Site wird nicht viele Daten enthalten. Eine einfache Portfolio-Site enthält Bilder der Projekte, einige Tags zur Identifizierung der Projekte und eine kurze Beschreibung der einzelnen Projekte. Das Multi-Layout-Thema funktioniert so, dass der Benutzer zwischen einem Raster und einem Listenlayout wählen kann. Wie bei vielen verfügbaren Websites mit mehreren Layouts wird keine andere Seite geladen, wenn der Benutzer auf die Listenansicht oder die Rasteransicht klickt. Stattdessen verwenden wir AJAX, um den neuen Viewer asynchron zu laden. Dies ist das grundlegende Design, wie unsere Portfolio-Site im Grid-Modus angezeigt wird:

Sobald der Benutzer auf das Steuerelement der Listenansicht klickt, ändert sich das gesamte Layout reibungslos in eine Listenansicht, die den Titel des Projekts, die damit verbundenen Tags und eine kurze Beschreibung enthält.

Schritt 3 - Einrichten des Backends

Für unser Portfolio müssen wir einen benutzerdefinierten Beitragstyp namens "Projekt" registrieren. Wir können jeden Aspekt eines WordPress-Beitrags anpassen. Zum Beispiel können wir die beteiligten Beschriftungen ändern, verschiedene Funktionen für den Beitrag auswählen, wie Kommentare, Miniaturansichten, Auszüge usw.

Um einen benutzerdefinierten Beitrag zu implementieren, bearbeiten Sie die Datei functions.php im theme ordner. Es enthält viel vordefinierten Code, da das nackte Starkers-Thema einige Funktionen der Standard-TwentyTen-Vorlage bietet. Sei nicht ängstlich oder verwirrt. Sie können den folgenden Code entweder unten oder oben in der Datei functions.php anhängen.

Lassen Sie am Ende der Datei functions.php keinen leeren Platz frei.

Wir verknüpfen unsere benutzerdefinierte Funktion auf folgende Weise mit der Initialisierungsaktion(init):

/*--- Creating custom post type for project --*/
add_action('init', 'project_custom_init');

Diese project_custom_init-Methode wird verwendet, um den benutzerdefinierten Beitragstyp in der WordPress-Datenbank zu registrieren.

Hier erfahren Sie ausführlich, wie Sie einen benutzerdefinierten Beitragstyp registrieren.

Die Methode register_post_type erfordert einen Namen für den benutzerdefinierten Beitrag und eine Reihe von Argumenten, die die Merkmale des benutzerdefinierten Beitrags definieren. Zunächst müssen wir die Beschriftungen für den benutzerdefinierten Beitrag definieren. Diese Labels werden für den benutzerdefinierten Beitrag im WordPress-Administrator verwendet.

/*-- Custom Post Init Begin --*/
function project_custom_init()
{
  $labels = array(
    'name' => _x('Projects', 'post type general name'),
    'singular_name' => _x('Project', 'post type singular name'),
    'add_new' => _x('Add New', 'project'),
    'add_new_item' => __('Add New Project'),
    'edit_item' => __('Edit Project'),
    'new_item' => __('New Project'),
    'view_item' => __('View Project'),
    'search_items' => __('Search Projects'),
    'not_found' =>  __('No projects found'),
    'not_found_in_trash' => __('No projects found in Trash'),
    'parent_item_colon' => '',
    'menu_name' => 'Project'

  );

Nachdem wir die Beschriftungen definiert haben, müssen wir die Argumente für den benutzerdefinierten Beitragstyp definieren. Das zuvor definierte Label-Array wird ebenfalls ein Argument sein. Sobald die Argumente definiert sind, registrieren wir den benutzerdefinierten Beitragstyp als "project".

 $args = array(
    'labels' => $labels,
    'public' => true,
    'publicly_queryable' => true,
    'show_ui' => true,
    'show_in_menu' => true,
    'query_var' => true,
    'rewrite' => true,
    'capability_type' => 'post',
    'has_archive' => true,
    'hierarchical' => false,
    'menu_position' => null,
    'supports' => array('title','editor','author','thumbnail','excerpt','comments')
  );
  // The following is the main step where we register the post.
  register_post_type('project',$args);
}
/*-- Custom Post Init Ends --*/

Erstellen Sie benutzerdefinierte Nachrichten für den Beitrag "project"

Optional können wir auch benutzerdefinierte Nachrichten für den benutzerdefinierten Beitragstyp hinzufügen. Diese Nachrichten werden im WordPress-Dashboard angezeigt, wenn wir den benutzerdefinierten Beitrag bearbeiten oder aktualisieren. Wir können dies tun, indem wir einen Filter für die nachträglich aktualisierten Nachrichten auf folgende Weise erstellen:

// Add filter to ensure the text Project, or project, is displayed when a user updates a book
add_filter('post_updated_messages', 'project_updated_messages');
function project_updated_messages( $messages ) {
  global $post, $post_ID;

  $messages['project'] = array(
    0 => '', // Unused. Messages start at index 1.
    1 => sprintf( __('Project updated. <a href="%s">View project</a>'), esc_url( get_permalink($post_ID) ) ),
    2 => __('Custom field updated.'),
    3 => __('Custom field deleted.'),
    4 => __('Project updated.'),
    /* translators: %s: date and time of the revision */
    5 => isset($_GET['revision']) ? sprintf( __('Project restored to revision from %s'), wp_post_revision_title( (int) $_GET['revision'], false ) ) : false,
    6 => sprintf( __('Project published. <a href="%s">View project</a>'), esc_url( get_permalink($post_ID) ) ),
    7 => __('Project saved.'),
    8 => sprintf( __('Project submitted. <a target="_blank" href="%s">Preview project</a>'), esc_url( add_query_arg( 'preview', 'true', get_permalink($post_ID) ) ) ),
    9 => sprintf( __('Project scheduled for: <strong>%1$s</strong>. <a target="_blank" href="%2$s">Preview project</a>'),
      // translators: Publish box date format, see http://php.net/date
      date_i18n( __( 'M j, Y @ G:i' ), strtotime( $post->post_date ) ), esc_url( get_permalink($post_ID) ) ),
    10 => sprintf( __('Project draft updated. <a target="_blank" href="%s">Preview project</a>'), esc_url( add_query_arg( 'preview', 'true', get_permalink($post_ID) ) ) ),
  );

  return $messages;
}

Registrieren einer benutzerdefinierten Taxonomie

Als nächstes müssen wir eine benutzerdefinierte Taxonomie für die Tags definieren, die für jedes der Portfolioelemente verwendet werden sollen. Weitere Informationen zur Registertaxonomiemethode finden Sie hier.

// Initialize New Taxonomy Labels
  $labels = array(
    'name' => _x( 'Tags', 'taxonomy general name' ),
    'singular_name' => _x( 'Tag', 'taxonomy singular name' ),
    'search_items' =>  __( 'Search Types' ),
    'all_items' => __( 'All Tags' ),
    'parent_item' => __( 'Parent Tag' ),
    'parent_item_colon' => __( 'Parent Tag:' ),
    'edit_item' => __( 'Edit Tags' ),
    'update_item' => __( 'Update Tag' ),
    'add_new_item' => __( 'Add New Tag' ),
    'new_item_name' => __( 'New Tag Name' ),
  );
// Custom taxonomy for Project Tags
register_taxonomy('tag',array('project'), array(
    'hierarchical' => false,
    'labels' => $labels,
    'show_ui' => true,
    'query_var' => true,
    'rewrite' => array( 'slug' => 'tag' ),
  ));

Kehren Sie zu Ihrem WordPress-Dashboard zurück und öffnen Sie die Medieneinstellungen auf der Registerkarte Einstellungen. Hier müssen Sie die Standardgröße für die Miniaturansichten der Portfolio-Bilder festlegen. In der Seitenleiste werden Sie außerdem feststellen, dass der benutzerdefinierte Beitragstyp "Projekt" zusammen mit der benutzerdefinierten Taxonomie "Tags" erfolgreich registriert wurde. Wir können die Standardgröße für Miniaturansichten mithilfe der Methode set_post_thumbnail registrieren, aber ich werde einen anderen Weg zeigen, um dies zu erreichen. Weitere Informationen zum programmgesteuerten Festlegen der Größe von Post-Thumbnails finden Sie hier.

Erstellen Sie Demo-Portfolio-Elemente

Erstellen Sie einige Demo-Portfolio-Elemente, indem Sie zu Projekten gehen und auf Neu hinzufügen klicken. Wir benötigen einen Titel für das Projekt, den Inhalt und eine Miniaturansicht. Wir können sehen, dass auch ein Tag-Abschnitt angezeigt wurde, und bestätigen, dass unsere benutzerdefinierte Taxonomie erfolgreich registriert wurde. Fügen Sie auch einige Tags für die Portfolioelemente hinzu.

Schritt 4 Codieren und Stylen der Vorlage

Codierung der statischen Vorlage

Um das Thema zu erstellen, erstellen wir zunächst eine statische HTML / CSS3-Vorlage für die Website. Dies trennt die beiden Aufgaben, die Website mit dem Design in Einklang zu bringen und den Inhalt aus der Datenbank abzurufen. Das direkte Codieren des Themas kann für Anfänger manchmal etwas verwirrend sein - insbesondere, wenn das Thema viele Inhalte enthält. Erstellen Sie drei Ordner mit dem Namen
"css", "images" bzw. "js". Die allgemeine Struktur für den Hauptinhaltsbereich sieht folgendermaßen aus:

<body>
	<div id="page-wrap">
		<div id="header">
			<!-- Header Content Comes Here -->
		</div>
		<div id="main-content">
			<div id="layout-controls">
				<!-- Layout Controls Area -->
				<a href="#" class="grid"><span>Grid</span></a>
				<a href="#" class="list"><span>List</span></a>
				<div class="clear"></div>
			</div>
			<ul id="folio" class="grid">
				<li> <!-- Portfolio Item -->
					<div class="image">
						<!-- Project Thumbnail Area -->
						<span>
							<a href="#"><img src="" alt=""/></a>
						</span>
						<a href="#" class="link">View Details</a>
					</div>
					<div class="content">
						<!-- Project Content Area -->
						<h2><a href="#">Project Title</a></h2>
						<span class="tags">Tags, Tags</span>
						<p> The Project Description / Excerpt</p>
					</div>
					<div class="clear"></div>
				</li>
			</ul>
			<div class="clear"></div>
		</div><!-- End of Main Content -->
		<div id="footer">
			<!-- Footer Content Comes Here -->
		</div>
	</div><!-- End of Page Wrap -->
</body>

Stil von der Vorlage

Dieser Prozess hängt von Ihnen ab. Sie können mit verschiedenen Farben und Bildern experimentieren, um Ihren Anforderungen zu entsprechen. Aber für diese Vorlage werden wir ein dunkles Grunge-Thema erstellen und lustiges CSS3 verwenden, um diese subtilen Hover-Effekte und Transparenz zu erzielen. Das Aufteilen des Designs in Bilder ist eher. Daher werde ich hier nicht auf die Details eingehen.

body{
	background: #5a5a5a url('images/bg.jpg') no-repeat center top;
	height: 100%;
}
a{
	text-decoration: none;
	color: #C2FC48;
}
a:hover{
	color:#fff;
}
.clear{
	clear: both;
}
#page-wrap{
	width: 960px;
	position: relative;
	margin: 0 auto 40px;
}
#header{
	height: 111px;
	padding: 0 10px 0 50px;
}
#header h1{
	float:left;
}
#header h1 a{
    font-family: Georgia,Arial,Helvetica,sans-serif;
    font-size: 48px;
    position: relative;
    text-decoration: none;
    text-shadow: 2px 2px 1px #000000;
    top: 64px;
    width: auto;
    z-index: 1000;
	-moz-transition: all 0.3s ease-in-out;
	-webkit-transition: all 0.3s ease-in-out;
	-o-transition: all 0.3s ease-in-out;
	transition: all 0.3s ease-in-out;
}
#header h1 a:hover{
	color:#f4f6f0;
}
ul#social{
	float: right;
	top: 95px;
	position:relative;
}
ul#social li{
	float: left;
	margin-right: 10px;
	display: inline;
}
ul#social li a{
	width: 16px;
	height: 16px;
	display: block;
	background-image: url('images/layout-icons.png');
	text-indent: -99999px;
}
ul#social li a.feed{
	background-position: -16px 32px;
}
ul#social li a.facebook{
	background-position: 0 32px;
}
ul#social li a.twitter{
	background-position: 0 16px;
}

Das grundlegende Design für den Hauptcontainer und die Layout-Steuerelemente lautet wie folgt

/*--Main Content Styles Start here --*/
#main-content{
	padding: 50px 50px 28px 50px;
	background-color: #000;
	border-bottom: 1px #696969 solid;
	border-left: 1px #696969 solid;
	border-right: 1px #696969 solid;
	/* Fallback for web browsers that doesn't support RGBa */
	background: rgb(0, 0, 0);
	/* RGBa with 0.3 opacity */
	background: rgba(0, 0, 0, 0.3);
	font-family: Helvetica, Arial, sans-serif;
	font-size: 12px;
	color:#c7c7c7;
	line-height: 16px;
}
#main-content a:hover{
	color: #fff;
}
#layout-controls{
	margin-bottom: 15px;
}
#layout-controls span{
	width: 20px;
	height: 26px;
	display: block;
	background-image: url('images/layout-icons.png');
	-moz-transition: all 0.3s ease-in-out;
	-webkit-transition: all 0.3s ease-in-out;
	-o-transition: all 0.3s ease-in-out;
	transition: all 0.3s ease-in-out;
	text-indent: -99999px;
}
#layout-controls a{
	width: 20px;
	height: 26px;
	display: block;
	float: left;
	background-image: url('images/layout-icons.png');
	margin-right: 10px;
	display: inline;
}
#layout-controls a.grid span{
	background-position: left 0;
}
#layout-controls a.grid{
	background-position: left -26px;
}
#layout-controls a.list span{
	background-position: right 0;
}
#layout-controls a.list{
	background-position: right -26px;
}
#layout-controls a:hover span{
	opacity: 0; /* other browsers */
	filter: progid:DXImageTransform.Microsoft.Alpha(opacity=0); /* this works in IE6, IE7, and IE8 */
}

Im Folgenden sind die allgemeinen Stile für die Projektliste aufgeführt. Wir werden später für jeden Rasterlayoutmodus und einen Listenlayoutmodus abhängig von der aktuellen Klasse der Folioliste ein spezifisches Styling durchführen.

/*-------------General Folio Styles Starts Here---------------*/
ul#folio li a{
	-moz-transition: all 0.3s ease-in-out;
	-webkit-transition: all 0.3s ease-in-out;
	-o-transition: all 0.3s ease-in-out;
	transition: all 0.3s ease-in-out;
}
ul#folio li{
	/* Fallback for web browsers that doesn't support RGBa */
	background: rgb(0, 0, 0);
	/* RGBa with 0.3 opacity */
	background: rgba(0, 0, 0, 0.3);
	padding: 20px;
	border: 1px #4c4c4c solid;
	margin-bottom: 22px;
	-moz-transition: all 0.3s ease-in-out;
	-webkit-transition: all 0.3s ease-in-out;
	-o-transition: all 0.3s ease-in-out;
	transition: all 0.3s ease-in-out;
}
ul#folio li:hover{
	/* Fallback for web browsers that doesn't support RGBa */
	background: rgb(0, 0, 0);
	/* RGBa with 0.3 opacity */
	background: rgba(0, 0, 0, 0.1);
}
ul#folio li .image{
	text-align: center;
}
ul#folio li .image span{
	width: 158px;
	height: 116px;
	display: block;
	overflow: hidden;
	background-color: #fff;
	margin-bottom: 10px;
}
ul#folio li .image span a{
	width: 158px;
	height: 116px;
	display: block;
}
ul#folio li .image a{
	font-weight: bold;
}

Beachten Sie auch, dass wir nicht die allgemeine Opazitätsmethode verwenden, um Transparenz mit CSS3 zu erzielen. Die Verwendung der Deckkraftmethode wirkt sich auch auf die untergeordneten Elemente des übergeordneten Containers aus, auf den die Deckkraft angewendet wird. Stattdessen verwenden wir die RGBa-Methode, um dem Container Hintergrundfarben hinzuzufügen, und verwenden den Alpha-Wert, um die Transparenz des Containers zu steuern.

Weitere Informationen zur RGBa-Eigenschaft finden Sie in diesem fantastischen Artikel.

Dies hat keinen Einfluss auf die Transparenz der untergeordneten Elemente. Wir müssen auch IE-spezifischen CSS-Code erstellen, um die Alpha-Transparenz zu unterstützen.

<!--[if IE]>
<style>
#main-content, ul#folio li{
	background:transparent;
    filter:progid:DXImageTransform.Microsoft.gradient(startColorstr=#30000000,endColorstr=#30000000);
    zoom: 1;
}
ul#folio li:hover{
	background:transparent;
    filter:progid:DXImageTransform.Microsoft.gradient(startColorstr=#10000000,endColorstr=#10000000);
    zoom: 1;
}
</style>
<![endif]-->

In der HTML-Struktur werden Sie feststellen, dass der Portfolio-Liste eine Klasse zugeordnet ist.

<ul id="folio" class="grid">

Grundsätzlich wird die Klasse "Raster/grid" verwendet, um die Liste in einer Rasteransicht anzuzeigen, und die Klasse "Liste/list" wird verwendet, um die Liste in einer Listenansicht anzuzeigen. Im Rastermodus ist der gesamte zusätzliche Inhalt für den Benutzer ausgeblendet, und im Listenmodus ist der gesamte Inhalt für den Benutzer sichtbar. Wir haben zwei separate Styling-Sätze für jeden Modus. Die Stile für den Rastermodus lauten wie folgt:

/*------------------Grid Layout Starts Here-------------------*/
ul#folio.grid li{
	width: 158px;
	height: 130px;
	float: left;
	margin-right: 19px;
	display: inline;
}
ul#folio.grid li .content{
	display: none;
}
ul#folio.grid li .image span a{
	width: 158px;
	height: 116px;
	display: block;
}
ul#folio.grid li.rightmost{
	margin-right: 0;
}

Listenmodusstile sind wie folgt. Zu jedem Zeitpunkt ist nur einer der Raster- oder Listenstile aktiv.

/*------------------List Layout Starts Here-------------------*/
ul#folio.list li{
	display: block;
}
ul#folio.list li .image,ul#folio li.details .image{
	width: 158px;
	height: 130px;
	float:left;
}
ul#folio.list li .content{
	float: left;
	padding: 0 10px 0 40px;
	width: 598px;
}
ul#folio.list li .content h2,ul#folio li.details .content h2{
	font-size: 24px;
	color: #C2FC48;
	margin-bottom: 6px;
	font-family: Georgia, Arial, Helvetica, sans-serif;
}
ul#folio.list li .content span.tags,ul#folio li.details .content span.tags{
	color: #fff;
	font-size: 11px;
	font-style: italic;
	margin-bottom: 10px;
	display: block;
}

Verwenden Sie jQuery, um Effekte hinzuzufügen

Als nächstes verwenden wir die jQuery-UI, um die Klasse der Folioliste in Bezug auf die vom Benutzer angeklickte Layoutschaltfläche zu ändern. Wir erkennen das Klickereignis der Layoutsteuerungsschaltflächen, rufen die aktuelle Klasse und die neue zu aktivierende Klasse ab und verwenden dann die Klassenmethoden add und remove, um die Klassen zu ändern. Wir haben auch eine Reihe von Parametern, die die Geschwindigkeit der Ereignisse definieren.

	var animateSpeed = 500;
	jQuery("#layout-controls a").click(function(){
               var folio = jQuery('#folio'),
		     curClass = folio.attr('class'),
		     newClass = jQuery(this).attr('class');

		folio.fadeOut(animateSpeed,function(){
			folio
                          .removeClass(curClass,animateSpeed);
			  .addClass(newClass,animateSpeed);
		}).fadeIn(animateSpeed);
		return false;
	});

Schritt 5 Integration mit dem WordPress-Theme

Nachdem wir die statische Version der Site fertiggestellt haben, können wir sie in wenigen Minuten in das WordPress-Theme integrieren. Alles, was wir tun müssen, ist, die Beiträge mit einem wp_query-Objekt mit einer Abfrage nach dem benutzerdefinierten Beitragstyp zu durchlaufen. Anschließend platzieren wir den Inhalt an der entsprechenden Position in der Vorlage.

Bearbeiten Sie header.php

Zuerst müssen wir die Vorlage header.php ändern und unsere benutzerdefinierten JavaScript-Dateien einschließen. In diesem Tutorial wird jQuery mit der CDN-Version von Google aufgenommen. Wir werden die von WordPress bereitgestellte jQuery abmelden und Googles CDN-Version von jQuery registrieren. Fügen Sie das folgende Snippet in Ihre Datei functions.php ein.

<?php
/*--- Registering jQuery using Google's CDN */
if( !is_admin()){
   wp_deregister_script('jquery');
   wp_register_script('jquery', ("https://ajax.googleapis.com/ajax/libs/jquery/1.6.0/jquery.min.js"));
   wp_enqueue_script('jquery');
}
?>

Verschieben Sie die zuvor für die statische Vorlage erstellten Ordner css, js und images in den WordPress-Themenordner. Fügen Sie die benutzerdefinierte Datei der jQuery-Benutzeroberfläche und die Hauptskriptdatei in den Header ein. Stellen Sie sicher, dass es unterhalb der wp_head-Methode eingefügt wird.

<script src="<?php bloginfo('template_url');?>/js/jquery-ui-1.8.11.custom.js"></script>
<script src="<?php bloginfo('template_url');?>/js/script.js"></script>

Erstellen Sie die Hauptvorlage

Jetzt können Sie entweder eine andere Vorlage im Thema erstellen - zum Beispiel page-home.php - oder Sie können die index.php ändern, die bereits im Themenordner vorhanden ist. Wenn Sie die erstere Methode wählen, dann:

• Erstelle eine Seite
• Legen Sie die Seitenvorlage als die gerade erstellte Vorlage fest.
• Gehen Sie zu den Leseeinstellungen auf der Registerkarte settings.
• Wählen Sie die Homepage als statische aus.
• Wählen Sie die gerade erstellte Seite als Homepage aus.

Die Vorlage enthält zuerst den Header, den Sie mit der Methode get_header() aufrufen können, und dann den Hauptinhalt, den Sie in der Vorlage selbst codieren. Zuletzt die Fußzeile, die Sie über die Methode get_footer() einfügen können.

Der folgende Code zeigt, wie Sie mit dem Objekt wp_query eine benutzerdefinierte Abfrage erstellen können.

<?php $loop = new WP_Query(array('post_type' => 'project', 'posts_per_page' => -1));
  $count =0;
?>

Wir verwenden eine Variable, count, um die Anzahl der Elemente in der Liste zu zählen. Wir brauchen dies, weil wir nur vier Elemente in jeder Zeile behalten und jedem vierten Listenelement eine Klasse 'rightmost' zuweisen. Die Klasse 'rightmost' eliminiert jeden rechten Rand zu den Listenelementen. Alternativ können wir in unserer CSS-Datei den Selektor li:nth-child(4n) verwenden.

Der folgende Code zeigt, wie wir die Beiträge durchlaufen und den Inhalt nach Bedarf einfügen können.

<?php if($loop) { ?>
	<ul id="folio" class="grid">
		<?php while ( $loop->have_posts() ) : $loop->the_post(); ?>

Innerhalb der Schleife fügen wir den Inhalt auf normale WordPress-Weise ein, wobei wir natürlich das Objekt $loop wp_query verwenden. Der folgende Code zeigt, wie wir die Miniaturansicht des Projektbeitrags abrufen und in die Vorlage einfügen können. Notieren Sie sich genau, wie wir die Variable $count verwenden, um die Klasse 'rightmost' in jedes vierte Listenelement einzufügen.

		<li class="item-<?php the_ID() ?> <?php if(++$count%4==0) echo 'rightmost'?> ">
				<div class="image">
					<span>
						<a href="<?php the_permalink() ?>">
							<?php
								if(has_post_thumbnail()){
									the_post_thumbnail('thumbnail');
								}
							?>
						</a>
					</span>
					<a href="<?php the_permalink() ?>" class="link">View Details</a>
				</div>

Nun kommt der Inhaltsbereich, in dem wir den Titel, die Tags und die Kurzbeschreibung einfügen und den Auszug für den Beitrag mit einer benutzerdefinierten Auszugsmethode abrufen müssen. Das Einfügen des Titels ist ziemlich einfach, ebenso wie die Tags. Denken Sie daran, dass wir zuvor eine benutzerdefinierte Taxonomie mit dem Namen Tags erstellt haben.

				<div class="content">
					<h2><a href="<?php the_permalink() ?>"><?php the_title() ?></a></h2>
					<span class="tags">
						<?php
							// Fetching the tag names with respect to the post and displaying them
							$args = array('orderby' => 'name', 'order' => 'ASC', 'fields' => 'names');
							echo implode(wp_get_object_terms( $post->ID, 'tag', $args),', ');
						?>
					</span>
					<p>
						<?php
							// Using custom excerpt function to fetch the excerpt
							folio_excerpt('folio_excerpt_length','folio_excerpt_more');
						 ?>
					</p>
				</div>
				<div class="clear"></div>
			</li>
		<?php endwhile; ?>
	</ul>
<?php } ?>
<?php wp_reset_query(); ?>

Sie werden feststellen, dass wir nicht die von WordPress bereitgestellte allgemeine Methode the_excerpt() verwenden. Stattdessen definieren wir unsere eigene benutzerdefinierte Methode, indem wir einige Filter hinzufügen. Die allgemeine Auszugsmethode gibt eine größere Auszugslänge zurück, als wir benötigen. Daher die benutzerdefinierte Version. Wir ändern auch den am Ende des Standardauszugs hinzugefügten Text "Continue Reading ..." und ersetzen ihn durch "Read More". Das folgende Snippet erfüllt unseren Zweck. Diese benutzerdefinierte Auszugsmethode ist in vielen Situationen nützlich.

<?php
// Adding Variable Excerpt Length
function folio_excerpt_length($length) {
    return 80;
}
function folio_excerpt_more($more) {
	return ' ... <span class="excerpt_more"><a href="'.get_permalink().'">Read more</a></span>';
}
function folio_excerpt($length_callback='', $more_callback='') {
    global $post;
    if(function_exists($length_callback)){
        add_filter('excerpt_length', $length_callback);
    }
    if(function_exists($more_callback)){
        add_filter('excerpt_more', $more_callback);
    }
    $output = get_the_excerpt();
    $output = apply_filters('wptexturize', $output);
    $output = apply_filters('convert_chars', $output);
    $output = '<p>'.$output.'</p>';
    echo $output;
}
?>

Schritt 6 Abschluss

Die oben beschriebene Methode zum Erstellen eines Portfolios mit mehreren Layouts ist recht einfach und verwendet grundlegende CSS- und jQuery-Tricks, um das Ergebnis zu erzielen. Noch besser ist, dass diese Techniken auf eine Vielzahl von Projekten angewendet werden können. Andere Techniken in diesem Tutorial, wie benutzerdefinierte Beitragstypen, benutzerdefinierte Taxonomien und das Hinzufügen von Filtern zur Auszugsmethode, können auch auf verschiedene andere innovative Arten verwendet werden!