Shortcodes Ultimateのタブを深堀してみた

実践編の課題で「タブを使って投稿を表示する方法」について、よく質問があるので、Shortcodes Ultimate（SU）のタブとブロックを組み合わせて使う方法を紹介します。

タブがどのように実装されているかを理解すると、使いこなせるようになると思うので、HTML・jQuery・CSSの３つのコードを見ていきます。

そして、タブで使えるオプションについても解説し、使用例を示します。

どのように機能するか分からないオプションがあったので、jQueryコードの一部をChatGPTに解説してもらいました。その結果を最後に載せています。

SUタブとブロックの組み合せ方

タブのショートコードを挿入すると、段落ブロックに次のようなコードが追加されます。

[su_tabs][su_tab title="タブ名" disabled="no" anchor="" url="" target="blank" class=""]タブコンテンツ[/su_tab]
[su_tab title="タブ名" disabled="no" anchor="" url="" target="blank" class=""]タブコンテンツ[/su_tab]
[su_tab title="タブ名" disabled="no" anchor="" url="" target="blank" class=""]タブコンテンツ[/su_tab][/su_tabs]

このショートコードを、Enterキーを使って分割しても機能します。

「タブコンテンツ」の部分は［最新の投稿］や［クエリ－ループ］に変えています。

もちろん、SUのタブと投稿を組み合わせることも可能です。

SUには投稿のショートコードがあり、［template］というオプションを使って、「自作」のテンプレートファイルを指定することもできますが、今は、クエリ－ループという高度なブロックがあり、ビジュアルに編集できるので、もう必要ないのではと思っています。

テンプレートを自作したい場合は、SUのテンプレートを子テーマのディレクトリにコピーして編集するとよいでしょう。SUが用意してくれている投稿のテンプレートは、次の４つです。「wp-content/plugins/shortcodes-ultimate/includes/partials/shortcodes/posts/templates/」フォルダにあります。

• default-loop.php – 投稿ループ
• teaser-loop.php – サムネイルとタイトル付きの投稿ループ
• single-post.php – 個別投稿
• list-loop.php – 投稿タイトルの順序付けられていないリスト

SUタブのコード

このタブのコードを見ていきます。

１．HTML

開発者ツールを開いて、タブのHTMLコードを確認してみましょう。

<div class="su-tabs su-tabs-style-default su-tabs-mobile-stack" data-active="1" data-scroll-offset="0" data-anchor-in-url="no">
    <div class="su-tabs-nav">
        <span class="su-tabs-current" data-url="" data-target="blank" tabindex="0" role="button">タブ名１</span>
        <span class="" data-url="" data-target="blank" tabindex="0" role="button">タブ名２</span>
        <span class="" data-url="" data-target="blank" tabindex="0" role="button">タブ名３</span>
    </div>
    <div class="su-tabs-panes">
        <div class="su-tabs-pane su-u-clearfix su-u-trim su-tabs-pane-open" data-title="タブ名">タブコンテンツ１</div>
        <div class="su-tabs-pane su-u-clearfix su-u-trim" data-title="タブ名">タブコンテンツ２</div>
        <div class="su-tabs-pane su-u-clearfix su-u-trim" data-title="タブ名">タブコンテンツ３</div>
    </div>
</div>

ショートコードとHTMLコードの構成が異なることに気づきましたか？

HTMLコードは「タブ名」と「タブコンテンツ」に分けて、まとめられていますね。

更に注意して見ると、アクティブになっている「タブ名」には「su-tabs-current」、「タブコンテンツ」には「su-tabs-pane-open」というクラスが追加されていることが分かります。

その他にも、使われている属性について説明します。

1) カスタムデータ属性

「data-active」や「data-url」のようなdata-○○という属性は、SU独自のものです。

2) tabindex属性

tabindex属性は、 Tabキーを押したときに、順番にフォーカス／選択状態にすることを許可または防止する属性で、フォーカスする順番を設定することができます。

3) role属性

buttonロールは、要素がボタンであるものの、ボタンの機能を提供していないことをスクリーンリーダーに伝えます。これは、WAI-ARIA（Web Accessibility Initiative Accessible Rich Internet Applications）というW3Cによって定められた仕様で、HTMLだけでは表すことのできない構造や状態などを明示することで、アクセシビリティを向上させます。

２．jQuery

ユーザーがタブをクリックすると「su-tabs-current」と「su-tabs-pane-open」の２つのクラスが削除・追加されます。

このクラスの削除と追加は、JavaScriptを使います。

プレビュー画面で右クリックし［ページのソースを表示］すると、SUのスクリプトファイルが見つかります。

/wp-content/plugins/shortcodes-ultimate/includes/js/shortcodes/index.js?ver=5.12.11

