简体中文(ZH-CN) English(EN) 繁体中文(ZH-TW) 日本語(JA) 한국어(KO) Melayu(MS) Français(FR) Deutsch(DE)
Maison > Tutoriel CMS > WordPresse > le corps du texte

Créez un portefeuille à absorption rapide à l'aide de WordPress

PHPz
Libérer： 2023-09-05 09:09:16
original
1243 Les gens l'ont consulté

Aujourd’hui, vous exploiterez la magie des sables mouvants de Razorjack pour transformer votre simple portfolio en quelque chose d’incroyable.

Présentation

Vous avez toujours voulu utiliser le plugin jQuery Quicksand ? Avez-vous déjà essayé de le faire avec WordPress ? Mais découvrir les deux est-il un cauchemar ? Eh bien, je vais vous aider à passer d'un thème WordPress vierge à un magnifique portfolio personnalisé utilisant Quicksand avec un simple guide étape par étape. J'utiliserai un thème personnalisé qui a été rationalisé pour les besoins de ce didacticiel avec WordPress 3.0+.

Alors ouvrez votre éditeur de texte préféré et commençons !

Étape 1Créer un type de message

Avec WordPress, nous pouvons créer des types de publications personnalisés dans lesquels nous pouvons gérer tout notre contenu. Nous allons créer un type de publication personnalisé pour stocker tous les éléments de notre portefeuille dans une section d'administration dédiée.

Pour faciliter la gestion du code, nous créons d'abord un dossier appelé portfolio et un fichier PHP appelé portfolio-post-types.php (ou tout ce que vous jugez approprié).

Après avoir créé le fichier, ajoutons du code...

Commençons par créer une fonction : 

<?php

	// function: post_type BEGIN
	function post_type()
	{
		// We will fill this function in the next step
	} // function: post_type END
Copier après la connexion

Maintenant que nous avons créé la fonction vide, ajoutons du code pour que cette fonction effectue des opérations spéciales. Tout d’abord, créez des balises pour notre type de publication personnalisé. Insérez le code suivant dans notre fonction post_type : 

$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' => ''
);
Copier après la connexion

Détail du code que nous venons d'écrire :

La variable "labels" est un tableau de chaînes représentant vos types de publications, chaque chaîne est le texte généré par une fonction spécifique.

  • name – Forme plurielle du nom du type de message.
  • singular_name – Forme singulière du nom du type de publication.
  • rewrite – Réécrivez les permaliens en utilisant ce format.
  • add_new – Élément de menu pour ajouter de nouveaux messages.
  • edit_item – Titre affiché lors de la modification d’un message.
  • new_item – Affiché dans le menu des favoris des titres d'administrateur.
  • view_item – Apparaît à côté du lien permanent sur l'écran de modification de la publication.
  • search_items – Texte du bouton pour le champ de recherche sur l'écran de modification de la publication.
  • not_found – Texte affiché lorsqu'aucune publication n'est trouvée en recherchant dans l'admin.
  • not_found_in_trash – Texte affiché lorsqu'il n'y a aucune publication dans la corbeille.
  • parent_item_colon – Utilisé comme balise pour la publication parent sur l'écran de modification de la publication. Utile uniquement pour les types de publication hiérarchiques.

Ensuite, créez des paramètres pour notre type de publication personnalisé. Insérez le code suivant dans notre fonction post_type : 

$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'
	)
);
Copier après la connexion
  • labels – Tableau de balises pour ce type de publication.
  • public – Méta-paramètres utilisés pour définir les valeurs par défaut pour public_queriable, show_ui, show_in_nav_menus et except_from_search.
  • publicly_queryable – Si le front-end peut effectuer des requêtes de type publication.
  • show_ui – S'il faut générer l'interface utilisateur par défaut pour gérer ce type de publication.
  • query_var – False pour bloquer les requêtes, ou la valeur de chaîne de la variable de requête à utiliser pour ce type de publication.
  • rewrite – Réécrivez les permaliens en utilisant ce format.
  • capability_type – Chaînes utilisées pour créer des fonctions de lecture, d'édition et de suppression.
  • hierarchical – Si le type de publication est hiérarchique. Permet de spécifier le parent.
  • menu_position – Où le type de publication doit apparaître dans l’ordre du menu dans l’administration.
  • supports – Alias ​​​​pour appeler directement add_post_type_support().

