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

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

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

  1. テーマ
    1. スキン
  2. サイトの読み込みを早くする
    1. コピペでサイトを高速化する方法
    2. プラグインで高速化する方法
    3. エックスサーバーの機能で高速化
  3. Simplicity作者さんおすすめの設定・プラグイン・カスタマイズ
    1. 初期設定
      1. Twitterカードの登録
      2. Ptengine解析の設定
      3. Simplicity推奨のプラグイン
    2. 精度の高い関連記事を表示する
    3. モバイルのスライドメニューにホームボタンを表示する
    4. Simplicityの文字装飾を使う方法
    5. SNSのシェアボタンでTwitterのシェア数を表示する
    6. グローバルメニューにアイコンフォントを表示させる
    7. フッターメニューのカスタマイズ
    8. プラグインでアイキャッチ画像を簡単に挿入する
    9. 検索ボックスをアドセンスのカスタム検索に変える
    10. 404ページのカスタマイズ
  4. その他新たに導入したカスタマイズ
    1. 見た目のカスタマイズ
    2. 強調文字をちょっとおしゃれに
    3. 目次を自動挿入する
    4. 記事下やサイドバーのカスタマイズ
      1. Simple Author Boxで記事下にプロフィールを表示
      2. VA Social Buzz +SWで記事下やサイドバーにいいね!ボタンを表示
      3. フッターウィジェットにInstagramの写真を表示
    5. 便利なプラグインの導入
      1. Admin Post Navigation
      2. PS Auto Sitemap
      3. PubSubHubbub
      4. footnotes
      5. Optimize DataBase
    6. 便利なツール
      1. Amakuri
      2. Create Link
  5. はてなから引き続きのカスタマイズ
    1. 英字フォントをGoogle Fontsへに変更
    2. アプリーチ・カエレバ・ヨメレバの見た目を変更
  6. 最後に
スポンサーリンク

テーマ

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

スキン

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

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

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

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

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

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

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

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

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

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

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

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

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先生の言うとおりにすれば間違いないです。

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

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

見た目のカスタマイズ

参考にしたのは

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

以上の4つです。

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

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

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

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

目次を自動挿入する

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風にしてみました。

Create Link

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

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

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

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

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

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

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

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

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

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

下記エントリーを元にしたものを

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

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

最後に

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

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

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

コメント

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