ﾎｰﾑ
PC
WP
WordPress導入
固定ﾍﾟｰｼﾞｱｺｰﾃﾞｨｵﾝﾒﾆｭｰ

固定ﾍﾟｰｼﾞｱｺｰﾃﾞｨｵﾝﾒﾆｭｰ

≪ 独自CSSやJavascript追加 | Wp | ﾌﾞﾛｸﾞｱｺｰﾃﾞｨｵﾝﾒﾆｭｰ ≫

アコーディオンメニューを使おう

　HAIKの旧Topページのように、全部の項目をずらずら並べたメニューではなくて、このページの様に、「WordPress導入」関係のページなら、他の項目の詳細は折りたたんで、導入の所だけが詳細に表示される方が、閲覧者にとっても、とても親切なメニューになります。
　これをQHMでやろうとすると、わざわざサブメニューを作らなくてはいけなくて大変でした。
　WordPressのAccordeon Menu CKというプラグインを使うと、簡単にこれができます。
　論文や、本の様に、頭から思う順番に記事を並べて、関連項目だけを詳細メニュー表示にするようなことが出来るので、私にとっては、この機能はとっても重宝で、手放せません。
　ただし、このプラグインは、固定ページでしかうまく機能しませんでした。ブログの投稿カテゴリーの方は、別の方法を考える必要があります。

Menuを勝手に書き換えられないようにする

　ページ順を変更するために Nested Pages プラグインを入れてあれば、もう既にNested Pagesというmenuがあるのです。しかし、それは標準状態のままでは、プラグインがメニューを勝手に書き換えてしまいます。
　プラグインの Settings の所で、Manually sync menu. Manually sync page order. のタブに必ずチェックを入れます。勝手に書き換えられる心配をなくすなら、使用するメニューを Nested Pages とは別に用意するのもいいかもしれません。
　KANSOの場合は、使用するメニューを、「外観>ﾒﾆｭ-」の「位置管理」で、ブログトップメニューに指定します。プライマリの方は、ヘッダーの方に表示されますから、それが不要なら、こちらは設定しません。
　私は、「プライマリ」の方がサイドメニューだと勘違いしていて、いくらやってもうまくいかず、「以前上手くいったはずなのに」と、いらぬ時間をかなり費やしてしまいました。ブログトップメニューの方は、何も指定していなくても、Nested Pagesか何かのメニューが出てくるので、指定が反対であることになかなか気づけませんでした。
　cocoonの場合は、サイドメニューに表示するメニューは、位置管理では指定しません。

ウィジェットのサイドバーにAccordeon Menu CKを入れる

　「外観>ｳｨｼﾞｪｯﾄ」から、サイドバーにAccordeon Menu CKを入れます。「Accordeon Menu CK」というのがサイドバーに入るので、「編集」から、そこで使うMenuやStileを選択します。
　タイトルはここでは設定せずに、別に「ｶｽﾀﾑHTML」で設定する方が、タイトルにリンクを付けるなど、自由度が増します。

スマホ画面で不具合が

　KANSOやcocoonには、携帯使用時に、ヘッダーにメニューボタンを表示する機能が備わっています。これは正常に機能するなら、携帯使用時に、とても便利な表示です。
　ところが、PCで使う分には何事もなく機能するのに、携帯メニューの方は、階層が2階層までならうまく機能するのに、3階層になるとどうやっても、うまく動きませんでした。本来開かなければならないところで、メニューが閉じたままになってしまいます。
　これではアコーディオンメニューが使い物にならないので、その打開策として見つけたのが、cocooonの、本文下にメニューをぶら下げて表示する機能でした。
　「管理ﾒﾆｭｰ>cocoon設定>ﾓﾊﾞｲﾙ」から、「モバイルボタン時コンテンツ下のサイドバーを表示」にチェックを入れます。ヘッダーモバイルボタン」の所にもチェックを入れて、ヘッダ－に用意されたボタンが押されたら、本文下のメニューに移動するように設定します。

携帯時、cocoonで、ヘッダーモバイルボタンをヘッダー代りにする

