マニュアル

【STEP2】Educaテーマの初期設定を行う(見た目を整える)

このページでは、Educa(エデュカ)テーマの初期設定手順を解説します。

インストール直後の状態から、実際に学習塾サイトとして運用できる状態までを順番に進めていきましょう。

概ね1時間〜1時間半ほどで、初期設定がすべて完了します!


テーマのインストールと有効化を行う

WordPress管理画面にログインし、左メニューから 「外観」→「テーマ」→「テーマを追加」 をクリックします。

画面上部の 「テーマのアップロード」「ファイルの選択」ボタンをクリックし、
ダウンロード購入した「ZIP形式のテーマファイル(xxxx.zip)」を選択して「今すぐインストール」をクリック。

インストールが完了するまで、数分かかる場合があります。インストールが完了するまでそのままお待ちください。

ポイント

ZIP形式とは、「xxxx.zip」という形式の圧縮ファイルです。

ダウンロード購入いただいたファイルは初期状態がZIP形式のため、そのままインストールできます。

Macの場合:
テーマフォルダを右クリック → 「〇〇を圧縮」 を選択すると、
正しいZIPファイルが作成されます。

WordPressは「ZIP形式のファイル」しかアップロードできません。
解凍されたフォルダのままでは、テーマを選択・インストールできないので注意しましょう。

テーマのインストールが完了したら、自動でページ遷移します。

遷移したページで「テーマのインストールが完了しました。」という表記があるのを確認して、「有効化」をクリックします。

有効化が完了すると、「Educa - Convert WP」のテーマが追加され、有効になっていることが確認できます。


自動で作成されたページを確認する

Educaテーマを有効化すると、初期状態で以下のページが自動で作成されます。

サイト構成が完成形に近い状態でスタートできるよう設計されています。

  • TOP(トップページ)
  • 講師紹介
  • コース一覧
  • 合格実績
  • お問い合わせ
  • 無料体験
  • このサイトについて
  • 利用規約
  • プライバシーポリシー
  • 特定商取引法に基づく表記
  • リンクについて

サイト上部のヘッダーメニュー、サイト下部のフッターメニューをそれぞれクリックして、各ページに遷移・表示できることを確認しましょう。

ポイント

サイト最上部のメニューエリアをヘッダー、サイト最下部のサイト情報やメニューがあるエリアはフッターと呼ばれています。

=> 各ページが表示できない場合の対応方法はこちら

一部空欄になっていたり、ダミー表示になっている部分があるので、次の章ではそれらの設定を行なっていきます。


Educaの基本設定を行う

次に、テーマ固有の基本設定を行いましょう。

左メニューから 「外観」→「Educa設定」 をクリックします。

テーマ設定の各項目を入力していきます。

基本情報の入力のみで大丈夫です。

CTA設定・フォーム設定・ホームカルーセル設定・告知バー・PR表記・計測タグ・追加スクリプトは後ほど案内するので、一旦は初期状態のままで問題ないです。

基本情報の入力が完了したら、下までスクロールし「変更を保存」ボタンをクリックしましょう。

  • 塾名
    • 設定 > 一般で登録したサイトタイトルが初期設定で登録されています。基本的に変更不要です。
  • 住所
    • 問い合わせページ・ページ下部のフッターで表示されます。
    • ここで登録した住所に基づき、Googleマップが自動で表示されます。
  • 電話番号
    • 問い合わせページやページ下部のフッターで表示されます
  • メールアドレス
    • 問い合わせページ・ページ下部のフッターで表示されます。
    • 設定 > 一般で登録した管理者メールアドレスが初期設定で登録されています。管理者メールアドレスとサイトに表示させたいメールアドレスを別にしたい場合は変更してください。
  • LINE URL
    • 問い合わせページで表示されます。
    • LINEを使用していない場合は、空欄のままで大丈夫です。
  • アクセス案内
    • 問い合わせページ・ページ下部のフッターで表示されます。
    • 最寄駅からのアクセスなどを入力してください。

基本情報を入力すると、ページ下部のフッター・お問い合わせページに入力した内容が反映されます。

ヘッダー・フッター・トップページを整える

では基本設定が完了したので、ページを整えていきましょう。

左メニューから 「外観」→「エディター」 をクリックします。

エディター画面が開くので、左メニューから「テンプレート」をクリックします。

テンプレート一覧が表示されたら、少しスクロールして「フロントページ」をクリックします。

ポイント

WordPressでは、ページのレイアウトやデザインの骨組みを「テンプレート」と呼びます。

Educaテーマでは、トップページや固定ページの基本構成(ヘッダー・フッター・セクション配置など)が、

