質問をすることでしか得られない、回答やアドバイスがある。

15分調べてもわからないことは、質問しよう!

新規登録して質問してみよう
ただいま回答率
85.50%
WordPress

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

PHP

PHPは、Webサイト構築に特化して開発されたプログラミング言語です。大きな特徴のひとつは、HTMLに直接プログラムを埋め込むことができるという点です。PHPを用いることで、HTMLを動的コンテンツとして出力できます。HTMLがそのままブラウザに表示されるのに対し、PHPプログラムはサーバ側で実行された結果がブラウザに表示されるため、PHPスクリプトは「サーバサイドスクリプト」と呼ばれています。

CSS

CSSはXMLやHTMLで表現した色・レイアウト・フォントなどの要素を指示する仕様の1つです。

Q&A

解決済

1回答

2320閲覧

サイトの個別ページのサイドバーが下に表示されてしまうため、右側に表示させたい

chocolatexxx

総合スコア1

WordPress

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

PHP

PHPは、Webサイト構築に特化して開発されたプログラミング言語です。大きな特徴のひとつは、HTMLに直接プログラムを埋め込むことができるという点です。PHPを用いることで、HTMLを動的コンテンツとして出力できます。HTMLがそのままブラウザに表示されるのに対し、PHPプログラムはサーバ側で実行された結果がブラウザに表示されるため、PHPスクリプトは「サーバサイドスクリプト」と呼ばれています。

CSS

CSSはXMLやHTMLで表現した色・レイアウト・フォントなどの要素を指示する仕様の1つです。

0グッド

1クリップ

投稿2020/08/10 13:33

編集2020/08/10 15:14

前提・実現したいこと

WordPressでブログを作成していますが、PCのブラウザで表示すると、個別ページのみサイドバーがコンテナ内に表示されず、最下部(正確には左下)に表示されてしまうため、なんとか意図していた通り記事の右側に表示させたいです。
固定ページは特に問題なく、設定通り記事のすぐ右側に表示されます。

発生している問題・エラーメッセージ

個別ページのみ、PCのブラウザで表示するとサイドバーがコンテナ内に表示されず、最下部(正確には左下)に表示されてしまう。

該当のソースコード

single.php内の以下の部分付近が怪しいかと思っています。

php

1<?php 2} 3?> 4</aside> 5</article> 6<?php thk_call_sidebar(); ?> 7<!--/#primary--> 8<?php echo apply_filters( 'thk_footer', '' ); ?>

試したこと

・個別ページのテーマファイルの記述が誤っていないか
->うまくいっている別サイトのpage.phpの中身をそのままコピペで上書きしてみたが、直らず。
また、style.cssを全て消してみたが直らず。

追記

<?php thk_call_sidebar(); ?>

の記述の位置を変えたところ、コンテナ内には表示されるようになりましたが、引き続き記事の左下に固定されたままです。
コードの位置が誤っている可能性が高いと思い、正常に動作している固定ページのpages.phpを参考にいろいろな位置にコードを挿入してみましたが、意図する記事の右側に表示されません。

・プラグインが影響していないか
->全てひとつずつ停止してみたが直らず。

・サイトのグリッドレイアウトやカラム数が影響していないか
->うまくいっている別サイトと同じ設定にしてみたが直らず。

・ウィジェットの設定
->ダッシュボードから確認したが、特に問題なさそう。

補足情報(FW/ツールのバージョンなど)

・WordPressのバージョン:
5.1

・使用しているテーマ:
Luxeritasバージョン: 3.9.1
Luxeritas Child Themeバージョン: 3.0.0

気になる質問をクリップする

クリップした質問は、後からいつでもMYページで確認できます。

またクリップした質問に回答があった際、通知やメールを受け取ることができます。

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

CHERRY

2020/08/10 14:33

page.php は、固定ページ専用のテンプレートなので、質問に固定ページは、問題ないと書かれているので、問題ないと思います。 投稿の個別ページであれば、single.php だと思います。 基本的にレイアウト崩れは、 HTML と CSS の両方を確認する必要があるのでカスタマイズ部分を確認してみてください。
chocolatexxx

