【THE THOR】企業サイト導入事例|コーポレートサイトの作り方をデモサイトで解説!

料理レシピ向けカスタマイズ
初心者

THE THORでコーポレートサイトって作れるの?
どんなデザイになるの?
外注しないで自作できる?

そんな疑問に答えます。
WordPressテーマ「THE THOR(ザ・トール)」を買って、企業系のデモサイトを作ってみました。

THE THORで企業サイトをオシャレに仕上げる制作テクニックも合わせてシェアします!

この記事を書いた人
  • IT業界22年のベテラン エンジニア
  • WordPressで企業サイトの構築しています
  • 取り扱いWordPressテーマは300個オーバー
SWELLマニアの かんた です
目次

【概要】THE THORってどんなテーマ?

【概要】THE THORってどんなテーマ?

まずはTHE THORの基本情報です。

THE THORの概要
販売事業者フィット株式会社
テーマ料金16,280円(税込み価格)
発売日2018年10月
公式サイトTHE THOR(ザ・トール)公式サイト
THE THOR(ザ・トール)の概要

THE THORはWordPress専用の有料テーマです。

有料テーマだけあってデザインがとってもオシャレ。絞り込み検索機能やオリジナルの装飾機能などを搭載している高機能なテーマです。

公式 THE THORをダウンロードする

【サンプル】THE THORで作ったコーポレート系サイト

WordPressテーマTHE THORで作成した企業サイトデザインを紹介します。デモサイトはクリックすると別ウィンドウで表示されます。

デモサイトはTHE THORの最新バージョンで作成しています。

THE THORのデモサイト制作にかかった時間は、1サイトあたり約5時間です。

かんた

オシャレに仕上がるようにプラグインを追加し、CSSでデザインを調整しています導入しています!

THE THORで企業サイトデザイン向けの便利な機能

THE THORで企業サイトを作るさいに使ったデザインについて紹介します。

  1. メインビジュアル
  2. カラムブロック
  3. メディアとテキスト
  4. カバーブロック
かんた

それぞれの機能を紹介します。

メインビジュアル

メインビジュアルは、トップページに表示されるパーツです。
サイトの印象を決める大事なデザイン。

THE THORのメインビジュアルは、次の3つのオプションが用意されています。

オプション

  1. 静止画像
  2. スライドショー(最大5枚)
  3. YouTube動画


個人的には迫力のある動画が一押し。

動画は基本機能ではYouTube動画限定です。WordPressの基本機能にあるカバーブロックを使うと、Youtubeを経由せず動画ファイルをメインビジュアルに指定できます。

かんた

デモサイトではカバーブロックを使っています。

THE THORを使った企業サイトの作り方

THE THORを使った企業サイトの作り方

企業サイト制作に必須な以下2を事前に用意しましょう。

事前準備の必要なもの

  1. レンタルサーバー
  2. テーマ

【事前準備①】THE THORが動作するレンタルサーバー

THE THORはWordPress用のデザインテンプレートです。会社のホームページを公開するためにはWordPressが動作するレンタルサーバーが必要です。

レンタルサーバーであれば、何でも良いわけではありません。

WordPresssのテーマは、それぞれ動作環境が違います。「WordPress5.2で動くけど、4.9だと動作しない」なんてことがよくあります。

レンタルサーバー契約後に、THE THORが使えないといったことがないよう注意しましょう。テーマの動作環境はTHE THORの公式サイトに掲載されています。

レンタルサーバー契約前には、最新情報を必ずチェックしましょう。

公式 THE THORの動作環境をチェックする

かんた

ちなみにTHE THORの動作環境は次の通りです。

動作環境
WordPress4.9以上
PHP5.6以上
THE THORの動作環境

レンタルサーバーを契約するさいは、THE THOR公式サイトにある動作環境を満たすものを選びましょう。

THE THORはクラッシクエディター環境推奨テーマですがWordPress標準のブロックエディターを利用したい人もいるかと思います。ブロックエディターでTHE THORの運用をする場合は、レンタルサーバーのWAFの仕様が問題になることがあります。

ブロックエディターの機能によってはWAFが誤検知することがあります。

誤検知のたびにWAFを無効化するのは本当に面倒です。だからといってもWAFを無効化したままサイトを運営するのはセキュリティー上問題があります。

