WordPressプラグインで追加したタイトル用のSVGコードがSNS共有時に混入していた（svg-eyecatch-iconプラグイン、Ultimate Blocks）

WordPressで投稿のタイトル前にSVGアイキャッチアイコンを表示するsvg-eyecatch-iconプラグインプラグインを開発したら、予想していなかった問題が発生しました。記事をSNSで共有しようとすると、タイトルにSVGのHTMLコードがそのまま含まれてしまったのです。

【前回】https://note.chiilabo.jp/2025-06/wordpress-custom-plugin-svg-eyecatch-fields/
【コード】https://app.chiilabo.jp/wordpress-plugins/svg-eyecatch-icon-1.0.5.zip

1. 問題の発生

開発したプラグインは、投稿編集画面でSVGコードを入力すると、フロントエンドでタイトルの前にアイコンが表示される仕組みです。

基本的な動作は想定通りうまくいっていましたが、記事をSNS共有しようとしたところ、共有されるタイトルが次のようになってしまいました。

<svg class="eyecatch-svg" width="24" height="24">...</svg>記事のタイトル
Code language: HTML, XML (xml)

本来なら「記事のタイトル」だけが共有されるべきなのに、SVGのHTMLコードも一緒に含まれてしまったのです。

記事共有には、Ultimate BlocksプラグインのSocial Shareブロックを使っていました。

Ultimate Blocksの具体的な実装を確認すると、問題の根本が見えてきました。Ultimate Blocksのソーシャル共有ブロックは、get_the_title()関数を直接呼び出してタイトルを取得していました。この関数は内部でthe_titleフィルターを実行するため、自作プラグインが追加したSVGコードも一緒に取得されてしまいます。

つまり、SNS共有時だけSVGを除外する仕組みが必要でした。

2. 関数の呼び出し元をバックトレースで判定

いくつかのアプローチを検討しました。

方法1：ユーザーエージェントによる判定
SNSクローラーのユーザーエージェントを検出してSVGを非表示にする方法です。しかし、Ultimate Blocksは通常のブラウザからのアクセスで動作するため、この方法では対応できませんでした。
方法2：特定プラグインのフィルター
Ultimate Blocks専用のフィルターがあれば理想的でしたが、調査した結果、タイトル取得に関する専用フィルターは提供されていませんでした。
方法3：バックトレースによる処理判定
PHPのdebug_backtrace()関数を使って、現在実行中の関数がUltimate BlocksのSNS共有処理内から呼び出されているかを判定します。

最終的に採用したのは、PHPのバックトレース機能を使って呼び出し元を判定する方法です。

private function is_ultimate_blocks_social_share_context() {
    $backtrace = debug_backtrace(DEBUG_BACKTRACE_IGNORE_ARGS, 20);
    
    foreach ($backtrace as $trace) {
        if (isset($trace['function'])) {
            // Ultimate Blocksの社会共有関数をチェック
            $ub_social_functions = array(
                'ub_render_social_share_block',
                'ub_get_facebook_icon',
                'ub_get_twitter_icon', 
                'ub_get_linkedin_icon',
                'ub_get_pinterest_icon',
                'ub_get_reddit_icon',
                'ub_get_tumblr_icon'
            );
            
            if (in_array($trace['function'], $ub_social_functions)) {
                return true;
            }
        }
        
        if (isset($trace['file']) && strpos($trace['file'], 'ultimate-blocks') !== false && 
            strpos($trace['file'], 'social-share') !== false) {
            return true;
        }
    }
    
    return false;
}
Code language: PHP (php)

この関数は、実行中の関数の呼び出し履歴を調べて、Ultimate BlocksのSNS共有関連の関数が含まれているかを確認しています。

バックトレースとは、プログラムの実行中に「どの関数がどの関数を呼び出したか」の履歴を追跡する機能です。料理のレシピに例えると、最終的な料理（結果）から逆算して、どの工程（関数）をどの順番で実行したかを確認できます。

PHPのdebug_backtrace()は、現在実行中の位置から呼び出し元まで遡って情報を配列で返します。各要素には関数名やファイル名が含まれているため、特定のプラグインやモジュールの処理中かを判定できます。

2.1. タイトル表示の制御

the_titleフィルターを修正して、Ultimate Blocksの処理中はSVGを追加しないようにしました。

public function add_svg_to_title($title, $post_id = null) {
    // 管理画面では表示しない
    if (is_admin()) {
        return $title;
    }
    
    // Ultimate Blocksの社会共有ブロック処理中はSVGを追加しない
    if ($this->is_ultimate_blocks_social_share_context()) {
        return $title;
    }
    
    // 通常の処理でSVGを追加
    // （省略）
}
Code language: PHP (php)

3. バックトレースの仕組みの注意点

実装後、Ultimate Blocksでの共有時にはクリーンなタイトルが使用され、通常のページ表示ではSVGアイキャッチアイコンが正常に表示されるようになりました。

ただし、この解決方法にはいくつかの注意点があります。

パフォーマンスへの影響
バックトレースの生成は若干のオーバーヘッドを伴います。タイトル表示は頻繁に発生する処理のため、DEBUG_BACKTRACE_IGNORE_ARGSフラグを指定して必要最小限の情報のみを取得し、深度も20に制限しています。
依存関係とアップデート対策
この実装はUltimate Blocksの内部関数名に依存しています。プラグインのアップデートで関数名が変更されると動作しなくなる可能性があります。しかし、プラグインの公開API（フィルターやアクション）が提供されていない以上、現実的な解決策として採用しました。
汎用性の限界
この方法はUltimate Blocks専用の対応です。他のSNS共有プラグインでも同様の問題が発生する場合は、それぞれに対応した判定ロジックを追加する必要があります。

今回の経験から、WordPressプラグイン開発では想定していない他のプラグインとの相互作用が発生することを学びました。特にthe_titleのような広く使用されるフィルターを変更する際は、さまざまなシナリオでの動作を検証する必要があります。

また、公式APIが提供されていない場合でも、バックトレースのような技術を活用すれば問題を解決できることも分かりました。完璧な解決策ではありませんが、実用的なアプローチとして有効でした。

4. まとめ

WordPressプラグインでタイトルにSVGを追加する機能を実装した際、SNS共有時にHTMLコードが混入する問題が発生しました。Ultimate Blocksプラグインがget_the_title()を直接使用していることが原因でした。

解決策として、バックトレース機能を使ってUltimate Blocksの社会共有処理中を検出し、その際はSVGを追加しない仕組みを実装しました。これにより、通常表示ではSVGアイコン付き、SNS共有時はクリーンなタイトルを提供できるようになりました。

1. 問題の発生

1.1. Ultimate BlocksプラグインのSocial Shareブロックの投稿文作成アルゴリズム

2. 関数の呼び出し元をバックトレースで判定

2.1. タイトル表示の制御

3. バックトレースの仕組みの注意点

4. まとめ