今スターサーバーに申し込むと利用料金が2ヶ月無料 !7月31日まで!

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

BLOG
注意
現在はテーマをSANGO+PORIPUに変更しています。
情報が古く、使えないものがあるかもしれません。
このエントリーは参考程度にとどめておいて下さい。

現在の状況は下記エントリーで確認できます。
BLOGSANGO+PORIPU+スターサーバーまとめ【前編】 BLOGSANGO+PORIPU+スターサーバーまとめ【後編】

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

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

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

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

もくじ

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

ブログマーケッター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の邪魔なリストアイコンを消す

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

MEMO
参考にしていたエントリーがなくなってしまったようです。

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

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

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

参考情報用のバッジ

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

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

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

参考リンク

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

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

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

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

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

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

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

ブログの回遊率をあげる

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

当サイトでは

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

の順に並んでいます。

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

php
<?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に変更

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

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

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

css
/*囲み枠*/
.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

参考 AddQuicktagWordPress プラグイン

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

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

参考 ショートコードの使い方ストーク

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

参考 AkismetWordPress プラグイン

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

All In One SEO Pack

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

Broken Link Checker

参考 Broken Link CheckerWordPress プラグイン

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

Contact Form 7

参考 Contact Form 7WordPress プラグイン

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

Crayon Syntax Highlighter

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

参考 Crayon Syntax HighlighterWordPress プラグイン

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

Edit Author Slug

参考 Edit Author SlugWordPress プラグイン

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

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

EWWW Image Optimizer

参考 EWWW Image OptimizerWordPress プラグイン

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

Jetpack by WordPress.com

参考 Jetpack by WordPress.comWordPress プラグイン

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

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

  • サイト統計情報
  • コメント
  • Markdown
以上の3つです。

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

注意
パブリサイズ共有は新規投稿時にSNSに自動的にシェアしてくれる機能でとっても便利なのですが、コレをONにすると余計なOGPタグを吐き出してしまうので、functions.phpに下記の記載をしています(公式サイトでもアナウンスされています)。
php
//Jetpackで自動挿入されるOpen Graph Tagsを削除する
add_filter( 'jetpack_enable_open_graph', '__return_false' );
MEMO
パブリサイズ共有はいろいろトラブルが多いので、現在はdlvr.itというサービスを使って新規投稿時にSNSに共有するようにしています。

Lockets

参考 LocketsWordPress プラグイン

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

詳しい設定方法はプラグイン作者さんのこちらのエントリーで確認して下さい。

実際に下記のエントリーで導入してみました。

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

Optimize Database after Deleting Revisions

参考 Optimize Database after Deleting RevisionsWordPress プラグイン

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

PS Auto Sitemap

参考 PS Auto SitemapWordPress プラグイン

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

Pz-LinkCard

参考 Pz-LinkCardWordPress プラグイン

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

Redirection

参考 RedirectionWordPress プラグイン

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

SNS Count Cache

参考 SNS Count CacheWordPress プラグイン

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

Table of Contents Plus

参考 Table of Contents PlusWordPress プラグイン

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

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

WordPress Ping Optimizer

参考 WordPress Ping OptimizerWordPress プラグイン

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

WordPress Popular Posts

参考 WordPress Popular PostsWordPress プラグイン

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

WP Fastest Cache

参考 WP Fastest CacheWordPress プラグイン

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

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

WP Multibyte Patch

参考 WP Multibyte PatchEastCoder;

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

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

参考 Search Results for “display-widgets”WordPress Plugins

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

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

参考 日本語ウェブフォントプラグインWEBFONTウェブフォントファン

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

最後に

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

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



コメントを残す

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です