Cocoonでコーポレートサイトの作成

2023年10月4日2023年10月29日

それでは、WordPressをインストールしたばかりの状態からコーポレートサイト（企業サイト）をCocoonで作成してみたいと思います。

概要

コーポレートサイトは、4〜5の固定ページを作成し、その固定ページを表示するためのメニューを作成し、あとは外観（スキン）を整えるだけで作成できます。
以下の順に沿って作成してみたいと思います。
1）ホームページの作成
2）会社概要ページの作成
3）会社へのアクセスの作成
4）求人ページの作成
5）お問い合わせページの作成
6）メニューの作成
7）スキンの適用
8）httpsへの自動転送

ホームページの作成

ホームページは会社の玄関ですので、自社の理念や事業内容等を記入します。
WordPressのダッシュボードから固定ページ＞新規作成とクリックします。

以下のようにトップページ（ホームページ）を作成しました。

1カラムに変更

デフォルトでは2カラムになっていますので、これを1カラムに変更したいと思います。
ページタイプのページ設定を1カラム（狭い）に変更します。

会社概要ページの作成

会社概要ページを作成します。
会社概要ページはテーブルで作成します。

アクセスページの作成

会社へのアクセスページを作成します。
アクセスページは、地図を表示したいので、Googleマップを配置します。Googleマップを配置する方法として、埋込コードを使用する方法と、プラグインを使用する方法がありますが今回は、会社の所在地を表示するだけなので、埋込コードを使用する方法で作成してみます。

埋込コードを使用する方法

Google Mapsのウェブサイトにアクセスし、表示したい場所を検索します。

「共有」ボタンをクリックし、ポップアップウィンドウで「地図を埋め込む」タブを選択します。

表示する地図の大きさを「＋」又は「ー」で調整し、HTMLをコピーします

WordPressで地図を表示したい場所に投稿のエディター（HTMLモード）にペーストします。

地図の大きさは、widthとheightに値を入力して調整してください。横幅いっぱいに表示するには、width=”1200″ 程度がいいと思います。高さは600〜900の間で好みで調整してください。

最後に、ページや投稿を更新または公開すれば、下記の様に地図が表示されます。

求人情報ページの作成

求人情報も会社概要ページ同様、テーブルで作成します。

お問い合わせページの作成

お問い合わせページを作成するには、まず、プラグインをインストールします。
ここでは、定評のある「Contact Form 7」をインストールしたいと思います。
WordPressのダッシュボードから、プラグイン＞新規追加を開き、「Contact Form」と検索し表示されたら、今すぐインストールをクリックします。

インストールしたら、有効化をクリックします。
Contact Form 7の設定をクリックします。

デフォルトで作成されているコンタクトフォーム1の編集をクリックします。

フォーム名を「お問い合わせフォーム」に変更します。

メールタブで、送信先を修正して保存をクリックすれば、完成です。
完成したショートタグをコピーします。

次に固定ページでお問い合わせページを作成し、上記のショートタグを貼り付けます。

これで、お問い合わせフォームが完成しました。

試しにフォームから入力してメールが届けばOKです。

メニューの作成

カスタマイズをクリックします。

メニューをクリックします。

メニューを新規作成をクリックします。

メニュー名を付け、次をクリックします。

項目を追加をクリックします。

メニューを表示したい順番でクリックしていきます。

フロントページ（革新のロードマップ）をクリックし、ナビゲーションラベルを「ホーム」に変更します。

メニューの位置を決めるとメニューが表示されます。

スキンの変更

本日の仕上げに、Cacoonのスキンを使ってみましょう。ホームページががらりと変わります。
ダッシュボードでCocoon設定をクリックします。

スキンタブが選択されているのを確認して、下の方のスキン一覧までスクロールします。

スキン一覧にある色々なスキンを試してください。好みのスキンが見つかると思います。

イメージアイコンにカーソルを合わせると色々なイメージのスキンが表示されます。

好みのスキンを見つけて、変更をまとめて保存をクリックすれば、一応ホームページの完成です。

完成したホームページは下記です。

http://winroad.jp

httpsへの自動転送

Xserverの独自SSL設定では、自動でhttpからhttpsへ転送されません。
試しに、ブラウザでwinroad.jpと入力すると、下記の様に「保護されていない通信」と表示されます。https://winroad.jp と入力すれば大丈夫ですが、コーポレートサイトで、これはまずいので、自動転送するように修正します。

設定対象ドメインを指定のドメインに変更してから、ホームページの.htaccess編集をクリックします。

.htaccess編集タブをクリックします。

.htaccessファイルの先頭に2行程度空白を入れます。

下記の文字列をコピー＆ペーストします。

RewriteEngine On
RewriteCond %{HTTPS} !on
RewriteRule ^(.*)$ https://%{HTTP_HOST}%{REQUEST_URI} [R=301,L]

確認画面へ進む＞ 実行する とクリックします。
.htaccessの編集が完了しました と表示されたらOKです。
それでは、実際にブラウザから http://ドメイン名 と入力して、https://ドメイン名 に自動転送されるか確認して見ましょう。
下記の様に鍵マークがついていたらOKです。