↑
のように、
個別記事のタイトルの上に「本日の人気記事」というものを表示する方法です。
WordPressにおいては、
WordPress Popular Postsという人気記事のプラグインがあります。
そのWordPress Popular Postsという人気記事のプラグインを利用して、
個別記事の上部にサイドバーとは異なる期間の人気記事(今回は今日一日の)を表示させる方法です。
やり方は簡単なのですが、
Loading…
↑
のように、
個別記事のタイトルの上に「本日の人気記事」というものを表示する方法です。
WordPressにおいては、
WordPress Popular Postsという人気記事のプラグインがあります。
そのWordPress Popular Postsという人気記事のプラグインを利用して、
個別記事の上部にサイドバーとは異なる期間の人気記事(今回は今日一日の)を表示させる方法です。
やり方は簡単なのですが、
<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にて調整します。
(ちょっときたないですが(*゜.゜)ゞポリポリ))
/*--単一記事上に今日の記事ランキング-----------------------------------------------------*/
.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にて再調整する必要があります。
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;
}
STINGER PLUS+ Stinger6 Stinger7 WordPress カスタマイズ テーマ 備忘録
現在の自分が使用しているテーマでの、 ショートコードを用いてテンプレートからショートコードを用いて任意のコードを表示させる方法の備忘録です。
WordPress カスタマイズ テーマ 伝えたいこと 備忘録 時事ネタ
ブログは今や庶民である私や普通の一般人でも見事にサイトとして運営できるようになってきます。ブログが出始めた頃はブログとホームページは明確に違いがあり検索ポータルサイトなどでも通常の検索とブログ用の検索…
インターネット カスタマイズ カスタマイズ ツール 伝えたいこと 備忘録 時事ネタ
ホームページやブログなどサイトのデザインには画像はもちろんですが、 その他にCSSやHTML(HTML5も含む)で色の付け方?などでカラーコードと呼ばれるものを使用すると思います。 (他にもRGBなど…
先日画像にリンクがある場合に画像を透過させるCSSでの方法を記載しました。 画像にリンクがある場合にCSSだけでゆっくりと透過させる方法 こちらの続編で忘れないうちに記事にして備忘録として残しておこう…
WordPressで使われているphpというものがあります。 これにもバージョンがあるらしく、 現状私が利用させていただいているサーバーのバージョンは5.5ではなく5.2.17でした。 そして、 Fa…
世界中でNo.1のシャアを誇るAmazonでのお得なお買い物でお得をしよう!!ネット通販なので、もちろん24時間年中無休です。健康商品から食品、車カスタマイズ商品、大手家電メーカー商品やパソコンの自作サプライ商品、その他アマゾン・プライムでは映画やドラマなど多くの作品や番組を見ることができます。マスクなど衛生商品も今では必須アイテム。一番信用できて一番商品数の多いAmazonでの買い物が絶対にオススメ!!
2024-04-28
~Weeklyメンテナンス~:211 Pt. 今回はちょっとハードルが高く思えるが、やってみれば意外と簡単な樹脂補修について紹介しよう。クルマの各部をDIY ...
2024-04-28
2024年04月28日 11:26『高く』(佐原)【尾道市 福山市 三原市でお車の整備・車検・メンテナンス・修理/ 板金・塗装 全部マルっと カープランニング広島 へまかせ ...
2024-04-28
見える部分であれば、日頃から対処ができるが、見えない部分のメンテナンスは、かなり難しい。 ... □価格:軽自動車・リッターカー ... 自動車用語集 大車林. 【 ...
2024-04-28
... メンテナンスサポートまで行う。 同社はトヨタ自動車の「ハイエース」をベースとしたキャンピングカー製造では国内シェアトップ。これまで培ってきた ...
2024-04-28
ACCEL AUTO GARAGE アクセルオートガレージ. 福岡周辺のカーエアコンガスクリーニングの事なら弊社にお任せ下さい!スナップオンのデュアルプロ ...
よろしかったらシェアよろしくお願いします。
[…] 記事の上に今日の人気記事を表示する方法 ↑ のように、 個別記事のタイトルの上に「本日の人気記事」というものを表示する方法です。 WordPressにおいては、 WordPress Popula2016-02-28 08:28 […]