WordPressテーマ「KASHIRA」でサイトをつくる手順をまとめています。
はじめてサイトを作る方でも手順通りに進めていくことでサイトを公開できます。
サイトを立ち上げるまでの流れはこのような感じです。
100%完成させてからのサイト公開にこだわる必要はありません。
飲食店のサイトであれば、以下の内容があればサイトを公開できます。
最低限必要なコンテンツ
・ロゴ画像 or サイト名
・トップページのヘッダー画像または動画 × 1つ
・アバウトページ（サイトの概要・アクセス トップページに入れてもOK） × 1枚
WordPress環境の用意
当サイトのテーマ設定マニュアルでは、テーマをインストールした状態からあとの設定手順を解説しています。
「まだWordPress環境が用意できていない」という方は以下の順番で準備していきましょう。悩む時間を含めるとしても、丸1日あれば準備できるかと思います。
- ドメインを取得
- サーバーを契約
- WordPressのインストール
- テーマのインストール
ドメインの取得
ドメインとはインターネット上の住所です。「soba-kashira.jp」のようにあなたのサイトの住所（URL）を最初に決めましょう。
サーバーの契約
サーバーとは、インターネット上の土地です。月額数千円程度でレンタルするのが一般的です。
WordPressの簡単インストール
ほとんどのレンタルサーバーで、WordPressの簡単インストール機能が搭載されています。
下記で「エックスサーバー」「さくらレンタルサーバ」のインストール手順を解説しています。
WordPressの簡単インストールの作業自体は、1分ぐらいで終わります。
SSL化
WordPressを無事インストールできたら、SSL化という作業も最初に済ましておきましょう。
SSL化とは
Webサイトとそれを閲覧するユーザーの通信を暗号化する仕組み。単にサイトのセキュリティ強化だけでなく、ユーザーに安心して訪問してもらうためにも必要です。
こちらもサーバー側で設定できますので、サーバー契約時に行なっておくとスムーズです。詳しい手順はこちらで解説しています。
テーマのインストール
WordPressの管理画面（ダッシュボード）にログインして、テーマをインストールします。
マイページの「ダウンロードと帳票」からテーマファイル（zip形式）をダウンロードしておきましょう。
STEP1：必須設定
まずは、「表示設定」「TCDクラシックエディタプラグインのインストール・有効化」を行います。表示されるメッセージでボタンをクリックするだけで設定完了です。
>> テーマの初期設定
余裕があれば、次の記事にある設定も済ませておくといいでしょう。できるものだけでもOKです。
STEP2：サイトの基本設定
まずはサイト全体に反映される基本設定から行っていきましょう。サイトのベースとなるカラー・フォント（字体）などを設定します。上記画像では、当デモからアクセントカラーだけを変更しています。それだけでもサイトの雰囲気が変わることがわかります。
設定順の指定はありません。項目名をクリックして詳しい設定方法をご覧ください。
| アクセントカラー | サイト全体で使用するアクセントカラーを設定します。 |
| フォント | サイト全体のフォントタイプやフォントサイズを設定します。 |
| ロゴ | ロゴ（画像もしくはテキスト）を設定します。 |
| アイキャッチ | カーソルを合わせたときの画像アニメーションなどを設定します。 |
| SNS | 記事内のシェアボタンやSNSリンクを設定します。 |
| レイアウト | ヒーローヘッダーとロゴの位置を設定します。 |
| お問い合わせボタン | 記事本文やドロワーメニュー内で表示できる「お問い合わせボタン」を設定します。 |
一度仮で設定しておき、最後にサイト全体を確認しながら調整するのがオススメです。
STEP3：下層ページの作成
各投稿タイプ（ページ作成機能）のエディタで「下層ページ」を作成します。WordPressの各投稿タイプとその使い分けについては以下の記事をご覧ください。
↓項目名をクリックすると詳しい設定方法をご覧いただけます。
| ページ作成機能名 | 用途・目的 |
| 投稿 |
ブログ記事の作成 >> エディタの使い方（各投稿タイプ共通） |
| お知らせ | ブログとは別に、告知やお知らせを作成したい。 |
| お品書き | メニュー・サービス内容を紹介したい。 |
| 固定ページ「デフォルト」 （当ぺージ） |
アバウト・アクセスページなど、時系列がない独立したページを作りたい。 |
| 固定ページ「ランディングページ」 | 広告出稿用などにLP（ランディングページ）を作りたい。 |
| 投稿者ページ | 投稿者（ユーザー）ごとの記事一覧ページを作成したい。 |
| 投稿者一覧ページ | 投稿者（ユーザー）の一覧ページを作成したい。 |
はじめからすべて使う必要はなく、後から拡張していけます。用途・目的に合わせて各コンテンツを作成していきましょう。
STEP4：トップページ
KASHIRAのトップページは「ヒーローヘッダー」と「メインコンテンツ」で構成されています。
| ヒーローヘッダー | PC閲覧時、画面の左右どちらか半分に常に表示でます。画像スライダーまたはmp4動画を表示できます。 |
| メインコンテンツ | 導線づくり・サイトの雰囲気を演出するのに最適なコンテンツを用意しました。 |
「STEP3」で作成した下層ページへの導線を考えて作成します。記事内容が増えてきたらコンテンツを追加・並び替えして拡張していきましょう。
STEP5：ヘッダー・フッター
ヘッダーとフッターを設定していきます。トップページと同様、下層ページへの導線をまとめることを意識して作成するとよいでしょう。
メニューの作成
ヘッダーとフッターには「メニュー」を表示できます。外観 > メニューをひらいて、「STEP3」で作成した下層ページへのリンクをメニュー項目として登録します。
メニューの詳しい設定方法はこちらの記事を参考にご覧ください。
メニューを設定できる箇所はこちらです。
| ドロワーメニュー | PC時のドロワーメニューに表示される |
| モバイル用メニュー | スマホ時のドロワーメニュー内で表示される |
| フッターメニュー | フッターに一行で表示される |
メニュー項目は、多すぎても少なすぎても良くないです。
・少ない場合は、メニューに登録できる下層ページを充実させる。
・多い場合は、子メニューで階層化して整理する。
そうすることで、訪問者に親切なだけでなくサイトのクオリティがアップします。
ヘッダー・フッター
メニューを登録できたら、ヘッダー・フッターに関する設定を行います。
↓項目名をクリックして設定方法を確認してください。
それぞれ設定時のコツがあります。ロゴのサイズ感、メニュー項目の多さ、文字量のバランスなど。下記記事も参考に設定してみてください。
>> ヘッダーバーでやってはいけないこと5選
>> フッターの役割、やってはいけないこと
STEP6：その他の設定
ここからの設定は必須ではありませんが、よりハイレベルなサイトを目指す場合にはぜひご活用いただきたい機能です。
| 設定・オプション名 | 用途・目的 |
| ウィジェット | サイドバーに「ウィジェット」を表示できます。 >> WordPressのウィジェットの使い方 |
| 汎用クラス | 余白・改行位置等の細部の微調整 |
| SEO | metaタグ・OGPの設定 |
| 404・検索結果ページ | 404・検索結果ページのカスタマイズ |
| 保護ページ | パスワードつき保護ページのカスタマイズ |
| ロード画面 | ページ読み込み中のロード画面設定 |
| スクロール時のエフェクト | サイト内のエフェクト（アニメーション）のオン/オフ |
| カスタムCSS・スクリプト | CSSを用いた調整、トラッキングタグ埋め込み |
| 子テーマ | テーマファイルをカスタマイズされる方向けに、子テーマを配布しています。 |
中でも「ウィジェット」は、各記事への導線となるコンテンツです。下層ページが充実してきたら、サイト内の回遊率を上げるためにも積極的に登録しておきましょう。広告スペースとしても活用できます。
>> KASHIRAのオリジナルウィジェット
【完成！】定期的な更新を継続しよう
サイト完成です。お疲れ様でした！
初めてサイトを制作する際は、以下を参考にしてみてください。後からいくらでも拡張できるので、まずは小さく始めて全体像を形にすることが重要です。
- ロゴ（もしくはサイト名）の見え方が綺麗か確認する。
- ドロワーメニュー・フッターのメニュー（ラベル・数）を整える。
- サイト内導線を増やす。（特にトップページ・ウィジェット）
さらに完成度を高めるためには、当デモサイトを参考に調整してみてください。下層ページを追加して導線を設けることで、サイトが拡張されていきます。
デモサイトや完成したサイトを「追加できるコンテンツは無いか」「不足している情報を無いか」というポイントで見直してみましょう。気付いたことを変更したり、定期的に更新することで「活きたウェブサイト」になりクオリティも上がっていきます。
項目ごとに設定方法を確認したい方は、「設定マニュアル」からご覧ください。
長期的かつ本格的なサイト運営にはSEOの知識も必要になってきます。TCDが15年間のサイト運営で培ったSEOに関する知識はこちらからご覧ください。
