「カテゴリー」と「タグ」のアーカイブページに「更新日順」のタブを追加（WordPress + SWELL）

「カテゴリー」や「タグ」のアーカイブページで提供されているタブ切り替え機能は新着順と人気順（閲覧数ベース）、「更新日順」のタブを追加することができませんでした。「カテゴリー」と「タグ」のアーカイブページに新着・更新日順のタブ表示するようにカスタマイズした作業メモです。

カテゴリーとタグページに「更新日順」のタブを追加設定

SWELLの標準機能ではなかったカテゴリーページとタグページに「更新日順」のタブを追加していきます。

コード作成時のWordPress、SWELL、PHPのバージョンです。

WordPress6.9.4
SWELL2.16.0
PHP8.3.30

下記コードは標準機能の「人気順」のタブは利用しない（「–ベース設定に従う–」のまま）が前提です。「カテゴリーを編集」ページの「新着順 / 人気順でタブを分けるかどうか」欄で「する」に設定すると標準機能のタブと下記コード追加で表示されるタブが上下に2段表示となります。

管理者メニューの外観＞テーマファイルエディター＞ functions.phpで（１）と（２）をコード登録していきます。必須ではないですが（３）を追加CSS もしくはスタイルシート（style.css）にコピーします。

（１）カテゴリーまたはタグのアーカイブの並び順をURL引数で変更するコードです。

add_action('pre_get_posts', function($query) {
    if ( is_admin() || ! $query->is_main_query() ) return;

    if ( is_category() || is_tag() ) {
        $orderby = filter_input(INPUT_GET, 'orderby', FILTER_SANITIZE_FULL_SPECIAL_CHARS);
        if ( $orderby === 'modified' ) {
            $query->set('orderby', 'modified');
            $query->set('order', 'DESC');
        }
    }
});

（２）記事一覧の前に切り替えタブを挿入するコードです。

add_action('loop_start', function($query) {
    if ( ! (is_category() || is_tag()) || ! $query->is_main_query() || is_admin() ) return;
    
    static $done = false;
    if ( $done ) return;
    $done = true;

    $orderby = filter_input(INPUT_GET, 'orderby', FILTER_SANITIZE_FULL_SPECIAL_CHARS);
    $new_active = ($orderby !== 'modified');
    $mod_active = ($orderby === 'modified');
    $main_color = 'var(--color_main, #333)';

    echo '<div class="c-categoryTab p-archiveTab" style="width:100%; margin: 0 0 20px; clear:both; text-align:center;">';
    echo '  <ul class="p-archiveTab__list" style="display:inline-flex; list-style:none; padding:0; margin:0; border-bottom:2px solid #eee; min-width:240px; justify-content:center;">';
    
    echo '    <li class="p-archiveTab__item" style="padding: 0 20px 10px; position:relative;">';
    echo '      <a href="' . esc_url(remove_query_arg('orderby')) . '" style="text-decoration:none; font-weight:bold; color:' . ($new_active ? '#333' : '#999') . '; display:block;">新着順</a>';
    if($new_active) echo '<span style="position:absolute; bottom:-2px; left:0; right:0; height:2px; background:' . $main_color . ';"></span>';
    echo '    </li>';
    
    echo '    <li class="p-archiveTab__item" style="padding: 0 20px 10px; position:relative;">';
    echo '      <a href="' . esc_url(add_query_arg('orderby', 'modified')) . '" style="text-decoration:none; font-weight:bold; color:' . ($mod_active ? '#333' : '#999') . '; display:block;">更新日順</a>';
    if($mod_active) echo '<span style="position:absolute; bottom:-2px; left:0; right:0; height:2px; background:' . $main_color . ';"></span>';
    echo '    </li>';
    
    echo '  </ul>';
    echo '</div>';
}, 10);

（３）「新着順」と「更新日順」のタブを切り替えた際、「横揺れ」や「残像感（ガタつき）」を感じました。下記コード（常にスクロールバーの領域を確保（固定））をCSSに貼り付けることでほぼ解消されました。

html {
    overflow-y: scroll;
}

PCブラウザ（Firefox、Edge、Chrome、Brave）とSPブラウザ（Safari、Chrome、Brave）で確認

動作確認はPCがFirefox（149.0.2 64ビット）と Edge、Chrome、Brave（いずれもChromiumベース（バージョン 146.0.7680.178 公式ビルド 64ビット）で、SPがSafari（26.4.1）、Chrome（147.0.7727.99）、Brave1.88(137)で行っています。

「カテゴリー」や「タグ」のアーカイブページに新着順・更新日順のタブを確認できました。ページネーションも正しく連動しています。

サイト内の全てのカテゴリー（記事一覧）ページで新着・更新日順のタブを確認できました。ページネーションも正しく連動しています。

よかったらシェアしてね！

URLをコピーしました！

「カテゴリー」と「タグ」のアーカイブページに「更新日順」のタブを追加（WordPress + SWELL）

カテゴリー と タグ ページに「更新日順」のタブを追加設定

PCブラウザ（Firefox、Edge、Chrome、Brave）とSPブラウザ（Safari、Chrome、Brave）で確認

カテゴリーとタグページに「更新日順」のタブを追加設定