テーマをストークに変更したのでカスタマイズやプラグインをまとめてみるよ

WordPress
この記事は約19分で読めます。
現在はサーバーをConoHa WINGに移転し、テーマをCocoon+Season(シーズン)に変更しています。
詳細は下記のエントリーをご覧ください。

今までこのブログのテーマはSimplicityにuc-modというスキンを適用し、それに手を加えたものを使っていました。

Simplicityに特に不満はなかったのですが、いろいろ他のブログを見て回っているうちにあるテーマが気になり始めました。
それが現在このサイトで使っているWordPressテーマ「ストーク」です。

ストークはOPENCAGE(オープンケージ)製のテーマで、他にもこんなテーマがあります。

どちらも使っている方が多いテーマなので1度は見たことがあるんじゃないかなぁと思います。

  1. ストークはこんなテーマです
  2. 有料だけどそれだけの価値はある
  3. functions.phpに追記したこと
    1. コンテンツ内にある非SSLのURLを表示前にSSL化する
    2. WordPress4.4以降でスマホで見た時に画像が荒くなるのを修正する
    3. 記事一覧ページにインフィード広告を表示する
  4. 404ページのカスタマイズ
  5. その他のカスタマイズ
    1. 【PCのみ】英語表記付きのグローバルナビを設置する
    2. 見出しをハミングバードっぽく変更
    3. フォントをフロップデザインWEBフォントに変更
    4. PS Auto Sitemapの邪魔なリストアイコンを消す
    5. 強調文字をちょっとおしゃれに
    6. 参考情報用のバッジ
    7. アプリーチ・カエレバ・ヨメレバの見た目を変更
    8. CTAウィジェットを複数表示する
    9. サイドバーにフォローボタンを設置
    10. 個別エントリーの「この記事をかいた人」をエントリー上部に移動
    11. ブログの回遊率をあげる
    12. スマホ表示の時にフッター固定メニューを表示する
    13. 囲み枠の背景に色をつける
  6. 現在動いているプラグイン
    1. 当サイトのスペック
    2. AddQuicktag
    3. Akismet Anti-Spam (アンチスパム)
    4. All In One SEO Pack
    5. Broken Link Checker
    6. Contact Form 7
    7. Crayon Syntax Highlighter
    8. Edit Author Slug
    9. EWWW Image Optimizer
    10. Jetpack by WordPress.com
    11. Lockets
    12. Optimize Database after Deleting Revisions
    13. PS Auto Sitemap
    14. Pz-LinkCard
    15. Redirection
    16. SNS Count Cache
    17. Table of Contents Plus
    18. WordPress Ping Optimizer
    19. WordPress Popular Posts
    20. WP Fastest Cache
    21. WP Multibyte Patch
    22. ウィジェットを表示(Display Widgets)
    23. 日本語ウェブフォントプラグイン
  7. 最後に
スポンサーリンク

ストークはこんなテーマです

ブログマーケッターJUNICHI監修のもとOPENCAGEが開発したWordPressテーマ。これまでのテーマ開発の経験とブログマーケティングのノウハウの融合によってうまれた、ブログマーケティングのためのWordPressテーマです。 スマートフォンでの使用感にとことんこだわり、見た目のインパクトよりも「使いやすさ」「読みやすさ」にこだわりました。見た目は当然のこと、機能的にも徹底的にモバイルファーストにこだわりました。

引用 WordPressテーマ「ストーク」

とことんモバイルファーストにこだわっているだけあって、スマホでの表示もPCでの表示もとてもキレイです。

スマホ表示

実は見た目はハミングバードのほうが好みなのですが、決め手になったのは上の写真を見ていただくとわかるように、スマホ用グローバルメニューがあること。
これによって、左上のハンバーガーメニュー(「三」みたいなやつ)にはグローバルナビとは違うものを表示することができます。

Simplicityではスライドメニューでグローバルナビとサイドバーを別々に表示することができ、スマホ用のページをコンパクトにまとめられるのが気に入っていました。
なので、ストークでも同じようにハンバーガーメニューをサイドバー代わりに使っています。

有料だけどそれだけの価値はある

このテーマは今まで使っていたテーマと違って有料のテーマです。
しかも、他の2つのテーマに比べてちょっと高いです。
でも、その分公式サイトやサポートがとても充実しているので安心して使えます。

デフォルトでもとてもキレイで見やすいテーマなのでカスタマイズはほとんどしていないんですが、Simplicity特有のショートコードを多用していたのと、今までテーマ独自の機能でできていたものができなくなってしまったりで、その修正に時間がかかってしまいました。

