表検索の設定・設置

表検索

更新日: 2018年9月30日

表検索は、<table> タグで書かれた表に対して、各列ごとに検索絞り込みできるようにする機能です。既存の表に実装することもできます。

表検索のサンプルを見る

フォルダとファイルの構成

表検索は、以下のようなフォルダとファイル構成になっています。

search フォルダ
  |-search.js (動きを制御するプログラムファイル)
  |-search.css (デザインファイル)
  |-setting (設定ファイル)

このうち、カスタマイズが必要なのは、設定ファイルだけです。

設定ファイルの作り方

弊社会員サイトで、表検索の設定ファイルを生成して、ダウンロードします。設定項目は以下の通りです。

  • 検索したい列番号
  • 検索ボタン名

列番号は1から数えます。
この2つの組み合わせをいくつでも指定できます。
設定ファイルができたら、searchフォルダに入れます。

表検索の設定ファイルの生成とダウンロード

表検索を実装するページの設定

表検索を実装するページがHTMLの場合、ソースファイルを開きます。
Wordpressなら、表検索を実装する投稿ページまたは固定ページを開き、テキストモードにします。
表のtable タグに search というクラス属性を指定します。

<table class="search">
  ・・・
</table>

表をデザインするときは、searchクラスに指定せず、別のクラスかidを付け、そちらにCSSの指定を書き込みます。

表検索の設置

以下、通常のhtmlファイルに設置する場合と、Wordpressに設置する場合に分けて、設置のしかたを説明します。

通常のhtmlファイルに設置する場合

  1. 作業をする前に、表検索を実装する html のバックアップを取っておきます。
  2. searchフォルダを、表検索を実装するページと同じ階層にアップロードします。
    |-
    |-html (表検索を実装するページ)
    |-search フォルダ
        |-search.js
        |-search.css
        |-setting
    
  3. 表検索を実装する html の </head> の直前に、cssファイル、jquery.js、jsファイルへのリンクを書きます。

例)

<link href="search/search.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="search/search.js" type="text/javascript"></script>
</head>
  1. テストして意図通りになっていればOKです。
  2. 意図通りになっていない場合は、設定ファイルを作り直し、上書きしてテストします。

なお、スタンドアローンではテストできません。

wordpressに設置する場合

  1. 作業をする前に、必ず functions.php のバックアップを取っておきます。
  2. seachフォルダを、themesフォルダ中の現在のテーマフォルダにアップロードします。
    themes フォルダ
      |-
      |-current-theme (現在のテーマフォルダ)
          |-
          |-functions.php
          |-search フォルダ
             |-search.css
             |-search.js
             |-setting
    
  3. 表検索を実装するために、テーマフォルダ内の functions.php にcssファイルとjsファイルへのリンクとsearchフォルダへのパス(searchPath)を書きます。
    以下は、xxxというスラッグのページから呼び出す場合の書き方です。

例)

function cb_enqueue(){
  if (is_single ('xxx')) {
    echo '<script type="text/javascript">var searchPath 
="'.get_template_directory_uri()."/search/".'";</script>';
    wp_enqueue_script ('search_script', 
get_stylesheet_directory_uri()."/search/search.js", 
array('jquery'), false, true);
    wp_enqueue_style ('search_style', 
get_template_directory_uri()."/search/search.css");
  }
}
add_action ('wp_enqueue_scripts', 'cb_enqueue');
  1. テストして意図通りになっていればOKです。
  2. 意図通りになっていない場合は、設定ファイルを作り直し、上書きしてテストします。

CMSサイトへの設置は、サイト管理者に依頼するようにしましょう。

▲このページのトップへ