search
HomeCMS TutorialWordPressCreating 'Featured Images” in WordPress: Taking Attachments to the Next Level

在 WordPress 中创建“特色图片”:将附件提升到新的水平

In this series, I introduce:

  • Assign categories and taxonomies to attachments,
  • Query media files by category so you can output them in a custom loop,
  • Use the image classification query to display it on the archive page,
  • Add an image to a category or taxonomy term as a "featured image" for the category or term

In Part 1, I demonstrated how to create a new taxonomy for attachments. In Part 2 I showed you how to create a custom template file for your documents and add a loop to display links to media files for each document, and in Part 3 I showed you how to create a custom template file for your documents and in Part 3 I showed you how to create a custom template file for your documents. # Created a custom template file taxonomy that displays all images with a given term as a gallery style archive page. In this final part, I'll demonstrate something slightly different: how to assign a category to an image, and then edit the category's archive template to display that image as a "Featured Image" for that category. You can also do this with tags or taxonomy terms using a very similar technique.

In this tutorial, I will create a theme that will be a child theme of Twenty Four. The theme will include a function file and a custom template file for the category archive. You can download the theme in a code package.

What do you need

To follow this tutorial, you need the following:

Development Installation of WordPress
  • FTP access (or MAMP or similar if you're working locally)
  • Code Editor
1.

Apply categories to attachments By default, WordPress does not allow you to assign categories and tags to attachments, which you will need to be able to do for this tutorial. Fortunately, this problem is easy to fix, as I demonstrated in my previous tutorial on assigning categories and tags to attachments.

Note: This technique works with tags and categories, if you do this with your own taxonomy you will need to specify the attachment as the post type to which your taxonomy applies when registering. You can do this by following part one of this series.

In your theme, create a file called

functions.php

and add the following code to it: <pre class='brush:php;toolbar:false;'>&lt;?php // add categories to attachments function wptp_add_categories_to_attachments() { register_taxonomy_for_object_type( 'category', 'attachment' ); } add_action( 'init' , 'wptp_add_categories_to_attachments' ); ?&gt; </pre> This uses the

register_taxonomy_for_object_type()

function to add a category to the attachment. Now, when you view the Media Library screen, you will see that categories are enabled. The next step is to add some images - just one image per category. You'll also want to add another category called "Featured" and make sure every image you want to use in this way falls into that category as well.

Below you can see a sample media editing screen showing the categories:

在 WordPress 中创建“特色图片”:将附件提升到新的水平Creating Featured Images” in WordPress: Taking Attachments to the Next Level 在 WordPress 中创建“特色图片”:将附件提升到新的水平 You can also view all images that I assigned the correct category:

在 WordPress 中创建“特色图片”:将附件提升到新的水平Creating Featured Images” in WordPress: Taking Attachments to the Next Level 在 WordPress 中创建“特色图片”:将附件提升到新的水平Finally, I'm going to add some dummy posts to my site and put them into relevant categories to have some content to show up in my archive pages:
在 WordPress 中创建“特色图片”:将附件提升到新的水平Creating Featured Images” in WordPress: Taking Attachments to the Next Level在 WordPress 中创建“特色图片”:将附件提升到新的水平

2.创建类别模板

下一步是创建自定义类别模板。由于我的主题是二十四的子主题,我将复制该主题的 category.php 文件并将其复制到我的子主题,并对开头注释进行一些更改:

<?php  
/**   
 * The template for displaying Category pages   
 * Custom template which displays a featured image first.   
 * Supports Part 4 of tutorial series on Advanced Use of Images in WordPress for WPTutsplus   
 */ get_header();  ?>
<section class="content-area" id="primary">
  <div class="site-content" id="content" role="main"><?php if ( have_posts() ) : ?>
    <header class="archive-header">
      <h1 class="archive-title"></h1>
        <?php 
          // Show an optional term description.
          $term_description = term_description();
          if ( ! empty( $term_description ) ) :
            printf( '<div class="taxonomy-description">%s</div>', $term_description );
          endif;
        ?>
    </header><!-- .archive-header -->

<?php   
// Start the Loop. 					   
while ( have_posts() ) : the_post(); 					     
      /* 					       
       * Include the post format-specific template for the content. If you want to 					            
       * use this in a child theme, then include a file called called content-___.php 					            
       * (where ___ is the post format) and that will be used instead. 					       
       */ 					     
      get_template_part( 'content', get_post_format() ); 					   
    endwhile; 			
		   
    // Previous/next page navigation. 					   
    twentyfourteen_paging_nav();			   
  else : 					     
    // If no content, include the "No posts found" template. 					              
    get_template_part( 'content', 'none' ); 				   
  endif;    
  ?></div><!-- #content -->
</section><!-- #primary -->

<?php  get_sidebar( 'content' ); get_sidebar(); get_footer(); ?>

3.向类别模板添加自定义查询

在主循环上方,使用 WP_Query 添加自定义循环。在结束 标记后插入以下内容:

<?php  
// display a featured image for the category  
// identify the current category  
$currentcat = get_queried_object(); 
$currentcatname = $currentcat->slug;
?>

使用 get_queried_object() 标识当前显示的类别。

下面,使用 WP_Query 定义自定义查询的参数:

<?php    
// define query arguments for the featured image    
$args = array( 	     
    'post_type' => 'attachment',
    'post_status' => 'inherit',
    'category_name' => $currentcatname,
  );
  $query = new WP_Query( $args );
?>

这标识当前类别以及“特色”类别中的所有附件。请注意,由于 WordPress 设置附件帖子状态的方式,您需要包含 'post_status' => 'inherit' 作为参数。

现在在此下方添加循环:

<?php  
  // The Loop  while ( $query->have_posts() ) : $query->the_post();
  // define attributes for image display
  $imgattr = array(
		'alt'   => trim( strip_tags( get_post_meta( $attachment_id, '_wp_attachment_image_alt', true ) ) ),
	);

  // output the image ?>
  <div class="category-image"></div>
<?php 
endwhile;  
// reset the query so the default query can be run  
wp_reset_postdata(); ?>

确保您不要错过最后的 wp_reset_postdata() ,否则类别存档的主查询将无法工作。

添加完所有这些后,保存您的类别模板并查看您的类别存档页面之一。它应该类似于本教程开头的屏幕截图。

摘要

在这个由四个教程组成的系列中,我演示了一些在 WordPress 中处理图像的高级技术。其中包括:

  • 注册专门用于附件的分类
  • 使用自定义模板创建 dosucmtn 列表页面
  • 再次使用自定义模板创建图库页面以显示给定类别中的图像
  • 为每个类别创建“特色图片”并将其显示在类别存档页面上。

正如您所见,您可以在 WordPress 中对图像和媒体执行更多操作,而不仅仅是将它们附加到帖子或将它们用作特色图像。只要发挥一点想象力,您就可以像任何其他帖子类型一样查询它们,并输出文档或显示图像的链接。

The above is the detailed content of Creating 'Featured Images” in WordPress: Taking Attachments to the Next Level. For more information, please follow other related articles on the PHP Chinese website!

Statement
The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn
How does WordPress compare to other popular CMS platforms?How does WordPress compare to other popular CMS platforms?May 02, 2025 am 12:18 AM

WordPressexcelsineaseofuseandadaptability,makingitidealforbeginnersandsmalltomedium-sizedbusinesses.1)EaseofUse:WordPressisuser-friendly.2)Security:Drupalleadswithstrongsecurityfeatures.3)Performance:GhostoffersexcellentperformanceduetoNode.js.4)Scal

