WEBサイトのデザインやレイアウトを決める、 WordPressのテーマを追加する2つの方法 を紹介します。
ワードプレスを利用することで、プロのデザイナーが設計したWEBデザインを、簡単に自分のWEBサイトに導入することができます。
その方法が ワードプレスのテーマ(Theme)を変更することです。
ホームページ制作会社の中には、”お客さん専用のホームページを設計します”(専用テーマを作ります!)と謳っているのに、実は”お客さんには内緒”で、配布されているテーマを名前を変えて利用しているダケのケースもあります。
つまり、テーマを変更するのはとても簡単ですが、専門業者も利用するくらい便利で、効果が絶大ということです。(無料テーマがウン十万に変わりますからね・・・。質の悪い業者が増えるのに納得ですね。)
WordPressのテーマを追加する方法は2つ
WordPressのテーマを追加する方法は2つあります。
一つは、ワードプレスが持つストックから追加する方法。もう一つは、開発が作成したテーマファイルをアップロードしてインストールする方法です。
前者は基本的に無料でインストールできて、追加機能やプロ版が有料で購入することができます。
後者は、有料テーマを購入した場合や業者が作成したテーマファイルをインストールする場合に利用するケースが多いです。
今回は、それぞれについての操作手順を紹介していきます。
WordPressのテーマを追加する2つ方法を紹介 (ざっくり版)
ビデオで紹介した2つの方法で、ワードプレスのテーマを追加することができます。
ビデオをご覧になれない方や、もう少し詳しい説明が必要な方は、当記事を読み進みください。(ビデオの内容の補足を含めた内容になります。)
WordPressのストックテーマから追加する方法
テーマを変更する前に、視覚的なデザインがどう変わるのか?をチェックするために、デフォルトで設定されているテーマを確認してみます。
2021年10月現在、デフォルトで設定されるテーマはTwenty Twenty-Oneというテーマです。
もしかしたら、あなたのサイトのデフォルトテーマとは違うかもしれませんが、テーマの追加や変更には何も支障がありませんので、気にしなくて大丈夫です。
テーマを変更するために、まず管理画面の 外観>テーマ をクリックし、所有テーマ一覧を表示します。
ここで、一番左上にあるテーマが、現在設定されている(現在使用している)テーマです。
テーマを新しく追加するには、新規追加をクリック。すると、ワードプレスがストックしている、テーマの一覧が表示されます。
テーマの数が4千個を超えているので、全部をチェックするのは現実的ではありません。ですから、人気のテーマ、最新のテーマ、お気に入り、特徴フィルターといった、絞り込みタブを利用して、イメージするデザインや希望にあうデザインのテーマを探すことをお勧めします。
特徴フィルターでテーマを絞り込む
特徴フィルターを使えば、”件名”、”機能”、”レイアウト”という条件でテーマを絞り込むことができます。
例えば、”件名:写真”、”機能:ブロックエディターのスタイル”、”レイアウト:グリットレイアウト”にチェックを入れ、”フィルターを適用”をクリックすると、このように、条件に一致したテーマだけが表示されます。
この機能を使えば、希望するテーマを見つけられる可能性がグッと高くなります。
テーマをプレビューしてイメージをチェックする
気になるテーマを見つけたら、プレビューで、そのテーマを設定したらどんなイメージになるのか?をチェックすることができます。
ただ、プレビュー機能を使う際には注意点があります。
それはテーマ画像とは全然違う、非常にシンプルなイメージになってしまうテーマもあるということです。
これ「テーマイメージ詐欺!」って思ってしまうかもしれませんが、実は理由があります。
それは、こういったテーマは”後からデザインテンプレートをダウンロードして使うことが前提”のテーマであるため、テンプレートをダウンロードしないと、プレビューイメージのようにシンプルなデザインになってしまうわけです。
「デザインテンプレートを利用すれば、テーマ画像のようなサイトを作れます」ってことですね。
このことを知らずにテーマイメージ(画像の部分)だけを見てテーマをインストールした人は、有効化した後に、テーマイメージと違うシンプルなデザインになっているので、「エラーが起きた!」と勘違いしたり、「騙された!」って気持ちになってしまうかもしれませんね。
テーマの中には、プレビュー機能が全く参考にならないテーマも多いので注意してください。
Astraテーマをインストールする
このAstraテーマをインストールするには、”プレビュー”の横にある”インストール”をクリックします。
インストールが完了したら、忘れずに”有効化”をクリックしてください。この”有効化”というのは、テーマを設定すること(使用すること)を意味します。
すると、所有しているテーマ一覧の画面に遷移します。今有効化したAstraテーマが、一番左上に表示されています。
ちなみに、サイトの見た目がどう変わったのか?というと、デフォルトの薄緑色のデザインから、先ほどプレビューでみたように、シンプルなサイトデザインに変更されています。
説明したように、テーマイメージと比較すると、全然違うテーマにしか見えないですよね(苦笑)
テーマによっては、有効化することで、管理画面のメニューの中に、そのテーマに関するメニューが追加されるものもあります。
そのメニューをクリックしてみると、テーマ設定に関するメニューが表示されます。このテーマの場合、”スターターテンプレート”をインストールするプラグインがありますので、それをインストールしてみましょう。
スターターテンプレートを設定する | Astraテーマ
このAstraテーマは、ビルダーという、 WordPressのサイトデザインをカスタマイズできるプラグインに、複数対応しています。
ElementorやBeaver Builderは世界的に有名なビルダープラグインなので、使い勝手がいいと思います。
ただ今回は WordPressのデフォルトのエディターであるGutenbergを選択します。
するとインストールできるテンプレートの一覧が表示されます。
試しに一つのテンプレートを選択します。
このテンプレートに含まれる固定ページのデザインを確認することができます。
ここで表示されている全てのテンプレートをインストールするには、”インポートコンプリートサイト”をクリックします。
ちょっとしたアンケートのようなものがポップアップされます。
すべて英文ですが、聞いてくる内容は、ワードプレスの熟練度とサイトを作る目的です。
熟練度はbeginner(初心者)とintermediate(中級者)とexpert(上級者)の中から選択します。
サイトを作る目的は、Myself/My company(個人もしくは自社のため)とMy client(お客さんのため)のどちらかを選択します。
Advanced Options(高度なオプション)をクリックすると、インポートできるコンテンツやウィジェットなどの項目を減らせたりするみたいですね。よくわからない人は、何も変えずに、デフォルト設定でインストールするのが無難です。
選択が終わったらnextをクリックします。
to get access to exclusive starter templates,themes and updates,enter your details below(専用のスターターテンプレート、テーマ、アップデートにアクセスするには、以下に詳細を入力してください)と表示されるので、興味がある方は、名前とメールアドレスを入力し、Submit and Start Importingをクリックしてください。
興味がなければ、Skipすることもできます。今回はスキップします。
テンプレートのインポートが開始されます。インポートが完了すると、英文で色々書いてありますが、そこは気にせずにView siteをクリックすれば、サイトがどう変わったか?を確認できます。
サイトのデザインがシンプルなものから、先ほど選んだ通りのデザインに変わりました。
ただ、このままでは自分のサイトとは言えない状態なので、文字や写真を変更する必要があります。
このページを編集するには、”固定ページを編集”をクリックします。
すると、固定ページの編集画面になるので、編集したい場所をクリックすれば、簡単に文字などを編集することができます。
(ちなみに、ビルダー選択画面で違うビルダーを選択していた場合、ちょっと違う画面になっているかもしれません。)
また、スターターテンプレートをインストールしたことで、固定ページ一覧に、いくつかのテンプレートが追加されています。
投稿の方でも、いくつかサンプル記事が追加されています。
以上、Astraテーマの有効化と、スターターテンプレートをインストールする方法を紹介しました。
WordPressにテーマをアップロードして追加する
次は、ワードプレスのテーマをアップロードして設定する方法を紹介します。
この方法は、有料のテーマを利用する場合や業者が”お客さん専用”に制作したテーマ、それからネットで配布しているフリーテーマ(無料のテーマ)利用する場合に使います。
手順は、 WordPressがストックする”テーマ一覧”画面までは同じです。そして、その次に、テーマのアップロードをクリックします。
「ZIP形式のテーマファイルをお持ちの場合、こちらからアップロードしてインストールまたは更新できます」と記載してあるので、ZIP形式のテーマファイルを選択し、”今すぐインストール”をクリックすれば、インストールが開始されます。
インストールが完了したら、忘れずに”有効化”をクリックしてください。そうすれば、このアップロードしたテーマが設定されます。
Themifyテーマのデモデータをインポートする
今回ZIPファイルでインストールしたのは、Themifyが提供している無料テーマ、Themify Simpleというテーマです。(Themifyはエジカルがオススメしているテーマ開発者です)
Themifyテーマの場合、テーマを有効化すると管理画面の直下にメニューが追加され、Themify設定画面に遷移します。
デモデータをインポートしますか?と表示されるので、「Yes,Import」(インポートします)をクリックして、デモデータをインポートします。
続けて、「時間がかかるけど全てのデモ画像もインストールしますか?」と表示されるので、チェックが入っている状態で「Proceed Improt」(インポートを続行します)をクリックします。
すると、本当に、完了までちょっと時間がかかります(笑)
インポートが完了したら、サイトがどう変わったのか?を確認しましょう。
無料のテーマですけど、結構かっこいいですね。
ただ、このままで自分のサイトとして使えないので、文字や画像の編集が必要になります。
このページを編集するには、”Turn On Bilder”をクリックします。すると、フロントエンド画面(実際に表示されるイメージ)を確認しながら編集することができます。
Themifyテーマに含まれているThemifyビルダーを使えば、マウスでコンテンツをドラッグして移動させることもできます。
もちろんバックエンド画面での編集もできますが、どちらかというと、カテゴリーやタグの設定、パーマリンクの設定といった、そのページを公開するにあたっての最終調整的な目的で利用するケースが多いです。(私の場合)
Themifyテーマも、デモデータをインポートすると、複数のデモページがインストールされますので、それを自由に編集して使うことができます。
余談ですが、ThemifyテーマのデモデータをみることでThmifyビルダーの使い方や、デザインの設計方法を勉強することもできるので、そういう目的で利用するのもありです。
テーマ変更は簡単だけど結構大変!?
ということで今回は、 WordPressのテーマを追加して変更する2つの方法を紹介しました。
テーマ選びはサイトを運営するうえでとても重要です。テーマを追加して変更するのはとても簡単なので、気軽にデザインを変えることができる・・・と思うかもしれませんが、じつは、便利な機能が使えなくなったり、公開済みのコンテンツや記事のデザインが崩れたりするリスクもあります。
ですから、テーマを追加したり変更するのは簡単ではあるものの、一度設定してサイトの運営を始めたら、なかなか変えにくいという側面もあります。
だから、テーマ選びはとても重要なのです。
ネット上には、オススメのテーマを紹介している記事が多いのでそれを参考にするのもいいですけど、アイフィリエイト系(広告収入を目的として紹介している)の記事が多くて、本当にオススメしているものなのか?は定かではありません。
エジカルがオススメしているThemifyもアフィリエイトしていますが、他とは違って、実際にこのサイトもThemifyで作成しているように、本気でオススメしています。
まぁ、Themifyテーマについての紹介は別途するとして、とにかく、テーマ選びは重要で、大量にあるのテーマの中から選ぶのにはとても時間がかかります。
すでに公開しているサイトのテーマを変更する場合には、デザインの修正や使える機能、使えない機能の確認なども必要なので、テーマの変更は一瞬ですが、その後の修正に結構な時間がかかります。
ですから、初めてテーマを設定する時だけではなく、テーマを追加して変更する際にも、テーマ選びはよく検討してから選ぶようにしましょう。