【WordPress】Sampression Liteテーマのメインページにサイドバーを追加したい

Question

Wordpressのテーマでレイアウト修正がしたいのですが、実装方法が分からないため質問させてください。

##概要
**Sampression Lite（バージョン: 2.2.2）**において、メインページに記事が4列で表示されるのですが、
右端にサイドバーを追加したいと思っています。

##詳細
メインページ画面です。右端にサイドバーを表示したいと思っています。

このテーマの仕様で、サイドバーはメインページではなく、記事の画面にいかないと表示されないようになっています。（下図の赤枠部分）

サイドバーをメインページに表示させるため、以下実装を試みたのですが、レイアウトが崩れてうまく実装できませんでした。
① sidebar-right.phpから<aside class="columns three sidebar sidebar-right">～</aside>を修正した以下コードを用意。

<aside class="columns three sidebar sidebar-right" style="float:right">
　<?php dynamic_sidebar( 'right-sidebar' ) ?>
</aside>

② 作成したコードをindex.php以下赤枠部分に挿入して保存。

③ メインページを見ると、右端の記事とサイドバーが重複してしまう。

原因と思われる箇所

loop.phpの以下赤枠部分が、メインページの各記事の表示部分になるのですが、
ブラウザでコードを見ると、なぜかstyle="～"が追加された状態で表示されているようです。

赤枠の部分がどういうロジックで追加されているのか、left: 〇〇pxの〇〇の計算ロジックが分かれば解決しそうな課題かと考えています。

長文になってしまい恐縮ですが、何か分かる方がいらっしゃいましたら、
ご回答のほどよろしくお願いいたします。

Comments

[marlboro_tata]

ご利用中のテーマについてはまだ詳しく調べていないのですが、<article>要素に追加されているleftとかの要素は、記事をタイル状に並べるために追加されているものだと思うので、それは、触れてはならないものかと、推測します。
それと、　② 作成したコードをindex.php以下赤枠部分に挿入して保存。　のところで、
div.post-listing よりも「外に」追加したいサイドバーのコードを入れるべきなように思います。
そのうえで、CSSも少し直さなければならないかな、、と思います。。。

Answer 1

サイドバーを追加する位置が、ちょっと良くないのかな、という風に見えました。

まず、一旦サイドバーのコードを外して、記事が敷き詰められている領域を、サイドバー分、狭くします。

//index.php
<section id="content" class="clearfix">

を

//index.php
<section id="content" class="clearfix columns nine">

こんな感じでいけるかと。single.phpを参考にしました。

次に、サイドバーの追加ですが、これもsingle.phpを参考にして、同じサイドバーを入れるとして、

//index.php
</section>
<?php
get_footer();

を

//index.php
</section>
<?php get_sidebar( 'right' ); ?>

<?php
get_footer();

こんな感じではないかな〜、と思います。
実際の環境では試してみてないですが・・・・。

Comments

[irohamaru]

回答ありがとうございます！
ご教示頂いた内容でバッチリでした☆
大変助かりました。ありがとうございました！

[marlboro_tata]

何よりです〜