时间:2019-08-02
编辑:网站制作公司
645
0
在帖子档案中使用特色图像是主题的常见功能,但有时您可能希望使用特色图像略有不同。偶尔我会在要显示的图像与帖子所在的类别相关而不是帖子本身的网站上工作。如果我可以将类别分配给每个图像,然后使用帖子显示该类别的特色图像,而不是将相同的特色图像添加到每个类别中的每个帖子,这将更加简单。
您可能希望执行此操作的示例包括:
当每个帖子都与品牌相关联并且您想要显示徽标时
当每个帖子与多个地点之一相关联并且您想要显示该地点的图像(或地图)时
当每个帖子与给定主题相关时(例如在学习网站上)并且您想要显示该主题的图标
当帖子是许多系列的一部分时(有时在本网站上就是这种情况)并且您想使用图像来识别每个系列
郑州网站设计在本教程中,我将使用我之前在两个教程中演示过的一些技术:
将类别应用于附件:我们需要这样做,以便每个类别都有自己的附件。
为类别创建“特色图像”:在本教程中,我演示了如何为类别创建“特色图像”,然后将其显示在类别存档中。本教程略有不同,因为我将在主博客页面上显示类别图像。
本教程将完成以下步骤:
注册附件的类别分类
设置类别并向其添加图像
在循环中,识别帖子所在的类别,然后运行查询以从该类别输出附件
注意:对于每个帖子,只会识别一个类别,并且对于每个类别,仅输出一个图像(最新的)。
我还将介绍如何将此技术用于其他存档页面,例如自定义帖子类型存档。
要学习本教程,您需要具备以下条件:
WordPress的开发安装
你可以编辑的主题(我将为Twenty 14创建一个子主题)
FTP访问(如果您在本地工作,则为MAMP或类似)
代码编辑器
要学习本教程,您需要创建或编辑主题。我将创建二十四主题的儿童主题。
这是我的样式表:
01 02 03 04 05 06 07 08 09 10 11 12 13 14 15 | /* Theme Name: Automatic Featured Image Based On Category Theme URI: http://code.tutsplus.com/tutorials/add-an-automatic-featured-image-to-blog-posts-based-on-category--cms-22664 Version: 1.0.0 Description: heme to accompany tutorial on adding category featured images to an archive page for tutsplus, at http://bit.ly/14cm0ya Author: Rachel McCollin Author URI: http://rachelmccollin.co.uk License: GPL-3.0+ License URI: http://www.gnu.org/licenses/gpl-3.0.html Domain Path: /lang Text Domain: tutsplus Template: twentyfourteen */ @import url('../twentyfourteen/style.css'); |
这将主题设定为Twenty Fourteen的儿童主题。如果您需要了解有关创建子主题的更多信息,请查看相关的Codex页面。
在学习本教程时,您还将functions.php为主题创建一个文件(或者如果您的主题中已有一个文件,则编辑现有index.php文件),并创建一个文件。
默认情况下,WordPress不允许您为附件分配类别,但这很容易更改。
如果您的主题还没有函数文件,请创建一个名为的文件functions.php并向其中添加以下内容:
01 02 03 04 05 06 07 08 09 10 11 12 | <?php /** * Add featured image to category. */ function tutsplus_add_attachments_to_categories() { register_taxonomy_for_object_type( 'category', 'attachment' ); } add_action( 'init' , 'tutsplus_add_attachments_to_categories' ); |
保存文件并转到您网站的媒体屏幕。您会看到类别已添加到媒体子菜单:
注意:有关详细信息,请参阅本教程。
我现在需要上传一些图像,并为每个图像分类。您上传的图片将取决于您网站的需求:我已经为我的类别使用了颜色,因此找到了一些以这些颜色为特色的图片。我已经分配了相关的类别,所以这就是我的媒体库的样子:
现在我将添加一些帖子并为其分配类别:
现在我们已经设置了帖子并且类别图像就位,我们需要编辑index.php文件以显示类别特色图像。
您需要编辑现有index.php文件或添加新文件。我创建了一个基于index.php模板文件和content.phpTwenty Fourteen主题的包含文件。现在它看起来像这样:
01 02 03 04 05 06 07 08 09 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 三十 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 | <?php /** * The primary template file. * * Based on the `index.php` file from TwentyFourteen, with an edited version of the `content.php` include file from that theme also included here. */ ?> <?php get_header(); ?> <div id="main-content" class="main-content"> <?php if ( is_front_page() && twentyfourteen_has_featured_posts() ) { // Include the featured content template. get_template_part( 'featured-content' ); } ?> <div id="primary" class="content-area"> <div id="content" class="site-content" role="main"> <?php if ( have_posts() ) { while ( have_posts() ) { the_post(); ?> <article id="post-<?php the_ID(); ?>" <?php post_class(); ?>> <?php twentyfourteen_post_thumbnail(); ?> <header class="entry-header"> <?php if ( in_array( 'category', get_object_taxonomies( get_post_type() ) ) && twentyfourteen_categorized_blog() ) { ?> <div class="entry-meta"> <span class="cat-links"><?php echo get_the_category_list( _x( ', ', 'Used between list items, there is a space after the comma.', 'twentyfourteen' ) ); ?></span> </div> <?php } ?> <?php the_title( '<h1 class="entry-title"><a href="' . esc_url( get_permalink() ) . '" rel="bookmark">', '</a></h1>' ); ?> </header> <div class="entry-content"> <?php the_content( __( 'Continue reading <span class="meta-nav">→</span>', 'twentyfourteen' ) ); wp_link_pages( array( 'before' => '<div class="page-links"><span class="page-links-title">' . __( 'Pages:', 'twentyfourteen' ) . '</span>', 'after' => '</div>', 'link_before' => '<span>', 'link_after' => '</span>', ) ); ?> </div> <?php the_tags( '<footer class="entry-meta"><span class="tag-links">', '', '</span></footer>' ); ?> </article> <?php } // Display previous / next post navigation. twentyfourteen_paging_nav(); } else { // If there is no content, include the "No posts found" template. get_template_part( 'content', 'none' ); } ?> </div> </div> <?php get_sidebar( 'content' ); ?> </div> <?php get_sidebar(); ?> <?php get_footer(); ?> |
要显示相关的类别图像,您需要确定当前帖子所属的类别。您需要在循环内执行此操作。
首先,如果您正在使用Twenty Fourteen,请删除输出帖子特色图像的功能。删除此行:
1 | <?php twentyfourteen_post_thumbnail(); ?> |
立即在开始<article>标记内添加以下内容:
1 2 3 4 五 | <?php // Find the first category the post is in. $categories = get_the_category(); $category = $categories[ 0 ]->term_id; |
这将创建一个名为变量的变量$category,,该变量的值是帖子所在的第一个类别的ID,使用该get_the_category()函数。
现在,您可以在查询的参数中使用此变量。在您刚添加的内容之后,添加以下内容:
1 2 3 4 五 6 | $args = array( 'cat' => $category, 'post_status' => 'inherit', 'post_type' => 'attachment', 'posts_per_page' => '1' ); |
这些参数意味着您的查询将只输出您已识别的类别中的一个附件。请注意,您必须使用'post_status'参数,因为附件默认为'post_status' => 'inherit',而不是'public'其他帖子类型。
现在添加查询本身:
01 02 03 04 05 06 07 08 09 10 11 12 13 14 15 16 17 18 19 20 21 22 23 | $query = new WP_Query( $args ); if ( $query->have_posts() ) { while ( $query->have_posts() ) { $query->the_post(); ?> <div class="category-featured-image"> <?php echo wp_get_attachment_image( $post->ID, 'thumbnail' ); ?> </div> <?php } } // Reset postdata to restore ordinal query. wp_reset_postdata(); ?> |
这会将图像放在带有category-featured-image类的div中,您可以将其用于样式。然后使用该wp_get_attachment_image()功能显示图像。
现在,如果您刷新博客的主页,您将看到显示的图像:
现在有太多的空白空间,所以让我们添加一些造型。
打开主题的样式表,添加您想要的图像样式。我添加了以下内容:
1 2 3 4 五 6 7 8 9 | .category-featured-image { float: left; margin: 10px 2%; } .blog .entry-header .entry-title, .blog .entry-header .entry-meta { clear: none; } |
这会将图像带到帖子的左侧:
您可以将此技术与其他内容类型一起使用。例如:
使用自定义帖子类型,您将archive-$posttype.php为该帖子类型创建一个模板文件,其中包含与上面类似的循环。
如果您使用的是自定义分类而不是类别,'attachment'则可以在首次注册时将帖子类型添加到分类法注册的帖子类型中。然后,您将使用分类法参数替换get_the_category()函数get_the_terms()和查询的类别参数。
您可以通过将一个分类中的图像与另一个分类的归档模板上的帖子一起显示来组合两个分类法,也可以将图像链接到其分类术语的归档页面。
archive.php如果您的主题有一个,您可以在文件中使用与上述类似的技术,这样档案中的帖子也会显示一个类别特色图像。
如果要组合上述一个或多个,可以使用循环创建包含文件(包括类别特色图像),并在相关模板文件中调用该文件。
郑州网站设计正如我在本教程开头所概述的那样,在某些情况下,您可能希望显示与帖子所属类别相关的图像,而不是为每个帖子显示特色图像。
在本教程中,您已经学习了如何执行此操作,方法是向附件添加类别,为循环中的每个帖子标识第一个类别,然后创建查询以输出该类别的图像。
3
s后返回登录3
s后返回登录