【ゼロから始める】WordPressの自作テーマで店舗サイトを作成する方法

2019年12月3日

数回に分けて初心者の方や個人経営者で自分のお店のサイトを作成しようと思ってる方を対象にゼロからWordPress(ワードプレス)の自作テーマの作成の仕方を説明しようと思います。

WorpPress(ワードプレス)などの前提知識などは他の記事に書いてあるので、読んでみてください。

【WordPreeの自作テーマ作成の必要前提知識】
WordPress(ワードプレス)のインストールの流れ【まとめ】

まず、テーマを作成するための流れを考えていきましょう、ざっくり流れをみていきます。
ちなみにすでにWordPressはインストールされてるとします。

WordPress(ワードプレス)自作テーマ作成の流れ

①サイト構成
②デザイン作成
③作成したデザインのコーディング
④コーディングしたものをWordPressに組み込んでいく作業

ざっくり大まかな流れはこんな感じです。
ではざっくりした項目をもうしこし詳細にみていきましょう。

①サイト構成

まず、初めに大事なサイトの構成を説明します。
初めての方はサイトの構成と言われもピンと来ないかもしれませんが、そのサイトに何が必要なのかをまとめる事です。

自分好きなサイトとかみてもらうとわかりやすかもしれませんが、今回は例を出してみます。

では飲食店を例にして考えてみましょう。
【飲食店A】のサイトを作ります。
飲食店Aに必要なのは、まずトップページですね、サイトの一番最初になるサイトの顔みたんページです。
次にメニュー表ですかね、次に住所・電話番号、、、お知らせ、、などなど
自分のサイトに載せたい情報(コンテンツ)を書き出してみましょう。

それをコンテンツをまとめます。

●トップページ
●メニュー表・・・メニュー表
●お知らせ・・・定休日やお得な情報など、季節のメニュー、割引情報などお知らせ用
●ブログ・・・重要ではない日々更新するブログ
●アクセス・・・住所、電話番号、マップ
●SNSリンク・・・Facebook、Instagram、Twitterへの誘導リンク

こんなざっくりこんな感じでしょうか、、、
これは例なので他にも載せたい情報はあるかと思います。
とりあえず今はこれで説明していきます。
今後増えていくかもしれません。

ここで重要なのは、ここまでで載せたい情報の項目を確認して、日々積み重なって更新されるコンテンツはどれかを考えてみます。

この例では、【お知らせ】と【ブログ】がそれに当てはまりそうですね。
その他の情報は固定ですね。固定というのは日記みたいに積み重なって行かない良い事です。
住所も基本は一つですし、電話番号などもメニュー表もメニュー表としては一つですよね。
メニュー表の中身が変更されることはあっても、、、

これが理解できると、WordPress(ワードプレス)のコンテンツ管理には【投稿ページ】と【固定ページ】があり、それに当てはめることができます。

【投稿ページ】
●ブログ
●お知らせ

【固定ページ】
●アクセス
●メニュー表

【投稿ページ】と【固定ページ】の機能を使うのはこんな感じでしょうか
●トップページとSNSリンクについてはとりあえず置いておきましょう。

このように構成を考えると次の流れのデザイン作成をするときに必要なページ数がわかってくると思います。

では次の作業のデザイン作成にいきましょう。

②デザイン作成

次にデザインの作成です、①の【飲食店A】で引き続き考えていきます。
デザイン作成は配置などを考えます。これをワイヤーフレームと言います。

それが決まったらデザインをしていきます。
なので、ここでの流れは
①ワイヤーフレームの作成
ワイヤーフレーム編はこちらに記事にしてます。
【ゼロから始める】WordPressの自作テーマで店舗サイトを作成する方法【ワイヤーフレーム編】
↓↓↓↓↓↓↓↓↓↓↓↓↓↓
②デザインの作成

このようになります。
ここは別記事にします。


③作成したデザインのコーディング

デザインを元にHTMLとCSSなどでコーディングしてきます。
コーディングははじめは難しいかもしれませんが、慣れるとある程度は簡単できます。
これも後ほど別記事でご紹介します。

④コーディングしたものをWordPressに組み込んでいく作業

コーディングデータをWorPree(ワードプレス)に組み込んでいきます。
③の作業を飛ばしてそのままコーディングしながらWordPressに組み込んでいく方法もありますが、初心者の方とかはわかりにくいかもしれません。
その理由は、コーディングしながら組み込んでいくには、HTML、CSS、PHPなど同時に打ち込まないといけないからです。
HTMLとCSSでコーディングしてからWordPressに組み込んでいくと部分を置き換えていくだけなのでPHPの知識などがなくてもコピペなどでいけちゃいます。

このようにこの記事ではWordPress(ワードプレス)の自作テーマの流れについてざっくり説明しました。
これから実際に作業をしていきたいと思います。