HERO CMS制作フロー - 制作・コネクト・サポートイントラ

ファイル構造（一部省略）

新規制作で主に使用するファイルをハイライト（黄色）しております。
※2025年2月現在

hero-cms
├── 404.php
├── archive.php
├── block-editor
│   ├── css
│   │   ├── admin.css
│   │   └── component.css
│   ├── setting.js
│   ├── setting.php
│   └── template.php
├── category.php
├── css
│   ├── destyle.css
│   ├── fontawesome.min.css
│   ├── front.css
│   ├── scroll-hint.css
│   ├── special_under.css
│   ├── splide-core.min.css
│   ├── under.css
│   └── variables.css
├── favicon
│   └── favicon.ico
├── footer.php
├── front-page.php
├── functions.php
├── header.php
├── home.php
├── images
│   ├── blog_comingsoon.png
│   ├── btn_arrow.png
│   ├── medical_bg.jpg
│   └── medical_bg_sp.jpg
├── index.php
├── js
│   ├── front.js
│   ├── main.js
│   ├── scroll-hint.min.js
│   ├── splide-extension-auto-scroll.min.js
│   ├── splide.min.js
│   └── under.js
├── page.php
├── parts
│   ├── common
│   │   ├── breadcrumb.php
│   │   ├── description.php
│   │   ├── footer_nav.php
│   │   ├── freearea_under.php
│   │   ├── freearea_up.php
│   │   ├── h1.php
│   │   ├── head.php
│   │   ├── mega
│   │   │   ├── menu.php
│   │   │   └── includes
│   │   │       ├── type_category.php
│   │   │       ├── type_contents.php
│   │   │       └── type_title.php
│   │   ├── nav.php
│   │   ├── office_hours.php
│   │   ├── page_links.php
│   │   ├── pager_post.php
│   │   ├── pagetitle.php
│   │   ├── pulldown
│   │   │   ├── menu.php
│   │   │   └── includes
│   │   │       ├── type_contents.php
│   │   │       └── type_title.php
│   │   ├── shortcode.php
│   │   ├── special_mainvisual.php
│   │   ├── title.php
│   │   └── visual-editor.php
│   ├── front
│   │   ├── banner.php
│   │   ├── clinic.php
│   │   ├── column.php
│   │   ├── feature.php
│   │   ├── greeting.php
│   │   ├── infinity_slider.php
│   │   ├── mainvisual.php
│   │   ├── medical.php
│   │   └── search.php
├── parts-mpcloud_css.php
├── parts-mpcloud_news.php
├── parts-mpcloud_schedule.php
├── screenshot.png
├── single.php
├── style.css
├── taxonomy.php
├── templates
│   ├── page-access.php
│   ├── page-block.php
│   ├── page-clinic.php
│   ├── page-custom.php
│   ├── page-doctor.php
│   ├── page-news.php
│   ├── sidebar-post.php
│   ├── sidebar-under.php
│   ├── single-block.php
│   ├── single-post.php
│   └── single-special.php

hero-cms

├── 404.php

├── archive.php

├── block-editor

│ ├── css

│ │ ├── admin.css

│ │ └── component.css

│ ├── setting.js

│ ├── setting.php

│ └── template.php

├── category.php

├── css

│ ├── destyle.css

│ ├── fontawesome.min.css

│ ├── front.css

│ ├── scroll-hint.css

│ ├── special_under.css

│ ├── splide-core.min.css

│ ├── under.css

│ └── variables.css

├── favicon

│ └── favicon.ico

├── footer.php

├── front-page.php

├── functions.php

├── header.php

├── home.php

├── images

│ ├── blog_comingsoon.png

│ ├── btn_arrow.png

│ ├── medical_bg.jpg

│ └── medical_bg_sp.jpg

├── index.php

├── js

│ ├── front.js

│ ├── main.js

│ ├── scroll-hint.min.js

│ ├── splide-extension-auto-scroll.min.js

│ ├── splide.min.js

│ └── under.js

├── page.php

