Q&A
page.php は、固定ページ専用のテンプレートなので、質問に固定ページは、問題ないと書かれているので、問題ないと思います。
投稿の個別ページであれば、single.php だと思います。
基本的にレイアウト崩れは、 HTML と CSS の両方を確認する必要があるのでカスタマイズ部分を確認してみてください。
前提・実現したいこと
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
ご指摘いただき気づきました‥！ありがとうございます。
おっしゃる通り、single.phpの該当箇所<?php thk_call_sidebar(); ?>まわりをもう少し確認してみます。
single.php内の
<?php thk_call_sidebar(); ?>
のコードの位置を変えたところ、コンテナ内には表示されるようになりました。
が、引き続き記事の左下に固定されたままです。
コードの位置が誤っている可能性が高いと思い、いろいろな位置にコードを挿入してみましたが、意図している記事の右側には表示されません。
また、style.cssの方も一通りコードを削除 -> ページを更新して確認してみましたが、特に改善できませんでした。
HTMLについてはルクセリタスの場合どこで編集してよいのかがわからず、まだ確認できていません。
GoogleDEV Toolを使ってみると、何が良くないかがわかると思います。
https://www.youtube.com/watch?v=z582Z6dENGA
レイアウト崩れにおいてよくある原因はタグの個数があっていなかったり、タグの位置がおかしい場合に起こりやすいです。ですので、まずは発行されているHTMLを確認しないことにはどこが間違っているのか判別することができません。発行されているHTMLを見たい場合、該当ページを右クリックし、ソースの表示でも確認することができます。またchromeの開発者ツールでもより詳しいことがわかると思います。
どちらかの方法で発行されているHTMLを確認し、<body>内を質問欄に張ることで回答が得られる可能性もあります。公開したくない情報は伏字にしたり別の文字に置き換えたりして質問欄に載せてみてはいかがでしょうか？
>happyteethago 様
>beginner_t 様
ご返信ありがとうございます！
返信が遅れてしまって申し訳ありません。全て回答には目を通させてもらっています。
現在GoogleDEVToolを使って確認しており、いくつかエラーで赤くなっている部分があるのでおそらくそのあたりが怪しいかもしれないと思っています。
具体的には</dev>などの位置か個数が誤っていると予測していじってはいるのですが、まだ解決していない状態です。
該当ページの<body>を貼ろうと思ったのですが、具体的な問題箇所がわからず全て貼りつけるとかなり長くなってしまうため、該当のサイトのURLを共有します。
https://tashi-log.com/hello-world/
テーマが Luxeritas なら、カスタマイザーの「カラム操作」でカラム数を設定できますが、そこは2カラムになってますか。テーマの設定でできることを、下手にPHPで変更しない方かいいと思います。
変更は、Child Theme の方でおこなってますか。だとしたら、Child Theme を一度オリジナルに戻してみて、上記のカラム操作で2カラムにしてみてください。
>hatena19 様
ご返信いただきありがとうございます！
カスタマイザーのカラム操作については、該当箇所は全て2カラムになっています。
また、Luxeritasに変更機能がない外観などの編集は全てChild Themeのstyle.cssに追記して変更しています。
「Child Theme を一度オリジナルに戻す」とのことですが、一度公式から同じバージョンを落としてきてそれに置き換えるということで合っているでしょうか？
または編集しているstyle.cssを一度すべて消すということでしょうか。
style.cssを一度すべて消すことについては何度か試しているのですが、特に変化はありませんでした。
同バージョンに置き換えることはまだやったことがありませんが、以前サイトのバージョンの更新を失敗したことがあり、あまり正確に置き換えられる自信がありません‥。(一応毎日差分のバックアップは取っています)
回答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列表示にできるはずです。
投稿2020/08/30 15:38
総合スコア34075
>hatena19 様
度々丁寧に教えていただきありがとうございます！
サイドバーの構成についてなど、目からウロコでした。
取り急ぎ、現在の状況をご報告します。
だいぶ前でどこを具体的にいじったか自信がなかったので、親テーマ・子テーマそれぞれの触った可能性がある以下のPHPファイルをLuxeritas公式のファイルに、FTPでそれぞれ上書きしてみました。
(あまりサイドバーと関係がなさそうなファイルもありますが、念のため)
・single.php
・sidebar-amp.php
・sidebar-left.php
・home.php
ですが、状況は変わりませんでした。
そのため、ご教示いただいた海燕 CAYENNEサイトの2つ目の方法「[2]ダッシュボードからアップデートする」について、これから行ってみる予定です。
終了したらまた結果をご報告させていただきます。
>hatena19 様
2つ目の方法、海燕 CAYENNEサイトの「[2]ダッシュボードからアップデートする」の一度別のテーマにしてLuxeritas子テーマを削除しダウンロードしてきたデフォルトファイルをアップロードする、について行ってみました。
が、それでも状況は変わりませんでした‥。
ダメ元で、上記対応後に再度Luxeritasのカスタマイズからカラム数を2に変更してみましたが、やはり変化なし。
相変わらず個別ページにはサイドバーが横に表示されず、固定ページにはきちんと表示されます。
ちなみに、カラム数を1や3にすると画面が崩れますが意図したとおりに1カラム3カラムに表示されるので、カラム数設定は(2以外は？)適応されてはいるようです。
記述の順番が違うということはご教示いただいた通り明らかなので、そのあたりをいじればよいのかもしれませんが‥手詰まってます。
親テーマ、子テーマを公式のものに上書きしても、改善されないんですか。
それ以外でページのHTMLの基本構成が変わるというものはないように思います。
私には、これ以上のアドバイスは難しいですね。
>hatena19 様
度々すみません！
昨日は子テーマのみをアップデートしていたのですが、つい先ほどLuxeritasの親テーマも同様にアップデートしたところ、無事個別ページにもサイドバーが横に表示されるようになりました‥！
おっしゃる通り、以前PHPファイルをいじってしまったことが原因だった可能性が高そうです。
度々にわたってわかりやすくアドバイスをいただき、本当にありがとうございました！
あなたの回答
tips
プレビュー
