【Simple GA Ranking：備忘録】長いタイトルを丸めつつ設置してみましたよ

▲「丸める」って言うんですね。

Simple GA Ranking／WordPressプラグイン

はい、釣りは一切関係ナシ！！

WordPressをご活用されているブロガーさんだけを対象にしたネタですアシカラズ。

というか、アレコレ調べた際にドンピシャなサイトが見つけられなかったので備忘録的に記しておきたかっただけですスミマセン。。

ソンナコンナで早速本題に。

Simple GA Rankingを使う理由

いわゆる人気記事ランキング、お仕事系も含めて使い勝手のよろしい「WordPress Popular Posts」を活用していたのですが。

とりわけお仕事で運用しているサイトにおいて、ある程度アクセス数が増えると負荷がハンパなく。

設置は面倒だけど軽さに定評がある（らしい）「Simple GA Ranking」に白羽の矢。

そのついでと申しましょうか、テストと申しましょうか。

そんなノリで、アクセス数的には全然余裕だったコチラのブログにも設置してみた次第です。

Simple GA Rankingの設置の仕方

えっと、思いっきり面倒なので下記リンクをご参照ください♪

いずれもとっても参考になりました！！

本丸！Simple GA Rankingの微調整：2021年9月18日改定

前述したリンク先を参考に設置し、CSSで整えるだけで9割方はよろしかったのですが。

無駄にタイトルが長めなコチラのブログの場合、端末によってレイアウトが崩れることが。

解決策としては、一般的に良く見受ける文字数によって丸めちゃうのがベストかなぁと。

尚、この「丸める」という表現は今回初めて知りました♪

【いじるファイル】

対象ファイルはプラグインフォルダ内の「simple-ga-ranking/lib/shortcode.php」。

イワズモガナですが、アレコレいじる前にバックアップを取っておいた方がやっぱり安心。

ワタクシは「_shortcode_deforlt.php」みたいなネーミングで残すようにしています、決め事にしちゃうと何かとラクチンです。

【ソースの変更箇所】

該当ファイルの24行目を下記の通り変更しました。

$post_title,

1	$post_title,

mb_strimwidth($post_title, 0, 76, '…' , 'UTF-8'),

1	mb_strimwidth($post_title, 0, 76, '…' , 'UTF-8'),

タイトル文字が半角76文字以上だったら省略して「…」を付ける的な。

このやり方がベストかどうかはわかりませんが、一応イメージ通りの結果を得ることができています。

オマケ：CSSとか

/* --------------------------------------------------
   = Simple GA Ranking
-------------------------------------------------- */
.sga-ranking-list figure {
    float: left;
	margin: 0 10px 0 0!important;
	width: 80px; /* 画像の横の長さ。自由に変更可 */
	height: 80px; /* 画像の縦の長さ。自由に変更可 */
    overflow: hidden;
}

.sga-ranking-list {
	margin: 0;
    padding: 15px 0!important;
	border:none!important;
    border-top: 1px solid #e1e1e1!important;
    border-bottom: none!important;
    text-align: left;
	list-style: none;
}
.sga-ranking-list::after {
    clear: both;
    content: "";
    display: block;
}
.sga-ranking-list:last-child {
    border-bottom: 1px solid #e1e1e1!important;
    padding-bottom: 0;
    margin-bottom: 0;
}

.sga-ranking-list a {
    overflow: hidden;
    line-height: 1.4;
}

/* 順位表記 */
ol.sga-ranking {
	counter-reset: pupular-ranking;
}

li.sga-ranking-list {
	position: relative;
}

li.sga-ranking-list:before {
	background: none repeat scroll 0 0 #222222;
	color: #fff;
	content: counter(pupular-ranking, decimal);
	counter-increment: pupular-ranking;
	font-size: 76%;
	font-weight:bold;
	left: 0;
	top: 15px;
	line-height: 1;
	padding: 6px 8px 5px;
	position: absolute;
	z-index: 1;
	border-radius: 4px 0 4px;
	filter:alpha(opacity=90);
    -moz-opacity: 0.9;
    opacity: 0.9;
}

/* --------------------------------------------------

= Simple GA Ranking

-------------------------------------------------- */

.sga-ranking-list figure {

float: left;

margin: 0 10px 0 0!important;

width: 80px; /* 画像の横の長さ。自由に変更可 */

height: 80px; /* 画像の縦の長さ。自由に変更可 */

overflow: hidden;

}

.sga-ranking-list {

margin: 0;

padding: 15px 0!important;

border:none!important;

border-top: 1px solid #e1e1e1!important;

border-bottom: none!important;

text-align: left;

list-style: none;

}

.sga-ranking-list::after {

clear: both;

content: "";

display: block;

}

.sga-ranking-list:last-child {

border-bottom: 1px solid #e1e1e1!important;

padding-bottom: 0;

margin-bottom: 0;

}

.sga-ranking-list a {

overflow: hidden;

line-height: 1.4;

}

/* 順位表記 */

ol.sga-ranking {

counter-reset: pupular-ranking;

}

li.sga-ranking-list {

position: relative;

}

li.sga-ranking-list:before {

background: none repeat scroll 0 0 #222222;

color: #fff;

content: counter(pupular-ranking, decimal);

counter-increment: pupular-ranking;

font-size: 76%;

font-weight:bold;

left: 0;

top: 15px;

line-height: 1;

padding: 6px 8px 5px;

position: absolute;

z-index: 1;

border-radius: 4px 0 4px;

filter:alpha(opacity=90);

-moz-opacity: 0.9;

opacity: 0.9;

}

特別なことをしているわけではないのですが、何かしらの参考になればということで。

プラグインの更新に注意！！

プラグインの更新を促されて何も考えずに実践すると、結果的に折角カスタムした設定が飛んじゃうことが。

そんなことも時折あるので、ココロの片隅に留めておいた方がよろしいかなと。

事実、ワタクシもこのカスタマイズで見事にやらかしてました。。

ちなみに本件に関しては、設定が飛んじゃったとしても基本的に「タイトル表示の文字数制限」部分だけだと思うので然程慌てる必要もないのですが。

ただ、気付かず放置しておくとアレなので念のため♪

まとめ

タイトル表示の文字数制限云々はさておき、「Simple GA Ranking」に変えたら負荷はとても軽くなりました。

設置時の設定が割と面倒ですが、マジ体感できるレベルなのでオススメです！！

はい、とりあえずそんな感じで。

：ブログランキング【励みになります】