WordPressには、テーマと呼ばれるテンプレートに近いものが多数用意されています。
しかし、そのまま使うのは嫌だと感じたことや、ベースの色を変えたいと思ったことはありませんか？
そこで今回は、WordPressのカスタマイズについてお伝えします。
CONTENTS
WordPressでカスタマイズしやすいテーマまとめ
まず、WordPressの中でもカスタマイズしやすいテーマがありますので、先にそのテーマを簡単に紹介します。
どれもシンプルなデザインになっている分、デザインをカスタマイズしやすいという特徴があります。
① STORK
「STORK」は有料テーマになりますが、非常にカスタマイズがしやすいテーマです。
無料テーマをカスタマイズするとなると、ある程度CSSやPHPの知識が必要となりますので、コードを書くのが苦手な初心者の方には有料テーマはおすすめです。
② Lightning
「Lightning」は、カスタマイズしやすくするためにシンプルさを追求したテーマです。
WordPress公式ディレクトリにも登録されているテーマなので、WordPressの管理画面からインストールすることができるだけでなく、セキュリティ面でも安心して使うことができます。
③ Simplicity
「Simplicity」は、とにかくシンプルなテーマにしようという目的で作られているため、非常にシンプルなテーマです。
カスタマイズしやすいという特徴を前面に出したテーマですが、内部SEO対策やレスポンシブ対応、SNSボタンが用意されているなど、機能面も充実したテーマです。
④ Bones
「Bones」は、文字通り骨組みだけが用意されたテーマです。そのため、カスタマイズ前提のテーマなので、子テーマを作成する必要がなく、直接テーマファイルを編集できるようになっています。
ディレクトリ構成もシンプルにまとまっているだけでなく、それぞれのファイルでもコメントで編集方法が記述されているので、カスタマイズしやすくなっています。
テーマをカスタマイズした経験がない方でも操作できるように工夫されています。カスタマイズするための勉強にもなるでしょう。
初心者でもできる！WordPressのカスタマイズ方法って？
それでは、実際にWordpressをカスタマイズするにはどうしたら良いのでしょうか？
HTMLとCSSを編集する
まず、テーマに関するファイルは、「WordPressがインストールされているディレクトリ/wp-content/themes/テーマ名/」の中に入っています。
そこで、FTPを用いてサーバー上にあるテンプレートファイルをダウンロードした後、編集していていきます。
Xサーバーなどの場合は、サーバーに直接ログインしてダウンロードすることも可能です。そうしてテンプレートをダウンロード後、テキストエディタで開いて編集していきましょう。
ただし、設定ミスなどによってWordPressにログインできなくなったり、表示が崩れてしまうことがあります。設定などはミスのないように慎重に行っていきましょう。
編集が終わったら、再度アップロードして確認してみましょう。
PHPを編集する
PHPファイルを編集する場合も、FTPを用いてダウンロードした後、テキストエディタで開いて編集します。
PHPファイルも記述ミスなどがあると、思い通りの表示にはなりません。
特に「functions.php」は、記述ミスがあると正しく表示されないだけでなく、ログイン画面すら表示されなくなってしまうことがあります。
そのため、よく確認しながら編集していきましょう。
テーマのデザインを自作する場合の方法
続いて、使いたいテーマがない場合は自作することもできます。
デザインを自作するメリットとしては、同じテーマを使っている人がいないことと、自分の使いやすいようにカスタマイズできることです。
具体的な手順は以下のようになります。
- デザインを考える
- サイトマップを考える
- テンプレートファイルを作成する
この手順で作成することができます。
テーマを自作するということは自分で０から作っていくので、HTML、CSS、PHPの知識が必要です。
すべて知っていなければいけないというわけではありませんが、記述方法などは理解してから取り掛かるとスムーズに作成に入れることができます。
1. デザインを考える
まずはデザインを考えましょう。
手書きでもパソコンで作成してもどちらでも良いですが、おおよそのデザインを考えてみましょう。このときにどんな機能があると良いのかなども考えておくと良いです。
2. サイトマップを考える
サイトマップを決めることで、おおよそのサイト構成が決まってきます。
例えば、トップページからどのページに移動できるのか、メニューバーに入れる項目はどうするかなどです。こちらも手書きでも良いので、考えてみましょう。
3. テンプレートファイルを作成する
サイトの大まかな構成が決まったところで、テンプレートファイルの作成に移ります。
テンプレートファイルの作成方法は、下記の記事をご覧ください。
ちなみにこの辺りのテーマの作成方法は、プログラミングスクールのTechAacademyなどで一通り学ぶことができます。
プラグインを使ってカスタマイズする方法
続いて、カスタマイズはしたいけれど、コードを直接編集するのは抵抗があるという方も多いのではないでしょうか？
そんな方向けに、直観的な操作だけでカスタマイズができるプラグインが用意されています。
① Page Builder
https://ja.wordpress.org/plugins/siteorigin-panels/
まず「Page Builder」は、ドラッグアンドドロップでカスタマイズができ、無料で使用できるプラグインです。
作成したページは、自動的にレスポンシブ対応で作成されます。
このプラグインをインストールすると、以下のように新規投稿ページに「Page Builder」というタブが表示されます。
※プラグインの設定は特に必要ないので、有効化するとすぐに使えるようになります。
この画面で新しいページを作成することができます。カラム数の指定やウィジェットの追加なども、この画面から行うことができます。
ただし、Page Builderで作成したページを「ビジュアルエディタ」や「テキストエディタ」で編集してしまうと、編集内容が上書きされてしまうので注意しましょう。
② Elementor
https://ja.wordpress.org/plugins/elementor/
「Elementor」は「Page Builder」と同様に、ドラッグアンドドロップでカスタマイズができる無料プラグインです。
「Elementor」を使ってページを編集する場合は、新規追加ページにある「Elementorで編集」をクリックしてください。
編集は左側に表示されている要素から追加したい要素をドラッグアンドドロップするだけで実現します。カラムの幅変更なども自由にできるので、まずは自分で試しながら使っていきましょう。
カスタマイズが表示されない時の原因と対処法は？
「カスタマイズしたのに反映されていない！」ということが、時々起こります。対処するまでに何時間もかかったという方も、少なくはないでしょう。
そこで、そんなトラブルに見舞われたときの対処法をお伝えします。原因として考えられるのは以下の３つが多いでしょう。
- キャッシュ機能によって反映されていない
- プラグインとの相性が悪い
- テンプレートファイルに記述ミスがある
① キャッシュ機能によって反映されていない
Google Chromeなどのブラウザには、履歴を記憶しておく「キャッシュ」と呼ばれる機能があります。
一度でも開いたことのあるサイトやページなどの情報を記憶しておいて一時的にPC上に保存しておくという機能です。
この機能により、読み込み時間が短くなって閲覧するまでの時間を短くすることができます。ただし、PC上の情報を表示するので、サイトに変更があってもそれが反映されないのです。
そのため、カスタマイズが反映されていない場合はキャッシュを削除することで簡単に治ることがよくあります。
今回はGoogle Chromeの場合のキャッシュ削除方法を紹介しておきます。まずはGoogle Chromeを開き、右上のメニューから設定画面を開きましょう。
スクロールして一番下にある「詳細設定」クリックし、その中にある「閲覧履歴データを消去する」をクリックしてください。
次に表示される画面で「キャッシュされた画像とファイル」にチェックを入れた後に、「閲覧履歴データを消去する」をクリックしてください。
これで、キャッシュが削除されます。
② プラグインとの相性が悪い
こちらは、様々なプラグインを使っているとよく起こってしまいます。
特にキャッシュ系のプラグインを使っている場合は、カスタマイズが反映されないなどのトラブルが起こりやすいです。
この場合は面倒ですが、１つ１つプラグインを停止しながら確認するしかありません。
プラグインはバグなどが判明すると、こまめに最新バージョンが公開されます。プラグインを最新バージョンに更新することも忘れずに行ってください。
③ テンプレートファイルに記述ミスがある
上の２つを試しても対処できない場合は、テンプレートファイルを確認してみましょう。1文字でも記述ミスがあると、正しく反映されません。
カスタマイズしたテンプレートファイルをダウンロードしてから、テキストエディタで確認してみましょう。
WordPressのカスタマイズを勉強できる本
最後に、WordPressのカスタマイズを勉強できる本を3冊紹介しておきます。
本格ビジネスサイトを作りながら学ぶ WordPressの教科書 Ver.4.x対応版
本格ビジネスサイトを作りながら学ぶ WordPressの教科書 Ver.4.x対応版
企業サイトを作りながらサイト制作を学べる書籍になっています。サンプルデータも用意されていて、本格的に使いこなせるようになりたい方におすすめの書籍です。
他社が出版している書籍には掲載されていないような細かいところまで記述してあり、実践的な知識も身につけられるようになっています。
基礎からのWordPress改訂版
基礎からのWordPress 改訂版 (BASIC LESSON For Web Engineers)
1冊でWordPressの基礎的なところからテーマのカスタマイズまで記述されています。
基礎的なところよりテーマの作り方など実践的な内容が多いです。WordPressの構造や仕組みなどを理解してから手に取った方が良いです。
分量は多いですが、テーマの作り方をしっかり学びたいという方にはおすすめの書籍になっています。
WordPressデザインブック
WordPressデザインブック HTML5&CSS3準拠 (WordPress DESIGN BOOK)
WordPressのカスタマイズやテーマの自作をしたい方向けの書籍です。PHPの記述方法などは詳しく記述されていないので、PHPを扱えるようになってから読んでみることをおすすめします。
実践形式で書かれており、手順通りに進めていくとレスポンシブに対応したテーマを作成することができます。これによって、既存のテーマをカスタマイズする際もどのファイルを編集すればよいのか理解できるようになっています。
WordPressのカスタマイズに関するまとめ
いかがでしたか？
今回はWordPressのカスタマイズについてお伝えしました。カスタマイズができるようになると、WordPressをいじるのが楽しくなってくると思います。
はじめのうちは大変かもしれませんが、チャレンジしてみてはいかがでしょうか？
また、体系的にWordpressのカスタマイズを学ぶのであれば、TechAcademyやCodeCampなどのプログラミングスクールの利用がおすすめです。
最後まで読んでいただき、ありがとうございました。
オンラインマンツーマンならCodeCamp
CodeCampは期間限定でWordpressコースを提供していますが、上場企業のグループ会社が運営していることもあり、これまでに2万人以上の受講実績があります。
プログラミング未経験者でも、WordPressのインストール、サーバーの準備、テーマの設定、プラグインの導入など、WordPressでサイトを構築するためのスキルを身につけることができます。
オンラインテキストを自習形式ならTechAcademy
基礎的なPHPの知識に加えて、サイト制作における企画・設計・制作・運用方法、WordPressテーマのカスタマイズ方法、プラグインを利用した機能の追加方法、オリジナルWordPressテーマの作成方法などを学ぶことができます。
TECH ACADEMYでは申込みから1週間の間、オンライン教材・メンターによるサポート等の学習システムを無料で体験することも可能です。
