Wordpressの自作テンプレートで人気記事ランキングのリストがどうしても崩れてしまう

Question

現在完全自作のテンプレートを作っています
記事のアクセスランキングをサイドバーに表示したいと思い、htmlで作ったランキングをphp化して自動で人気記事を表示できるようにしようと思っています

ですが現在このようにデザインが崩れてしまっています

htmlのときはきれいにcssが効いていたのですが、新たにcssを書き直さないといけないものなのでしょうか？
それとも下記のコードを書き換えればきれいなリストになるでしょうか？

やり方を調べてもプラグインを使ってランキングを作っている方が多くよくわかりませんでした。
今回プラグインを使わずに行いたいのでどなたかご教授いただけないでしょうか？よろしくお願いいたします

サイドバーのコード（画像の大きさを小さくしても画像の位置は変わりませんでした）

<div id="saide-ranking">
  <ul>
  <?php
  //記事のPV情報を取得
  setPostViews(get_the_ID());
  //ループ開始
  query_posts('meta_key=post_views_count&orderby=meta_value_num&posts_per_page=5&order=DESC');while(have_posts()) : the_post();?>

    <li class="saide-ranking-li"><a href="<?php the_permalink(); ?>">
      <div class="saide-ranking-img"><?php the_post_thumbnail(array(90, 80)); ?></div>
      <p class="date"><?php the_time("Y/n/j"); ?></p>
      <p class="ranking-title"> <?php the_title(); ?></p>
    </a>
    </li>
    <?php endwhile; ?>
  </ul>
</div>

PostViewsを使ってアクセスランキングを調べるコード（functions.php)

function getPostViews($postID){
  $count_key = 'post_views_count';
  $count = get_post_meta($postID, $count_key, true);
  if($count==''){
    delete_post_meta($postID, $count_key);
    add_post_meta($postID, $count_key, '0');
    return "0 View";
  }
  return $count.'Views';
}
function setPostViews($postID){
  $count_key = 'post_views_count';
  $count = get_post_meta($postID, $count_key, true);
  if($count==''){
    $count =0;
    delete_post_meta($postID, $count_key);
    add_post_meta($postID, $count_key, '0');
  }else{
    $count++;
    update_post_meta($postID, $count_key, $count);
  }
}
remove_action('wp_head', 'adjacent_posts_rel_link_wp_head', 10, 0)

html ファイルのリストコード

<div id="saide-ranking">
      <ul>
        <li class="saide-ranking-li"><a href="#">
          <img src="image/cube.jpg" alt="drone" class="saide-ranking-img" />
          <p class="date">2017.05.05</p>
          <p class="ranking-title"> リストタイトル</p>
        </a>
        </li>
        <li class="saide-ranking-li"><a href="#">
          <img src="image/cube.jpg" alt="drone" class="saide-ranking-img" />
          <p class="date">2017.05.05</p>
          <p class="ranking-title">リストタイトル</p>
        </a>
      </li>
        <li class="saide-ranking-li"><a href="#">
          <img src="image/cube.jpg" alt="drone" class="saide-ranking-img" />
          <p class="date">2017.05.05</p>
          <p class="ranking-title"> リストタイトル</p>
        </a>
        </li>
        <li class="saide-ranking-li"><a href="#">
          <img src="image/cube.jpg" alt="drone" class="saide-ranking-img" />
          <p class="date">2017.05.05</p>
          <p class="ranking-title">  リストタイトル</p>
        </a>
        </li>
        <li class="saide-ranking-bottom"><a href="#">
          <img src="image/cube.jpg" alt="drone" class="saide-ranking-img" />
          <p class="date">2017.05.05</p>
          <p class="ranking-title">リストタイトル</p>
        </a>
        </li>
      </ul>
    </div>

