【SANGO】カテゴリー記事を出力するショートコードで記事の並び順を変更する方法

SANGO の、指定したカテゴリーIDの記事を好きな数だけ出力するショートコードで、出力される記事の並び順を変更してみました。

1 このショートコードの仕様
2 実装する方法
- 2.1 既に変更済みの部分
- 2.2 各自編集する部分

このショートコードの仕様

HTML

[catpost catid="カテゴリーID" num="出力する記事数" type="出力するリンクカードのデザイン" orderby="出力する記事の並び順"]

このショートコードで指定できる項目は、出力するカテゴリー・記事数・リンクカードのデザイン・記事の並び順の4項目です。

記事の並び順で指定できるのは、日付の降順とランダムの二択。デフォルトだと日付の降順（新しい記事から順番に並ぶ）、orderby="rand" と記述することで記事をランダムに出力できます。
記事一覧ページを作る際に記事を古い順から並べたかったため、このショートコードを他の基準で並び替えたり、昇順や降順を切り替えられるようにカスタマイズしてみました。

実装する方法

SANGO 本体のファイルを編集したくない場合は、子テーマの function.php に以下をコピペして編集してください。（その場合はショートコードの記述が少しだけ変わります）

デフォルトのものから変更されている部分・編集する部分は、色付きの行になります。
SANGO 本体の style-shortcord.php を編集する場合は、1行目と56行目にあたる部分を書き換える必要はありません。

注意

子テーマではなく SANGO 本体のファイルを編集する場合は、必ずバックアップを取ってから作業してください。また、テーマがアップデートされた際、再び変更が必要になることがありますのでご注意ください。

style-shortcord.php / function.php

function output_cards_order($atts)
{
    $num = isset($atts['num']) ? esc_attr($atts['num']) : '4'; //出力数。入力なしなら4
    $catid = isset($atts['catid']) ? explode(',', $atts['catid']) : null; //どのカテゴリーの記事を出力するか（複数指定を配列に）
    $notin = isset($atts['notin']) ? explode(',', $atts['notin']) : null; //除外するカテゴリー
    if (isset($atts['orderby'])) {
        $orderby = ($atts['orderby'] == 'rand') ? 'rand' : 'date'; //日付順かランダムか
    } else {
        $orderby = 'date'; //デフォルトの設定
	}
    if (isset($atts['order'])) {
        $order = ($atts['order'] == 'ASC') ? 'ASC' : 'DESC'; //昇順か降順か
    } else {
        $order = 'DESC'; //デフォルトの設定
	}
    $type = 'kanren';
    if (isset($atts['type'])) {
        if ($atts['type'] == 'card') {
            $type = 'card';
        } elseif ($atts['type'] == 'card2') {
            $type = 'card2';
        }
    }
    if ($catid) {
        $output_posts = get_posts(array(
            'category__in' => $catid,
            'numberposts' => $num,
            'orderby' => $orderby,
            'order' => $order,
        ));
    } else {
        $output_posts = get_posts(array(
            'category__not_in' => $notin,
            'numberposts' => $num,
            'orderby' => $orderby,
            'order' => $order,
        ));
    }
    $output = "";
    if ($output_posts && $type == "card") {
        foreach ($output_posts as $post) {
            $output .= sng_card_link(array('id' => $post->ID));
        }
        $output = '<div class="catpost-cards flex flex-wrap space-between">'.$output.'</div>';
    } elseif ($output_posts && $type == "card2") {
        foreach ($output_posts as $post) {
            $output .= sng_longcard_link(array('id' => $post->ID));
        }
    } elseif ($output_posts && $type == "kanren") {
        foreach ($output_posts as $post) {
            $output .= sng_entry_link(array('id' => $post->ID));
        }
    } //endif output_posts
    return $output;
}
add_shortcode('catpost2', 'output_cards_order'); //特定のカテゴリーの記事を好きな数だけ出力

既に変更済みの部分

ショートコードの実装部分

子テーマの function.php に上記をコピペした場合、1行目・56行目でショートコードの名前を変更し、別のショートコードとして実装していますので、SANGO の元のショートコードもそのまま使用できます。
カスタマイズしたこちらのショートコードを使用する際はこのように記述してください。catepost2 と、“2” をつけるだけです。

HTML

[catpost2 catid="カテゴリーID" num="出力する記事数" type="出力するリンクカードのデザイン" orderby="出力する記事の並び順" order="ASC（昇順）か DESC（降順）か"]

昇順か降順かの選択をできるように

11～15行目・29行目・36行目を追記して、昇順か降順かの選択ができるようにしました。14行目を書き換えることで、デフォルトの並び順を変更できます。

ショートコードで指定する場合は、order="ASC" で昇順、order="DESC" で降順になります。

各自編集する部分

お好みで編集するのは7行目・9行目になります。
日付順とランダム出力しか使わない場合は変更の必要はありません。

style-shortcord.php / function.php

    if (isset($atts['orderby'])) {
        $orderby = ($atts['orderby'] == '並び替えの基準①') ? '並び替えの基準①' : '並び替えの基準②'; //何を基準に並び替えるか
    } else {
        $orderby = '並び替えの基準②'; //デフォルトの設定
	}

orderby の該当部分に並び替えの基準を指定します。

指定できる主な項目