SWELL│関連記事を好きな場所に表示するカスタマイズ

2022.10.182024.03.17

SWELLの記事の関連記事はカテゴリーかタグどちらかしか表示できませんが、

ショートコード化することで好きな場所に表示することが可能です。

そのカスタマイズ方法を紹介します。

SWELLの関連記事を好きな場所に表示するカスタマイズ

管理画面＞外観＞テーマエディタ＞functions.phpに下記のコードを入れるだけです。

エラーが怖い人はCode Snipepetsのプラグインの中に記載しましょう

共通

まずはカード部分のコードです。

カテゴリー、タグに関わらず必ず記載してください。

こちらは関連記事の出力状態を見て好きなようにカスタムしてみてください。

クラスが揃っていれば、見た目は同じになります。

アイキャッチ画像がない場合のURLは好きに変えてください。

https://motoki-design.co.jp/wordpress/wp-content/uploads/no-image.jpg

function build_related_post() {
    $thumbnail_url = has_post_thumbnail() 
                    ? get_the_post_thumbnail_url(get_the_ID(), 'medium') 
                    : 'https://motoki-design.co.jp/wordpress/wp-content/uploads/no-image.jpg';
    
    $output = '<li class="p-postList__item">';
    $output .= '<a href="' . get_the_permalink() . '" class="p-postList__link">';
    $output .= '<div class="p-postList__thumb c-postThumb">';
    $output .= '<figure class="c-postThumb__figure">';
    $output .= '<img width="300" height="169" src="' . $thumbnail_url . '" alt="' . get_the_title() . '" class="c-postThumb__img u-obf-cover">';
    $output .= '</figure>';
    $output .= '</div>';
    $output .= '<div class="p-postList__body">';
    $output .= '<div class="p-postList__title">' . get_the_title() . '</div>';
    $output .= '<div class="p-postList__meta">';
    $output .= '<div class="p-postList__times c-postTimes u-thin">';
    $output .= '<time class="c-postTimes__posted icon-posted" datetime="' . get_the_date('Y-m-d') . '" aria-label="公開日">' . get_the_date('Y.m.d') . '</time>';
    $output .= '</div></div></div></a></li>';

    return $output;
}

　以下、有料コンテンツです。