【WordPress】スマホのヘッダーに人気記事を表示させる方法のカスタマイズメモ

公開日: : ブログについて

このエントリーをはてなブックマークに追加


WordPressブログカスタマイズのメモ。スマホサイトのヘッダーに人気記事を表示させる方法でございます。

人気記事を横に並べて表示する

ちなみに人気記事の定義はコメント数の多い記事です。
修正したのは以下の部分。
以前は、リストでつくっていたのですがあんまり見た目がよくなかったので今回の方法を導入。
ブログヘッダに人気記事を表示する方法  mini
人気記事を表示させるためのコードは以下の通り。

<table>
  <thead style="font-size:12px;"><tr><th>人気記事</th></tr></head>
  <tbody>
    <tr>
      <?php query_posts('showposts=3&year=2013&monthnum>3&orderby=comment_count'); ?>
        <?php if ( have_posts() ) : while ( have_posts() ) : the_post(); ?>
          <td style="padding: 5px; border: 1px #CCC9C9 solid;">
    		    <span style="font-size:11px; line-height: 130%;"><a href="<?php the_permalink(); ?>" style="text-decoration: none;"><?php the_title(); ?></a></span>
          </td>
        <?php endwhile; endif; ?>
      <?php wp_reset_query(); ?>
    </tr>
	</tbody>
</table>

コードを軽く解説。

query_posts()

query_postsは表示させる記事の条件を指定するのに使います。wp_reset_query()とセットで使うように。
query_postsは非推奨な関数らしいのでpre_get_postsを使った方がいいかも。
()の中の意味は以下の通り。
‘showposts=3&year=2013&monthnum>3&orderby=comment_count’

showpostsの後の数(3)が表示させたい記事数。

year=2013&monthnum>3が2013年3月以降の記事。2014年1月いこうの記事を表示させたいなら、
「year=2014&monthnum>1」。

orderby=comment_countがコメント数順。

query_potsの注意点はこちらで

ifとwhile

if ( have_posts() )は記事があるかのチェック。
while ( have_posts() ) : the_post()は記事ループの開始点。

the_permalink()

the_permalink()は取得した記事のリンク。the_title()はその記事のタイトル。

メモなので、これにて終了。

カスタマイズに必要なPHPをもっと知りたいなら

これ初学者の定番です。

筆者Twitterアカウント

フォローいただければ、最新記事や、ブログで稼ぐ、アクセスを集める方法などをタイムラインにお届けします。

仕事で悩む人から人気の記事

ブログ「らふらく」を購読する→follow us in feedly

この記事が気に入ったら
いいね!しよう

最新情報をお届けします

ブログで稼ぐ方法をまとめてます

関連記事はこちらからどうぞ!

いつもシェア感謝です!今回もぜひ

このエントリーをはてなブックマークに追加
※ 微妙だったら、そっと閉じるか、ほかの記事を見ていただけるとうれしいです!
SNSでも自分の得意なことで収入を得る方法を発信しています。フォローすれば更新をチェックできますので、ぜひフォローを。
仕事依頼などのお問い合わせは「iwgp545@yahoo.co.jp」か、「TwitterのDM」、「Facebookのメッセージ」からお願いします。

SNSでフォローしてお金を稼ぐための情報を受け取ろう
LINE@で友達追加(スマホでLINEを起動 > その他 > 友だち追加 > QRコード読み取り)
ブログで生活しているタクスズキと申します。「好きなことを仕事に」を当たり前にする活動をしています。よく「真面目」と言われる89世代の意識高い系です。 スズキについて詳しく知りたい方はこちらからどうぞ
仕事のご依頼(広告掲載、記事寄稿など)はiwgp545@yahoo.co.jpからお願いします!