WPテーマ SANGO で大きなサムネの「人気記事」を作ってみた【ただコピペするだけ】

このブログ(= bryog.com)は、人気のテーマ「SANGO」がベース。マテリアルな感じがとてもに気に入っているのですが、一部の機能を停止させたり、たまにカスタマイズを追加したりしています。

「SANGO」にはもともと「人気記事」をサイドバーに表示させる機能があるんですけど、デザインと計測に関することがあまり気に入っていなかったんですよね。

ということで、「SANGO」の Style.css を利用したまま、手動ですけどシンプルな「人気記事」をサイドバーに表示してみることにしました

人気記事を HTML で表示させる

音楽や映画などと違って、べつに週毎に計測された PV 数を元に「人気記事」を表示させる必要もないので、シンプルに HTML で表示させることにしました。

もともと、記事一覧トップに「人気記事」を表示させる方法として作者のサルワカさんも HTML を使って手動で表示させる方法を紹介していたので、サイドバーだって同じだよねと思ったことが経緯でもあります。

そこで、デフォルトのデザインに合わせることもできましたが、もうちょっとインパクトがあるような状態にしたかったんですよね。

Popular Posts

ということで、サムネイルを大きめに表示させるような人気記事一覧にしてみました

HTML をコピペするだけでOK

画像をシンプルに貼り付けようと思ったのですが、気になったことは「SANGO」のトップと投稿画面ではサイドバーの幅が微妙に違うこと

そのため、どちらかに合わせると微妙にデザインが崩れることがあったんですよね。

ということで、デフォルトで書かれている Style.css を利用して「人気記事」を表示させてみることにしました。

HTML
<div class="yourprofile">
   <p class="profile-background"><a href="リンク先のURL"><img src="画像のURL" ></a></p>
</div>
<div class="profile-content">
  <p><strong><a href="リンク先のURL" style="text-decoration:none;"><font color="#2b2b2b">タイトル</font></a></strong></p>
</div>

そう、プロフィールのデザインに使われているものを利用してみました。これをウィジェットの「カスタム HTML」に追加して、URL を任意のものへ変更すれば綺麗に表示されます

基本設定ではリンク文字が青色だったり、カーソルを持っていくと下線が出てしまうので、文字は黒っぽい色にして下線も出ないようにしています。

あとは、2件3件と表示させたい分だけこのコードを増やして表示させてあげれば、好きなだけ「人気記事」を表示させることができます。

コピペするだけなので、とっても簡単だと思います。

タイトルの前にアイコンを付ける

「SANGO」では Font Awesome が使えるようになっているので、好きなアイコンをタイトルの前にも付けることができます。

ただ、表示させるにはちょっとコツがいるので初心者の人は頑張ってみましょう。

CSS を追加して、要素を探す

まずは、カスタマイズから「追加 CSS」を開き、下記のコードを追加しちゃってください。

追加 CSS
.sidebar #custom_html-○ .widgettitle:before {
    content: "\f4da";
}

そしてそのままの画面で、「人気記事」のタイトルにカーソルを持っていって「右クリック」します。するとメニューが表示されるので、Chrome なら「検証」、Firefox なら「要素を調査」を選択します。

選択すると「カスタム HTML」の詳細が表示されるので、その中から「custom_html-○」と書かれている部分を探してみてください。

Popular Posts

そこに書かれている最後の数字を、先ほど「追加 CSS」にコピペした内容の「○」の部分と変更してください。

そうすると、「」がタイトルの前に表示されるはずです。

アイコンを変更する

アイコンを変更するには、追加した CSS の中の「\f4da」の部分を変更します。

まずは、Font Awesome へアクセスしてから表示させたいアイコンを探してください。

決まったらアイコンをクリックして、今回の変更では「Unicode」をコピーします

Popular Posts

そして、「f4da」の部分と入れ替えてください。「\」は必ず必要となるので、Unicode の前には入れておいてください。そうすると、自分で選んできたアイコンに入れ替わっているはずです。

これで、画像をバーンと表示させた状態で「人気記事」を表示させるカスタマイズの解説は終了です。

デフォルでは難点があった

このブログでは手動で「人気記事」を表示させていますが、正直なところ一時的にバズっただけの記事などがランキングに反映されたりするのもちょっとイヤだったんですよね。

なので、よく読まれている記事の中から少し誘導させたい記事を選択して表示させるようにしたわけです。

これまでの PV 数が反映されてしまう

デフォルトで使える「人気記事」の機能では、記事を投稿してからの PV 数が全て反映されるんですよね。そのため、最近人気がある記事までは表示されないこともあります。

そこで週間の PV 数を計測できるようにするには、プラグイン「WordPress Popular Posts」を使ったりする必要があったんです。

せっかくサイトが重くならないよう「人気記事」を表示できる機能を標準で追加してくれているのに、「WordPress Popular Posts」を使っては本末転倒という感じですからね。

あまりインパクトがない

標準の機能ということで、「人気記事」をウィジェットに追加するとサイトのデザインとマッチしてちょうど良い感じになります。ただ、ちょっとインパクトに欠けるかなと思ったんですよね。

ちょっとこぢんまりしているような、そんな気がしたんです

ただ導入手順でも解説しましたが、トップページと投稿画面ではサイドバーの幅が異なることがネックになっていたんですよね。

そこで、もともと使われている CSS をちょっと拝借した形で人気記事を表示させたわけです。

さいごに

最近は SNS の影響などもあって、自分で検索するよりも「おすすめ」などとして勝手に表示されるものをそのまま読み続けていく傾向にあるみたいですよね。

そのため、発信する側はどんどん情報を見せることが大切な時代になってきてもいるってことですかね

「人気記事」をバーンと表示させる手順を紹介しましたが、「SANGO」でタイトルの前にアイコンを表示させたい人にも参考になったと思います。

上手にデザインをカスタマイズして、一緒に楽しいブログライフにしていきましょう!