En savoir plus sur add_post_type_support dans le Codex WordPress

Maintenant que notre type de publication est configuré, nous devons enregistrer le type de publication. Nous enregistrons le type de publication en insérant le code suivant dans la fonction post_type : 

register_post_type(__( 'portfolio' ), $args);
Copier après la connexion

Formater la sortie du type de publication personnalisé

Nous avons maintenant créé un type de publication personnalisé. Formatons la sortie afin d'obtenir un message convivial. Créez d'abord une autre fonction dans notre fichier portfolio-post-type.php. 

// 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
Copier après la connexion

Ce que nous venons de faire, c'est créer une fonction appelée portfolio_messages qui prend un paramètre appelé $messages . Ensuite, nous créons une variable pour stocker un tableau de tous les messages. Nous laissons "0" vide dans le tableau car notre index de message commence à 1. Et puis enfin, renvoyez notre tableau à notre fonction.

Créer des catégories

Enfin, nous devons créer notre taxonomie. Créez d'abord une autre fonction appelée portfolio_filter et entrez le code suivant : 

// 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
Copier après la connexion

我们首先注册我们的分类法，然后将分类法应用于我们的自定义帖子类型组合。接下来，我们应用分类法的最终设置并输入创建的标签。我们创建分类法的原因是因为我们在使用 Quicksand 对投资组合进行排序时将使用它作为参考键。

现在我们所有的自定义帖子类型以及正确的格式和我们自己的分类法都已完成，我们需要最终初始化所有代码，以便它将显示在管理中。首先，我们在文件底部添加以下代码：

add_action( 'init', 'post_type' );
add_action( 'init', 'portfolio_filter', 0 );
add_filter( 'post_updated_messages', 'portfolio_messages' );
Copier après la connexion

输入此内容后，我们需要打开 functions.php 文件并插入以下代码行：

include("portfolio/portfolio-post-types.php");
Copier après la connexion

我们需要将自定义组合类型包含到 functions.php 文件中，以便在调用 WordPress 主题的函数时运行脚本。现在，您将在管理面板中看到一个标题为投资组合的部分，其中包含 3 个子导航项，分别称为“投资组合”、“添加项目”和“过滤器”。

第 2 步创建投资组合页面

现在我们已经完成了整个投资组合设置，我们需要输出我们的投资组合项目。我们首先创建一个名为 portfolio.php 的新 PHP 文件。首先，让我们添加一些创建页面模板的要点：

<?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(); ?>
Copier après la connexion

现在，我们已经创建了基本页面模板，我们需要填充我们的投资组合。我们需要首先创建一个页面作为我们的投资组合页面，因此请前往仪表板中的页面 -> 添加新内容。在右侧，您将看到一个标题为页面属性的框，其中包含默认模板的下拉菜单，选择您想要在我们的案例中使用的所需模板应选择 >portfolio，然后选择发布。

Créez un portefeuille à absorption rapide à laide de WordPress

显示过滤器

现在，让我们返回编辑我们的投资组合页面模板并开始为我们的投资组合插入过滤器。首先，我们首先将过滤器包装在无序列表中，每个类别都将是列表中的一个元素。

<ul class="filter clearfix">

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

</ul>
Copier après la connexion

让我们向过滤器添加一些 PHP，以自动生成在我们的产品组合中使用的过滤器类别。

<?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;
	}
?>
Copier après la connexion

我们在这里所做的首先是初始化我们希望获得的分类法，在我们的例子中是过滤器。其次，为我们的类别设置一个计数，以便我们在过滤器中的每个元素上递增，然后应用条件语句来检查我们设置的计数是否小于 0；这意味着如果过滤器中没有类别或没有为投资组合项目分配类别，则不会输出任何内容。如果我们的过滤器中有类别，那么我们想要更改每个元素的输出。

我们通过代码段中的以下行来完成此操作：

$term_list .= '<li><a  href="javascript:void(0)" class="'. $term->slug .'">' . $term->name . '</a></li>';
Copier après la connexion

我们正在创建一个列表元素以适合我们的无序列表，然后将“href”设置为空白目标，因为 Quicksand 将处理内容的组织，然后我们将类名设置为投资组合项目的 slug一致的引用，最后在我们的过滤器中输出类别的名称。

