「WordPress」でサイト運営していると、どうしてもカスタマイズしたくなってきてしまうのが普通の事であると思う。ただ、このカスタマイズですが、プラグインを導入する方法から自分で「phpファイル」や「cssファイル」を修正しないとならないケースに遭遇することが度々ある。
色々なサイトで紹介されているものもあるのだが、「どうしてそのように修正するのか？」と根本的な解説をしているサイトは少ない。
本サイトでは、その場凌ぎの修正ではなく、参考にして頂いた方に理解して貰い更に応用して頂けるような解説を心掛けています。
それでは早速、本サイトでどのようなカスタマイズをしてきているかを紹介したいと思います。きっとあなたのサイトに参考になるカスタマイズ方法があるかもしれません！
カスタマイズは根本的な仕組みから理解する
カスタマイズと言っても色々あります。ただプラグインを導入すれば良いだけのものから、プログラムの修正を加えるものまで色々あります。ただ、ここで一番大切なことは、そのカスタマイズをすることでサイトにどの様な影響を与えるかは常に頭に入れておかなければなりません。場合によってはカスタマイズによる悪影響が発生する可能性もあります。
デザイン的なものは実際にPCとモバイルの両方で確認すれば良いのですが、一番厄介な問題は表示速度です。これに関しては少しでも表示速度は速いに越したことがありません。だからと言って便利なプラグインを導入しないのも勿体ないです。
カスタマイズはバランスが必要です！
カスタマイズを親テーマにしてはいけません！
WordPress標準のテーマを利用する場合には必ず子テーマを作成し、絶対に親テーマを直接いじることはしないでください！
親テーマの中身を参照することは構いませんが、親テーマを直接カスタマイズするのはNGです。この理由は知っている方が多いとは思いますが、WordPressのバージョンアップ時に折角カスタマイズした内容が元に戻ってしまう可能性があるからです。
基本的なWordPressの設定について
WordPress導入時の基本的な設定～子テーマ作成までの方法については次の記事を参考にしてください！
各種プラグインの導入方法について
プラグインのインストールにつきましては、[プラグイン]－[新規追加]メニューより行います。これはどのプラグインも共通なので覚えておいてください。それでは早速導入した方法良いプラグインを優先順位の高いものから紹介します。
最初からインストールしておいた方が良いプラグイン
ここから説明するプラグインはWordPress導入時にインストールして有効化しておいた方がよろしいプラグインとなります。害は全くなく有益な事しかありません。後から導入しても問題はないのですが、きっと必要になるはずです。とりあえず、下のプラグインに関しては最初からインストールしておくことをお勧めいたします。
TinyMCE Advanced
このプラグインは記事作成画面でのテーブル挿入等の編集機能を拡張するためのものです。記事作成をする際に文字の装飾等の機能が便利なので、WordPress運用開始と同時にインストールした方が良いプラグインとなります。特別な設定は必要はないと思います。インストールして有効化するだけで大丈夫です。このプラグインは記事の編集画面で利用するだけなので、重くなることはありません。
EWWW Image Optimizer
メディアをアップロードすると同時に画像を圧縮してくれます。画像ファイルは極力小さいサイズになってくれた方が表示速度が上がるので、欠かせないプラグインです。またあとから導入したとしても既に登録されているライブラリのメディアを圧縮してくれます。勿論、操作は必要になりますが。
Google XML Sitemaps
XMLファイルを生成するプラグインとなります。恐らく他のプラグインでも同じような機能を持つものがあるのですが、私は敢えてGoogle製のものを利用しています。どちらを使っても同じかもしれませんが、XMLファイルはGoogle検索に影響するものになってくるので、こちらを利用しています。
必要に応じてインストールするプラグイン
これから紹介するプラグインに関しましては必要に応じてインストールすればよいと思います。きっと必要性を感じるタイミングがサイトによって違うと思います。その中でも本サイトで導入していった順番でご紹介したいと思います。
Breadcrumb NavXT
これはパンくずリスト用のプラグインとなります。自作されている方もいるようですが、このプラグインを利用した方が簡単にパンくずリストが表示できます。動作に影響を与えるような感じは全くないので、自分はこのプラグイン気にいっています。本サイトでの導入事例は下の記事を参考にしてください。
WP Social Bookmarking Light
このプラグインは記事中にソーシャルリンクボタンを配置する為のプラグインです。「Twitter」「Facebook」「Google+」「はてなブックマーク」「Line」など色々なボタンを配置できます。SNSとのリンクはSEO対策には欠かせないです。本サイトも今現在このプラグインを利用していますが、もしかしたら他に変更する可能性はあります。しかし初めて利用するには一番簡単に設置可能であると思われるプラグインだと思います。本サイトでの導入して時の記事を参考にしてみてください。
All In One SEO Pack
SNSボタンを設置するころより大抵のサイトはSEO対策を意識し始めるころだと思います。ある程度記事数が増えてきてから取り掛かっても遅くはないと私個人的には思っています。最低でも15記事位になってからでも良いのかな。本サイトで利用している機能は「ソーシャルメディアリンク」と「パフォーマンス」の2つの機能のみです。特にソーシャルメディアリンク機能に関してはSEO対策としては必須の機能となります。他にも機能があるのですが、本サイトでは2つの機能の利用に留まっております。本サイトでの導入事例を下の記事となりますので参考にしてみてください。
PS Auto Sitemap
このプラグインですが、「サイトマップ」を簡単に作ってくれます。出力形式もある程度テンプレートが用意されており、とても便利なプラグインです。ちなみにサイトマップですが、アクセス数増加をする為には必ず作った方が良いです。20記事位になってくるとサイトらしくなってきており、サイト訪問者に記事を見つけやすくする為にサイトマップページを作成した方が良いです。また、このサイトマップにはSEO効果を高めてくれる作用も目的としてあります。本サイトで導入した事例を下の記事で紹介していますので参考にしてみてください。
AddQuicktag
このプラグインは「TinyMCE Advanced」では不足しているタグを補ってくれるものである。例えば蛍光ペンを引いてみたいといった機能であったり文字をボックスで囲ってみたい等、別定義したクラスを簡単にエディタで適用することができるようになる、ある程度、記事のデザインに拘り始めた時にあると便利なプラグインとなります。このプラグインは編集画面でしか利用しないプラグインとなりますので表示速度に影響を与えることはありません。どちらかと言うと、WordPress導入当初から「TinyMCE Advanced」と同時にインストールしておいても良いかもしれません。しかしある程度、スタイルシート「style.css」にカスタマイズを加えられるようになっていないと効果を発揮しないプラグインです。本サイトでの導入事例を下の記事で紹介していますので参考にしてみてください。
Lazy Load
サイト表示速度を改善してくれるプラグインとなります。通常のサイト表示の場合は呼出されたページに表示される画像全てが同時に読み込みされす。このプラグインは画面に見える部分のみだけを優先して画像読み込みするようにしているのです。本サイトでの導入事例を下の記事で紹介していますので参考にしてみてください。
Table of Contents Plus
このプラグインは「自動で目次生成」してくれるものとなります。WordPressでサイトで目次あるサイトは大抵このプラグインを利用していると思われます。記事表示時に目次生成する為、表示速度への影響は否定できませんが、手動で目次を作成する労力を考えれば、間違いなくこちらの方が良いです。目次は「h1」～「h5」タグを元に生成され、細かい設定も可能です。本サイトでの導入事例を下の記事で紹介していますので参考にしてみてください。
Related Posts for WordPress
このプラグインは記事表示した際に関連記事を自動で表示してくれるプラグインとなります。読者の方に少しでも多くの記事を見て貰い、長い時間滞在して貰える可能性を高めるために必要となります。テーマによっては最初から関連記事を表示する機能が備わっているモノもありますが、ない場合はこのようなプラグインを導入すると簡単に関連記事が表示できるようになりますのえ参考にしてみては如何でしょうか。
WordPressプイラグイン「Related Posts for WordPress」で関連記事を表示する方法
プラグインでのカスタマイズ注意点
プラグインはWordPress運営していくには必ず必要となってくると思います。ただ、何度も説明するようにバランスが大切です。便利になったりデザインがカッコよくなったりするのですが、WordPressの動作に影響を与えることも確かです。特に表示速度に影響するものに関しては注意して導入していくことが大切だと感じています。また、なるべく利用実績が多いプラグインを導入した方が安心です。利用方法がわからない時に、必ずどこかのサイトで利用方法について説明していることが多いものです。
なんでも自作に拘っているサイトもあります。それはそれで良いと思います。自分の力量で自作するものは自作する。そうでないものはプラグインを利用する。そこら辺は自分で判断するしかないと思います。きっと何でもかんでもプラグインに頼っているといずれ、サイト動作に影響が表れることが出てくるはずです。特に近年ではモバイルでの閲覧者が多いので、そのような閲覧者にも気を使う必要があることをご承知しておきたいものです。
プラグインを利用しない基本的なカスタマイズ
プラグインでのカスタマイズではなく、どうしても自分でカスタマイズしないとならないケースは発生します。これは利用しているテーマによってもことなるので、ここで紹介するのはテーマに関係なくカスタマイズが必要になるものに限定させて頂きます。本サイトでは「twenty seventeen」を利用していますが、このテーマ限定のカスタマイズは別で説明します。
サイトアイコンの設定について
ブックーマークされた時にアイコンがないと寂しいですよね？自分のサイトアイコンを設定しておいた方が良いです。後からでも変更可能です。しかし、無いよりはあった方が良いですよ。何も設定されていないのって寂しいものがあります。どんなものでよいと思うのでとりあえず設定仕手おきましょう。本サイトで導入した事例が下の記事で紹介していますので参考にしてみて下さい。
サイドバーの「h2」タグを「ｐ」タグへ変更
これはWordPressのどのテーマも同じかと思うのですが、サイドバーに使用されているタイトルが「h2」タグを利用しているんですよね。本来、「h」タグと言うのは「1」～｢5」位まで利用するのですが、数字の小さいほうが優先度が高くなります。だから「h1」タグというのは基本ページに一つ。「h2」タグは記事中に多くても3～4個位に済ませるのが理想的です。これは記事の長さにもよります。だからこそ「h2」タグをサイドバーで利用することは基本的に好ましくないと判断しています。この変更方法について下の記事でご紹介していますので参考にしてみて下さい。
サイドバーのタイトルの装飾について
WordPress標準のテーマは基本的にシンプルに作られています。だから文字装飾とか飾りが少ない。サイドバーのタイトルもちょっと太字になっている程度で、なんとなく味気ないのが特徴なんですよね。このサイドバータイトルに装飾する方法について下の記事にて紹介していますので参考にしてください。
一覧表示で「…続きを読む」みたいにする方法
トップページやカテゴリ表示をした時にデフォルトのままですと、全ての記事が羅列されて表示されてしまします。それをどこかで区切りを入れて一覧表示に変更したくなります。「…続きを読む」みたいな形ですね。これは記事を作る時に「More」というものを入れるケースと自動で文字数で区切りを入れて表示するケースがあるのですが、本サイトでは後者を選択しました。その方法について下の記事で紹介していますので参考にしてみて下さい！
「Proudly powered by WordPress」を変更する方法
フッター部分にどんなサイトでも「CopyRight©」みたいな標記があると思うのですが、WordPressのデフォルトは「Proudly powered by WordPress」となっています。これを変更する方法を下の記事で紹介していますので参考にしてみて下さい！
固定ページのデザインを変更する方法
固定ページを作成する場合に、あまりにも通常の記事投稿ページとテンプレートが違いすぎてビックリしました。それなので、通常の記事と同じようなテンプレートを作成してしまいました。テンプレートは一度作成すれば他の固定ページにも適用できます。サイトによっては固定ページをトップページにしているケースもあります。こちらの方がデザインに融通が利くのが特徴ですね。実際に本サイトで固定ページのテンプレートを作成した例を下の記事で紹介していますので参考にしてみて下さい！
固定ページの記事タイトルが大文字に変換される対処法
WordPressのどのテーマも共通な問題であると思うですが、記事タイトルやヘッダー文字が「a」が「A」と勝手に大文字に表示されてしまうケースがあります。余計なことするなよって突っ込みたくなりますが、仕様なので仕方がありません。しかしこの症状ですが、意外な処で勝手に大文字になっているケースがあります。これはテーマによっても若干違うと思うのですが、調べればスグにわかります。この対応方法について下の記事で紹介していますので参考にしてみて下さい。
リンクを新規ウィンドウで表示させる方法
ソーシャルリンクも含むのですが、「twenty seventeen」に限ったことではなく何故かリンクを貼る時に「新規ウィンドウで開く」という指定ができない。WordPressのデフォルト設定がそのようになっているからです。HTMLでリンク記述するときに「target=”_blank”」という指定になります。実はコレ、簡単に設定可能です。下の記事で紹介していますので参考にしてみて下さい！
RSS・Feedlyのリンクについて
WordPressやブログで情報発信し、サイトの更新情報を誰かに少しでも多く見てもらうにはRSSを発信することが大切です。WordPressの場合にはデフォルトの設定でRSSの情報は作成されていますが、敢えてサイトにボタン設置等をした方が読者に登録してもらえる可能性が高くなります。するとサイトのファンは情報更新を元に記事を閲覧してくれるようになります。これはかなり大切なことです。本サイトで設置した事例にした記事を参考にしてみてください。
Twitterのフォローボタンを設置する方法
SNSの中でもTwitterというのは情報発信するのにはとても有効な手段であると考えています。リアルタイムな情報発信の効果が高いというのがTwitterの特性として挙げられます。このTwitterのフォローボタンの設置は意外と簡単にできること知っていましたか？もちろんTwitterのアカウントを持っていることが条件となりますが。本サイトでの導入事例を下の記事に紹介していますので参考にしてみて下さい。
カテゴリ表示が階層表示されない場合について
WordPressではカテゴリ表示を階層化することができるのですが、カテゴリを作成するときに親子関係にしても表示に反映されないのがデフォルトになっているようです。カテゴリを階層的に表示したい場合には下の記事を参考にしてみて下さい。
プログラムコードをスクロールバー付きボックスに表示する
WordPressもそうなのですが、他のプラグラムコードでも何でも横に長くなってしまようなものを横スクールバーを付けたい。あとは縦に長すぎるので縦スクロールバーを付けたいケースってありませんか？他サイトでは「jquery」を利用したカッコよい行番号付きボックスの中に表示しているサイトを良く見かけますが、本サイトでは面倒なので横スクロールバーだけ出れば良いと割り切っています。むしろプログラムコードを説明する場合に赤文字にしたりする場合は、本サイトのような記載をした方が便利なのではないかと感じます。また、サイト表示は明らかに早いと思います。デザイン的なカッコ良さを採用するか、シンプルさを選ぶかの違いかと思います。本サイトでは後者を選択しました。その導入例について説明しているのが下の記事となりますので参考にしてみて下さい。
記事編集画面の「ビジュアル」にスタイルシートを反映させる
WordPressの記事編集画面で「ビジュアル」モードと「テキスト」モードがあるのですが、この「ビジュアル」モードで蛍光ペンなどのスタイルシートで定義したクラスを適用しても反映されません。実際に記事をプレビューすると反映されていることが確認できるのですが、それでは作業効率が悪いです。そんな時にちょっとカスタマイズを入れれば「ビジュアル」モードでの編集が実際の記事に近い表示になります。その導入事例が下の記事になりますので参考にしてみて下さい。
WordPressのカスタマイズのまとめ
WordPress標準のテーマを利用する場合には、そのまま利用でも問題はないのです。しかし誰もが感じるはずです。デザインがシンプルすぎて味気ないことに。そんな理由もありデザイン修正等発生するのですが、それなりの努力が必要になります。また、最初からSEO対策がされている販売されているテンプレートを利用するのも有りだと思うのですが、自分で少しずつサイトをカスタマイズしながらサイト育成していくのも楽しみの一つなのではないかと感じています。
恐らくここまで詳細に解説しているサイトや本はありません。皆様のお役に経つようでしたら、「はてブ」登録や「Twitter」のフォロー・ツイート等よろしくお願い致します。それが励みになり、これからも皆様のお役になてる記事を書いていく力になりますので。
技術評論社 (2017-01-26)
売り上げランキング: 284,885
スポンサーリンク