WordPressでサイト作成（独自デザイン）

1-1. ローカル環境の作成

1. ローカル環境の作成

   1. Localを立ち上げ、左下の【＋】ボタンをクリックします。

      

   2. [Create a new site]が選択されている状態で、そのまま【Continue】を押して進みます。

      

   3. サイト名で「moen」と入力して、【Continue】を押して進みます。

      

   4. [Preferred]が選択されている状態で、そのまま【Continue】を押して進みます。

      

   5. 【Wordpress username】と【Wordpress password】に下記を入力して、【Continue】を押して進みます。

      ユーザー名

      admin

      パスワード

      password

      

   6. サイトの作成が始まります。
      途中で下記のような入力を求められたら自身のMac/Winにログインするときに入れるパスワードを入力して【OK】を押してください。
      (※ 先ほど設定時に入力したパスワードではないので注意！)

      

   7. 少し待って下記のような表示が出たら作成完了です。

      

2. 初期設定

   1. 【WP Admin】ボタンを押して管理画面へログインします。

      

      ログイン時のID/パスワードは先ほど設定した下記のものを入れてください。

      ユーザー名

      admin

      パスワード

      password

      Chromeではログイン後下記の表示が出ることがありますが、現状はインターネット上ではなくPC内で環境を作っているだけなので気にしなくてOKです。
      【閉じる】を押して閉じてください。

      

   2. 左メニューから【Settings > General】をクリックして、下記項目を設定します。

      • 言語設定(Site Language)で「日本語」に変更
      • タイムゾーン(Timezone)を「UTC+9」に変更
      
      

1-2. スターターテーマの適用

1. テーマ作成のベースとなる【スターターテーマ】を下記からダウンロードします。

   スターターテーマのダウンロード

2. ダウンロードしたファイルを解凍し、フォルダ名を【starter】→【moen】に変更します。

3. Localのサイトフォルダの中にある【wp-content】フォルダの中にある【themes】フォルダ内に【moen】フォルダごと移動します。

   
   Localのサイトフォルダの場所

   Localアプリを立ち上げて、サイト名のすぐ下にある【Go to site folder】をクリックします。

   フォルダが開いたら【app > public】を開いたところがサイトフォルダになります。

   

4. VSCodeを開いて2.のmoenフォルダを開き、その中のstyle.cssファイルを開きます。

   

5. Theme Name: に続く名前を【Starter Theme】→【Moen】に書き換えて保存します。

   

6. WordPressの管理画面を開き、【外観】→【テーマ】を選択し、【Moen】を有効化します。

   

1-3. HTMLコーディングファイルの準備

1. コーディング済みの下記ファイルをダウンロードして解凍します。

   HTMLコーディングファイルのダウンロード
   

2. 解凍した【moen_complete】のフォルダごと1-2で設置した【moen】フォルダ(wp-content > themes > moen)に移動します。

3. 【moen_complete】のフォルダ内の【assets】フォルダを【moen】フォルダ内に移動します。

最終的に下記のような構成になればOKです。

3-1. TOPページページ用テンプレートファイルの作成

テーマフォルダ直下に【front-page.php】のファイル名で新規ファイルを作成します。

中身は一旦HTMLコーディングファイルのindex.htmlをそのままコピペで全置き換えします。

3-2. WordPressテンプレートの基本ルールを設定

WordPressで独自テンプレートを作る場合、WordPressルールとして下記3点は必ず設定する必要があります。

追加したコードはそれぞれ下記のようになります。

3-3. header内アセットパスの変更

WordPressではCSSやJSのパスが絶対パスまたは相対パスの記述では読み込みできないため、下記のように書き換える必要があります。

3-4. 画像パスの変更

画像についても3-3と同様に全て書き換えます。

4-1. ヘッダーの切り離し

header.phpを新規作成してテーマフォルダ直下に保存します。
ファイルの中身はfront-page.phpから下記部分（コード先頭から共通ヘッダー終わりまで）をコピペ保存します。

header.php

4-2. フッターの切り離し

footer.php

4-3. front-page.phpの変更

切り離したヘッダー/フッターをfront-page.phpで読み込むために関数を追記します。

ヘッダー読み込み関数

フッター読み込み関数

これらを反映したfront-page.phpは下記のようになります。

5-1. WordPress管理画面上で固定ページを追加

固定ページ > 新規固定ページを追加 から下記内容でページを追加します。

5-2. テンプレートファイルを作成

テーマフォルダ直下にpage-about.phpのファイル名でテンプレートファイルを作成します。

5-3. page-about.phpにコード記述

中のコードにはHTMLコーディングしたabout.htmlのmainタグ内コードをコピペして、front-page.phpと同様に下記修正を行います。

• 先頭と末尾にget_header/get_footerの記述
• 画像パスの書き換え

6-1. WordPress管理画面上で固定ページを追加、テンプレートファイル作成

店舗案内ページ作成と同様の手順でコード反映まで行います。

6-2. フォームタグ部分の動的反映

