WordCamp Kansai 2015「コードを書かずに完成！コーポレートサイト作成ハンズオン」で作成した見本サイトの作成方法です。 Googleドキュメントでもともと作成したものですので、スライドシェアでは見づらいです…ダウンロードしてお使いください。 作成者：もとはち・細谷崇 編集少々：土居安佳里

1. コードを書かずに完成！
コーポレートサイト作成ハンズオン
模範サイト構築メモ
​1​ コーポレートサイト制作に必須な事前の設定をする
（まずテーマはTwentyTwelveを使いますので、管理画面よりインストール有効化してください）
​1.1​ WordPress全体にかかる設定をする
設定 - 一般設定
● サイトのタイトル
● キャッチフレーズ
● 日付のフォーマット
● タイムゾーン
● 週の始まり
設定- 表示設定
● 検索エンジンでの表示
※ OFFにするとGoogleなどの検索エンジンから検索されないようになる。
設定 - ディスカッション設定
● 新しい投稿へのコメントを許可する：オフ
設定 - パーマリンク設定
● ［月と投稿名］or［投稿名］に設定する
​2​ コーポレートサイトに必要なページを作成する
​2.1​ 今回作成するWEBサイトのページ構成
ホーム
会社情報
┗概要
┗沿革
お知らせ
サービス
お問い合わせ

2. グローバルメニューの作成の前に、メニューをクリックした時に表示されるページをまず作成する必
要があります。
WordPressには投稿からページを作成する方法と固定ページからページを作成する方法と２つのパ
ターンがあります。
WordPressはそもそもブログシステムなので、投稿＝ブログの記事、固定ページ＝ブログの紹介
ページや作者のプロフィールページ（新着記事に掲載されないページ）にあたります。
コーポレートサイトに必要な「会社概要」や「サービス」などのページは新着記事一覧に表示される
内容ではないので、固定ページに作成をします。
しかし、会社の「お知らせページ」などは新着順で一覧表示をしたいので、［投稿］からページを作成
をします。
ホーム（固定ページ）
会社情報（固定ページ）
┗概要（固定ページ）
┗沿革（固定ページ）
お知らせ（カテゴリー：投稿ページ）
サービス（固定ページ）
お問い合わせ（固定ページ）
​2.2​ まずは固定ページの作成をする
ホーム
会社情報［slug:about］
┗概要（会社情報の子ページ）［slug:gaiyou］
┗沿革（会社情報の子ページ）［slug:history］
サービス［slug:service］
お問い合わせ［slug:contact］
ここではとりあえず、タイトルだけ作成し公開状態にしておく。本文は後で作成。

3. ​2.3​ 「ホーム」をトップページに設定をする
WordPressの初期設定のトップページは投稿記事の一覧が表示されています。これはWordPressが
もともとはブログシステムとして設計をされているからです。コーポレートサイトとしてWordPressを運
用する場合は、上記で作成した固定ページのいずれかのページを設定をします。
設定 - 表示設定より、”フロントページの表示”を「固定ページ」にして”フロントページ”を作成した
固定ページ「トップページ」にする
​2.4​ 次にお知らせのページの作成をする
投稿から記事を作成する前に、「お知らせ」カテゴリーの作成をしましょう。
「お知らせ」カテゴリーを作成することで、「お知らせ」に絞った記事の一覧ページの作成をすること
ができます。
● ［投稿］- カテゴリーからお知らせ（slug:news）を作成する
● ［投稿］から記事を５つ作成する
※ ［お知らせ］カテゴリーにチェックを入れるのを忘れずに
ここではとりあえず、タイトルだけ作成し公開状態にしておく。本文は後で作成。
​2.5​ メニューの作成をする
メニューをクリックした時に表示するページが出来ましたので、次はグローバルメニューの作成をし
ます。
外観 - メニューから新規メニューを作成（main_menuとか名前付ける）
以下のようなメニューをD&Dで作成していく
ホーム：固定ページ
会社情報：固定ページ

4. ┗概要：固定ページ
┗沿革：固定ページ
お知らせ：カテゴリー（新着用カテゴリー）
サービス：固定ページ
お問い合わせ：固定ページ
​3​ トップページを作成する

