お勧めのドロワーメニュー

色々と試してみたけど、やはり現時点では”Slidebars.js”が一番だと思います。
WordPressで使う場合は、テーマフォルダ内sidebar.phpの中身を
footer.phpの中に移して、このファイルだけを読み込ませるようにします。
その他、導入時に注意しなければならない点をいくつか挙げておきます。
スクリプトを読み込む位置および順番。これを間違うと動きません。
簡単な改造はscripts.jsの方で行い、メインのスクリプトには手を付けない方が良いでしょう。
開閉をトグルボタンにしたり、領域以外でもサイドバーを閉じるようにすることは簡単にできます。
ヘッダー部分を固定したい場合は、divタグのcanvas=”container”の上に
固定したい部分のcanvasが別に必要です。
スライドバーの動きを変えたい場合、off-canvasのところは動きに応じたものに変える必要があります。
これがなされていないと、変な動きになります。
pushの場合はslidebars.cssも一部書き換えが必要かな。
以上、これだけのことを守れば一応ちゃんと動くはずです。
あとはCSSの問題でしょう。

前の記事の続き

今回採用させてもらったテーマは”Mobile Friendly”というもので、
最初からスライドバーを出現させるスクリプトが備わっている。
しかも片方からだけではなく、左右両方から出てくるやつがだ。
しかし、運用の仕方によっては長所ばかりの機能が付いている訳ではない。
例えば、スライドバーを開いて、それを閉じるにはどこをクリックまたはタップしても
OKのような作りになっている。
これは一見便利なようだが、このブログのように階層があるメニューの場合はNGである。
理由は、ポップアップのメニューが開くと同時にサイドバーは閉じてしまうからだ。
逆に階層構造ではないメニューには最適かもしれない。
では、どのような対処をしたかというと、階層の親メニューだけクリックが無効になるように
スクリプトに少し加筆した。
あと、最初から入っている検索フォームは使い物にならないようだ。
自分でsearchform.phpを用意すれば問題なしかと思いきや、そうは問屋が卸さない。
ここでも前述のクリック問題が発生する。
アコーディオンメニューは安易にプラグインを使うのではなく、
十行足らずで間に合うfunctionをこれまた加筆すれば良いでしょう。
あとはCSSで如何に見栄え良くするかの問題です。
スライドバーの開閉にはトグルボタンを取り付けてカッコよく見せたいのですが、
このスクリプトを改造するのは我々素人にはちょっと無理でしょう。

遅ればせながら・・・

このブログもやっとレスポンシブ化に着手。
今回は両サイドから出てくるスライドバーを採用することに。
右か左から出てくるスライドバーはものすごい数のスクリプトが公開されていますが、
両方から出てくるものは多くはありません。
あったとしても機能的に首を傾げたくなるものや、
やたらとファイルのサイズが大きかったりします。
面倒だからとテーマも探しているうちに、スライドバーのスクリプトを
含んでいるものがあったので、それを採用することに。
しかし、望んではいないというか使わないであろうスクリプトもかなり含まれていましたので、
スライドバーに関するものだけ、と言ってもたった一つだけ採用させてもらうこにしました。
結局テーマのスタイルシートも従来のものを使うことにしました。
スマホやタブレットなどのデバイスへの対応は、
プラグインのマルチ・デバイス・スイッチャーを利用。
基となるテーマはレスポンシブ化が既になされているので、
あまり変更するところはなかったような気がします。
一番大変だったのは、やはりスライドバーとカスタムメニューがそのまま使える
アコーディオンメニューの導入と調整です。
どのように大変だったかは次の記事で・・・。

マルチサイトでウィジェットを共有する

下のコードで簡単にできますよ!なんて書いてあるのを見つけてやってみると、
結局できなくてはまってしまっている人が結構いらっしゃるみたいですね。

<?php
switch_to_blog(n); //nはサイトIDの数字
dynamic_sidebar( 'XXX' ); //XXXはサイドバーのID名
restore_current_blog(); //元のブログに戻すためのコード
?>

何を隠そう私もそのうちの一人で、以前は”Global Content Blocks”というプラグインの力を借りて
何とか表示できていました。
しかし、いつの間にかこの方法もNGとなり、色々と方法を探っていたところ
“Multisite Shared Sidebar”というプラグインを見つけることができました。
作者は日本の方ですから、使い方も分かりやすく説明してあります。
ただ、ちょっと説明不足のところがあると感じたのは
プラグインの有効化はネットワーク全体でしなければならないというところです。
あと、ウィジェットの一部分を取得ということはできないようです。
表示させたくない部分はCSSのdisplay:none;で対応させましょう。
DEMOとしてはサイドバー一番下の”Affiliate”がそうです。
このプラグインはファイル数も少ないし、何よりも分かりやすいので、
絶対にお勧めです。

