创建WordPress图片库：对插件进行编码

最新推荐文章于 2024-09-26 19:15:00 发布

cunjie3951

最新推荐文章于 2024-09-26 19:15:00 发布

阅读量282

点赞数

文章标签： python java php css html

人们喜欢图片。他们喜欢看着他们，喜欢点击它们。因此，在网站的导航中使用它们很有意义。

您可能已经在存档页面中使用了精选图片，从而使用户可以更深入地了解帖子的内容，并使存档页面看起来更好。漂亮的可点击大图片还使导航到页面或发布的过程更加直观。

但是在其他地方，您可以使用特色图像来辅助导航到WordPress网站的某些部分。在这个分为两部分的教程中，我们将向您展示如何创建一个图像网格，该图像网格链接到站点中给定页面的子页面或当前页面的子页面。

在第一部分中，我将演示如何编写PHP来获取页面并在链接内输出页面的标题和特色图像。在第二部分中，伊恩·耶茨（Ian Yates）将向您展示如何添加CSS，以将列表变成漂亮的网格。

您需要什么

要继续学习本教程，您需要满足以下条件：

WordPress的开发安装-在对其进行测试之前，请勿将其添加到实时站点中。
具有可用于添加内容或进行编辑的动作挂钩的主题。如果它是不带钩子的第三方主题，请创建一个子主题并进行编辑。
代码编辑器。

确定您的方法

首先要做的是确定要输出的页面。在本教程中，我将演示两个选项：

当前页面的子页面列表，带有图像。
特定页面的子页面列表，带有图像。它可以显示在您网站的任何地方，而不仅仅是父页面。

入门

两种方法的起点都是相同的。

首先在wp-content / plugins文件夹中创建一个插件。您需要为插件创建一个文件夹，因为在本教程的第二部分中，您将添加一个样式表以及主插件文件。

拥有文件夹后，为您的代码创建一个PHP文件。我叫我tutsplus -child-pages.php 。

现在设置您的插件文件，并在顶部添加注释文字：

/**
 * Plugin Name:  Tutsplus List Child Pages
 * Plugin URI:   https://github.com/rachelmccollin/tutsplus-list-child-pages
 * Description:  Output a list of children of the current page or a specific page with featured images.
 * Author:       Rachel McCollin
 * Author URI:   https://rachelmccollin.com
 * Version:      1.0
 * Text Domain:  tutsplus
 * License:      GPLv2.0+
 */

这将告诉WordPress您的插件是什么以及插件的作用。

现在，如果您还没有，请继续创建一些页面。我将创建一些带有子页面的页面，包括“ 位置”页面作为特定页面列表的父页面。

这是我在管理员页面：

现在是时候编写函数以输出列表了。

输出当前页面的子代列表

让我们从这个选项开始。这将输出当前页面所有子项的列表，包括图像，链接和标题。

如果您的网站具有分层的页面结构，并且您希望鼓励访问顶层页面（或中层页面，如果有的话）的人访问结构中位于其下方的页面，则这是一种有用的方法。

首先在插件文件中创建一个函数：

function tutpslus_list_current_child_pages() {

}

现在，在该函数中，检查我们是否在页面上。其他所有内容都将放入该条件标记中：

if ( is_page() ) {

}

接下来，设置$post全局变量并定义父页面：

global $post;

// define the page they need to be children of
$parentpage = get_the_ID();

之后，定义get_pages()函数的参数：

// define args
$args = array(
    'parent' => $parentpage,
	'sort_order' => 'ASC',
	'sort_column' => 'menu_order',
);

$children = get_pages( $args );

您可能需要更改其中一些参数。我已经使用menu_order进行排序，因此可以手动调整它，但是您可以使用日期，标题或任何其他可排序参数。

下一个任务是使用该get_pages()函数的结果来建立一个foreach循环：

if ( $children ) { ?>

    <div class="child-page-listing">
		
		<h2><?php _e( 'Learn More', 'tutsplus' ); ?></h2>
	
		<?php //foreach loop to output
		foreach ( $children as $post ) {
			
			setup_postdata( $post ); ?>
			
			<article id="<?php the_ID(); ?>" class="child-listing" <?php post_class(); ?>>
				
				<?php if ( has_post_thumbnail() ) { ?>
				
					<a class="child-post-title" href="<?php the_permalink(); ?>">
						<?php the_title(); ?>
					</a>
					
					<div class="child-post-image">	
						<a href="<?php the_permalink(); ?>">
							<?php the_post_thumbnail( 'medium' ); ?>
						</a>
					</div>	
			
				<?php }	?>
			
			</article>	
			
		<?php } ?>
		
	</div>
	
<?php }

让我们来看一下这段代码：