├── parts

│ ├── common

│ │ ├── breadcrumb.php

│ │ ├── description.php

│ │ ├── footer_nav.php

│ │ ├── freearea_under.php

│ │ ├── freearea_up.php

│ │ ├── h1.php

│ │ ├── head.php

│ │ ├── mega

│ │ │ ├── menu.php

│ │ │ └── includes

│ │ │ ├── type_category.php

│ │ │ ├── type_contents.php

│ │ │ └── type_title.php

│ │ ├── nav.php

│ │ ├── office_hours.php

│ │ ├── page_links.php

│ │ ├── pager_post.php

│ │ ├── pagetitle.php

│ │ ├── pulldown

│ │ │ ├── menu.php

│ │ │ └── includes

│ │ │ ├── type_contents.php

│ │ │ └── type_title.php

│ │ ├── shortcode.php

│ │ ├── special_mainvisual.php

│ │ ├── title.php

│ │ └── visual-editor.php

│ ├── front

│ │ ├── banner.php

│ │ ├── clinic.php

│ │ ├── column.php

│ │ ├── feature.php

│ │ ├── greeting.php

│ │ ├── infinity_slider.php

│ │ ├── mainvisual.php

│ │ ├── medical.php

│ │ └── search.php

├── parts-mpcloud_css.php

├── parts-mpcloud_news.php

├── parts-mpcloud_schedule.php

├── screenshot.png

├── single.php

├── style.css

├── taxonomy.php

├── templates

│ ├── page-access.php

│ ├── page-block.php

│ ├── page-clinic.php

│ ├── page-custom.php

│ ├── page-doctor.php

│ ├── page-news.php

│ ├── sidebar-post.php

│ ├── sidebar-under.php

│ ├── single-block.php

│ ├── single-post.php

│ └── single-special.php

初期制作で主に使用するファイルについて

CSS関連

style.css	全ページに適応されるスタイルシート
front.css	トップページにのみ適応されるスタイルシート
under.css	下層ページにのみ適応されるスタイルシート
variables.css	CSS変数を設定するスタイルシート

主要テンプレートファイル

front-page.php	トップページのテンプレートファイル。「parts > front」内のパーツで構成されています。トップのコンテンツ追加や並び替えはこちらから行います。
「parts > front」フォルダ	上述の通り、トップページを構成するコンテンツのテンプレートファイルはこちらのフォルダ内にあります。例）「当院の特徴 → feature.php」「ご挨拶 → greeting.php」各コンテンツのパターンを切り替える場合は、これらのファイルを編集します（詳細後述）。
header.php	ヘッダーのテンプレートファイル。画面下固定の「Web予約」のボタンなどはこちらから調整できます。
head.php	<head>用のテンプレートファイル。各種ファイルの読み込み、faviconの設定などはこちらのファイルを編集します。
footer.php	フッターのテンプレートファイル。 Webフォントなどを読み込む際はこちらのファイルの「js」の箇所に記述してください。
nav.php	ヘッダーナビのテンプレートファイル（詳細後述）。
footer_nav.php	フッターナビのテンプレートファイル。

制作の流れ

大まかな流れは以下です。

テンプレートのインストール
「基本情報」の入力
固定ページ・投稿ページの準備 & ナビの設定
トップページコンテンツの「並び替え・パターン切り替え・追加」
トップページのコーディング・デザイン
下層ページ作成
レスポンシブ
検品

①テンプレートのインストール

こちらのページの「テンプレート」からファイルをダウンロードし、プラグイン「All-in-One WP Migration」を使用してインポートしてください。
※「パスワード保護中」と表示された場合は「Hero1160」で解除できます

インポート後はユーザー情報もテンプレートのものに上書きされてしまうため、
アカウント：starter
パスワード：Hero1160
で再度ログインし、kintoneの「お客様パスワード」をもとに、以下の作業をお願いたします。

社内用アカウント（starter）のパスワード再設定
お客様アカウントの作成とパスワード設定

