WordPressカスタマイズ備忘録@Simplicity編

スポンサーリンク

この記事は2017.03.16現在のものです。

ブログやテーマを変えた時恒例のカスタマイズ備忘録です。
色々なサイトを参考にしながらこのサイトはできています。
みなさん、いつもありがとうございます。

テーマ

以前使っていたSTINGERと迷ったんですが、今回は心機一転ということもあり、テーマも初めましてのSimplicityにしました。

スキン

このテーマは子テーマも公式サイトで配布してくれていて、なおかつスキンで簡単に見た目を変えることができるようになっています。
私はこのスキンの見た目が気に入ったので、こちらのスキンに少し手を加えて使っています。

スポンサーリンク

サイトの読み込みを早くする

公式サイト推奨の方法です。

コピペでサイトを高速化する方法

あまり実感はないですが、やっておいて損はないと思います。

現在はWP Fastest Casheというプラグインで同じ処理をしているので、こちらの記述は削除しています。

プラグインで高速化する方法

EWWW Image Optimizerというプラグインを使って画像を圧縮しています。

WP Fastest Casheが高速化にとても効果があり、Simplicityとも相性がいいのでこちらを使っています。
設定は上記のエントリーが参考になりました。

エックスサーバーの機能で高速化

当サイトはエックスサーバーで運用しています。
PHP7なので、PHP高速化設定(FastCGI化)は元々ONになってるんですが、加えてmod_pagespeed設定をONにすることにより、WEBサイトの表示速度の向上が見込めます。

詳細は以下のリンク先をご覧ください。

参考 FastCGIについて | レンタルサーバー【エックスサーバー】
参考 mod_pagespeed設定 | レンタルサーバー【エックスサーバー】

Simplicity作者さんおすすめの設定・プラグイン・カスタマイズ

作者さんが公式ブログともう一つのブログで色々解説してくれているのでまとめてみました。

初期設定

まずはこちらを参考に初期設定をしましょう。

ただし、FacebookのOGP設定は下の参考リンクのほうが私はわかりやすかったです。

Twitterカードの登録

Simplicityはタグは自動挿入してくれますが、カードの登録は自分でする必要があります。

Ptengine解析の設定

公式サイトでオススメしていたので導入してみました。

IDさえ取得できればあとはカスタマイザーでIDを設定するだけです。

Simplicity推奨のプラグイン

こちらで紹介されているプラグインは最初にインストール・有効化しておくといいと思います。

精度の高い関連記事を表示する

Simplicityの新しいバージョンならCFilteringというプラグインをインストールして有効化するだけで、閲覧ユーザー履歴の統計結果から算出された関連記事が表示されます。

モバイルのスライドメニューにホームボタンを表示する

当サイトもモバイルサイトはスライドメニューが上に表示されているのですが、デフォルトは「←」「→」のボタンが表示され、前後のエントリーに移動できるようになっています。
私はホームボタンを表示させたかったので、こちらを参考にホームボタンに変えました。

Simplicityの文字装飾を使う方法

Simplicityにはあらかじめ文字装飾スタイルがいくつか用意されていて、クイックタグにもいくつか登録されているんですが、クイックタグに登録されていないものはプラグインを使って登録しています。

AddQuicktagは昔からお世話になってます。

SNSのシェアボタンでTwitterのシェア数を表示する

count.jsoonという外部サイトへの登録は必要ですが、登録自体はとても簡単です。

グローバルメニューにアイコンフォントを表示させる

Font Awesome 4 Menusというプラグインで簡単にできます。
私のサイトもこのプラグインを利用してアイコンフォントをメニューに表示させています。

フッターメニューのカスタマイズ

Simplicityならカスタマイザーで簡単に設定できます。
このサイトにもプロフィール、サイトマップ、プライバシーポリシー、お問い合わせへのリンクをフッターに移動しました。

プラグインでアイキャッチ画像を簡単に挿入する

以前はFlickr – Pick a Pictureというプラグインを使っていたんですが、
Pixabay Imagesがオススメだということでこのサイトでもさっそく使っています。
時々ぱくたその画像も混じってますが、9割はこちらのプラグインから画像を挿入しています。
Flickrのより私はこちらの方が好みですね。

現在はプラグインを使わず、直接サイトで検索しています。

検索ボックスをアドセンスのカスタム検索に変える

簡単に変えられるのでオススメです。

404ページのカスタマイズ

この項目のカスタマイズはこのエントリーを最初にアップした後に追加したものです。

404ページのカスタマイズはGoogle先生の言うとおりにすれば間違いないです。

参考 404 ページのカスタマイズ – Search Console ヘルプ

Simplicityならカスタマイザーやウィジェットで簡単にカスタマイズできる上、デフォルトで広告が表示されないありがたい設定になっています。

上記を駆使して作った404ページがこちらです。
参考 ページが見つかりませんでした

スポンサーリンク

その他新たに導入したカスタマイズ

見た目のカスタマイズ

参考にしたのは

  • 記事間にに線を引く
  • 記事一覧のタイトルの文字を調整
  • メインカラムとサイドバーの枠線を消す
  • メタ情報の文字を小さくし右に移動

以上の4つです。

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

Simplicityのアンダーラインマーカーが黄色だったので、同じく太字も黄色の蛍光マーカー風にしてみました。

元々のアンダーラインマーカーごと赤いマーカーに変えました。

マーカーの色はこちらを参考に

cssはこちらを参考に調整しました。

目次を自動挿入する

Table of Contents Plusというプラグインで簡単にできます。

