2016/10/03 by プロストサイト – Update 16

TwentyTwelveサイドバーメニュー表示等のウィジェットの使い方

WordPress TwentyTwelveのメインメニューは、ヘッダ下のナビゲーションメニューが既定となっています。Webサイトでは、固定ページ数が一般に多くなることからサイドバーへ変更します。併せて、ウィジェットのオプション設定に触れます。

WordPress TwentyTwelve – ウィジェットの使い方

WordPress TwentyTwelveメインサイドバーの設定は、ウィジェットで簡単に行えます。管理画面の概観からウィジェットのクリックでスタートします。

TwentyTwelveウィジェット – サイドバーのメニュー設定

Webサイト開設当初に適した、サイドバーへのメニュー設定を行います。

ウィジェットの状態 – Step1

ウィジェットの抜粋画面です。固定ページが見えています。固定ページは、設定後の項でメインサイドバーへ移動します。今回の主な設定です。また、使用停止中のウィジェット領域が下部に見えます。

メインサイドバーの配置状態 – Step2

オリジナルでは、検索を始めとする6つのウィジェット機能が設定されています。これらは、設定後の項で、使用停止中のウィジェット領域へ移動します。

メインサイドバーの設定後 – Step3

設定後の状態です。

設定は、次の3ステップで簡単に完了できます。

Step3-1. メインサイドバーのウィジェット移動 – 使用停止

WordPress CMSサイトでは、設定前2項の6つのウィジェット機能は使用しません。そこで、使用停止中のウィジェット領域へ移動します。左キーでつかまえて、ドラッグで移動できます。

Step3-2. 固定ページのウィジェット移動 – 使用

設定前1項の固定ページを、メインサイドバーへ移動します。左キーでつかまえて、ドラッグで移動できます。

Step3-3. タイトルと並び順の指定

固定ページが メインサイドバーへ設置されたところで、タイトルと並び順を指定します。

タイトル

サイトに応じたタイトル名を入力します。

並び順

画面は、固定ページの順序で表示させる設定事例です。固定ページの順序は、固定メージの新規追加や更新で設定しています。

固定ページの順序
WordPress CMSサイト – 固定ページの新規追加

ナビゲーションメニューの停止

メインサイドバーメニューの設定を行っても、ナビゲーションメニューは表示状態のままです。ナビゲーションメニューの非表示設定は、下記によります。

ナビゲーションメニュー
WordPress TwentyTwelveナビゲーションメニューの非表示設定

TwentyTwelveウィジェット – オプション設定

サイドバーメニューはそれなり十分に機能しますが、メニューの増加等につれて次のような希望が出てくるかも知れません。

1. 画像を表示したい。
2. メニュータイトルの折り返し無しに、簡潔に表示したい。
3. メニュー表示をデザインしたい。
4. キャンペーン等の告知を機動的に行いたい（フッタ活用を含む）。

このようなケースの拡張対応です。次の3つが代表的な方策です。

テキストのテキスト利用 – 方策1

先ず、画面下部に表示されているテキストのウィジェット利用が候補です。HTMLやCSSを駆使した、自由なデザインを行えます。自由性の反面、HTMLやCSSの知識が前提となります。

プラグインCustom Post Widget – 方策2

画像が目的ならプラグインImage Widgetが選択肢です。たたし、画像が1つに制限され文字表現も十分には行えません。プラグインCustom Post Widgetなら、複数の画像や文字表現も自在です。WordPress固定ページ編集と同じTinyMCE Advanced利用の、小固定ページ作成の感覚で行えます。

画面左上のContent Blockは、Custom Post Widgetで追加されたウィジェット機能です。

フッタ – 方策3

方策1と方策2は編集ツールですが、方策3はウィジェット利用場所の拡張です。つまり、TwentyTwelveの既定ではサイドバーのみですがカスタマイズによりウィジェットのフッタ利用を可能とします。