あらかじめテンプレートとして組み込まれています。

トップ・コース一覧・講師紹介・合格実績・お問い合わせ・無料体験ページには専用のテンプレートが用意されています。

そのため、テンプレートを編集することで、上記ページの内容を編集することができます。

ロゴを設定する

ヘッダー左側の四角いエリアを2回クリックし画像を選択することで、サイト全体のロゴを設定できます。

ロゴ設定は、すべてのページに反映されます。

コピーライトを変更する

  1. 一番下までスクロールします
  2. 先ほど設定したロゴがフッターにも反映されていることを確認しましょう
  3. コピーライトをあなたのサイト名に変更しましょう。
  4. 変更できたら「保存」をクリックします

トップページを変更する

トップページの文章や画像は、編集したい箇所をクリックすることで自由に編集することができます。

以下では、トップページで特殊な設定がされている箇所を紹介します。

以下で紹介する部分以外は自由に編集できるので、あなた好みのサイトにしていきましょう!

告知バーを設定する

サイトの一番上に告知バーを表示することができます。

告知バーを設定することで、見込み顧客にアピールしたい内容や緊急のお知らせを常に表示することができます。

テンプレートエディター画面左上の「アイコン」をクリック > もう一度左上の「アイコン」をクリックで管理画面に戻ります。

管理画面左メニュー「外観」→「Educa設定」→告知バーまでスクロールする。

告知バーの内容を設定した上で、「変更を保存」をクリックする。

サイトを確認して、告知バーが表示されていることを確認してください。

ホームカルーセルを設定する

トップページのヒーローイメージ(最初に表示される大きな画像)の下に、アニメーション付きの画像スライダー(カルーセルといいます)を設定することができます。

告知バーと同様、無料体験や合格実績など、見込み顧客にアピールしたい内容を設定しましょう。

1枚〜最大6枚まで設定できます。

最低でも3枚以上設定すると、幅広い見込み顧客の興味を惹きつけることができます。

まだ塾を始めたばかりでカルーセルに設定する内容に悩んだ場合は、

「あなたの塾の魅力を知ってもらう & 問い合わせ増加に繋げる」ために、

  • 1枚目:講師紹介
  • 2枚目:おすすめのコースページ(「コースを追加する」で設定方法を紹介します)
  • 3枚目:無料体験 or 問い合わせページ

がおすすめです。

管理画面左メニュー「外観」→「Educa設定」→ホームカルーセルまでスクロールし、「スライドを追加」をクリックします。

画像の選択・URLの入力を行います。

タイトルは実際のサイトには表示されないため、任意項目です。何を登録したのか後からわかりやすくしておきたい場合に入力してください。

リンク先があなたのサイト以外の場合は、「リンクを新しいタブで開く」にチェックをつけてください。

設定が完了したら、下までスクロールして「変更を保存」をクリックしましょう。

保存が完了したら、実際のサイトで表示を確認しましょう。

画像のようにカルーセルが表示されていればOKです。

ポイント

別のページに遷移させる場合、一般的には以下のように設定するとユーザーにとって使いやすい導線になると言われています。

  • 内部リンク(あなたのサイトのURL)に遷移させたい場合は、新しいタブを開かない
  • 外部リンク(あなたのサイト以外のURL)に遷移させたい場合は、新しいタブを開く

コース一覧(※編集の必要なし)

コース一覧は、別途コースページを作成すると、最新3件が自動で表示されるようになるため、トップページでの編集の必要はありません。

お知らせ(※編集の必要なし)

お知らせもコース一覧と同様、別途投稿ページを追加していくことで最新3件が自動表示されるため、トップページでの編集の必要はありません。

WordPressの初期設定段階では、サンプルのHello World!ページが表示されています。

これでトップページは完成です!

お問い合わせ・無料体験ページを整える

次にお問い合わせ・無料体験ページを整えます。

ページの内容の編集は、トップページと同様、テンプレートから編集可能です。

管理画面の左メニュー「外観」→「エディター」→「テンプレート」と進み、以下のテンプレート名を選択して編集してください。

  • お問い合わせページ:page-contact
  • 無料体験ページ:page-trial

お問い合わせフォームを設置する

お問い合わせ・無料体験ページには専用のお問い合わせフォームを設置することができます。

お問い合わせフォームを設置することで、見込み顧客が問い合わせをするハードルがグッと下がるので、設置することをおすすめします。

設置するには「Contact Form7」というプラグインを追加します。

ポイント

プラグインとは、WordPressに新しい機能を追加するための「拡張アプリ」のようなものです。

