WordPress

WordPressでカスタマイズしやすいテーマ4選!初心者に具体的なやり方とオススメ本も紹介

student 849822 1920 - WordPressでカスタマイズしやすいテーマ4選!初心者に具体的なやり方とオススメ本も紹介

WordPressには、テーマと呼ばれるテンプレートに近いものが多数用意されています。

しかし、そのまま使うのは嫌だと感じたことや、ベースの色を変えたいと思ったことはありませんか?

そこで今回は、WordPressのカスタマイズについてお伝えします。

WordPressでカスタマイズしやすいテーマまとめ

まず、WordPressの中でもカスタマイズしやすいテーマがありますので、先にそのテーマを簡単に紹介します。

どれもシンプルなデザインになっている分、デザインをカスタマイズしやすいという特徴があります。

① STORK

https://open-cage.com/stork/

STORK」は有料テーマになりますが、非常にカスタマイズがしやすいテーマです。

無料テーマをカスタマイズするとなると、ある程度CSSやPHPの知識が必要となりますので、コードを書くのが苦手な初心者の方には有料テーマはおすすめです。

② Lightning

https://lightning.nagoya/ja/

「Lightning」は、カスタマイズしやすくするためにシンプルさを追求したテーマです。

WordPress公式ディレクトリにも登録されているテーマなので、WordPressの管理画面からインストールすることができるだけでなく、セキュリティ面でも安心して使うことができます。

③ Simplicity

https://wp-simplicity.com/

「Simplicity」は、とにかくシンプルなテーマにしようという目的で作られているため、非常にシンプルなテーマです。

カスタマイズしやすいという特徴を前面に出したテーマですが、内部SEO対策やレスポンシブ対応、SNSボタンが用意されているなど、機能面も充実したテーマです。

④ Bones

https://themble.com/bones/

「Bones」は、文字通り骨組みだけが用意されたテーマです。そのため、カスタマイズ前提のテーマなので、子テーマを作成する必要がなく、直接テーマファイルを編集できるようになっています。

ディレクトリ構成もシンプルにまとまっているだけでなく、それぞれのファイルでもコメントで編集方法が記述されているので、カスタマイズしやすくなっています。

テーマをカスタマイズした経験がない方でも操作できるように工夫されています。カスタマイズするための勉強にもなるでしょう。

初心者でもできる!WordPressのカスタマイズ方法って?

それでは、実際にWordpressをカスタマイズするにはどうしたら良いのでしょうか?

HTMLとCSSを編集する

まず、テーマに関するファイルは、「WordPressがインストールされているディレクトリ/wp-content/themes/テーマ名/」の中に入っています。

そこで、FTPを用いてサーバー上にあるテンプレートファイルをダウンロードした後、編集していていきます。

Xサーバーなどの場合は、サーバーに直接ログインしてダウンロードすることも可能です。そうしてテンプレートをダウンロード後、テキストエディタで開いて編集していきましょう。

ただし、設定ミスなどによってWordPressにログインできなくなったり、表示が崩れてしまうことがあります。設定などはミスのないように慎重に行っていきましょう。

編集が終わったら、再度アップロードして確認してみましょう。

PHPを編集する

PHPファイルを編集する場合も、FTPを用いてダウンロードした後、テキストエディタで開いて編集します。

PHPファイルも記述ミスなどがあると、思い通りの表示にはなりません。

特に「functions.php」は、記述ミスがあると正しく表示されないだけでなく、ログイン画面すら表示されなくなってしまうことがあります。

そのため、よく確認しながら編集していきましょう。

テーマのデザインを自作する場合の方法

続いて、使いたいテーマがない場合は自作することもできます。

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

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

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

この手順で作成することができます。

テーマを自作するということは自分で0から作っていくので、HTMLCSS、PHPの知識が必要です。

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

1. デザインを考える

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

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

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

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

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

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

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

テンプレートファイルの作成方法は、下記の記事をご覧ください。

あわせて読みたい
workstation 405768 1920 - WordPressでカスタマイズしやすいテーマ4選!初心者に具体的なやり方とオススメ本も紹介
WordPressのテンプレートとは?作り方・使い方・カスタマイズなどを完全解説WordPressにはたくさんのテンプレートが用意されています。 けれど、「テンプレートファイルって何?」「そもそもテーマと何が違...

ちなみにこの辺りのテーマの作成方法は、プログラミングスクールのTechAacademyなどで一通り学ぶことができます。

あわせて読みたい
bb82657d7dfc39cf93e1c9ff51cb9a82 320x180 - WordPressでカスタマイズしやすいテーマ4選!初心者に具体的なやり方とオススメ本も紹介
TechAcademyのwordpressコースとは?評判やメリット・デメリットまとめもう少しwordpressについて詳しくなりたい… そんな方に向けて、上場企業が運営するオンラインのプログラミングスクール「Tec...

