ワードプレスのカスタマイズ

ワードプレス(WordPress)をプラグインを使ってカスタマイズするには、一体どうすれば良いのでしょうか?

カスタマイズはしたいけれど、コードを直接編集するのは抵抗があるという方向けに、直観的な操作だけでカスタマイズができるプラグインをご紹介します。

ちなみにワードプレスはカスタマイズしやすいテーマとしにくいテーマがありますので、そもそもテーマを選び直したい方はこちらの記事を参考にしてみてください。

ワードプレスをカスタマイズできるプラグイン2種類

wordpress 1541288850 530x227 - ワードプレスのカスタマイズをプラグインで行う方法を初心者に解説

① Page Builder

まず「Page Builder」は、ドラッグアンドドロップでカスタマイズができ、無料で使用できるプラグインです。

作成したページは、自動的にレスポンシブ対応で作成されます。このプラグインをインストールすると、以下のように新規投稿ページに「Page Builder」というタブが表示されます。

※プラグインの設定は特に必要ないので、有効化するとすぐに使えるようになります。

pagebuilder - ワードプレスのカスタマイズをプラグインで行う方法を初心者に解説

この画面で新しいページを作成することができます。カラム数の指定やウィジェットの追加なども、この画面から行うことができます。

ただし、Page Builderで作成したページを「ビジュアルエディタ」や「テキストエディタ」で編集してしまうと、編集内容が上書きされてしまうので注意しましょう。

pagebuilder2 - ワードプレスのカスタマイズをプラグインで行う方法を初心者に解説

② Elementor

続いて「Elementor」は「Page Builder」と同様に、ドラッグアンドドロップでカスタマイズができる無料プラグインです。

「Elementor」を使ってページを編集する場合は、新規追加ページにある「Elementorで編集」をクリックしてください。

編集は左側に表示されている要素から追加したい要素をドラッグアンドドロップするだけで実現します。カラムの幅変更なども自由にできるので、まずは自分で試しながら使っていくのが良いでしょう。

ワードプレスのテーマのカスタマイズではなくデザインを自作する場合の方法

web agency 1738168 640 530x398 - ワードプレスのカスタマイズをプラグインで行う方法を初心者に解説

続いて、WordPressに使いたいテーマがない場合は自作することもできます。デザインを自作するメリットとしては、同じテーマを使っている人がいないことと、自分の使いやすいようにカスタマイズできることです。

具体的な手順は以下のようになります。

  1. デザインを考える
  2. サイトマップを考える
  3. テンプレートファイルを作成する

この手順で作成することができます。プログラミングスクールでは上記のようなことも学べますが、テーマを自作するということは自分で0から作っていくので、HTML、CSS、PHPの知識が必要です。

すべて知っていなければいけないというわけではありませんが、記述方法などは理解してから取り掛かると、スムーズに作成に入れることができます。

1. デザインを考える

まずはデザインを考えましょう。

手書きでもパソコンで作成してもどちらでも良いですが、おおよそのデザインを考えてみましょう。このときにどんな機能があると良いのかなども考えておくと良いです。

2. サイトマップを考える

続いて、サイトマップを決めることで、おおよそのサイト構成が決まってきます。

例えば、トップページからどのページに移動できるのか、メニューバーに入れる項目はどうするかなどです。こちらも手書きでも良いので、考えてみましょう。

3. テンプレートファイルを作成する

最後に、サイトの大まかな構成が決まったところで、テンプレートファイルの作成に移ります。

ちなみにこの辺りのワードプレスのテーマの作成方法などをしっかりと勉強したい場合は、筆者も受講したワードプレスを学べるプログラミングスクールを活用するのがおすすめです。プログラミングスクールは費用はかかるものの、ワードプレスについて体系的に学べるのがメリットです。

ワードプレスのカスタマイズが表示されない時の原因と対処法は?

homepage 1534311312 530x353 - ワードプレスのカスタマイズをプラグインで行う方法を初心者に解説

ちなみに「ワードプレスをカスタマイズしたのに反映されていない!」ということが、時々起こります。対処するまでに何時間もかかったという方も、少なくはないでしょう。

筆者もそんな形でなんども悩みましたので、そんなトラブルに見舞われたときの対処法をお伝えします。原因として考えられるのは以下の3つが多いでしょう。

  1. キャッシュ機能によって反映されていない
  2. プラグインとの相性が悪い
  3. テンプレートファイルに記述ミスがある

それぞれ以下で詳細を確認し、合わせて対応策をご紹介します。

理由① キャッシュ機能によって反映されていない

google 76517 300x188 - ワードプレスのカスタマイズをプラグインで行う方法を初心者に解説

まず、Google Chromeなどのブラウザには、履歴を記憶しておく「キャッシュ」と呼ばれる機能があります。

一度でも開いたことのあるサイトやページなどの情報を記憶しておいて、一時的にPC上に保存しておくという機能です。この機能により、読み込み時間が短くなって閲覧するまでの時間を短くすることができます。

ただし、PC上の情報を表示するので、サイトに変更があってもそれが反映されないのです。そのため、カスタマイズが反映されていない場合は、キャッシュを削除することで簡単に治ることがよくあります。

今回はGoogle Chromeの場合のキャッシュ削除方法を紹介しておきます。まずはGoogle Chromeを開き、右上のメニューから設定画面を開きましょう。

スクロールして一番下にある「詳細設定」クリックし、その中にある「閲覧履歴データを消去する」をクリックしてください。

2017 11 06 1 - ワードプレスのカスタマイズをプラグインで行う方法を初心者に解説

次に表示される画面で「キャッシュされた画像とファイル」にチェックを入れた後に、「閲覧履歴データを消去する」をクリックしてください。

2017 11 06 2 - ワードプレスのカスタマイズをプラグインで行う方法を初心者に解説

これで、キャッシュが削除されます。これによってカスタマイズの反映を確認することができたりもします。

理由② プラグインとの相性が悪い

他の理由としては、単純にプラグインとの相性が悪い場合があります。こちらは、様々なプラグインを使っているとよく起こってしまう現象です。。

特にキャッシュ系のプラグインを使っている場合は、カスタマイズが反映されないなどのトラブルが起こりやすいです。この場合は面倒ですが、1つ1つプラグインを停止しながら確認するしかありません。

プラグインはバグなどが判明すると、こまめに最新バージョンが公開されます。プラグインを最新バージョンに更新することも忘れずに行ってください。

理由③ テンプレートファイルに記述ミスがある

wordpress 923188 1920 300x200 - ワードプレスのカスタマイズをプラグインで行う方法を初心者に解説

上の2つを試しても対処できない場合は、テンプレートファイルを確認してみましょう。

1文字でも記述ミスがあると、正しく反映されません。カスタマイズしたテンプレートファイルをダウンロードしてから、テキストエディタで確認してみると間違いに気づきやすかったりします。

以上のような理由でカスタマイズが反映されないことがありますので、ワードプレスのテーマのカスタマイズには注意が必要です。いずれにせよワードプレスのカスタマイズに関心があり、しっかりと基礎知識を学びたい方には、ワードプレスを学べるプログラミングスクールの受講が一番おすすめです。

最後まで読んでいただき、ありがとうございました。

おすすめの記事