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

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

ただいまの
回答率

89.99%

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

解決済

回答 2

投稿 編集

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

yamaoka

score 25

現在完全自作のテンプレートを作っています
記事のアクセスランキングをサイドバーに表示したいと思い、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; } ```

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

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

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

    クリップを取り消します

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

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

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

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

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

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

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

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

    質問の評価を下げる

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

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

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

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

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

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

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

    詳細な説明はこちら

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

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

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

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

  • ruuusaamarki

    2017/06/13 19:32

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

    キャンセル

  • yamaoka

    2017/06/15 13:40

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

    キャンセル

回答 2

checkベストアンサー

+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の時はimgsaide-ranking-imgがついてますが、PHPにしたときにはそれを囲ったdivsaide-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の使用についてはこちらをご一読いただくといいと思います。

投稿

編集

  • 回答の評価を上げる

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

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

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

  • 回答の評価を下げる

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

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

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

  • 2017/06/15 16:04

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

    キャンセル

  • 2017/06/15 16:14

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

    キャンセル

  • 2017/06/15 16:35

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

    キャンセル

  • 2017/06/15 17:18

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

    キャンセル

0

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

投稿

  • 回答の評価を上げる

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

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

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

  • 回答の評価を下げる

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

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

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

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

  • ただいまの回答率 89.99%
  • 質問をまとめることで、思考を整理して素早く解決
  • テンプレート機能で、簡単に質問をまとめられる