使用WordPress創(chuàng)建一個(gè)快速沉降式投資組合

今天，您將利用 razorjack 的 quicksand 魔力將您簡(jiǎn)單的投資組合變成令人驚嘆的東西。

簡(jiǎn)介

曾經(jīng)想使用 jQuery 插件 Quicksand 嗎？曾經(jīng)嘗試過(guò)使用 WordPress 來(lái)實(shí)現(xiàn)它嗎？但是，發(fā)現(xiàn)兩者兼而有之是一場(chǎng)噩夢(mèng)嗎？好吧，我將通過(guò)一個(gè)簡(jiǎn)單的分步指南，幫助您使用 Quicksand 從空白的 WordPress 主題轉(zhuǎn)變?yōu)槠恋淖远x組合。我將使用一個(gè)自定義主題，該主題已根據(jù)本教程的目的與 WordPress 3.0+ 一起進(jìn)行了精簡(jiǎn)。

所以打開(kāi)您最喜歡的文本編輯器，讓我們開(kāi)始吧！

第 1 步創(chuàng)建帖子類型

借助 WordPress，我們能夠創(chuàng)建自定義帖子類型，在其中管理所有內(nèi)容。我們將創(chuàng)建一個(gè)自定義帖子類型，以將我們所有的投資組合項(xiàng)目存儲(chǔ)在專用的管理部分中。

為了方便代碼管理，我們首先創(chuàng)建一個(gè)名為 portfolio 的文件夾和一個(gè)名為 portfolio-post-types.php 的 PHP 文件（或任何您認(rèn)為合適的文件）。

創(chuàng)建文件后，讓我們添加一些代碼…

讓我們從創(chuàng)建一個(gè)函數(shù)開(kāi)始：

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

現(xiàn)在我們已經(jīng)創(chuàng)建了空白函數(shù)，讓我們添加一些代碼來(lái)使這個(gè)函數(shù)執(zhí)行一些特殊的操作。首先，為我們的自定義帖子類型創(chuàng)建標(biāo)簽。在我們的 post_type 函數(shù)中插入以下代碼：

 $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' => '' ); 

我們剛剛編寫的代碼的細(xì)分：

“l(fā)abels”變量是代表您的帖子類型的字符串?dāng)?shù)組，每個(gè)字符串都是特定函數(shù)輸出的文本。

• name – 帖子類型名稱的復(fù)數(shù)形式。
• singular_name – 帖子類型名稱的單數(shù)形式。
• rewrite – 使用此格式重寫永久鏈接。
• add_new – 用于添加新帖子的菜單項(xiàng)。
• edit_item – 編輯帖子時(shí)顯示的標(biāo)題。
• new_item – 顯示在管理標(biāo)題的收藏夾菜單中。
• view_item – 顯示在編輯帖子屏幕上的永久鏈接旁邊。
• search_items – 編輯帖子屏幕上搜索框的按鈕文本。
• not_found – 通過(guò)在管理中搜索沒(méi)有找到帖子時(shí)顯示的文本。
• not_found_in_trash – 垃圾箱中沒(méi)有帖子時(shí)顯示的文本。
• parent_item_colon – 用作編輯帖子屏幕上父帖子的標(biāo)簽。僅對(duì)分層帖子類型有用。

接下來(lái)，為我們的自定義帖子類型創(chuàng)建參數(shù)。將以下代碼插入到我們的 post_type 函數(shù)中：

 $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 – 此帖子類型的標(biāo)簽數(shù)組。
• public – 用于定義 public_queriable、show_ui、show_in_nav_menus 和 except_from_search 的默認(rèn)值的元參數(shù)。
• publicly_queryable – 前端是否可以進(jìn)行post類型查詢。
• show_ui – 是否生成用于管理此帖子類型的默認(rèn)用戶界面。
• query_var – False 以阻止查詢，或用于此帖子類型的查詢變量的字符串值。
• rewrite – 使用此格式重寫永久鏈接。
• capability_type – 用于構(gòu)建讀取、編輯和刪除功能的字符串。
• hierarchical – 帖子類型是否分層。允許指定父級(jí)。
• menu_position – 帖子類型應(yīng)出現(xiàn)在管理中的菜單順序中的位置。
• supports – 直接調(diào)用 add_post_type_support() 的別名。

在 WordPress Codex 中了解有關(guān) add_post_type_support 的更多信息

現(xiàn)在我們的帖子類型已經(jīng)設(shè)置完畢，我們需要注冊(cè)帖子類型。我們通過(guò)將以下代碼插入到 post_type 函數(shù)中來(lái)注冊(cè)帖子類型：

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

格式化自定義帖子類型輸出

我們現(xiàn)在已經(jīng)創(chuàng)建了自定義帖子類型。讓我們格式化輸出，這樣我們就可以獲得用戶友好的消息。首先在我們的 portfolio-post-type.php 文件中創(chuàng)建另一個(gè)函數(shù)。

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

