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

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

ただいまの
回答率

90.52%

  • PHP

    23495questions

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

  • WordPress

    8723questions

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

wordpressのオリジナルテーマを作成中。index.phpの表示がsingle.phpとpage.phpとは異なることについて

解決済

回答 3

投稿

  • 評価
  • クリップ 0
  • VIEW 636

sungood

score 2

前提・実現したいこと

wordpressのオリジナルテーマのindex.phpと他のsingle.phpとpage.phpで見た目が変化しないようにしたい

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

ローカル環境(XAMPP)でwordpressのオリジナルテーマを作成中。まず、htmlファイルを作り、それをindex.phpに変換し、ループなどテーマに必要なタグを挿入しました。

このindex.phpをpage.php、single.phpに複製し、ブラウザで表示したところindex.phpだけ表示位置が右に15px程度ずれます。

エラーメッセージ
エラーメッセージは表示されません。

該当のソースコード

【index.phpの記述内容】
<?php get_header(); ?>
<div class="row rowV">
  <!-- メインカラム -->
  <div class="colSm70">
    <div class="container">
    <section>
      <?php if (have_posts() ) : while (have_posts() ) : the_post(); ?>
        <div class="post">
          <div class="post-header">
            <h2> <a href="<?php the_permalink(); ?>"><?php the_title(); ?></a> </h2>
            <div class="post-meta">
              <?php echo get_the_date(); ?><?php the_category(', ') ?></div>
          </div>
          <div class="post-content">
            <div class="post-body">
              <?php the_excerpt(); ?>
            </div>
          </div>
      <?php endwhile; else: ?>
        <p>記事はありません</p>
      <?php endif; ?>
      </div>
    </section>
      <nav>
        <div class="prenex">
          <div class="prev"><?php previous_posts_link(); ?></div>
          <div class="next"><?php next_posts_link(); ?></div>
        </div>
      </nav>
    </div>
  </div>
  <?php get_sidebar(); ?>
</div>
<?php get_footer(); ?>
【CSS側の記述】
html {
  /* ベースとなるフォントの設定計算しやすいように10pxにする */
font-size: 62.5%;
/*max-width: 1170px !important;*/
margin: 0 auto !important;
padding: 0 !important;
}
/* 10px=1.0rem 古いブラウザ対応のためpx単位も併記 */
body{
  font-size: 16px;
  font-size: 1.6rem;
  font-family: 'Hiragino Sans','ヒラギノ角ゴシック','Hiragino Kaku Gothic Pro','ヒラギノ角ゴ Pro W3','メイリオ','Meiryo','MS Pゴシック',Osaka,Verdana,sans-serif;
  color: #333;
  -webkit-text-size-adjust: 100%;
  font-feature-settings : "palt" 1;
  background-color: lime;
}
/* 共通設定 */
*, *:before, *:after {
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  -o-box-sizing: border-box;
  -ms-box-sizing: border-box;
  box-sizing: border-box;
}
/* グローバルナビ設定 */
.menu{
  font-size: 14px;
  font-size: 1.4rem;
  margin: 0 0 30px 0;
  padding: 0;
  background-color: #f39800;
  width: 100%;
  max-width: 100%;
}
.menu > li{
  display: inline-block;
  width: 19%;
  text-align: center;
  margin: 0;
}
.menu a {
  color: #fff;
  display: block;
  padding: 10px 0;
}
.menu a:hover{
  background-color: #ffc35c;
}
/* 投稿設定 */
.post{
  margin-bottom: 30px;
}
.post-header{
  margin-bottom: 15px;
}
.post-header h2{
  font-size: 20px;
  font-size: 2.0rem;
  font-weight: bold;
  padding: 0;
}
.post-meta{
  font-size: 12px;
  font-size: 1.2rem;
  padding: 7px 0;
  color: #666;
}
.post-content{
}
.post-body{
}
/* prenex設定 */
.prenex{
  padding: 10px 0;
  font-size: 12px;
  font-size: 1.2rem;
  margin-bottom: 15px;
  text-align: right;
  width: 100%;
  max-width: 100%;
}
.prev, .next{
  display: inline-block;
  width: 20%;
}
/* カラム共通設定 単純にするためにカラムは10で分ける */
.container{
  padding-right: 15px;
  padding-left: 15px;
  margin-left: auto;
  margin-right: auto;
}
.row {
  display: flex;
  display: -webkit-flex;
  /*margin: 0 -15px;*/
}
.colXs100, .colXs70, .colXs30, .colSm70, .colSm30, .colLg70, .colLg30, .colXl70, .colXl30{
  padding-left: 15px;
  padding-right: 15px;
  position: relative;
  min-height: 1px;
}
.colXs100{
  width: 100%;
}
.colXs70{
  width: 70%;
}
.colXs30{
  width: 30%;
}
/* レスポンシブのためのメディア設定 小さいものを基準に大きい時の設定を記述(モバイルファースト) */
/* Bootstrapのメディア設定と同じ */
/* smart phone */
@media screen and (max-width: 767px){
  .rowV{ /* スマホサイトではメインとサイドを縦積みにする */
    -webkit-flex-direction: column; /* Safari */
    flex-direction:         column;
  }
}