5. ​3.2​ トップページのレイアウトを決める
利用するテーマによるが、固定ページのレイアウトの種類を変更できるテーマがあります。
今回利用するTwentyTwelveの場合は以下の３週類のページテンプレートが準備されています。
● デフォルトテンプレート
● フロントページテンプレート
● 全幅ページテンプレート、サイドバーなし
今回は、固定ページのトップページには、「フロントページテンプレート」を選択します。
​3.2.1​ フロントページテンプレートのレイアウト説明

6. ​3.3​ トップページの上段にイメージ画像の挿入
固定ページの本文エリアの企業のイメージとなる画像をいれましょう。
※ 足成、ぱくたそなどから画像を取得し挿入する。画像サイズはChromeのデベロッパーツールで
調べる。画像のサイズ調整はWordPressのメディアから編集する。
​3.4​ トップページの下段左に新着情報（お知らせ）一覧を表示

7. ［お知らせ］カテゴリーに設定した投稿記事を表示する。
​3.4.1​ 新着用プラグイン「What's New Generator」をインストール
設定- What’s New設定から、各設定を行う。
“カテゴリーのスラッグ”に新着用カテゴリのスラッグ（news）を入力するのを忘れない！
設定が終わったらショートコードをコピー
​3.4.2​ ウィジェットにショートコードを設定
ウィジェットの［テキスト］をフロントページウィジェットエリア１に設定し、ショートコードを設定する。
​3.5​ トップページの下段右にサービスバナー画像を表示
ウィジェット画像用プラグイン「Image Widget」をインストール
ウィジットからバナーを設定する。
「Remove Widget Titles」プラグインもインストールし、ウィジェットのタイトルに!を先頭に記入してか
らタイトルを記入すると、タイトルはページには表示されなくなる。
タイトル未記入でも表示はされないが、管理画面でタイトル無しのウィジェットがたくさん並ぶとどの
バナーかがわかりにくくなるので使用する。
​4​ 「会社情報」のページを非表示にする
会社情報は「概要」「沿革」をまとめる為に便宜上作成したページになります。
その為、「会社情報」にはコンテンツはなく、「会社情報」にアクセスがあった場合、子ページの「概
要」に転送されるようにします。
​4.1​ 「WP SiteManager」をインストール
会社情報の編集ページの［公開］の「​カテゴリー記事としてリンク先を子記事にする​」にチェックを入れる
​5​ 「会社情報 - 概要ページ」の本文を作成をする
適当に文章入れてもらって、GoogleMapを貼付け（iframeなので「テキスト」で貼って「ビジュアル」に
切り替えすればOK）
​6​ 「会社情報 - 沿革ページ」の本文を作成する

8. ​6.1​ テーブル用プラグイン「TablePress」をインストール
沿革情報は表組みを利用して作成することが多い為、テーブル用プラグインをインストールする。
TablePress - 新しいテーブルを追加から、テーブルを追加してショートコードをコピー
適当に文章入れてもらって、最後にTablePressのショートコードを貼る
​6.2​ ローカルナビ用プラグイン「All in One Sub Navi Widget」をインストール
サイドバーに［概要］［沿革］が表示されるようにローカルナビ用プラグインをインストールする。
外観 - ウィジェットより、”メインサイドバー”に「サブナビ」を設置。
​7​ 「サービス」の本文を作成する
● 文章＋画像の挿入とかを練習してもらってコンテンツを作ってもらう感じで
● サイドバーを出さないようにしたいので「全幅テンプレート」にする
​8​ 「お問い合わせ」の本文を作成する
​8.1​ お問い合わせ用プラグイン「Contact Form 7」をインストール
お問い合わせ - 新規追加より、cf7デフォルト項目のまま保存してショートコードをコピー
​8.2​ ショートコード貼り付け
● 適当に文章入れてもらって、最後にContactForm7のショートコードを貼る
● サイドバーを出さないようにしたいので「全幅テンプレート」にする
​9​ セキュリティについて
● WordPress/plugin/themeのアップデートは怠るな！（自動更新推奨）
● SSLを使う方が本来はよい。
● 野良テーマ、野良プラグイン、2年上更新されてないテーマは危ない。
● 不安な場合はWordPress.comというサービス型がある（制約はあるが）
● パスワード簡単にしない
● フォルダ、ファイルパーミッション気をつけよう（推奨：サーバーの簡単インストールを使うよ
うにしましょう）
● ログインロックダウン系プラグイン入れよう
● ログイン履歴を確認できるプラグイン入れよう
┗ 狂骨

9. ● ドメインは先に設定してから、WordPressのインストールをしましょう。
● バックアップについて、backWPup, VaultPress