※kintoneに記載がない場合は、こちらを参照に作成してください

また、「設定 > 一般 > サイトのタイトル」をクリニック名に変更してください。

システムオリジナルの場合

2カラムに切り替える関係で、別途作業が必要となります。
詳細はこちら

②「基本情報」の入力

基本情報シートやワイヤーをもとに基本情報の入力、画像の設定をしていきます。

注意事項

「SEO」内の「Title」「Description」「h1」は各固定ページ、投稿ページにも自動反映されます。従来のテンプレートのように、固定ページ、投稿ページ個別に設定する必要はございません。
※各固定ページ、投稿ページにも入力欄ありますが、そちらはページごとにtitle、descriptionを変えたい場合にご使用ください
業務委託の方は、「Google > アナリティクス」は設定しなくて問題ございません

③固定ページ・投稿ページの準備 & ナビの設定

サイトマップをもとに、ページの準備を行います。

注意事項

各ページのスラッグ名は日本語、英語特に指定はございませんが、「ページの内容に合った英語表記」が好ましいです

カスタム投稿タイプを追加する場合

上の写真の「お悩み・要望から探す」のように、カスタム投稿タイプを追加する必要がある場合は、プラグイン「Advanced Custom Fields PRO」より以下の作業を行ってください。

ページを準備したら、ナビの設定を行います。

ヘッダーナビ	「parts > common > nav.php」より編集。詳しい編集方法は下記をご参照ください。プルダウンメニューメガメニュー ※メガメニューはシステムオリジナルでは使用不可
フッターナビ	「parts > common > footer_nav.php」より編集。 ※カスタム投稿タイプを追加した際、作業が必要となります。

ヘッダーナビ

「parts > common > nav.php」より編集。
詳しい編集方法は下記をご参照ください。

※メガメニューはシステムオリジナルでは使用不可

フッターナビ

「parts > common > footer_nav.php」より編集。
※カスタム投稿タイプを追加した際、作業が必要となります。

④トップページコンテンツの「並び替え・パターン切り替え・追加」

ワイヤーをもとにトップページへのコンテンツ追加や並び替えを行います。

並び替え

  <!--============================== ▼バナーエリア ==============================-->
  <?php get_template_part('parts/front/banner'); ?>
  <!--============================== ▲バナーエリア ==============================-->

  <!--============================== ▼医院概要 ==============================-->
  <?php get_template_part('parts/front/clinic'); ?>
  <!--============================== ▲医院概要 ==============================-->

  <!--============================== ▼医師紹介 ==============================-->
  <?php get_template_part('parts/front/greeting'); ?>
  <!--============================== ▲医師紹介 ==============================-->

  <!--============================== ▼診療内容 ==============================-->
  <?php get_template_part('parts/front/medical'); ?>
  <!--============================== ▲診療内容 ==============================-->

  <!--============================== ▼当院の特徴 ==============================-->
  <?php get_template_part('parts/front/feature'); ?>
  <!--============================== ▲当院の特徴 ==============================-->

  <!--============================== ▼症状から探す ==============================-->
  <?php get_template_part('parts/front/search'); ?>
  <!--============================== ▲症状から探す ==============================-->

  <!--============================== ▼医療コラム ==============================-->
  <?php get_template_part('parts/front/column'); ?>
  <!--============================== ▲医療コラム ==============================-->

  <!--============================== ▼フリーエリア（下） ==============================-->
  <?php get_template_part('parts/common/freearea_under'); ?>
  <!--============================== ▲フリーエリア（下） ==============================-->

  <!--============================== ▼無限スライダー ==============================-->
  <?php get_template_part('parts/front/infinity_slider'); ?>
  <!--============================== ▲無限スライダー ==============================-->

<?php get_template_part('parts/front/banner'); ?>

<?php get_template_part('parts/front/clinic'); ?>

<?php get_template_part('parts/front/greeting'); ?>

<?php get_template_part('parts/front/medical'); ?>

<?php get_template_part('parts/front/feature'); ?>

