投稿一覧の高度なカスタマイズ

<!-- 投稿を表示するためのarticle要素 -->
<article class="col-12">
    <!-- 投稿の日付を表示する。エスケープ処理を行い安全に出力 -->
    <?php echo esc_html( get_the_date() ); ?>
    
    <!-- 投稿のパーマリンクを含むリンク要素 -->
    <a href="<?php the_permalink(); ?>">
        <!-- 投稿のタイトルを表示する -->
        <?php the_title(); ?>
    </a>
</article>

<?php
/**
 * For Archive page loop post item template
 *
 * @package lightning
 */

$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
);

//追加したコード
$options['display_image'] = false;

/**
 * 投稿一覧画面で表示する投稿情報に要素を追加する
 *
 * @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
);