現在の接続環境は
です

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

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

Stinger6 WordPress カスタマイズ

今日の人気記事

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

所要時間目安:3

This session is using  IPv4  is established in

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

目次に行く・戻る

2025年4月2日 (水曜日)↓における週間月間人気記事トップ3は?↓

  • 本日
  • 週間
  • 月間
  1. T32エクストレイルマイナーチェンジ後ステアリング外し方

    エクストレイルT32マイナーチェンジ後ステアリング外し方 7PV

    エクストレイルT32型(NT32も含め)がマイナーチェンジしてから早いもので、もうすぐ2年になります。エンジンなどの大きな変更などはなく、室内の内装デザインや外装のちょっとしたデザイン変化、そして、一…

    もっと読む

  2. シガーライターがない車にシガーライターソケット増設

    シガーライターがない車にシガーライターソケットの付け方と増設方法 5PV

    ここのところ最近の車にはシガーライターソケットもしくはシガーライター自体が付いていない車があります。 そんな時には、昨今ではスマホの充電などでも車のシガーライターソケット電源は必須とも言えます。 しか…

    もっと読む

  3. エクストレイルT32で電動レカロをバッ直でなく車に取り付ける方法 4PV

    RECAROシートというとサーキット走行や車好きの方々が取り付けるちょっと高級な車のシートというイメージをお持ちかもしれません。RECAROシートにもいくつも種類があって本当に腰痛対策用など医療的な面…

    もっと読む

  1. エンジンスターターリモコン

    カーメイトのエンジンスターターでエラー15表示と対処方法 29PV

    夏冬に特に重宝するのが、エンジンスターターです。 メーカーはCARMATEやCOMTECユピテルなど各社ありますが、一番のオススメはリモコンから多くの情報を得ることができるカーメイト製品です。 なぜか…

    もっと読む

  2. アイドリングストップシステム異常警告灯表示対処方法 26PV

    2010年前後以降の車に搭載されていることの多いアイドリングストップシステム。各自動車メーカーによって呼び名は異なりますが、機能としては信号待ちが長い時や停止時間が長い時などに勝手に(自動的に)アイド…

    もっと読む

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

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

    もっと読む

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

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

    もっと読む

  2. アイドリングストップシステム異常警告灯表示対処方法 9PV

    2010年前後以降の車に搭載されていることの多いアイドリングストップシステム。各自動車メーカーによって呼び名は異なりますが、機能としては信号待ちが長い時や停止時間が長い時などに勝手に(自動的に)アイド…

    もっと読む

  3. 純正シートベルトバックル

    シートベルトがきついのでシートベルト延長(バックル延長) 8PV

    すべての車に付いているシートベルト…。 ですが、体型や車種によってシートベルトのバックルが短いとシートベルトを締めた際にきつくて運転自体がしにくくなってしまいます。 それでは、せっかくの安全装置である…

    もっと読む

今日は2025年4月2日です。

メルカリ招待コード:

今日の人気記事

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

 

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サポート終了まで

【AmazonタイムセールSALE車&バイク】!


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

出展:Amazonタイムセール

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

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

WordPressの文字コードUTF-8(BOMなし)

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

WordPressの文字コードはUTF-8で改行LFにて保存する方法

えーっと、この度WordPressのバージョンを4.6.1にバージョンアップしてから管理画面にjetpack4.3.2のダッシュボードを表示した際に、ちょっとしたWarningメッセージが表示されるよ…

もっと読む

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

webフォントNoto Sans Japanese

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

webフォントNoto Sans Japaneseがとても綺麗

以前にwebフォントの導入方法を記載しました。 こちらでは、 webフォントのubuntuを使用しています。 しかし、 ひょんなことからwebフォントでNoto Sans Japaneseというとって…

もっと読む

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

AMP画像

AFFINGER4Pro WordPress カスタマイズ 備忘録

AMP化したページでカエレバ・ヨメレバ・アプリーチを表示する方法

もうAMP化が騒がれて2年くらいになるのでしょうか・・・。それぞれのテーマによっては標準で対応しているものもありますね。ですが、対応していてもカエレバヨメレバのアフィリエイトコードの変換にはうまくでき…

もっと読む

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

Search ConsoleURL変更ドメインとURLの場合

WordPress インターネット カスタマイズ 伝えたいこと 備忘録

Search ConsoleのリダイレクトやSSL化によるプロパティURL変更方法

Search Consoleは言わずと知れた旧ウェブマスターツールです。GoogleやYahoo!やBingなどの検索エンジンポータルサイトへの登録方法のひとつでもあります。昨今いくつかの無料サービス…

もっと読む

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

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

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

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

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

もっと読む

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

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

パーマリンクURLを自動一括リダイレクト方法htaccessにて

サイトやホームページのURLはパーマリンクURLといい唯一無二のアドレスになります。そのサイトURLのパーマリンク設定URLをサイト移転などをした際に、記事数やホームページのURL数が多いとリダイレク…

もっと読む

あなたが訪問してから

0 秒経過 🎉

Stinger6, WordPress, カスタマイズ」の人気記事

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

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

おすすめ!!

世界中でNo.1のシャアを誇るAmazonでのお得なお買い物でお得をしよう!!ネット通販なので、もちろん24時間年中無休です。健康商品から食品、車カスタマイズ商品、大手家電メーカー商品やパソコンの自作サプライ商品、その他アマゾン・プライムでは映画やドラマなど多くの作品や番組を見ることができます。マスクなど衛生商品も今では必須アイテム。一番信用できて一番商品数の多いAmazonでの買い物が絶対にオススメ!!

おすすめ2

楽天による季節特集です。それぞれの季節ごとにお得なお買い物商品やお得な旅行商品、その他にもAmazon同様に国内最大の買い物ポータルサイトです。楽天をメインにお買い物されている方はポイントやSPUも貯まりさらにお得に!!楽天カードや宇佐美系列のガソリンスタンドでも楽天ポイントが今では貯まります。それらのポイントを貯めてお得にお買い物や旅行商品その他にもパソコンサプライや車カスタマイズ商品など楽天も充実しています。

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


カウントダウンタイマー

おすすめの記事一部広告

お小遣い稼ぎにアンケート。

Multiplex 広告

Total566


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

目次に戻る

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

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

目次に戻る

目次に戻る


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

人気記事ランキングに順位を付けてCSSで丸く表示する方法 | WordPressデビュー津々浦々 へ返信する コメントをキャンセル

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


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