現在の接続環境は
です

記事内にプロモーションが含まれています。

プロモーションを含みます

記事の上に今日の人気記事を表示する方法

Stinger6 WordPress カスタマイズ

所要時間目安：約3分

This session is using　 IPv4 　is established in

今日は2025年5月15日です。

この記事は2016年2月28日のものです。現在は状況が異なる可能性がありますのでご注意ください。

目次に行く･戻る

2025年5月15日 (木曜日)本日の人気記事トップ１０

カーメンテナンスWAKO'S

2025年5月15日 (木曜日)↓における週間月間人気記事トップ３は？↓

  • 本日
  • 週間
  • 月間

  1. 省電源のため自動的に電源をOFFにします 2PV

    車にはバッテリーからの電気が必須になっています。また、そのバッテリー自体をエンジン始動時にはオルタネーターにてアイドリングストップ車などほとんどすべての車は充電しています。エンジンのみかかっていて運行…

    もっと読む

  2. エンジンオイルシーリング剤Plus91

    エンジンオイル漏れ止めのおすすめはPlus91評価レビュー 2PV

    以前、オイル漏れ・オイル滲みが分かりエンジンオイルシーリング剤であるNUTECのOEM版でpitworkのNC81エンジンオイルシーリング剤を使用してみました。 ですが、一時オイル滲み・オイル漏れが止…

    もっと読む

  3. Windowsスポットライト画像

    Windowsスポットライト画像保存場所と方法 1PV

    Windows10においてロック画面の時に表示される画像がとてもきれいになりました。 この機能は、Windows10以前のバージョンの時には単なるロック画面でした。 そんな綺麗な画像が気になったので、…

    もっと読む

  1. エクストレイルT32運転席側バイザーメッキモール剥がれ修復方法とオススメ両面テープ 29PV

    車の購入後、乗ろうが乗らまいが経年劣化というものは付きものなのですが、特にプラスチック部分や両面テープ部分などは経年劣化がどうしても起きてきてしまいます。 そんな車でも長めにお気に入りの愛車となれば長…

    もっと読む

  2. キーレスリモコン破損

    車のキーナンバー確認方法。キーレス紛失や壊れた時 20PV

    初めての経験でした。（汗）…。 キーレスエントリー、キーレスリモコンがついた鍵がエンジンを回す時にボキッと折れてしまいました。（汗）…。 プラスチックの本体部分と鉄のキー部分が分裂してしまいました。 …

    もっと読む

  3. キッチンシンクからドブ臭い異臭原因解決方法

    キッチンシンク下がドブ臭い下水臭い原因と解決方法 19PV

    意外と知られていないのが、キッチンシンクからいつもと違う臭いや異臭や下水臭い強烈な匂いが出てくることがあります。いくらシンク内をカビキラーやキッチンハイターなどの塩素系漂白剤などできれいにしても・・・…

    もっと読む

  1. エクストレイルT32運転席側バイザーメッキモール剥がれ修復方法とオススメ両面テープ 29PV

    車の購入後、乗ろうが乗らまいが経年劣化というものは付きものなのですが、特にプラスチック部分や両面テープ部分などは経年劣化がどうしても起きてきてしまいます。 そんな車でも長めにお気に入りの愛車となれば長…

    もっと読む

  2. キーレスリモコン破損

    車のキーナンバー確認方法。キーレス紛失や壊れた時 20PV

    初めての経験でした。（汗）…。 キーレスエントリー、キーレスリモコンがついた鍵がエンジンを回す時にボキッと折れてしまいました。（汗）…。 プラスチックの本体部分と鉄のキー部分が分裂してしまいました。 …

    もっと読む

  3. キッチンシンクからドブ臭い異臭原因解決方法

    キッチンシンク下がドブ臭い下水臭い原因と解決方法 19PV

    意外と知られていないのが、キッチンシンクからいつもと違う臭いや異臭や下水臭い強烈な匂いが出てくることがあります。いくらシンク内をカビキラーやキッチンハイターなどの塩素系漂白剤などできれいにしても・・・…

    もっと読む

今日の人気記事