<?php get_template_part('parts/front/search'); ?>

<?php get_template_part('parts/front/column'); ?>

<?php get_template_part('parts/common/freearea_under'); ?>

<?php get_template_part('parts/front/infinity_slider'); ?>

「front-page.php」の上記の箇所から並び替えを行なってください。
※不要なコンテンツは削除

パターン切り替え

こちらのページに準備されている各コンテンツのパターンを参照の上で、下記の作業をお願いいたします。

「parts > front」フォルダ内の該当するテンプレートファイルのコード差し替え
「front.css」の該当箇所のコード差し替え
「front.js」にコードを追記（必要な場合のみ）

追加

「ピックアップ」のような追加コンテンツは下記の作業が必要になります。

「パーツ一覧 > ピックアップ」からACFのファイルをダウンロード
WordPressの管理画面「ACF > ツール > インポート」からファイルを読み込む
→ 「固定ページ > ホーム」に入力欄が表示されます
「parts > front」フォルダ内にテンプレートファイルを作成し、パーツ一覧にあるphpコードを記述
※「pickup.php」など一目でわかるファイル名で設定お願いいたします
front.cssにcssを追記
「front.js」にコードを追記（必要な場合のみ）

⑤トップページのコーディング・デザイン

ワイヤーの内容を管理画面「固定ページ > ホーム」から入力後、デザインを行います。

写真素材に関して

下記イントラをご参照ください。

HPに使う画像の探し方

Webフォントに関して

Adobe Fonts
MORISAWA（TypeSquare）
イントラ「MORISAWA（TypeSquare）のWEBフォントの設定方法」をご参照ください
FONTPLUS（ログイン情報は「Password（社内）」よりご確認ください）
Google Fonts

システムオリジナルの場合

デザインに一部制限がございます。
詳細はこちらをご参照ください。

⑥下層ページの作成

ページ内リンク
「自動出力」の場合、「タイトル」と「リンクID」をもとに、各コンテンツへのページ内リンクが生成されます。
※「タイトル」「リンクID」のどちらも入力されているコンテンツのみ自動出力されます「手動設定」の場合、任意のボタン名とリンク先を設定することができます。
タイトル
コンテンツの見出しを入力します。
h2で出力されます。
本文
コンテンツの内容を入力します。
「タイトル」を入力した場合、こちらのにはh3以降の見出しタグを使用してください（hタグの順番が崩れないように）
リンクID
ページ内リンク用のIDをこちらに入力します。

下層ページで使用するレイアウト

「固定ページ > スタイル一覧」に用意してありますので、コードをコピーして使用してください。

⑦レスポンシブ

極力PCと同じデザインを保てるように調整お願いいたします
どのデバイスサイズでも表示崩れがないのが理想ですが、最低でも最小360px程度まではご確認ください。
ご自身のスマートフォンを用いて、必ず実機でもご確認お願いいたします。

⑧検品

検品シートをもとに自己検品を行います。

検品の流れ

「テンプレート」を複製して、「案件情報」を入力
「備考欄」に引き継ぎ事項や残作業を入力
例）「〇〇ページ未作成、〇〇はリンク先未定、〇〇の箇所はイレギュラーで追加費用いただいております」など
「セルフ検品はここから」内の検品項目を確認

※業務委託の方は「GoogleAnalytics」「MPクラウド」の箇所はご対応いただく必要はございません。
また、「レイアウト崩れ（SP）」の箇所は、お持ちのスマートフォンのOSでのみご確認お願いいたします。

検品に便利な社内ツール

検品チェック6選

「タイトルタグ」「メタディスクリプション」「見出し構造（h1〜h6の階層関係）」「画像のalt属性」「HTML構文」「404エラーページ」を一括で確認できます。
https://5-self-inspection-3sptnc8lpx9x2ejymt5arh.streamlit.app/

表記ゆれチェック

表記揺れを項目ごとに一括で確認できます。
https://inspection-fafs5asbshmejldhcuxvpk.streamlit.app/