我們剛剛所做的是創(chuàng)建一個(gè)名為 portfolio_messages 的函數(shù)，它接受一個(gè)名為 $messages 的參數(shù)。接下來(lái)，我們創(chuàng)建一個(gè)變量來(lái)存儲(chǔ)所有消息的數(shù)組。我們?cè)跀?shù)組中將“0”留空，因?yàn)槲覀兊南⑺饕龔?1 開(kāi)始。然后最后將我們的數(shù)組返回給我們的函數(shù)。

創(chuàng)建分類

最后，我們需要?jiǎng)?chuàng)建我們的分類法。首先創(chuàng)建另一個(gè)名為 portfolio_filter 的函數(shù)并輸入以下代碼：

 // 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 

我們首先注冊(cè)我們的分類法，然后將分類法應(yīng)用于我們的自定義帖子類型組合。接下來(lái)，我們應(yīng)用分類法的最終設(shè)置并輸入創(chuàng)建的標(biāo)簽。我們創(chuàng)建分類法的原因是因?yàn)槲覀冊(cè)谑褂?Quicksand 對(duì)投資組合進(jìn)行排序時(shí)將使用它作為參考鍵。

現(xiàn)在我們所有的自定義帖子類型以及正確的格式和我們自己的分類法都已完成，我們需要最終初始化所有代碼，以便它將顯示在管理中。首先，我們?cè)谖募撞刻砑右韵麓a：

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

輸入此內(nèi)容后，我們需要打開(kāi) functions.php 文件并插入以下代碼行：

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

我們需要將自定義組合類型包含到 functions.php 文件中，以便在調(diào)用 WordPress 主題的函數(shù)時(shí)運(yùn)行腳本。現(xiàn)在，您將在管理面板中看到一個(gè)標(biāo)題為投資組合的部分，其中包含 3 個(gè)子導(dǎo)航項(xiàng)，分別稱為“投資組合”、“添加項(xiàng)目”和“過(guò)濾器”。

第 2 步創(chuàng)建投資組合頁(yè)面

現(xiàn)在我們已經(jīng)完成了整個(gè)投資組合設(shè)置，我們需要輸出我們的投資組合項(xiàng)目。我們首先創(chuàng)建一個(gè)名為 portfolio.php 的新 PHP 文件。首先，讓我們添加一些創(chuàng)建頁(yè)面模板的要點(diǎn)：

 <?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(); ?>

現(xiàn)在，我們已經(jīng)創(chuàng)建了基本頁(yè)面模板，我們需要填充我們的投資組合。我們需要首先創(chuàng)建一個(gè)頁(yè)面作為我們的投資組合頁(yè)面，因此請(qǐng)前往儀表板中的頁(yè)面 -> 添加新內(nèi)容。在右側(cè)，您將看到一個(gè)標(biāo)題為頁(yè)面屬性的框，其中包含默認(rèn)模板的下拉菜單，選擇您想要在我們的案例中使用的所需模板應(yīng)選擇 >portfolio，然后選擇發(fā)布。

顯示過(guò)濾器

現(xiàn)在，讓我們返回編輯我們的投資組合頁(yè)面模板并開(kāi)始為我們的投資組合插入過(guò)濾器。首先，我們首先將過(guò)濾器包裝在無(wú)序列表中，每個(gè)類別都將是列表中的一個(gè)元素。

• Filter:
• All

讓我們向過(guò)濾器添加一些 PHP，以自動(dòng)生成在我們的產(chǎn)品組合中使用的過(guò)濾器類別。

 <?php $terms = get_terms('filter', $args); 	$count = count($terms);  	$i=0; 	if ($count > 0) { 		foreach ($terms  as $term) { 		$i++; 		$term_list  .= '

‘; if ($count != $i) { $term_list .= ”; } else { $term_list .= ”; } } echo $term_list; } ?>

我們?cè)谶@里所做的首先是初始化我們希望獲得的分類法，在我們的例子中是過(guò)濾器。其次，為我們的類別設(shè)置一個(gè)計(jì)數(shù)，以便我們?cè)谶^(guò)濾器中的每個(gè)元素上遞增，然后應(yīng)用條件語(yǔ)句來(lái)檢查我們?cè)O(shè)置的計(jì)數(shù)是否小于 0；這意味著如果過(guò)濾器中沒(méi)有類別或沒(méi)有為投資組合項(xiàng)目分配類別，則不會(huì)輸出任何內(nèi)容。如果我們的過(guò)濾器中有類別，那么我們想要更改每個(gè)元素的輸出。

我們通過(guò)代碼段中的以下行來(lái)完成此操作：

 $term_list .= '

‘;

我們正在創(chuàng)建一個(gè)列表元素以適合我們的無(wú)序列表，然后將“href”設(shè)置為空白目標(biāo)，因?yàn)?Quicksand 將處理內(nèi)容的組織，然后我們將類名設(shè)置為投資組合項(xiàng)目的 slug一致的引用，最后在我們的過(guò)濾器中輸出類別的名稱。

顯示投資組合項(xiàng)目