試したこと

課題に対してアプローチしたことを記載してください
index.phpの各パーツ、CSSのマージンやパディングをコメントアウトして挙動を確認しました。

post-bodyの部分をコメントアウトすると全体がずれることがなくなり、70%に設定している左カラムが一文字分程度広がるのみとなります。

複製したそのままのsingle.phpやpage.phpではこうしたことが起こらないのでループによって記事が3個読み込まれることによって全体がずれるといったことになっているのではないかと推測していますが、ずれる量が15px程度で、マージンの設定はループの外に出しているので原因はわからないままです。

試しにpost-bodyなどのループの中でマージン、パディングを設定したところ、やはり3回分、45px程度ずれます。

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

より詳細な情報
Windows7、Xamppのローカル環境、エディタはAtomで制作中です。
修正点などご教示いただけましたら幸いです。
よろしくお願いします。

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

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

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

    クリップを取り消します

  • 良い質問の評価を上げる

    以下のような質問は評価を上げましょう

    • 質問内容が明確
    • 自分も答えを知りたい
    • 質問者以外のユーザにも役立つ

    評価が高い質問は、TOPページの「注目」タブのフィードに表示されやすくなります。

    質問の評価を上げたことを取り消します

  • 評価を下げられる数の上限に達しました

    評価を下げることができません

    • 1日5回まで評価を下げられます
    • 1日に1ユーザに対して2回まで評価を下げられます

    質問の評価を下げる

    teratailでは下記のような質問を「具体的に困っていることがない質問」、「サイトポリシーに違反する質問」と定義し、推奨していません。

    • プログラミングに関係のない質問
    • やってほしいことだけを記載した丸投げの質問
    • 問題・課題が含まれていない質問
    • 意図的に内容が抹消された質問
    • 広告と受け取られるような投稿

    評価が下がると、TOPページの「アクティブ」「注目」タブのフィードに表示されにくくなります。

    質問の評価を下げたことを取り消します

    この機能は開放されていません

    評価を下げる条件を満たしてません

    評価を下げる理由を選択してください

    詳細な説明はこちら

    上記に当てはまらず、質問内容が明確になっていない質問には「情報の追加・修正依頼」機能からコメントをしてください。

    質問の評価を下げる機能の利用条件

    この機能を利用するためには、以下の事項を行う必要があります。

質問への追記・修正、ベストアンサー選択の依頼

  • 8-0_nyan5

    2017/02/02 09:28

    </section>前の</div>の位置が違うような気がします。違うかな?

    キャンセル

  • sungood

    2017/02/02 11:09 編集

    ご連絡ありがとうございます。

    確かに、不自然な感じがしたのでendwhileの前、endwhileとelseの間にそれぞれ入れて表示を試してみたところ、ページの開始位置は変わらず、70%のブロックの部分が一文字分程度index.phpを表示させると広がり、その分ページ全体が右に広がります。

    また、containerクラスをrowの上に持って行ってcontainerとrowをsidebarを読み込んだ後に終了させ、投稿の概要を読み込んでいる部分(<div class="post-content">~)をコメントアウトするとこうした表示の問題はなくなります。なので、ループが原因では、と疑っているのですが解決に至らないのが現状です。

    キャンセル

  • miz

    2017/02/02 17:23

    Webブラウザの開発者ツール(デベロッパーツール)を使用して、どのスタイルが適用されているかを確認されてはいかがですか?

    キャンセル

回答 3

+2

表示されているhtml <div>~</div>だけ見てみると、ループの中の数が違うので、
<section>の後に <div class="post">を持って行くか、
</section>の前の</div><?php endwhile; else: ?>の前に持って行けばいいのではないでしょうか。

    

