WordPressには、テーマと呼ばれるテンプレートに近いものが多数用意されています。しかし、そのまま使うのは嫌だと感じたことや、ベースの色を変えたいと思ったことはありませんか？
そこで今回は、WordPressのカスタマイズについてお伝えします。
CONTENTS
WordPressでカスタマイズしやすいおすすめテーマ紹介
まず、WordPressの中でもカスタマイズしやすいテーマがありますので、先にそちらを紹介します。
どれもシンプルなデザインになっている分、デザインをカスタマイズしやすいという特徴があります。
① STORK（OPENCAGE）
【公式サイト】https://open-cage.com/stork/
OPENCAGEが提供する「STORK」は有料テーマになりますが、非常にカスタマイズがしやすいテーマです。
無料テーマをカスタマイズするとなると、ある程度CSSやPHPの知識が必要となります。そのため、コードを書くのが苦手な初心者の方には有料テーマはおすすめです。
OPENCAGEは「STORK」以外にも、様々なデザイン性にもSEO対策にも優れた有料テーマを提供していますので、一度公式サイト（https://open-cage.com/）をのぞいてみて参考にしてみてください。
② Emanon（エマノン）
Emanonは企業サイトや企業ブログなどにもよく用いられている有料テーマです。また、公式サイトがカスタマイズ情報などを配信していますので、非常に参考にすることができます。
Emanonについてはネットに情報もありますので、主にビジネス系の用途でおしゃれに決めたい方にはおすすめの有料テーマです。
【公式サイト】https://wp-emanon.jp/
③ 賢威
続いて、SEO対策をするなら「賢威」と言っても過言ではない有料テーマが、賢威です。
賢威はこれまではデザイン性が若干劣ると言われていたのですが、近年は改善されカスタマイズもしやすくなってきています。また、有名なブロガーやアフィリエイターなどにも取り上げられて、カスタマイズ方法が公開されています。
賢威の場合はテンプレートを購入すると、SEO対策マニュアルをもらえたり、賢威フォーラムを利用できるなどのメリットもあるのが魅力です。
【公式サイト（賢威）】：https://rider-store.jp/keni/
基本的にここまでの3つが、デザイン性やSEO対策上でも初心者におすすめできるテーマですが、中級者以上の方は下記のようなテーマを検討するのも良いでしょう。
④ Diver
「Diver」は、初心者でも利用しやく、機能がとても豊富な有料テーマです。これからアフィリエイトなどの広告での収益化を目指したい方には、特におすすめできる有料テーマです。
実際に、企業に納品してきたノウハウと技術が詰め込まれていますので、実績に基づいて作られた内部構造や、無駄の無い美しいデザインが人気のテーマです。
アフィリエイトで稼ぎたい方にはDiverが良いでしょう。
【公式サイト（Diver）】https://tan-taka.com/diver-demo
⑤ Simplicity
続いて、「Simplicity」は、とにかくシンプルなテーマにしようという目的で作られているため、非常にシンプルなテーマです。
カスタマイズしやすいという特徴を前面に出したテーマですが、内部SEO対策やレスポンシブ対応、SNSボタンが用意されているなど、機能面も充実したテーマです。
ただし、かなり上級者向けです。
公式サイト：https://wp-simplicity.com/
⑥ Bones
「Bones」は、文字通り骨組みだけが用意されたテーマです。
そのため、カスタマイズ前提のテーマなので、子テーマを作成する必要がなく、直接テーマファイルを編集できるようになっています。
ディレクトリ構成もシンプルにまとまっているだけでなく、それぞれのファイルでもコメントで編集方法が記述されているので、カスタマイズしやすくなっています。
テーマをカスタマイズした経験がない方でも操作できるように工夫されていますので、カスタマイズするための勉強にはなるでしょう。ただし、こちらもかなり上級者向けです。
公式サイト：https://themble.com/bones/
初心者でもできる！WordPressのカスタマイズ方法って？
それでは、実際にWordpressをカスタマイズするにはどうしたら良いのでしょうか？
HTMLとCSSを編集する
まず、テーマに関するファイルは、「WordPressがインストールされているディレクトリ/wp-content/themes/テーマ名/」の中に入っています。
そこで、FTPを用いてサーバー上にあるテンプレートファイルをダウンロードした後、編集していていきます。
Xサーバーなどの場合は、サーバーに直接ログインしてダウンロードすることも可能です。そうしてテンプレートをダウンロード後、テキストエディタで開いて編集していきましょう。
ただし、設定ミスなどによってWordPressにログインできなくなったり、表示が崩れてしまうことがあります。設定などはミスのないように慎重に行っていきましょう。
編集が終わったら、再度アップロードして確認してみましょう。
PHPを編集する
PHPファイルを編集する場合も、FTPを用いてダウンロードした後、テキストエディタで開いて編集します。
PHPファイルも記述ミスなどがあると、思い通りの表示にはなりません。
特に「functions.php」は、記述ミスがあると正しく表示されないだけでなく、ログイン画面すら表示されなくなってしまうことがあります。
そのため、よく確認しながら編集していきましょう。
カスタマイズを学ぶにはプログラミングスクールが一番おすすめ
ワードプレスはもちろん独学で学ぶことも可能なのですが、それではいかんせん時間がかかります。
また、本などを読みながら勉強するのも効率が悪いため、多少お金に余裕がある方は、プログラミングスクールの利用が体系的に学べるのでおすすめです。
例えば、上場企業が運営するプログラミングスクールのCodeCampなどを利用すれば、現役エンジニア講師に直接疑問点を質問することが可能です。CodeCampは、完全オンライン受講が可能で、いつでもどこからでも好きな時間に現役エンジニアの格安マンツーマンレッスンを受けられます。
これから WordPressについてしっかりと学んでいきたいというやる気のある方は、まずは上場企業が運営するCodeCampの無料体験を利用されてみるのがおすすめです。
オンラインテキストで自習形式ならTechAcademy
一方で、完全オンライン受講が可能で、オンラインテキストで自習室つ、週2回程度現役エンジニアのメンターと話しながら学びたい方には、TechAacademyがおすすめです。
TechAcademyも上場企業が運営しているプログラミングスクールのため信頼性は高く、毎日オンライン上で無料体験レッスンを開催しています。
ですので、オンラインの自習形式に関心のある方は、TechAcademyの無料体験レッスンの受講も検討されてみると良いでしょう。
WordPressテーマのデザインを自作する場合の方法
続いて、WordPressに使いたいテーマがない場合は自作することもできます。
デザインを自作するメリットとしては、同じテーマを使っている人がいないことと、自分の使いやすいようにカスタマイズできることです。
具体的な手順は以下のようになります。
- デザインを考える
- サイトマップを考える
- テンプレートファイルを作成する
この手順で作成することができます。プログラミングスクールでは上記のようなことも学べますが、テーマを自作するということは自分で０から作っていくので、HTML、CSS、PHPの知識が必要です。
すべて知っていなければいけないというわけではありませんが、記述方法などは理解してから取り掛かると、スムーズに作成に入れることができます。
1. デザインを考える
まずはデザインを考えましょう。
手書きでもパソコンで作成してもどちらでも良いですが、おおよそのデザインを考えてみましょう。このときにどんな機能があると良いのかなども考えておくと良いです。
2. サイトマップを考える
サイトマップを決めることで、おおよそのサイト構成が決まってきます。
例えば、トップページからどのページに移動できるのか、メニューバーに入れる項目はどうするかなどです。こちらも手書きでも良いので、考えてみましょう。
3. テンプレートファイルを作成する
サイトの大まかな構成が決まったところで、テンプレートファイルの作成に移ります。
ちなみにこの辺りのワードプレスのテーマの作成方法などをしっかりと勉強したい場合は、やはり筆者も受講したプログラミングスクールを活用するのがおすすめです。
プラグインを使ってWordPressをカスタマイズする方法
続いて、カスタマイズはしたいけれど、コードを直接編集するのは抵抗があるという方向けに、直観的な操作だけでカスタマイズができるプラグインをご紹介します。
① Page Builder
まず「Page Builder」は、ドラッグアンドドロップでカスタマイズができ、無料で使用できるプラグインです。
作成したページは、自動的にレスポンシブ対応で作成されます。このプラグインをインストールすると、以下のように新規投稿ページに「Page Builder」というタブが表示されます。
※プラグインの設定は特に必要ないので、有効化するとすぐに使えるようになります。
この画面で新しいページを作成することができます。カラム数の指定やウィジェットの追加なども、この画面から行うことができます。
ただし、Page Builderで作成したページを「ビジュアルエディタ」や「テキストエディタ」で編集してしまうと、編集内容が上書きされてしまうので注意しましょう。
② Elementor
「Elementor」は「Page Builder」と同様に、ドラッグアンドドロップでカスタマイズができる無料プラグインです。
「Elementor」を使ってページを編集する場合は、新規追加ページにある「Elementorで編集」をクリックしてください。
編集は左側に表示されている要素から追加したい要素をドラッグアンドドロップするだけで実現します。カラムの幅変更なども自由にできるので、まずは自分で試しながら使っていきましょう。
カスタマイズが表示されない時の原因と対処法は？
「カスタマイズしたのに反映されていない！」ということが、時々起こります。対処するまでに何時間もかかったという方も、少なくはないでしょう。
そこで、そんなトラブルに見舞われたときの対処法をお伝えします。原因として考えられるのは以下の３つが多いでしょう。
- キャッシュ機能によって反映されていない
- プラグインとの相性が悪い
- テンプレートファイルに記述ミスがある
① キャッシュ機能によって反映されていない
Google Chromeなどのブラウザには、履歴を記憶しておく「キャッシュ」と呼ばれる機能があります。
一度でも開いたことのあるサイトやページなどの情報を記憶しておいて一時的にPC上に保存しておくという機能です。
この機能により、読み込み時間が短くなって閲覧するまでの時間を短くすることができます。ただし、PC上の情報を表示するので、サイトに変更があってもそれが反映されないのです。
そのため、カスタマイズが反映されていない場合はキャッシュを削除することで簡単に治ることがよくあります。
今回はGoogle Chromeの場合のキャッシュ削除方法を紹介しておきます。まずはGoogle Chromeを開き、右上のメニューから設定画面を開きましょう。
スクロールして一番下にある「詳細設定」クリックし、その中にある「閲覧履歴データを消去する」をクリックしてください。
次に表示される画面で「キャッシュされた画像とファイル」にチェックを入れた後に、「閲覧履歴データを消去する」をクリックしてください。
これで、キャッシュが削除されます。
② プラグインとの相性が悪い
こちらは、様々なプラグインを使っているとよく起こってしまいます。
特にキャッシュ系のプラグインを使っている場合は、カスタマイズが反映されないなどのトラブルが起こりやすいです。
この場合は面倒ですが、１つ１つプラグインを停止しながら確認するしかありません。
プラグインはバグなどが判明すると、こまめに最新バージョンが公開されます。プラグインを最新バージョンに更新することも忘れずに行ってください。
③ テンプレートファイルに記述ミスがある
上の２つを試しても対処できない場合は、テンプレートファイルを確認してみましょう。1文字でも記述ミスがあると、正しく反映されません。
カスタマイズしたテンプレートファイルをダウンロードしてから、テキストエディタで確認してみましょう。
WordPressのカスタマイズに関するまとめ
以上になりますが、いかがでしたでしょうか？
今回はWordPressのカスタマイズについてお伝えしました。カスタマイズができるようになると、WordPressをいじるのが楽しくなってくると思います。
また、初心者の方が体系的にワードプレスのカスタマイズについて学ぶのであれば、やはりプログラミングスクールの利用がおすすめです。最後まで読んでいただき、ありがとうございました。
