質問編集履歴

2 微修正

irohamaru

irohamaru score 15

2020/03/21 11:04  投稿

【WordPress】Sampression Liteテーマのメインページにサイドバーを追加したい
Wordpressのテーマでレイアウト修正がしたいのですが、実装方法が分からないため質問させてください。
##概要
**Sampression Lite(バージョン: 2.2.2)**において、メインページに記事が4列で表示されるのですが、
右端にサイドバーを追加したいと思っています。
##詳細
メインページ画面です。右端にサイドバーを表示したいと思っています。  
![イメージ説明](754302bd757888b7183ea00e32616595.png)
このテーマの仕様で、サイドバーはメインページではなく、記事の画面にいかないと表示されないようになっています。(下図の赤枠部分)
![イメージ説明](216401c2cbe5ecaa40455d3075427ba5.png)
サイドバーをメインページに表示させるため、以下実装を試みたのですが、レイアウトが崩れてうまく実装できませんでした。
① sidebar-right.phpから<aside class="columns three sidebar sidebar-right">~</aside>を修正した以下コードを用意。
```html
<aside class="columns three sidebar sidebar-right" style="float:right">
 <?php dynamic_sidebar( 'right-sidebar' ) ?>
</aside>
```
② 作成したコードをindex.php以下赤枠部分に挿入して保存。
![イメージ説明](82dfed0d2a10190040fbba0d5fd94a45.png)
③ メインページを見ると、右端の記事とサイドバーが重複してしまう。
![イメージ説明](05ae96984a90905532a0f7604c950372.png)
## 原因と思われる箇所
loop.phpの以下赤枠部分が、メインページの各記事の表示部分になるのですが、
ブラウザでコードを見ると、なぜかstyle="~"が追加された状態で表示されているようです。
![イメージ説明](163d5d26817345bcba0d08f1f234d606.png)
![イメージ説明](20c6e443041e364d2ae6e09440fe0677.png)
赤枠の部分がどういうロジックで追加されているのか、left: 〇〇pxの〇〇の計算ロジックが分かれば解決しそうな課題かと考えています。
長文になってしまい恐縮ですが、何か分かる方がいらっしゃいましたら、
ご回答のほどよろしくお願いいたします。
  • WordPress

    15095 questions

    WordPressは、PHPで開発されているオープンソースのブログソフトウェアです。データベース管理システムにはMySQLを用いています。フリーのブログソフトウェアの中では最も人気が高く、PHPとHTMLを使って簡単にテンプレートをカスタマイズすることができます。

1 微修正

irohamaru

irohamaru score 15

2020/03/21 10:51  投稿

【WordPress】Sampression Liteテーマのメインページにサイドバーを追加したい
Wordpressのテーマでレイアウト修正がしたいのですが、実装方法が分からないため質問させてください。
##概要
**Sampression Lite(バージョン: 2.2.2)**において、メインページに記事が4列で表示されるのですが、
右端にサイドバーを追加したいと思っています。
##詳細
![イメージ説明](754302bd757888b7183ea00e32616595.png)
このテーマの仕様で、サイドバーはメインページではなく、記事の画面にいかないと表示されないようになっています。(下図の赤枠部分)
![イメージ説明](216401c2cbe5ecaa40455d3075427ba5.png)
サイドバーをメインページに表示させるため、以下実装を試みたのですが、レイアウトが崩れてうまく実装できませんでした。
1. sidebar-right.phpから<aside class="columns three sidebar sidebar-right">~</aside>を修正した以下コードを用意。
sidebar-right.phpから<aside class="columns three sidebar sidebar-right">~</aside>を修正した以下コードを用意。
```html
<aside class="columns three sidebar sidebar-right" style="float:right">
 <?php dynamic_sidebar( 'right-sidebar' ) ?>
</aside>
```
2. 1で作成したコードをindex.php以下赤枠部分に挿入して保存。
作成したコードをindex.php以下赤枠部分に挿入して保存。
![イメージ説明](82dfed0d2a10190040fbba0d5fd94a45.png)
3. メインページを見ると、右端の記事とサイドバーが重複してしまう。
メインページを見ると、右端の記事とサイドバーが重複してしまう。
![イメージ説明](05ae96984a90905532a0f7604c950372.png)
## 原因と思われる箇所
loop.phpの以下赤枠部分が、メインページの各記事の表示部分になるのですが、
ブラウザでコードを見ると、なぜかstyle="~"が追加された状態で表示されているようです。
![イメージ説明](163d5d26817345bcba0d08f1f234d606.png)
![イメージ説明](20c6e443041e364d2ae6e09440fe0677.png)
赤枠の部分がどういうロジックで追加されているのか、left: 〇〇pxの〇〇の計算ロジックが分かれば解決しそうな課題かと考えています。
長文になってしまい恐縮ですが、何か分かる方がいらっしゃいましたら、
ご回答のほどよろしくお願いいたします。
  • WordPress

    15095 questions

    WordPressは、PHPで開発されているオープンソースのブログソフトウェアです。データベース管理システムにはMySQLを用いています。フリーのブログソフトウェアの中では最も人気が高く、PHPとHTMLを使って簡単にテンプレートをカスタマイズすることができます。

思考するエンジニアのためのQ&Aサイト「teratail」について詳しく知る