WordPressのカスタマイズ方法を徹底解説!

WordPress
Pocket

WordPress」でサイト運営していると、どうしてもカスタマイズしたくなってきてしまうのが普通の事であると思う。ただ、このカスタマイズですが、プラグインを導入する方法から自分で「phpファイル」や「cssファイル」を修正しないとならないケースに遭遇することが度々ある。

色々なサイトで紹介されているものもあるのだが、「どうしてそのように修正するのか?」と根本的な解説をしているサイトは少ない。

本サイトでは、その場凌ぎの修正ではなく、参考にして頂いた方に理解して貰い更に応用して頂けるような解説を心掛けています

それでは早速、本サイトでどのようなカスタマイズをしてきているかを紹介したいと思います。きっとあなたのサイトに参考になるカスタマイズ方法があるかもしれません!

スポンサーリンク

目次

カスタマイズは根本的な仕組みから理解する

カスタマイズと言っても色々あります。ただプラグインを導入すれば良いだけのものから、プログラムの修正を加えるものまで色々あります。ただ、ここで一番大切なことは、そのカスタマイズをすることでサイトにどの様な影響を与えるかは常に頭に入れておかなければなりません。場合によってはカスタマイズによる悪影響が発生する可能性もあります。

デザイン的なものは実際にPCとモバイルの両方で確認すれば良いのですが、一番厄介な問題は表示速度です。これに関しては少しでも表示速度は速いに越したことがありません。だからと言って便利なプラグインを導入しないのも勿体ないです。

カスタマイズはバランスが必要です!

カスタマイズを親テーマにしてはいけません!

WordPress標準のテーマを利用する場合には必ず子テーマを作成し、絶対に親テーマを直接いじることはしないでください!

親テーマの中身を参照することは構いませんが、親テーマを直接カスタマイズするのはNGです。この理由は知っている方が多いとは思いますが、WordPressのバージョンアップ時に折角カスタマイズした内容が元に戻ってしまう可能性があるからです。

基本的なWordPressの設定について

WordPress導入時の基本的な設定~子テーマ作成までの方法については次の記事を参考にしてください!

WordPress入門!始める方法を徹底解説!

各種プラグインの導入方法について

プラグインのインストールにつきましては、[プラグイン]-[新規追加]メニューより行います。これはどのプラグインも共通なので覚えておいてください。それでは早速導入した方法良いプラグインを優先順位の高いものから紹介します。

最初からインストールしておいた方が良いプラグイン

ここから説明するプラグインはWordPress導入時にインストールして有効化しておいた方がよろしいプラグインとなります。害は全くなく有益な事しかありません。後から導入しても問題はないのですが、きっと必要になるはずです。とりあえず、下のプラグインに関しては最初からインストールしておくことをお勧めいたします

TinyMCE Advanced

このプラグインは記事作成画面でのテーブル挿入等の編集機能を拡張するためのものです。記事作成をする際に文字の装飾等の機能が便利なので、WordPress運用開始と同時にインストールした方が良いプラグインとなります。特別な設定は必要はないと思います。インストールして有効化するだけで大丈夫です。このプラグインは記事の編集画面で利用するだけなので、重くなることはありません。

EWWW Image Optimizer

メディアをアップロードすると同時に画像を圧縮してくれます。画像ファイルは極力小さいサイズになってくれた方が表示速度が上がるので、欠かせないプラグインです。またあとから導入したとしても既に登録されているライブラリのメディアを圧縮してくれます。勿論、操作は必要になりますが。

Google XML Sitemaps

XMLファイルを生成するプラグインとなります。恐らく他のプラグインでも同じような機能を持つものがあるのですが、私は敢えてGoogle製のものを利用しています。どちらを使っても同じかもしれませんが、XMLファイルはGoogle検索に影響するものになってくるので、こちらを利用しています。

必要に応じてインストールするプラグイン

これから紹介するプラグインに関しましては必要に応じてインストールすればよいと思います。きっと必要性を感じるタイミングがサイトによって違うと思います。その中でも本サイトで導入していった順番でご紹介したいと思います。

Breadcrumb NavXT

これはパンくずリスト用のプラグインとなります。自作されている方もいるようですが、このプラグインを利用した方が簡単にパンくずリストが表示できます。動作に影響を与えるような感じは全くないので、自分はこのプラグイン気にいっています。本サイトでの導入事例は下の記事を参考にしてください。

WordPress【twenty seventeen】パンくずリストを表示する方法

WP Social Bookmarking Light

