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