wordpress記事のレイアウトが崩れた場合の対処法

はじめまして！

以前、こちらのサイトで質問させていただいてから
実装したいプログラムを完成させることができました。

Wordpress記事数をユーザー登録を行った日から経過した日数に応じて可変させたい

取り組んでるうちに１つ問題が発生したため、質問させてください。

先日、Wordpress記事を古い順番で、
ユーザー登録を行った日から経過した日数に応じて表示させるというプログラムを作成したのですが、
プログラムは機能するものの、記事のレイアウトが崩れてしまいました。

以下がトップページの元のソースと今のソースの一部になります。
（こちらのソース以外、追加変更はしておりません）

■元のソース

lang
1<div id="recent_post_content" class="front-loop">
2
3<h2><i class="fa fa-clock-o"></i> 最近の投稿</h2>
4<div class="wrap">
5<div class="front-loop-cont">
6<?php
7$i = 1;
8wp_reset_query();
9
10$args=array(
11'meta_query'=>
12array(
13array( 'key'=>'bzb_show_toppage_flag',
14'compare' => 'NOT EXISTS'
15),
16array( 'key'=>'bzb_show_toppage_flag',
17'value'=>'none',
18'compare'=>'!='
19),
20'relation'=>'OR'
21),
22'showposts'=>5,
23'order'=>'DESC'
24);
25
26query_posts($args);
27
28if ( have_posts() ) :
29while ( have_posts() ) : the_post();
30
31$cf = get_post_meta($post->ID);
32$recent_class = 'popular_post_box recent-'.$i;
33?>

■変更後のソース

lang
1<div id="popular_post_content" class="front-loop">
2
3<h2><i class="fa fa-clock-o"></i> 最近の投稿</h2>
4<div class="wrap">
5<div class="front-loop-cont">
6<?php
7$i = 1;
8wp_reset_query();
9
10$current_user = wp_get_current_user();
11
12$time1 = strtotime($current_user->user_registered);
13
14$time2 = strtotime(date('Y/m/d H:i:s'));
15
16$seconddiff = abs($time2 - $time1);
17
18$diff = $seconddiff / (60*60*24);
19
20$daydiff = floor($diff) *2;
21
22
23//query_posts('order=ASC&cat=11&posts_per_page.=$daydiff');
24
25
26$args=array(
27'meta_query'=>
28array(
29array( 'key'=>'bzb_show_toppage_flag',
30'compare' => 'NOT EXISTS'
31),
32array( 'key'=>'bzb_show_toppage_flag',
33'value'=>'none',
34'compare'=>'!='
35),
36'relation'=>'OR'
37),
38'showposts'=>$daydiff,
39'order'=>'ASC'
40);
41
42query_posts($args);
43
44if ( have_posts() ) :
45while ( have_posts() ) : the_post();
46
47
48
49$cf = get_post_meta($post->ID);
50$recent_class = 'popular_post_box recent-'.$i;
51?>

トップページのレイアウトが崩れてしまう原因を調べるために元のソースと今のソースを比べてみました。

比べてみて分かったのは、以下の２箇所に違いがあるということでした。

■違い1

ソースが書き加えられている。

lang
1$current_user = wp_get_current_user();
2$time1 = strtotime($current_user->user_registered);
3$time2 = strtotime(date('Y/m/d H:i:s'));
4$seconddiff = abs($time2 - $time1);
5$diff = $seconddiff / (60*60*24);
6$daydiff = floor($diff) *2;
7//query_posts('order=ASC&cat=11&posts_per_page.=$daydiff');

■違い2

ソースが書き換えられている。

'showposts'=>5, 'showposts'=>$daydiff,
'order'=>'DESC'

  ↓変更後

'showposts'=>$daydiff,
'order'=>'DESC' 'order'=>'ASC'

比べる際にこちらのサイトがとても便利でした。

http://difff.jp/

何度か試してみたのですが、原因が分からずに行き詰まっております。

度々ですが、ご教授して頂ければ幸いです。

よろしくお願いいたします。

kogure

2016/05/30 02:03

こんにちは。実際にどのように崩れているのかスクショなり追加いただけると助かります。

hirororo

2016/05/31 10:02 編集

記事タイトルの文字数を減らすことで、無事レイアウトが綺麗に整いました。レイアウトが崩れていた時のスクショを追加させていただきます。

行動規範の内容に同意します

回答3件

kei344 さんの回答で、html が正しく出力されるようになった前提ですが、あとは style の問題なので、chrome の開発ツール等で style を変更してやり、必要な修正箇所を見つければよいです。

投稿2016/05/28 23:23

退会済みユーザー

総合スコア0

hirororo

2016/05/30 10:31 編集

アドバイスありがとうございます！初心者でCSSファイルを触るまで至っておらず、プログラムを実装するためにトップページのphpファイル内にプログラムを加えたため、やはりphpファイル内に原因があると思っております。質問を書き換えましたので、ご確認、ご教授頂けると幸いです。よろしくお願いいたします。

退会済みユーザー

2016/05/30 00:17

そうですか。がんばってください。

hirororo

2016/05/30 10:34 編集

ありがとうございます。ページのソースを確認することをアドバイスして頂いたことに今気付きました。 CSSを調べてみたいと思います。頂いたアドバイスをしっかり理解できてなくて申し訳ありません。

hirororo

2016/05/31 09:49 編集

CSSの問題というアドバイスをヒントに、記事タイトルの文字数を減らすことで、無事レイアウトが綺麗に整いました！ただ、文字数を減らすことでレイアウトは整いましたが、応急処置になってしまってるので CSSとデベロッパーツールからの編集を一から勉強して、根本的な解決に取り組みたいと思います。ありがとうございます！

行動規範の内容に同意します

ベストアンサー

掲示されているのがページのソース全てというのであれば、</div> が多いです。HTMLの崩れを直す場合は、出力されたHTMLのソースを確認し、開始タグと終了タグの数と入れ子構造が正しいかを確認するところからはじめると良いです。また、""などの過不足もエラーの原因になりますので、それらも含めて確認されてはいかがでしょうか。

投稿2016/05/28 14:53

kei344

総合スコア69400

hirororo

2016/05/28 18:57 編集

お世話になっております。質問ページのソースはトップページのソース全てになります。ご指摘いただいたとおり、divの数を確認して減らしました。・ダブルクオーテーション、シングルクォーテーション・半角、全角のチェックも試してみましたがページに変化はありませんでした。 ■変更後 </div> </div> </div> ■変更前 </div> </div> </div> </div> </div> </div> 変更後のソースに問題はありますでしょうか？今は、プログラムを実装するために書き加えたコードに問題があるとして調べていています。度々ですが、ご教授よろしくお願いいたします。