2020/08/10 14:49

ご指摘いただき気づきました‥!ありがとうございます。 おっしゃる通り、single.phpの該当箇所<?php thk_call_sidebar(); ?>まわりをもう少し確認してみます。
chocolatexxx

2020/08/10 15:56 編集

single.php内の <?php thk_call_sidebar(); ?> のコードの位置を変えたところ、コンテナ内には表示されるようになりました。 が、引き続き記事の左下に固定されたままです。 コードの位置が誤っている可能性が高いと思い、いろいろな位置にコードを挿入してみましたが、意図している記事の右側には表示されません。 また、style.cssの方も一通りコードを削除 -> ページを更新して確認してみましたが、特に改善できませんでした。 HTMLについてはルクセリタスの場合どこで編集してよいのかがわからず、まだ確認できていません。
beginner_t

2020/08/28 01:31

レイアウト崩れにおいてよくある原因はタグの個数があっていなかったり、タグの位置がおかしい場合に起こりやすいです。ですので、まずは発行されているHTMLを確認しないことにはどこが間違っているのか判別することができません。発行されているHTMLを見たい場合、該当ページを右クリックし、ソースの表示でも確認することができます。またchromeの開発者ツールでもより詳しいことがわかると思います。 どちらかの方法で発行されているHTMLを確認し、<body>内を質問欄に張ることで回答が得られる可能性もあります。公開したくない情報は伏字にしたり別の文字に置き換えたりして質問欄に載せてみてはいかがでしょうか?
chocolatexxx

2020/08/30 06:13

>happyteethago 様 >beginner_t 様 ご返信ありがとうございます! 返信が遅れてしまって申し訳ありません。全て回答には目を通させてもらっています。 現在GoogleDEVToolを使って確認しており、いくつかエラーで赤くなっている部分があるのでおそらくそのあたりが怪しいかもしれないと思っています。 具体的には</dev>などの位置か個数が誤っていると予測していじってはいるのですが、まだ解決していない状態です。 該当ページの<body>を貼ろうと思ったのですが、具体的な問題箇所がわからず全て貼りつけるとかなり長くなってしまうため、該当のサイトのURLを共有します。 https://tashi-log.com/hello-world/
hatena19

2020/08/30 13:30

テーマが Luxeritas なら、カスタマイザーの「カラム操作」でカラム数を設定できますが、そこは2カラムになってますか。テーマの設定でできることを、下手にPHPで変更しない方かいいと思います。 変更は、Child Theme の方でおこなってますか。だとしたら、Child Theme を一度オリジナルに戻してみて、上記のカラム操作で2カラムにしてみてください。
chocolatexxx

2020/08/30 16:03 編集

>hatena19 様 ご返信いただきありがとうございます! カスタマイザーのカラム操作については、該当箇所は全て2カラムになっています。 また、Luxeritasに変更機能がない外観などの編集は全てChild Themeのstyle.cssに追記して変更しています。 「Child Theme を一度オリジナルに戻す」とのことですが、一度公式から同じバージョンを落としてきてそれに置き換えるということで合っているでしょうか? または編集しているstyle.cssを一度すべて消すということでしょうか。 style.cssを一度すべて消すことについては何度か試しているのですが、特に変化はありませんでした。 同バージョンに置き換えることはまだやったことがありませんが、以前サイトのバージョンの更新を失敗したことがあり、あまり正確に置き換えられる自信がありません‥。(一応毎日差分のバックアップは取っています)
guest

回答1

0

ベストアンサー

実は私のブログもLuxeritasを使用しています。
私のブログでは投稿ページは2カラム表示になってます。
デベロッパーツールで確認してみると、
私のブログでは下記のような構成

html

1<div id="primary"> 2 <main id="mmain"></main> 3 <div id="sidebar"></div> 4<duv>

chocolatexxxさんのブログでは下記のような構成