Créez un portefeuille à absorption rapide à laide de WordPress

显示投资组合项目

太棒了，我们现在实现了动态过滤器。现在我们要输出我们的投资组合项目。让我们开始查询我们的数据库，以获取投资组合帖子类型的所有帖子并设置我们的 WordPress 循环。我们首先设置一个新的 WP_Query 对象并向其传递正确的参数。

<?php
	$wpbp = new WP_Query(array(
			'post_type' =>  'portfolio',
			'posts_per_page'  =>'-1'
		)
	);
?>
Copier après la connexion

我们将 WP_Query 对象分配给一个变量，以便在初始化循环时可以引用我们的查询。我们将帖子类型设置为 portfolio，因此我们只查询之前创建的自定义帖子类型，最后将 posts_per_page 设置为 -1。我们使用-1，这样每页的帖子数量没有固定的限制，因此显示所有投资组合项目，如果我们愿意，我们也可以输入任何数字，它只会显示此处输入的投资组合项目的数量。< /p>

现在我们有了一个可以引用的查询对象，让我们设置循环来输出我们的投资组合项目。我们首先插入以下代码：

<?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(); ?>
Copier après la connexion

在开始将内容输入循环之前，我们将设置特色图像。打开您的 functions.php 文件，我们将为每个投资组合项目添加一些要输出的自定义特色图像尺寸。

我们首先检查当前版本的 WordPress 是否支持特色图片功能，然后设置一些常规设置以使其正常工作。我们添加了对后缩略图的支持，并将默认尺寸设置为 56 像素 x 56 像素。

if ( function_exists( 'add_theme_support' ) ) 
{
	add_theme_support(  'post-thumbnails' );
	set_post_thumbnail_size(  56, 56, true );
}
Copier après la connexion

然后我们要添加我们自己的自定义缩略图大小。在下面一行插入以下代码：set_post_thumbnail_size

add_image_size( 'portfolio', 295, 150, true );
Copier après la connexion

此方法允许您创建自己的缩略图大小，方法是首先设置缩略图的参考名称，然后设置宽度和高度，最后设置缩略图是否应硬裁剪图像以适合指定的大小。您可以更改特色图像的尺寸以适合您的布局；为了本教程的目的，我有一个 3 列网格布局。

现在我们已经设置了特色图像，我们将返回我们的投资组合页面模板并输出投资组合项目特色图像。

由于每个投资组合项目的组织最好通过无序列表处理，因此我们将首先创建一个，然后输出我们刚刚设置的特色图像。在 WordPress 循环中插入以下代码：

<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>
Copier après la connexion

我们首先检查主题是否支持缩略图功能。如果主题支持此功能，那么它将在我们之前指定的专用缩略图上输出特征图像。输出特色图像后，我们将作品集项目的标题直接输出在图像下方。

连接投资组合项目和过滤器

我们需要调整每个投资组合列表项的不同元素，以确保每个投资组合的引用对于该项目分配到的类别是正确的。为此，我们首先需要从分类中获取类别。在循环中插入以下代码：

<?php $terms = get_the_terms( get_the_ID(), 'filter' ); ?>
Copier après la connexion

接下来，我们将向列表元素（li）添加一些属性。我们首先将 data-id 添加到列表项中，为每个投资组合项提供唯一的标识。我们还将添加一个 data-type；这将作为我们对过滤器的引用。让我们用以下代码替换我们的起始列表元素 (li)：

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

我们对 data-id 应用计数，当循环遍历每个项目时，计数将会增加（我们很快就会添加计数）。然后，我们循环分类法中的每个类别，并应用正则表达式来查找空格，并将其替换为“-”以匹配该类别的子句，最后在末尾添加一个空格，这样我们就可以应用一个投资组合项目有多个类别。

最后，我们将确保增加计数并为每个投资组合项目提供唯一的参考。我们需要在结束循环之前添加以下代码：

<?php $count++; ?>
Copier après la connexion

显示投资组合的最终代码

<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>
Copier après la connexion

第 3 步 jQuery 和 Quicksand

