概説

WordPressでホームページを作るのは難しいことではありません。他のアプリケーションを操作するのと同じように、操作方法を学べば作ることができるようになります。しかし、WordPressはこれが正常に動くようにする環境設定を行わなければならず、これが敷居を高いものにしています。
ここではまず環境設定を行います。

大きく、５つの事を行います。

１，ドメインを取得する　⇒　ムームードメイン
２，レンタルサーバーを契約し、サーバーとドメインを結びつける　⇒　エックスサーバー
３，ワードプレスをインストールする　⇒　エックスサーバーの簡単インストールから
４，テーマをワードプレスにインストールする　⇒　ワードプレスのダッシュボードから
５，プラグインをワードプレスにインストールし有効化する　⇒　ワードプレスのプラグインから

これらがうまくいくと、あとはワードプレスでサイトの作り方を学ぶだけです。最近の他のアプリケーションとの違いは、ページを変更するたびに「更新」や「公開」を意識的に行わないと、ホームページにはその変更が反映されないことです。

以下に少し詳しく説明します。

1. インターネット、ドメイン、サーバーの基本理解

  • インターネット
    インターネットは世界中のコンピュータやデバイスがネットワークを通じてつながっている仕組みで、ウェブサイトもこの仕組みを通じてアクセス可能になります。
  • ドメイン
    ドメインはインターネット上の住所のようなもので、ウェブサイトのURLの「example.com」部分にあたります。独自ドメインを取得することで、サイトのURLを設定できます。
  • サーバー
    サーバーはウェブサイトのデータを保存し、インターネット経由でユーザーに提供するコンピュータです。エックスサーバーなどのホスティングサービスを利用してサーバーをレンタルし、ウェブサイトを公開します。

郵便物で説明すると、インターネットは郵便網、ドメインは住所、サーバーは郵便局、IPアドレスは緯度経度の座標と置き換えられます。
レンタルサーバーを契約するとIPアドレスが1つもらえます。ドメイン管理会社からドメインを契約すればドメインを取得できます。どちらも料金を払っている間だけ、自分が占有できます。
この2つはまったく別々のものですが、ドメイン管理会社のソフトで1対1の関係で結びつけます。これが終わると、ドメイン名とIPアドレスが同じものだというデータベースに掲載されます。住所で言うと、旭町の高橋家の郵便受けの座標は緯度００，経度００，というのが全世界に登録されることになります。そしてそこに到達する仕組みに組み込まれます。
そのあと、データが自分のサーバーに届く仕組みも郵便物と似ています。
北海道から投函された手紙を一人の郵便配達人が北海道で受け取って、宮崎までその人が持ってくる、というようなことはしませんよね。
同じ方向に行く他の郵便物とひとまとめにして、近くの施設にとりあえず送りますよね。これをルーティングと言います。そしてその塊はドンドン集まったり分散されたりして、ついに延岡の郵便局本局に集められ、そこでもルーティングが行われ、旭町だけの塊にされて、その担当の局員さんがバイクや自転車で、自宅の郵便受けまで入れてくれます。これが規約しているプロバイダに届いた、言うことになります。
ところで、自宅の郵便受けに手紙がポストされるわけですが、ここには自分や兄弟親など一緒に住んでいる人のが一緒にポストされていますよね。それから先は、各家庭で、宛先の個人名を判断して、その人が開封します。これが、家庭内のルーターです。家庭内では個人名を数字に割り当てる必要が無いように、普遍的に一意に数字を割り振ったりせず、必要な時、必要な期間だけそれを保持します。ログインさえすれば、それが実際誰なのか、パソコンやスマホは関知せず、画面にそれを展開します。

これまでの説明を子供でも分かる言葉で整理します

インターネットとは

インターネットは、世界中の「郵便網」みたいなもので、色んな情報がたくさんの道を通って目的地まで届けられています。

ドメインとは？

ドメインは、インターネット上の「住所」にあたるものです。例えば「example.com」というドメインは、インターネットで特定の家や建物にあたります。住所が分かれば、その場所に手紙を届けられるように、ドメインが分かればその情報の場所が分かります。

IPアドレスとは？

IPアドレスは、インターネット上で「住所の緯度と経度」に似ています。例えば「192.168.0.1」というIPアドレスは、ドメインが指す場所の正確な位置です。このIPアドレスが分かれば、郵便のように情報を正確な場所まで届けられるんです。

レンタルサーバーとドメインの取得

  1. レンタルサーバーを契約すると、そのサーバーに「IPアドレス」が一つもらえます。これは、自分の家やお店を構えるような感じです。
  2. ドメインは、ドメイン管理会社から「住所」を買うようにして契約し、使います。この契約が切れると、住所（ドメイン）はもう使えなくなってしまいます。

