テーマ「ShapeShifter」のウィジェットエリアの解説ページ

テーマ「ShapeShifter」のレイアウトで最も重要な存在がウィジェットエリアの設定です。

１〜３カラムのレイアウト設定も、ヘッダーやフッターへのアイテム設置も、モバイル用のサイドメニューにもウィジェットエリアの存在が非常に大きく、設定次第で大きく変化を与えることが可能です。

ウィジェットエリアの設定に関しては、「テーマの設定」ページでの操作も影響しますので、テーマの設定方法の解説ページも合わせてご参照ください。

標準のウィジェットエリア

テーマ「ShapeShifter」には、「標準的に備わっているウィジェットエリア」と「自分で追加することのできるウィジェットエリア」が用意されていますので、まずは前者の標準的に使用できるウィジェットエリア７つについて解説します。

右上固定可能エリア

SNSシェアアイコンを設置できるように用意していますが、テキストウィジェットをウィジェットを使用して、任意のアイテムを出力しても問題ありません。テーマカスタマイザーでスタイルを固定（position:fixed）することが可能です。

左スライドバー

ウィンドウの左側に出力されるスライド式のウィジェットエリアです。エリア上にポインターを乗せる（フーバーする）と表れます。

左サイドバー

コンテンツエリアの左側に出力されるウィジェットエリアです。

左サイドバー固定部分

左サイドバーの下に出力されるウィジェットエリアです。スクロール時にウィンドウの上部で固定されるようになっています。

右スライドバー

ウィンドウの右側に出力されるスライド式のウィジェットエリアです。エリア上にポインターを乗せる（フーバーする）と表れます。

右サイドバー

コンテンツエリアの右側に出力されるウィジェットエリアです。

右サイドバー固定部分

右サイドバーの下に出力されるウィジェットエリアです。スクロール時にウィンドウの上部で固定されるようになっています。

「外観」->「テーマの設定」ページでウィジェットエリアを追加していない場合は、以上の７つが最初から設置されています。

尚、標準で用意されているこれら７つのウィジェットエリアは、モバイル端末では表示されませんので、モバイル時にウィジェットを出力する際は、オプショナルウィジェットエリア（「外観」->「テーマの設定」ページで追加可能）を使う必要があります。

メインコンテンツのカラム変更について

左右のサイドバー位置に１つもウィジェットが含まれていない場合、コンテンツエリアが１カラムとなり、サイト全体の横幅は（テーマカスタマイザーで設定したコンテンツ幅 + 200px）に設定されます。

左右のサイドバーが出力される場合は、設定したコンテンツ幅とサイドバーのそれぞれの幅が加算された値となります。

ただし、スライドバーはコンテンツエリアの横幅に影響しません。

ウィジェットの出力条件によりカラム数が変化

テーマ「ShapeShifter」では、ウィジェットエリアに配置されるウィジェットの有無を確認する際、「is_active_sidebar」というワードプレス関数だけでなく、実際に出力されるかを検証します。

ですので、仮令ウィジェットエリアにアイテムを配置していても、ウィジェットの条件により出力されない場合、ウィジェットエリアは「非アクティブ状態」として認識され、コンテンツエリアのカラム数がページごとに変化します。

例：左サイドバーにコンテンツページのみ出力されるウィジェット「TOC」を配置すると、コンテンツページのみ２カラムとして出力されますが、アーカイブページなどの「TOC」が出力されないページでは１カラムとなります。

オプショナルウィジェットエリア

「外観」->「テーマの設定」ページの「ウィジェットエリアの設定」タブを選択すると、以下のような画面が現れます。

最初は追加するウィジェットエリアは「1」となってモバイル用のウィジェットエリアが設定されていますので、追加したいウィジェットエリアの数を半角入力すると、その下にウィジェットエリアの設定項目が表示されます。

こんな感じです。

テンプレートが貼り付きますので、最低限「ウィジェットの表示位置」を選択するだけで問題なく使用可能です。

最初のスクリーンショットのウィジェットエリアは「カスタム」とありますが、これは「ShapeShifter」の標準ではどこにも出力されません。

ただ、「モバイル用のサイドメニューに適応」にチェックが入っていることが確認できます。これはモバイル端末で見る際、右側からスライドインするサイドメニューに出力されるようになる設定で、「ヘッダー後」など他の位置に出力しているウィジェットエリアも、チェックを入れればサイドメニューに出力することが可能です。

出力位置に関しては、このページのみ出力可能位置に、”ウィジェットエリア「○○」の出力位置です。”というテキストを出力しています。全て横幅はラッパーの大きさ（100%）に設定しています。

カスタムウィジェットエリアの横幅

「ヘッダー後」「フッター前」の２つは、「最大幅100%」の設定を行うと「ロゴ」「ナビメニュー」「フッター」と同様に、横幅がウィンドウサイズ（コンテンツエリアの横幅の方が広い場合はコンテンツエリアの横幅）に合わされます。オリジナルの「テキストウィジェット」や「ダウンロードリンクウィジェット」には、背景画像をスライド表示する機能もありますので、ページに合わせてヘッダーの下を埋めることが可能です。

また、標準設定では「最大幅100%」ですが、選択肢にあるpx単位で指定した横幅に設定可能です。

ウィジェットエリアの横幅設定が最大幅100%でない場合は、ラッパーの横幅を超えない範囲であればウィジェットエリアを横に並べて出力することが可能になっていますので、フッターに横幅の異なるウィジェットエリアを複数並べて出力することも簡単に設定できます。

例えば、出力位置を「フッター前」に設定した３つのウィジェットエリアの横幅に「300px」「400px」「400px」といった具合に設定します。この時コンテンツエリアで左右のサイドバーを設置しているとコンテンツエリアの横幅は1260pxになりますので、この範囲に収まりますから３カラムに並んで出力されます。ただし、ブラウザのウィンドウサイズの方が大きい場合、そちらを基準に同じ行に入らないと判断されるため、次の行にウィジェットエリアが移動します。

「名前」と「詳細」

管理しやすくするためにこの２つには出力位置などの情報を入力して下さい。

これらは「外観」->「ウィジェット」で表示されるウィジェットエリアの名前と詳細です。自分で設定した情報をメモしておくと、ウィジェット配置の際に困らずに済みます。

モバイルでの出力

モバイル端末では標準のウィジェットエリアは一切出力されません。これは上部に多くを出力すると、ページ速度が急激に落ちることが発覚したために省きました。勝手な都合で申し訳ないです。

代わりとしてオプショナルウィジェットエリアに関しては、モバイルでも出力される設定が可能で、標準でモバイル用のウィジェットエリアが設定されています。また、プラグイン「WP Theme ShapeShifter Extensions」を使って、テーマ「ShapeShifter」のオリジナルウィジェットの出力条件設などを合わせると、上手く出力調節出来ると思います。

モバイル端末で表示は常に１カラムで、サイドバーの代わりに固定フッターにあるボタンが用意されています。フッターのボタンを操作することで、ナビメニューやサイドメニューをスライド表示することができます。