WordPressのメディアをBootstrap4のモーダルでポップアップする

WordPressのメディアの貼り付けでBootstrap4のモーダルでポップアップさせてあげる例です。概ね以下のような形式で貼り付けてあげるときれいにポップアップできます。

<a href="#" data-toggle="modal" data-target="#myModal" rel="noopener noreferrer">
  <img src="http://example.com/wp-content/uploads/yyyy/some-300x169.jpg" alt="" width="300" height="169" class="alignleft size-medium wp-image-44" />
</a>

<!-- Modal setting -->
<div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel">
  <div class="modal-dialog modal-lg" role="document">
    <div class="modal-content">    
      <div class="modal-body">
        <button type="button" class="close" data-dismiss="modal" aria-label="閉じる">
          <span aria-hidden="true">&times;</span>
        </button>
        <img src="http://example.com/wp-content/uploads/yyyy/some.jpg" width="100%">
      </div>
      <div class="modal-footer">
        <button type="button" class="btn btn-secondary btn-sm" data-dismiss="modal">Close</button>
      </div>
    </div>
  </div>
</div>

一つの記事にメディアが複数あると想定する(たいていはそうなる)と、#myModalの部分をWordpressのメディアのidなどを指定してあげるといいと思います。
Wordpress側では、image_wrap()を使ってメディア貼り付け時のHTMLタグをカスタマイズします。

image_wrap()

この関数は、functions.php内記述します。

function image_wrap($html, $id, $caption, $title, $align, $url, $size, $alt){
    $html = '<div class="imageblock">'."\n".$html."\n".'</div>'."\n";
    return $html;
}
add_filter('image_send_to_editor','image_wrap',10,8);

とやると、デフォルトのメディアHTMLタグに

<div class="imageblock">...</div>

を付加した状態で出力してくれます。
bootstrapをすでに導入しているかたちで、以下のようにするとbootstrapのモーダルが使えます。

/* Media html tag */
function image_wrap($html, $id, $caption, $title, $align, $url, $size, $alt){
  $html = <<< EOM
<a href="#" data-toggle="modal" data-target="#modalid_{$id}" rel="noopener noreferrer"><img src="{$url}" alt="{$title}" class="alignleft size-{$size} modalid_{$id}" width="100%"></a>
<!-- Modal setting -->
<div class="modal fade" id="modalid_{$id}" tabindex="-1" role="dialog" aria-labelledby="modalid_{$id}Label">
  <div class="modal-dialog modal-lg" role="document">
    <div class="modal-content">    
      <div class="modal-body">
      <button type="button" class="close" data-dismiss="modal" aria-label="閉じる">
          <span aria-hidden="true">&times;</span>
        </button>
        <img src="{$url}" width="100%" alt="{$title}">
      </div>
      <div class="modal-footer">
        <button type="button" class="btn btn-secondary btn-sm" data-dismiss="modal">Close</button>
      </div>
    </div>
  </div>
</div>
EOM;
  $html = preg_replace("/\n/","", $html);
  $html = preg_replace("/\s+/"," ", $html);
  $html = '<div id"imageblock" class="col-sm-12 col-md-6">'."\n".$html."\n".'</div>'."\n";
    return $html;
}
add_filter('image_send_to_editor','image_wrap',10,8);

記事内に画像を挿入するときのHTMLをカスタマイズする
【WordPress】<img>タグに自動挿入される属性と<a>タグ削除&class名変更&任意タグ追加

Last update: 2019.04.15 (月)