説明
5.2の新機能「サイトヘルス情報」では、現状のサイト情報をクリップボードにコピーする機能がある。この機能の実装方法を調べてみると、clipboard.jsが利用されていた。
サイト情報のコピー機能
まずは「サイトヘルス情報」ページを開いて、サイト情報のコピー機能がどのように実装されているのか調べていく。この機能としては「サイト情報をクリップボードにコピー」ボタンがクリックされると、サイト情報がクリップボードにコピーせれる仕組みである。
このボタン部分をブラウザの開発者向け機能で確認すると、data-clipboard-text属性にサイト情報が丸ごと入っていることがわかる。
<button type="button" class="button copy-button" data-clipboard-text="`
### wp-core ###
version: 5.2
site_language: ja
user_language: ja
(省略)
`">
<span class="success" aria-hidden="true">コピーしました。</span>
これに対し、/wp-admin/js/site-health.jsを覗いてJavaScript側がどのようになっているかを確認。次は関連する部分を抜粋したものとなる。
var clipboard = new ClipboardJS( '.site-health-copy-buttons .copy-button' );
clipboard.on( 'success', function( e ) {
var $wrapper = $( e.trigger ).closest( 'div' );
$( '.success', $wrapper ).addClass( 'visible' );
wp.a11y.speak( __( 'Site information has been added to your clipboard.' ) );
} );
ClipboardJSクラスのインスタンスを生成し、'success'イベントでspan要素に対して操作している。肝となるクリップボードに対してテキストをコピーする部分はまったく見えない仕様のようだ。続いて、ClipboardJSクラスが定義されているファイルを調べると、/wp-includes/js/clipboard.jsが見つかった。
このclipboard.jsは、/wp-includes/script-loader.phpにて次のように登録されている。
$scripts->add( 'clipboard', "/wp-includes/js/clipboard$suffix.js", array(), false, 1 );
(省略)
$scripts->add( 'site-health', "/wp-admin/js/site-health$suffix.js", array( 'clipboard', 'jquery', 'wp-util', 'wp-a11y', 'wp-i18n' ), false, 1 );
clipboard.jsのハンドル名は'clipboard'として、site-health.jsはこの'clipboard'に依存する指定でハンドル名'site-health'として登録されている。
実際に使ってみた
実際にプラグインで使う場合はまず wp_enqueue_script関数を使用する。
if ( wp_script_is( 'clipboard', 'registered' ) ) {
wp_enqueue_script( 'clipboard' );
}
HTML側はクリップボードにコピーする内容が決まっている場合は次のような感じになる。クリック対象の要素は、サイトヘルス機能のようにbutton要素でもよいが、その他の要素でも問題はなく、ここではspan要素を使っている。
<span class="dashicons dashicons-clipboard" data-clipboard-text="コピーする内容をここに!"></span>
クリップボードにコピーした際に表示を変更するようなことをしないのであればコードは1行でよい。
const clipboard = new ClipboardJS( '.dashicons-clipboard' );
応用例
HTMLを出力する際にコピーする内容が決まっていない場合は、data-clipboard-text属性ではなく、data-clipboard-target属性を使用すればよい。
<textarea id="memo"></textarea>
<span class="dashicons dashicons-clipboard" data-clipboard-target="#memo"></span>
この例であれば、クリック時にtextarea#memoの入力内容がクリップボードにコピーすることができる。
以上のように、clipboard.js(ClipboardJSクラス)はシンプルなコーディングでクリップボードのコピー機能を実装できる。Zeno Rochaさん、ありがとう。
最終更新 : 2019年05月15日 12:59
関連
お勧め
edit_custom_thumbnail_sizesフィルターを使ってみた(2022年5月30日 更新)
アップロード済みの画像は、トリミングや回転、反転といった編集が可能である。6.0.0で追加されたedit_custom_thumbnail_sizesフィルターは、編集された内容を反映させるサイズを拡張するものだったので、さっそく使ってみた。
WordPressと組み込まれている主なJavaScriptライブラリのバージョン一覧(2018年5月27日 更新)
WordPressの更新が遅れていたサイトを少し前に更新したところ、jQuery UI sortableを使って拡張したページに不具合が発生しました。WordPressの更新に伴って内部のjQuery UIが更新されたことに起因すると思われ、これを機にWordPressとそれに組み込まれたJavaScriptライブラリのバージョンを確認してみました。
投稿日の検索が自由自在に(2015年3月7日 更新)
WordPress 3.7.0ではWP_Date_Queryクラスが追加され、WP_Queryクラス(もちろん query_posts関数でも)で利用できるようになった。このWP_Date_Queryにより、○年○月○日以前や以降の投稿情報を取得したり、○年○月○日から○年○月○日の範囲の投稿情報を取得したりといったことが、容易に行えるようになった。
新テーマ「Twenty Twenty-Three」にはfunctions.phpがない(2022年10月6日 更新)
WordPress 6.1に同梱された新テーマ「Twenty Twenty-Three」を見てみると、そこには見慣れたfunctions.phpがない。Full Site Editing(FSE)対応テーマってこんな感じなのかと思いつつ、テーマの設定がどうなっているのか調べてみた。
WordPressのコーディングスタンダードとPSR-2がかみ合わない(2018年5月27日 更新)
先日パソコンのストレージを換装して開発環境を再構築。エディタのEclipseは「Neon(4.6)」から「Oxygen(4.7)」へ切り替わった。コードを書き始めるとそこはかとなく違和感があり、調べていくとPHPの「Code Style(Formatter)」が「PSR-2」に設定されていることが原因だった。