Loading…

Stinger6 WordPress カスタマイズ

今日の人気記事

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

本日の人気記事BEST10

所要時間目安:3


Stinger6 WordPress カスタマイズ

今日の人気記事

今日の人気記事

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

 

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


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

おすすめの記事一部広告

    Multiplex 広告

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


関連記事

Facebook携帯番号対処方法

WordPress カスタマイズ 備忘録

WordPressでOGP設定方法。プラグイン使わない。

多くのブログやサイトで今ではFacebookやTwitterのOGP設定がされています。 なので、 OGP設定はある意味SEO的にもFacebookなどのSNSを使用している人にとっては、 必須の設定…

もっと読む

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

jetpackのCSS内容無効化

WordPress カスタマイズ 備忘録

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

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

もっと読む

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

ブログカード

Stinger6 Stinger7 WordPress カスタマイズ

WordPressブログカード作成方法

昨今、ShereHTMLでのリンク作成がここ数年メジャーでしたが、 WordPressやはてなブログにおいてはブログカードなるものが出てきました。 サイト内リンクや外部サイトリンクのサイトがカードみた…

もっと読む

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

バイラルメディア風SNSボタン

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

Stinger6、Stinger7でバイラルメディア風ボタン設置方法

ここのところ、よくブログサイトや大手企業のニュースサイトなどの記事の下に、 上記の画像のようなバイラルメディア風のSNSボタンが設置されているのをよく見かけると思います。 これまでは、とくに気にしなか…

もっと読む

目次に戻る

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

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



この記事が良かったら
いいね!お願いします(#^.^#)

せきららの
最新情報をお届けします

言えないことはTwitterで!!



目次に戻る

目次に戻る


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

comment

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

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