【金ナシ暇ナシ4児アリ!】108円せどりで暮らすヤフオク&Amazon評価1万越え主婦せどらーのせどり術♪

子ども4人抱えて「せどり・自営業・外パート・主婦業」4足ワラジ生活を継続中!ヤフオク&アマゾンで稼ぐアラフォー主婦のせどり術を大公開♪

プラグイン設置してみた

図解/「人気記事ランキング」をSTINGER PLUS+のサイドバーに設置する方法【主婦ブログカスタマイズ(8)】

2016/11/15

人気記事一覧をサイドバーに表示させたい!

こんにちは。四足ワラジ主婦せどらーのmanoです。

今回は、ブログの人気記事表示プラグイン

「WordPress Popular Posts」をSTINGER PLUS+のサイドバーに表示させる方法

について、書いてみたいと思います。

 

[スポンサーリンク]

 

STINGER PLUS+ではウィジェットで一発設定

このブログも記事が増えてきたので、

サイドバーに人気記事一覧を表示したいな(*'ω'*)

と思ったのですが、STINGER PLUS+できちんと表示させるためには

ちょっと設定が必要

でしたので、忘備録的に書いていきたいと思います。

 

【事前準備】

「WordPress Popular Posts」をインストールして設定しておく。

 

【設定操作】

1. ダッシュボードから「外観」「ウィジェット」を選択する。

wp-p-posts-1

 

2. 「利用できるウィジェット」の中から「WordPress Popular Posts」を探す。

 ⇒右側にある「サイドバートップ」の任意の位置に「WordPress Popular Posts」引っ張って移動させる。

wp-p-posts-2

私の場合は、「検索」の下、「プロフィール」の上にしたかったので、真ん中に入れました。

 

この時点でサイトの表示を確認すると、こんな感じ。

wp-p-posts-3

 

ここから、更に必要な設定を入れていきます!

 

3. ウィジェットの設定画面でパタメータを入力。

Title(タイトル名) ⇒ 人気記事ランキング

Show up to(表示する記事数) ⇒ 5

Sort posts by(記事の並び順)「Total views」(総アクセス数)

Time range(アクセスカウントの期間)「All-time」(ブログ開設初期から現在まで)

Post type(s) (データを記録する対象のページ)

・post(投稿記事)
・page(固定ページ)

 ⇒ 「post」のみ残して削除

wp-p-posts-4

Post settings (投稿設定)

Shorten title(タイトルの文字数を指定した数でカットする)
Display post excerpt(記事の要約を表示)
Display post thumbnail(記事のサムネイルを表示)

 ⇒今回は、「Display post thumbnail」のみチェック

Stats Tag settings(タグ設定) ⇒ 今回は全部はずす

 

4. ここで一度「保存」する。

wp-p-posts-8

 

5. 「Display post thumbnail」の下にサムネイルの表示設定項目が表示されるので、それぞれ数字を入力。

Set size manually(サムネイルのサイズ設定)

Width(サムネイル画像の幅) = 100px

Height:(サムネイル画像の高さ) = 100px

wp-p-posts-6

[スポンサーリンク]

 

6.  保存して、サイトの表示が下のようになっていればOKです!

wp-p-posts-7

 

なんか表示がおかしい!?

本来ならここで「設定終了!」となるハズなのですが、

ウィジェットのタイトルが表示されていない

サムネイルがくっついている

という問題が…(-_-;)

 

こちらも早速修正していきます!

7. 「Use custom HTML Markup」にチェックを入れて保存すると、カスタマイズフィールドが開くので、下記項目を入力する。

Before / after title(タイトルの前後に追加するタグの指定)

Before:<h4 class="menu_underh2">

After:</h4>

Before:<div class="kanren kadomaru">

After:</div>

<dl class="clearfix wpp-list">
<dt>{thumb}</dt>
<dd> <h5>{title}</h5> <p>{excerpt}</p><p>{stats}</p></dd>
</dl>

wp-p-posts-12

 

8.  保存して、サイトの表示が下のようになっていればOKです!

wp-p-posts2-5

 

これで無事、

アイキャッチの隙間があいて、サムネイルが丸くなりました(^^♪

 

ランキング順位表示は出来ないの?

この「人気記事ランキング」を表示させるカスタマイズ記事を読んでいると、

アイキャッチの脇に順位の数字を表示させるカスタマイズ

をしている方がとても多いんですよね。

 

確かに、数字が出ている方が見栄えもいいし、分かりやすい。

これはぜひやりたい!(≧▽≦)

と思って、あれやこれやのサイトを見ながら、

半日以上かけてチャレンジ

してみたのですが、結局、

どうやっても上手く表示できませんでした~(´;ω;`)

 

慣れないCSSいじったり

ウィジェットの設定をいじったり

Stingerの親テーマから、必要そうな設定ファイルをFFFTP経由で子テーマにダウンロードしたり

して、色々とコピペしまくってみたのですが、

結局どれも反映されずじまい。

 

STINGER PLUS+は、他のバージョンとは設定ファイルが異なるのでしょうか。

どうやっても表示してもらえないんです!

ううううう………くやしい~~~( ;∀;)

 

でも、この設定方法を探しているうちに、

開いているページと同じカテゴリ別の人気記事のみ表示する方法

が分かりました!

 

実際やってみて、なんとか途中までうまく行ったのですが、

まだひとつ設定できていない

ところがあるので、それが解決したら、また記事で書きたいと思います。

上手くいくよう祈っててください(*'ω'*)

 

それでは、今回の記事が読んで下さった方のお役に立てば嬉しいです。manoでした!

お宝本棚・記事下

▲▽▲セット本検索・購入管理・売れ線予測▲▽▲
     がオールインワンで出来る、
  セット本管理システムの決定版!
 ↓ ↓ ↓ ↓ ↓ ↓ ↓ ↓ ↓ ↓


ランキング


【人気ブログランキング】
この記事がお役に立ちましたら、ポチっと押して頂けると励みになります♪

問い合わせ


★記事を読んでの疑問や質問、せどりに関するお悩みなどがありましたら、
「問い合わせフォーム」よりお気軽にご連絡ください!
24時間以内に100%お返事致します(^^♪

-プラグイン設置してみた
-, , ,