コンテンツ・メーカーを既存サイトに組み込む際のディレクトリ構成例と作業手順

公開日

2020年12月11日

最終更新日

2021年3月4日

当サイトで無料配布している新着情報欄の更新システム「コンテンツ・メーカー」は既存サイトに組み込むことを前提として作られています。

基本的な組み込み手順は上記ページ内の「既存のサイトに組み込む方法」に書いてありますが、その解説だけではわからない人がいるかもしれないので、このページではより詳細にその手順を解説していきます。

なお、このページの解説は初期状態での動作テストが正常に完了していることが前提となります。
(上記ページ内の「設置方法」での動作確認を済ませてあること)

コンテンツ・メーカーの初期状態の構成

コンテンツ・メーカーは初期状態では以下のような構成になっています。

contents-maker-v7.0/
  ┃
  ┣━━ contents-maker/
  ┃      ┃
  ┃      ┣━━ addon/
  ┃      ┃
  ┃      ┣━━ css/
  ┃      ┃     ┣━━ admin.css
  ┃      ┃     ┣━━ jquery.datetimepicker.css
  ┃      ┃     ┣━━ login.css
  ┃      ┃     ┣━━ reset.css
  ┃      ┃     ┗━━ style.css
  ┃      ┃
  ┃      ┣━━ db/
  ┃      ┃
  ┃      ┣━━ font/
  ┃      ┃     ┣━━ contents-maker.eot
  ┃      ┃     ┣━━ contents-maker.svg
  ┃      ┃     ┣━━ contents-maker.ttf
  ┃      ┃     ┗━━ contents-maker.woff
  ┃      ┃
  ┃      ┣━━ image/
  ┃      ┃     ┗━━ bg-body.png
  ┃      ┃
  ┃      ┣━━ js/
  ┃      ┃     ┣━━ admin-js.php
  ┃      ┃     ┣━━ class.admin-js.php
  ┃      ┃     ┣━━ class.contents-maker-js.php
  ┃      ┃     ┣━━ class.login-js.php
  ┃      ┃     ┣━━ contents-maker-js.php
  ┃      ┃     ┣━━ jquery.datetimepicker.js
  ┃      ┃     ┣━━ login-js.php
  ┃      ┃     ┗━━ picker.js
  ┃      ┃
  ┃      ┣━━ php/
  ┃      ┃     ┣━━ admin.php
  ┃      ┃     ┣━━ class.contents-maker.php
  ┃      ┃     ┣━━ class.contents-maker-admin.php
  ┃      ┃     ┣━━ class.contents-maker-display.php
  ┃      ┃     ┣━━ class.contents-maker-login.php
  ┃      ┃     ┣━━ class.contents-maker-write.php
  ┃      ┃     ┣━━ config.php
  ┃      ┃     ┣━━ index.php
  ┃      ┃     ┗━━ login.php
  ┃      ┃
  ┃      ┗━━ upload/
  ┃             ┗━━ no-image.png
  ┃
  ┗━━ index.html (新着情報を公開するページ)

このページの解説ではcontents-makerフォルダの中身以下のように省略して記載していきます。
「addon」～「upload」のフォルダの中に上記のような多くのファイルが入っていると解釈してください。

contents-maker-v7.0/
  ┃
  ┣━━ contents-maker/
  ┃      ┣━━ addon/
  ┃      ┣━━ css/
  ┃      ┣━━ db/
  ┃      ┣━━ font/
  ┃      ┣━━ image/
  ┃      ┣━━ js/
  ┃      ┣━━ php/
  ┃      ┗━━ upload/
  ┃
  ┗━━ index.html (新着情報を公開するページ)

contents-makerフォルダ内にある「addon」～「upload」のフォルダは名前や位置関係を変えてはいけません。
これらのフォルダは上記の初期状態の位置関係のままサーバー上に設置してください。

既存サイトの構成例

以下のような構成のサンプルサイトがあると仮定し、このサイトのトップページに新着情報を表示させるとします。

index.html (トップページ・このページに新着情報を表示させたい)
  ┃
  ┣━━ product.html (取扱商品一覧)
  ┃
  ┣━━ about.html (企業概要)
  ┃
  ┣━━ access.html (アクセス)
  ┃
  ┗━━ inquiry.html (お問い合わせ)

組み込み設置後の構成例

このサンプルサイトの場合、以下のような構成で設置することができます。

index.html (トップページ・このページに新着情報を表示させたい)
  ┃
  ┣━━ product.html (取扱商品一覧)
  ┃
  ┣━━ about.html (企業概要)
  ┃
  ┣━━ access.html (アクセス)
  ┃
  ┣━━ inquiry.html (お問い合わせ)
  ┃
  ┗━━ contents-maker/
          ┣━━ addon/
          ┣━━ css/
          ┣━━ db/
          ┣━━ font/
          ┣━━ image/
          ┣━━ js/
          ┣━━ php/
          ┗━━ upload/

このように既存サイトに組み込む場合、コンテンツ・メーカーに同梱されているindex.htmlは不要ですので、サーバーにアップロードする必要はありません。

このサンプルサイトに組み込み設置する場合の作業手順を以下から解説していきます。

contents-makerフォルダをそのままアップロードする

上記のディレクトリ構成の図の位置にcontents-makerフォルダを中身も含めてすべてアップロードします。
(コンテンツ・メーカーに同梱されているindex.htmlだけは不要です)

トップページの新着情報を表示させたい部分にHTMLを追加する

トップページ内の新着情報を表示させたい部分に以下のHTMLのコードを追加します。
以下からの作業のHTMLコードはコンテンツ・メーカーに同梱されているindex.htmlからコピーして貼り付けると間違いがないでしょう。

<div id="news"></div>

トップページでcontents-maker-js.phpの読み込みコードを追加する

トップページに以下のHTMLを追加し、contents-maker-js.phpを読み込ませます。
記述する位置はどこでも構いませんが、body要素の閉じタグ(</body>)直前が無難でしょう。(async属性がある関係で)

<script src="contents-maker/js/contents-maker-js.php" id="contents-maker-js"  async="async"></script>

なお、上記のcontents-maker-js.phpはcontents-maker/js/の中にありますが、この場所から移動させてはいけません。
移動させるとプログラムが正常に動作しなくなってしまいます。

今回のサンプルサイトの場合はトップページとcontents-makerフォルダとの位置関係がコンテンツ・メーカーの初期状態と同じです。
ですので上記のコードでOKになりますが、もしcontents-makerフォルダがもっと深い階層に位置する場合は以下のようにしたり、

<script src="ここにフォルダ名/ここにフォルダ名/contents-maker/js/contents-maker-js.php" id="contents-maker-js"  async="async"></script>

逆に、contents-makerフォルダが上位の階層になる場合は、以下のように適宜調整して読み込ませてください。

<script src="../../contents-maker/js/contents-maker-js.php" id="contents-maker-js"  async="async"></script>

もし上記のような相対URLがわからないという方は、以下のように絶対URLで記述しても問題ありません。

<script src="https://www.ドメイン.com/contents-maker/js/contents-maker-js.php" id="contents-maker-js"  async="async"></script>

作業の要点

このページで解説した作業をまとめると以下の2つです。
この2つが正しくできていれば、管理画面で投稿した内容が表示されることでしょう。

1. 新着情報を表示させたいページ内に <div id=”news”></div> を追加する。
2. 新着情報を表示させたいページでcontents-maker-js.phpを読み込ませる。

新着情報欄のデザインを既存のサイトに合わせたい場合は、以下の部分を参考にCSSで調整してください。
新着情報欄のデザイン変更について