Simplicityからストークに変える人がこれからも増えると思いますので、手を加えていることや導入しているプラグインなどを、備忘録も兼ねて紹介したいと思います。

functions.phpに追記したこと

コンテンツ内にある非SSLのURLを表示前にSSL化する

いままでテーマの機能でSSL化していたものが、テーマを変えたことによってほとんどのページが混在コンテンツになってしまいました。
そのため下記エントリーを参考に、さらにfunctions.phpに追記しています。

  • 内部リンクURLのSSL化
  • Amazonアソシエイト画像のSSL化
  • バリューコマース画像(インプレッション画像)のSSL化
  • もしもアフィリエイト画像(インプレッション画像)のSSL化
  • A8.net画像(インプレッション画像)のSSL化
  • アクセストレード画像(インプレッション画像)のSSL化
  • 古いはてなブログカードの iframe URLのSSL化

引用WordPressサイトの内部リンクSSL対応(HTTPS化)をコードコピペでちょっと楽にする方法

上記に加え

  • アプリーチのSSL化
  • 楽天アフィリエイトのSSL化
  • 価格.comのSSL化
  • カエレバのSSL化

のコードを追記しました。

今のところこれでなんとかなっていますが、混在コンテンツを見つけ次第、随時追記していく予定です。

WordPress4.4以降でスマホで見た時に画像が荒くなるのを修正する

画像を最適化して表示する「Responsive Images」という機能は、デバイス毎に画像を最適なサイズで表示してくれるのでサイトの表示速度がよくなるというのが期待できる反面、画像を自動的に圧縮するため解像度が思っている以上に落ちてしまい、荒くなってしまう場合があるようです。

引用 WordPress4.4以降でスマホで見た時に画像が荒くなるのを修正する方法 | OPENCAGE

ということなので、上記エントリーを参考に2番めの方法でResponsive Imagesを無効化しました。

記事一覧ページにインフィード広告を表示する

公式サイトに説明がありました。

それに伴い、一番広告とデザインが馴染みそうなシンプルにPCの表示も変更しました。

合わせて今まで普通のAdSenseの広告を2つ目、4つ目、6つ目のh2の見出しの上に表示するようにしていたものを、2つ目の見出しの前だけに記事内広告を表示するように変更しました。

404ページのカスタマイズ

Simplicityではウィジェットで簡単に404ページのカスタマイズができました。
ストークでは404.phpを編集する必要がありますが、下記エントリーを参考にすれば簡単にできます。

その他のカスタマイズ

【PCのみ】英語表記付きのグローバルナビを設置する

デフォルトのままだとメニューの設定画面に英語表記を書き込むための「説明」欄が表示されていないので、下記エントリーを参考に「説明」欄を表示させる必要があります。

これに気づかずしばらくハマってました。

見出しをハミングバードっぽく変更

上記エントリーに掲載されているのはハミングバードの見出しの点線を消す方法なのですが、私はハミングバードの見た目が好きなので、あえて変更前のcssを使っています。
h3、h4は上記エントリーのものをそのまま使っていて、エントリーやページのタイトル、関連記事などのタイトルについては独自にcssに書き加えています。

フォントをフロップデザインWEBフォントに変更

下記のプラグインで簡単に変更できます。

一部フォントが変わらなかった部分に関しては下記エントリーを参考に変更しています。

PS Auto Sitemapの邪魔なリストアイコンを消す

ストークにテーマを変えたらサイトマップに邪魔なリストアイコンが表示されるようになってしまいました。
しばらくスタイル無しでつかっていたんですが、調べているうちに下記エントリーにたどり着いたので、現在はチェックリストのスタイルを適用しています。

現在、該当のエントリーは削除されています。

強調文字をちょっとおしゃれに

強調したいところに蛍光マーカー風のラインを引いたようなデザインにします。

下記エントリーを参考にしました。

参考情報用のバッジ

Simplicityのときに使っていたものを現在のテーマにに合わせて色だけ変えています(404ページへの参考リンクの黄色いバッジがそうです)。

アプリーチ・カエレバ・ヨメレバの見た目を変更

アプリーチ・ヨメレバ・カエレバについては以前と変わりません。

CTAウィジェットを複数表示する

このサイトのエントリーの下に表示されているテーマやサーバーへの画像つきリンクがCTAウィジェットです。
PCでは2カラム、スマホでは1カラムで表示されるようになっています。

