WordPressでクライアントからの要望でよくあるのが、バナーや写真のスライダーなんかを
自由に並べ替えができるようにしたい。
そんな相談を受けます。
言われなければ、固定ページとカスタムフィールドを使いやすくするプラグインのadvance custom fieldを使って、上限を決めてちゃちゃっと作っちゃいます。
これは、固定ページのタイトルに
バナー管理画面
とか書いといて、画像のアップロード、リンク、代替テキスト、別タブか、画面遷移かを書いてテンプレートに
1 | get_template_part('固定ページのid'); |
これで読み込んで、配列にして終わり。
実は配列にして取得して、表示するのがめんどくさかったの。
そこで、クライアントからの要望なので調べました。
…お母さん、見つかりました。
WordPressのバージョンによっては使えないのですが、3.4?あたりから導入された
カスタムメニューを使っちゃいますよ、奥さん。
調べても出て来る方法は、cssで背景に画像を敷く方法。
でも、それじゃだめなの。ナビゲーションとしては使いませんから。
今まで、WordPressの案件なんて、ブログ作ることはないから、(大体は、コーポレートとかアーティストのサイト。これの作り方も備忘録を兼ねていつか書きます。)いきなりフルカスタムで、テンプレート作っていきます。
男ならWordPressの機能になんか頼らねぇぜ！
って思ってましたが、辞めました。
一回覚えてしまえば、自分は最強だとしばらく錯覚するくらい便利です。
何はともあれカスタムメニューを有効化する
まず、カスタムメニューを有効にするために、自分の使ってるテーマフォルダにfunctions.phpに記入します。
なかったら作ってくださいね。
functionsですからね！最後のs重要ですよ！
1 | add_theme_support('menus'); |
プラグインを用意する
本日の用意するプラグインはこちら
ん、なんてシンプルな名前。
なぜか、自分の環境では、最新版はメディアアップロードで不具合が起きたので、一つバージョンを下げたらうまく動きました。
自分のWordPressのバージョンは3.6.1です。
このプラグインは設定とか一切ありません。
使い方もかなりシンプル。
ナビを作る。
↓
作成を押す。
↓
もう一回開く。
↓
Upload menu item imageをクリック
↓
メディアアップロードが開くので画像をアップロード
↓
出たー♪ヽ(*´∀`)ﾉ
となります。
ちなみに、このサムネイルが小さいと思ったら、以下を変更。
inc/walker.php
73行目付近
1 | $post_thumbnail=get_the_post_thumbnail($item_id,'thumb'); |
↓
1 | $post_thumbnail=get_the_post_thumbnail($item_id); |
そうすると問答無用でフルサイズになるので、あとは管理画面のcssでwidthでも決めてあげれば完璧。
そして、あとぼくが変更した点は、デフォルトだとカスタムメニューはdivごと吐き出します。
邪魔です。単純なリストで吐き出して欲しいじゃないですか。
functions.phpに
1 | <?phpwp_nav_menu(array('menu'=>'メニュー名','container'=>''));?> |
これで余分なdivはなくなります。
それ以外にも、吐き出すタグをいろいろカスタマイズした方はwp-admin/includs/nav-menu.phpを変更することでいろいろできます。
あとは表示するだけ
用意ができたら、あとは盛り付けです。表示したいところにを書きます。
今回はメニューの名前をbannerAreaとしたので
1 | <?phpphp wp_nav_menu('bannerArea');?> |
として、記入しました。
使い方によっては、カスタムメニューの画面が使いづらかったりするので、カスタムメニューの管理画面だけCSSを適応させる場合は
1 2 3 4 5 | <?phpif($pagenow==‘nav-menus.php’):?> <style type=“text/css”> /*ここにスタイル*/ </style> <?phpendif;?> |
下の図はスタイルシートでボックスの幅を変更しましたの図。ネストとか必要ないので広げました。
その他、項目の非表示などは、画面上部の表示オプションでもある程度は制御できます。
以上で、ユーザーが数も並び順も変更できる、ユーザーフレンドリーなバナー管理システムとなりました。
これを応用すれば、トップページによくあるスライダーの画像なんかにも使えます。
今後の課題は、カスタムメニューはドラッグするとネスト（入れ子）にする機能がありますが、これを無効にしないとユーザーが操作した時に吐き出すタグが変わってしまいます。
んーこれどうすんだろー。解決したら追記しますね。
以上、WordPressやプラグインのコアファイルもいじることになるので、バックアップをしっかりとった上、自己責任でお願いしますね。
2013/11/01 1:17 追記
どうやらWP SyntaxHighlighterのせいでまたしても崩れてた。
腹がたったので、Crayon Syntax Highlighterこっちに変えました。プンプン。