Can you use WordPress to build a membership site?Can you use WordPress to build a membership site?May 01, 2025 am 12:08 AM

Yes,youcanuseWordPresstobuildamembershipsite.Here'show:1)UsepluginslikeMemberPress,PaidMemberSubscriptions,orWooCommerceforusermanagement,contentaccesscontrol,andpaymenthandling.2)Ensurecontentprotectionwithupdatedpluginsandadditionalsecuritymeasures

Does WordPress require coding knowledge to use as a CMS?Does WordPress require coding knowledge to use as a CMS?Apr 30, 2025 am 12:03 AM

You don't need programming knowledge to use WordPress, but mastering programming can improve the experience. 1) Use CSS and HTML to adjust the theme style. 2) PHP knowledge can edit topic files and add functions. 3) Custom plug-ins and meta tags can optimize SEO. 4) Pay attention to backup and use of sub-topics to prevent update issues.

What are the security considerations when using WordPress?What are the security considerations when using WordPress?Apr 29, 2025 am 12:01 AM

TosecureaWordPresssite,followthesesteps:1)RegularlyupdateWordPresscore,themes,andpluginstopatchvulnerabilities.2)Usestrong,uniquepasswordsandenabletwo-factorauthentication.3)OptformanagedWordPresshostingorsecuresharedhostingwithawebapplicationfirewal