投稿

  • 回答の評価を上げる

    以下のような回答は評価を上げましょう

    • 正しい回答
    • わかりやすい回答
    • ためになる回答

    評価が高い回答ほどページの上位に表示されます。

  • 回答の評価を下げる

    下記のような回答は推奨されていません。

    • 間違っている回答
    • 質問の回答になっていない投稿
    • スパムや攻撃的な表現を用いた投稿

    評価を下げる際はその理由を明確に伝え、適切な回答に修正してもらいましょう。

  • 2017/02/02 12:48

    ご回答ありがとうございます。
    確かに、ループの中の<div>の数が違いました。
    お伝えいただいた両方を実施し、表示を確認したところ、ウェブサイトの表示位置、左側はずれないのですが、70%のボックスが一文字分程度(15px)程度広がる状態です。
    不思議なのは</section>の前の<div>を<?php endwhile; else: ?>の前に持っていき、<div class="post">を<section>の後に入れる(間違った状態)にすると、index.phpだけがレイアウトが崩れるようになります。
    設定で一覧表示する記事数を3にしているのですが、3番目の記事だけが1,2番目の記事の右側にきて、サイドバーはカラム落ちするようになります。
    このことは今回のエラーと関係しているかはわかりませんが、複製したpage.phpとsingle.phpでは何も起こらず、index.phpだけが動きます。
    ループの中の<div>の数を直して<div class="post-content>~</div>部分をコメントアウトすると表示の問題が改善されるので、今のところ現状に変化がない状態です。

    キャンセル

  • 2017/02/02 13:00

    いえ、違います。
    移動させるのは、どちらか一方です。
    デザイン的にどうするかこちらではわからないので、とりあえず、両方示しました。

    キャンセル

  • 2017/02/02 13:28

    すみません、言葉が足りませんでした。ご提示いただいたどちらか一方を動かす方法を両方とも試しましたという意味です。
    ループの中で<div></div>の対を作る、ということですよね。自分が最初に記載したものですと<div>または</div>が一つループの外に出ていました。
    しかしながら現象は変わらず、<div class="post-content>~</div>部分をコメントアウトすると表示の問題が改善されるという状況にも変化は見られません。
    先のコメントのように間違った状態を作るとindex.phpだけが異なる表示をするので、index.phpに特有(?)なのか、ループに原因があるのか今のところ原因がつかめないのが現状です。

    キャンセル

  • 2017/02/02 14:00

    失礼しました。
    そうですか、それだとちょっとわかりません。

    キャンセル

  • 2017/02/04 04:58

    ご回答ありがとうございました。おかげさまで解決することができました。

    キャンセル

+1

ご提示いただいたスタイルシートの内容ですと、
記事のタイトルやコンテンツのテキスト量によって、
colSm70クラスのdivの横幅が可変になっているように見えます。

.colSm70 {
    width: 70%;
}


などで幅を指定してみたらどうでしょうか?

投稿

  • 回答の評価を上げる

    以下のような回答は評価を上げましょう

    • 正しい回答
    • わかりやすい回答
    • ためになる回答

    評価が高い回答ほどページの上位に表示されます。

  • 回答の評価を下げる

    下記のような回答は推奨されていません。

    • 間違っている回答
    • 質問の回答になっていない投稿
    • スパムや攻撃的な表現を用いた投稿

    評価を下げる際はその理由を明確に伝え、適切な回答に修正してもらいましょう。

  • 2017/02/02 19:17

    ご回答ありがとうございます。
    最初にご回答いただいた部分は既に修正済みの状態でデベロッパーツールで確認しました。
    ※すみません記載ミスで、index.phpが広がるのではなく、「縮む」です。
    bodyレベルで16px分、index.phpが縮みます。

    その下ではbodyの幅が1060pxの時に70%の部分が732.594px、30%の部分が267.406px、パディングがそれぞれの部分で15px、70%と30%の間は30px空いている計算になります。単純に考えれば70%の部分は 1060-60*70%=700pxになっているはずなのですが…
    パディングやマージンの指定はcontainerとrowクラスのみです。ループの中ではそうした指定はありませんでした。
    containerクラスにメディアに合わせた幅を設定しても現象は変わらず。
    htmlにmax-widthで1170pxを指定しても現象は変化なし。
    また、colSm70を最大幅の1170pxの70%、819pxでmax-widthを指定しても改善されません。
    ただ、colSm70のmax-widthをこのクラスのメディア幅750pxの70%、537.6pxに指定すると状況は改善されます。
    この辺りの設定はBootstrapを参考にしながらそれを単純にした形で設定していて、メディア設定はBootstrapのものをそのまま指定しています。
    以前にはループの中にパディングやマージンの設定を入れてみたことがあるのですが、当然のことながらその設定が順々に重なって適用されました。
    今の状態で、index.phpが縮むときはページタイトルは動かず、その下のナビゲーションの文字から動いています。
    また、16pxは一文字分の大きさですので、その辺りに原因があるかもしれませんが、今のところindex.phpとsingle.php、page.phpは同一のコード(複製したまま)なので、おかしくなるなら全ておかしくなりそうなのですが、index.phpだけおかしくなっています。
    また、body周りに8pxのマージンが設定されていましたが、それを消しても現象は変わりありません。
    今のところ手の打ちようがない状態です。

    キャンセル

  • 2017/02/02 19:44

    細かい数値の話はこの際置いておきましょう。
    私が気になっているのは、ご呈示いただいたCSSでは、divの幅指定が一切おこなわれていないことです。
    以下の記述を加えても状況は改善しませんか?
    .colSm70 {
    min-width: 70%;
    }

    キャンセル

  • 2017/02/04 04:28

    ソースの抜き出し方が悪かったですね、すみません。
    現状、Bootstrapと同じメディア設定を行っています。
    つまり、タブレットの設定: @media only screen and (min-width: 768px){}と、通常のPC設定: @media only screen and (min-width: 992px){}、もっと幅の広いディスプレイ用の設定: @media only screen and (min-width: 1200px){}を設定しています。
    タブレット以下のカラム幅の設定をcolXs○○%としています。
    タブレット以上の場合の設定はそのタブレット幅のメディア設定の中にcolSm○○%としています。
    ですので、colSm○○%という場合は@media only screen and (min-width: 768px)の中に書くのでその幅が適用されることになります。
    例えばタブレット以下の幅では横幅100%、タブレット以上は70%と30%の横並びといった場合は
    <div class="container"><div class="row rowV">
    <div class="colSm70">foo</div>
    <div class="colSm30">bar</div>
    </div></div>
    ※rowVはそれぞれのブロックを縦積みにするための設定
    となります。
    お二人のご回答によって問題点が絞り込めたおかげで自己解決できました。
    自己解決内容も記載しますのでご確認ください。
    ありがとうございました。

    キャンセル

