プラグインのコアファイルを編集せずに出力されるhtmlを書き換える

2023年4月21日 2023年4月21日

WordPressにおうて、プラグインがサイトに出力するコードを書き換えたいときがある。

文字列だけでなく、html上の細かい要素など

。

しかし、プラグインファイルを直接編集するやり方だとプラグイン更新のたびに再編集が必要になる。

そこで、javascriptを使ってコードそのものを書き換えてしまう方法がある。（置き換え・置換）

functions.phpに下記を記載

function my_js_function() {
    echo <<< EOM
        <script>
            document.getElementById("書き換える前の要素のID").outerHTML='書き換えた後のコード';
        </script>
    EOM;
}
add_action('wp_footer', 'my_js_function');

これによって、該当箇所をごっそり書き換えることができる。
例えば、simple membershipというプラグインが吐き出す下記のようなコードがある。
<input type="text" class="swpm-text-field swpm-username-field" id="swpm_user_name" value="" size="25" name="swpm_user_name">

IDが「swpm_user_name」のinput要素のtypeがテキスト形式だが、これをpassword形式に置き換えて下記のようにしたいとする。

<input type="password" class="swpm-text-field swpm-username-field" id="swpm_user_name" value="" size="25" name="swpm_user_name">

これを実現するためにはfuntions.php記載するコードは下記である。

function my_js_function() {
    echo <<< EOM
        <script>
            document.getElementById("swpm_user_name").outerHTML='<input type="password" class="swpm-text-field swpm-username-field" id="swpm_user_name" value="" size="25" name="swpm_user_name">';
        </script>
    EOM;
}
add_action( 'wp_footer', 'my_js_function' );

swpm_user_nameというIDの要素があれば、その要素を丸ごとごっそり

<input type="password" class="swpm-text-field swpm-username-field" id="swpm_user_name" value="" size="25" name="swpm_user_name">

に書き換える、というコード。

ちなみにこの書き方だと、すべてのページのbody最下部にこのjavascriptが表示されるので、

条件分岐で必要箇所だけに表示されるようにするとよりよい。