根据类别向博客文章添加自动的“特色图片”

编程入门 行业动态 更新时间:2024-10-08 00:29:58

根据<a href=https://www.elefans.com/category/jswz/34/1771225.html style=类别向博客文章添加自动的“特色图片”"/>

根据类别向博客文章添加自动的“特色图片”

您将要创造的

在帖子存档中使用特色图片是主题的常见功能,但是有时您可能希望使用特色图片有些不同。 有时,我在一些网站上工作,这些网站上要显示的图像与帖子所属的类别有关,而与帖子本身无关。 如果不将相同的特色图片添加到每个类别中的每个帖子,那么如果我可以将类别分配给我的每个图像,然后显示带有该帖子的类别的特色图片,则会更加简单。

何时需要执行此操作的示例包括:

  • 当每个帖子都与一个品牌相关联并且您想要显示徽标时
  • 当每个帖子与多个地点之一相关联并且您想要显示该地点的图像(或地图)时
  • 当每个帖子都与给定主题相关(例如在学习站点上)并且您要显示该主题的图标时
  • 当帖子是多个系列的一部分时(本网站有时如此),而您想使用图像来标识每个系列

在本教程中,我将使用在之前的两个教程中已经演示的一些技术:

  • 将类别应用于附件 :我们需要这样做,以便每个类别都有自己的附件。
  • 为类别创建“功能图像” :在本教程中,我演示了如何为类别创建“功能图像”并将其显示在类别存档中。 本教程稍有不同,因为我将在博客主页面上显示类别图像。

本教程将通过以下步骤工作:

  1. 注册附件的类别分类法
  2. 设置类别并向其中添加图像
  3. 在循环中,确定帖子所属的类别,然后运行查询以输出该类别的附件

注意:对于每个帖子,仅会识别一个类别,对于每个类别,只会输出一个图像(最新)。

我还将研究如何将这种技术应用于其他存档页面,例如自定义帖子类型的存档。

您需要什么

要遵循本教程,您需要以下内容:

  • WordPress的开发安装
  • 您可以编辑的主题(我将为“二十四”创建一个子主题)
  • FTP访问(如果在本地工作,则为MAMP或类似功能)
  • 代码编辑器

设置主题文件

要遵循本教程,您需要创建或编辑主题。 我将创建“二十十四”主题的子主题。

这是我的样式表:

/*
Theme Name: Automatic Featured Image Based On Category
Theme URI: 
Version: 1.0.0
Description: heme to accompany tutorial on adding category featured images to an archive page for tutsplus, at 
Author: Rachel McCollin
Author URI: 
License: GPL-3.0+
License URI: .0.html
Domain Path: /lang
Text Domain: tutsplus
Template: twentyfourteen
*/@import url('../twentyfourteen/style.css');

这将主题设置为二十十四岁的儿童主题。 如果您需要更多有关创建子主题的信息,请查看相关的Codex页面 。

在学习本教程时,您还将为主题创建一个functions.php文件(或如果主题中已有一个,则对其进行编辑),并创建一个index.php文件。

注册附件类别

默认情况下,WordPress不允许您为附件分配类别,但这很容易更改。

如果您的主题还没有功能文件,请创建一个名为functions.php文件,并在其中添加以下内容:

<?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文件或添加一个新文件。 我已经基于index.php模板文件和content.php包含文件来自第二十四个主题创建了一个文件。 现在看起来像这样:

<?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"><?phpif ( 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"><?phpif ( 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"><?phpthe_content( __( 'Continue reading <span class="meta-nav">&rarr;</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(); ?>

确定当前职位的类别

要显示相关的类别图像,您需要确定当前帖子所在的类别。您需要在循环中执行此操作。

首先,如果您正在使用二十十四岁,则删除输出帖子特色图像的功能。 删除此行:

<?php twentyfourteen_post_thumbnail(); ?>

在开始的<article>标记内,立即添加以下内容:

<?php// Find the first category the post is in.
$categories = get_the_category();
$category = $categories[ 0 ]->term_id;

这将使用get_the_category()函数创建一个名为$category,的变量$category,其值是帖子所在的第一个类别的ID。

为查询创建参数

现在,您可以在查询的参数中使用此变量。 在您刚刚添加的内容下方,添加以下内容:

$args = array('cat' => $category,'post_status' => 'inherit','post_type' => 'attachment','posts_per_page' => '1'
);

这些参数意味着您的查询将仅输出您已经确定的类别中的一个附件。 请注意,您必须使用'post_status'参数,因为附件默认为'post_status' => 'inherit' ,而不是像其他帖子类型一样为'public'

现在添加查询本身:

$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()函数显示图像。

现在,如果刷新博客的主页,您将看到显示的图像:


现在有太多的空白空间,所以让我们添加一些样式。

造型图像

打开主题的样式表,然后添加要给图片提供的任何样式。 我添加了以下内容:

.category-featured-image {float: left;margin: 10px 2%;
}.blog .entry-header .entry-title,
.blog .entry-header .entry-meta {clear: none;
}

这会将图像带到帖子的左侧:


使此技术适用于其他内容类型

您可以将这种技术用于其他内容类型。 例如:

  • 使用自定义帖子类型,您将archive-$posttype.php帖子类型创建一个archive-$posttype.php模板文件,其循环与上述类似。
  • 如果您使用的是自定义分类法而不是类别,则可以在首次注册分类法时将'attachment'帖子类型添加到分类法所注册的帖子类型中。 然后,将get_the_category()函数替换为get_the_category()get_the_terms()查询的类别参数替换为分类法参数。
  • 您可以通过将一个分类法中的图像与存档模板上的帖子一起显示另一分类法中的图像来组合两个分类法,也许可以将图像链接到其分类法术语的存档页面。
  • 如果您的主题有一个主题,则可以在archive.php文件中使用与上述类似的技术,这样,归档中的帖子也将显示类别特色图片。
  • 如果要合并以上的一个或多个,则可以在循环中创建一个包含文件(包括类别特征图像),然后在相关模板文件中调用该文件。

摘要

正如我在本教程开始时所概述的那样,在某些情况下,您需要显示与帖子所属类别相关的图像,而不是为每个帖子显示特色图片。

在本教程中,您学习了如何执行此操作,方法是为附件添加类别,为循环中每个帖子标识第一个类别,然后创建查询以输出该类别的图像。

翻译自:

更多推荐

根据类别向博客文章添加自动的“特色图片”

本文发布于:2024-03-06 16:38:10,感谢您对本站的认可!
本文链接:https://www.elefans.com/category/jswz/34/1715817.html
版权声明:本站内容均来自互联网,仅供演示用,请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系,我们将在24小时内删除。
本文标签:类别   特色   文章   图片   博客

发布评论

评论列表 (有 0 条评论)
草根站长

>www.elefans.com

编程频道|电子爱好者 - 技术资讯及电子产品介绍!