How does WordPress compare to other website builders?How does WordPress compare to other website builders?Apr 28, 2025 am 12:04 AM

WordPressexcelsoverotherwebsitebuildersduetoitsflexibility,scalability,andopen-sourcenature.1)It'saversatileCMSwithextensivecustomizationoptionsviathemesandplugins.2)Itslearningcurveissteeperbutofferspowerfulcontroloncemastered.3)Performancecanbeopti

5  WordPress Plugins for Developers To Use in 20255 WordPress Plugins for Developers To Use in 2025Apr 27, 2025 am 08:25 AM

Seven Must-Have WordPress Plugins for 2025 Website Development Building a top-tier WordPress website in 2025 demands speed, responsiveness, and scalability. Achieving this efficiently often hinges on strategic plugin selection. This article highlig

What would you use WordPress for?What would you use WordPress for?Apr 27, 2025 am 12:14 AM

WordPresscanbeusedforvariouspurposesbeyondblogging.1)E-commerce:WithWooCommerce,itcanbecomeafullonlinestore.2)Membershipsites:PluginslikeMemberPressenableexclusivecontentareas.3)Portfoliosites:ThemeslikeAstraallowstunninglayouts.Ensuretomanageplugins

Is WordPress good for creating a portfolio website?Is WordPress good for creating a portfolio website?Apr 26, 2025 am 12:05 AM

Yes,WordPressisexcellentforcreatingaportfoliowebsite.1)Itoffersnumerousportfolio-specificthemeslike'Astra'foreasycustomization.2)Pluginssuchas'Elementor'enableintuitivedesign,thoughtoomanycanslowthesite.3)SEOisenhancedwithtoolslike'YoastSEO',boosting

See all articles

Hot AI Tools

Undresser.AI Undress

Undresser.AI Undress

AI-powered app for creating realistic nude photos

AI Clothes Remover

AI Clothes Remover

Online AI tool for removing clothes from photos.

Undress AI Tool

Undress AI Tool

Undress images for free

Clothoff.io

Clothoff.io

AI clothes remover

Video Face Swap

Video Face Swap

Swap faces in any video effortlessly with our completely free AI face swap tool!

Hot Tools

VSCode Windows 64-bit Download

VSCode Windows 64-bit Download

A free and powerful IDE editor launched by Microsoft

MantisBT

MantisBT

Mantis is an easy-to-deploy web-based defect tracking tool designed to aid in product defect tracking. It requires PHP, MySQL and a web server. Check out our demo and hosting services.

PhpStorm Mac version

PhpStorm Mac version

The latest (2018.2.1) professional PHP integrated development tool

Zend Studio 13.0.1

Zend Studio 13.0.1

Powerful PHP integrated development environment

mPDF

mPDF

mPDF is a PHP library that can generate PDF files from UTF-8 encoded HTML. The original author, Ian Back, wrote mPDF to output PDF files "on the fly" from his website and handle different languages. It is slower than original scripts like HTML2FPDF and produces larger files when using Unicode fonts, but supports CSS styles etc. and has a lot of enhancements. Supports almost all languages, including RTL (Arabic and Hebrew) and CJK (Chinese, Japanese and Korean). Supports nested block-level elements (such as P, DIV),