　ヘッダーモバイルボタンを表示すると、結構な場所をとるので、その下に従来のヘッダーをさらに表示させると、野暮ったくなってしまいます。
　そこで、ヘッダーモバイルボタンの所は、PC版のヘッダーと同じ背景として、そこにホームページのタイトルと、メニューへのリンクボタンを配置します。
　ヘッダーモバイルボタン用のメニューは、「外観>ﾒﾆｭｰ」から、新たに作ります。
　私のメニュー設定は、写真のようになっています。

クリックすると拡大画像を表示します

　この設定で、css class の入力画面を出すには、画面上方の表示オプションをクリックして、「css クラス」にチェックを入れておきます。
　別途cssで、ヘッダー用の背景やタイトルの文字色を設定して、このボタンで、モバイル時、ヘッダーの代わりにします。PC版のヘッダーを表示する必要が無くなるので、「管理ﾒﾆｭｰ>cocoon設定>ﾓﾊﾞｲﾙ」から、「サイトヘッダーロゴを表示する」のチェックを外します。

ヘッダーモバイルボタン用css

/* ﾓﾊﾞｲﾙﾍｯﾀﾞｰ画像・背景色 */
/*.mobileHeader*/
#menu-mobile.mobile-header-menu-buttons.mobile-menu-buttons{
/*  background-image:url("https://www.neko01.com/pc/keitai/picture/keitai-header.jpg");
  background-repeat:no-repeat;
  background-size:100% 100%;  */
  background-color:#ece328;
}

　ここで、背景画像や、背景色を設定します。
　上の3行を活かして、4行目をコメントアウトすれば背景画像が、4行目だけを活かせば、背景色の設定ができます。

/* ﾓﾊﾞｲﾙﾍｯﾀﾞｰ文字色 */
/*.custom-menu-icon.menu-icon, 
.custom-menu-caption.menu-caption, */  /* 上2つメニューボタン表示 */
#menu-mobile .logo-menu-button.menu-button,
#menu-mobile .logo-menu-button.menu-button a, /* 3つﾍｯﾀﾞｰﾀｲﾄﾙ文字色 */
body li.navi-menu-button.menu-button{
/*  color:forestgreen;*/
}

　ここで、文字色の設定をします。
　上の２行は、ハンバーガメニュと、その下の menu という文字色を設定します。これをコメントアウトすると、これらが標準の文字色になります。
　下の３行が、HPのタイトル表示の文字色の設定です。これらを３行とも指定しないとうまくタイトルの色が変わってはくれないようです。これもコメントアウトすると、こちらも標準の文字色になります。

/* ヘッダー文字前ﾈｺ */
#menu-mobile .logo-menu-button.menu-button a:before{
  position:relative;
  top: 0px; left: 0px; 
  content:"";
  display:inline-block;
  width:2em;
  height:2em;
  background:url(https://www.neko01.com/pc/nekotori.gif) no-repeat;
  background-size:contain;
}

　これは、たとえばこのPCのページのように、タイトル文字の前に小さな画像を置きたい場合に使うcssです。そうでない場合は必要ありません。
　width height の所の数字を変更して、画像の大きさを調整してください。
　これらの css は、「独自CSSやJavascript追加」のやり方で設定します。

ヘッダーモバイルボタンをヘッダー代りにする時の不具合

　ヘッダーモバイルボタンをヘッダー代りにすると、携帯画面ではヘッダーモバイルボタンが、800px以上の大画面ではヘッダーが表示されます。
　ところがその中間のサイズの時に、ヘッダーモバイルボタンとヘッダーとが同時表示されて、重なってとてもぶさいくなことになって困っていました。
　これは、「管理ﾒﾆｭｰ>cocoon設定>ﾍｯｯﾀﾞｰ>高さ」の所を指定したためでした。空欄にしておくとディフォルトの高さになり、中間のサイズの時でも、２つが重なって不細工になることはありません。
　でも、ヘッダーの高さを指定できないのは、かなり細長いヘッダーを用意しなければ写真が細く歪んでしまうので、不格好になるのが困りものですが。

menuリンクの設定