↑

のように、
個別記事のタイトルの上に「本日の人気記事」というものを表示する方法です。

 

WordPressにおいては、
WordPress Popular Postsという人気記事のプラグインがあります。

そのWordPress Popular Postsという人気記事のプラグインを利用して、
個別記事の上部にサイドバーとは異なる期間の人気記事（今回は今日一日の）を表示させる方法です。

 

やり方は簡単なのですが、

 

この記事を読む方へのオススメ

メルカリ招待コード：

single.phpの表示したい部分に以下のphpコードを記載するだけです。

アドセンス336pxPC閲覧記事下表示1つ目コード


<div class="top_ranking">
 <?php if ( wp_is_mobile() ) : ?>
 <p style="padding:10px 0;">本日の人気記事</p>
 <?php else: ?>
 <p>本日の人気記事</p>
 <?php endif; ?>
 <?php
 $wpp = array (
 'range' => 'daily', /*集計期間の設定（daily,weekly,monthly）*/
 'limit' => 10, /*表示数*/
 'post_type' => 'post', /*投稿のみ指定（固定ページを除外）*/
 'stats_views' => '1', /*閲覧数を表示させる*/
 'post_html' => '<li><span>{title}</span></li>', /*表示されるhtmlの設定*/
 ); ?>
 <?php wpp_get_mostpopular($wpp); ?>
 </div>

 

具体的には、以下の画像の部分に追加します。

 

今日の人気記事挿入箇所

 

ポイントは、
ちゃんと、<div class="post">の中に挿入するということです。

でないと、
とんでもない表示になってしまいます。

 

そして、
CSSにて調整します。

 

参考に当ブログの現段階のCSSは以下になります。

（ちょっときたないですが(*゜.゜)ゞポリポリ））

 

