web-dev-qa-db-ja.com

複数の画像をdivで自動的に折り返す

これに似た質問がいくつかありますが、私はWordPressの最新バージョンで動作するものは何も見つけていません。隣接する画像を1つのdivにラップしようとしています。

<p>
  <img> />
  <img> />
  <img> />
  Some text.
</p>

に：

<p>
 <div>
  <img> />
  <img> />
  <img> />
 </div>  
Some text.
</p>

私はそれぞれの画像をそれ自身のdivにラップすることができます：

function wrapImagesInDiv($content) {
   $pattern = '/(<img[^>]*class=\"([^>]*?)\"[^>]*>)/i';
   $replacement = '<div>$1</div>';
   $content = preg_replace($pattern, $replacement, $content);
   return $content;
}
add_filter('the_content', 'wrapImagesInDiv');

{2、}を使って複数のimgタグをラップするように正規表現を編集することは可能だと思いますが、うまく動作させることができませんでした。

何か案は？

編集

Beeeのおかげで、これは私のニーズには合っていますが、とても不格好です。どんな改善でも大歓迎です。

add_filter( 'the_content', 'add_image_wrapper', 99, 1 );
function add_image_wrapper( $content ) {
    $content = preg_replace_callback( '/<img[^>]+>|<p>|<br>/im',
        function( $matches ) use (&$inimg) {

        $fulltag   = $matches[0];    
        preg_match('/<(img)[^>]+>|<(p)>|<(br)>/',$fulltag,$tag);  

        $tag = $tag[1];

        if ( $tag === 'img') {
            ( $inimg == true) ? $tag = 1 : $tag = 0;
            ( $inimg == false ) ? $inimg = true : $inimg;
        }                          
        else {
            ( $inimg == true) ? $tag = 2 : $tag = 3;                    
            ( $inimg == true ) ? $inimg = false : $inimg;
        }

        switch ($tag) {
          case 0: //no preceding img tag
              return sprintf( '<div>%s', $fulltag );
              break;
          case 1: //preceding img tag
              return sprintf( '%s', $fulltag );
              break;
          case 2: //last image tag
              return sprintf( '</div>%s', $fulltag );
              break;
          case 3:
              return sprintf( '%s', $fulltag );
              break;
       }
    }, $content );

    return $content;
}
functionscustomizationimagescontent
1
jonnyfishman

これは、各画像にラッパーを追加するために使用する関数です。私はそれがあなたが望んでいることが100％ではないことを知っています、しかし私はこれがあなたから仕事へのハンドルを与えるかもしれないと思いました。

function add_image_wrapper( $content ) {
    $content = preg_replace_callback( '/<img[^>]+>/im', function ( $matches ) {
        $image   = $matches[0];
        $classes = array();
        preg_match( '/class="align([^"]+)"/im', $image, $classes );

        $align = ( ! empty( $classes ) ? $classes[1] : null );
        $class = '';
        if ( in_array( $align, array( 'left', 'right' ) ) ) {
            $class = 'media--align-' . $align;
        }

        return sprintf(
            '<div class="media %s">%s</div>',
            $class, $image
        );
    }, $content );

    // Remove unnecessary classes from media-wrappers inside figures
    $content = preg_replace_callback( '/<figure[^>]+>.+<\/figure>/im', function ( $matches ) {
        $figure = $matches[0];

        return preg_replace( '/class="media[^"]+"/im', 'class="media"', $figure );
    }, $content );

    return $content;
}
add_filter( 'the_content', 'add_image_wrapper', 99, 1 );
1
Beee