【SWELL THE THOR 比較】サイドバーの設定

SWELLとTHE THOR サイドバーの設定の違い

ワードプレステーマSWELLとTHE THORの違いについて、設定方法ごとに解説していきます。

今回は、「サイドバーの設定」についてです。

当ブログではSWELLをおすすめしています。
SWELL贔屓という点あらかじめご了承ください。

この記事のSWELL公式マニュアルはこちら

サイドバーに関する設定項目・ウィジェットについて | 【公式サイト】WordPressテーマ SWELL

この記事の目次

サイドバーの表示設定

SWELLでの設定場所

SWELLのサイドバーの表示に関する設定は、「外観」→「カスタマイズ」→「サイドバー」で行います。

SWELL サイドバーの表示設定
SWELL サイドバーの表示設定

「サイドバー」メニューでは次の設定をすることができます。

  • 各ページ種別でサイドバーを表示するかどうか
  • サイドバーを左右どちらに表示するか

THE THORでの設定場所

THE THORのサイドバーの表示設定は、「外観」→「カスタマイズ」から各ページのメニューで個別に設定します。

サイドバーの表示設定ができるメニュー

  • アーカイブページ設定[THE]
  • 投稿ページ設定[THE]
  • 固定ページ設定[THE]

次の画面は「アーカイブページ設定[THE]」のメニュー内のキャプチャです。

THE THOR サイドバーの表示設定 (例)アーカイブページ設定
THE THOR サイドバーの表示設定 (例)アーカイブページ設定

「レイアウト設定」で次の設定をすることができます。

  • 2カラムか1カラム(サイドバーなし)の選択
  • サイドバーを左右どちらに表示するか
  • 1カラム時のメインカラムの横幅

投稿ページ設定[THE]」と「固定ページ設定[THE]」でも同じ項目でサイドバーの表示設定をすることができます。

投稿・固定ページごとのサイドバーの表示設定

上述した通り、SWELLでもTHE THORでもページ種別単位でサイドバーの表示・非表示を設定できますが、「特定のページにだけサイドバーを表示したくない」場合もあるかと思います。

両テーマともに個別ページ単位でサイドバーの非表示設定することが可能ですが、その手順は大きく異なります。

SWELLでの設定

SWELLではエディター画面からページ単位でサイドバーの表示・非表示設定をすることができます。

STEP
エディター画面のサイドバーにある「文書」を選択
SWELL 投稿・固定ページごとのサイドバーの表示設定
エディタのサイドバーにある「文書」を選択
STEP
「サイドバー」の表示・非表示を選択

【SWELL設定】の配下にある「サイドバー」で表示・非表示を選択すれば、そのページでサイドバーを表示するか非表示にするかコントロールすることができます。

SWELL 投稿・固定ページごとのサイドバーの表示設定 その2
SWELL設定の配下にある「サイドバー」を選択

ここではサイドバーの表示・非表示についてだけ取り上げましたが、目次や著者情報コメントなど、その他の表示・非表示についても【SWELL設定】内で設定することができます。

THE THORでの設定

THE THORではウィジェットの管理からページ単位での非表示設定をすることができます。

設置したウィジェット内にある「表示/非表示設定」ボタンを押します。

STEP
ウィジェット内にある「表示/非表示設定」ボタンを押す
THE THOR ウィジェットの表示/非表示設定
「表示/非表示設定」ボタンを押す
STEP
非表示にするページをチェックして保存

モーダルが表示されます。

THE THOR ウィジェットの表示/非表示設定 その2
ウィジェットを非表示にしたいページを選択

上部のタブでページの種類を選択します。
ウィジェットを非表示にしたいページにチェックを入れた後、「設定完了」ボタンを押せばチェックを入れたページでサイドバーを非表示にすることができます。

ここではサイドバーの非表示についてだけ取り上げましたが、その他のウィジェットも同様の手順で非表示にすることができます。

サイドバーのウィジットデザイン設定

SWELLでの設定

SWELLのサイドバーのウィジェットデザインは「外観」→「カスタマイズ」→「サイトの全体設定」→「タイトルデザイン」で行います。

SWELL ウィジェットデザイン設定
SWELL ウィジェットのタイトルデザイン設定

SWELL タイトルデザイン一覧

デザインは4種類です。
PCとスマホでデザインを変えることができます。

下線

SWELL サイドバー タイトルデザイン 下線

左に縦線

SWELL サイドバー タイトルデザイン 左に縦線

左右に横線

SWELL サイドバー タイトルデザイン 左右に横線

塗り

SWELL サイドバー タイトルデザイン 塗り

THE THORでの設定

THE THORのサイドバーのウィジェットデザインは「外観」→「カスタマイズ」→「共通エリア設定[THE]」→「サイドカラムエリア設定」で行います。

THE THOR ウィジェットデザイン設定
THE THOR ウィジェットデザイン設定

