バナーを複数ページから呼び出す方法

バナーを複数ページから呼び出す方法

更新日: 2016年8月12日

ユーザーは必ずしも、トップページから閲覧するとは限りません。サイト内のどのページにアクセスしても、確実にお知らせを伝えるには、どうすればよいのでしょうか?
そんなときは、サイト内バナーを複数ページから呼び出すようにしましょう。
その場合、サイト内バナー自体は一つのOKです。設定ファイルも一つでいいので、いつものように、会員サイトで設定ファイルを生成し、システムフォルダを準備しておきます。

複数ページから呼び出す場合のアップロードと設置のしかた

HTMLの場合

サイト内バナーを一つのページから呼び出す場合は、呼び出すページと同じ階層にシステムフォルダをアップロードすることになっていました。
しかし、複数のページから呼び出なければならず、しかも、呼び出しページがそれぞれ違う階層になって場合、どうすればいいのでしょうか?
たとえば、下図のような構造になっていて、pageA.html、pageB.html pageC.html から呼び出したいとします。

|-folder1-|-pageA.html
|             |-○○○
|
|-folder2-|-○○○
|             |-pageB.html
|
|-folder3-|-folder31-|-○○○
|             |              |-pageC.html
|
|-system -|-xxxx.css
|              |-xxxx.js
|              |-

それぞれの呼び出しページから見て、いちばん構成がシンプルになるような位置に、システムフォルダをアップロードします。
この場合は、folder1 や folder2 と同じ階層にアップロードするのが望ましいでしょう。
そして、呼び出しページをバックアップしたうえで、cssファイルとjsファイルへのパスを通していきます。

pageA.htmlの場合は、以下のようなコードになります。

pageA.html, pageB.html

<link href="../system/xxxx.css" type="text/css" rel="stylesheet" />
<script src="https://ajax.googleapis.com/ajax/libs/
jquery/1.11.1/jquery.min.js" type="text/javascript"</script>
<script src="../system/wideLetter.js" type="text/javascript"</script>
</head>

pageB.htmlも階層から見ると、同じ位置にあるので、同じコードでいけます。
pageC.htmlは階層が一つ深いので、その点に注意します。

pageC.html

<link href="../../system/xxxx.css" type="text/css" rel="stylesheet" />
<script src="https://ajax.googleapis.com/ajax/libs/
jquery/1.11.1/jquery.min.js" type="text/javascript"</script>
<script src="../../system/wideLetter.js" type="text/javascript"</script>
</head>

WordPressの場合

たとえば、サイト内バナーをスラッグ postA と postB の投稿ページとスラッグ pageC の固定ページから呼び出したいとします。system フォルダへのパスは sPath です。
一つのページから呼び出す場合と同様に、システムフォルダを現在のテーマフォルダの中にアップロードします。

themes フォルダ
  |-
  |-current-theme (現在のテーマフォルダ)
      |-
      |-functions.php
      |-system
          |-xxxx.css
          |-xxxx.js
          |-

現在のテーマフォルダの functions.php をバックアップしておきます。ここまではいつもといっしょです。

functions.php

function cb_enqueue(){
  if ( is_single( array( 'postA', 'postB') ) ) {
    wp_register_style ('xxx_style', 
get_stylesheet_directory_uri()."/system/xxxx.css");
    wp_enqueue_style  ('xxx_style');
    echo '<script type="text/javascript">var sPath=
"'.get_template_directory_uri()."/system/".'";</script≷';
    wp_register_script ('xxx_script', 
get_stylesheet_directory_uri()."/system/xxxx.js", 
array('jquery'), false, true);
    wp_enqueue_script  ('xxx_script');
  }
  if ( (is_page( 'pageC' ) ) {
    wp_register_style ('xxx_style', 
get_stylesheet_directory_uri()."/system/xxxx.css");
    wp_enqueue_style  ('xxx_style');
    echo '<script type="text/javascript">var sPath=
"'.get_template_directory_uri()."/system/".'";</script>';
    wp_register_script ('xxx_script', 
get_stylesheet_directory_uri()."/system/xxxx.js", 
array('jquery'), false, true);
    wp_enqueue_script  ('xxx_script');
  }
}
add_action (‘wp_enqueue_scripts’, ‘cb_enqueue’);

上記のコードはあくまでも標準的なサイトの場合です。
それぞれのWebサイトにもっともふさわしいコードになるよう、設置作業はサイトを管理するエンジニアに依頼しましょう。

1人1日1回機能を使おう

テストが終わり、いよいよ本番となったとき、「1人につき1日1回」機能があれば、必ず「調整する」にしましょう。
この機能は、複数ページに設置するとき、とくに役立ちます。
これを「調整しない」にした場合、極端な場合、サイト内を移動するたびにお知らせが表示され、ユーザーにうるさがられて逆効果になります。
同じ理由で、「テストモード」は、必ず「本番モード」にしましょう。
画像型ステッカーなど「2回目以降」のバナーの状態を設定できる場合は、「閉じておく」にすることをお勧めします。

▲このページのトップへ