例えば、「お問い合わせフォームを作る」「画像を軽くする」「SEO対策を行う」といった機能は、プラグインをインストールすることで簡単に使えるようになります。

Educaテーマでは、お問い合わせフォーム作成用の 「Contact Form 7」 プラグインを使用します。

プラグインはテーマとは別の仕組みなので、テーマを変更しても機能を引き継ぐことができます。

管理画面左メニュー「プラグイン」→「プラグインを追加」→「Contact Form 7」で検索→「今すぐインストール」をクリックします。

インストール後、「有効化」ボタンをクリックすると、インストール済みプラグインのページへ自動遷移します。

Contact Form 7を探して、「設定」ボタンをクリックします。

コンタクトフォームの設定画面へ移動するので、画面上部の「コンタクトフォームを追加」をクリックしましょう。

コンタクトフォームのタイトルとフォームの内容を入力して、「保存」ボタンをクリックしてください。

フォームの内容は自由にカスタマイズできます。

デモサイトと同じにする場合は以下をコピーして、プライパシーポリシーのリンク部分だけあなたのサイトに変更してください。

プライパシーポリシーのURLは、フッターの「プライパシーポリシー」から遷移してURLを確認してください。

<label> お子様のお名前(フルネーム)*
[text* your-name placeholder "山田 太郎"]</label>

<label> メールアドレス*
[email* your-email placeholder "sample@example.com"]</label>

<label> 電話番号*
[tel* your-tel placeholder "090-1234-5678"]</label>

<label> お問い合わせ種別*
[select* your-type first_as_label "無料体験" "入塾申し込み" "学習相談" "資料請求" "その他"]</label>

<label> 学校名*
[text* school-name placeholder "学校名"]</label>

<label> 学年*
[select school-year "小学1年生" "小学2年生" "小学3年生" "小学4年生" "小学5年生" "小学6年生" "中学1年生" "中学2年生" "中学3年生" "高校1年生" "高校2年生" "高校3年生" "その他"]</label>

<p class="contact-form-text">性別*
[radio sex use_label_element "男性" "女性"]</p>

<label> お問い合わせ内容 (任意)
    [textarea your-message] </label>

<p class="has-neutral-900-color">当塾の個人情報の利用目的については、<a href="あなたのサイトのプライパシーポリシーのURL">プライバシーポリシー</a>に記載しています。</p>
[acceptance acceptance-306]個人情報保護方針に同意します。 [/acceptance]

[submit "お問い合わせする"]

正常に保存できたら、画面上部にショートコードが表示されるのでコピーしておきましょう。

管理画面左メニュー「外観」→「Educa設定」→「フォーム設定」までスクロールしてください。

お問い合わせフォーム・無料体験フォームそれぞれの入力欄に、先ほどコピーしたショートコードを貼り付けて、「変更を保存」をクリックします。

ポイント

お問い合わせフォームはいつでも修正可能です。

今回の初期設定では、2つのフォームどちらも同じ内容を表示していますが、サイト運用に慣れてきたら、別々のフォームにしたり、項目をカスタマイズしてもOKです。

お問い合わせページ・無料体験ページを表示して、お問い合わせフォームが表示されていればOKです。


合格実績・講師紹介ページを整える

合格実績テンプレート・講師紹介テンプレートの文章を変更・画像の差し替えを行なって、あなたのサイトに合わせた内容を表示させましょう。


サイドメニュー、ページ下部バナー・404ページを整える

そのほか、サイドメニュー・ページ下部バナー・404ページを整えることができます。

必要に応じて編集を行ってください。

サイドメニューを整える

サイドメニューとは、下の写真の赤枠で囲った部分です。

Educaでは、無料体験セクションの文章を変更することができます。

変更するためには、サイドメニューを含むテンプレートを開き文章を修正してください。

一箇所修正すると全てのテンプレートに反映することができます。

ページ下部バナーを整える

ページ下部バナーとは、下の写真の赤枠で囲った部分です。

初期設定では、共通の文章が各テンプレートに登録されています。

必要に応じてテンプレートごとに別の文章に変更することができます。(サイドメニューとは異なり、全てのテンプレートに反映はされません。)

404ページを整える

404ページとは、存在しないURLにユーザーがアクセスした場合に表示されるページです。

テンプレートのページ:404」で編集することができます。



固定ページを整える

そろそろ初期設定に疲れてきていませんか?

設定自体はそこまで時間はかからないかもしれませんが、新しいことを吸収しながら設定するのは意外と疲れるものです。

初期設定は途中から再開もできるので、疲れたと感じたらコーヒーブレイクをしてくださいね!