首先，我们要检查get_pages()函数是否返回了任何结果，即是否填充了$children 。
然后，我们为每个子页面启动一个foreach循环，作为$post变量。
在该循环中，我们打开一个article元素。
我们检查是否有精选图片（或发布缩略图），并将其输出到页面链接中。
然后，我们在页面链接的内部输出页面标题。
最后，我们关闭元素和条件检查以及foreach循环本身。

我已经为每个元素添加了CSS类，因此我们可以在本教程的第二部分中设置样式。

将代码添加到主题

现在您有了自己的功能。下一步是将其添加到主题中，以便可以将其输出到正确的位置。

如果您的主题具有动作挂钩，则可以将功能挂钩到其中之一。因此，如果我的代码具有after_content挂钩，则可以在函数之外的插件中添加以下代码：

add_action( 'after_content', 'tutpslus_list_current_child_pages' );

但是，在此演示中，我使用的是“二十一十六”主题，它没有这样的动作挂钩。因此，我需要直接在模板文件中添加函数。

如果您正在使用自己的主题，则可以在希望显示列表的位置将其添加到page.php文件中。

但是，如果您使用的是第三方主题，则不要对其进行编辑，因为所有更改将在下次更新主题时丢失。而是创建一个子主题。在新的子主题中，从您的父主题创建page.php文件的副本（或page.php的循环文件的副本），然后进行编辑。

确定您要在列表中输出列表的位置，并将其添加到主题模板文件中：

tutpslus_list_current_child_pages();

我将其添加到子主题的page.php文件中的循环之后。

现在，让我们看一下该站点。这是我的关于我们页面及其子页面：

这样便可以在当前页面的子页面上添加链接。但是，如果您想向一个特定页面的子级添加链接，该怎么办？接下来让我们解决。

输出特定页面的子代列表

此代码几乎与当前页面的子代代码相同。区别在于定义运行get_pages()时将使用的父页面。

在插件文件中复制第一个函数，然后编辑函数名称，以使它们不同。

找到存在于页面上的条件检查并将其删除。不要忘记删除该支票的右括号。

现在找到以下内容：

$parentpage = get_the_ID();

替换为：

$page = get_page_by_path( 'locations', OBJECT, 'page' );
    
$parentpage = $page->ID;

您会看到它使用了get_page_by_path()函数，其第一个参数是目标页面的get_page_by_path() 。编辑此内容，以便它使用您要在站点中定位的页面的标签。

在此函数中编辑CSS类也是一个好习惯，因此它们与第一个函数中CSS类是不同的。这样，如果同时使用两种样式，则可以为每种样式使用不同的样式。

完成这些编辑后，以下是完整的功能：

function tutpslus_list_locations_child_pages() {
    			
	global $post;
	
	// define the page they need to be children of
	$page = get_page_by_path( 'locations', OBJECT, 'page' );
    
    $parentpage = $page->ID;
    
    // define args
	$args = array(
		'parent' => $parentpage,
		'sort_order' => 'ASC',
		'sort_column' => 'menu_order',
	);
	
	//run get_posts
	$children = get_pages( $args );
	
	if ( $children ) { ?>
	
		<div class="child-page-listing">
			
			<h2><?php _e( 'Our Locations', 'tutsplus' ); ?></h2>
		
			<?php //foreach loop to output
			foreach ( $children as $post ) {
				
				setup_postdata( $post ); ?>
				
				<article id="<?php the_ID(); ?>" class="location-listing" <?php post_class(); ?>>
					
					<?php if ( has_post_thumbnail() ) { ?>
					
						<a class="location-title" href="<?php the_permalink(); ?>">
							<?php the_title(); ?>
						</a>
						
						<div class="location-image">	
							<a href="<?php the_permalink(); ?>">
								<?php the_post_thumbnail( 'medium' ); ?>
							</a>
						</div>	
				
					<?php }	?>
				
				</article>	
				
			<?php } ?>
			
		</div>
		
	<?php }
			
}

将代码添加到主题

再一次，您需要将代码添加到主题中。在这种情况下，您不仅希望列表在静态页面中输出，而且您可能希望将其放在其他位置。

如果您的主题具有动作挂钩，则可以使用插件之前的方式类似于其中之一：

add_action( 'before_footer', 'tutpslus_list_locations_child_pages' );

我将其添加到主题的页脚中，再次在我的子主题中创建footer.php的副本并进行编辑。

这是我的footer.php文件中的代码，直接在footer元素的内部：

<?php tutpslus_list_locations_child_pages(); // list locations pages ?>

这是我的页脚中的列表输出。这是在单个帖子的底部：

提示：如果同时运行两个功能，则可能要避免在“ 位置”页面中输出此列表，以避免重复。 尝试添加使用页面ID的条件标签来实现。

下一步

现在，您有两个页面列表：当前页面的一个子页面和特定页面的另一个子页面。

翻译自: https://code.tutsplus.com/tutorials/create-a-wordpress-image-gallery-code-the-plugin--cms-32093

cunjie3951

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
复制链接

分享到 QQ

分享到新浪微博

扫一扫