プルダウンメニュー方式記事検索システムの作成-その(1)

投稿日: 2008年11月15日 | カテゴリ:『ワードプレス』>プログラムの開発と改良

メインカテゴリー、サブカテゴリー、及びそれに属する記事を芋ずる式に検索できるマウスオン・2段階式プルダウンメニュー記事検索システムを作成してみました。1ヶ月ほど運営してうまく動作しているのでその作成法を紹介いたします。Wordpressなどのコンテンツ管理システムをより使いやすくするには便利な機能です。

目次
  • メインメニューをマウスでクリックするとサブメニュー(サブカテゴリー)が表示されます(注1)。
  • サブメニューのいずれかにマウスのポインターを合わせるとその欄がハイライト化され、その右にそのサブカテゴリーに属する記事の一覧が10件以内で表示されます。下の図がこの状態を示しています。


  • 閲覧したい記事にマウスを移動させ、ハイライト化していることを確認し、クリックすればその記事を開くことができます。
  • マウスをシステムの圏外に移動すれば全ての表示は消えます。
  • 更に詳しい内容については、本サイト最上部にある検索システムを実際に操作してみてください。

    (注1) 最初は、メインメニューにマウスのポインターを合わせるだけでサブメニューが表示されるようにしましたが、記事検索以外でマウスのポインターがここを通過するとメニューが表示されて目障りなので、最初のサブメニューの表示だけはマウスのクリックでイベントを発生させるようにしました。マウスオンで表示したい場合には、top_menuクラスのonclichをonmouseoverに変えてください。

  • メニューの位置は、CSSファイルで指定します。
  • マウス操作によるイベントの処理はJavaスクリプトに渡され、メニューの表示・非表示の動作を行います。したがって、表示するブラウザーにおいてJavaスクリプト実行許可が必要です。
  • 最終的な記事の表示はWordpressのプラグインである多機能記事整理システム(CPL)を使用しています。記事のリンクを直接挿入することもできますが、各サブメニューに記事がたくさん含まれている場合には、大変な労力が要ります。また、新しい記事が投稿された場合には、そのリンクをいちいち記入しなければなりません。したがって、プラグインCPLの導入をぜひお勧めいたします。その導入・使用方法については、カテゴリ「記事整理システム(CPL)」に掲載されている記事を参照してください。
  • 初期表示に占める領域が小さくて済みます。芋ずる式に表示が展開されていくシステムなので、初期表示される情報量は少なくて済みます。
  • これに対して最終的に表示される情報量は大きな量を潜在的に含めることができます。メインカテゴリー=8、サブカテゴリー=8、記事数=10とすれば、単純に計算してこのシステムの潜在表示記事数は、8×8×10=640になり、個人のウエッブサイトではほとんど全部の記事を網羅することができます。また、工夫すれば表示する記事の数を増やすこともできます。
  • 記事の検索がスピーディにできます。マウスのクリックと移動によって記事の検索ができるので記事を系統的にスムーズに見つけ出すことができます。他の方法、例えば、「分類」から検索する方法では、分類のサブカテゴリーを選択するとそれに属する記事がボックス形式(当サイトの場合)で表示され、それをスクロールさせて目的の記事を探すことになります。このカテゴリーに目的の記事がない場合には、さらに他のサブカテゴリーを選択し記事を探すことになります。このシステムの場合、マウスの2度の操作で記事を表示させることができるので目的の記事を迅速に検索することができます。

本サイトでは、表示ブロック全体の位置決めは、相対位置(relative)指定で行い、ウエッブページの特定の位置にシステム全体を埋め込む方式にしています(例えば、header.phpファイルの所定の位置に埋め込む)。これに対して最初の位置決めを絶対位置で指定することもできます。

div.top_main{
  position:relative;
  top:0px; left:10px;
}
div.top_menu{
  position:absolute;
  top:0px; left:0px;
  font-size:14px; font-weight:bold;
  font-family:tahoma;
  color:white;
}
div.top_menu a{
  display:block; float:left;
  width:98px; height:20px;
  padding:0px; margin-right:0px;
  background-image: url(images/folder-10.gif);
  border:1px solid #c0c0c0;
  line-height:20px; vertical-align:middle;
  text-align:center;
  text-decoration:none;
  font-size:14px; font-weight:normal; text-decoration:none;
  font-family:tahoma;
}
div.top_menu a:link { color: white }       /* unvisited link */
div.top_menu a:visited { color: white }   /* visited links */
div.top_menu a:hover {color:blue;text-decoration:underline;}
div.top_menu a:active { color: white }    /* active links */