僕が利用した中でWAFの誤検知がないレンタルサーバーはエックスサーバーです。THE THORでサイトを作るさいに、レンタルサーバーの選定に迷うようならエックスサーバーを選びましょう。

デモサイトはエックスサーバーのスタンダードプラン(旧X10プラン)を使っています。

かんた

月額ざっくり千円のレンタルサーバーです。

【事前準備②】テーマ

THE THORは有料テーマです。無料ではありません。

WordPressの一部有料テーマは不正に転売されていることがあります。不正なテーマは公式サイトより安く販売されているケースがありますが、リスクがあるので公式サイトからしっかり購入しましょう

かんた

以下が公式サイト以外からTHE THORを購入するリスクとデメリットの一例です。

リスク・デメリット

  1. 本物のTHE THORでない
  2. ウィルスが仕込まれている
  3. 最新バージョンのTHE THORではない
  4. テーマのバージョンアップができない
  5. 公式サポートを受けることができない

公式 THE THORをダウンロードする

サイト型デザインの企業サイトの作り方

THE THORで企業サイトを作る場合の基本設定について紹介します。

設定手順

  1. パーマリンクの設定
  2. トップページを指定
  3. 下層ページを作る
  4. ヘッダーの設定
かんた

各手順を紹介します。

パーマリンクの設定

パーマリンクはWordPress用語です。各ページのURLの構造を意味しています。初期設定のままだと各ページのURLを指定することができません。まずは、パーマリンクで自由にURLを指定できる設定をします。

操作内容

「設定」→「パーマリンク」をクリック。

「カスタム構造」を選択し、/%postname%/と入力。

THE THORで企業サイトを作る手順。パーマリンクを設定

トップページを指定

標準の設定だとブログ投稿が表示されるブログっぽいデザインになります。

サイト型デザインに変更するためには固定ページを作成し、トップページに指定するのが第一ステップです。以後、トップページの中身を編集画面から自由に変更できるようになります。

かんた

具体的な手順を紹介します。

操作内容

「固定ページ」→「新規作成」をクリック。

THE THORでトップページを作成
操作内容

タイトルに「トップページ」と入力。

「公開」をクリック。

THE THORトップページ用のからページを作るステップ

サイドバーの無い1カラムデザインにする場合は、右側に表示される「カラム設定」で「1カラムにする」を選択。

操作内容

「設定」→「表示設定」をクリック。

ホームページの表示で「固定ページ(以下で選択)」にチェックを入れる。

先程作成した「トップページ」をホームページに指定。

「変更を保存」し設定を保存。

かんた

作成した固定ページ上からトップページを編集できるようになりました。

下層ページを作る

「下層ページ」はトップページ以外のページのことです。コーポレート系サイトの場合、以下のようなページが下層ページになります。

企業サイトの下層ページの一例

  • 会社紹介
  • スタッフ紹介
  • サービス一覧
  • 料金表
  • お問い合わせ
  • 会社へのアクセス
  • プライバシーポリシー

下層ページはWordPressの「固定ページ」機能を使って作成します。

操作内容

「固定ページ」→「新規追加」をクリック。

新規固定ページで作成

タイトルを入力し、ページに表示死体内容をコンテンツエリアに入力します。

「公開ボタン」をクリックします。

タイトル下のパーマリンクにある「編集」をクリック。

パーマリンクの設定

ページにあったパーマリンクに変更。

例えば、お問い合わせページであれば「Contact」といった感じです。

パーマリンクを保存

「OK」をクリックし、公開を押して設定を完了しましょう。

パーマリンは検索エンジンに伝わりやすくなるよう、英文字を使うのがおすすめです。

URLの構造についてはグーグルが公式情報を公開しています。SEO的に重要なパーマリンクの付け方については、以下公式ガイドをぜひチェックしてみてください。

ヘッダーの設定

THE THORのカスタマイザー

ロゴやグロナビなどを表示するパーツがヘッダーです。THE THORのヘッダーはカスタマイザーから設定できます。

設定対象オプション
ロゴ形式画像をサポート
画像がなければサイト名が表示されます
ロゴの位置左端、真ん中
グロナビPCで非表示
スマホで非表示
PC&スマホで表示
PC&スマホで非表示
検索アイコンPCで非表示
スマホで非表示
PC&スマホで表示
PC&スマホで非表示
ハンバーガーメニューPCで非表示
スマホで非表示
PC&スマホで表示
PC&スマホで非表示
背景色カラーパレットから指定可能