フォーム部分は特殊なコードが必要なため、HTMLコーディングファイルのformタグ部分そのままでは動かず、 動作させるにはWordPressにて【動くフォームのコード】を生成して反映させる必要があります。
WordPressが生成するフォームタグを反映させるには、formタグ部分を下記に示す特殊なコードに置き換えます。

具体的な手順は、page-contact.phpの内容を書き換えます。
formタグ部分を丸ごと削除して、下記コードに置き換えて更新します。

↓

6-3. Contact Formプラグインの追加と設定

6-4. お問い合わせ受付時の挙動設定

お問い合わせフォームの送信ボタンを押した際の挙動を設定します。

メール設定

お問い合わせフォームの送信ボタンを押した際に、管理者にメールが届くように設定します。

左メニューから、お問い合わせ > お問い合わせ を開き、【メール】タブを選択します。

内容を変更します。ここでは通常のテキスト記述に加えて【メールタグ】が使用できます。

まず【送信先】【送信元】【題名】【追加ヘッダー】の内容を変更します。

フォームで設定した項目がメールに記載されるよう、メール本文を下記のように修正します。

変更を保存して確定して完了です。

ここまでの設定は管理者宛に送るメールのみですが、フォーム入力してもらったユーザーに確認メールを送ることもできます。
その他詳しい設定は下記ページを参考にして下さい。

【完全版】Contact Form 7の基本と使い方まとめ

6-6. プレビュー確認

お問い合わせページ(http://moen.local/contact)を開き、ページの表示とお問い合わせフォームの動作をを確認します。

Localの環境下では、このフォームからお問い合わせを行っても宛先をどこに設定した場合でも実際のメールは飛びません。

Localでは下記のメールアプリにて受信する仕組みになっており、下記手順でメール内容が確認できます。

1. Localの設定画面上で【Tools】タブを選択
2. Mailhogの画面が開いたら左メニューから【Inbox】を選択
3. 送信したお問い合わせフォームに対応するメールが表示されるので、そのメールを選択

7-1. Custom Post Type UIプラグインのインストールと投稿タイプ追加

投稿型ページを作る場合は【カスタム投稿タイプ】と言われる「投稿ページ」を作成する機能を利用します。

手順はいろいろありますが【Custom Post Type UI】というプラグインを使うことで簡単に設定できます。

1. 管理画面から【プラグイン > 新規追加】を選択し、「Custom Post Type UI」をキーワード検索してプラグインを追加します。
   追加したらそのまま【有効化】ボタンをクリックして有効化します。

   

2. 有効化すると左メニューに【CPT UI】のメニューが追加されます。その項目にマウスオンして、【投稿タイプの追加と編集】をクリックして進みます。

   

3. 下記の内容でカスタム投稿タイプ情報を入力します。

   投稿タイプスラッグ

   news

   複数形のラベル

   お知らせ

   単数形のラベル

   お知らせ

   

4. 【投稿タイプを追加】をクリックせずにそのまま下までスクロールして、以下2箇所を変更します。

   アーカイブあり

   False → True

   サポート

   タイトル / エディター / アイキャッチ画像 / 抜粋 の4つをを選択

   

   :

   

5. ページ下部の【投稿タイプを追加】ボタンをクリックして登録します。

   

6. 左側メニューに【お知らせ】項目が追加されていればOK。

   

7. 左メニューから【設定 > パーマリンク】を開き、何も変更せずそのまま【変更を保存】をクリックして完了。

   

7-2. テンプレートファイルの作成(archive-news.php)

記事一覧ページはarchive-xxxx.phpの名前でテンプレートファイルを作成します。(xxxxはスラッグ名)
お知らせ記事のスラッグ名はnewsで設定しているので【archive-news.php】の名前で新規作成します。

テンプレートファイルの中身は一旦コーディングファイルのnews-list.htmlをコピペして、前述の店舗案内ページなどと同様の手順で下記を編集します。

• 先頭と末尾にget_header/get_footerの記述
• 画像パスの書き換え

7-3. テンプレートファイルのコード修正

テンプレートファイル内の下記部分を以下のように置き換えます。

↓

7-4. ページネーションの設定

ページネーションとは、ページを切り替えるためのページ番号や【前へ】【次へ】といったリンクです。

コード内の下記部分をページネーション用コードに置き換えます。

↓

7-5. コンテンツの反映確認

管理画面から【お知らせ】コンテンツを作成して、一覧に反映されることを確認します。

8-1. テンプレートファイルの作成

記事個別ページのテンプレートファイルはsingle-xxxx.phpになります。
お知らせ一覧ページと同様の手順でテンプレートファイルを作成します。

記事一覧ページと同様に下記設定をします。

• 先頭と末尾にget_header/get_footerの記述
• 画像パスの書き換え

8-2. テンプレートファイルのコード修正

テンプレートファイル内の下記部分を以下のように置き換えます。

↓

8-3. ページ確認

管理画面から記事を投稿して、お知らせページに内容が反映されていることを確認します。