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

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

本サイトで使用している「プルダウンメニュー方式記事検索システム」の作成方法の第2段です。
最初のページ:プルダウンメニュー方式記事検索システムの作成-その(1)

目次

メインメニューを表示したい位置(例えば、header.phpファイル)に次のようなスクリプトを埋め込みます。

<div class="top_main" style="z-index:2">
<div class="top_menu">
<a onclick="showMenu('wp')" title="" onmouseover="document.body.style.cursor='default';" onmouseout="hideMenu('wp');" >Main Category</a>
....
この部分に他のメインメニューの記述が入る
....
</div>

1行目:全体を相対位置で指定するCSSクラスの指定です。style="z-index:2"は、このブロック表示の優先順位を他に比べて高くする指定です。class=”top_main”の段落の終了指定(</div>)はスクリプト全体の最後に入りますので忘れないように追加してください。
2行目:メインメニューを入れるCSSクラスの指定です。
3行目:メインメニューのイベントを発生させる指定です。マウスクリック(onclick)でCSSファイルで指定したsub_menu#wpを表示させるコマンドをJava関数に送ります。onmouseover以降のスクリプトは、マウスをメニューに載せたときのカーソルの形を指定しています。onmouseoutは、マウスを領域外に置いたときにサブメニューを隠すイベントを発生させる指定です。

<div class="sbmenu" id="wp" onmouseover="showMenu('wp')" onmouseout="hideMenu('wp')" >
<a href="http://hsuzuki.ddo.jp/weblog/?cat=37" onmouseover="showMenu('wp_cpl')" onmouseout="hideMenu('wp_cpl')" >Sub Category</a>
....
この部分に他のサブメニューの記述が入る
....
</div>

1行目:サブメニューのCSSクラスを指定します。onmouseoverでは、マウスを重ねたときにサブメニューを表示させるコマンドをJAVA関数に送る指定です。onmouseoutは、マウスが離れたときにサブメニューを隠すコマンドをJAVA関数に送る指定です。
2~4行目:サブカテゴリーのリンクを表示する設定です。onmouseoverはサブサブメニューを表示させる設定です。この設定ブロックをサブメニューの数だけ記述します。

追記(2008年12月27日)

Sub Categoryのタイトルは、これまで直接記述していましたが、CPLにサブカテゴリを独自に取得するプログラムを追加したので、自動的に取得できるようになりました。このことによって、何らかの理由でサブカテゴリを変更した場合にはその変更が自動的に反映されるようになりました。以下にそのスクリプトの概要を示します。

<div class="sbmenu" id="wp" onmouseover="showMenu('wp')" onmouseout="hideMenu('wp')" >
<a href="http://hsuzuki.ddo.jp/weblog/?cat=37" onmouseover="showMenu('wp_cpl')" onmouseout="hideMenu('wp_cpl')" ><?php c2c_get_recent_posts('1',"%post_subcategories%", '37'); ?></a>

<?php c2c_get_recent_posts('1',"%post_subcategories%", '37'); ?>がその指定です。

<div class="sub_sbmenu" id="wp_cpl" onmouseover="showMenuMulti('wp','wp_cpl')" onmouseout="hideMenuMulti('wp','wp_cpl')" >
<?php c2c_get_recent_posts( $num_posts = '10',
  $format = "%post_URL%",
  $categories = '37'); ?>
</div>
....
この部分に他のサブサブメニューの記述が入る
....

1行目:サブサブメニューのCSSクラスを指定します。onmouseoverでは、サブサブメニューにマウスを合わせたときにサブメニューとサブサブメニューを共に表示させるコマンドをJAVA関数に送る指定です。言い換えれば、マウスのポインターがサブサブメニューに移動してもサブメニューの表示が消えないようにするための設定です。onmouseoutは、マウスが離れたときにサブメニューとサブサブメニューを共に隠すコマンドをJAVA関数に送る指定です。
2~4行目:サブカテゴリーに属する記事の表示を指定するCPLの関数指定です。記事は10件を上限としています。各サイトの条件に合わせてサブカテゴリーのIDを変えてください。CPLによって処理される記事のタイトルは、その記事へのリンクが張られた状態(クリックで記事が表示される)で表示されます。詳しくは、プラグインcustomizable-post-listingsの操作マニュアルを参照してください。
この設定ブロックをサブメニューの数だけ記述します。

メニューの表示と非表示を切り替えるJava関数の指定です。挿入する位置はメイン・スクリプト・ブロックの前でも後でも結構です。

<script type="text/javascript">
<!--
function showMenu(menuId){
    document.getElementById(menuId).style.visibility="visible";
}
function showMenuMulti(menuId_1,menuId_2){
    document.getElementById(menuId_1).style.visibility="visible";
    document.getElementById(menuId_2).style.visibility="visible";
}
function hideMenu(menuId){
    document.getElementById(menuId).style.visibility="hidden";
}
function hideMenuMulti(menuId_3,menuId_4){
    document.getElementById(menuId_3).style.visibility="hidden";
    document.getElementById(menuId_4).style.visibility="hidden";
}
//-->
</script>

表示、非表示の関数とも引数が1つと2つの関数を設けてあります。2引数の関数は、サブとサブサブの両メニューの表示と非表示の設定を行うために設けたものです。言い換えれば、マウスのカーソルがサブサブメニューに移ったときにサブメニューの表示を残留させておくための関数です。