我们现在正在取得进展，但在继续之前我们需要下载一些 jQuery 脚本。我们需要下载以下脚本：

  • jQuery 1.7（WordPress 3.3.1 附带的版本）
  • Quicksand 插件（来自 GitHub 的最新版本）
  • 缓动插件（版本1.3）

我们还需要创建一个 JavaScript 文件来处理我们将很快编写的所有自定义 jQuery。因此，让我们创建一个名为 jquery.custom.js 的空白 JavaScript 文件。现在我们已经拥有了所有必要的脚本，让我们打开 functions.php 并创建一个名为 register_js 的空白函数。一旦我们有了空白函数，我们将使用 wp_register_script 和 wp_enqueue_script 方法插入脚本。首先，我们必须检查我们是否不在管理员中，以确保脚本仅在前端加载。将以下代码插入到我们的函数中：

// 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' );
	}
}
Copier après la connexion

首先，使用wp_register_script，我们指定一个句柄作为第一个参数以供在排队脚本时参考，然后将脚本的源链接添加为我们的第二个参数（这适用于脚本的每次注册） 。我们还指定 jquery 作为依赖项，以便在将脚本排入队列时加载 WordPress 包含的 jQuery 版本。

注册完所有脚本后，我们将使用 wp_enqueue_script 将它们排入队列。我们传递注册时使用的所有句柄作为引用来排队我们的脚本。最后，我们需要通过在 functions.php 文件中添加以下代码来初始化我们的函数：

add_action('init', 'register_js');
Copier après la connexion

书写流沙

现在我们已经准备好了所有脚本，我们可以开始编写 jQuery 自定义脚本来处理流沙。让我们打开 jquery.custom.js 脚本，并通过插入以下代码来设置环境：

jQuery(document).ready(function() {

	// We will insert our quicksand script in here

}); // END OF DOCUMENT
Copier après la connexion

现在我们有了脚本结构，我们将创建一个名为 portfolio_quicksand 的函数，并且仅在 Quicksand 插件存在时才执行。

function portfolio_quicksand() {

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

}

if(jQuery().quicksand) {

	portfolio_quicksand();

}
Copier après la connexion

我将把以下内容分解为更小的步骤，以便您了解创建流沙投资组合时发生的所有事情。让我们从设置变量开始。将以下代码插入到我们的 portfolio_quicksand 函数中：

var $filter;
var $container;
var $containerClone;
var $filterLink;
var $filteredItems;
Copier après la connexion

我们将更频繁地使用这些变量，因此这始终是为变量设置奠定坚实基础的好方法。接下来我们将分配变量：

$filter = $('.filter li.active a').attr('class');
$filterLink = $('.filter li a');
$container = $('ul.filterable-grid');
$containerClone = $container.clone();
Copier après la connexion

我们首先将过滤器设置为投资组合页面模板中的无序列表类。其次，我们设置一个filterLink；这将充当我们在过滤器中单击的项目。然后我们需要分配我们的投资组合项目的容器，最后我们需要容器的克隆版本，以使用 Quicksand 操作数据。

接下来，我们将编写点击函数，因此当用户选择一个类别时，应该操作容器并显示内容的输出。让我们首先调用 filterLink 上的点击函数：

$filterLink.click(function(e) {

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

});
Copier après la connexion

现在让我们处理列表元素的活动状态。我们首先删除具有当前活动状态的任何类，然后搜索过滤器并将过滤器拆分为单独的项目，最后将活动类应用于单击的项目（类别）：

	$('.filter li').removeClass('active');
	
	$filter = $(this).attr('class').split(' ');
			
	$(this).parent().addClass('active');
Copier après la connexion

这在设计过滤器样式时会有所帮助，因为您将能够在用户选择类别时提供活动状态。

接下来，我们将处理数据过滤的条件。我们首先检查是否已选择全部。如果选择了全部，则显示容器内的所有元素，否则显示容器内已被过滤器选择的项目。

以前，当我们创建投资组合页面模板时，我们为每个投资组合项目分配了 data-type，我们将在此处使用它作为参考键来查找所选数据。

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

最后，我们调用 Quicksand 方法，并传递 filteredItems 和所有动画选项：

	$container.quicksand($filteredItems, 
	{
		duration: 750,
		easing: 'easeInOutCirc',
		adjustHeight: 'dynamic' 
	});
