Question

我正在尝试通过功能php修改gutemberg提供的图库的html输出...但是我不能。

您如何拦截和修改自己？

这是原始的：

<ul="wp-block-gallery columns-2 is-cropped">
  <li class="blocks-gallery-item">....</li>
  <li class="blocks-gallery-item">....</li>
</ul>

我想根据列数进行更改以使其适应我的开发框架...

<div class="grid-x">
   <div class="box-50">...</div>
   <div class="box-50">...</div>
</div>

存在如何通过function.php进行更改？

Answer 1

解决方案：

Wp gutenberg html输出示例通过函数php覆盖：

add_filter( 'render_block', 'GutenGallery' , 10, 2 );

  function GutenGallery( $block_content, $block )
  {

    if ( 'core/gallery' !== $block['blockName'] || ! isset( $block['attrs']['ids'] ) )
    {
      return $block_content;
    }

    $li = '';
    $col = $block['attrs']['columns'];

    foreach( (array) $block['attrs']['ids'] as $id ) {

      if( $col == "1" || !$col)
      {
        $li .= sprintf( '<div class="box-[50-50-100]"><div class="autocrop radius-medium" style="height:300px;">%s</div></div>', wp_get_attachment_image( $id, 'large' ) );
      }
      elseif ($col == "2" )
      {
        $li .= sprintf( '<div class="box-[50-50-100]"><div class="autocrop radius-medium" style="height:300px;">%s</div></div>', wp_get_attachment_image( $id, 'large' ) );
      }
      elseif ($col == "3" )
      {
        $li .= sprintf( '<div class="box-[33-33-100]"><div class="autocrop radius-medium" style="height:300px;">%s</div></div>', wp_get_attachment_image( $id, 'large' ) );
      }
      elseif ($col >= "4" )
      {
        $li .= sprintf( '<div class="box-[25-25-50]"><div class="autocrop radius-medium" style="height:300px;">%s</div></div>', wp_get_attachment_image( $id, 'large' ) );
      }

    }
    return sprintf( '<div class="grid-x gap-20">%s</div>', $li );

  }

（方框是我的框架锅kimera上使用的网格）

谢谢大家；）

通过功能php编辑gutenberg创建的帖子中的画廊

1 个答案: