WordPressブロックベーステーマのヘッダーにコードを追加する方法

2024.02.13

WordPressブロックベーステーマ（フルサイト編集テーマとも呼ばれる）では、従来のテーマとは異なる構造のため、ヘッダーにコードを追加する方法はいくつかあります。

1. サイトエディターを使用する

これは、一般的なスクリプトや短いコードスニペットを追加するのに最も汎用性の高い方法です。

手順:

  1. WordPressダッシュボードで外観 > エディターに移動します。
  2. ヘッダーテンプレートパートをクリックします。
  3. カスタムHTMLブロックを挿入します。
  4. コードスニペットをブロック内に貼り付けます。
  5. 変更を保存します。

2. theme.jsonファイルを編集する

この方法は、高度な設定やスタイル操作を提供します。

手順:

  1. 使用しているテーマのルートディレクトリにtheme.jsonファイルがあることを確認します。
  2. theme.jsonファイルは、以下の方法でアクセスして編集できます。
    • サイトエディター（外観 > エディター）で、「スタイル」サイドバー（右上のアイコン）を開き、「theme.json」タブに移動します。
    • FTPまたはホスティングのファイルマネージャーを使用してファイルをダウンロードします。
    • ホスティングで利用可能な場合は、SSH/FTP機能付きのコードエディターを使用します。
  3. settingsセクション内に次のエントリを追加します。

JSON

"settings": {
   "custom": {
      "htmlHead": ""  
   }
}
  1. “を実際のコードに置き換えます。
  2. 編集したtheme.jsonファイルを保存してアップロードします（ローカルで編集した場合は）。

3. 子テーマを作成する

これは、大きなコードの追加や、テーマの更新で失われるべきではない修正を行う場合に最適です。

手順:

  1. 子テーマフォルダを作成します（必要に応じて、WordPress子テーマのドキュメントを参照してください）。
  2. 子テーマフォルダにfunctions.phpファイルを追加します。
  3. functions.phpファイル内でwp_headアクションフックを使用します。

PHP

function my_custom_header_code() {
    ?>
    <script>
        // ここにJavaScriptコード
    </script>
    <link rel="stylesheet" href="https://example.com/my-styles.css">
    <?php 
}
add_action( 'wp_head', 'my_custom_header_code' );
  1. 子テーマを有効化します。

注意事項

  • コードの種類: 追加するコードの種類によって、最適な方法は異なります。
    • JavaScript: サイトエディター（カスタムHTMLブロック）または wp_head が一般的です。
    • CSS: theme.json、wp_head、または wp_head でリンクされた別のスタイルシート
    • トラッキングスクリプト/ピクセルコード: サイトエディター（カスタムHTMLブロック）が最も簡単です。
  • プラグイン: ヘッダー/フッターコードスニペットを追加するためのプラグインも多数存在します。直接ファイル編集せずにシンプルなインターフェースを使用したい場合は、これらのプラグインを検討してください。

重要な考慮事項

  • 子テーマ: 子テーマを使用すると、メインテーマが更新されたときにコードの追加が上書きされるのを防ぐことができます。
  • キャッシュ: 変更を加えた後、ブラウザのキャッシュとサイトレベルのキャッシュをクリアして、追加されたコードが最新バージョンであることを確認してください。
スポンサーリンク