このプラグインは記事中にソーシャルリンクボタンを配置する為のプラグインです。「Twitter」「Facebook」「Google+」「はてなブックマーク」「Line」など色々なボタンを配置できます。SNSとのリンクはSEO対策には欠かせないです。本サイトも今現在このプラグインを利用していますが、もしかしたら他に変更する可能性はあります。しかし初めて利用するには一番簡単に設置可能であると思われるプラグインだと思います。本サイトでの導入して時の記事を参考にしてみてください。

WordPress「WP Social Bookmarking Light」を使用しソーシャルリンクボタンの設置方法

All In One SEO Pack

SNSボタンを設置するころより大抵のサイトはSEO対策を意識し始めるころだと思います。ある程度記事数が増えてきてから取り掛かっても遅くはないと私個人的には思っています。最低でも15記事位になってからでも良いのかな。本サイトで利用している機能は「ソーシャルメディアリンク」と「パフォーマンス」の2つの機能のみです。特にソーシャルメディアリンク機能に関してはSEO対策としては必須の機能となります。他にも機能があるのですが、本サイトでは2つの機能の利用に留まっております。本サイトでの導入事例を下の記事となりますので参考にしてみてください。

WordPressに「All in One SEO Pack」プラグインを導入してみた

WordPressプラグイン「All in One SEO」を利用してTwitterへのツイート設定をしてみた

PS Auto Sitemap

このプラグインですが、サイトマップ」を簡単に作ってくれます。出力形式もある程度テンプレートが用意されており、とても便利なプラグインです。ちなみにサイトマップですが、アクセス数増加をする為には必ず作った方が良いです。20記事位になってくるとサイトらしくなってきており、サイト訪問者に記事を見つけやすくする為にサイトマップページを作成した方が良いです。また、このサイトマップにはSEO効果を高めてくれる作用も目的としてあります。本サイトで導入した事例を下の記事で紹介していますので参考にしてみてください。

WordPressプラグイン「Ps Auto Sitemap」を使用してサイトマップを自動で作成する方法

AddQuicktag

このプラグインは「TinyMCE Advanced」では不足しているタグを補ってくれるものである。例えば蛍光ペンを引いてみたいといった機能であったり文字をボックスで囲ってみたい等、別定義したクラスを簡単にエディタで適用することができるようになる、ある程度、記事のデザインに拘り始めた時にあると便利なプラグインとなります。このプラグインは編集画面でしか利用しないプラグインとなりますので表示速度に影響を与えることはありません。どちらかと言うと、WordPress導入当初から「TinyMCE Advanced」と同時にインストールしておいても良いかもしれません。しかしある程度、スタイルシート「style.css」にカスタマイズを加えられるようになっていないと効果を発揮しないプラグインです。本サイトでの導入事例を下の記事で紹介していますので参考にしてみてください。

WordPressプラグイン「AddQuicktag」をインストールし利用する方法。蛍光マーカーを引ける設定方法を例にしてご紹介!!

Lazy Load

サイト表示速度を改善してくれるプラグインとなります。通常のサイト表示の場合は呼出されたページに表示される画像全てが同時に読み込みされす。このプラグインは画面に見える部分のみだけを優先して画像読み込みするようにしているのです。本サイトでの導入事例を下の記事で紹介していますので参考にしてみてください。

WordPressのサイト表示速度が改善されるプラグイン「Lazy Load」の導入方法・結果について!

Table of Contents Plus

このプラグインは「自動で目次生成」してくれるものとなります。WordPressでサイトで目次あるサイトは大抵このプラグインを利用していると思われます。記事表示時に目次生成する為、表示速度への影響は否定できませんが、手動で目次を作成する労力を考えれば、間違いなくこちらの方が良いです。目次は「h1」~「h5」タグを元に生成され、細かい設定も可能です。本サイトでの導入事例を下の記事で紹介していますので参考にしてみてください。

WordPressで記事に目次を自動作成!「Table of Contents Plus」プラグインの導入方法!

プラグインでのカスタマイズ注意点

プラグインはWordPress運営していくには必ず必要となってくると思います。ただ、何度も説明するようにバランスが大切です。便利になったりデザインがカッコよくなったりするのですが、WordPressの動作に影響を与えることも確かです。特に表示速度に影響するものに関しては注意して導入していくことが大切だと感じています。また、なるべく利用実績が多いプラグインを導入した方が安心です。利用方法がわからない時に、必ずどこかのサイトで利用方法について説明していることが多いものです。

