今天，您将利用 razorjack 的 quicksand 魔力将您简单的投资组合变成令人惊叹的东西。
简介
曾经想使用 jQuery 插件 Quicksand 吗？曾经尝试过使用 WordPress 来实现它吗？但是，发现两者兼而有之是一场噩梦吗？好吧，我将通过一个简单的分步指南，帮助您使用 Quicksand 从空白的 WordPress 主题转变为漂亮的自定义组合。我将使用一个自定义主题，该主题已根据本教程的目的与 WordPress 3.0+ 一起进行了精简。
所以打开您最喜欢的文本编辑器，让我们开始吧！
第 1 步创建帖子类型
借助 WordPress，我们能够创建自定义帖子类型，在其中管理所有内容。我们将创建一个自定义帖子类型，以将我们所有的投资组合项目存储在专用的管理部分中。
为了方便代码管理，我们首先创建一个名为 portfolio 的文件夹和一个名为 portfolio-post-types.php 的 PHP 文件（或任何您认为合适的文件）。
创建文件后，让我们添加一些代码...
让我们从创建一个函数开始：
1
2
3
4
5
<?php // function: post_type BEGIN
function post_type()
{
// We will fill this function in the next step
} // function: post_type END
现在我们已经创建了空白函数，让我们添加一些代码来使这个函数执行一些特殊的操作。首先，为我们的自定义帖子类型创建标签。在我们的 post_type 函数中插入以下代码：
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
$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 =>
);
我们刚刚编写的代码的细分：
“labels”变量是代表您的帖子类型的字符串数组，每个字符串都是特定函数输出的文本。
name – 帖子类型名称的复数形式。 singular_name – 帖子类型名称的单数形式。 rewrite – 使用此格式重写永久链接。 add_new – 用于添加新帖子的菜单项。 edit_item – 编辑帖子时显示的标题。 new_item – 显示在管理标题的收藏夹菜单中。 view_item – 显示在编辑帖子屏幕上的永久链接旁边。 search_items – 编辑帖子屏幕上搜索框的按钮文本。 not_found – 通过在管理中搜索没有找到帖子时显示的文本。 not_found_in_trash – 垃圾箱中没有帖子时显示的文本。 parent_item_colon – 用作编辑帖子屏幕上父帖子的标签。仅对分层帖子类型有用。接下来，为我们的自定义帖子类型创建参数。将以下代码插入到我们的 post_type 函数中：
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
$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
)
);
现在我们的帖子类型已经设置完毕，我们需要注册帖子类型。我们通过将以下代码插入到 post_type 函数中来注册帖子类型：
1
register_post_type(__( portfolio ), $args);
格式化自定义帖子类型输出
我们现在已经创建了自定义帖子类型。让我们格式化输出，这样我们就可以获得用户友好的消息。首先在我们的 portfolio-post-type.php 文件中创建另一个函数。
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
// 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%24s">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
我们刚刚所做的是创建一个名为 portfolio_messages 的函数，它接受一个名为 $messages 的参数。接下来，我们创建一个变量来存储所有消息的数组。我们在数组中将“0”留空，因为我们的消息索引从 1 开始。然后最后将我们的数组返回给我们的函数。
创建分类
最后，我们需要创建我们的分类法。首先创建另一个名为 portfolio_filter 的函数并输入以下代码：
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
// 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
我们首先注册我们的分类法，然后将分类法应用于我们的自定义帖子类型组合。接下来，我们应用分类法的最终设置并输入创建的标签。我们创建分类法的原因是因为我们在使用 Quicksand 对投资组合进行排序时将使用它作为参考键。
现在我们所有的自定义帖子类型以及正确的格式和我们自己的分类法都已完成，我们需要最终初始化所有代码，以便它将显示在管理中。首先，我们在文件底部添加以下代码：
1
2
3
add_action( init, post_type );
add_action( init, portfolio_filter, 0 );
add_filter( post_updated_messages, portfolio_messages );
输入此内容后，我们需要打开 functions.php 文件并插入以下代码行：
1
include("portfolio/portfolio-post-types.php");
我们需要将自定义组合类型包含到 functions.php 文件中，以便在调用 WordPress 主题的函数时运行脚本。现在，您将在管理面板中看到一个标题为投资组合的部分，其中包含 3 个子导航项，分别称为“投资组合”、“添加项目”和“过滤器”。
第 2 步创建投资组合页面
现在我们已经完成了整个投资组合设置，我们需要输出我们的投资组合项目。我们首先创建一个名为 portfolio.php 的新 PHP 文件。首先，让我们添加一些创建页面模板的要点：
1
2
3
4
5
6
7
<?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(); ?>
现在，我们已经创建了基本页面模板，我们需要填充我们的投资组合。我们需要首先创建一个页面作为我们的投资组合页面，因此请前往仪表板中的页面 -> 添加新内容。在右侧，您将看到一个标题为页面属性的框，其中包含默认模板的下拉菜单，选择您想要在我们的案例中使用的所需模板应选择 >portfolio，然后选择发布。
显示过滤器
现在，让我们返回编辑我们的投资组合页面模板并开始为我们的投资组合插入过滤器。首先，我们首先将过滤器包装在无序列表中，每个类别都将是列表中的一个元素。
1
让我们向过滤器添加一些 PHP，以自动生成在我们的产品组合中使用的过滤器类别。
1
2
3
4
5
6
7
<?php $terms = get_terms(filter, $args);
$count = count($terms);
$i=0;
if ($count > 0) {
foreach ($terms as $term) {
$i++;
$term_list .=
我们在这里所做的首先是初始化我们希望获得的分类法，在我们的例子中是过滤器。其次，为我们的类别设置一个计数，以便我们在过滤器中的每个元素上递增，然后应用条件语句来检查我们设置的计数是否小于 0；这意味着如果过滤器中没有类别或没有为投资组合项目分配类别，则不会输出任何内容。如果我们的过滤器中有类别，那么我们想要更改每个元素的输出。
我们通过代码段中的以下行来完成此操作：
1
$term_list .=
我们正在创建一个列表元素以适合我们的无序列表，然后将“href”设置为空白目标，因为 Quicksand 将处理内容的组织，然后我们将类名设置为投资组合项目的 slug一致的引用，最后在我们的过滤器中输出类别的名称。
显示投资组合项目
太棒了，我们现在实现了动态过滤器。现在我们要输出我们的投资组合项目。让我们开始查询我们的数据库，以获取投资组合帖子类型的所有帖子并设置我们的 WordPress 循环。我们首先设置一个新的 WP_Query 对象并向其传递正确的参数。
1
2
3
4
5
6
<?php $wpbp = new WP_Query(array(
post_type => portfolio,
posts_per_page =>-1
)
);
?>
我们将 WP_Query 对象分配给一个变量，以便在初始化循环时可以引用我们的查询。我们将帖子类型设置为 portfolio，因此我们只查询之前创建的自定义帖子类型，最后将 posts_per_page 设置为 -1。我们使用-1，这样每页的帖子数量没有固定的限制，因此显示所有投资组合项目，如果我们愿意，我们也可以输入任何数字，它只会显示此处输入的投资组合项目的数量。
现在我们有了一个可以引用的查询对象，让我们设置循环来输出我们的投资组合项目。我们首先插入以下代码：
1
2
3
<?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(); ?>
在开始将内容输入循环之前，我们将设置特色图像。打开您的 functions.php 文件，我们将为每个投资组合项目添加一些要输出的自定义特色图像尺寸。
我们首先检查当前版本的 WordPress 是否支持特色图片功能，然后设置一些常规设置以使其正常工作。我们添加了对后缩略图的支持，并将默认尺寸设置为 56 像素 x 56 像素。
1
2
3
4
5
if ( function_exists( add_theme_support ) )
{
add_theme_support( post-thumbnails );
set_post_thumbnail_size( 56, 56, true );
}
然后我们要添加我们自己的自定义缩略图大小。在下面一行插入以下代码：set_post_thumbnail_size
1
add_image_size( portfolio, 295, 150, true );
此方法允许您创建自己的缩略图大小，方法是首先设置缩略图的参考名称，然后设置宽度和高度，最后设置缩略图是否应硬裁剪图像以适合指定的大小。您可以更改特色图像的尺寸以适合您的布局；为了本教程的目的，我有一个 3 列网格布局。
现在我们已经设置了特色图像，我们将返回我们的投资组合页面模板并输出投资组合项目特色图像。
由于每个投资组合项目的组织最好通过无序列表处理，因此我们将首先创建一个，然后输出我们刚刚设置的特色图像。在 WordPress 循环中插入以下代码：
1