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

注意
現在はテーマをSANGOに変更しています。
情報が古くなって使えなくなるものが出てくる可能性がありますので、このエントリーは参考程度にとどめておいて下さい。
現在の状況は下記エントリーで確認できます。

テーマをSTORKからSANGOに変えたのでカスタマイズやプラグインをまとめてみるよ

2017.09.29

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

参考

内部SEO施策済みのシンプルな無料WordpressテーマSimplicity

参考

Simplicity用スキンuc-modを公開しました、よろしければどぞunlimited ch@os

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

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

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

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

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

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

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

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

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

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

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

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

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

functions.phpに追記したこと

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

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

参考

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

  • 内部リンク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

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

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

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

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

参考

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

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

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

参考

AdSense-インフィード広告を記事一覧の間に表示する方法OPENCAGE

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

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

参考

Googleアドセンス「記事内広告」新登場!収入アップの導入方法!Y氏のWordPressブログ塾

404ページのカスタマイズ

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

参考

【コピペOK】ページが見つかりません・・・「404」ページをカスタムしよう!SEO・アドセンス停止対策にもコビトブログ

その他のカスタマイズ

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

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

参考

ストーク:メニュー(ヘッダー・スマホ用ヘッダー・フッター)の設定OPENCAGE

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

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

参考

ハミングバードテーマの見出しタグ(H2,H3,H4)をカスタマイズする方法OPENCAGE

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

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

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

参考

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

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

参考

STORKをカスタマイズ!「番外編:リクエスト集」コビトブログ

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

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

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

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

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

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

参考

強調文字をちょっとおしゃれにするCSSデザインサンプルNaifix

参考

強調したい文字を蛍光ペンで引いたようなデザインにする方法パパたす(PaPa+)

参考

CSS で蛍光ペン風マーカーを指定したら iPhone 上で transparent の部分が黒くなってしまった話NJ-CLUCKER – 平凡な毎日に刺激を

参考情報用のバッジ

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

参考

Simplicityの基本的な文章装飾スタイルを使う方法まとめSimplicity

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

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

参考リンク

参考

「アプリーチ」をCSSでカスタマイズ iPhoneアプリとAndroidアプリを同時に紹介できるブログパーツYukihy Life

参考

【楽天koboにも対応】カエレバやヨメレバをレスポンシブな紹介リンクにするためのCSSデザインmbdb (モバデビ)

参考

【Simplicity】カエレバ・ヨメレバをCSSでカスタマイズ【もしもアフィリエイト】ヒキニートかく語りき

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

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

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

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

参考

STORKカスタマイズ!「第5弾:おしゃれ・機能的なSNSフォローボタン 8選」コビトブログ

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

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

参考

【STORK(ストーク)カスタマイズ】「この記事を書いた人」の場所を上部に変更する【アルバトロス】ブログサポーターがみたか

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

ブログの回遊率をあげる

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

参考

【STORKカスタマイズ】コピペで出来る★ブログの回遊率を上げよう大作戦!あずさんち

当サイトでは

  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(); ?>

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

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

参考

【1,500円】「STORK(ストーク)にフッター固定メニューを導入する方法」を販売しています!ザ サイベース

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

  • 色をサイトに合わせて変更
  • フォローボタンを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に変換しています。

参考

Color HuntColor Hunt

参考

16進数・RGB・RGBAカラーコード変換ツール16進数・RGB・RGBAカラーコード変換ツール

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

参考エントリー

参考

STORKをカスタマイズ!「番外編:リクエスト集」コビトブログ

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

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

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

参考

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

参考リンク

参考

AddQuicktagによく使うタグを登録して記事作成の効率を上げようブログ初心者応援サイト:Naifix

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

参考

AkismetWordPress プラグイン

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

All In One SEO Pack

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

参考

All in One SEO PackでOGPタグを設定する方法OPENCAGE

参考

FaceBookOGP管理者IDとアプリIDを取得する方法(Simplicity)HASHIO_LOG

参考

All in One SEO Pack の設定方法と使い方バズ部

参考

WordPress と Facebook を効果的に連携させるための4つの方法バズ部

参考

最強のテーマ「ハミングバード」でアクセスが爆発する記事を書く方法【WordPress】Crescita

Broken Link Checker

参考

Broken Link CheckerWordPress プラグイン

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

Contact Form 7

参考

Contact Form 7WordPress プラグイン

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

参考

Contact Form 7のCSSデザインとカスタマイズ方法ブログ初心者応援サイト:Naifix

参考

「Contact Form 7」で、便利な問合せフォームを、サクッと作る!(スパム対策も)コビトブログ

Crayon Syntax Highlighter

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

参考

Crayon Syntax HighlighterWordPress プラグイン

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

参考

Crayon Syntax Highlighterの設定と使い方:記事中にソースコードを表示affilabo.com

Edit Author Slug

参考

Edit Author SlugWordPress プラグイン

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

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

参考

「Edit Author Slug」で、知らない間に漏れている!?IDを保護しよう!コビトブログ

EWWW Image Optimizer

参考

EWWW Image OptimizerWordPress プラグイン

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

参考リンク

参考

画像を最適化(圧縮)してWordpressブログを高速化する方法寝ログ

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に共有するようにしています。
参考

#1 Smart Social Media Automationdlvr.it

Lockets

参考

LocketsWordPress プラグイン

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

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

参考

WordPressプラグイン7年ぶりに作った。飲食店やホテル紹介などのブログ記事を加速するAPI活用プラグイン「Locketsムジログ

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

特別高等支援(養護)学校の受検はどういうものなのかわかる範囲で教えちゃいます

2017.02.21

秋なので?由仁・千歳・支笏湖方面に紅葉と美味しいものを求めにドライブへ

2015.10.24

ずっと行きたかったパンケーキのお店 J.S. PANCAKE CAFEに行ってきました

2015.08.07

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

参考

ストークテーマでtableタグを横スクロールできるようにするカスタマイズOPENCAGE

Optimize Database after Deleting Revisions

参考

Optimize Database after Deleting RevisionsWordPress プラグイン

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

PS Auto Sitemap

参考

PS Auto SitemapWordPress プラグイン

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

Pz-LinkCard

参考

Pz-LinkCardWordPress プラグイン

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

参考

WordPressでブログカードを表示させるプラグイン「Pz-LinkCard」WebデザイナーFAN

Redirection

参考

RedirectionWordPress プラグイン

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

SNS Count Cache

参考

SNS Count CacheWordPress プラグイン

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

参考リンク

参考

ソーシャルボタンのカウント設定(SNS Count Cache)ハミングバード

Table of Contents Plus

参考

Table of Contents PlusWordPress プラグイン

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

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

WordPress Ping Optimizer

参考

WordPress Ping OptimizerWordPress プラグイン

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

参考リンク

参考

「WordPress Ping Optimizer」で、すぐに検索されるブログに!コビトブログ

WordPress Popular Posts

参考

WordPress Popular PostsWordPress プラグイン

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

WP Fastest Cache

参考

WP Fastest CacheWordPress プラグイン

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

参考リンク

参考

初心者にも扱いやすいWordpressキャシュプラグイン「WP Fastest Cache」の使い方寝ログ

参考

WP Fastest Cacheの設定方法と使い方|日本語対応で使いやすいWordPressプラグインfujimotoyousuke.com

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

WP Multibyte Patch

参考

WP Multibyte PatchEastCoder;

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

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

参考

Search Results for “display-widgets”WordPress Plugins

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

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

参考

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

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

最後に

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

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

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

2017.03.31



コメントを残す