なんでも自作に拘っているサイトもあります。それはそれで良いと思います。自分の力量で自作するものは自作する。そうでないものはプラグインを利用する。そこら辺は自分で判断するしかないと思います。きっと何でもかんでもプラグインに頼っているといずれ、サイト動作に影響が表れることが出てくるはずです。特に近年ではモバイルでの閲覧者が多いので、そのような閲覧者にも気を使う必要があることをご承知しておきたいものです。

プラグインを利用しない基本的なカスタマイズ

プラグインでのカスタマイズではなく、どうしても自分でカスタマイズしないとならないケースは発生します。これは利用しているテーマによってもことなるので、ここで紹介するのはテーマに関係なくカスタマイズが必要になるものに限定させて頂きます。本サイトでは「twenty seventeen」を利用していますが、このテーマ限定のカスタマイズは別で説明します。

サイトアイコンの設定について

ブックーマークされた時にアイコンがないと寂しいですよね?自分のサイトアイコンを設定しておいた方が良いです。後からでも変更可能です。しかし、無いよりはあった方が良いですよ。何も設定されていないのって寂しいものがあります。どんなものでよいと思うのでとりあえず設定仕手おきましょう。本サイトで導入した事例が下の記事で紹介していますので参考にしてみて下さい。

WordPressでサイト用のアイコンを設定する方法

サイドバーの「h2」タグを「p」タグへ変更

これはWordPressのどのテーマも同じかと思うのですが、サイドバーに使用されているタイトルが「h2」タグを利用しているんですよね。本来、「h」タグと言うのは「1」~「5」位まで利用するのですが、数字の小さいほうが優先度が高くなります。だから「h1」タグというのは基本ページに一つ。「h2」タグは記事中に多くても3~4個位に済ませるのが理想的です。これは記事の長さにもよります。だからこそ「h2」タグをサイドバーで利用することは基本的に好ましくないと判断しています。この変更方法について下の記事でご紹介していますので参考にしてみて下さい。

WordPressのサイドバーに表示されるウィジェットのタイトルを「h2」タグから他のタグ(例えば「p」タグ)へ変更する方法

サイドバーのタイトルの装飾について

WordPress標準のテーマは基本的にシンプルに作られています。だから文字装飾とか飾りが少ない。サイドバーのタイトルもちょっと太字になっている程度で、なんとなく味気ないのが特徴なんですよね。このサイドバータイトルに装飾する方法について下の記事にて紹介していますので参考にしてください。

WordPressサイドバーのウィジェットタイトルをスタイルシートに定義して装飾する方法

一覧表示で「…続きを読む」みたいにする方法

トップページやカテゴリ表示をした時にデフォルトのままですと、全ての記事が羅列されて表示されてしまします。それをどこかで区切りを入れて一覧表示に変更したくなります。「…続きを読む」みたいな形ですね。これは記事を作る時に「More」というものを入れるケースと自動で文字数で区切りを入れて表示するケースがあるのですが、本サイトでは後者を選択しました。その方法について下の記事で紹介していますので参考にしてみて下さい!

WordPress【twenty seventeen】トップページ一覧表示で「…続きを読む」みたいにする方法!

「Proudly powered by WordPress」を変更する方法

フッター部分にどんなサイトでも「CopyRight©」みたいな標記があると思うのですが、WordPressのデフォルトは「Proudly powered by WordPress」となっています。これを変更する方法を下の記事で紹介していますので参考にしてみて下さい!

WordPress【twenty seventeen】「Proudly powered by WordPress」を変更する方法

固定ページのデザインを変更する方法

固定ページを作成する場合に、あまりにも通常の記事投稿ページとテンプレートが違いすぎてビックリしました。それなので、通常の記事と同じようなテンプレートを作成してしまいました。テンプレートは一度作成すれば他の固定ページにも適用できます。サイトによっては固定ページをトップページにしているケースもあります。こちらの方がデザインに融通が利くのが特徴ですね。実際に本サイトで固定ページのテンプレートを作成した例を下の記事で紹介していますので参考にしてみて下さい!

WordPress【twenty seventeen】固定ページのデザインを投稿記事と同様にサイドバーとタイトル表示および新規テンプレート作成方法

固定ページの記事タイトルが大文字に変換される対処法

WordPressのどのテーマも共通な問題であると思うですが、記事タイトルやヘッダー文字が「a」が「A」と勝手に大文字に表示されてしまうケースがあります。余計なことするなよって突っ込みたくなりますが、仕様なので仕方がありません。しかしこの症状ですが、意外な処で勝手に大文字になっているケースがあります。これはテーマによっても若干違うと思うのですが、調べればスグにわかります。この対応方法について下の記事で紹介していますので参考にしてみて下さい。

