web-dev-qa-db-ja.com

ウォーカーのリンク内にHTMLを挿入

私は（理論的には）カスタム分類法で最新の投稿から注目の画像を引き出し、wp_list_categoriesのリンクの後に画像を表示するカスタムナビゲーションウォーカーを持っています。

問題は、リンク内でカテゴリ名の上に画像を表示する必要があることです。私はこれを行う方法を把握するようには思えません。

これは私のカスタムウォーカーです：

class CategoryThumbnailWalker extends Walker_Category {
    function start_el(&$output, $category, $depth, $args) {
        parent::start_el(&$output, $category, $depth, $args);
        $posts = get_posts(array(
            "child_of"         => $category->term_id, // may need to be disabled; we'll see
            "post_type"        => "projects",
            "project-category" => $category->slug,
        ));
        if ($posts) {
            foreach ($posts as $post) {
                if (has_post_thumbnail($post->ID)) {
                    $output .= get_the_post_thumbnail($post->ID, "gallery-small");

                } else {
                    $output .= "<img alt=\"No image available\" src=\"" . get_template_directory_uri() . "/img/no-image.jpg\" />";
                }
                break;
            }
        } else {
            $output .= "<img alt=\"No image available\" src=\"" . get_template_directory_uri() . "/img/no-image.jpg\" />";
        }
    }
}

これが私のwp_list_categoriesです。

$category = $wp_query->get_queried_object_id();
wp_list_categories(array(
    "child_of"         => $category,
    "depth"            => 1,
    "hide_empty"       => false,
    "hierarchical"     => 1,
    "orderby"          => "name",
    "pad_counts"       => 0,
    "post_type"        => "projects",
    "show_count"       => 0,
    "show_option_none" => "",
    "taxonomy"         => "project-category",
    "title_li"         => "",
    "walker"           => new CategoryThumbnailWalker()
));

そして、これがすべて出力するものです。

<li class="cat-item cat-item-13">
    <a href="http://christopherconsultants.myweblinx.net/project-category/education/" title="View all posts filed under Education">
        Education
    </a>
    <img alt="No image available" src="http://christopherconsultants.myweblinx.net/wp-content/themes/christopher-consultants/img/no-image.jpg">
</li>
custom-post-typescustom-taxonomyfunctionswalkerwp-list-categories
1
JacobTheDev

CategoryThumbnailWalkerをスキップして代わりにlist_catsフィルターを使用することができます。

これはテストされていない例です。

add_filter( 'list_cats', 'wpse_149898_list_cats', 99, 2 );

wp_list_categories(array(
    "child_of"         => get_queried_object_id(),
    "depth"            => 1,
    "hide_empty"       => false,
    "hierarchical"     => 1,
    "orderby"          => "name",
    "pad_counts"       => 0,
    "post_type"        => "projects",
    "show_count"       => 0,
    "show_option_none" => "",
    "taxonomy"         => "project-category",
    "title_li"         => "",
));

remove_filter( 'list_cats', 'wpse_149898_list_cats', 99, 2 );

どこで

/**
 * Prepend the featured image, from the most recent project 
 * in a custom taxonomy, to the term name.
 *
 * @param string $cat_name
 * @param object $category
 * @return string 
 */    

function wpse_149898_list_cats(  $cat_name, $category )
{   
    $posts = get_posts( array(
        'post_type'        => 'projects',
        'posts_per_page'   => 1,
        'meta_key'         =>'_thumbnail_id',
        'project-category' => $category->slug,
    ) );

    $img = sprintf( "<img alt=\"No image available\" src=\"%s/img/no-image.jpg\" />",
        get_template_directory_uri()
    );

    if ( $posts ):
        foreach ( $posts as $post )
        {
            if ( has_post_thumbnail( $post->ID ) )
                $img = get_the_post_thumbnail( $post->ID, 'gallery-small' );

        }
    endif;    
    return $img . $cat_name;
}

出力は（うまくいけば）次のようになるはずです。

<li class="cat-item cat-item-13">
    <a href="http://christopherconsultants.myweblinx.net/project-category/education/" title="View all posts filed under Education">
        <img alt="No image available" src="http://christopherconsultants.myweblinx.net/wp-content/themes/christopher-consultants/img/no-image.jpg">
        Education
    </a>
</li>
2
birgire