html

1<div id="primary"> 2 <main id="mmain"></main> 3<duv> 4<div id="sidebar"></div>

sidebar を primary の中に移動出来れば2列表示になると思います。
Luxeritasは高機能なテーマなので、いろいろ複雑なことをしているようです。その辺を理解せずにPHPファイルを修正するのは危険だと思います。

子テーマ内のPHPファイルを修正していると思いますので、修正したPHPファイルを、公式ファイルからダウンロードしてきた子テーマのものと置き換えてオリジナルに戻すのを推奨します。
FTPソフトを使って修正したPHPファイルを上書きアップロードすることになります。

これの作業に自信がないなら、下記を参考に子テーマ自体をアップデイトするのがいいでしょう。

WordPressテーマ「Luxeritas」の子テーマ(Luxeritas Child Theme)を最新バージョンにアップデートする手順を詳しくわかりやすく解説します。 | 海燕 CAYENNE

これでオリジナルの状態に戻れば、カスタマイザーの「カラム操作」で2列表示にできるはずです。

Luxeritas(ルクセリタス)でカラム操作の使い方をわかりやすく図解解説しよう!【初心者向け】 | 副業ネット

投稿2020/08/30 15:38

hatena19

総合スコア33620

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

chocolatexxx

2020/09/02 13:56

>hatena19 様 度々丁寧に教えていただきありがとうございます! サイドバーの構成についてなど、目からウロコでした。 取り急ぎ、現在の状況をご報告します。 だいぶ前でどこを具体的にいじったか自信がなかったので、親テーマ・子テーマそれぞれの触った可能性がある以下のPHPファイルをLuxeritas公式のファイルに、FTPでそれぞれ上書きしてみました。 (あまりサイドバーと関係がなさそうなファイルもありますが、念のため) ・single.php ・sidebar-amp.php ・sidebar-left.php ・home.php ですが、状況は変わりませんでした。 そのため、ご教示いただいた海燕 CAYENNEサイトの2つ目の方法「[2]ダッシュボードからアップデートする」について、これから行ってみる予定です。 終了したらまた結果をご報告させていただきます。
chocolatexxx

2020/09/02 14:24

>hatena19 様 2つ目の方法、海燕 CAYENNEサイトの「[2]ダッシュボードからアップデートする」の一度別のテーマにしてLuxeritas子テーマを削除しダウンロードしてきたデフォルトファイルをアップロードする、について行ってみました。 が、それでも状況は変わりませんでした‥。 ダメ元で、上記対応後に再度Luxeritasのカスタマイズからカラム数を2に変更してみましたが、やはり変化なし。 相変わらず個別ページにはサイドバーが横に表示されず、固定ページにはきちんと表示されます。 ちなみに、カラム数を1や3にすると画面が崩れますが意図したとおりに1カラム3カラムに表示されるので、カラム数設定は(2以外は?)適応されてはいるようです。 記述の順番が違うということはご教示いただいた通り明らかなので、そのあたりをいじればよいのかもしれませんが‥手詰まってます。
hatena19

2020/09/03 01:40

親テーマ、子テーマを公式のものに上書きしても、改善されないんですか。 それ以外でページのHTMLの基本構成が変わるというものはないように思います。 私には、これ以上のアドバイスは難しいですね。
chocolatexxx

2020/09/03 11:51

>hatena19 様 度々すみません! 昨日は子テーマのみをアップデートしていたのですが、つい先ほどLuxeritasの親テーマも同様にアップデートしたところ、無事個別ページにもサイドバーが横に表示されるようになりました‥! おっしゃる通り、以前PHPファイルをいじってしまったことが原因だった可能性が高そうです。 度々にわたってわかりやすくアドバイスをいただき、本当にありがとうございました!
guest

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

15分調べてもわからないことは
teratailで質問しよう!

ただいまの回答率
85.50%

質問をまとめることで
思考を整理して素早く解決

テンプレート機能で
簡単に質問をまとめる

質問する

関連した質問