フロントページの設定

フロントページのカスタマイズ

タイトルと抜粋部分にLOTDを掲載する

フロントページには固定ページを使い、タイトルと抜粋にLOTD（日替わりリスト）のタイトルとまえがきを表示させています。

固定ページの抜粋を表示させる

標準では固定ページの抜粋フィールド (post_excerpt) は使われないので、使うよう設定します。

add_action( 'init', 'kh_use_excerpt_on_pages' );
function kh_use_excerpt_on_pages() {
    add_post_type_support( 'page', 'excerpt' );
}

タイトルと抜粋を設定する

記事タイトルの変更は、フィルターフック ‘the_title’ を使うわけですが、このフックはサイト全体を通じて呼ばれまくっています。10記事のタイトル一覧があると10回呼ばれます。できるだけ負荷を減らすために、フロントページを表示させるときのみ登録するようにしてみました。

ナビゲーションメニューも WP_Queryを使っているので、判定条件には is_main_query() も必要。これがないとナビゲーションメニューが消失してしまいました。

add_action( 'wp_head', 'kh_wp_head_frontpage' );
function kh_wp_head_frontpage() {

    if ( is_front_page() && is_main_query() ) {
        add_filter( 'the_title', 'kh_frontpage_title', 10, 2 );
    }
}

コールバック関数はこちら。フィルターフック ‘the_title’ はフロントページの表示中にも呼ばれまくっており、 is_front_page() では変えるべきタイトルが特定できませんでした。固定ページのIDが get_option( ‘page_on_front’) で取得できるフロントページのIDと同じであるという条件で判定をしています。

そしてフロントページのタイトルを書き換える場合のみ、抜粋ページを書き換えるフィルターフックを登録します。

function kh_frontpage_title( $title, $id ) {
    if( $id == get_option( 'page_on_front') ) {
        $lotd = lf_official_lotd();
        $title = '<a href="'.get_permalink( $lotd ).'">'.get_the_title( $lotd ).'</a>';
        add_filter( 'the_excerpt', 'kh_frontpage_excerpt', 10, 1 );
    }
    return $title;
}

function kh_frontpage_excerpt( $post_excerpt ) {
    $lotd = lf_official_lotd();
    return get_the_excerpt( $lotd );
}

Latest Posts ブロックをカスタマイズする

フロントページの本文先頭にも LOTD を書影と共に表示させます。

具体的には “Latest Posts” ブロックをカスタマイズしました。このブロックはカテゴリごとに新着投稿を表示できるので、LOTD専用カテゴリを選択すれば絞り込みは完了。

書影については工夫が必要です。仕様では投稿のアイキャッチ画像を使うのですが、書影はほとんどアフィリエイトサイトからの引用で、アイキャッチ画像に登録しておくことができません。

そこで、フロントページにLOTDを表示する際には、アイキャッチ画像が登録されているかのように偽装するカスタマイズを施しました。

アイキャッチ画像の有無は、関数 has_post_thumbnail() によって判定されます。 “Latest Posts” ブロックでは gutenberg_render_block_core_latest_posts() という関数の中で呼ばれています。

この関数内にあるフィルターフック ‘has_post_thumbnail’ にコールバック関数を登録しました。この関数の中で、さらにアイキャッチ画像のhtmlをレンダリングした後に呼ばれるフィルターフック ‘post_thumbnail_html’ にコールバック関数を登録し、trueを返しておきます。ここが偽装と呼んだ部分。

add_filter( 'has_post_thumbnail', 'lf_has_post_thumbnail', 10, 3 );
function lf_has_post_thumbnail( $has_thumbnail, $post, $thumbnail_id ) {
    if ( is_front_page() && has_category( 'lotd', $post ) && ! $has_thumbnail ) {
        add_filter( 'post_thumbnail_html', 'lf_post_thumbnail_html', 10, 5 );
        $has_thumbnail = true;
    }
    return $has_thumbnail;
}

html記述部分は次の通り。ひとつの投稿には複数の書籍が付いている場合がありますが、配列の先頭の書籍の書影を使います。 lf_get_asin_meta() は、書籍IDから書影URLなどの関連情報を取得する関数。

メディアライブラリに登録すると、自動的に決まった大きさのサムネイルが作成・保存されます。しかし書影ファイルはサイズが不定。そこで表示領域をサムネイルのサイズで固定したうえで、CSS の object-fit プロパティを使って書影の中央部分を切り抜いて表示させています。

function lf_post_thumbnail_html( $html, $post_id, $post_thumbnail_id, $size, $attr ) {
    $asins = get_the_terms( $post_id, 'asin' );
    $res = lf_get_asin_meta( $asins[0]->name );

    $thum_w = get_option( 'thumbnail_size_w' );
    $thum_h = get_option( 'thumbnail_size_h' );
    return '<img width="'.$thum_w.'" height="'.$thum_h.'" src="'.$res->img.'" class="attachment-thumbnail size-thumbnail wp-post-image" alt="" style="width:'.$thum_w.'px;height:'.$thum_h.'px;object-fit:cover;" />';
}

Posted by

koji

on

in category

«

»