概要
wp_body_openアクションは、WordPressのテーマにおいてボディタグの直後にカスタムコードを挿入するために使用されます。このアクションは、特に分析ツールやカスタムトラッキングコードを追加する際に便利です。主に以下のような機能を実装する時に使用されることが多いです。
- ウェブ解析サービスのトラッキングコードの挿入
- A/Bテスト用のスクリプトを追加
- レスポンシブデザインのための初期化スクリプト
- カスタムフォントローダーの追加
- サードパーティ製プラグインとの統合
- ソーシャルメディアシェアボタン生成
- 各ページのカスタムスクリプトの挿入
- 広告コードの埋め込み
構文
wp_body_open()
パラメータ
wp_body_openアクションにはパラメータはありません。
戻り値
このアクションは、特定の値を返すものではありません。コールバック関数を通じて、WordPressのボディタグ内に任意のコードを挿入します。
関連する関数
使用可能なバージョン
wp_body_openは、WordPress 5.2.0 以降で使用可能です。
コアファイルのパス
wp-includes/general-template.php
この関数のアクションでの使用可能性
| アクション | 使用例 |
|---|---|
| mu_plugin_loaded | |
| registered_post_type | |
| plugins_loaded | |
| wp_roles_init | |
| setup_theme | |
| after_setup_theme | |
| set_current_user | |
| init | |
| register_sidebar | |
| wp_loaded | |
| send_headers | |
| parse_query | |
| pre_get_posts | |
| wp | |
| template_redirect | |
| get_header | |
| wp_head |
サンプルコード
サンプルコード1: Google Analyticsのトラッキングコードを追加
add_action('wp_body_open', function() {
echo "<script async src='https://www.googletagmanager.com/gtag/js?id=YOUR_TRACKING_ID'></script>";
echo "<script>window.dataLayer = window.dataLayer || []; function gtag(){dataLayer.push(arguments);} gtag('js', new Date()); gtag('config', 'YOUR_TRACKING_ID');</script>";
});
このサンプルコードは、Google Analyticsのトラッキングスクリプトをボディタグの開始直後に追加します。
サンプルコード2: Facebookピクセルのコードを追加
add_action('wp_body_open', function() {
echo "<script>
!function(f,b,e,v,n,t,s)
{if(f.fbq)return;n=f.fbq=function(){n.callMethod?
n.callMethod.apply(n,arguments):n.queue.push(arguments)};
if(!f._fbq)f._fbq=n;n.push=n;n.loaded=!0;n.version='2.0';
n.queue=[];t=b.createElement(e);t.async=!0;
t.src=v;s=b.getElementsByTagName(e)[0];
s.parentNode.insertBefore(t,s)}(window, document,'script',
'https://connect.facebook.net/en_US/fbevents.js');
fbq('init', 'YOUR_PIXEL_ID');
fbq('track', 'PageView');
</script>";
});
このコードは、Facebookの解析コードをボディ開始タグの後に挿入します。
サンプルコード3: カスタムスタイルシートの読み込み
add_action('wp_body_open', function() {
echo "<link rel='stylesheet' href='https://example.com/custom-style.css'>";
});
このサンプルでは、カスタムのスタイルシートをボディの直後に読み込むようにしています。
サンプルコード4: リモートスクリプトの読み込み
add_action('wp_body_open', function() {
echo "<script src='https://example.com/remotescript.js'></script>";
});
このコードは、外部のJavaScriptファイルをボディタグの直後に読み込むためのものです。
サンプルコード5: カスタムデータ属性の追加
add_action('wp_body_open', function() {
echo "<div id='custom-data' data-info='some information'></div>";
});
このサンプルでは、カスタムのデータ属性を持つディブ要素をボディの直後に追加します。