ドメインとIPアドレスの結びつけ

ドメインとIPアドレスは別のものですが、ドメイン管理会社のシステムで「この住所（ドメイン）はこの座標（IPアドレス）」と1対1に結びつけます。この結びつけができると、世界中で「example.comの場所はこのIPアドレス」という情報が共有され、インターネット上の住所録に登録されます。

データの流れ：郵便物にたとえて

データが自分のサーバーに届く流れは、郵便物に似ています。北海道から手紙を出すとき、1人の配達員が宮崎までずっと運んでくるわけではありません。手紙は、まず地元の郵便局に集まり、次の目的地に向けて一緒に送られます。この流れがインターネットの「ルーティング」です。

  1. ルーティング: 手紙が近くの郵便局に集められて、同じ方向に向かう他の手紙と一緒に次の施設に送られ、また分けられて送られる…といった具合に、どんどん近づいていきます。
  2. プロバイダへの到達: 例えば「旭町の高橋さん」の家に届ける場合、宮崎県の本局を通って延岡の郵便局に届き、そこから「旭町エリア」だけの郵便物に分けられ、担当の局員さんがバイクや自転車で届けます。これが、インターネットで「プロバイダ」に届く流れと似ています。

家庭内でのルーターの役割

手紙が「高橋さん家の郵便受け」に届いたら、今度は家の中で「誰宛てか」を確認します。家族の手紙が全部一緒に入っているので、お父さんの手紙はお父さんが、妹の手紙は妹が受け取りますよね？これが家庭内で使うルーターの役割です。

  1. 家庭内のルーター: 家の中では、お父さん用の番号や妹用の番号をつけることなく、「誰宛てか」で分けられます。コンピュータやスマホも同じように、「誰の情報か」は後で判断し、必要なときだけその人の情報を表示します。

こうして、インターネット上で住所（ドメイン名）と緯度・経度（IPアドレス）が結びつけられ、郵便物のように目的地まで正確に情報が届けられる仕組みが成り立っているのです！

概説が終わりましたので、以下少し具体的な行動を説明します

2. ドメインとサーバーの設定

  • ムームードメインでドメインを取得
    1. ムームードメインのサイトにアクセスして新しいドメインを検索します。
    2. 使用可能なドメイン名を確認し、選択して購入手続きに進みます。
    3. 登録手続きが完了すると、ドメインが有効化されます。
  • エックスサーバーの契約と設定
    1. エックスサーバーのサイトでアカウントを作成し、ホスティングプランを選択して契約を完了します。
    2. サーバーのアカウント情報を確認し、必要な基本設定（セキュリティ設定など）を行います。
  • ドメインをエックスサーバーに接続
    1. ムームードメインの管理画面で取得したドメインをエックスサーバーに接続する設定を行います。
    2. 「ネームサーバー設定」でエックスサーバーのネームサーバー情報を入力します。
    3. 反映されるまでに数時間かかることがあります。

3. WordPressのインストール

  • エックスサーバーのコントロールパネルにアクセス
    1. エックスサーバーのコントロールパネルにログインし、「サーバー管理」や「WordPress簡単インストール」のオプションを選択します。
  • WordPressを簡単インストール
    1. 「WordPress簡単インストール」を選択し、インストールするドメインを指定します。
    2. サイト名、ユーザー名、パスワード、メールアドレスを入力し、「確認」ボタンをクリックしてインストールを完了させます。
  • WordPressに初回ログインし、基本設定
    1. インストール後、WordPressのログイン画面（例：www.example.com/wp-admin）にアクセスします。
    2. ユーザー名とパスワードでログインし、管理画面に入ります。
    3. サイトのタイトルやキャッチフレーズ、表示設定、時刻設定など基本設定を行います。

4. テーマの選択とカスタマイズ

  • テーマをインストール（例：Twenty Twenty-Three）
    1. WordPressダッシュボードの左側メニューから「外観」＞「テーマ」を選択し、「新規追加」をクリックします。
    2. 「Twenty Twenty-Three」などの音楽イベントに合うテーマを検索し、インストールをクリックします。
    3. 「有効化」をクリックしてテーマを適用します。
  • テーマのカスタマイズ（色、フォント、レイアウト設定）
    1. 「外観」＞「カスタマイズ」に進み、テーマ設定画面を開きます。
    2. 「色」オプションで背景色やアクセントカラーを設定します。
    3. 「フォント」オプションで文字の大きさやスタイルを調整します。
    4. 「レイアウト」セクションから、ページの配置やデザインを調整します。

