前の記事の続き

今回採用させてもらったテーマは”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です。
この編集は絶対にお勧めです。

スクロールしたときにサイドバーを追従させる

プラグインの導入なしでやろうと色々試してみましたが、なかなか首尾よくいきません。
結局プラグインのお世話になることに。
筆者の感想としては、「Standard Widget Extentions」が設定が楽なので導入しやすいかと。
理由はテーマフォルダ内のファイルを弄る必要はまったくありませんし、
3カラムにも対応しているところが実に素晴らしい。
プラグインなしの挑戦をしているときに見つけたNGなスクリプトを幾つが挙げておきます。
・スクロールしたときにサイドバーは追従するが、ページトップに戻ってもサイドバーは戻らない。
・PCではちゃんと機能するが、スマホやタブレットではおかしな動きになる。

以前からずっと気になっていた、スクロールすると真っ白けになってしまうサイドバーからはもうオサラバです。
ただ、逆に固定や個別ページでコンテンツの方がサイドバーより短い場合は・・・?