「Simple GA Ranking」を導入。レイアウトをSimplicityに合わせカスタマイズしてみた

当ブログで使用してるWordPressのテーマ「Simplicity2」。

「Simplicity2」には標準で、「WordPress Popular Posts」プラグインを使用した、サイドバーに人気記事を表示する機能があります。しかしこの「WordPress Popular Posts」はサーバー負荷が重いらしく、イマイチ評判が良くないのです。

そこで、負荷の軽いプラグイン「Simple GA Ranking」を代わりに使う人が結構いるそうです。

Simple GA Ranking

 

で、当ブログにも「Simple GA Ranking」を入れて、人気記事の表示を「Simplicity2」のレイアウトに合わせてみたので、その方法を書いておきます。

「Simple GA Ranking」の導入

まず、プラグイン「Simple GA Ranking」を導入するわけですが、インストール後の設定が少々面倒です。

「Simple GA Ranking」はGoogle Analyticsを利用して人気記事を表示するので、Google APIを使うのですね。

正直自分はAPIとかよくわからないので(汗)、この設定作業が心配でしたが、下記の記事の通りに進めたら問題なく導入できました。

前回の記事に書きましたとおり、エックスサーバーからCPU負荷が高いよって連絡が来ました。最悪の場合、リソース制限されてブログの表示が困難になる可能性があります。利用しているプラグインのなかで「WordPress Popular Posts」

 
最初はこの設定が多少面倒ですが、結果的に「Simple GA Ranking」でサーバー負荷は軽くなったので、個人的には導入をオススメします。

「Simple GA Ranking」のレイアウトを設定

次に「Simple GA Ranking」で表示される人気記事のレイアウトを設定します。

「Simple GA Ranking」はそのままだとサムネイルが表示されず、文字リンクだけです。

そこで以下の記事を参考にして、サムネイルも一緒に表示されるようにしました。

WordPress Popular Postsと比較して動作が軽くて安定していると言われている「Simple GA Ranking」。 エックスサーバーの担当者からもおすすめされたので、すぐにWordPress Popular Postsから乗り換えたんですが、確かに安定している気がします。 ただ、その安定感の理由でも...

 
ソースコードを載せてくださってるので、それをfunctions.phpにコピペするだけでOKです。これでサムネイルが表示されます。

が!ここでもう一つ解決しなければいけない問題が。人気記事の上にある最新記事とのレイアウトが合ってない・・・。

Simple GA Ranking css

 画像の上半分が最新記事で、下半分が「Simple GA Ranking」による人気記事なのですが、両方のレイアウトが違うので見栄えが良くありません。

そこで、以下の内容をstyle.css(子テーマ)に追加しました。

/****************
Simple GA Ranking
*****************/

.sga-ranking-list img {
	width: 75px;
	height: 75px;
	float: left;
}
.sga-ranking-list figure {
	float: left;
	margin-top: 3px;
 	margin-right: 5px;
	width: 75px;
	height: 75px;
	overflow: hidden;
}
.sga-ranking-list {
	margin-bottom:15px;
	text-align: left;
}
.sga-ranking-list:after {
	clear: both;
	content: "";
	display: block;
}
.sga-ranking-list:last-child {
	border-bottom: none;
	padding-bottom: 0;
	margin-bottom: 0;
}
.sga-ranking-list figure a {
	display: inline;
}
.sga-ranking-list a {
	overflow: hidden;
	line-height: 1.5;
	text-decoration: none;
        color: #111;
}

.sga-ranking-list a:hover{
	text-decoration: underline;
}
#sidebar .widget_simple_ga_ranking ol {
	padding-left: 0;
	list-style: none;
}

 
これで下の画像のように、「Simplicity2」の新着記事と同じレイアウトになると思います。

Simple GA Ranking css

必要があればこのソースに手を加えてください。

 
Mitchie M のコメント:

 

サーバー負荷はSEOにも影響するらしいので、なるべく軽い方が良いです

 

【著者:Mitchie M @_MitchieM

▼ その他のWordPress関連記事

WordPressはインストールすると、デフォルトでテーマがいくつか入ってます。 ですが、自分のブログのWordPressで不要なテーマを削...
当ブログで使用しているWordPressのテーマ「Simplicity」。 今までバージョン1(1.9)を使っていたのですが、この度Sim...
近年、360度パノラマ写真を手軽に撮影できるようになったので、自分も使ってみることにしました。別名で、全天球写真とか全方位写真とか呼ばれてる...
ここ最近ブログで、アイコンに吹き出し(フキダシ)を付けて会話形式にしてる記事を良く見かけるようになりました。 これが文字数が少ないわりに、面...
最近、Google AdSenseで「関連コンテンツ ユニットに広告を表示することで、収益増加を図ることができます。」というメッセージが表示...
先日なのですが、このブログでWordPressのダウングレードを試みたところ、インストールに失敗したのか、サイトの画面が真っ白になってしまう...
スポンサーリンク

フォローする

関連コンテンツ(レスポンシブ)
スポンサーリンクと関連コンテンツ