サイドバーにフォローボタンを設置

ストークはシェアボタンは目立つんですが、フォローボタンが目立たないのと、Instagramのフォローボタンがないため、下記エントリーを参考にサイドバーにフォローボタンを設置しました。

個別エントリーの「この記事をかいた人」をエントリー上部に移動

個別エントリーの「この記事をかいた人」がずっと下までスクロールしないと見れないのが気になっていたので、下記エントリーを参考に上部に移動しました。

合わせて元々あった「この記事をかいた人」と「このライターの最新記事」(このブログは私一人で運営しているので)は不要なので、非表示にしています。

ブログの回遊率をあげる

下記エントリーを参考に個別エントリーの表示順序も変更してみました。

現在、該当のエントリーは削除されています。

当サイトでは

  1. SNSシェアボタン小
  2. 前後記事へのリンク
  3. 関連記事
  4. アドセンス広告
  5. CTAウィジェット
  6. コメント欄

の順に並んでいます。

ソースコードはこんな感じ。

<?php get_template_part( 'parts_singlefoot' ); ?>
<?php if(wp_is_mobile()): ?>
// スマホ用アドセンスコード //
<?php else: ?>
// PC用アドセンスコード //
<?php endif; ?>
<?php if ( is_active_sidebar( 'cta' ) ) : ?>
<div class="cta-wrap wow animated fadeIn" data-wow-delay="0.7s">
<?php dynamic_sidebar( 'cta' ); ?>
</div>
<?php endif; ?>
<?php comments_template(); ?>
<?php endwhile; ?>
<?php endif; ?>
</main>
<?php get_sidebar(); ?>
</div>
</div>
<?php endif; wp_reset_query(); //ワンカラム条件分岐END ?>
<?php get_footer(); ?>

スマホ表示の時にフッター固定メニューを表示する

私自身がハンバーガーメニューを片手で操作できず不便だったので、下記エントリーで紹介されている固定メニューを導入しました。

当サイトでは下記のようにちょこっとカスタマイズしています。

  • 色をサイトに合わせて変更
  • フォローボタンをFacebookからInstagramに変更

囲み枠の背景に色をつける

昨年末より大人めがねデビューをしていまして、その関係でノーマルな囲み枠の色が薄く見えにくくなってきたので、枠の色を濃くするか背景に薄く色をつけたい旨を公式サイト経由で相談したところ、さっそくメールで方法を教えていただけました。

以下は当サイトの設定です。

/*囲み枠*/
.supplement.boader{
    background-color: rgba(230,247,247,1); /*背景色*/
    border-color: rgba(204,204,204,1); /*枠色*/
}

上記のCSSを【外観 > カスタマイズ > 追加CSS】に記述すると変更ができます。
子テーマのcssに追記しても反映されなかったんですが、追加CSSに追記したら無事に反映されました。

カラーコードはColor Huntからコピーし、それを16進数・RGB・RGBAカラーコード変換ツールでRGBAに変換しています。

合わせて同じ色の設定で関連記事の色も変更しています。

現在動いているプラグイン

当サイトでは2017/9/4現在22個のプラグインが動いています。

当サイトのスペック

  • サーバー:エックスサーバー
  • OS:Linux
  • CPU:Xeon E5-2640 v4( 2.40GHz ) x 2
  • メモリー:192GB
  • Apacheバージョン:2.4.6
  • PHP7バージョン:7.1.4
  • MySQLバージョン:5.7.x
  • PHP高速化設定(FastCGI化):ON
  • mod_pagespeed設定:ON
  • WordPressバージョン:4.8.1–ja
  • テーマ:WordPressテーマ「ストーク」v1.1.2

AddQuicktag

HTML エディターやビジュアルリッチエディターで使用できるクイックタグを簡単に追加・管理できます。
ショートコードや見出しタグなどを登録して使っています。

ストークで使えるショートコードです。

Akismet Anti-Spam (アンチスパム)

ブログをスパムから保護してくれるので、インストールしたら一番最初に有効化しています。

All In One SEO Pack

今までテーマの設定でできていたことができなくなってしまったので、導入しました。
設定項目が多いので下記エントリーを参考にしました。

Broken Link Checker

ブログ内のリンク切れをダッシュボードでお知らせしてくれます。

Contact Form 7

簡単にお問い合わせフォームが作成できます。
カスタマイズ方法は下記エントリーが参考になります。

Crayon Syntax Highlighter

ソースコードをキレイに表示してくれるプラグイン。
最終更新が1年前ですが、問題なく使えています。