check解決した方法

0

8-0_nyan5さん、mizさんご回答ありがとうございました。
おかげさまで解決できました。

原因は改行コードにあったようです。

グローバルナビの個々のliの幅がbox-sizing: border-boxを設定しているので計算上20%になるはずなのですが、20%に設定するとカラム落ちをするので19%に設定していました。
これがなぜかと調べていたらdisplay:inline-blockを設定した場合改行コードの幅分横幅が広くなるので、<ul>~</ul>を改行無しで書かなくてはなりませんでした。

wordpressの場合はメニューは管理画面で設定するので改行無しで記述はできないので ulでfont-sizeを0にして、liで元のフォントサイズに戻すと改行コードの問題はクリアできます。
グローバルナビもこの設定を行ったところliの幅を20%にしてもカラム落ちしなくなりました。

これと同じことが言えるのでは??と思ったので、post-headerとpost-contentクラスのフォントサイズを0にして、中にあるh2、post-meta、post-bodyクラスでフォントサイズを設定し直したところ、70%側の幅が伸縮することがなくなり、正常になりました。

幅の狭いメディアでは縦スクロールバーが出るとその幅分だけ縮むのですが、縦スクロールバーを消すわけにもいかないのでやむを得ないでしょう。
縦スクロールバーの影響が出ない幅までディスプレイを広げた時は投稿ページや固定ページに遷移しても全体の幅に影響が出ませんでした。

ulとliの改行コードの問題がそのまま当てはまるかはわからないのですが、投稿ページや固定ページでは記事が一つだけ読み込まれるのでそうした幅に影響する何らかのコードが読み込まれても全体の幅に影響が出ず、ループによってそのコードが複数読み込まれることで全体の幅にまで影響した、ということのようです。

お二人のご回答で問題の原因を追究する手がかりを絞り込むことができました。
ありがとうございました。

投稿

  • 回答の評価を上げる

    以下のような回答は評価を上げましょう

    • 正しい回答
    • わかりやすい回答
    • ためになる回答

    評価が高い回答ほどページの上位に表示されます。

  • 回答の評価を下げる

    下記のような回答は推奨されていません。

    • 間違っている回答
    • 質問の回答になっていない投稿
    • スパムや攻撃的な表現を用いた投稿

    評価を下げる際はその理由を明確に伝え、適切な回答に修正してもらいましょう。

同じタグがついた質問を見る

  • PHP

    23495questions

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

  • WordPress

    8723questions

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

  • トップ
  • PHPに関する質問
  • wordpressのオリジナルテーマを作成中。index.phpの表示がsingle.phpとpage.phpとは異なることについて