カスタムメニューのソース的整形

カスタムメニューをデフォルトのまま導入すると
最初のliタグが改行されずに吐き出されてしまう。
この問題を手っ取り早く解決するには、
”ulタグを自動的に入れない”という以下のようなテンプレートタグを使う方法がある。

<?php wp_nav_menu( array( 'items_wrap' => '%3$s' ) ); ?>

その代り自分で直接header.phpにulタグを書き込む必要がある。
デフォルトだと”menu-”という接頭語的なものが自分が設定した
メニューのタイトルに付くが、これも回避できる。
Id名とかClass名はできるだけ短い方が良いと思うし、
必ず一緒に付くclassも必要がないと感じれば省くことができる。
因みに、下のように書くとデフォルトで吐き出されるcontainerタグも無しにできる。
また、前述したテンプレートと合体して使うこともできる。

<?php wp_nav_menu( array( 'container' => '' ) ); ?>

リストタグに付くやたら長くて多いId名やClass名を省くやり方は
多くの方が説明していらっしゃるので、そちらを参照してください。

カスタムメニューで任意のアイテムに”current”を付ける

例えば、このブログのような運営をしている場合、メニューの「WEBLOG」というところには
index.phpにより表示される記事のページにしか”current”というクラス名は付かない。
言い換えれば、投稿やコメントの個別ページ、カテゴリー、アーカイブ、検索などのページには
“current”は付かない。
これをWEBLOGに関するところでは全部”current”が付くようにする方法は、
WordPress Codexに条件分岐のテンプレートタグとして以下のように載っています。

<?php
add_filter('nav_menu_css_class' , 'special_nav_class' , 10 , 2);
function special_nav_class($classes, $item){
     if(is_single() && $item->title == "Blog"){ //この行は状況により変更が必要
             $classes[] = "special-class";
     }
     return $classes;
}
?>

因みに”is_single()”の条件分岐だと投稿やコメントの個別ページにしか”current”は付かないようだ。
“is_singular()”だとカテゴリー、アーカイブ、検索のページまでカバーされる。
ただ、注意しないとブログのトップページに”current”が重複して付いてしまったり、
他のアイテムを表示しているときにも同時に”current”が付いてしまう。
除外するための”!is_xxx()”(”xxx”のところには”single”,”singular”,”page”などが入る)を
忘れないようにしよう。

“weblog”というタイトルの公式テーマが登場して・・・

ちょっと都合が悪いことになってしまった。
というのも、このブログはサイトアドレス (URL)とテーマフォルダ名を同一にしていたため、
更新のお知らせが表示されるようになったのだ。
自分自身は更新ボタンなんかまずクリックすることはないだろうが、
新し物好きの人やセキュリティを重視する人などは進んでクリックするかもしれない。
デフォルトのファイルが同じでない限り、誤って更新すると大変なことになりそうだ。
この問題の対策としては、functions.phpファイルに更新のお知らせが表示されないような
コードを書き加えるか、サイトのアドレスとテーマフォルダ名を異なるものにするしかないようだ。
筆者自身は前者の対策がベターだと思う。
ただ、コードによっては特定のテーマだけを対象にできないものもあるので注意が必要だ。
後者の対策は色々と変更しなければならない点が多いので、あまりお勧めできない。
上の二つしかないと書いておきながら何だが、
他の対策としてはstyle.CSSファイルのバージョン番号を上げておくというのもあるそうだ。
ひょっとして、これが一番手っ取り早かったりして・・・。

既存サイトの子テーマフォルダ名を変更するとき

注意点がいくつかある。
もちろん、フォルダ名をただ変えただけでは駄目だ。
先ず、テーマを有効化し直さないといけない。
これで万事OKかと思ったら、そうは問屋が卸さない。
ディレクトリをphpのコードで取得していた場合は何の問題もないが、
画像などタグの直入力でアップしていた場合は変更が必要だ。
あと、ウィジェットで使っていたものは使用停止中になるので、
戻してやる必要がある。
タグの入力し直しが多い場合は、データベースを弄った方が楽かもしれない。

検索結果に欲しいヒット件数

検索結果:○○○ の下辺りに、
何件の記事がヒットしたかの件数表示があれば有難いと思うのは筆者だけだろうか。
ググってみると、件数取得のコードはたったの一行です。
前後に文章を入れてCSSのためのタグを加えたとしても一行で済みます。
編集するファイルはテーマフォルダ内のsearch.phpです。
この編集は絶対にお勧めです。