WordPressのshortcodeを作ろうとしたらブロック要素をラップしたAタグが効かなくて困った話

投稿日：: 2023/03/31

ソフトウェア::CMS::WordPress

WordPressの組み込みURL埋め込みがクソなので自作しようとしたら意味不明な挙動に出会ったので残しておく。

確認環境

WordPress 6.2
- Classic Editor

起きた現象

端的に書くとshortcodeでAタグの中にブロック要素を含ませるような出力を記事本文中ですると初回だけAタグが外れます。

イメージ的にはこういう感じのやつ

<a href="https://example.com">
  <figure>
    <img src="https://example.com/foo.jpg" alt="" width="200">
    <figcaption>foo</figcaption>
  </figure>
</a>

例えば以下のような出力が起きます。ちょっとなんかかなりHTML崩壊してませんかね…？

理想	現実

参考までにショートコードを二回以上書くと二回目以降はPタグなどのゴミが混ざるものの理想に近い出力になります。原因は不明。WordPressのバグかなんかじゃないかな…。

再現コード

このショートコードを記事本文に二回書くと二回目にはAタグが効くことが確認できます。

function emb_test($atts) {
  $url = $atts["url"];
  $img = $atts["img"];
  $title = $atts["title"];

  return <<<EOD
<a href="$url>
  <figure>
    <img src="$img" alt="" width="200">
    <figcaption> $title </figcaption>
  </figure>
</a>

EOD;
}
add_shortcode('emb', 'emb_test');

出力結果

何故起きるのか？

wpautop のせいだとは思います。この機能自体は普段記事を書く上で便利ですし、タグやカテゴリの説明にadd_filterしてやるといい感じに改行が反映されたりして便利なのですが、shortcodeの中に入ってくるとかなり邪魔ですね…。

因みにAタグの中にインライン要素を入れてる限り、この現象は起きないのですが、その場合CSSでブロック要素にする必要があるのと、セマンティクスとかコーディング的な微妙さを感じたので、それはしないことにしました。

取り敢えずWordPressで良い感じにURLを埋め込むのは余り現実的ではなさそうなので諦めることにしました。正直WordPress 組み込みの埋込機能は使い勝手が悪く微妙です。有名SNSだけ埋め込めればいい人にはこれでいいでしょうけど…。

仕方がないので5年くらい前に使って体験が微妙だった Pz-LinkCard を使ってみたらかなり良くなっていたので、Pz-LinkCardを使うことで解決することにしました。ありがとうPz-LinkCard…ありがとう…。

コードの供養

書いたけど期待通り動かなかった本来やりたかったコードです。

function embed($atts) {
	$url = count($atts) > 0
	  ? $atts[0]
	  : "";
    $dom = new DOMDocument();

    $data = wp_remote_get($url);
    if (is_wp_error($data)) {
        return;
    }

    $html = $data['body'];
    $doc = new DOMDocument();
    @$doc->loadHTML($html);
    $metas = $doc->getElementsByTagName('meta');
    $title = '';
    $description = '';
    $image = '';
    foreach ($metas as $meta) {
        if ($meta->getAttribute('property') == 'og:title') {
            $title = $meta->getAttribute('content');
        }
        if ($meta->getAttribute('property') == 'og:description') {
            $description = $meta->getAttribute('content');
        }
        if ($meta->getAttribute('property') == 'og:image') {
            $image = $meta->getAttribute('content');
        }
    }
    if (!empty($title) && !empty($description)) {
		return <<<EOD
<a href="$url">
  <figure>
    <img src="$image" alt="$title">
    <figcaption>
    $title
    $description
    </figcaption>
  </figure>
</a>
EOD;
    }
}
add_shortcode('embed', 'embed');

Lycolog

お知らせ