プログラミング初心者がWordPressでゼロからビジネスサイトを構築してオンラインで公開した記録
親戚のお店のためにHPを作ることになって、ちょうどプログラミング勉強中だったので私が作らせてもらうことになりました。本を買ったりググったり人に聞いたりで悪戦苦闘しつつ、なんとか企画から40日で公開までこぎつけました。作ったのはこんなサイトです。
WordPress人気の中、「作ると言ったものの、そもそも何が必要なのかすらわからない……」という当初の私のような人は少なくないと思います。そんな方の役に立てればと、ここに企画から公開までの一連のプロセスを記録しておきます。具体的なコード・操作というよりは、大まかな手順、必要な期間、用意するものについて書きたいと思います。
ちなみに当時の私は、基本的なHTML/CSSは書ける、RubyやPythonのコードも配列や変数など非常に基礎的なものならわかる、というレベルでした。
※まだまだプログラミング初心者につき、誤りがあったり、もっと良い方法があればバシバシご指摘くださいませ！！
この記事の対象となる人
- HTML/CSSは組めるが、サイトを公開した経験はない
- ちょっとWordPressサイト作ってよと言われたけど、手順や必要なものがわからない
- 初めてWordPressサイトを公開するにあたって、どの程度の手間とお金がかかるのか知りたい
買った本
■Web担当者のためのWordPressがわかる本 あらゆるビジネスサイトで使える企画・設計・制作・運用のノウハウ
サイトの企画・設計といった、コーディングを始める前の段階で主に使用しました。ビジネス用サイト作成にあたってどういったことを考えるべきなのかがわかります。
■ビジネスサイトをこれからつくる WordPressデザイン入門 サイト制作から納品までのはじめの一歩 (Design&IDEA)
コーディング〜公開までのプロセスで使いました。HTMLファイルをPHPで書き換える、ファイルの配置、ローカル(自分のPC)での開発、アップロード(オンライン上での公開)など、具体的な手順が書いてあり、これなしでの公開はありえませんでした。
参考動画
■WordPress Theme Academy with Bootstrap
Bootstrap×WordPressが学習できる、Udemyの講座です(計64レッスン、1800円)。英語かつ字幕なし。どのファイルのどの箇所を操作するのか、などはやはり本よりも動画で見る方がはるかにわかりやすいです。
※ Bootstrapとは、簡単におしゃれなサイトを作るためのパーツ集です。これがなくてもサイトは作れますが、クリックしたら展開するヘッダやスマホ対応(PCと幅が違う)など、自力では実装が面倒な機能をテンプレートを使ってサクッと作れるのが便利です。
そもそもWordPress.com? WordPress.org?
既存のテーマ(テンプレート)を使用するなら.com、自分でHTML/CSSをゼロから組んで作るなら.orgです。今回の記事は.orgでの開発です。私の場合、やりたいことに対してテーマだと自由度が低かったため、ゼロからコーディングして.orgにて公開することにしました。
(2017/6/29追記)
一般企業(商用利用)ならcom/Commercial、機関系ならorg/Organizationで、SEO的にはどちらを選んでもよいそうです。コメントにてご指摘いただきました。(追記ここまで)
※ 本やサイトを探す時は、.comなのか.orgなのか常に注意すべし。特に本は.comの方が多いです。
企画〜公開までの流れ
- 企画
- 設計
- 素材集め
- コーディング
- ローカルへのWordPressインストール
- HTML→PHPへの変換
- サーバー契約
- ドメイン取得
- サーバーへのwordpressインストール
- サーバーへのアップロード
- 固定ページ作成
- 公開
- 公開後の編集
1. 企画
- サイト制作の目的(集客？ブランディング？)
- ビジネスの戦略におけるサイトの位置づけ
- サイトで目標とする数値(予約数？来客数？)
- 必要な機能
- ターゲット顧客
- サイトイメージ(ゴージャスかシックか？基調色は？)
などを決めていきます。
サイトの出来は企画の段階で決まると言っても過言ではありません。ビジネス責任者(店長など)とよく話し合い、サイトのイメージ、サイトで実現したい来客数などを明確にしましょう。
2. 設計
企画をもとにして、必要なページを考えていきます。
例えば以下のような。
- ホーム
- お店について
- 初めての方へ
- コース・料金
- 予約
- お問い合わせ
- アクセス
同業他社のサイトをたくさん見て参考にするのがおすすめです。項目・構成・デザインなど、とても勉強になります。コーディングの準備として、サイトデザインはまず手書きでラフ、その後ワイヤーフレームを作っておきます。
ワイヤーフレームツールは、以下のようなものがあります。
PowerMockup
Cacoo
Justinmind Prototyper
私はJustinmind Prototyperを使いました。無制限(Cacooは25個が上限)かつオフラインでも作業できるので便利です。
予約システムはリクルートのAirリザーブやRESERVAなどが使えます。
サイトにカレンダーを埋め込んだり、リンクを貼って予約ページに飛ばしたりすることができます。
3. 素材集め
素材とは以下のようなものを指します。
- 文章
- ロゴ
- 写真
- 画像
サイト設計時に、どういう素材が必要かをリストアップしておきます。
特に文章については、誰が書くのかを明確にしておくのが大事です。お店の人が作ってくれるのか、それとも自分が書かねばならないのか。最初のうちにはっきりさせておいた方がのちのち楽です。
4.コーディング
2で作成したワイヤーフレームを元にコーディング。
5.ローカルサーバーへのWordPressインストール
ローカルサーバーを立ち上げるためにアプリケーションをインストールします。
WindowsならXAMPP、MacならMAMPをインストール。
ここで、なぜローカルサーバーを立ち上げる必要があるのかを説明します。
練習用のサーバー、ローカルサーバー
webサイトは、最終的にはインターネットで全世界へ向けて公開するものです。ただ、作っている過程まで全て公開するわけにはいきません。そこで便利なのがローカルサーバーです。
簡単に言ってしまえば、
ローカルサーバー：自分のPCだけで見れる
本番環境サーバー：他のPCからも見れる
です。
また、WordPressを使うには、サーバーにWordPressをインストールする必要があります。ですので、まずはローカルサーバーにWordPressをインストールして、コーディングしたものを適宜PHPに書きかえ(WordPressはPHPで動いている)、動作に問題がないか確認します。
WordPressのダウンロード
WordPressからWordPressをダウンロードして、そのファイルをローカルサーバー内に設置します。これで、ローカルサーバー上でWordPressを使うことができます。
6.HTML→PHPへの変換
4.で作ったファイルを、WordPressで動くように書き換えます。具体的には以下の3点。
- 拡張子をhtml→phpに変更(例：index.html→index.php)
- テンプレートファイルへの切り分け(header.php, footer.phpなど)
- 固定ページへの書き換え
テンプレートファイルとは
4.のコーディング時は各ページにheaderとfooterを書いていたと思います。しかしWordPressではヘッダー部分やフッター部分をテンプレートファイル化してしまうことで、ファイル1つを書き換えるだけで全ページに反映させることができます。
固定ページとは
2.設計で例として以下のページ構成をあげました。
- ホーム
- お店について
- 初めての方へ
- コース・料金
- 予約
- お問い合わせ
- アクセス
この場合、ファイルの変換は以下の通りになります。
ホーム： index.php(htmlから書き換え)
その他のページ全て：固定ページ
ブログ機能をつける場合は、投稿機能を使います。
7.サーバー契約
5.で言及したローカルサーバー/本番環境サーバー。ローカルサーバーは無料でインストールすることができますが、本番環境サーバー(オンラインで公開する用)は有料の契約をする必要があります。サーバーは色々と選択肢がありますが、私はエックスサーバーと契約しました。一番安いプランで、15,000円/年くらいです。
WordPressの自動インストール機能もあるので、WordPressのためのサーバー契約ならおすすめです。
8.ドメイン取得
webサイトを作るなら、○○.comなどのURLを使いたいと思います。そのためには、ドメインを取得する必要があります(有料)。○○の部分は、すでに他の人に取得されてさえいなければ、好きな文字列を指定することができます。エックスサーバーはドメイン取得もできるので便利です。(サーバーとドメインを別々に契約すると、また引っ付けるのがややこしそう…)エックスサーバーの場合は、ドメイン取得料は1,620円/年です。契約は1年単位。
9.サーバーへのWordPressインストール
本番環境用のサーバーへ、WordPressをインストールします。エックスサーバーだと自動インストール機能があります。手動でのインストールだと、FileZillaというアプリケーションを使って、自分でファイルを設置してオンラインで公開することができます。
自動インストールがおすすめ
ただ、私は自動インストールをおすすめします。最初はFileZillaを使って手動インストールしてみたのですが、CSSが反映されない、表示されないなどのトラブルがあって、1週間ほど詰まりました…
10.サーバーへのアップロード
6.で作ったファイル群(このファイル群をテーマという)をWordPressにアップロードします。WordPressの管理画面からアップロードすることができます。
11.固定ページ作成
6.でHTMLからPHPへ変換すると同時に、ローカルのWordPressにて固定ページも作成しました。その内容を本番環境(契約サーバー)のWordPressに反映します。画像なども「メディアの挿入」からアップロードします。
12.公開
実は、10でファイル群をアップロードした時点で、サイトはすでにオンラインで公開されています(他のPCからも見れる状態)。WordPressはサイト自体を非公開にすることはできない(記事単位ならできる)ので、非公開にしたい場合は自分で色々と設定する必要があります。
13.公開後の編集
サイトの公開はあくまでスタートにすぎません。公開した後も適宜編集・更新していく必要がありますし、改善したいところはいくらでも出てきます。
私の場合は9.で紹介したFileZillaというアプリケーションを使っています。すでに本番環境にアップロードしたファイルを個別にダウンロードしてきてローカルで編集、その後再度本番環境に再度アップロードすることで、オンライン公開しているサイトを編集できます。CSSを直したり、ヘッダーを編集したり。固定ページは、WordPress管理画面から簡単に編集できます(編集画面はとても見にくいので、間違いを避けるためにもテキストエディタを使うべし)。
おわりに
以上、私の40日間の学びを書かせていただきました。この記事が、これからWordPressを使ってみようという方のお役に立てれば、こんなに嬉しいことはありません。まだまだ初心者につき、誤りがあったり、もっと良い方法があればバシバシご指摘くださいませ。