Loading…

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

Stinger6 WordPress カスタマイズ

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

今日の人気記事

所要時間目安:3

This session is using  IPv4  is established in

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

Stinger6 WordPress カスタマイズ

  • 本日
  • 週間
  • 月間
  1. パナソニックカオスバッテリーS-115

    エクストレイルT32おすすめバッテリーPanasonicカオスバッテリー 3PV

    すべての車でバッテリーが搭載されています。特にアイドリングストップ車以降現在主流になりつつある電気自動車などではバッテリーの性能がとても重要になってきます。今回は日産エクストレイルT32においておすす…

    もっと読む

  2. キーシリンダー

    TOYOTAキーレスリモコンの設定方法とキーナンバー(キー番号) 2PV

    この度は(今回は?)、プラスチックの経年劣化により車のキーレスリモコンキーの送信機側(トランスミッター)のみをなくしてしまった場合です。(まだスマートキーやインテリジェンスキーと言われる前のキーレスリ…

    もっと読む

  3. ヘッドライトクリーニングにダイソーアルカリ電解水で黄ばみクスミが綺麗に 1PV

    ヘッドライトは経年劣化で黄ばんできてしまいます。特にここ10年くらいの車のヘッドライトはプラスチック製のヘッドライトカバーになってきています。昔のようにガラスではありませんので、より経年劣化が目立って…

    もっと読む

  1. パナソニックカオスバッテリーS-115

    エクストレイルT32おすすめバッテリーPanasonicカオスバッテリー 3PV

    すべての車でバッテリーが搭載されています。特にアイドリングストップ車以降現在主流になりつつある電気自動車などではバッテリーの性能がとても重要になってきます。今回は日産エクストレイルT32においておすす…

    もっと読む

  2. キーシリンダー

    TOYOTAキーレスリモコンの設定方法とキーナンバー(キー番号) 2PV

    この度は(今回は?)、プラスチックの経年劣化により車のキーレスリモコンキーの送信機側(トランスミッター)のみをなくしてしまった場合です。(まだスマートキーやインテリジェンスキーと言われる前のキーレスリ…

    もっと読む

  3. ヘッドライトクリーニングにダイソーアルカリ電解水で黄ばみクスミが綺麗に 1PV

    ヘッドライトは経年劣化で黄ばんできてしまいます。特にここ10年くらいの車のヘッドライトはプラスチック製のヘッドライトカバーになってきています。昔のようにガラスではありませんので、より経年劣化が目立って…

    もっと読む

  1. パナソニックカオスバッテリーS-115

    エクストレイルT32おすすめバッテリーPanasonicカオスバッテリー 3PV

    すべての車でバッテリーが搭載されています。特にアイドリングストップ車以降現在主流になりつつある電気自動車などではバッテリーの性能がとても重要になってきます。今回は日産エクストレイルT32においておすす…

    もっと読む

  2. キーシリンダー

    TOYOTAキーレスリモコンの設定方法とキーナンバー(キー番号) 2PV

    この度は(今回は?)、プラスチックの経年劣化により車のキーレスリモコンキーの送信機側(トランスミッター)のみをなくしてしまった場合です。(まだスマートキーやインテリジェンスキーと言われる前のキーレスリ…

    もっと読む

  3. ヘッドライトクリーニングにダイソーアルカリ電解水で黄ばみクスミが綺麗に 1PV

    ヘッドライトは経年劣化で黄ばんできてしまいます。特にここ10年くらいの車のヘッドライトはプラスチック製のヘッドライトカバーになってきています。昔のようにガラスではありませんので、より経年劣化が目立って…

    もっと読む

目次に行く・戻る

メルカリ招待コード:

今日の人気記事

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

 

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;
 }

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

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

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

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

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

もっと読む

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

記事上に人気記事表示

WordPress カスタマイズ

記事タイトルにリンクを追加挿入する方法とリンク削除する方法

  WordPressでは、 多くのテーマで記事タイトルにリンクがされていません。 なので、 これまでのブログでは記事タイトルにリンクが挿入されていたので、 WordPressの無料テーマで…

もっと読む

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

AMP画像

AFFINGER4Pro WordPress カスタマイズ 備忘録

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

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

もっと読む

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

WordPress 伝えたいこと 備忘録

Jetpack新らしい統計情報を旧バージョンに設定し直す方法

WordPressへのプラグインは多数のものがあります。その一つにJetpackがありますが、このJetpackには様々な機能がワンパックに入っているような多機能なものです。アクセスの統計情報やサイト…

もっと読む

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

インフィード広告挿入方法

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

インフィード広告を記事一覧の間に表示させる方法

今月初頭に(上旬)アドセンスの広告表示方法に通常のコンテンツ連動型広告にプラスで、インフィード広告と記事内広告が解禁されました。 以前に、トップページの記事一覧にきれいにアドセンス広告を挿入する方法を…

もっと読む

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

ネコ

WordPress

アイキャッチ画像を設定してみた。

よく言うアイキャッチ!!正直めんどくさいですよね。でも、訪問者やTwitter、Facebookなどにサムネイル表示される際に、自分のブログの記事にアイキャッチ(画像?)があると…。

Stinger6, WordPress, カスタマイズ」同じカテゴリーの記事一覧

おすすめの記事一部広告

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

Multiplex 広告

おすすめ!!

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

おすすめ2

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

Total330


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

目次に戻る

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

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

目次に戻る

目次に戻る


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

comment

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

このサイトはスパムを低減するために Akismet を使っています。コメントデータの処理方法の詳細はこちらをご覧ください

You may choose to prevent this website from aggregating and analyzing the actions you take here. Doing so will protect your privacy, but will also prevent the owner from learning from your actions and creating a better experience for you and other users.