WordPressで記事タイトルやヘッダー文字が大文字になるのを修正する方法!

リンクを新規ウィンドウで表示させる方法

ソーシャルリンクも含むのですが、「twenty seventeen」に限ったことではなく何故かリンクを貼る時に「新規ウィンドウで開く」という指定ができない。WordPressのデフォルト設定がそのようになっているからです。HTMLでリンク記述するときに「target=”_blank”」という指定になります。実はコレ、簡単に設定可能です。下の記事で紹介していますので参考にしてみて下さい!

WordPressカスタムメニューのリンクを新規ウィンドウ表示させる設定方法

RSS・Feedlyのリンクについて

WordPressやブログで情報発信し、サイトの更新情報を誰かに少しでも多く見てもらうにはRSSを発信することが大切です。WordPressの場合にはデフォルトの設定でRSSの情報は作成されていますが、敢えてサイトにボタン設置等をした方が読者に登録してもらえる可能性が高くなります。するとサイトのファンは情報更新を元に記事を閲覧してくれるようになります。これはかなり大切なことです。本サイトで設置した事例にした記事を参考にしてみてください。

WordPressでRSS・Feedlyボタンを設置する方法

Twitterのフォローボタンを設置する方法

SNSの中でもTwitterというのは情報発信するのにはとても有効な手段であると考えています。リアルタイムな情報発信の効果が高いというのがTwitterの特性として挙げられます。このTwitterのフォローボタンの設置は意外と簡単にできること知っていましたか?もちろんTwitterのアカウントを持っていることが条件となりますが。本サイトでの導入事例を下の記事に紹介していますので参考にしてみて下さい。

WordPressのサイドバーにTwitterのフォローボタンを設置する方法

カテゴリ表示が階層表示されない場合について

WordPressではカテゴリ表示を階層化することができるのですが、カテゴリを作成するときに親子関係にしても表示に反映されないのがデフォルトになっているようです。カテゴリを階層的に表示したい場合には下の記事を参考にしてみて下さい。

WordPress-カテゴリの親子関係が表現できない時に階層表示する設定方法

 プログラムコードをスクロールバー付きボックスに表示する

WordPressもそうなのですが、他のプラグラムコードでも何でも横に長くなってしまようなものを横スクールバーを付けたい。あとは縦に長すぎるので縦スクロールバーを付けたいケースってありませんか?他サイトでは「jquery」を利用したカッコよい行番号付きボックスの中に表示しているサイトを良く見かけますが、本サイトでは面倒なので横スクロールバーだけ出れば良いと割り切っています。むしろプログラムコードを説明する場合に赤文字にしたりする場合は、本サイトのような記載をした方が便利なのではないかと感じます。また、サイト表示は明らかに早いと思います。デザイン的なカッコ良さを採用するか、シンプルさを選ぶかの違いかと思います。本サイトでは後者を選択しました。その導入例について説明しているのが下の記事となりますので参考にしてみて下さい。

CSSで「Pre」要素使用でスマートフォンスクロールバー表示する方法

記事編集画面の「ビジュアル」にスタイルシートを反映させる

WordPressの記事編集画面で「ビジュアル」モードと「テキスト」モードがあるのですが、このビジュアル」モードで蛍光ペンなどのスタイルシートで定義したクラスを適用しても反映されません。実際に記事をプレビューすると反映されていることが確認できるのですが、それでは作業効率が悪いです。そんな時にちょっとカスタマイズを入れれば「ビジュアル」モードでの編集が実際の記事に近い表示になります。その導入事例が下の記事になりますので参考にしてみて下さい。

WordPressの「ビジュアルエディタ」に子テーマに定義したクラス(class)を反映させる方法!!

WordPressのカスタマイズのまとめ

WordPress標準のテーマを利用する場合には、そのまま利用でも問題はないのです。しかし誰もが感じるはずです。デザインがシンプルすぎて味気ないことに。そんな理由もありデザイン修正等発生するのですが、それなりの努力が必要になります。また、最初からSEO対策がされている販売されているテンプレートを利用するのも有りだと思うのですが、自分で少しずつサイトをカスタマイズしながらサイト育成していくのも楽しみの一つなのではないかと感じています。

恐らくここまで詳細に解説しているサイトや本はありません。皆様のお役に経つようでしたら、「はてブ」登録や「Twitter」のフォロー・ツイート等よろしくお願い致します。それが励みになり、これからも皆様のお役になてる記事を書いていく力になりますので。

 

 

Pocket

スポンサーリンク