では、STEP7では固定ページを整えていきます。

前のSTEPで整えたページは、専用のテンプレートを用意しているのでそのテンプレートを編集すればOKでした。

今回の整える固定ページは、塾に限らず、どのようなサイトでも必要となるページなので、汎用的な固定テンプレートを使っています。

管理画面左メニュー「固定ページ」→「固定ページ一覧」をクリックします。

まず、「サンプルページ」と下書き状態の「プライバシーポリシー」は不要なので削除してください。

その後、「このサイトについて」「プライバシーポリシー」「リンクについて」「利用規約」「特定商取引法に基づく表記」の文章を整えましょう。

各ページは、サンプルとなる文章がすでに入っているので、必要に応じて編集してください。

ポイント

固定ページと投稿ページの違い

WordPressには「固定ページ」と「投稿ページ」の2種類のページがあります。

  • 固定ページ
    会社概要・コース紹介・お問い合わせなど、
    内容が変わりにくい“常設ページ”を作るためのものです。
    → 例:トップページ、講師紹介、合格実績、お問い合わせ、利用規約 など
  • 投稿ページ
    ブログ記事やお知らせのように、
    日付順で新しい情報を追加していくためのページです。
    → 例:「テスト対策講座を開催しました」「夏期講習のお知らせ」など

Educaテーマでは、塾の公式サイト部分(TOP・講師紹介・利用規約など)は「固定ページ」で作成し、
ニュースやお知らせは「投稿ページ」で更新する構成をおすすめしています。


コースを追加する

Educaテーマの特徴として、塾に特化したコース追加機能があります。

STEP8では、あなたの塾に合わせたコースを追加して、塾の魅力を見込み顧客に伝えましょう!

学年と科目を追加する

管理画面左メニュー「コース」→「学年」をクリックし、名前とスラッグを入力、「新しい学年を追加」ボタンをクリックします。

科目も同様に追加します。

ポイント

学年と科目は、あなたの塾のコースの状況に合わせて設定するのがおすすめです。

「小学生」「中学生」という括りでも良いですし、「中学1年生」「中学2年生」と細かく区切ってもOKです。

科目も、あなたの塾で対象にしている科目を登録しましょう。

コースを追加する

管理画面左メニュー「コース」→「新しいコースを追加」をクリックすると、コースを登録する画面へ遷移します。

以下の写真を参考に、コースを登録してみましょう!

設定できたら、右上「プレビュー」ボタンを押して、実際の表示を確認してみましょう!

上記写真(アイキャッチ画像設定あり)の場合、以下のように表示されます。

プレビューを確認して問題なければ、右上「公開」ボタンをクリックしましょう。

コースが公開されるので、トップページやコース一覧ページの表示を確認してみましょう。

テーマカラーを変更する

Educaではサイト全体のテーマカラーを変更することができます。

あなたの顧客に合ったカラーを設定することで、サイト全体の印象を向上させることができます。

管理画面左メニュー→「外観」→「エディター」→「スタイル」→「スタイル一覧」と進みます。

好きなパレットを選択すると、右側にサイトのイメージがプレビュー表示されます。

問題なければ、左下の「1個の変更をレビュー」→「保存」をクリックします。

実際のサイトの表示を確認しましょう。

お知らせ・ブログを更新する

STEP10までで、サイトの初期設定はほぼ完了しました!

あとは、日々お知らせやブログを更新していきながら、見込み顧客のアクセスを増やしていきましょう!

お知らせやブログは、管理画面の「投稿」で投稿ページを作ることで追加・更新できます。

カテゴリーを追加する

投稿ページでは、カテゴリーごとにページを分類することができます。

カテゴリーで分類することで、ユーザーにとってより親切なサイトになるので、ぜひ設定してきましょう。

管理画面左メニュー「投稿」→「カテゴリー」をクリックして、カテゴリーを追加しましょう。

投稿を追加する

カテゴリーを追加したら、実際に投稿を追加してみましょう。

管理画面左メニュー「投稿を追加」をクリックすると、投稿ページの編集画面に移動します。

編集画面で、投稿したい内容を執筆します。

下の写真では、例として年末年始休業のお知らせを作成しています。

右側メニューの「投稿」タブでは、カテゴリーやURL末尾のスラッグを変更することができます。

プレビューを確認して問題なければ、公開を押します。

トップページ・お知らせページに表示されていることを確認しましょう。

タイトルをクリックすることで、投稿記事の本文も確認できます。

初期設定は以上です!

初期設定は以上です。お疲れ様でした。

スマートフォンやタブレットでの表示も確認し、問題ないかどうかご確認ください!

-マニュアル