設定はこちらを参考にしました。

CSSデザインも2つほどあげてくれていますが、私はとりあえずデフォルトのまま色だけカスタムして使っています。

現在はcssを以下を参考に変更しています。

こちらのデザインを元にしたものを

Simplicity用に調整してくれたものがこちらです。

これに色や幅など手を加えたものがこちらで使っている目次です。
デフォルトでは閉じてあるので、開いて確認してみていただければ。

記事下やサイドバーのカスタマイズ

この項目のカスタマイズはこのエントリーを最初にアップした後に追加したものです。

Simple Author Boxで記事下にプロフィールを表示

プロフィールは「Simple Author Box」というプラグインを使って表示しています。

設定はこちらを参考にしました。

このままだとモバイル表示で文字がセンタリングされてしまうのが気になるので、こちらを参考に左寄せにしました。

投稿者ページにリンクされるのもコワイので、こちらを参考にリンクを消しました。

こちらのサイトのように、任意のサイトにリンクを貼るにはどうすればいいんでしょう?

高速化にあたり不具合が出てしまったため、プラグインは削除し、現在はサイドバーとフッターにHTMLで手打ちで入力したものを表示し、プロフィールページにリンクしています。

VA Social Buzz +SWで記事下やサイドバーにいいね!ボタンを表示

いいね!ボタンは「VA Social Buzz」というプラグインで表示させています。
こちらの説明がわかりやすいです。

Simplicityにもデフォルトのいいねウィジェットが用意されていますが、デザインが好みではないのと、こちらの方がプロフィールと一体化してきれいに見えるので、こちらにしました。

ただ、フォローボタンやシェアボタンはいらなかったので、「VA Social Buzz +SW」というアドオンを導入していいねBOXだけ記事下とサイドバーに表示しています。

導入方法はこちらがわかりやすいです。

フッターウィジェットにInstagramの写真を表示

こちらを参考に「Instagram Feed」というプラグインでInstagramの写真をフッターに表示しています。
以前は外部ウィジェットを利用していましたが、サイトをSSL化したときに混在コンテンツになってしまったので、こちらに入れ替えました。

高速化にあたり不具合が出たため、現在はWEBSTA Widgets for Instagramという外部ウィジェットを表示しています。

他にも、プロフィール(テキストウィジェットに地道にHTMLを記入)やTwitterのタイムライン(公式ウィジェット)をフッターに表示しています。

便利なプラグインの導入

Admin Post Navigation

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

PS Auto Sitemap

以前も使っていたサイトマップを作成してくれるプラグイン。
フッターメニューにリンクがあります。

PubSubHubbub

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

ここまでのプラグインはこちらのエントリーを参考にさせていただきました。

footnotes

はてなブログと同じ記法で脚注が入れられるプラグイン。
デフォルトだと脚注表示箇所が表になってて見た目がしつこいので、以前の見た目に近づけるようCSSをいじってます。

設定は上記エントリーが参考になりました。

Optimize DataBase

下記エントリーを参考に導入しました。
データベースを最適化してくれます。

便利なツール

Amakuri

今はほとんど商品リンクはカエレバとヨメレバに移行しているんですが、数が多いときとかはさくっとAmazonだけにリンクを貼りたいときがあります。
そういう時は今まではてなブログの標準の機能を使ってたんですが、今回似たような見た目で違和感なく使えるAmakuriというツールを使ってみることにしました。
Chromeの拡張機能もあるので一度テンプレートを登録してしまえば右クリックでサクッとリンクが作れてしまいます。

こちらを参考にはてなと見た目も近いAmazonJS風にしてみました。

最近読んだ本を紹介したので最近聴いたアルバムも紹介するよ

2015.08.08

こちらで見た目が確認できると思います。

Create Link

こちらもChrome拡張です。
右クリックで簡単にSimplicityのブログカード用のリンクが作れるので便利です。

はてなから引き続きのカスタマイズ

こちらはcssのみなので引き続きこちらのカスタマイズを使ってます。

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

今回もQuicksandを指定しています。

スマホとPCはいいのですが、タブレットで見たときに文字が見にくかったので、もっと見やすくなるように、さらに下記エントリーを参考に日本語フォントに「Noto Sans JP」を指定しました。
以前より見やすくなっていると思います。

英語フォントはそのままです。

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

こちらも引き続きゆきひーさんとえむしてっくさんのものに少し手を加えて使ってます。
今のテーマが以前と見た目が近いので楽でした。

カエレバ・ヨメレバの見た目を変更しました。

こちらを元にしたものを

私と同じようにもしも経由で商品リンクを表示する際に表示が崩れてしまうものを、うまくSimplicity用に調整してくれているこちらのcssを当サイトでもそのまま使っています。

mbdbさんのものだと変なスペースがあいてしまうのをうまく調整してくれていて、とてもキレイに表示されていると思います。

スポンサーリンク

最後に

以前はWordPressのカスタマイズってもっと大変だったようなきがするのですが、今はテーマで最初から使えるものも多いので、はてなブログよりもカスタマイズが楽な気がしました。
はてなブログも使いやすくていいブログサービスなんですが、はてなから移転するとなるとホントにいろいろ大変なので、今後は使い慣れたWordPressでいくと思います。

というわけで、カスタマイズ関係はこちらに随時追記していきます。
以前から仲良くしていただいているWPerの皆様、何かあったら助けてくださいね♪

改めてみなさまこちらでもよろしくお願いいたします。

スポンサーリンク

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

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

コメントを残す

ABOUTこの記事をかいた人

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

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