太棒了，我們現(xiàn)在實(shí)現(xiàn)了動(dòng)態(tài)過(guò)濾器。現(xiàn)在我們要輸出我們的投資組合項(xiàng)目。讓我們開(kāi)始查詢我們的數(shù)據(jù)庫(kù)，以獲取投資組合帖子類型的所有帖子并設(shè)置我們的 WordPress 循環(huán)。我們首先設(shè)置一個(gè)新的 WP_Query 對(duì)象并向其傳遞正確的參數(shù)。

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

我們將 WP_Query 對(duì)象分配給一個(gè)變量，以便在初始化循環(huán)時(shí)可以引用我們的查詢。我們將帖子類型設(shè)置為 portfolio，因此我們只查詢之前創(chuàng)建的自定義帖子類型，最后將 posts_per_page 設(shè)置為 -1。我們使用-1，這樣每頁(yè)的帖子數(shù)量沒(méi)有固定的限制，因此顯示所有投資組合項(xiàng)目，如果我們?cè)敢猓覀円部梢暂斎肴魏螖?shù)字，它只會(huì)顯示此處輸入的投資組合項(xiàng)目的數(shù)量。

現(xiàn)在我們有了一個(gè)可以引用的查詢對(duì)象，讓我們?cè)O(shè)置循環(huán)來(lái)輸出我們的投資組合項(xiàng)目。我們首先插入以下代碼：

 <?php if ($wpbp->have_posts()) : while  ($wpbp-&gt;have_posts()) : $wpbp-&gt;the_post(); ?&gt;  	<?php // All of our portfolio content will be inserted in  here... ?><?php endwhile; endif; ?><?php wp_reset_query(); ?>

在開(kāi)始將內(nèi)容輸入循環(huán)之前，我們將設(shè)置特色圖像。打開(kāi)您的 functions.php 文件，我們將為每個(gè)投資組合項(xiàng)目添加一些要輸出的自定義特色圖像尺寸。

我們首先檢查當(dāng)前版本的 WordPress 是否支持特色圖片功能，然后設(shè)置一些常規(guī)設(shè)置以使其正常工作。我們添加了對(duì)后縮略圖的支持，并將默認(rèn)尺寸設(shè)置為 56 像素 x 56 像素。

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

然后我們要添加我們自己的自定義縮略圖大小。在下面一行插入以下代碼：set_post_thumbnail_size

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

此方法允許您創(chuàng)建自己的縮略圖大小，方法是首先設(shè)置縮略圖的參考名稱，然后設(shè)置寬度和高度，最后設(shè)置縮略圖是否應(yīng)硬裁剪圖像以適合指定的大小。您可以更改特色圖像的尺寸以適合您的布局；為了本教程的目的，我有一個(gè) 3 列網(wǎng)格布局。

現(xiàn)在我們已經(jīng)設(shè)置了特色圖像，我們將返回我們的投資組合頁(yè)面模板并輸出投資組合項(xiàng)目特色圖像。

由于每個(gè)投資組合項(xiàng)目的組織最好通過(guò)無(wú)序列表處理，因此我們將首先創(chuàng)建一個(gè)，然后輸出我們剛剛設(shè)置的特色圖像。在 WordPress 循環(huán)中插入以下代碼：

我們首先檢查主題是否支持縮略圖功能。如果主題支持此功能，那么它將在我們之前指定的專用縮略圖上輸出特征圖像。輸出特色圖像后，我們將作品集項(xiàng)目的標(biāo)題直接輸出在圖像下方。

連接投資組合項(xiàng)目和過(guò)濾器

我們需要調(diào)整每個(gè)投資組合列表項(xiàng)的不同元素，以確保每個(gè)投資組合的引用對(duì)于該項(xiàng)目分配到的類別是正確的。為此，我們首先需要從分類中獲取類別。在循環(huán)中插入以下代碼：

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

接下來(lái)，我們將向列表元素（li）添加一些屬性。我們首先將 data-id 添加到列表項(xiàng)中，為每個(gè)投資組合項(xiàng)提供唯一的標(biāo)識(shí)。我們還將添加一個(gè) data-type；這將作為我們對(duì)過(guò)濾器的引用。讓我們用以下代碼替換我們的起始列表元素 (li)：

 <?php $count++; ?>

 // 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' ); 	} } 

 add_action('init', 'register_js'); 

 jQuery(document).ready(function() {  	// We will insert our quicksand script in here  }); // END OF DOCUMENT 

 function portfolio_quicksand() {  	// All of our quicksand handling will happen in this function  }  if(jQuery().quicksand) {  	portfolio_quicksand();  } 

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

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

 $filterLink.click(function(e) {  	// We will add the content for this function now...	  }); 

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

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

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

 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'  		}); 	}); } 

 // 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' ); 

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

 <a rel="prettyPhoto" href="&lt;?php%20%20echo%20%24large_image%20?&gt;"><?php the_post_thumbnail('portfolio');  ?></a> 

 function lightbox() {  	// Our Lightbox functioning will be added now...  }  if(jQuery().prettyPhoto) { 	lightbox(); } 

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

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

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

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

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