5. プラグインのインストール

  • 申し込みフォーム用プラグイン
    1. ダッシュボードの「プラグイン」＞「新規追加」を開き、フォーム作成プラグイン「Contact Form 7」や「WPForms」を検索しインストールします。
    2. プラグインを有効化し、簡単な申し込みフォームを作成します。
    3. 作成したフォームのショートコードをコピーし、「申込」ページに貼り付けてフォームを表示させます。
  • SEO対策用プラグイン（必要に応
    1. 必要に応じて「Yoast SEO」などのSEOプラグインをインストールします。
    2. インストール後、基本的な設定を行い、ページのSEO対策を実施します。

ここまでで開発環境設定が終わりました。ここからはアプリの操作説明です。簡単です。

ちなみにここまで一応概要は理解したけど、やはり契約や取得設定などが不安、敷居が高いと感じている場合、ここまでの代行を、われわれスタッフが行うことができますので、ご利用ください。
代行料金は6000円、サーバー代が年間13000円、ドメインが年間1000円くらいです。
時期やキャンペーンなどで変わってきますが、ここ数年この価格です。

いよいよWordPressの操作です

1. 固定ページの作成

  • 必要なページを作成
    1. ダッシュボードの「固定ページ」＞「新規追加」で以下のページをそれぞれ作成します。
      • トップページ：演奏会の概要やイベントの紹介文を入れるメインページ。
      • 演奏会：プログラムや出演者の詳細を掲載するページ。
      • 申込：参加申し込み用のフォームを設置するページ（後述のプラグインでフォームを設定）。
      • 会場：会場へのアクセス情報、地図、注意事項などを記載するページ。
    2. 各ページには仮のテキストや画像を入れて保存します。

2. メニューの設定

  • メニューの作成と配置
    1. ダッシュボードの「外観」＞「メニュー」を選択し、「新しいメニューを作成」をクリックします。
    2. メニュー名（例：メインメニュー）を入力し、「メニューを作成」をクリックします。
    3. 左側の「ページ」タブから「トップページ」「演奏会」「申込」「会場」を選択し、「メニューに追加」をクリックします。
    4. 各項目をドラッグ＆ドロップで順番を「トップページ」「演奏会」「申込」「会場」に整えます。
    5. 「メニューの位置」で「メインメニュー」など適切な表示位置を選び、「メニューを保存」して設定を完了します。

（付録）ページ内に配置するもの

WordPressのページ作成ツール一覧

  1. ブロックエディター（Gutenberg）
    • テキストブロック：テキストを入力する基本ブロック。
    • 見出しブロック：ページの見出しを作成するブロック。
    • 画像ブロック：画像を挿入するためのブロック。
    • ギャラリーブロック：複数の画像をまとめて表示するギャラリー機能。
    • リストブロック：箇条書きや番号付きリストを作成。
    • ボタンブロック：リンク先に誘導するためのボタンを設置。
    • 表ブロック：表形式のレイアウトを挿入。
    • 埋め込みブロック：YouTube動画やSNS投稿などの外部コンテンツを埋め込むためのブロック。
  2. クラシックエディター
    • WordPressの旧エディターで、WYSIWYG（What You See Is What You Get）形式でページの作成が可能。
    • シンプルなツールバーでテキストのフォーマット、画像の挿入、リンクの作成などが簡単にできる。
  3. メディアライブラリ
    • 画像、動画、音声などのメディアファイルを管理。
    • メディアファイルのアップロード、編集、ページ内での使用が可能。
  4. ショートコード
    • プラグインやテーマが提供する特殊な機能を簡単にページ内に挿入するためのコード（例：

      エラー: コンタクトフォームが見つかりません。

      など）。
    • よく使われるショートコードには、フォーム、ギャラリー、スライダーなどが含まれる。
  5. カスタムHTMLブロック
    • HTMLコードを直接入力して、独自のコンテンツや機能を追加。
    • より高度なカスタマイズやデザインが可能。
  6. ウィジェット
    • サイドバーやフッターに配置できるツール。テキスト、カレンダー、カテゴリ一覧、最新記事などが含まれる。
    • 固定ページの内容には直接関係しないが、全体のデザインやナビゲーションに役立つ。
  7. テーマ固有のページビルダー
    • 一部のテーマには、独自のページビルダー（例：Elementor、Divi、WPBakeryなど）が組み込まれており、ドラッグ＆ドロップで直感的にページをデザイン。
    • これによりレイアウトの自由度が増し、より洗練されたデザインが可能。
  8. リビジョン機能
    • 過去のページ編集履歴を保存しており、いつでも以前のバージョンに戻すことが可能。
  9. カスタムフィールド
    • 特定のテーマやプラグインを用いて、ページごとに独自の入力項目を追加できる機能。
    • イベントページの「日付」や「場所」など、独自情報を表示する際に便利。
  10. プラグインのブロック・ショートコード
    • Contact Form 7やWooCommerceなどのプラグインが提供するブロックやショートコードを使い、フォームやショッピングカート機能などをページに追加可能。