最終的なシステムの記述内容は、どの程度のメニューをカバーするかにもよりますが、かなり複雑なものになります。以下に、その構築の効果的な手順を紹介いたします。

  1. まず、1メインメニューの位置決めをCSSファイルにおいて記述します(3のaとbの部分です)。次に、メインメニューの表示部分を自分の挿入したい部分(例えば、header.phpファイルの部分)に1メインメニュー分だけ挿入します(4のaの部分です)。<div class="top_main" >の対である</div>を最後に挿入することを忘れないでください。次に表示設定を挿入したファイルの適当な部分にJava関数を挿入します(5の部分)。これらの設定を行ったら一度表示させて自分の希望する位置に表示されているか確かめます。原点の位置決めの微調整は、top_mainのtopとleftで行います。この位置決めが確定したら、top_menuで最初のmainメニューの位置決めを行いますが、これは通常、原点と一致させます(0,0)。
  2. メインメニューの位置が決まったら、サブメニューの位置設定をCSSファイルに記述します(3のc部分)。サブメニューの識別子は1つに止めておいてください。1で挿入した続き部分にサブメニューの表示設定部分(4のb)を挿入し、実際に表示して表示位置を調整します。
  3. サブサブメニューの位置決めスクリプト(3のd部分)をCSSファイルに記述します。表示設定は、CPLを使用して記事の設定を行います(4のc部分)。表示する記事の数ははじめは1つに止めておきます。
  4. 1ブロックの位置決めが出来上がったら、サブメニューとサブサブメニューの数を増やして互いの位置関係を確認します。
  5. 他のメインメニューについて1~4までの設定を繰り返し、表示の内容を充実させていきます。
  6. 次にワンブロックメニュー(Main、Sub、Subsubが全て1項目)のテンプレートを掲載しておきます。プラグインCPLは使用していません。CodeBoxのヘッダーバーの右の矢印をクリックすると内容が表示されます。あるいは、View Codeをクリックすると別ウィンドウが開いてテキスト形式でコードが表示されます。コピーする場合にはこの方が確実だと思います。
    (1) style.cssの内容をコピーし、自分の使用しているテーマのcssファイルの末尾に貼り付けます。
    (2) header.phpの内容をコピーし、自分のheaderファイルのシステムを表示したい位置に貼り付けます。
    (3) java_scriptの内容をコピーし、header.phpの末尾に貼り付けます。
    (4) 次に、ブラウザーで自分のサイトにアクセスし、メインメニューが表示されているか確認します。表示されていたら、それをマウスで左クリックして、サブメニューとサブサブメニューが表示されるか確認します。うまく表示されていたら、説明を参考にして内容を豊富化してください。

    (注意) この作業を行う前に、必ず挿入する自分のテーマ・ファイルのバックアップを取っておいてください。
/* PulldownMenu-Start */
div.top_main{
  position:relative;
  top:0px; left:10px;
}
div.top_menu{
  position:absolute;
  top:0px; left:0px;
}
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;color:#FF0000;
  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 */
/* Submenu */
div.sbmenu{
  position:absolute; visibility:hidden;
}
div.sbmenu a{
  /* background: url(images/folder.png) no-repeat left;*/
  background-color:#FFFFFF; /*#ddffff;*/
  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:0px;}

/* Subsubmenu */
div.sub_sbmenu{
  position:absolute; visibility:hidden;
}
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 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#wp_cpl { top:22px;left:135px;}
/* PulldownMenu-END */
<?php /* Pulldownmenue-Start */ ?>
<div class="top_main" style="z-index:2">
<div class="top_menu">
<a  onclick="showMenu('wp')" title="" onmouseover="document.body.style.cursor='default';"  onmouseout="hideMenu('wp');" >Main Category</a>
</div>
<?php /* Sub Menu*/ ?>
<div class="sbmenu" id="wp" onmouseover="showMenu('wp')" onmouseout="hideMenu('wp')" >
<a href="Adress of Sub Category" onmouseover="showMenu('wp_cpl')" onmouseout="hideMenu('wp_cpl')" >Submenu: SubCategory </a>
</div>
<?php /* Subsub Menu*/ ?>
<div class="sub_sbmenu" id="wp_cpl" onmouseover="showMenuMulti('wp','wp_cpl')" onmouseout="hideMenuMulti('wp','wp_cpl')" >
<a href="Adress of post" >Subsubmenu: Title of Post</a>
</div>
</div>
<?php /* Pulldownmenu-End */ ?>

このシステムの動作確認は、WindowsシステムにおいてIE7、Firefox3.03、Google Chrome0.3.154.9で行っています。基本的動作については、不具合は発生していませんが、細かい点でブラウザーによる相異が出ていますのでその問題点について明らかにしておきます。

  • サブサブメニューがサブメニューに対して若干ズレて表示されます。IEの場合にはほとんどズレはありませんが、FirefoxとChromeの場合にはズレが生じます。しかし、このズレもサブからサブサブへのマウスの移動には支障がない程度のものです。
  • class="top_main"でstyle="z-index:2"と指定すれば、サブサブメニューの表示はバックのヘッダーやポストに対して優先されて表示されます。FirefoxとChromeではこの優先順位は問題なく貫徹されますが、IEの場合は、バックにおいてリンクが張ってある部分を踏んでしまうと表示が消えてしまうことがあります。この原因はよくわかりませんが、当サイトでは今のところ不具合は起きていません。この不具合が特に問題になる場合には、以下の参考サイトにz-indexに関する記事が掲載されていますので参照してください。

次の記事は、本システムを構築する上で特に参考にさせて頂いた記事です。一次プルダウンメニューに関しては大部分をこの記事に依存しています。
ココログのカスタムCSSの編集~プルダウンメニューの作成~
また、次の記事では、重ね合わせの優先順位を決定するコマンドz-indexに関する実験データとその説明が掲載されています。合わせて参考にしてください。
IEとFirefoxでz-indexの扱いが異なる


関連記事



コメントを残す




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