　上のmobileメニュー設定画面で、URLが、#Accordeon-Menu-CK-2 になっています。これは固定ページで Accordeon-Menu-CK を使った場合の設定です。数字の所は変わることがあるようなので、ページのソースを表示して、いくらになっているか確かめておきましょう。
　 検索の所から表示したい場合や、投稿ページで、設定する場合は、#sidebar などとします。
　 id(#menu-)に入っている「mobile」というのが、メニューの名前になっています。これを指定しておかないと、cocoonの高速化の指定で、cssを圧縮すると、文字色が反映されなくなってしまうようです。

ページ下から、上部に戻るボタンの設定

　ページのフッタに、トップへ戻るボタンを表示すると、メニューから本文への復帰も楽になります。
　「管理ﾒﾆｭｰ>cocoon設定>ﾎﾞﾀﾝ」から、「「管理ﾒﾆｭｰ>cocoon設定>ﾓﾊﾞｲﾙ」から、「トップへ戻るボタンを表示する」にチェックを入れます。ボタンは下から、好きなのを選びます。

親を表示時に同じ階層のメニューを開く

　メニュー作成時、単純に、親階層に子どもをぶら下げただけでは、親を選んだ時には、その子どもが表示されません。そこで、親の下に、同じページを子どもとしても入れておくと、そこの階層のメニューが開くようになります。
　どちらも固定ページリンクでも、どちらかをカスタムリンクにしても構いません。メニューへの表示は、設定で変更することが出来ます。パンくずリストとの関係で、ファイル名を親の名前にしてあるはずなので、子どもの名前を、ファイルの内容に合わせるように変更します。

3階層になると難しい

　メニューを3階層にすると、上の2階層の時の様に簡単には行きません。子どもを開いても、メニューが閉じてしまいます。KANSOの場合、最初の同じページを、「固定ページリンク・カスタムリンク・固定ページリンク」と、サンドイッチにしてやると、何とかうまく機能してくれるようです。cocoonは、固定ページリンクを３つ重ねてもきちんと動きます。

「高速化」の設定でもエラーが

　cocoonには、「高速化」の設定があって、これを設定することで、かなりな高速化が期待できます。
　ただ、メニューを３階層にした場合、「HTMLを縮小化する」にチェックを入れると、メニューが開かない不具合が出ました。

サイドバータイトルデザインの変更

中央寄せ

　「独自CSSやJavascript追加」のやり方で、追加のcssを指定します。
　テーマによって、<h2>が使われるか、<h3>になるかが違うようなので、両方指定しました。

/* ｻｲﾄﾞﾊﾞｰ見出し位置中央寄せ*/
#sidebar h2.widget-title,
#sidebar h3.widget-title{
  text-align: center;
  margin: 5px 0px;
}

　ついでに、タイトルと。メニューとの間を少し詰めました。

ﾃﾞｻﾞｲﾝ変更

　上のcssの所に指定を追加すれば、サイドバータイトルのデザインの変更指定が色々できます。ボーダー（文字の周囲に表示される罫線）や、背景色、文字サイズなども指定すると、ホームページの表現がより豊かになります。
　例えば、このホームページでは、下のような指定にしています。

/* ｻｲﾄﾞﾊﾞｰ見出し*/
#sidebar h2.widget-title,
#sidebar h3.widget-title{
  text-align: center;
  font-size: medium ;
  font-weight:bold;
  color: #ff8c00;
  text-indent: 5px;
/*  border-top: 2px solid limegreen;*/
  border-bottom: 2px solid limegreen;  
  background: #ffffff;
  padding:0px;
  margin: 5px 0px;
}

styleの変更

