Перебор категорий — отображение связанных изображений и заголовков

#php #wordpress #foreach #categories

#php #wordpress #foreach #Категории

Вопрос:

Я создал выставочный веб-сайт для клиента с категоризированными экспонентами (используя функциональность WordPress, встроенную в Post / Categories), и, используя ACF, я создал соответствующее изображение баннера для каждой категории. (Смотрите Код для этого ниже).

На другой СТАТИЧЕСКОЙ СТРАНИЦЕ (с именем slug) «экспонент-категории» я бы хотел просмотреть все категории, созданные клиентом, и отобразить;

  1. Каждое связанное изображение категории тонких баннеров,
  2. С соответствующим (php single_cat_title();),
  3. Завернутый в (постоянную ссылку) на эту связанную категорию.

Как я могу это сделать, пожалуйста?

 <?php get_header(); ?>

<?php
// Category Banner Image
$term = get_queried_object();
// Banner Image
$banner_image = get_field('midsummer_category_banner_image', $term); 
$banner_image_size = 'med-sm';   
$banner_image_src = wp_get_attachment_image_src( $banner_image, $banner_image_size );
$banner_image_srcset = wp_get_attachment_image_srcset( $banner_image, $banner_image_size ); 
$banner_image_alt_text = get_post_meta( $banner_image, '_wp_attachment_image_alt', true);
$banner_image_meta = wp_get_attachment_metadata( $banner_image );
$banner_image_title = get_the_title( $banner_image );
?>
<!-- Main Page Content -->
<main>
    <!-- Category Banner -->
    <div class="category-banner">
        <img src="<?php echo esc_url( $banner_image_src[0] ); ?>" srcset="<?php echo esc_attr( $banner_image_srcset ); ?>" sizes="100vw" alt="<?php echo $banner_image_alt_text ?>">
        <!-- Category Banner Title -->
        <div class="category-centered-banner-info">
            <h2><?php single_cat_title(); ?></h2>
        </div>
    </div>
    <!-- Exhibitor Tiles -->
    <section>
            <div class="exhibitor-tiles">
                <div class="exhibitor-tiles-wrapper">
                    <!-- Exhibitors -->
                    <?php if(have_posts()) : while ( have_posts() ) : the_post();?>
                    <?php get_template_part('includes/category','exhibitors');?>
                    <?php endwhile; else: endif;?>
                </div>
            </div>
    </section>
</main>

<?php get_footer(); ?>
 

введите описание изображения здесь

введите описание изображения здесь

Ответ №1:

Попробуйте это

 $banner_image = get_field('midsummer_category_banner_image', "category_".$term->ID);
 

Комментарии:

1. спасибо, я решил свою проблему, прежде чем читать это, но я думаю, что этот способ также был бы нацелен на изображения.

Ответ №2:

Удалось решить то, чего я пытался достичь, поэтому подумал, что я отправлю сообщение, чтобы потенциально помочь другим.

Вот как я этого добился;

 <?php
$categories = get_categories(); foreach ($categories as $category) {
?>
    // Category Banner Image
    $cat_banner_image = get_field('midsummer_category_banner_image', $category);   
    $cat_banner_image_size = 'med-sm';   
    $cat_banner_image_src = wp_get_attachment_image_src( $cat_banner_image, $cat_banner_image_size );
    $cat_banner_image_srcset = wp_get_attachment_image_srcset( $cat_banner_image, $cat_banner_image_size ); 
    $cat_banner_image_alt_text = get_post_meta( $cat_banner_image, '_wp_attachment_image_alt', true);
    $cat_banner_image_meta = wp_get_attachment_metadata( $cat_banner_image );
    $cat_banner_image_title = get_the_title( $cat_banner_image );
?>
    <!-- Category Banner Buttons -->
    <a class="category-banner-button" href="<?php echo site_url() ?>/<?php echo $category->slug; ?>">
        <!-- Midsummer Category Banner Image -->
        <img src="<?php echo esc_url( $cat_banner_image_src[0] ); ?>" srcset="<?php echo esc_attr( $cat_banner_image_srcset ); ?>" sizes="100vw" alt="<?php echo $cat_banner_image_alt_text ?>">
        <!-- Category Title -->
        <h2 class="category-banner-button-title"><?php echo $category->name; ?></h2>
    </a>
    <?php } ?>