プラグインを使ってカスタマイズする方法

続いて、カスタマイズはしたいけれど、コードを直接編集するのは抵抗があるという方も多いのではないでしょうか?

そんな方向けに、直観的な操作だけでカスタマイズができるプラグインが用意されています。

① Page Builder

https://ja.wordpress.org/plugins/siteorigin-panels/

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

作成したページは、自動的にレスポンシブ対応で作成されます。

このプラグインをインストールすると、以下のように新規投稿ページに「Page Builder」というタブが表示されます。

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

pagebuilder - WordPressでカスタマイズしやすいテーマ4選!初心者に具体的なやり方とオススメ本も紹介

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

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

pagebuilder2 - WordPressでカスタマイズしやすいテーマ4選!初心者に具体的なやり方とオススメ本も紹介

② Elementor

https://ja.wordpress.org/plugins/elementor/

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

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

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

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

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

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

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

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

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

一度でも開いたことのあるサイトやページなどの情報を記憶しておいて一時的にPC上に保存しておくという機能です。

この機能により、読み込み時間が短くなって閲覧するまでの時間を短くすることができます。ただし、PC上の情報を表示するので、サイトに変更があってもそれが反映されないのです。

そのため、カスタマイズが反映されていない場合はキャッシュを削除することで簡単に治ることがよくあります。

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

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

2017 11 06 1 - WordPressでカスタマイズしやすいテーマ4選!初心者に具体的なやり方とオススメ本も紹介

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

2017 11 06 2 - WordPressでカスタマイズしやすいテーマ4選!初心者に具体的なやり方とオススメ本も紹介

これで、キャッシュが削除されます。

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

こちらは、様々なプラグインを使っているとよく起こってしまいます。

特にキャッシュ系のプラグインを使っている場合は、カスタマイズが反映されないなどのトラブルが起こりやすいです。

この場合は面倒ですが、1つ1つプラグインを停止しながら確認するしかありません。

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

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

上の2つを試しても対処できない場合は、テンプレートファイルを確認してみましょう。1文字でも記述ミスがあると、正しく反映されません。

カスタマイズしたテンプレートファイルをダウンロードしてから、テキストエディタで確認してみましょう。

WordPressのカスタマイズを勉強できる本

最後に、WordPressのカスタマイズを勉強できる本を3冊紹介しておきます。

本格ビジネスサイトを作りながら学ぶ WordPressの教科書 Ver.4.x対応版

本格ビジネスサイトを作りながら学ぶ WordPressの教科書 Ver.4.x対応版ir?t=fron 22&l=am2&o=9&a=B00UR988KS - WordPressでカスタマイズしやすいテーマ4選!初心者に具体的なやり方とオススメ本も紹介

企業サイトを作りながらサイト制作を学べる書籍になっています。サンプルデータも用意されていて、本格的に使いこなせるようになりたい方におすすめの書籍です。

他社が出版している書籍には掲載されていないような細かいところまで記述してあり、実践的な知識も身につけられるようになっています。

基礎からのWordPress改訂版

基礎からのWordPress 改訂版 (BASIC LESSON For Web Engineers)ir?t=fron 22&l=am2&o=9&a=4797383097 - WordPressでカスタマイズしやすいテーマ4選!初心者に具体的なやり方とオススメ本も紹介

1冊でWordPressの基礎的なところからテーマのカスタマイズまで記述されています。

基礎的なところよりテーマの作り方など実践的な内容が多いです。WordPressの構造や仕組みなどを理解してから手に取った方が良いです。

分量は多いですが、テーマの作り方をしっかり学びたいという方にはおすすめの書籍になっています。

WordPressデザインブック

WordPressデザインブック HTML5&CSS3準拠 (WordPress DESIGN BOOK)ir?t=fron 22&l=am2&o=9&a=4802610068 - WordPressでカスタマイズしやすいテーマ4選!初心者に具体的なやり方とオススメ本も紹介

WordPressのカスタマイズやテーマの自作をしたい方向けの書籍です。PHPの記述方法などは詳しく記述されていないので、PHPを扱えるようになってから読んでみることをおすすめします。

実践形式で書かれており、手順通りに進めていくとレスポンシブに対応したテーマを作成することができます。これによって、既存のテーマをカスタマイズする際もどのファイルを編集すればよいのか理解できるようになっています。

WordPressのカスタマイズに関するまとめ

いかがでしたか?

今回はWordPressのカスタマイズについてお伝えしました。カスタマイズができるようになると、WordPressをいじるのが楽しくなってくると思います。

はじめのうちは大変かもしれませんが、チャレンジしてみてはいかがでしょうか?

また、体系的にWordpressのカスタマイズを学ぶのであれば、TechAcademyCodeCampなどのプログラミングスクールの利用がおすすめです。

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