Lightning 投稿一覧カスタマイズ徹底解説

<article class="col-12">
    <?php echo esc_html( get_the_date() ); ?>
    <a href="<?php the_permalink(); ?>">
    <?php the_title(); ?>
    </a>
</article>

$options = array(
    // card, card-noborder, card-intext, card-horizontal , media, postListText.
    'layout'                     => 'media',
    'display_image'              => true,
    'display_image_overlay_term' => true,
    'display_excerpt'            => true,
    'display_date'               => true,
    'display_new'                => true,
    'display_taxonomies'         => false,
    'display_btn'                => true,
    'image_default_url'          => false,
    'overlay'                    => false,
    'btn_text'                   => __( 'Read more', 'lightning' ),
    'btn_align'                  => 'text-right',
    'new_text'                   => __( 'New!!', 'lightning' ),
    'new_date'                   => 7,
    'class_outer'                => 'vk_post-col-xs-12 vk_post-col-sm-12 vk_post-col-lg-12',
    'class_title'                => '',
    'body_prepend'               => '',
    'body_append'                => '',
);
VK_Component_Posts::the_view( $post, $options );

/**
 * 投稿一覧画面で表示する投稿情報を改変する
 * @param array  $options : 1件分の表示形式に関する設定配列.
 * @param object $post : 1件分の投稿情報.
 */
add_filter(
    'vk_post_options',
    function( $options, $post ) {

        // $options の 'btn_text' の値を上書き
        $options['btn_text'] = '詳しくはこちら';

        // 改変した $options を返す
        return $options;
    },
    10,
    2
);

/**
 * 投稿一覧画面で表示する投稿情報を改変する
 * @param array  $options : 1件分の表示形式に関する設定配列.
 * @param object $post : 1件分の投稿情報.
 */
add_filter(
    'vk_post_options',
    function( $options, $post ) {

        // $options の 'display_image' の値を上書き
        $options['display_image'] = false;

        // $options の 'btn_text' の値を上書き
        $options['btn_text'] = '詳しくはこちら';

        // 改変した $options を返す
        return $options;
    },
    10,
    2
);

/**
 * 投稿一覧画面で表示する投稿情報を改変する
 *
 * @param array  $options : 1件分の表示形式に関する設定配列.
 * @param object $post : 1件分の投稿情報.
 */
add_filter(
	'vk_post_options',
	function( $options, $post ) {

		// 投稿タイプが event の場合のみ改変
		if ( 'event' === get_post_type() ) {
			// $options の 'btn_text' の値を上書き
			$options['btn_text'] = 'イベント詳細';
		}

		// 改変した $options を返す
		return $options;
	},
	10,
	2
);

/**
 * 投稿一覧画面で表示する投稿情報に要素を追加する
 *
 * @param array  $options : 1件分の表示形式に関する設定配列.
 * @param object $post : 1件分の投稿情報.
 */
add_filter(
	'vk_post_options',
	function( $options, $post ) {

			// テキスト部分の前に要素を追加
			$options['body_prepend'] = '<p class="alert alert-info">前に追加</p>';

			// テキスト部分の後に要素を追加
			$options['body_append'] = '<p class="alert alert-warning">後に追加</p>';

		// 改変した $options を返す
		return $options;
	},
	10,
	2
);

/**
 * 投稿一覧画面で表示する投稿情報にカスタムフィールドの値を追加する
 *
 * @param array  $options : 1件分の表示形式に関する設定配列.
 * @param object $post : 1件分の投稿情報.
 */
add_filter(
	'vk_post_options',
	function ( $options, $post ) {

		// 表示したい投稿タイプを条件分岐で指定.
		if ( 'post' === get_post_type() ) {

			/************************************
			 * カスタムフィールドの値など独自に表示したい要素を一旦 $insert_html に格納する.
			 */
			$body_append_html = '';
			// 家賃の入力がある場合
			if ( $post->yachin ) {
				$body_append_html .= '<p class="data-yachin"><span class="data-yachin-number">' . esc_html( $post->yachin ) . '</span>万円</p>';
			}
			$body_append_html .= '<table class="table-sm mt-3">';
			// カスタムフィールド kanrihi / reikin / chikunen の値をそれぞれ表示.
			$body_append_html .= '<tr><th>管理費</th><td class="text-right">' . esc_html( $post->kanrihi ) . '円</td></tr>';
			$body_append_html .= '<tr><th>礼金</th><td class="text-right">' . esc_html( $post->reikin ) . '円</td></tr>';
			$body_append_html .= '<tr><th>築年数</th><td class="text-right">' . esc_html( $post->chikunen ) . '年</td></tr>';
			$body_append_html .= '</table>';

			/************************************
			 * 投稿１件分の 最後に追加
			 * （最初に追加する場合は body_append の部分を body_prepend に変更 ）.
			 */
			$options['body_append'] .= $body_append_html;
		}

		return $options;
	},
	10,
	2
);

		// 投稿タイプ post の時に画像を無しに改変するが、投稿詳細ページでは改変させない.
		if ( 'post' === get_post_type() && ! is_single() ) {
			// $options の 'display_image' の値を上書き
			$options['display_image'] = false;
		}

		// 投稿タイプ post の時に画像を無しに改変するが、カードインテキストのレイアウトが選択されている場合は改変しない.
		if ( 'post' === get_post_type() && 'card-intext' !== $options['layout'] ) {
			// $options の 'display_image' の値を上書き
			$options['display_image'] = false;
		}

		// ボタンの表記が '特定の投稿リスト' の時のみ改変.
		if ( '特定の投稿リスト' === $options['btn_text'] ) {
			// 表示要素を追加.
			$options['body_append'] = '<p class="alert alert-warning">後に追加</p>';
			// ボタンの名前を普通の表記に上書きして戻す.
			$options['btn_text'] = '詳しくはこちら';
		}

// 特定のタクソノミーを非表示にする
add_filter( 'vk_get_display_taxonomies_exclusion', function( $exclusion ){
    // 除外したいタクソノミーのスラッグ（複数ある場合は複数行書いてください）
    $exclusion[] = 'area';
   return $exclusion;
} );

.vk_post_taxonomy-area {
    display:none;
}

 /**
 * 投稿一覧画面で表示する投稿情報を差し替える
 *
 * @param array  $html : 1件分の表示部分のHTML
 * @param object $post : 1件分の投稿情報.
 * @param array  $options : 1件分の表示形式に関する設定配列。特定の $options[layout] 指定の時だけ差し替えるなどの条件分岐用
 * @return string $hetm : 差し替えるHTML
 */
add_filter(
	'vk_post_view',
	function( $html, $post, $options ) {

		// 差し替えるHTMLを $html の中に格納していきます.
		$html  = '<article class="col-12">';
		$html .= esc_html( get_the_date() );
		$html .= '<a href="' . get_permalink() . '">';
		$html .= get_the_title();
		$html .= '</a>';
		$html .= '</article>';

		return $html;
	},
	10,
	3
);