設定方法は下記エントリーがわかりやすいです。

Edit Author Slug

ストークの記事下に表示されているプロフィールには投稿者のアーカイブページへのリンクが貼られているのですが、このままだとIDが漏れてしまう可能性があるため、それを防ぐためのプラグインです。

設定は下記エントリーが参考になります。

EWWW Image Optimizer

インストールしておけばブログにアップした画像をロスレス圧縮してくれます。

Jetpack by WordPress.com

たくさんの機能が1つに詰まったプラグイン。

当サイトで有効にしている機能は

  • サイト統計情報
  • コメント
  • Markdown

以上の3つです。

サイト統計情報は、WordPress.comと連携してダッシュボードに統計情報を表示してくれるので便利です。
コメントは、WordPressでのログイン、メールアドレスの入力の他に、Twitter、Facebook、Google+のアカウントでログインしてコメントを残すことができるので、従来のものよりコメントに対するハードルが低くなるかもと思い、有効にしています。

パブリサイズ共有は新規投稿時にSNSに自動的にシェアしてくれる機能でとっても便利なのですが、コレをONにすると余計なOGPタグを吐き出してしまうので、functions.phpに下記の記載をしています(公式サイトでもアナウンスされています)。

//Jetpackで自動挿入されるOpen Graph Tagsを削除する
add_filter( 'jetpack_enable_open_graph', '__return_false' );

パブリサイズ共有はいろいろトラブルが多いので、現在はdlvr.itというサービスを使って新規投稿時にSNSに共有するようにしています。

Lockets

お店や旅館などスポットに関する情報を各種APIから取得し、ブログ内に最新の情報を埋め込んで表示するプラグイン。
また、バリューコマースのオートMyLinkを利用して、ホットペッパーのお店やじゃらんの宿へのリンクも自動的にアフィリエイトリンクに張り替えてくれます。

テーブルレイアウトにしていて表がスマホ画面からはみ出してしまった場合は、下記エントリーが参考になります。

Optimize Database after Deleting Revisions

データベースを最適化してくれたり、不要なリビジョンなどを削除してくれます。

PS Auto Sitemap

来訪者向けのサイトマップを表示してくれます。
デザインや表示方法もいろいろ選べます。

Pz-LinkCard

テーマを変えたらブログカードがうまく表示されなくなってしまったので、ブログカードを表示してくれるプラグインを導入して表示しています。
デフォルトのままだとデザインがエグいので、下記エントリーを参考にデザインを変更しています。

現在、該当のエントリーは削除されています。

Redirection

はてなブログからこちらに移転したときに、URLの引き継ぎがうまくいかなかったエントリーだけ、このプラグインを使って正しいURLにリダイレクトしています。

SNS Count Cache

ストークではデフォルトだとシェアボタンのカウントが表示されないため、プラグインを導入し表示しています。

Table of Contents Plus

エントリーに目次を自動的に表示してくれます。

ストークではTOC+用のスタイルが最初から設定されていますが、上級者向け設定のCSSファイルを除外にチェックを入れると表示が崩れてしまいます。
これに気づくまでしばらくかかりました。

WordPress Ping Optimizer

一度投稿した記事を「更新」したときに通知しないようにするためのプラグイン。

WordPress Popular Posts

ブログの人気記事を表示してくれます。

WP Fastest Cache

簡単に設定できるキャッシュプラグイン。
有効にできるものはほとんど有効にして使っています。

エックスサーバーでストークを使って運営する場合、プレロードのチェックを外したほうがいいみたいです。

WP Multibyte Patch

WordPressを日本語環境で正しく動作させるためのプラグイン。

ウィジェットを表示(Display Widgets)

現在、該当のエントリーは削除されています。

ウィジェットごとに表示する条件を指定できるプラグイン
当サイトでは固定ページと404ページで広告ウィジェットを表示しない設定にしています。

日本語ウェブフォントプラグイン

当サイトではこちらのフロップデザインを使っています。
あいこもオススメですよ。

最後に

まだまだ紹介しきれていない機能がたくさんあります。
色んな機能が詰め込まれている素敵なテーマなので、ぜひ、公式サイトで確認してみてくださいね。
せっかくきれいなテーマに変えたので、サイトのアイコンの作成をどなたかに依頼しようか検討中です。

プロフィールで使っているアイコンをココナラでお願いしました。
詳細は下記エントリーをご覧ください。

STORKを使ってみる



コメント

タイトルとURLをコピーしました