クラシックエディタでフロート画像をラップする処理

Filed under: css,functions.php — kdcs @ 25年9月23日 火曜日

クラシックエディター（TinyMCE）では画像を「右寄せ」や「左寄せ」にするとfloatが適用されるが、このfloatの解除方法がない。テキストエディタでタグ打ちができればclear: bothを挿入して解除できるが知識が必要。
ビジュアルエディタしか使えない場合、バック部ラウンドで処理する必要がある。

そこで、alignleftやalignrightが付与されたfloat画像をdivタグでラップしてクラスを付ける処理をする。

functions.php（クラスは、class=”imgWrapp”）
※デフォルトの投稿タイプ「post」にだけ適用する

正規表現ベースの軽量版

function wrap_aligned_images_lightweight($content) {
  if (!is_singular('post')) {
    return $content;
  }

  // <p>タグ内に複数のimgタグがあり、すべてがalignクラス付きならラップ
  $pattern = '/<p>\s*((?:<img[^>]+class="[^"]*\balign(?:left|right|center)\b[^"]*"[^>]*>\s*){1,})<\/p>/i';
  $replacement = '<div class="imgWrapp">$1</div>';

  return preg_replace($pattern, $replacement, $content);
}
add_filter('the_content', 'wrap_aligned_images_lightweight');

DOM 操作版（全ての要素をチェックするため処理不可が少しだけ増える 通常の投稿なら問題ないレベル）

function wrap_aligned_images_preserve_position($content) {
  if (!is_singular('post')) {
    return $content;
  }

  libxml_use_internal_errors(true);

  $html = '<?xml encoding="UTF-8"><body>' . $content . '</body>';
  $dom = new DOMDocument('1.0', 'UTF-8');
  $dom->loadHTML($html, LIBXML_HTML_NOIMPLIED | LIBXML_HTML_NODEFDTD);

  $bodyList = $dom->getElementsByTagName('body');
  if ($bodyList->length === 0) return $content;

  $body = $bodyList->item(0);
  $newBody = $dom->createDocumentFragment();

  foreach ($body->childNodes as $node) {
    if ($node->nodeType === XML_ELEMENT_NODE && $node->tagName === 'p') {
      $imgNodes = [];
      foreach ($node->childNodes as $child) {
        if ($child->nodeType === XML_ELEMENT_NODE && $child->tagName === 'img') {
          $class = $child->getAttribute('class');
          if (preg_match('/align(left|right|center)/', $class)) {
            $imgNodes[] = $child;
          }
        }
      }

      if (count($imgNodes) > 0 && count($node->childNodes) === count($imgNodes)) {
        $wrapper = $dom->createElement('div');
        $wrapper->setAttribute('class', 'imgWrapp');
        foreach ($imgNodes as $img) {
          $wrapper->appendChild($img->cloneNode(true));
        }
        $newBody->appendChild($wrapper);
      } else {
        $newBody->appendChild($node->cloneNode(true));
      }
    } else {
      $newBody->appendChild($node->cloneNode(true));
    }
  }

  $body->nodeValue = '';
  $body->appendChild($newBody);

  $new_content = '';
  foreach ($body->childNodes as $child) {
    $new_content .= $dom->saveHTML($child);
  }

  return $new_content;
}
add_filter('the_content', 'wrap_aligned_images_preserve_position');

cssでimgWrappにflexboxを適用する
画像は最大横幅270pxを設定してwidth:100%でレスポンシブにも対応させる

/* 回り込み画像の処理ここから */
#main #singlePosts .imgWrapp {
  display: flex;
  gap: 10px;
  width: 100%;
}
#main #singlePosts img.alignleft,
#main #singlePosts img.alignright,
#main #singlePosts img.aligncenter {
    max-width: 270px;
    width: 100%;
    margin: 0;
    float: none;
}
/* 回り込み画像の処理ここまで */

サイト内検索

カテゴリー

最近の投稿

« ｜クラシックエディタでフロート画像をラップする処理｜ »
↑上に戻る