この記事では、人気急上昇中のWordPress テーマ The Thor（ザ・トール）の一機能である「メニューパネル」の設定方法についてご紹介します。
メニューパネルの位置と目的
メニューパネルは、主にスマートフォン表示時に、メニューバーの役割を果たします。読者に特に伝えたい情報やサイト内回遊を促すような項目を厳選して載せるのことをおすすめします。
もし、ヘッダーにメニューボタンが見当たらない場合は、外観＞カスタマイズ＞共通エリア設定[THE]＞ヘッダーエリア設定のメニューパネルの項目で表示させる事ができます。
The Thor メニューパネル設定方法
早速、メニューパネルの設定方法をご紹介していきます。
メニューパネルの設定は、
外観＞ウィジェット＞ もしくは
外観＞カスタマイズ＞ウィジェット＞メニューパネル から行う事ができます。
編集画面までたどり着いたら、ウィジェットを追加ボタンをクリックします。
するとこのように、追加できるウィジェットの一覧が表示されます。
メニューパネルに追加できるウィジェット
以下が、メニューパネルに追加できるウィジェットの一覧です。種類豊富なパーツが用意されているので、組み合わせ次第でオリジナリティー溢れるメニューパネルを作成する事ができます。
- RSS
- [THE]QRコード
- [THE]カテゴリ人気記事
- [THE]スタイルテキスト
- [THE]タグランキング
- [THE]タブコンテンツ
- [THE]人気記事
- [THE]広告
- [THE]画像付き新着記事
- [THE]絞込検索
- [THE]著作者情報
- アーカイブ
- カスタムHTML
- カテゴリー
- カレンダー
- ギャラリー
- タグクラウド
- テキスト
- メタ情報
- 動画
- 固定ページ
- 最近のコメント
- 最近の投稿
- 検索
- 画像
- 表示数
- 音声
今回は、このウィジェットリストの中から、当ブログで実際に設定しているカスタムHTML、[THE]人気記事、タグクラウドの設定内容をご紹介します。
▼完成イメージはこちら
プロフィール（カスタムHTML）
はじめに「カスタムHTML」のウィジェットを追加します。カスタムHTMLの編集画面はとてもシンプルで、タイトル・内容のみ設定が可能です。タイトルに入力した文字が濃いピンク色の見出し部分に、内容に入力したHTMLがその下に表示されます。
なお、プロフィール用のコードは以下の記事で紹介していますので、よろしければご活用下さい。
WordPress有料テーマ「サンゴ」使用ブログなどでよく見かける、背景画像付きのプロフィールを作成してみたので、その設定方法をご紹介します。HTMLとCSSを使って設定を行いますが、基本はコピペでOKなので、プログラミングの知識があまり[…]
人気記事（[THE]人気記事）
次に人気記事を表示させます。選択するウィジェット名は「[THE]人気記事」です。
「人気記事」のウィジェットは設定項目がやや多くなっています。
- タイトル：カスタムHTML同様、入力内容が濃いピンクの見出し部分に表示されます。
- 表示する投稿数：いくつの記事を紹介するか決められます。1−3位は自動でラベルの色が金・銀・銅になり、それ以降はグレーとなります。
- 投稿日の表示有無：チェックをつけると、記事の投稿日を表示できます。
- 更新日の表示有無：チェックをつけると、記事の最新更新日を表示できます。
- 閲覧数の表示有無：チェックをつけると、記事の閲覧数を表示できます。
- ノーマルレイアウト（左画像）に変更：後ほど画像付きで解説します。
- 画像アスペクト比：アイキャッチ画像のタテヨコ比を指定できます。
- 本文抜粋文字数：本文を表示したい場合、入力した数字の分だけ本文の冒頭を表示できます。
ノーマルレイアウト（左画像）に変更
こちらをチェックしない場合、以下ように画像が上、文字が下というレイアウトになります。
画像アスペクト比
アイキャッチ画像のアスペクト比は、「16:9」「4:3」「1:1」「0:0(画像なし)」から選択できます。
本文抜粋文字数
本文抜粋文字数を35文字にした場合、以下のような表示になります。
タグ検索（タグクラウド）
次にタグで記事を検索する「タグクラウド」の機能を追加します。
- タイトル：これまで同様、入力内容が濃いピンクの見出し部分に表示されます。
- 分類：表示内容をタグ、カテゴリー、リンクカテゴリーから選ぶことができます（ただ、リンクカテゴリーが何を示しているのかわからないため、わかり次第追記させていただきます）。
- タグの数を表示：ここにチェックするとそのタグが付いた記事の数をタグ名の横に表示させることができます。
▼各タグをクリックすると、このように、そのタグの付いた記事一覧ページに遷移します。
バナー（カスタムHTML）
再度カスタムHTMLの方法の説明になってしまいますが、メニューパネルの一番下には、このようにブログ村ランキングの投票用バナーを貼っています。
もしよろしければ、以下のコードをお使いください。width（横幅）を100%と指定することで、バナーがメニューパネルの横幅をはみ出す事なく綺麗に表示できると思います。
<a href="リンク先のURL" target="_blank"><img src="画像のURL" alt="" width="100%" height="auto" border="0" /></a>おわりに
最後までお読みいただきありがとうございました。
今回は、WordPress テーマ The Thor（ザ・トール）の機能の一つである「メニューパネル」の設定方法についてご紹介しました。
当ブログでは、この他にも The Thor の各種カスタマイズ方法に関する記事を随時更新中です。よろしければ、そちらも合わせてご覧ください。
このブログでは、ページ最上部に以下のようなメニューバーを設置しています。メニューバーの各項目はカテゴリ名になっており、各カテゴリの記事一覧ページにリンクしています。今回は、このようなカテゴリを利用したヘッダーメニューの作成[…]
WordPress有料テーマ「サンゴ」使用ブログなどでよく見かける、背景画像付きのプロフィールを作成してみたので、その設定方法をご紹介します。HTMLとCSSを使って設定を行いますが、基本はコピペでOKなので、プログラミングの知識があまり[…]
The Thorを導入してから、投稿一覧画面で確認できる情報が少なくなったと感じている方はいないでしょうか。わたし実は私もその一人で、毎月ブログの運営報告で記事の文字数を報告していたのに、The Thorに変えてから、記事一覧[…]