【Wordpress】カスタムメニュー(Walkerクラス)を用いたピックアップ記事の実装で躓いてます。

カスタムメニュー（walkerクラス）を用いて、管理画面でもピックアップ記事を設定できるようにしようとしています。
普通のimgで設定する方法は見つけたのですが、バックグラウンドイメージで画像を取得する方法がわかりません。
参考サイトのURL
https://oku-log.com/blog/pick-up-article/

以下方法はバックグラウンドイメージで画像を引っ張ってこれるのですが、最新記事の画像を引っ張ってきてしまいます。リンクとタイトルはちゃんと設定した値になっています。

ピックアップ記事と紐づく画像をimgではなく、backgrounnd-imageで引っ張ってくる方法はないんでしょうか。
わかる方がいらしたら教えていただけると助かります。よろしくお願いいたします。

index.php

<?php
　$the_query = sub_loop(3,$paged);
　$counter = '';
　if ($the_query->have_posts()) :
　while ($the_query->have_posts()) : $the_query->the_post();
　　++$counter;
　?>
　<?php
　　wp_nav_menu(array(
　　　'theme_location' => 'pickup',
　　　'walker' => new Walker_Nav_Menu_Custom,
　　　'container' => '',
　　　'menu_class' => '',
　　　'items_wrap' => '<ul class="archiveWrap">%3$s</ul>'
　));?>
　<?php endwhile; endif; wp_reset_postdata(); ?>

functions.php

/ピックアップ記事の設定
register_nav_menus( array(
	'pickup' => 'ピックアップ',
) );


//メニューの出力内容をカスタム
class Walker_Nav_Menu_Custom extends Walker_Nav_Menu {
	function start_el( & $output, $item, $depth, $args ) {
		$indent = ( $depth ) ? str_repeat( "\t", $depth ) : '';
		$classes = empty( $item->classes ) ? array() : ( array )$item->classes;
		$classes[] = 'menu-item-' . $item->ID;
		$class_names = join( ' ', apply_filters( 'nav_menu_css_class', array_filter( $classes ), $item, $args, $depth ) );
		// 不要なIDを削除してli要素に任意のクラスをつける
		$id = apply_filters( 'nav_menu_item_id', 'menu-item-' . $item->ID, $item, $args, $depth );
		$id = $id ? ' id="' . esc_attr( $id ) . '"': '';
		$class_names = $class_names ? ' class="p-pickup__post"' : '';
		$output .= $indent . '<li' . $class_names . '>';
		$atts = array();
		$atts[ 'title' ] = !empty( $item->attr_title ) ? $item->attr_title : '';
		$atts[ 'target' ] = !empty( $item->target ) ? $item->target : '';
		$atts[ 'rel' ] = !empty( $item->xfn ) ? $item->xfn : '';
		$atts[ 'href' ] = !empty( $item->url ) ? $item->url : '';
		$atts = apply_filters( 'nav_menu_link_attributes', $atts, $item, $args, $depth );
		$attributes = '';
		foreach ( $atts as $attr => $value ) {
			if ( !empty( $value ) ) {
				$value = ( 'href' === $attr ) ? esc_url( $value ) : esc_attr( $value );
				$attributes .= ' ' . $attr . '="' . $value . '"';
			}
		}
		$item_output = $args->before;
		$item_output .= '<a' . $attributes . '>';
    
    //記事のサムネイル
    $article_url = wp_get_attachment_url(get_post_thumbnail_id());
    $article_bg = "style='background-image:url(" . $article_url . ");'";
    $item_output .= '<p class="c-pickup__image__sumbnails"' . $article_bg . '>';
    
    //imgで取得する方のやり方
    //$item_output .= get_the_post_thumbnail( $item->object_id, thum - image, array( 'class' => 'thumnail-img' ), array( 'alt' => $item->title ) );


    //タイトルを表示
    $item_output .= '<p class="c-pickup__title">' . $args->link_before . apply_filters( 'the_title', $item->title, $item->ID ) . $args->link_after . '</p>';

		$item_output .= '</a>';
		$item_output .= $args->after;
		$output .= apply_filters( 'walker_nav_menu_start_el', $item_output, $item, $depth, $args );

	}
}

ここの部分を、設定した記事に紐づいたサムネイル画像(background-image)にしたい。

行動規範の内容に同意します

回答1件

ベストアンサー

こんな感じではないでしょうか。

php
1$article_url = get_the_post_thumbnail_url($item->object_id, 'thumbnail');
2$article_bg = "style='background-image:url(". esc_url( $article_url ) .");'";
3