エディターを選ぶ

エディターはページを編集する機能のことです。2種類あるので、好きな方を選びましょう。

エディターは2種類

  1. ブロックエディター
  2. クラシックエディター

ブロックエディターとは?

THE THORのブロックエディター
ブロックエディター

ブロックエディターはWordPress5.0から導入された新型エディターです。「標準エディター」「グーテンベルグ」とも呼ばれています。

WordPressをインストールし、THE THORを有効化した状態だとブロックエディターが初期エディターになっています。

有料テーマの中にはテーマ開発会社がブロックエディター専用プラグインを提供しているものもありますが、THE THORにはありません。

かんた

特別な設定は不要です。

クラッシクエディターとは?

クラシックエディター
クラシックエディター

クラシックエディターはWordPress4.9以前に標準だったエディーターです。WordPress公式プラグインディレクトリーに公開されているClassic Editorプラグインを有効化するとクラシックエディターを利用できます。

THE THORのオリジンル装飾機能を使うにはClassic Editorプラグインが必要です。

かんた

エディターは自分の運用にあったものを選びましょう。

問い合わせフォームの設置

問い合わせページに表示するお問い合わせフォームの設置についてです。THE THORはテーマ内に機能を生成する機能が搭載されているので、プラグインをインストールする必要はありません。

問い合わせフォームを設置する固定ページを作成し、パーマリンクをcontactにするだけで問い合わせフォームが表示されます。

かんた

ユーザーへの自動返信メールは以下より設定できます。

操作内容

「外観」→「カスタマイズ」→「基本設定」→「お問い合わせページ」の「自動返信メールの冒頭を入力」を編集。

自動返信メールの設定

「公開」をクリックし設定を保存。

THE THORの問い合わせフォームには以下の入力オプションが表示されています。

入力オプション

  • お名前
  • メールアドレス
  • URL
  • お問い合わせ内容

「URL」についてはカスタマイザーから表記を変更することができますが、その他の要素の編集や入力オプションの追加はできません。

かんた

どうしも入力フォームを追加したい場合は、Contact Form7などの問い合わせフォームプラグインを使いましょう。

Classic Widgetsプラグインを有効化

Classic Widgetsプラグインを有効化

このステップは必須ではありません。

Classic Widgetsプラグインは、ウィジェットの設定画面をWordPress5.8以前の状態に戻すプラグイン。エディターをブロックエディターからクラシック環境に戻すClassic Editorプラグインのウィジェットバージョン的な存在です。

TEH THORはもともとクラッシクエディター環境時代に開発されたテーマです。ネット上にある情報はクラシックエディター環境のものが多く、マニュアルや参考記事を見ると画面が一致せず混乱します。

ウィジェットブロックエディターに慣れていない人は Classic Widgetsプラグインを有効化するのがオススメです。

Classic WidgetsプラグインはWordPress公式ディレクトリーに公開されているので無料で使えます。ダッシュボード上からインストールし有効化しましょう。

かんた

有効化するだけで設定する作業はありません。

テーマのアップデートをできるようにする

THE THORは不具合修正や新機能の追加といったアップデートが不定期にされています。テーマをWordPress上で有効化しているだけではアップデートの通知は表示されません。

THE THORで最新バージョンを入手するには以下の作業が必要になります。

ザックリした流れ

  1. 更新用ユーザーIDの申請
  2. サイトを登録する
  3. ユーザーIDをWordPresサイトに入力する

更新用ユーザーIDの申請

申請ページからIDを申請します。

ユーザーIDは申請から1~3営業日で発行してもらえます。

サイトを登録する

会員ページにログインします。

「会員情報」をクリックし、「契約者のサイトURL」に登録するサイトのURLを入力しましょう。

ユーザーIDをWordPressサイトに入力する

この作業は自分のWordPressサイト上で行います。

カスタマイザーの「基本設定」→「ユーザーID設定」にユーザーIDを入力しましょう。

THE THORのユーザーIDを入力する

入力後は「公開」をクリックし、設定を保存させれば作業終了です。

かんた

THE THORがバージョンされるとダッシュボード上に通知が表示されるようになります。

複数サイトで使えるTHE THORのライセンス

THE THORのライセンス

