WordPress サイドバーをフロントページでは左、投稿ページでは右に設定したい。

Question

実現したい事

WordPressで、Cocoonを使用しています。
サイドバーを(サイトを開いた時に一番最初に表示される)フロントページでは左に配置し、投稿ページでは右に表示したいと考えています。
設定の方法があれば教えて下さい。

なお、フロントページのサイドバー(左)には、カテゴリーの一覧を、
投稿ページのサイドバー(右)には、投稿ページの内容の見出しを、
それぞれリストのような形式で表示したいと考えています。

発生している問題

「Cocoon設定」⇒「全体」タブから『サイドバーの位置』に
〇サイドバー右
〇サイドバー左
というラジオボックスがあります。
このどちらかを選択すると、フロントページ、投稿ページともにサイドバーの位置が変わってしまいます。

Answer 1

基本右に設定しておいて、フロントページのみ左に来るようにCSSで記述してやれば良いのではないかと。

ご要望があったためサンプルコード追記

.home #sidebar {
    order: -1;
}

以下蛇足です。
サイドバーは左右どちらかに決めた方が、訪問者にやさしいです。

Comments

[emikichi]

ご回答、ありがとうございます。
フロントページのみ左に来るようなCSSの参考ソースコードなどがありましたら記載して頂けないでしょうか。

[退会済みユーザー]

探すよりも書いた方が早そうだったので手打ちしました。
cocoon使ってそうなサイトで試したので動くとは思いますが保証はできません。
※コードは回答に足してあります。

[emikichi]

ありがとうございます。フロントページでは、目次としての使い方、投稿ページでは見出し(H2など)の表示をする為、左右で使い分けようかと考えています。
すみません。お教え頂いたCSSは、どこに記述すれば良いでしょうか？
「外観」⇒「テーマエディター」の下記の下に追記しましたが、動作しませんでした。
/************************************
** 子テーマ用のスタイルを書く
************************************/
/*必要ならばここにコードを書く*/

[退会済みユーザー]

「子テーマ用のスタイル」とあるので、
親ファイルを編集するとアプデで元に戻るという知識があり、
なおかつ子テーマを適用してるという前提で考えますと…

キャッシュが効いているだけじゃないかなぁと愚考いたします。
ブラウザのキャッシュをクリアして再度ご確認いただけますでしょうか。

追記　テーマをインストールして確認しましたが、CSSは効きました。
「ファイルを更新」を押していないというオチが無いことを祈ります。

[emikichi]

はい。子テーマを適用しています。
ブラウザのキャッシュですね。キャッシュクリア方法が分かりませんが、頑張ってみます。（Chromeの「このページを再読み込みします」では更新されませんでした。）

[退会済みユーザー]

それは通常のリロードです。
F12を押して検証ツールを出した状態でリロードボタンを右クリック
キャッシュの消去とハード再読み込みを選んでください。

[emikichi]

やってみました。F12で出てくる画面を初めて見ました。
キャッシュの消去とハード再読み込みを選びましたが、変わりませんでした。
まだ、
.home #sidebar {
order: -1;
}
の記述が効果が出ていない状況です。（フロントページでサイドバーが右）

[退会済みユーザー]

.home {background: red;}等でCSSファイルへの記述が有効であるか確認してみてください。

[emikichi]

繰返しお教え頂き、ありがとうございます。
.home {background: red;}
を記入して、何度か更新したところ、CSSが無事反映されるようになりました。これと同時に
.home #sidebar {
order: -1;
}
も反映されました。昨日は何度トライしても反映されなかったのですが。
おかげで、やりたかったことが出来るようになりました。
本当にありがとうございました。