投稿リストの「テキスト1カラム」のレイアウトを独自のコードに変更する

このレッスンの前に

このレッスンは以下のレッスンを理解している事を前提としています。

「テキスト1カラム」以外のレイアウトの場合「投稿一覧のカスタマイズ - カスタムフィールドの値を表示する」のレッスンで紹介しているように body_prepend や body_append などのフィルターを使って必要なものを追加する事を推奨していますので、今回紹介する vk_post_view を使った改変は「最後の手段」くらいの位置づけになります。

投稿アーカイブページや VK Blocks Pro の投稿リストブロックの1件分のレイアウトを完全に独自のものに差し替えたい場合は vk_post_view フックを使って書き換えます。

以下は VK Blocks Pro の「テキスト1カラム」のレイアウトを独自に改変する例です。

add_filter(
	'vk_post_view',
	function( $html, $post, $options ) {

		// テキストレイアウト以外の場合は何もしないで戻す
		if ( 'postListText' !== $options['layout'] ) {
			return $html;
		}

		// $html に改変するコードを追加する
		$html  = '';
		$html .= VK_Component_Posts::get_view_first_div( $post, $options );
		if ( $options['display_date'] ) {
			$html .= '<span class="postListText_date published">';
			$html .= esc_html( get_the_date( '', $post->ID ) );
			$html .= '</span>';
		}

		$html     .= '<span class="postListText_singleTermLabel">';
		$term_args = array(
			'class' => 'postListText_singleTermLabel_inner',
			'link'  => true,
		);
		if ( method_exists( 'Vk_term_color', 'get_single_term_with_color' ) ) {
			$html .= Vk_term_color::get_single_term_with_color( $post, $term_args );
		}
		$html .= '</span>';

		$html .= '<p class="postListText_title"><a href="' . get_the_permalink( $post->ID ) . '">';
		$html .= get_the_title( $post->ID );
		$html .= '</a>';

		if ( $options['display_new'] ) {
			$today = date_i18n( 'U' );
			$entry = get_the_time( 'U' );
			$kiji  = gmdate( 'U', ( $today - $entry ) ) / 86400;
			if ( $options['new_date'] > $kiji ) {
				$html .= '<span class="vk_post_title_new">' . $options['new_text'] . '</span>';
			}
		}

		$html .= '</p>';
		$html .= '</div>';

		return $html;
	},
	10,
	3
);

第3引数を利用する

上記のコードでポイントは もともとのテキストレイアウトの時だけ切り替えています。

この識別に $options['layout'] を使用しています。

フックで書き換える変数は $html ですが、最初に $html だけでなく $post と $options も受け取っています。

全部で3つの引数を受け取っているので、最後から2行目が 3 になっています。

これは引数を3つ受け取るという指定をしているので、この指定をしないで functions で引数をたくさん渡すとエラーになってしまうので注意してください。

Lightningなら

ビジネスサイトも





ブログも簡単に作れます

有効インストール数6万件以上!Lightning は WordPress公式ディレクトリに登録されているテーマです。いかに最短でサイト制作が出来るかという事に重点を置いて開発しています。デモデータも配布されているので、ビジネスサイトの雛形が数分でセットアップできます。

PAGE TOP