add_thickbox()

add_thickbox() は、WordPress に組み込まれている JavaScript ライブラリ Thickbox を有効化するための関数です。

Thickbox は、画像や Web ページのコンテンツをモーダルウィンドウで表示するためのスクリプトで、特に管理画面でのメディアアップローダーやポップアップの実装に利用されます。

この関数を使用すると、Thickbox の JavaScript と CSS を簡単に読み込むことができます。

機能の説明

add_thickbox() は、Thickbox のスクリプトとスタイルを WordPress に追加するための関数です。主に以下のような用途で利用されます。

• 画像やコンテンツをモーダルウィンドウで表示する
• 管理画面でカスタム設定画面を開く
• 投稿編集画面などでポップアップ機能を利用する

Thickbox は、WordPress のメディアアップローダーにも使用されており、独自のカスタム UI を構築する際にも便利です。

シンプルなコード例

function my_enqueue_thickbox() {
    add_thickbox();
}
add_action('wp_enqueue_scripts', 'my_enqueue_thickbox');

• add_thickbox(); を実行することで、Thickbox の JavaScript と CSS を読み込みます。
• wp_enqueue_scripts フックを使い、テーマのフロントエンドで適用します。

使い方の説明

基本的な使い方

Thickbox を有効化した後、画像リンクに thickbox クラスを付与すると、クリック時にモーダルウィンドウで表示できます。

サンプルコード

function my_enqueue_thickbox() {
    add_thickbox();
}
add_action('wp_enqueue_scripts', 'my_enqueue_thickbox');

<a href="image.jpg" class="thickbox" title="サンプル画像">
    <img src="thumbnail.jpg" alt="サムネイル">
</a>

thickbox クラスを指定したリンクをクリックすると、画像がモーダルウィンドウで表示される。

カスタムページをモーダルで開く

Thickbox を使って、特定のページをモーダルで開くことも可能です。

<a href="admin-ajax.php?action=my_popup&TB_iframe=true&width=600&height=400" class="thickbox">カスタムポップアップ</a>

パラメータ

• TB_iframe=true：ページを iframe で読み込む
• width=600&height=400：ポップアップのサイズ指定

一緒に使うことが多い関連タグ

wp_enqueue_script()

Thickbox のスクリプトを手動で登録する場合に利用。

wp_enqueue_script('thickbox');
wp_enqueue_style('thickbox');

admin_enqueue_scripts

管理画面のみで Thickbox を有効化する場合に使用。

function my_admin_thickbox() {
    add_thickbox();
}
add_action('admin_enqueue_scripts', 'my_admin_thickbox');

追加情報で取得したい場合

Thickbox は、JavaScript の TB_show() 関数を使って手動で開くこともできます。

jQuery(document).ready(function($) {
    $('#open-thickbox').on('click', function(e) {
        e.preventDefault();
        TB_show('タイトル', 'content.html?TB_iframe=true&width=600&height=400', false);
    });
});

想定されるトラブル

Thickbox が動作しない

解決方法

• add_thickbox(); を適切なフックで実行しているか確認
• wp_footer() をテーマに記述し、必要なスクリプトが出力されるようにする
• 他の JavaScript と競合していないか確認する

Q＆A

まとめ

add_thickbox() を使うことで、WordPress に組み込まれている Thickbox を簡単に有効化できます。

主に画像やコンテンツをモーダルウィンドウで表示する用途で使用され、管理画面のポップアップ実装にも活用できます。
他の JavaScript ライブラリとの競合に注意しながら、適切なフックを使って読み込むようにしましょう。