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

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

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

2017.09.29

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

テーマ

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

参考

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

スキン

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

参考

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

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

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

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

参考

コピペ一発でSimplicityを結構高速化する方法Simplicity

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

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

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

参考

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

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

参考

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

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

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

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

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

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

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

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

初期設定

参考

Simplicityの初期設定・おすすめの設定Simplicity

まずは公式サイトを参考に初期設定をしましょう。

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

参考

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

Twitterカードの登録

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

参考

Twitter Cardsへの登録方法Simplicity

Ptengine解析の設定

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

参考

SimplicityでPtengineのアクセス解析(ヒートマップ分析)を行う方法Simplicity

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

Simplicity推奨のプラグイン

参考

SEO的にSimplicityとあわせて使いたいWordPressプラグインSimplicity

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

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

参考

Simplicityでより精度の高い関連記事を表示するカスタマイズ方法Simplicity

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

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

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

参考

Simplicityのスライドインメニューで「ホーム」ボタンを表示するカスタマイズ方法Simplicity

Simplicityの文字装飾を使う方法

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

参考

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

参考

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

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

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

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

参考

Simplicity2でTwitterボタンのツイート数を表示する方法Simplicity

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

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

参考

WordpressのグローバルナビメニューにFont Awesomeのアイコンフォントを表示させる方法寝ログ

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

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

参考

コピペで簡単!Wordpressでグローバルメニューの他にフッターメニューを追加するカスタマイズ方法寝ログ

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

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

参考

29万もの高品質なライセンスフリー作品の中から写真を手軽に利用できる、Wordpress「Pixabay Images」プラグイン【CC0、PD】寝ログ

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

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

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

参考

Wordpressにアドセンスの広告付きカスタム検索ボックスを設置する方法寝ログ

404ページのカスタマイズ

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

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

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

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

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

見た目のカスタマイズ

参考にしたのは

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

以上の4つです。

参考

WordPressテーマ「Simplicity」をカスタマイズする19のポイント【2016.04.14更新】masalog.me(まさろぐ)

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

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

参考

強調文字をちょっとおしゃれにするCSSデザインサンプルブログ初心者応援サイト:Naifix

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

参考リンク

参考

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

参考

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

目次を自動挿入する

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

参考リンク

参考

WordPressに目次を自動挿入するTable of Contents Plusの使い方ブログ初心者応援サイト:Naifix

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

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

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

参考

Table of Contents Plusデザインカスタマイズで目次をおしゃれに演出!ブログ初心者応援サイト:Naifix

Simplicity用に調整してくれました。

参考

WordPressプラグインで記事の目次を自動生成する-Table of Contents Plusパパたす(PaPa+)

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

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

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

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

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

参考リンク

参考

WordPress:記事の著者情報を簡単に表示できる「Simple Author Box」NxWorld

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

参考

記事下にプロフィールがないからPVが上がらない!?プラグイン「Simple Author Box」で簡単に解決!Jinzo-studio

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

参考

WordPressのユーザー名の漏えいを防ぐ方法まろろぐ

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

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

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

いいね!ボタンは「VA Social Buzz」というプラグインで表示させています。
下記エントリーの説明がわかりやすいです。

参考

Facebookの「いいね!」が激増するWordPressプラグインVA Social Buzzブログ初心者応援サイト:Naifix

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

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

参考

VA Social Buzz +SWで「いいね!」ボタンを好きな位置に表示してみようブログ初心者応援サイト:Naifix

導入方法は上記エントリーがわかりやすいです。

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

参考

【WordPress】サイドバー・本文にInstagramを表示!土のにおいが好きなんだ!

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

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

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

便利なプラグインの導入

Admin Post Navigation

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

PS Auto Sitemap

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

PubSubHubbub

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

参考

ブログ運営の参考に!Naifixで愛用しているWordPressプラグイン31個ブログ初心者応援サイト:Naifix

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

footnotes

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

参考

WordPressのfootnotesプラグインで脚注をつけるDEBUGLIFE

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

Optimize DataBase

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

参考

データベースの最適化にOptimize DataBaseまろろぐ

便利なツール

Amakuri

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

参考

AmazonアフィリエイトツールAmakuriの使い方とCSSデザインサンプルブログ初心者応援サイト:Naifix

上記エントリーを参考にはてなと見た目も近いAmazonJS風にしてみました。

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

2015.08.08

上記エントリーで見た目が確認できると思います。

Create Link

参考

Create LinkChrome ウェブストア

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

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

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

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

参考

はてなブログのフォントをLIGっぽくカスタマイズする方法おかろぐ

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

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

【2017年版】これで間違いなし!font-familyのおすすめ設定ヒキニートかく語りき

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

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

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

参考

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

参考

【CSS】コピペするだけ!押した事がわかるエフェクト付きののヨメレバ・カエレバ・トマレバえむしてっく

MEMO
カエレバ・ヨメレバの見た目を変更しました。
下記エントリーを元にしたものを

参考

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

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

参考

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

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

最後に

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

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

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

コメントを残す