htmlファイルのcss```ここに言語を入力
#saide-ranking ul{
width: 235px;
height: auto;
list-style:none;
background-color: white;
margin: 10px 47px 10px 49px;
}
#saide-ranking li{
display: inline;
padding: 0;
margin: 0;
}
.saide-ranking-li p {
color: #4A4A4A;
}
.date{
font-weight: 600;
font-size: 12px;
}
.ranking-title{
font-weight: bold;
font-size: 13px;
color: #4A4A4A;
}
.saide-ranking-img{
width: 90px;
height: 80px;
padding-right: 8px;
float: left;
}
.saide-ranking-bottom a{
display: block;
padding: 10px 10px 10px 10px;
border: 1px solid #E6E6E6;
border-bottom-right-radius: 12px;
}
.saide-ranking-li a{
display: block;
padding: 10px 10px 10px 10px;
border-right: 1px solid #E6E6E6;
border-left: 1px solid #E6E6E6;
border-top: 1px solid #E6E6E6;
}

Comments

[ruuusaamarki]

すみません、少し確認させていただきたいのですがデベロッパーツールで確認した際にhtmlの時効いていたcssは適用されていますでしょうか。

[yamaoka]

コメントありがとうございます。確認いたしましたところhtmlのとき効いていたcssが適応されていませんでした

Answer 1

HTMLの時とPHPにした時にタグの構造が変わっているようですね。

<li class="saide-ranking-li">
  <a href="#">
    <img src="image/cube.jpg" alt="drone" class="saide-ranking-img" /> <!-- ここ -->
    <p class="date">2017.05.05</p>
    <p class="ranking-title"> リストタイトル</p>
  </a>
</li>

<li class="saide-ranking-li">
  <a href="<?php the_permalink(); ?>">
  <div class="saide-ranking-img"><?php the_post_thumbnail(array(90, 80)); ?></div> <!-- ここ -->
  <p class="date"><?php the_time("Y/n/j"); ?></p>
  <p class="ranking-title"> <?php the_title(); ?></p>
  </a>
</li>

HTMLの時はimgにsaide-ranking-imgがついてますが、PHPにしたときにはそれを囲ったdivがsaide-ranking-imgになってます。
div付けた方で対応していきたいのですね？

※先ほどこの差異でズレが表示すると書きましたが検証が足りませんでした。具体的な解決方法はまだ回答していません。

---

追記
ソースを少し整理してみました。
ご確認ください。

#saide-ranking ul{
	width: 235px;
	height: auto;
	list-style:none;
	background-color: white;
	margin: 10px 47px 10px 49px;
}

#saide-ranking li{
	padding: 0;
	margin: 0;
}
#saide-ranking li p {
	color: #4A4A4A;
}
.date{
	font-weight: 600;
	font-size: 12px;
}

.ranking-title{
	font-weight: bold;
	font-size: 13px;
	color: #4A4A4A;
}

#saide-ranking li div{
  float:left;
}

#saide-ranking li img{
	width: 90px;
	height: 80px;
	padding-right: 8px;
}

#saide-ranking li:last-child a{
	display: block;
	padding: 10px 10px 10px 10px;
	border: 1px solid #E6E6E6;
	border-bottom-right-radius: 12px;
}

#saide-ranking li a{
	display: block;
	padding: 10px 10px 10px 10px;
	border-right: 1px solid #E6E6E6;
	border-left: 1px solid #E6E6E6;
	border-top: 1px solid #E6E6E6;
} 

<div id="saide-ranking">
  <ul>
  <?php
  //記事のPV情報を取得
  setPostViews(get_the_ID());
  //ループ開始
  query_posts('meta_key=post_views_count&orderby=meta_value_num&posts_per_page=5&order=DESC');while(have_posts()) : the_post();?>

    <li>
      <a href="<?php the_permalink(); ?>">
      <div><?php the_post_thumbnail(array(90, 80)); ?></div>
      <p class="date"><?php the_time("Y/n/j"); ?></p>
      <p class="ranking-title"> <?php the_title(); ?></p>
      </a>
    </li>
    <?php endwhile; ?>
  </ul>
</div>

query_postsの使用についてはこちらをご一読いただくといいと思います。

Comments

[yamaoka]

おぉ、ありがとうございます。自分ひとりじゃ気がつくことができませんでした。

[dit.]

先ほど回答を編集しましたが、divにsaide-ranking-imgがついていても左に画像、右に文字のレイアウトはされますね。
CSSがうまく読み込めていない、他の記述が邪魔をしている等も疑った方がいいかもしれません。

[yamaoka]

もう一度phpファイル化前と後見比べて探してみます

[yamaoka]

お手数おかけしました。ありがとうございます

Answer 2

HTMLべた書きをしていたときの状態を正とお望みならば正しく表示されていたときのHTMLも載せていただけますか？