WordPressのテーマをStinger3からStinger5へ乗り換えたまとめ

WordPressのテーマをStinger3からStinger5へ乗り換えたまとめ

2015年4月29日 オフ 投稿者: ぱる☆ミ

Pretty Awesome 3D Metal WordPress Logo

まとめと言っても自分用メモです。だから見難いったらありゃしませんw

WordPressのテーマを今まで色々とチューニングしてきたStinger3から、デフォルトのStinger5に切り替えたところ、Googleの「Page Speed Insights」のスコアがデフォルトのままではかなり低く(60点)なってしまったので再度チューニングを進めます

なお、いずれもwordpressのダッシュボードから外観→テーマの編集で修正しています

フッター(footer.php)

下準備:まずはfontawesomeからファイル一式をダウンロードして、サーバ内へ転送しておく

  • </body></html>の次行へfont awesomeのリンクを追加

<link rel=”stylesheet” href=”ここにfont awesomeのパスを記入/css/font-awesome.min.css”>

ヘッダー(header.php)

  • faviconがstinger5のデフォルトアイコンに変えられてしまうので元通りのアイコンに修正

<link rel=”shortcut icon” href=”/favicon.ico” />

  • font-awesome.min.cssを削除して、代わりにstyleタグでファーストビューの表示に必要となる要素を記載。念のためにフッター部の</html>の後でcss本体を読み込ませておく(フッター項で前述)

<style>
@font-face{font-family:’FontAwesome’;src:(フォルダ名を含むので中略);font-size:inherit;text-rendering:auto;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;transform:translate(0, 0)}
.fa-calendar:before{content:”\f073″}
.fa-repeat:before{content:”\f01e”}
.fa-line-chart:before{content:”\f201″}
.fa-eye:before{content:”\f06e”}
.fa-folder-open:before{content:”\f07c”}
</style>

記事一覧表示(itiran.php)

  • デフォルトではカテゴリとタグが一括で表示されているので、分別して表示

<div class=”blog_info”>
<p><i class=”fa fa-clock-o”></i>&nbsp;
<?php the_time(‘Y/m/d’) ?>
&nbsp;<span class=”pcone”><i class=”fa fa-folder-open”></i>&nbsp;
<?php the_category(‘, ‘) ?>
<i class=”fa fa-tags”></i><?php the_tags(”, ‘, ‘); ?>
</span></p>
</div>

  • 一覧表示中、3行目と8行目に広告を挿入する

<?php if ( $loop_count == 3 || $loop_count == 8 ) : ?>

ここに広告(adsense)のスクリプトを記入

<?php endif; ?>

サイドバー(sidebar.php)

  • Twitterのフォローアイコンを追加
  • Feedlyのアイコンを追加。アイコン(PNG)はローカルにダウンロードして更に最適化も実施
  • 検索フォームの直下に、現在のカテゴリの人気記事を表示

<?php if (is_single() || is_category()) :?>
<?php
/* 現在のカテゴリ-の取得 */
$cat_now = get_the_category();
$cat_now = $cat_now[0];
$now_id = $cat_now->cat_ID; /* カテゴリID */
?>
<h4 class=”menu_underh2″>「<?php echo $cat_now->cat_name; ?>」に関する人気記事</h4>
<?php if (function_exists(‘wpp_get_mostpopular’)) {
$args = ‘
limit=5&
range=weekly&
order_by=views&
thumbnail_width=60&
thumbnail_height=60&
cat=”‘.$now_id.'”&
wpp_start=””&
wpp_end=””&
post_start=”<div class=”populer-post”><ul>”&
post_end=”</ul></div>”&
stats_comments=0&
stats_views=1&
post_html=”<li><a href=\'{url}\’>{thumb}</a><h5><a href=\'{url}\’>{text_title}</a></h5><span class=\’post-stats\’><span class=\’wpp-views\’>{stats}</span></span><a href=\'{url}\’ class=\’link-box\’></a></li>”
‘;
wpp_get_mostpopular($args);
} ?>
<?php endif; ?>

単一記事の投稿(single.php)

  • <div class=”blogbox”>要素を閉じる</div>の直下に、スマホ専用のadsenseを追加

<?php if (is_404()) { ?>
<?php } else { ?>
<?php if(is_mobile()) { //スマホの場合 ?>

ここにレスポンシブのAdsendeコードを記入

<?php } else { //PCの場合 ?>
<?php } ?>
<?php } ?>

とりあえずこれぐらいのチューニングをしたことで、Google先生からは95点を頂けるようになりました

残り5点を取るには楽天のモーションウイジェットを外したり、twitterのアイコンなど外部の画像を引っ張っている部分を削ったり等コンテンツの見かけに関わるような部分&自分では手出し出来ない外部サイトの仕様なので放置しますw