　Accordeon Menu CKのディフォルトの設定では。メニューの横に・などの画像が表示されます。これは場所を結構とるので、このページの様に表示させないようにするためには、styleを設定します。
　背景色を設定すると、要素同士がくっついて同じ色で表示され、階層ごとに色を変えると、結構けばけばしくなるので、私は、背景を白(#FFFFFF)にしいます。Submenuは、レベルに応じて字下げするために、Paddingで調整しています。
　Title stileの所を入力すると、通常・リンクの文字色や、フォントサイズを設定できるようです。

クリックすると拡大画像を表示します　クリックすると拡大画像を表示します　クリックすると拡大画像を表示します
クリックすると拡大画像を表示します　クリックすると拡大画像を表示します

　styleができると、「外観 > ウィジェット > サイドバー > Accordeon Menu CK Menu」と進んで、「Menu Class」の所で、さっき作ったstyleを指定します。
　これを無指定にすると、元の・付きに戻ります。

折りたたまないメニューとの併用

　Accordeon Menu CKはメニューを折りたたむのが基本の動作であるため、下位項目は基本すべて隠されてしまいます。メニューの下の方などに、メイン部分とは別に、下位項目も開いたまま表示しておきたい場合は、Accordeon Menu CKで出来たソースを参考にして、「外観>ウィジェット>サイドバー」に、「カスタムHTML」でソースコードを挿入します。
　Accordeon Menu CKのソースコードの探し方は、Accordeon Menu CK用のcss定義の後、KANSOなら、「<section id=”accordeon-menu-ck-2″ class=”widget widget_accordeon-menu-ck”>」のような記述で始まって、「</section>」までです。
　cocoonは、「<aside id=”accordeon-menu-ck-2″ class=”widget widget-sidebar widget-sidebar-standard widget_accordeon-menu-ck”>」から、「</aside>」まで。
　Accordeon Menu CKでは、メニューの下位項目は、ソースコードにはきちんと出力されてはいても、リストのスタイル指定の所が、「<ul class=”content_1″ style=”display:none;”>」のようになっているために、表示されなくなっています。
　ここを、「<ul class=”content_1″ style=””>」のように加工すると、下位項目も表示するソースになります。
　このようなやり方で追加メニューを挿入すると、Accordeon Menu CKの部分とデザインが統一されるために、違和感がありません。
　また、アコーディオンメニューのタイトルの所は指定しないで、これでタイトルを挿入すれば、左メニューの、「HAIK(QHM)」の見出しの様に、見出しにリンクを入れることもできるようになります。

Accordeon Menu CKのcssも別ファイルに

　上の「折りたたまないメニューとの併用」をする場合には、一つ問題点があります。それは、スタイルがidで指定されているため、カスタムHTMLに挿入するタグにも、Accordeon Menu CKが吐き出したのと同じidを指定せざるをえない点です。ご存知の通り、一つのページに、2カ所以上同じidを指定するのはHTMLのルール違反です。
　それで、通常Accordeon Menu CKのcssは、ページソースのメニューのすぐ上に、ずらずらと書きだされるので、それをコピーして、別ファイルで保存します。それのid指定である「#」をすべてクラス指定の「.」に置き換えたものを、付け足します。

#accordeconck2 { margin:0;padding:0; }
#accordeconck2 .accordeonck_desc { display:block; }
#accordeconck2 li.accordeonck { list-style: none;overflow: hidden; margin: 0;}
#accordeconck2 ul[class^="content"] { margin:0;padding:0;width:auto; }
　　～
.accordeconck2 { margin:0;padding:0; }
.accordeconck2 .accordeonck_desc { display:block; }
.accordeconck2 li.accordeonck { list-style: none;overflow: hidden; margin: 0;}
.accordeconck2 ul[class^="content"] { margin:0;padding:0;width:auto; }
　　～

　このあたりのcssの扱いについては、別頁を参考にしてください。
　それから、ウィジェットのstyle指定を解除します。
　最後に、追加するメニューの「id=”accordeconck2″」指定であったところを、下の様にクラス指定にしてしまいます。

<ul class="accordeconck2 menu"><li id="menu-item-2095" class="menu-item menu-item-type-custom menu-item-object-custom accordeonck menu-item-2095 level1">
　　～

jQuery Vertical Accordion Menuにエラー

　同じことをするﾌﾟﾗｸﾞｲﾝとして有名なのは Query Vertical Accordion Menu です。ところがこれも、最近は更新をしていないようですし、見かけ上はうまく動いているようなのですが、裏ではどうも不具合が起きているようです。それで、私は Accordeon Menu CK を使うことにしました。

タイトルとURLをコピーしました