以前、管理画面カスタマイズってことでアクションフックについて書きましたが、
中々まとめる時間が取れず今に至る 1shiharaT です。
一気にまとめるとすごい量になると思うので、何回かに分けて書きたいと思います。
今回は、 WP Pointer API の実装方法についてです。
初心者の方に使い方を教える一番の方法… ってなんだろう？
WordPress って、思ったより多機能です….よね。
僕のクライアントさんは企業のWeb担当者の方のような、普段は余り Web に関わらないような方が結構な数を占めます。
そんな中、デフォルトの機能に加えカスタム投稿タイプだったり、カスタムフィールドだったり、
いろいろなカスタマイズをして納品とするわけですが、
やっぱり最初は使い方を教える所から始めないといけません。
GrowGroup では、管理画面に使い方マニュアルのようなものを貼り付けていたり,
Skype でレクチャーしたり、しておりまして、最近は操作説明動画を撮影して管理画面に貼り付けていました。
でも、やはり説明出来ない所は多いですし、分からない所はやっぱり出てきます。
そんな中なんかもっといい方法ないかなーと思って色々考えていました。
よくある「ツアー形式」の使い方レクチャー
最近だと ( とは言っても結構昔かも知れませんが ) 会員登録後、自動的に始まる「使い方ツアー」なるものを見たりします。
これを WordPress で実装できたらなぁと思いまして、今回の WP Pointer にたどり着きました。
※ ちなみに、「使い方ツアー」なるイメージは下のリンク先のようなイメージです。
http://bootstraptour.com/
WP Pointer は バージョン 3.3 から搭載されている API です。
日本語での解説は高橋文樹さんの記事しか見つかりませんでした。
よくプラグインをインストールした時に見かけるかもしれません。
書こうかな… と思ったら既に Gist で使えそうなコードがあったので紹介します。(手抜き)
https://gist.github.com/DevinWalker/7595475
これを元に、ちょっとだけ変更を加えました。
最初のは、1ページに1つのポインターのみ設置になっていたので、無理矢理複数設置可能にしました。
67行目から記述が始まる $adminpages という変数に配列として値を渡すことで実装できます。
// 例
$adminpages = array(
// 表示させたいページのスクリーンIDを指定
'customize' => array(
// 1ページに何個も表示させたいため、更に囲みます
array(
'content' => 'ポインターの内容をここに。h3 タグがタイトルとして装飾されます。',
// ポインターを表示したい要素のセレクター
'id' => '#menu-appearance',
'position' => array(
// ポインター矢印の位置 : top left right bottom
'edge' => 'left',
// ポインターの位置 : top left right bottom
'align' => 'left'
) ,
// ボタンのテキスト
'button2' => '次へ' ,
// ボタンをクリックした時に実行する挙動
'function' => 'window.location="' . admin_url('widgets.php?welcome_tour=2') . '";'
) ,
) ,
);
雑なコードで申し訳ないです….
まだまだ改善の余地ありまくりなので、
管理画面から内容を操作できるようにプラグイン化しますー！