コードはjQueryで書かれています。

jQueryは、高速、軽量、機能豊富なJavaScriptライブラリで、JavaScriptコードをより簡単に記述することができます。

JavaScriptライブラリということは、スクリプトファイルを読み込む必要があるのですが、WordPressはjQueryライブラリをディフォルトで読み込むので、特に何かする必要はありません。

SUのスクリプトファイルから、クラスの削除と追加を実行するコードを抜き出してみました。

var t = e.index(),
o = e.hasClass("su-tabs-disabled"),
e = e.parents(".su-tabs"),
n = e.find(".su-tabs-nav span"),
e = e.find(".su-tabs-pane");
o || (e.removeClass("su-tabs-pane-open").eq(t).addClass("su-tabs-pane-open"),
n.removeClass("su-tabs-current").eq(t).addClass("su-tabs-current"),

メソッドの名前から、どのようなことをするのか、容易に想像できると思います。

複数のメソッドをピリオド（.）でつなげたものがありますが、これは「メソッドチェーン」と呼ばれるもので、チェーンの中で先に呼び出されたメソッドの返り値に対して、次のメソッドを呼び出します。

HTMLコードで取り上げたカスタムデータ属性の操作は、data()やattr()メソッドが使われています。

３．CSS

タブの装飾やコンテンツの表示などの見た目を整えているのはCSSなので、次はSUのスタイルシートを見てみましょう。

/wp-content/plugins/shortcodes-ultimate/includes/css/shortcodes.css?ver=5.12.11

現在のタブ名に背景色を設定し、表示されるマウスカーソルの種類をデフォルトにします。

.su-tabs-nav span.su-tabs-current {
    background: #fff;
    cursor: default
}

開かれていないタブのコンテンツを非表示にします。

.su-tabs-pane:not(.su-tabs-pane-open) {
    overflow: hidden!important;
    padding-top: 0!important;
    padding-bottom: 0!important;
    min-height: 0!important;
    height: 0!important;
    border: none!important;
}

タブの見た目を調整したいときは、SUのドキュメントにある関連記事が参考になります。

• Customizing the tabs shortcode
• Disabling the outline around tab titles

SUタブのオプション

SUタブに設定できるオプションについても見ていきましょう。

１．su_tabs（タブ全体）

２．su_tab（各タブ）

３．オプションの使用例

このタブに以下のオプションを設定しました。

1) active

タブ３がディフォルトで開かれるようにしています。

[su_tabs active="3"]

2) disabled

タブ１を無効にしています。

[su_tab title="タブ１" disabled="yes"]

3) anchor_in_urlとanchor

「タブ２へ」をクリックすると、タブ２が開かれ、ページのURLに「#tab2」が追加されます。

[su_tabs anchor_in_url="yes"]
[su_tab title="タブ２" anchor="tab2"]

4) url

タブ３をクリックすると、Googleが開きます。

[su_tab title="タブ３" url="https://www.google.com/"]

４．ChatGPTの解説

scroll_offsetがどのように機能するか分からなかったので、以下のjQueryコードをChatGPTに解説してもいました。

(i(window).scrollTop() + i("body").offset().top > e.offset().top || i(window).scrollTop() + i(window).height() < e.offset().top) && i(window).scrollTop(e.offset().top - i("body").offset().top - e.data("scroll-offset"))

このjQueryコードは、ウィンドウのスクロール位置に基づいて特定の要素（e）までスクロールする機能を実装しています。

コードの各部分を説明します。

1. i(window).scrollTop()：現在のウィンドウのスクロール位置（上端からの距離）を取得します。
2. i("body").offset().top：body要素の上端からの距離を取得します。
3. e.offset().top：e要素の上端からの距離を取得します。
4. i(window).height()：ウィンドウの高さを取得します。
5. e.data("scroll-offset")：e要素に設定されたdata-scroll-offset属性の値を取得します。

このコードは、次の条件を満たす場合に、e要素までスクロールします。

• ウィンドウの上端がe要素の上端よりも上にある。
• ウィンドウの下端がe要素の上端よりも下にある。

スクロールする距離は、e要素の上端からbody要素の上端までの距離に、data-scroll-offset属性の値を減算したものです。これにより、e要素までのスクロールがオフセットを考慮した位置になります。

コード全体を見ると、次のようになります。

(i(window).scrollTop() + i("body").offset().top > e.offset().top || i(window).scrollTop() + i(window).height() < e.offset().top) && i(window).scrollTop(e.offset().top - i("body").offset().top - e.data("scroll-offset"))

このコードは、ウィンドウのスクロール位置に応じて、特定の要素までスクロールする機能を実現しています。