Copier après la connexion

流沙的最终代码

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' 
		});
	});
}
Copier après la connexion

第 4 步灯箱集成（额外）

令人惊奇的是，您现在应该拥有一个功能齐全的流沙投资组合，但我们不能仅限于此。我要添加一个额外的功能，这是完全可选的，但它可能成为我最喜欢的功能，那就是灯箱。我们将使用名为 PrettyPhoto 的 jQuery 插件来集成 Lightbox。

我们要做的第一件事是下载 PrettyPhoto 插件。

  • PrettyPhoto v3（或最新版本）

下载 PrettyPhoto 文件后，我们将首先复制 PrettyPhoto 图像，该图像位于 images 文件夹中，然后您需要复制标题为 PrettyPhoto 的文件夹> 进入我们的主题。我们还需要复制 CSS 和 PrettyPhoto 的 JavaScript 文件，因此让我们将它们复制到主题中的相应文件夹中。

现在我们已经准备好了所有文件，我们需要在主题中初始化它们。在我们的 functions.php 文件中，我们将创建另一个函数来处理我们的样式，我们将调用该函数 register_css。然后我们将注册我们的样式并将我们的样式排入队列，从而将以下代码插入到您的 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' );
Copier après la connexion

我们已准备好所有文件，并且它们正在由我们的主题初始化。现在我们需要利用它并将 Lightbox 实现到我们的主题中。让我们打开 portfolio.php（作品集页面模板）并向我们的特色图片添加一些代码。

首先，我们需要获取已设置的特色图片的大图。当用户单击图像并加载 PrettyPhoto 时，这将充当全尺寸图像。在 WordPress 循环中，我们需要插入以下代码：

<?php
	$large_image = wp_get_attachment_image_src( get_post_thumbnail_id(get_the_ID()), 'fullsize', false, '' );
	$large_image = $large_image[0];
?>
Copier après la connexion

我们插入的代码将在循环中查找当前帖子，并找到图像的原始来源，然后找到图像的全尺寸版本。返回全尺寸图像后，我们将强制将图像存储在数组索引 0 中。这用于不覆盖或与全尺寸图像重复。

一旦我们可以访问完整尺寸的图像，我们现在将在我们的特色图像上初始化 PrettyPhoto。以下代码会将全尺寸图像链接到投资组合项目的特色图像，并将引用传递给 PrettyPhoto，将您创建特色图像的代码替换为以下内容：

<a rel="prettyPhoto[gallery]" href="<?php  echo $large_image ?>"><?php the_post_thumbnail('portfolio');  ?></a>
Copier après la connexion

太棒了，我们已经准备好所有文件和脚本，我们已经获得了特色图像的全尺寸图像，并且我们已经使用 PrettyPhoto 将我们的特色图像引用到了我们的全尺寸图像。接下来，我们需要编写 JavaScript 以使灯箱出现并工作。

让我们回到 jquery.custom.js 文件并创建另一个空白函数来处理 PrettyPhoto：

function lightbox() {

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

}

if(jQuery().prettyPhoto) {
	lightbox();
}
Copier après la connexion

现在我们有了函数，我们将初始化 PrettyPhoto。我们通过在 Lightbox 函数中添加以下代码来实现此目的：

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

您可以在以下位置阅读 PrettyPhoto 在使用该插件时接受的所有参数的完整文档：PrettyPhoto jQuery Lightbox Clone

所以，一切都完成了！ Lightbox 实现到您的 WordPress 主题中，但等一下，让我猜猜您何时单击过滤器并使用 Quicksand；灯箱不再工作。这是因为我们需要更改 Quicksand 脚本并传递一小段代码，以确保 Lightbox 即使在我们过滤投资组合时也能正常工作。

因此，让我们通过将以下脚本添加到 jquery.custom.js 文件中的 portfolio_quicksand 函数来解决这个小问题：

$container.quicksand($filteredItems, 
	function () { lightbox(); }
);
Copier après la connexion

我们在这里所做的是再次调用 Quicksand 插件，并将此调用中的函数传递给我们的 Lightbox 函数。因此，每次 Quicksand 过滤内容时，都会调用 Lightbox 函数，将 PrettyPhoto 应用于每个图像。

第5步分页集成（额外）

