テーマをストークに変えたのでいろいろ紹介するよ

スポンサーリンク

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

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

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

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

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

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

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

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

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

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

スポンサーリンク

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

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

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

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

functions.phpに追記したこと

AdSense自動挿入

ストークにもサイドバー、タイトル下、記事下の広告ウィジェットはあるんですが、Simplicityにあった見出し前の広告ウィジェットがなくなってしまいました。

そこで下記エントリーを参考に2つ目、4つ目、6つ目のh2見出し前に広告が自動で表示されるようにしています。

コンテンツ内にある非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化
のコードを追記しました。

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

Simplicityとエックスサーバーで簡単にサイトをSSL対応(HTTPS化)しよう

2017.03.13

スポンサーリンク

404ページのカスタマイズ

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

実際の404ページは下のリンクで確認していただくことができます。

参考 ページが見つかりませんでした

カスタマイザー・css

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

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

これに気づかずしばらくハマってました(;´∀`)

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

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

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

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

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

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

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

参考情報用のバッジ

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

英字フォントをGoogle Fontsへに変更

デフォルトのフォントのままでもストークは見やすいんですが、英字フォントにQuicksandサイトのロゴにPoiret Oneを指定しています。

現在はOnline Logo Maker – Free Logo Generatorで作成したロゴに変更しています。

ストークではヘッダーに読み込むためのhead.phpが用意されているので、そちらにフォントを読み込むためのコードや、スマホ用アドセンスのページ単位の広告コードを追記しています。

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

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

参考リンク

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

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

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

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

スポンサーリンク

常時動いているプラグイン

テーマ変更のためいくつか入れ替わっており、現在23個のプラグインが動いています。

当サイトのスペック

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

AddQuicktag

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

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

参考リンク

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

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

All In One SEO Pack

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

Broken Link Checker

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

Contact Form 7

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

Edit Author Slug

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

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

EWWW Image Optimizer

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

参考リンク

Jetpack by WordPress.com

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

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

  • サイト統計情報
  • パブリサイズ共有
  • コメント
  • 拡張配信
  • Photon
以上の5つです。

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

PS Auto Sitemap

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

PubSubHubbub

パクリサイト対策にGoogleに素早くインデックスしてもらうために入れています。

Pz-LinkCard

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

Redirection

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

Revive Old Post (Former Tweet Old Post)

自動的に過去記事をランダムに選んでツイートしてくれるプラグイン。

SNS Count Cache

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

参考リンク

Table of Contents Plus

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

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

Unveil Lazy Load

画像を遅延読込し、表示速度を改善するためのプラグイン。
これを入れてからグーグル先生に画像の読み込みであまり怒られなくなりました。

参考リンク

WordPress Ping Optimizer

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

参考リンク

WordPress Popular Posts

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

WP Fastest Cache

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

参考リンク

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

WP Multibyte Patch

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

WP to Buffer

エントリーを投稿したらBufferに登録してある各アカウントに投稿をストックしてくれるプラグイン。

参考リンク

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

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

参考リンク

リビジョンコントロール(Revision Control)

ほっとくとデータを圧迫してしまうリビジョンの数をコントロールしてくれます。
当サイトでは投稿は2、それ以外は0で設定しています。

使う時だけ有効にしているプラグイン

Admin Post Navigation

投稿画面で前後の記事へのリンクを表示してくれるので、過去記事の見直しに便利です。

参考リンク

Optimize Database after Deleting Revisions

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

参考リンク

Regenerate Thumbnails

過去記事のサムネイルを簡単に再生成してくれるプラグイン。
今回、テーマを変えたことによってアイキャッチの画像の比率が変わってしまったため、このプラグインで生成しなおしました。

参考リンク

最後に

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

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

ココナラでSNSアイコン用の素敵な似顔絵を描いてもらいました

2017.03.31



スポンサーリンク

\当サイトオススメのテーマ/

\当サイトおすすめのサーバー/

コメントを残す

ABOUTこの記事をかいた人

1年半ぶりにはてなブログからWordPressに戻ってきました。 現在、働く3児の母/スプラトゥーンウデマエB帯/へっぽこポケモントレーナー(Not ポケモンGO)

詳しいプロフィールはこちらからどうぞ。→https://love-2nd.net/about