今天，您將利用 Razorjack 的 Quicksand 魔力將您簡單的投資組合變成令人驚嘆的東西。愛掏網(wǎng) - it200.com
曾經(jīng)想使用 jQuery 插件 Quicksand 嗎？曾經(jīng)嘗試過使用 WordPress 來實現(xiàn)它嗎？但是，發(fā)現(xiàn)兩者兼而有之是一場噩夢嗎？好吧，我將通過一個簡單的分步指南，幫助您使用 Quicksand 從空白的 WordPress 主題轉(zhuǎn)變?yōu)槠恋淖远x組合。愛掏網(wǎng) - it200.com我將使用一個自定義主題，該主題已根據(jù)本教程的目的與 WordPress 3.0+ 一起進行了精簡。愛掏網(wǎng) - it200.com
所以打開您最喜歡的文本編輯器，讓我們開始吧！
借助 WordPress，我們能夠創(chuàng)建自定義帖子類型，在其中管理所有內(nèi)容。愛掏網(wǎng) - it200.com我們將創(chuàng)建一個自定義帖子類型，以將我們所有的投資組合項目存儲在專用的管理部分中。愛掏網(wǎng) - it200.com
為了方便代碼管理，我們首先創(chuàng)建一個名為 portfolio 的文件夾和一個名為 portfolio-post-types.php 的 PHP 文件（或任何您認為合適的文件）。愛掏網(wǎng) - it200.com
創(chuàng)建文件后，讓我們添加一些代碼...
讓我們從創(chuàng)建一個函數(shù)開始：
登錄后復(fù)制
現(xiàn)在我們已經(jīng)創(chuàng)建了空白函數(shù)，讓我們添加一些代碼來使這個函數(shù)執(zhí)行一些特殊的操作。愛掏網(wǎng) - it200.com首先，為我們的自定義帖子類型創(chuàng)建標(biāo)簽。愛掏網(wǎng) - it200.com在我們的 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' => ''
);
登錄后復(fù)制
我們剛剛編寫的代碼的細分：
“l(fā)abels”變量是代表您的帖子類型的字符串?dāng)?shù)組，每個字符串都是特定函數(shù)輸出的文本。愛掏網(wǎng) - it200.com
-
name– 帖子類型名稱的復(fù)數(shù)形式。愛掏網(wǎng) - it200.com -
singular_name– 帖子類型名稱的單數(shù)形式。愛掏網(wǎng) - it200.com -
rewrite– 使用此格式重寫永久鏈接。愛掏網(wǎng) - it200.com -
add_new– 用于添加新帖子的菜單項。愛掏網(wǎng) - it200.com -
edit_item– 編輯帖子時顯示的標(biāo)題。愛掏網(wǎng) - it200.com -
new_item– 顯示在管理標(biāo)題的收藏夾菜單中。愛掏網(wǎng) - it200.com -
view_item– 顯示在編輯帖子屏幕上的永久鏈接旁邊。愛掏網(wǎng) - it200.com -
search_items– 編輯帖子屏幕上搜索框的按鈕文本。愛掏網(wǎng) - it200.com -
not_found– 通過在管理中搜索沒有找到帖子時顯示的文本。愛掏網(wǎng) - it200.com -
not_found_in_trash– 垃圾箱中沒有帖子時顯示的文本。愛掏網(wǎng) - it200.com -
parent_item_colon– 用作編輯帖子屏幕上父帖子的標(biāo)簽。愛掏網(wǎng) - it200.com僅對分層帖子類型有用。愛掏網(wǎng) - it200.com
接下來，為我們的自定義帖子類型創(chuàng)建參數(shù)。愛掏網(wǎng) - it200.com將以下代碼插入到我們的 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' ) );登錄后復(fù)制
-
labels– 此帖子類型的標(biāo)簽數(shù)組。愛掏網(wǎng) - it200.com -
public– 用于定義 public_queriable、show_ui、show_in_nav_menus 和 except_from_search 的默認值的元參數(shù)。愛掏網(wǎng) - it200.com -
publicly_queryable– 前端是否可以進行post類型查詢。愛掏網(wǎng) - it200.com -
show_ui– 是否生成用于管理此帖子類型的默認用戶界面。愛掏網(wǎng) - it200.com -
query_var– False 以阻止查詢，或用于此帖子類型的查詢變量的字符串值。愛掏網(wǎng) - it200.com -
rewrite– 使用此格式重寫永久鏈接。愛掏網(wǎng) - it200.com -
capability_type– 用于構(gòu)建讀取、編輯和刪除功能的字符串。愛掏網(wǎng) - it200.com -
hierarchical– 帖子類型是否分層。愛掏網(wǎng) - it200.com允許指定父級。愛掏網(wǎng) - it200.com -
menu_position– 帖子類型應(yīng)出現(xiàn)在管理中的菜單順序中的位置。愛掏網(wǎng) - it200.com -
supports– 直接調(diào)用 add_post_type_support() 的別名。愛掏網(wǎng) - it200.com
在 WordPress Codex 中了解有關(guān) add_post_type_support 的更多信息
現(xiàn)在我們的帖子類型已經(jīng)設(shè)置完畢，我們需要注冊帖子類型。愛掏網(wǎng) - it200.com我們通過將以下代碼插入到 post_type 函數(shù)中來注冊帖子類型：
register_post_type(__( 'portfolio' ), $args);登錄后復(fù)制
格式化自定義帖子類型輸出
我們現(xiàn)在已經(jīng)創(chuàng)建了自定義帖子類型。愛掏網(wǎng) - it200.com讓我們格式化輸出，這樣我們就可以獲得用戶友好的消息。愛掏網(wǎng) - it200.com首先在我們的 portfolio-post-type.php 文件中創(chuàng)建另一個函數(shù)。愛掏網(wǎng) - it200.com
// function: portfolio_messages BEGIN
function portfolio_messages($messages)
{
$messages[__( 'portfolio' )] =
array(
0 => '',
1 => sprintf(('Portfolio Updated. View portfolio'), 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. View Portfolio'), esc_url(get_permalink($post_ID))),
7 => __('Portfolio Saved.'),
8 => sprintf(__('Portfolio Submitted. Preview Portfolio'), esc_url( add_query_arg('preview', 'true', get_permalink($post_ID)))),
9 => sprintf(__('Portfolio Scheduled For: %1$s. Preview Portfolio'), date_i18n( __( 'M j, Y @ G:i' ), strtotime($post->post_date)), esc_url(get_permalink($post_ID))),
10 => sprintf(__('Portfolio Draft Updated. Preview Portfolio'), esc_url( add_query_arg('preview', 'true', get_permalink($post_ID)))),
);
return $messages;
} // function: portfolio_messages END
登錄后復(fù)制
我們剛剛所做的是創(chuàng)建一個名為 portfolio_messages 的函數(shù)，它接受一個名為 $messages 的參數(shù)。愛掏網(wǎng) - it200.com接下來，我們創(chuàng)建一個變量來存儲所有消息的數(shù)組。愛掏網(wǎng) - it200.com我們在數(shù)組中將“0”留空，因為我們的消息索引從 1 開始。愛掏網(wǎng) - it200.com然后最后將我們的數(shù)組返回給我們的函數(shù)。愛掏網(wǎng) - it200.com
創(chuàng)建分類
最后，我們需要創(chuàng)建我們的分類法。愛掏網(wǎng) - it200.com首先創(chuàng)建另一個名為 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
登錄后復(fù)制
我們首先注冊我們的分類法，然后將分類法應(yīng)用于我們的自定義帖子類型組合。愛掏網(wǎng) - it200.com接下來，我們應(yīng)用分類法的最終設(shè)置并輸入創(chuàng)建的標(biāo)簽。愛掏網(wǎng) - it200.com我們創(chuàng)建分類法的原因是因為我們在使用 Quicksand 對投資組合進行排序時將使用它作為參考鍵。愛掏網(wǎng) - it200.com
現(xiàn)在我們所有的自定義帖子類型以及正確的格式和我們自己的分類法都已完成，我們需要最終初始化所有代碼，以便它將顯示在管理中。愛掏網(wǎng) - it200.com首先，我們在文件底部添加以下代碼：
add_action( 'init', 'post_type' ); add_action( 'init', 'portfolio_filter', 0 ); add_filter( 'post_updated_messages', 'portfolio_messages' );登錄后復(fù)制
輸入此內(nèi)容后，我們需要打開 functions.php 文件并插入以下代碼行：
include("portfolio/portfolio-post-types.php");
登錄后復(fù)制
我們需要將自定義組合類型包含到 functions.php 文件中，以便在調(diào)用 WordPress 主題的函數(shù)時運行腳本。愛掏網(wǎng) - it200.com現(xiàn)在，您將在管理面板中看到一個標(biāo)題為投資組合的部分，其中包含 3 個子導(dǎo)航項，分別稱為“投資組合”、“添加項目”和“過濾器”。愛掏網(wǎng) - it200.com
現(xiàn)在我們已經(jīng)完成了整個投資組合設(shè)置，我們需要輸出我們的投資組合項目。愛掏網(wǎng) - it200.com我們首先創(chuàng)建一個名為 portfolio.php 的新 PHP 文件。愛掏網(wǎng) - it200.com首先，讓我們添加一些創(chuàng)建頁面模板的要點：
// We will add our content later登錄后復(fù)制
現(xiàn)在，我們已經(jīng)創(chuàng)建了基本頁面模板，我們需要填充我們的投資組合。愛掏網(wǎng) - it200.com我們需要首先創(chuàng)建一個頁面作為我們的投資組合頁面，因此請前往儀表板中的頁面 -> 添加新內(nèi)容。愛掏網(wǎng) - it200.com在右側(cè)，您將看到一個標(biāo)題為頁面屬性的框，其中包含默認模板的下拉菜單，選擇您想要在我們的案例中使用的所需模板應(yīng)選擇 >portfolio，然后選擇發(fā)布。愛掏網(wǎng) - it200.com
顯示過濾器
現(xiàn)在，讓我們返回編輯我們的投資組合頁面模板并開始為我們的投資組合插入過濾器。愛掏網(wǎng) - it200.com首先，我們首先將過濾器包裝在無序列表中，每個類別都將是列表中的一個元素。愛掏網(wǎng) - it200.com
- Filter:
- All
讓我們向過濾器添加一些 PHP，以自動生成在我們的產(chǎn)品組合中使用的過濾器類別。愛掏網(wǎng) - it200.com
0) {
foreach ($terms as $term) {
$i++;
$term_list .= '
我們在這里所做的首先是初始化我們希望獲得的分類法，在我們的例子中是過濾器。愛掏網(wǎng) - it200.com其次，為我們的類別設(shè)置一個計數(shù)，以便我們在過濾器中的每個元素上遞增，然后應(yīng)用條件語句來檢查我們設(shè)置的計數(shù)是否小于 0；這意味著如果過濾器中沒有類別或沒有為投資組合項目分配類別，則不會輸出任何內(nèi)容。愛掏網(wǎng) - it200.com如果我們的過濾器中有類別，那么我們想要更改每個元素的輸出。愛掏網(wǎng) - it200.com
我們通過代碼段中的以下行來完成此操作：
$term_list .= '
我們正在創(chuàng)建一個列表元素以適合我們的無序列表，然后將“href”設(shè)置為空白目標(biāo)，因為 Quicksand 將處理內(nèi)容的組織，然后我們將類名設(shè)置為投資組合項目的 slug一致的引用，最后在我們的過濾器中輸出類別的名稱。愛掏網(wǎng) - it200.com
顯示投資組合項目
太棒了，我們現(xiàn)在實現(xiàn)了動態(tài)過濾器。愛掏網(wǎng) - it200.com現(xiàn)在我們要輸出我們的投資組合項目。愛掏網(wǎng) - it200.com讓我們開始查詢我們的數(shù)據(jù)庫，以獲取投資組合帖子類型的所有帖子并設(shè)置我們的 WordPress 循環(huán)。愛掏網(wǎng) - it200.com我們首先設(shè)置一個新的 WP_Query 對象并向其傳遞正確的參數(shù)。愛掏網(wǎng) - it200.com
'portfolio', 'posts_per_page' =>'-1' ) ); ?>登錄后復(fù)制
我們將 WP_Query 對象分配給一個變量，以便在初始化循環(huán)時可以引用我們的查詢。愛掏網(wǎng) - it200.com我們將帖子類型設(shè)置為 portfolio，因此我們只查詢之前創(chuàng)建的自定義帖子類型，最后將 posts_per_page 設(shè)置為 -1。愛掏網(wǎng) - it200.com我們使用-1，這樣每頁的帖子數(shù)量沒有固定的限制，因此顯示所有投資組合項目，如果我們愿意，我們也可以輸入任何數(shù)字，它只會顯示此處輸入的投資組合項目的數(shù)量。愛掏網(wǎng) - it200.com
現(xiàn)在我們有了一個可以引用的查詢對象，讓我們設(shè)置循環(huán)來輸出我們的投資組合項目。愛掏網(wǎng) - it200.com我們首先插入以下代碼：
have_posts()) : while ($wpbp->have_posts()) : $wpbp->the_post(); ?>登錄后復(fù)制
在開始將內(nèi)容輸入循環(huán)之前，我們將設(shè)置特色圖像。愛掏網(wǎng) - it200.com打開您的 functions.php 文件，我們將為每個投資組合項目添加一些要輸出的自定義特色圖像尺寸。愛掏網(wǎng) - it200.com
我們首先檢查當(dāng)前版本的 WordPress 是否支持特色圖片功能，然后設(shè)置一些常規(guī)設(shè)置以使其正常工作。愛掏網(wǎng) - it200.com我們添加了對后縮略圖的支持，并將默認尺寸設(shè)置為 56 像素 x 56 像素。愛掏網(wǎng) - it200.com
if ( function_exists( 'add_theme_support' ) )
{
add_theme_support( 'post-thumbnails' );
set_post_thumbnail_size( 56, 56, true );
}
登錄后復(fù)制
然后我們要添加我們自己的自定義縮略圖大小。愛掏網(wǎng) - it200.com在下面一行插入以下代碼：set_post_thumbnail_size
add_image_size( 'portfolio', 295, 150, true );登錄后復(fù)制
此方法允許您創(chuàng)建自己的縮略圖大小，方法是首先設(shè)置縮略圖的參考名稱，然后設(shè)置寬度和高度，最后設(shè)置縮略圖是否應(yīng)硬裁剪圖像以適合指定的大小。愛掏網(wǎng) - it200.com您可以更改特色圖像的尺寸以適合您的布局；為了本教程的目的，我有一個 3 列網(wǎng)格布局。愛掏網(wǎng) - it200.com
現(xiàn)在我們已經(jīng)設(shè)置了特色圖像，我們將返回我們的投資組合頁面模板并輸出投資組合項目特色圖像。愛掏網(wǎng) - it200.com
由于每個投資組合項目的組織最好通過無序列表處理，因此我們將首先創(chuàng)建一個，然后輸出我們剛剛設(shè)置的特色圖像。愛掏網(wǎng) - it200.com在 WordPress 循環(huán)中插入以下代碼：
我們首先檢查主題是否支持縮略圖功能。愛掏網(wǎng) - it200.com如果主題支持此功能，那么它將在我們之前指定的專用縮略圖上輸出特征圖像。愛掏網(wǎng) - it200.com輸出特色圖像后，我們將作品集項目的標(biāo)題直接輸出在圖像下方。愛掏網(wǎng) - it200.com
連接投資組合項目和過濾器
我們需要調(diào)整每個投資組合列表項的不同元素，以確保每個投資組合的引用對于該項目分配到的類別是正確的。愛掏網(wǎng) - it200.com為此，我們首先需要從分類中獲取類別。愛掏網(wǎng) - it200.com在循環(huán)中插入以下代碼：
登錄后復(fù)制
接下來，我們將向列表元素（li）添加一些屬性。愛掏網(wǎng) - it200.com我們首先將 data-id 添加到列表項中，為每個投資組合項提供唯一的標(biāo)識。愛掏網(wǎng) - it200.com我們還將添加一個 data-type；這將作為我們對過濾器的引用。愛掏網(wǎng) - it200.com讓我們用以下代碼替換我們的起始列表元素 (li)：
我們對 data-id 應(yīng)用計數(shù)，當(dāng)循環(huán)遍歷每個項目時，計數(shù)將會增加（我們很快就會添加計數(shù)）。愛掏網(wǎng) - it200.com然后，我們循環(huán)分類法中的每個類別，并應(yīng)用正則表達式來查找空格，并將其替換為“-”以匹配該類別的子句，最后在末尾添加一個空格，這樣我們就可以應(yīng)用一個投資組合項目有多個類別。愛掏網(wǎng) - it200.com
最后，我們將確保增加計數(shù)并為每個投資組合項目提供唯一的參考。愛掏網(wǎng) - it200.com我們需要在結(jié)束循環(huán)之前添加以下代碼：
登錄后復(fù)制
顯示投資組合的最終代碼
-
'portfolio', 'posts_per_page' =>'-1' ) ); ?>
have_posts()) : while ($wpbp->have_posts()) : $wpbp->the_post(); ?>
我們現(xiàn)在正在取得進展，但在繼續(xù)之前我們需要下載一些 jQuery 腳本。愛掏網(wǎng) - it200.com我們需要下載以下腳本：
- jQuery 1.7（WordPress 3.3.1 附帶的版本）
- Quicksand 插件（來自 GitHub 的最新版本）
- 緩動插件（版本1.3）
我們還需要創(chuàng)建一個 JavaScript 文件來處理我們將很快編寫的所有自定義 jQuery。愛掏網(wǎng) - it200.com因此，讓我們創(chuàng)建一個名為 jquery.custom.js 的空白 JavaScript 文件。愛掏網(wǎng) - it200.com現(xiàn)在我們已經(jīng)擁有了所有必要的腳本，讓我們打開 functions.php 并創(chuàng)建一個名為 register_js 的空白函數(shù)。愛掏網(wǎng) - it200.com一旦我們有了空白函數(shù)，我們將使用 wp_register_script 和 wp_enqueue_script 方法插入腳本。愛掏網(wǎng) - it200.com首先，我們必須檢查我們是否不在管理員中，以確保腳本僅在前端加載。愛掏網(wǎng) - it200.com將以下代碼插入到我們的函數(shù)中：
// 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' );
}
}
登錄后復(fù)制
首先，使用wp_register_script，我們指定一個句柄作為第一個參數(shù)以供在排隊腳本時參考，然后將腳本的源鏈接添加為我們的第二個參數(shù)（這適用于腳本的每次注冊） 。愛掏網(wǎng) - it200.com我們還指定 jquery 作為依賴項，以便在將腳本排入隊列時加載 WordPress 包含的 jQuery 版本。愛掏網(wǎng) - it200.com
注冊完所有腳本后，我們將使用 wp_enqueue_script 將它們排入隊列。愛掏網(wǎng) - it200.com我們傳遞注冊時使用的所有句柄作為引用來排隊我們的腳本。愛掏網(wǎng) - it200.com最后，我們需要通過在 functions.php 文件中添加以下代碼來初始化我們的函數(shù)：
add_action('init', 'register_js');
登錄后復(fù)制
書寫流沙
現(xiàn)在我們已經(jīng)準(zhǔn)備好了所有腳本，我們可以開始編寫 jQuery 自定義腳本來處理流沙。愛掏網(wǎng) - it200.com讓我們打開 jquery.custom.js 腳本，并通過插入以下代碼來設(shè)置環(huán)境：
jQuery(document).ready(function() {
// We will insert our quicksand script in here
}); // END OF DOCUMENT
登錄后復(fù)制
現(xiàn)在我們有了腳本結(jié)構(gòu)，我們將創(chuàng)建一個名為 portfolio_quicksand 的函數(shù)，并且僅在 Quicksand 插件存在時才執(zhí)行。愛掏網(wǎng) - it200.com
function portfolio_quicksand() {
// All of our quicksand handling will happen in this function
}
if(jQuery().quicksand) {
portfolio_quicksand();
}
登錄后復(fù)制
我將把以下內(nèi)容分解為更小的步驟，以便您了解創(chuàng)建流沙投資組合時發(fā)生的所有事情。愛掏網(wǎng) - it200.com讓我們從設(shè)置變量開始。愛掏網(wǎng) - it200.com將以下代碼插入到我們的 portfolio_quicksand 函數(shù)中：
var $filter; var $container; var $containerClone; var $filterLink; var $filteredItems;登錄后復(fù)制
我們將更頻繁地使用這些變量，因此這始終是為變量設(shè)置奠定堅實基礎(chǔ)的好方法。愛掏網(wǎng) - it200.com接下來我們將分配變量：
$filter = $('.filter li.active a').attr('class');
$filterLink = $('.filter li a');
$container = $('ul.filterable-grid');
$containerClone = $container.clone();
登錄后復(fù)制
我們首先將過濾器設(shè)置為投資組合頁面模板中的無序列表類。愛掏網(wǎng) - it200.com其次，我們設(shè)置一個filterLink；這將充當(dāng)我們在過濾器中單擊的項目。愛掏網(wǎng) - it200.com然后我們需要分配我們的投資組合項目的容器，最后我們需要容器的克隆版本，以使用 Quicksand 操作數(shù)據(jù)。愛掏網(wǎng) - it200.com
接下來，我們將編寫點擊函數(shù)，因此當(dāng)用戶選擇一個類別時，應(yīng)該操作容器并顯示內(nèi)容的輸出。愛掏網(wǎng) - it200.com讓我們首先調(diào)用 filterLink 上的點擊函數(shù)：
$filterLink.click(function(e) {
// We will add the content for this function now...
});
登錄后復(fù)制
現(xiàn)在讓我們處理列表元素的活動狀態(tài)。愛掏網(wǎng) - it200.com我們首先刪除具有當(dāng)前活動狀態(tài)的任何類，然后搜索過濾器并將過濾器拆分為單獨的項目，最后將活動類應(yīng)用于單擊的項目（類別）：
$('.filter li').removeClass('active');
$filter = $(this).attr('class').split(' ');
$(this).parent().addClass('active');
登錄后復(fù)制
這在設(shè)計過濾器樣式時會有所幫助，因為您將能夠在用戶選擇類別時提供活動狀態(tài)。愛掏網(wǎng) - it200.com
接下來，我們將處理數(shù)據(jù)過濾的條件。愛掏網(wǎng) - it200.com我們首先檢查是否已選擇全部。愛掏網(wǎng) - it200.com如果選擇了全部，則顯示容器內(nèi)的所有元素，否則顯示容器內(nèi)已被過濾器選擇的項目。愛掏網(wǎng) - it200.com
以前，當(dāng)我們創(chuàng)建投資組合頁面模板時，我們?yōu)槊總€投資組合項目分配了 data-type，我們將在此處使用它作為參考鍵來查找所選數(shù)據(jù)。愛掏網(wǎng) - it200.com
if ($filter == 'all') {
$filteredItems = $containerClone.find('li');
}
else {
$filteredItems = $containerClone.find('li[data-type~=' + $filter + ']');
}
登錄后復(fù)制
最后，我們調(diào)用 Quicksand 方法，并傳遞 filteredItems 和所有動畫選項：
$container.quicksand($filteredItems,
{
duration: 750,
easing: 'easeInOutCirc',
adjustHeight: 'dynamic'
});
登錄后復(fù)制
流沙的最終代碼
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'
});
});
}
登錄后復(fù)制
令人驚奇的是，您現(xiàn)在應(yīng)該擁有一個功能齊全的流沙投資組合，但我們不能僅限于此。愛掏網(wǎng) - it200.com我要添加一個額外的功能，這是完全可選的，但它可能成為我最喜歡的功能，那就是燈箱。愛掏網(wǎng) - it200.com我們將使用名為 PrettyPhoto 的 jQuery 插件來集成 Lightbox。愛掏網(wǎng) - it200.com
我們要做的第一件事是下載 PrettyPhoto 插件。愛掏網(wǎng) - it200.com
- PrettyPhoto v3（或最新版本）
下載 PrettyPhoto 文件后，我們將首先復(fù)制 PrettyPhoto 圖像，該圖像位于 images 文件夾中，然后您需要復(fù)制標(biāo)題為 PrettyPhoto 的文件夾> 進入我們的主題。愛掏網(wǎng) - it200.com我們還需要復(fù)制 CSS 和 PrettyPhoto 的 JavaScript 文件，因此讓我們將它們復(fù)制到主題中的相應(yīng)文件夾中。愛掏網(wǎng) - it200.com
現(xiàn)在我們已經(jīng)準(zhǔn)備好了所有文件，我們需要在主題中初始化它們。愛掏網(wǎng) - it200.com在我們的 functions.php 文件中，我們將創(chuàng)建另一個函數(shù)來處理我們的樣式，我們將調(diào)用該函數(shù) register_css。愛掏網(wǎng) - it200.com然后我們將注冊我們的樣式并將我們的樣式排入隊列，從而將以下代碼插入到您的 functions.php 文件中：
// 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' );
登錄后復(fù)制
我們已準(zhǔn)備好所有文件，并且它們正在由我們的主題初始化。愛掏網(wǎng) - it200.com現(xiàn)在我們需要利用它并將 Lightbox 實現(xiàn)到我們的主題中。愛掏網(wǎng) - it200.com讓我們打開 portfolio.php（作品集頁面模板）并向我們的特色圖片添加一些代碼。愛掏網(wǎng) - it200.com
首先，我們需要獲取已設(shè)置的特色圖片的大圖。愛掏網(wǎng) - it200.com當(dāng)用戶單擊圖像并加載 PrettyPhoto 時，這將充當(dāng)全尺寸圖像。愛掏網(wǎng) - it200.com在 WordPress 循環(huán)中，我們需要插入以下代碼：
登錄后復(fù)制
我們插入的代碼將在循環(huán)中查找當(dāng)前帖子，并找到圖像的原始來源，然后找到圖像的全尺寸版本。愛掏網(wǎng) - it200.com返回全尺寸圖像后，我們將強制將圖像存儲在數(shù)組索引 0 中。愛掏網(wǎng) - it200.com這用于不覆蓋或與全尺寸圖像重復(fù)。愛掏網(wǎng) - it200.com
一旦我們可以訪問完整尺寸的圖像，我們現(xiàn)在將在我們的特色圖像上初始化 PrettyPhoto。愛掏網(wǎng) - it200.com以下代碼會將全尺寸圖像鏈接到投資組合項目的特色圖像，并將引用傳遞給 PrettyPhoto，將您創(chuàng)建特色圖像的代碼替換為以下內(nèi)容：
登錄后復(fù)制
太棒了，我們已經(jīng)準(zhǔn)備好所有文件和腳本，我們已經(jīng)獲得了特色圖像的全尺寸圖像，并且我們已經(jīng)使用 PrettyPhoto 將我們的特色圖像引用到了我們的全尺寸圖像。愛掏網(wǎng) - it200.com接下來，我們需要編寫 JavaScript 以使燈箱出現(xiàn)并工作。愛掏網(wǎng) - it200.com
讓我們回到 jquery.custom.js 文件并創(chuàng)建另一個空白函數(shù)來處理 PrettyPhoto：
function lightbox() {
// Our Lightbox functioning will be added now...
}
if(jQuery().prettyPhoto) {
lightbox();
}
登錄后復(fù)制
現(xiàn)在我們有了函數(shù)，我們將初始化 PrettyPhoto。愛掏網(wǎng) - it200.com我們通過在 Lightbox 函數(shù)中添加以下代碼來實現(xiàn)此目的：
jQuery("a[rel^='prettyPhoto']").prettyPhoto({
animationSpeed:'fast',
slideshow:5000,
theme:'pp_default',
show_title:false,
overlay_gallery: false,
social_tools: false
});
登錄后復(fù)制
您可以在以下位置閱讀 PrettyPhoto 在使用該插件時接受的所有參數(shù)的完整文檔：PrettyPhoto jQuery Lightbox Clone
所以，一切都完成了！ Lightbox 實現(xiàn)到您的 WordPress 主題中，但等一下，讓我猜猜您何時單擊過濾器并使用 Quicksand；燈箱不再工作。愛掏網(wǎng) - it200.com這是因為我們需要更改 Quicksand 腳本并傳遞一小段代碼，以確保 Lightbox 即使在我們過濾投資組合時也能正常工作。愛掏網(wǎng) - it200.com
因此，讓我們通過將以下腳本添加到 jquery.custom.js 文件中的 portfolio_quicksand 函數(shù)來解決這個小問題：
$container.quicksand($filteredItems,
function () { lightbox(); }
);
登錄后復(fù)制
我們在這里所做的是再次調(diào)用 Quicksand 插件，并將此調(diào)用中的函數(shù)傳遞給我們的 Lightbox 函數(shù)。愛掏網(wǎng) - it200.com因此，每次 Quicksand 過濾內(nèi)容時，都會調(diào)用 Lightbox 函數(shù)，將 PrettyPhoto 應(yīng)用于每個圖像。愛掏網(wǎng) - it200.com
許多人喜歡使用 Quicksand，但有些人喜歡在其作品集中同時使用 Quicksand 和分頁。愛掏網(wǎng) - it200.com這是在您的投資組合中創(chuàng)建分頁的另一個額外功能。愛掏網(wǎng) - it200.com我將使用 WordPress 插件：WP_PageNavi。愛掏網(wǎng) - it200.com
讓我們首先安裝并激活該插件。愛掏網(wǎng) - it200.com前往我們管理部分的插件->添加新頁面并搜索WP_PageNavi，找到后單擊立即安裝并激活插件 安裝后。愛掏網(wǎng) - it200.com
現(xiàn)在我們已經(jīng)完成了插件設(shè)置，讓我們打開我們的作品集頁面模板并對我們的文件進行一些修改。愛掏網(wǎng) - it200.com
首先，我們需要設(shè)置頁面以允許分頁。愛掏網(wǎng) - it200.com我們通過在查詢數(shù)據(jù)庫之前插入以下代碼段來實現(xiàn)此目的：
$paged = get_query_var('paged') ? get_query_var('paged') : 1;
登錄后復(fù)制
初始化分頁后，我們需要修改數(shù)據(jù)庫查詢。愛掏網(wǎng) - it200.com我們將 post_per_page 更改為一個數(shù)字，以顯示每個頁面上顯示的最大帖子數(shù)。愛掏網(wǎng) - it200.com然后，我們將一個新參數(shù)傳遞給查詢paged，并將其引用到我們的代碼段，該代碼段允許我們對頁面進行分頁，如以下代碼所示：
$wpbp = new WP_Query(array( 'post_type' => 'portfolio', 'posts_per_page' =>'2', 'paged' => $paged ) );登錄后復(fù)制
太棒了，我們有一個帶分頁的作品集。愛掏網(wǎng) - it200.com我們只需要一些控件來幫助我們進行每個頁面的導(dǎo)航。愛掏網(wǎng) - it200.com以下代碼檢查是否安裝了 WP_PageNavi 插件，然后使用作為參數(shù)傳遞的數(shù)據(jù)庫查詢來初始化 wp_pagenavi。愛掏網(wǎng) - it200.com然后，我們重置帖子數(shù)據(jù)，所有內(nèi)容都正確分頁。愛掏網(wǎng) - it200.com
$wpbp ) ); wp_reset_postdata(); } ?>登錄后復(fù)制
就是這樣！您將擁有一個包含 Quicksand、Lightbox 和 Pagination 的功能齊全的產(chǎn)品組合。愛掏網(wǎng) - it200.com
給自己一個鼓勵吧！您已成功使用 WordPress 創(chuàng)建了流沙作品集。愛掏網(wǎng) - it200.com所有艱苦的工作都已完成，您可以將其與您開發(fā)的任何工作一起實施。愛掏網(wǎng) - it200.com
非常感謝您花時間閱讀我的教程，希望對您有所幫助。愛掏網(wǎng) - it200.com歡迎大家留言評論，我會盡力協(xié)助和解答。愛掏網(wǎng) - it200.com
以上就是使用WordPress創(chuàng)建一個快速沉降式投資組合的詳細內(nèi)容，更多請關(guān)注愛掏網(wǎng) - it200.com其它相關(guān)文章！