许多人喜欢使用 Quicksand，但有些人喜欢在其作品集中同时使用 Quicksand 和分页。这是在您的投资组合中创建分页的另一个额外功能。我将使用 WordPress 插件：WP_PageNavi。

让我们首先安装并激活该插件。前往我们管理部分的插件->添加新页面并搜索WP_PageNavi，找到后单击立即安装并激活插件< /strong> 安装后。

Créez un portefeuille à absorption rapide à laide de WordPress

Créez un portefeuille à absorption rapide à laide de WordPress

现在我们已经完成了插件设置，让我们打开我们的作品集页面模板并对我们的文件进行一些修改。

首先，我们需要设置页面以允许分页。我们通过在查询数据库之前插入以下代码段来实现此目的：

$paged = get_query_var('paged') ? get_query_var('paged') : 1;
Copier après la connexion

初始化分页后，我们需要修改数据库查询。我们将 post_per_page 更改为一个数字，以显示每个页面上显示的最大帖子数。然后，我们将一个新参数传递给查询paged，并将其引用到我们的代码段，该代码段允许我们对页面进行分页，如以下代码所示：

$wpbp = new WP_Query(array( 'post_type' => 'portfolio', 'posts_per_page' =>'2', 'paged' => $paged ) );
Copier après la connexion

太棒了，我们有一个带分页的作品集。我们只需要一些控件来帮助我们进行每个页面的导航。以下代码检查是否安装了 WP_PageNavi 插件，然后使用作为参数传递的数据库查询来初始化 wp_pagenavi。然后，我们重置帖子数据，所有内容都正确分页。

<?php
	if(function_exists('wp_pagenavi'))
	{
		wp_pagenavi(array(  'query' => $wpbp ) );
		wp_reset_postdata();
	}
?>
Copier après la connexion

就是这样！您将拥有一个包含 Quicksand、Lightbox 和 Pagination 的功能齐全的产品组合。

结论

给自己一个鼓励吧！您已成功使用 WordPress 创建了流沙作品集。所有艰苦的工作都已完成，您可以将其与您开发的任何工作一起实施。

非常感谢您花时间阅读我的教程，希望对您有所帮助。欢迎大家留言评论，我会尽力协助和解答。

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!

Étiquettes associées：
Type de sédimentation : fait référence à la simplicité
source：php.cn
Article précédent：Comment optimiser les performances du plugin WordPress Article suivant：Comment ajouter la fonction de compte public WeChat au plug-in WordPress
Déclaration de ce site Web
Le contenu de cet article est volontairement contribué par les internautes et les droits d'auteur appartiennent à l'auteur original. Ce site n'assume aucune responsabilité légale correspondante. Si vous trouvez un contenu suspecté de plagiat ou de contrefaçon, veuillez contacter admin@php.cn
Derniers articles par auteur
Derniers numéros
function_exists() ne peut pas déterminer la fonction personnalisée Function test () {return true;} if (function_exists ('test')) {echo "le test est une ...
Depuis 2024-04-29 11:01:01
0
2
1621
Comment afficher la version mobile de Google Chrome Bonjour professeur, comment puis-je changer Google Chrome en version mobile ?
Depuis 2024-04-23 00:22:19
0
10
1778
La fenêtre enfant exploite la fenêtre parent, mais la sortie ne répond pas. Les deux premières phrases sont exécutables, mais la dernière ne peut pas être implémentée...
Depuis 2024-04-19 15:37:47
0
1
1515
Il n'y a aucune sortie dans la fenêtre parent document.onclick = function(){ window.opener.document.write('Je suis la sortie de la fenêt...
Depuis 2024-04-18 23:52:34
0
1
1425
Où sont les didacticiels sur la cartographie mentale CSS ? Didacticiel
Depuis 2024-04-16 10:10:18
0
0
1470
Rubriques connexes
Plus>
Recommandations populaires
Tutoriels populaires
Plus>
Tutoriels associés
Recommandations populaires
Derniers cours
Derniers téléchargements
Plus>
effets Web
Code source du site Web
Matériel du site Web
Modèle frontal
À propos de nous Clause de non-responsabilité Sitemap
Site Web PHP chinois：Formation PHP en ligne sur le bien-être public，Aidez les apprenants PHP à grandir rapidement！