THE THORは複数サイトで使えるライセンス形態のテーマです。

WordPressの中には、1サイト限定というテーマもあります。THE THORは1つ購入するだけで、複数サイトに利用できるのは嬉しいポイントです。

こんな使い方ができます

  1. 自分の会社のHPを作る
  2. 特定サービス用の特設サイトを作る
  3. オウンドメディアを作る
  4. ビジネスブロクを作る

THE THORのライセンスについては1点注意点があります。それは第三者のサイトを代行で制作する場合は特別ライセンスが必要になるという点です。

「有料テーマあるし、知り合いのサイトも作ってあげようかな!」

↑これNGです。

ちなみに特別ライセンスは33,000円です。証明書発行日より3年間の有効期限付き。この特別ライセンスは不正にテーマをバラまかれないようにする抑止的な意味かなーと思っています。

かんた

自分のサイトなら、数量に制限なくサイト作れます。
サイト制作代行しない限り気にする必要はありません。

コーポレート型デザインに仕上げる独自カスタマイズ

THE THORの独自カスタマイズ

THE THORテーマをコーポレートデザインに仕上げる独自カスタマイズについてです。

今回紹介したTHE THORのデモサイトでは以下の独自カスタマイズをしています。

独自カスタマイズの一例

  1. トップページのヘッダーを透過させる
  2. ヘッダーに電話番号と問い合わせボタンをつける
  3. グロナビにメガメニューを付ける
  4. ヘッダーにサブメニューを付ける
  5. コンテンツの横幅を画面いっぱいに広げる
かんた

独自カスタマイズの内容を紹介します。

トップページのヘッダーを透過させる

THE THORのトップページのヘッダーを透過させる

最近Web業界で流行りのレイアウトです。

トップページのヘッダー部分を透過させて、フルワイドのメインビジュアルに重ねて表示させています。従来型だとヘッダーとメインビジュアルは別要素でしたが、サンプルの企業サイトではメインビジュアル上で一体化しています。

THE THORのメインビジュアルは動画もスライドショーも使えるので、インパクトのあるファーストビューが作れるのが嬉しいポイントです。

かんた

このカスタマイズの詳細は次の記事で解説しています。

ヘッダーに電話番号と問い合わせボタンをつける

THE THORヘッダーに電話番号と問い合わせボタンをつける

ヘッダー部分に電話番号や問い合わせボタンを設置するレイアウト構成。企業サイトだとよく見かけますよね?

Web制作の仕事をしていると、クライアントから毎度依頼される定番のヘッダー構成です。

CTAを考えたら目立つ場所に問い合わせ方法への動線を設置するのは合理的。そんなわけで今回のデモサイトでもヘッダー部分に問い合わせ系の要素を設置しました。

かんた

このカスタマイズの詳細は次の記事で解説しています。

グロナビにメガメニューを付ける

THE THORグロナビにメガメニューを付ける

グロナビにカーソルをのせると展開されるメガメニューを実装しました。

やっぱりオシャレ度が格段にアップしますよね!僕自身もこのメガメニューが大好きでよく使うテクニックです。なんと言ってもクライアント受けが良い!

かんた

このカスタマイズの詳細は次の記事で解説しています。

ヘッダーにサブメニューを付ける

THE THORヘッダーにサブメニューを付ける

メガメニューなんかと比較するとかなり地味な要素。それでも企業サイトだとよく見かける構成ですよね?

グロナビに入れるほどの優先度が高くないコンテンツを設置。「会社へのアクセス」「プリバシーポリシー」などを配置するのにピッタリ。

かんた

このカスタマイズの詳細は次の記事で解説しています。

コンテンツの横幅を画面いっぱいに広げる

THE THORのコンテンツの横幅を画面いっぱいに広げる

コンテンツ内でアクセント的に横幅いっぱいに要素を配置しました。

1カラムのコーポレートサイトだと定番のテクニックです。ブロックエディターのカバーブロック機能を使うと、デモサイトのようにフルワイドの動画を設置することができます。

かんた

このカスタマイズの詳細は次の記事で解説しています。

まとめ

WordPressテーマTHE THORで作ったコーポレートデザインを紹介しました。

ぜひTHE THORでのコーポレートサイト制作にチャレンジしてみてください!

公式 THE THORをダウンロードする

よかったらシェアしてね!
  • URLをコピーしました!
目次