タイトルデザインだけでなく、サイドカラム全体のフレームデザイン、各ウィジェットのフレームデザイン、ウィジェットタイトルの色まで細かく設定することができます。

THE THOR ウィジェットの見出しデザイン一覧

角丸(default)

THE THOR サイドバー ウィジェット見出しデザイン 角丸

シンプル

THE THOR サイドバー ウィジェット見出しデザイン シンプル

ボトムボーダー

THE THOR サイドバー ウィジェット見出しデザイン ボトムボーダー

はみ出すボーダー

THE THOR サイドバー ウィジェット見出しデザイン はみ出すボーダー

シンプル(ワイド)

THE THOR サイドバー ウィジェット見出しデザイン シンプル(ワイド)

内側ボーダー(ワイド)

THE THOR サイドバー ウィジェット見出しデザイン 内側ボーダー(ワイド)

サイドカラム全体のフレームデザイン、各ウィジェットのフレームデザインについては、それほど見た目が変わらないので割愛させていただきます。
気になる人はネットで調べてください!(本当にそんな変わらないんで。すいません!)

サイドバー関連のウィジェットエリア

SWELLのウィジェットエリア

SWELLにはサイドバー関連のウィジェットエリアが4つ用意されています。

SWELL サイドバー関連のウィジェットエリア
SWELL サイドバー関連のウィジェットエリア
共通サイドバー

全ページ共通で表示されるサイドバーです。

共通サイドバー【スマホ版】

「共通サイドバー」のスマホ版です。

スマホで表示するサイドバーを変えたい場合はこのウィジェットエリアを使用します。

「共通サイドバー【スマホ版】」に何もウィジェットアイテムが設定されていない場合は、「共通サイドバー」で設定したウィジェットがスマホでも表示されます。

トップページ専用サイドバー

トップページでのみ表示されるウィジェットエリアです。

設定すると「共通サイドバー」の上部に表示されます。

「共通サイドバー」が表示されない訳ではないという点注意です。

追尾サイドバー

「共通サイドバー」の下部に表示され、画面をスクロールしてもサイドバーエリアに表示され続けます。

PCサイズでのみ表示されるサイドバーです。

THE THORのウィジェットエリア

THE THORにはサイドバー関連のウィジェットエリアが2つ用意されています。

THE THOR サイドバー関連のウィジェットエリア
THE THOR サイドバー関連のウィジェットエリア
サイドバーエリア

全ページ共通で表示されるサイドバーです。

追従サイドバーエリア

「サイドバーエリア」の下部に表示され、画面をスクロールしてもサイドバーエリアに表示され続けます。

まとめ

サイドバー関連のウィジェット設定はSWELLの方が使いやすい

SWELLでは「共通サイドバー【スマホ版】」を活用すれば、スマホで表示するサイドバーウィジェットを簡単に変更することができますが、THE THORでは同等のウィジェットエリアが用意されていません。

THE THORでスマホ表示でのサイドバーウィジェットを変更するには、ウィジェットの「表示/非表示設定」→「その他」タブの「スマートフォンでのアクセス」にチェックを入れることで同等の設定が可能です。

詳しい手順については前回の記事の「フッター周りのウィジェット設定」で解説しています。

上記の手順でTHE THORでもサイドバーウィジェットの出し分けが可能とは言ったものの、ウィジェット一つひとつ非表示設定にする必要があり、なおかつウィジェットごとに表示・非表示設定を把握する必要があるため、SWELLよりも運用に手間がかかることが予想されます。

またTHE THORの「ウィジェット表示・非表示」には「トップページ以外」という選択肢が用意されていないため、SWELLの「トップページ専用サイドバー」と同等の設定をすることは難しそうです。

選べるデザインの豊富さか、使い勝手の良さか

サイドバーのレイアウトやデザイン設定に関して言えば、THE THORの方が、細かく設定できるので、この点SWELLよりもTHE THORを選ぶ一つのポイントになるかもしれません。
(でもSWELLのデザインの方が使いやすいと思う!)

一方で、個別ページでのサイドバーの表示・非表示設定やデバイスに応じたサイドバーウィジェットの出し分けに関しては、SWELLの方に取り回しの良さを感じます。

好みの問題だと思いますが、わたしとしては、ウィジェットデザインの豊富さよりもウィジェットの使い勝手の良さの方に魅力を感じます。

もっと気軽に、楽しく記事を書こう。

SWELLとTHE THOR サイドバーの設定の違い

この記事が気に入ったら
いいね または フォローしてね!

よかったらシェアしてね!
URLをコピーする
URLをコピーしました!
  • URLをコピーしました!

この記事を書いた人

satouのアバター satou 金融系Web広告担当

ブログ未経験でいきなりワードプレスからはじめました!金融業界で働くただのWeb広告担当者です。Web広告のことや生活を豊かにする情報をシェアしていきます。
最近はワードプレステーマ『SWELL』にどっぷりハマってます。しばらく『SWELL』についてばかり書くことになりそう。

この記事の目次
閉じる