如何显示存档页的图像

Question

为站点上的扬声器创建了自定义Post类型。每一页将有一个单独的网页和一个档案页，所有发言者将以卡片的形式显示。如何为存档页上的卡片设置图像？现在，在管理面板中，没有出现为post选择图像的框。虽然我似乎正确地添加了add_theme_support(‘后缩略图’，数组(‘扬声器’))。有什么问题吗？

function.php：

​

function twentytwentytwo_support() {

  // Add support for block styles.
  add_theme_support('wp-block-styles');

  // Add support for thumbnails.
  add_theme_support('post-thumbnails', array('speakers'));

  // Enqueue editor styles.
  add_editor_style('style.css');

  // Menus
  register_nav_menus(
    array(
      'menu-1' => esc_html__('Primary', 'pediatric-integrative-medicine'),
      'menu-2' => esc_html__('Footer', 'pediatric-integrative-medicine'),
    )
  );

}

endif;

add_action('after_setup_theme', 'twentytwentytwo_support');

function pediatric_create_post_type() {
  register_post_type('speakers',
    array(
      'labels' => array(
        'name' => __('Speakers'),
        'singular_name' => __('Speaker'),
        'supports' => array('thumbnail'),
      ),
      'public' => true,
      'has_archive' => true,
    )
  );
}
add_action('init', 'pediatric_create_post_type');

​

archive.php：

​

<ul class="speakers-list">
  <?php
     $args = array(  
     'post_type' => 'speakers',);
            $loop = new WP_Query( $args ); 
            while ($loop->have_posts()) :
      $loop->the_post(); ?>
    <li>
      <a href="#">
        <div class="speaker-img">
          <img src="/wp-content/uploads/2022/08/speaker-1.png">
        </div>
        <div class="speaker-name">
          <p>
            <?php the_title(); ?>
          </p>
        </div>
        <div class="speaker-city">
          <p>
            Fribourg
          </p>
        </div>
      </a>
    </li>
    <?php endwhile; ?>
</ul>

​

Answer 1

需要考虑的几个项目：

1. 在主题中启用缩略图支持，
2. 在自定义Post类型中启用缩略图支持，以及
3. get_the_post_thumbnail_url() (或它的某些变体)用于获取<img>标记的URL。

主题缩略图支持

详细信息可在此WordPress文档页获得，用于特色图像。

自定义柱式缩略图支架

可以使用调用register_post_type()中的support属性将缩略图支持添加到自定义post类型中。

  register_post_type( 'speakers', 
      array(
        'labels' => array(
        'name' => __( 'Speakers' ),
        'singular_name' => __( 'speaker' ),
        'supports' => array( 'thumbnail' )
      ),
       'public' => true,
       'has_archive' => true,
      )
  );

有关支持属性的详细信息可在此WordPress文档页中获得，用于类型。还可以使用支助()函数添加对缩略图的支持。

使用get_the_post_thumbnail_url()

url函数具有以下签名：

get_the_post_thumbnail_url( int|WP_Post $post = null, string|int[] $size = 'post-thumbnail' )

注意$size参数。它可能会影响您配置speaker-img CSS属性的方式。

要使用此功能，您的扬声器-img代码可能如下所示：

      ...
      <a href="#">
        <div class="speaker-img">
          <?php $img_url = get_the_post_thumbnail_url( $loop->post->ID ); ?>
          <img src="<?php echo $img_url ?>">
        </div>
      ...

正如WordPress文档页面中所描述的那样，您可以自己选择缩略图图像，方法是在Add和Edit页面上使用Featured选项。