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

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

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

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

目次

著者

WEB制作をしているデジタルノマド
WordPressのカスタマイズが好きで、色々と自作しています。

WordPressのカスタマイズに困ったらご相談ください!

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;
}

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

目次