2026年6月3日

WordPressのMutationObserverを使ってDOM変更を監視する実装例

カスタマイズ

はじめに

WordPressでMutationObserverを使ってDOM変更を監視する実装例の問題が発生すると、サイト運営が止まってしまいます。この記事では原因と具体的な解決手順をステップバイステップで説明します。

症状・原因

MutationObserverを使ってDOM変更を監視する実装例が起きる主な原因は以下の通りです。

functions.phpのPHP文法エラーやコンフリクト
フックの優先度や引数の設定ミス
テーマ/プラグインの更新による既存カスタマイズの上書き
子テーマを使わない直接編集による問題

解決手順

ステップ1：子テーマのfunctions.phpに追記する

直接テーマを編集すると更新時に上書きされます。必ず子テーマの functions.php に記述します。

<?php
// アクションフックの追加例
add_action( 'wp_footer', function() {
    echo '<p>カスタムフッターテキスト</p>';
});

// フィルターフックの使用例
add_filter( 'the_title', function( $title ) {
    return $title; // タイトルを加工して返す
});

ステップ2：WordPressのフック（アクション/フィルター）を使う

WordPressのカスタマイズはフックシステムを通じて安全に行えます。

// アクション：処理を追加する
add_action( 'init', 'my_custom_init' );
function my_custom_init() {
    // 初期化時の処理
}

// フィルター：値を変更して返す
add_filter( 'the_content', 'my_content_filter' );
function my_content_filter( $content ) {
    return $content . '<p>追記テキスト</p>';
}

ステップ3：カスタム投稿タイプを登録する

functions.php に以下を追記します。

add_action( 'init', function() {
    register_post_type( 'my_cpt', [
        'labels'      => ['name' => '独自コンテンツ'],
        'public'      => true,
        'has_archive' => true,
        'supports'    => ['title','editor','thumbnail'],
        'rewrite'     => ['slug' => 'my-content'],
    ]);
});

ステップ4：WP_Queryでカスタムループを実装する

標準のループを置き換えてカスタムクエリを使います。

$args = [
    'post_type'      => 'post',
    'posts_per_page' => 10,
    'meta_key'       => 'featured',
    'meta_value'     => '1',
    'orderby'        => 'date',
    'order'          => 'DESC',
];
$query = new WP_Query( $args );
if ( $query->have_posts() ) {
    while ( $query->have_posts() ) {
        $query->the_post();
        the_title();
    }
    wp_reset_postdata();
}

注意事項

カスタムコードは必ず子テーマに追記し、テーマ本体は変更しないでください。コードを追加した後はデバッグモードを有効にして構文エラーがないか確認し、本番環境への適用前にステージングでテストしてください。

まとめ

WordPressのMutationObserverを使ってDOM変更を監視する実装例の解決手順を振り返ります。

1. 子テーマのfunctions.phpに追記する

2. WordPressのフック（アクション/フィルター）を使う

3. カスタム投稿タイプを登録する

4. WP_Queryでカスタムループを実装する

手順通りに行えば多くのケースで解決できます。解決しない場合はホスティング会社のサポートやWordPress公式フォーラムにご相談ください。

Post Views: 6