WordPressテーマ「LION MEDIA」カスタマイズ #05プラグインのメモ │ memorandum

今日のエントリーは今のサイトで使っているプラグインをまとめてみようと思います。前回いただいていた質問No4にも答えられるかと思います！

いただいていたご質問は以下のような感じです。

1.各投稿ヘッダー背景画像を固定したい
2.ブログタイトルのスペースの縦幅を広くしたい
ブログサブタイトルの文字を大きくしたい
　ブログタイトル画像を大きくしたい
3.タイトルスペース右上にあるSNSアイコンのカラーの変更方法
4.サイドバーのDaily Rankingのアイコン、イメージ無しにする方法

今回は1〜3については別記事で書きました。
4はプラグインで実現していますので、そのことを書いてみます。

WordPressテーマ「LION MEDIA」カスタマイズ #04いただいた質問に答えてみる

1. インストールしているプラグインは7個
2. Hierarchical HTML Sitemap
3. Instagram Feed
4. WordPress Popular Posts
- 4.1. ショートコード
- 4.2. CSS
5. と言うわけで・・・

インストールしているプラグインは7個

プラグインはあまり入れない方が良いと聞いたことがある＆それほど凝ったサイトにはしていないということもあり、現在導入しているプラグインは以下の通り７つです。

a3 Lazy Load
Broken Link Checker
Compress JPEG & PNG
WP Multibyte Patch
Hierarchical HTML Sitemap
Instagram Feed
WordPress Popular Posts

7つ目のWordPress Popular Posts がサイドバーに表示している人気エントリーを表示しているプラグインになります。

WordPressプラグイン6つのメモ

ちなみに、WordPressにした直後のプラグインは６つだったみたいです。
上のエントリーではご紹介していたものの、現在は使わなくなったのはALL IN ONE SEOとAkismet Anti-Spam。

前者はSEOは気にしてないのでいいかなと思ったから削除。LION MEDIAのテーマでGoogle Analyticsの解析タグなどは追加できるし、検索エンジン対策などに興味がないと言うのが理由です。

後者はこのブログってコメント欄解放していないので不要だと言うことに気づき、削除しました。

代わりに追加になっているプラグイン３つについて書いてみます。

Hierarchical HTML Sitemap

エントリー数がだんだん増えてきたので人が見るサイトマップがあるといいかなと思って入れました。固定ページを追加して、ショートコードを貼るだけで完成するので導入はとても簡単です。
https://misako1104.com/sitemap/

サイトマップはカテゴリー別にタイトルを並べてくれるので、どんな記事を書いたかぱっと見ることができて便利です。
1000エントリーとか越えると見辛いかもしれないですね。

固定ページからリンクを張っているなお、人気記事TOP15はLION MEDIAテーマが作ってくれています。

Instagram Feed

インスタグラムを頑張りたいと言う気持ちでつけてみました。一時期TwitterのFeedを載せていたこともありましたが、どちらかと言うとInstagramの方が更新頻度が高いのでそちらを載せています。

WordPress Popular Posts

LION MEDIAのテーマ自体で各エントリーのアクセス数をカウントしてくれて、かつランキング表示機能もあります。（しかも見た目も綺麗）
ただ、私の理解力ではデイリーランキングのようなものはつけられなかったんです。１週間か、1日くらいの短いスパンでランキング表示できたらいいなあと思って試しに導入しているのがこちらのプラグインです。

ショートコード

WordPress Popular Postsを導入したらあとはショートコードをウィジットなどに書けば表示できます。ランキングの期間や項目、各エントリーに対する表示項目（サムネイルの有無、更新日の表示等）を色々と変更することができます。
私は、期間は1日、５つのエントリー、サムネイルなしで表示しています。
参考にショートコードの記載方をメモしておきます。（ショートコードなので、以下のコードの前後に” [ “と” ] “が必要です）

wpp range="last24hours"
limit=5
stats_views=0
order_by="views"
header_start='<h3 class="title">'
header_end='</h3>
wpp_start='<ol class="popularol">'
wpp_end='</ol>' 
post_html='<li class="popularli"><a href="{url}">{text_title}</a></li>

CSS

基本的にリスト（olとliタグ）で並ぶので、その先頭にCSSでランキング順位を表示しています。もう少しCSSで遊びたい気もしますが、このプラグイン自体が実験的に入れていることもあり、とりあえずと言う感じです。

.popularol{padding:5;
margin:0;
list-style:none!important;
counter-reset:number;}

ol.popularol li{ position: relative;
padding-left: 50px;
  line-height: 1.5em;
  padding: 0.5em 0.5em 0.5em 30px;}

ol.popularol li:before {

  position: absolute;
  counter-increment: number;
  content: counter(number);
 
  display:inline-block;
  background: #5c5c5c;
  color: white;
  font-size: 20px;
  border-radius: 50%;
  left: 0;
  width: 30px;
  height: 30px;
  line-height: 25px;
  text-align:center;
  top: 50%;
  -moz-transform: translateY(-50%);
  	-webkit-transform: translateY(-50%);
  	-o-transform: translateY(-50%);
  	-ms-transform: translateY(-50%);
  	transform: translateY(-50%);

}

と言うわけで・・・

たまにはプラグインも見直してみようと思って書いてみました。あと少しでWP導入から１年。だいたい形は落ち着いてきたかなと思っています。

私のブログでは今導入している７つのプラグインで不自由なくできています。
（メールフォームはLION MEDIAテーマについていたものを使っているので、テーマにない場合はプラグインで導入したと思います）

参考になりましたら幸いです。