2行目:メインメニューの位置決めの方式を定義します。
3行目:上記で行った相対位置(原点)からの絶対位置でメインメニューの最初の位置を定義します。
4~6行目:フォントの体裁を定義します。
8~19行目:メインメニューの体裁(ボックスとフォント)を指定します。
9行目:メインメニューをボックス形式にします。
10行目:ボックスのサイズを指定します。埋め込むメインメニューの文字数と区切りラインを考慮して調節してください。
12行目:ボックスの体裁を決めるイメージを指定します。
13行目:ボックスを囲む枠線の太さと色を指定します。各メニューの区切りとして機能します。
14行目:文字列の行間と行の垂直方向の位置を指定します。
15行目:テキストの横位置の指定
17~18行目:フォントの体裁の指定。
20行目:メインメニュー・リンクの初期状態のフォント体裁を指定します
21行目:訪問済みのフォントの体裁を指定します
22行目:マウスを当てたときのフォントの状態を指定します
23行目:マウスをクリックし、イベントを発生させた時のフォントの状態を指定します

div.sbmenu{
  position:absolute; visibility:hidden;
}
div.sbmenu a{
  background: url(images/folder.png) no-repeat left;
  background-color:#FFFFFF; 
  display:block;
  width:135px;
  padding:3px 3px 3px 20px;
  border: solid 1px;
  border-color: #C0C0C0;
  margin:-1px 0px 0px 0px;
  font-size:12px; font-weight:normal; text-decoration:none;
  font-family:"MS Sans Serif",tahoma;
}
div.sbmenu a:link{ color: blue !important}
div.sbmenu a:visited { color: blue !important}
div.sbmenu a:hover{ color: white !important; background: #3366FF}
div.sbmenu a:active { color: silver !important}
div.sbmenu#wp { top:22px; left:100px;}
	....
	この部分に他のサブメニューを記述
	....

2行目:サブメニューの位置とイベント発生前の初期状態(hiddenは表示されない)の指定です。
4~15行目:サブメニューのボックス、そこで使用されるフォントの体裁を指定します。
5行目:ボックスの先頭に表示するアイコンのイメージ・ファイルを指定します。本サイトでは16×16 ピクセルの大きさのイメージを使用しています。
6行目:ボックスの背景色を指定します。
7~8行目:ボックスの様式(ブロック形式)と幅を指定します。幅はサブメニューに使用するタイトルの文字列の長さを考慮して調整してください。
9行目:ボックスに対する文字列の相対位置を指定します。先頭にイメージを入れる場合には、その大きさを考慮して調整してください。
10~11行目:ボックスの外枠の太さと色を指定します。
12行目:上下のボックスを1px重ねる指定です。
13~14行目:フォントの体裁を指定します。
16~19行目:リンクのイベント別の指定です。メインメニューと同じです。
20行目:サブメニューの最初の位置を絶対座標(top_mainで指定した位置からの)で指定します。topは縦方向の位置、leftは横方向の位置です。#wp は各メインメニューの識別子で、表示・非表示のイベントの発生の際に使用されます(後述)。以降、メインメニューの数だけこの設定を続けます(… の部分に続いて記述します)。

div.sub_sbmenu{
  position:absolute; visibility:hidden;
}
div.sub_sbmenu a:link{ color: blue !important}
div.sub_sbmenu a:visited { color: blue !important}
div.sub_sbmenu a:hover{ color: white !important; background: #3366FF}
div.sub_sbmenu a:active { color: silver !important}
div.sub_sbmenu a{
  background: url(images/text.gif) no-repeat left;
  background-color: #ffffcc;
  display:block;
  width:auto;
  padding:3px 3px 3px 20px;
  border: solid 1px;
  border-color: #C0C0C0;
  margin:-1px 0px 0px 0px;
  font-size:12px; font-weight:normal; text-decoration:none;
  font-family:"MS Sans Serif",sans-serif,tahoma;
}
div.sub_sbmenu#wp_in { top:22px;left:260px;}
div.sub_sbmenu#wp_cpl { top:42px;left:260px;}
	....
	この部分に他のサブ・サブメニューの設定を続けます
	....

基本的にはサブメニューと同じ設定です。特に異なるところは、ボックスの幅をautoにして記事のタイトルの長さに自動的に調整されるように設定してあることです(12行目)。先頭に表示するイメージは、ユーザーの好みに合わせて適当に選択してください。本サイトでは16×16 ピクセルの大きさのイメージを使用しています。
20行目:サブメニューの識別子の設定と最初のサブサブメニューの位置の指定です。以降、サブメニューの数だけ指定します。

次のページに続く


関連記事



コメントを残す




空欄に計算式を満たす数値を記入してください(必須)