1. TOP
  2. Wordpress
  3. WordPressで切り替えメニュータブをプラグインなしで作る方法

WordPressで切り替えメニュータブをプラグインなしで作る方法

切り替えタブの作り方

WordPressサイトのサイドバーにタブの切り替えボタンがあるとスペースを有効活用できます。

人気記事ランキングや新着記事、おすすめ記事などを一つのパーツにまとめられるので、デザインがスッキリします。

この記事では、WordPressサイトにプラグインなしでコンテンツ切り替え可能なメニュータブの作り方や設置方法を紹介します。

WordPressサイトに表示するコンテンツの切り替えタブボタンは、サイドバーやウィジェット、記事内を使用して表示します。作成方法は少し知識が必要ですが、一度覚えれば簡単に追加できます。

運営しているWordPressサイトの規模が大きくなるにつれて、サイドバーに表示する項目も多くなってくると思います。サイドバーのスペースは限られているため、十分なスペースがないと感じる人も多いと思います。

この時に、コンテンツを一つにまとめて、タブの切り替えボタンがあればとても便利です。

切り替えタブメニュー

同じ部分に異なるコンテンツを1ヶ所で表示できるため、スペースが節約できます。

サイト訪問者は、各タブをクリックして、もっとも、興味のあるコンテンツを見ることができます。

例えば、人気記事ランキングであれば、今日や今週、今月などを一つにまとめて切り替えタブで表示できます。

サイト制作者が好きなコンテンツを切り替えタブ内に追加することが可能です。

また、タブメニューボタンは、クリックすれば単純に切り替わるだけでなく、アニメーションを追加し、やわらかい感じで切り替わるようにします。

参考サイト:vanity

メリット

  • 様々なコンテンツを一つにまとめることができる。
  • サイドバーなどの狭いスペースを有効活用できる。
  • 一つのタブボタンに集約されているため、目的のコンテンツを見つけやすい。
  • 記事周辺やサイドバーなど色々な位置に設置可能。

実際のメニュータブのサンプルが、提供サイトで設置されています。一度ご確認ください。

作成方法

1.メニュー画面を表示するHTMLを記述します。

以下のコードを、表示したい位置に記述してください。

2.メニュータブは、jQueryを使用して切り替えます。

エディターなどを開いて、以下のjQueryコードを記述します。

ファイル名は、Tabs.jsで保存します。

保存ができたら、使用中のテーマのディレクトリ内に、FTPなどを使用してアップロードします。

各項目の解説

  • equal_height:それぞれのコンテンツの高さを統一したい場合は「true」に設定します。コンテンツに応じた高さになる場合は「false」に設定します。
  • cookies:クッキーの有効を設定します。「ture」でサイトに再訪問した場合は直前に開いていたタブがそのまま表示されます。「false」でクッキーを無効にします。
  • animate:タブが切り替わる際のアニメーションが有無に設定できます。「true」か「false」を設定します。
  • effect:タブが切り替わる際のアニメーションの種類を設定します。「fade」でフェードして切り替わります。「slide」でスライドして切り替わります。
  • speed:タグが切り替わる際のアニメーションの速度を設定できます。数値が大きい程ゆっくり切り替わり、数値が小さい程素早く切り替わります。
  • jQuery(‘ul.tabs’).jTabs({content: ‘.tabs_content’});タブが動作するためのCSS部分です。CSSを変えた際は、この部分を変更してください。

4.header.php内に作成したTabs.jsを読み込むコードを記述します。

記述する位置は、</head>の直前で大丈夫です。

5.メニュータブの CSS を作成します。簡単なデザインですが、好みに合わせてカスタマイズしてください。

以下のコードをStylesheet (style.css)内に記述します。

まとめ

jQueryを使ってアニメーション付きのメニュータブを作る方法を紹介しました。

WordPress を前提に解説していますが、一般的な WEB サイトで使用する場合は、以下のような jQueryライブラリも<head>内に読み込んでください。

また、メニュータブ内に人気ページランキングなどを表示する場合に「WordPress Popular Posts」を使用することが多いと思います。「WordPress Popular Posts」用のPHPファイルを作成して、ショートコードで読み込んで使用するようにしてください。

詳しい設置方法は「WordPress Popular Postsのカスタマイズ方法や使い方」の記事をお読みください。