/*--単一記事上に今日の記事ランキング-----------------------------------------------------*/


 .top_ranking p {
 padding: 0;
 margin: 0;

 color: rgb(0, 0, 0);
 box-shadow: rgba(0, 0, 0, 0.4) 1px 2px 10px, rgba(0, 0, 0, 0.0980392) 0px 0px 10px inset;
 border-left: 5px solid rgb(0, 0, 0);
 margin: 5px 0px;
 padding: 5px 0px 5px 10px;
 background: rgb(255, 255, 255);
 border-top: 1px dotted rgb(0, 0, 0);
 border-bottom: 1px dotted rgb(0, 0, 0);
 border-right: 1px dotted rgb(0, 0, 0);

}


 }


 .top_ranking ul{padding: 0!important;}
 .top_ranking li{border-top: 1px #ccc dashed;}
 .top_ranking li:last-child { border-bottom: 1px #ccc dashed; }
 .top_ranking p{padding: 0;margin: 0;} 
 .top_ranking a{display: block;}
 .top_ranking a:hover{background-color: #f5f5f5;}

 

自分で調整もしくは変更してみてください。

 

以上、
個別記事の上に今日一日の記事ランキングを表示する方法でした。

これで、
アクセスアップにつながるといいのですが…。

追記）

 

当ブログはテーマにStinger6を使用させていただいていますが、
Stinger系ですと、
トップページのdiscDescription部分がh1にての構造になっています。

なので、
トップページのみのh1のDescriptionのみCSSにて再調整する必要があります。

 

当ブログにおいては、
背景色などカスタマイズ済みなので、
それに合わせて以下のようにCSSを追加しています。

 

header .descr {
 color: #ffffff;
 font-size: 12px;
 font-weight: normal;
 margin-bottom: 0px;
 line-height: 20px;
 padding-bottom: 10px;
 background-color: #000;
 border-bottom: none;
 border-left: none;
 border-top: none;
 border-right: none;
 }

Windows10サポート終了まで

Multiplex 広告

あなたにおすすめな関連記事

jetpackのCSS内容無効化

WordPress カスタマイズ 備忘録

jetpackの自動出力されるCSSを無効化で出力しないようにする方法

WordPressの有名なプラグインはいくつかあります。そんな中のひとつで多機能（ある意味重い？）なプラグインでjetpackがあります。使っている機能は人それぞれかと思われますが、私はphotonと…

もっと読む

インフィード広告アドセンス

人気記事ランキング表示

STINGER PLUS+ Stinger6 Stinger7 WordPress カスタマイズ 伝えたいこと 備忘録

人気記事ランキングに順位を付けてCSSで丸く表示する方法

多くのサイトやブログにおいて人気のある記事は異なると思います。 また、 人気記事をサイトやブログに表示しておくだけで訪れてくれた人にこのブログやサイトでの人気のある記事ランキングが分かるようになります…

もっと読む

インフィード広告アドセンス

カエレバのデザイン選択画像

カスタマイズ カスタマイズ ツール 伝えたいこと

カエレバ・ヨメレバのカスタマイズCSS表示でズレないようにする方法

カエレバ・ヨメレバのサービス提供者であるかん吉さんより、正式にサービス提供方法？がAmazonから国内の市場に協力？することやAmazonのPA-APIの仕様変更？により、楽天（国内）メインに仕様変更…

もっと読む

インフィード広告アドセンス

横浜夜景

AdSense WordPress

WordPressでAdSense広告を任意の場所に表示させる方法

WordPressでAdSenseコードを任意の場所に挿入する方法です。 <!--more-->タグの後に必然的にアドセンス広告を表示させる方法と、 ショートコード化して任意の場所にアドセ…

もっと読む

インフィード広告アドセンス

AMP化対応スマホ画像

WordPress カスタマイズ カスタマイズ スマホ 伝えたいこと 備忘録 時事ネタ

AMP化対応したらアクセス数増えるの減るの？減ったのは気のせい？

先日、一応記事としてAMP化対応方法に関して記載いたしました。 AMP化対応方法 AMP化対応完全版 しかし、初回のときはうまくAMP化対応できずその都度改善修正を行ってきました。 でも、AMP化対応…

もっと読む

インフィード広告アドセンス

AFFINGER5

AFFINGER4Pro Stinger6 WordPress カスタマイズ 伝えたいこと 備忘録

テーマ変更の楽な方法はない！？

アイキャッチ画像：AFFINGER4公式HP（https://the-money.net/）のスクリーンショットです。 この度、昨今ちまたでものすごく有名なWordPressのテーマAFFINGER4…

もっと読む

【AmazonタイムセールSALE車＆バイク】！


人気の商品が日替わりで登場。毎日お得なタイムセール「Amazonタイムセール全体」

出展：Amazonタイムセール

人気の商品が日替わりで登場。毎日お得なタイムセール

年金倍増で日本経済は大復活する!デフレの終わり、第二の「高度成長」の始まり
¥2,070 （2025/05/15 16:57時点 | Amazon調べ）
Amazon
＼楽天ポイント4倍セール！／
楽天市場
＼ポイント5%還元！／
Yahooショッピング
メルカリ

あなたが訪問してから

⏰ 0 秒経過 🎉

入学入社まであと…入学入社祝いはどんなPresent（プレゼント）でどのように過ごされますか？

ホワイトデープレゼントは以下などの豊富なキャンペーン商品から選ぶと良いと思います。

ブログサービスが始まってから:


カウントダウンタイマー

おすすめの記事一部広告


Total625


アドセンス336pxPC閲覧記事下表示1つ目コード

目次に戻る

よろしかったらシェアよろしくお願いします。

この記事タイトルとURLをコピー

-Stinger6, WordPress, カスタマイズ
-

目次に戻る

目次に戻る

コメントを閉じる
  1. 人気記事ランキングに順位を付けてCSSで丸く表示する方法 | WordPressデビュー津々浦々 より:
    2017年1月13日 6:35 AM

    […] 記事の上に今日の人気記事を表示する方法 ↑ のように、 個別記事のタイトルの上に「本日の人気記事」というものを表示する方法です。 WordPressにおいては、 WordPress Popula2016-02-28 08:28 […]

    返信

comment

メールアドレスが公開されることはありません。 ※ が付いている欄は必須項目です


This site uses Akismet to reduce spam. Learn how your comment data is processed.