php - 如何自定义WordPress可视化编辑器HTML输出

Question

我正在为作品集网站创建自定义主题。这是我在 WordPress 中的第一个自定义主题。到目前为止，我已经成功解决了谷歌搜索的大部分问题，但这个问题(尽管我发现不太可能没有人需要这个)我无法找到。

问题:我需要自定义可视化编辑器输出的 HTML 标签和 CSS 类。为了更好地解释，我将发布图片和代码:

这是可视化编辑器中的内容:

这是默认的 WordPress HTML 输出:

    Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis 
    ornare 
    lectus nec sapien venenatis iaculis. Praesent consequat at neque 
    a 
    placerat. Nunc vel lacus lectus. Aliquam non tempus mauris.

     

    <img class="alignnone size-full wp-image-14" 
    src="http://192.168.25.187/wordpress/wp-
    content/uploads/2017/07/Magazine-1.jpg" alt="" width="474" 
    height="315" /> 

这是我想要的标记:

    <h5>
    Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis 
    ornare 
    lectus nec sapien venenatis iaculis. Praesent consequat at neque 
    a 
    placerat. Nunc vel lacus lectus. Aliquam non tempus mauris.</h5>

    <div class="row">
     <div class="col-sm-8">
      <a class="fancybox" rel="galeria1" 
       ref="http://192.168.25.187/wordpress/wp-
       content/uploads/2017/07/Magazine-1.jpg" title="teste">
        <img class="img-responsive"     
          src="http://192.168.25.187/wordpress/wp-
          content/uploads/2017/07/Magazine-1.jpg" alt="" width="474" 
          height="315" /></a>
     </div>
    </div>

我需要编辑哪些文件(或编写函数)来修改默认可视化编辑器 HTML 和 CSS 输出？

Answer 1

更新2:

您可以尝试使用简码。您可以将类似的内容放入functions.php中。

function myh5content_shortcode( $atts, $content ) {
  return __("<h5><span>$content</h5>");
}
add_shortcode('h5content', 'myh5content_shortcode');

function myimg_shortcode( $atts, $content ) {
    ob_start();
    ?>
    <div class="row">
     <div class="col-sm-8">
      <a class="fancybox" rel="galeria1" 
       ref="http://192.168.25.187/wordpress/wp-
       content/uploads/2017/07/Magazine-1.jpg" title="teste">
        <?php echo $content ?>
        </a>
     </div>
    </div>
    <?php
    return ob_get_clean();  
}
add_shortcode( 'imgcontent', 'myimg_shortcode' );

然后在类似这样的帖子中使用这些短代码:

[h5content]Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis 
    ornare 
    lectus nec sapien venenatis iaculis. Praesent consequat at neque 
    a 
    placerat. Nunc vel lacus lectus. Aliquam non tempus mauris.

     [/h5content]

[imgcontent]<img class="alignnone size-full wp-image-14" 
    src="http://192.168.25.187/wordpress/wp-
    content/uploads/2017/07/Magazine-1.jpg" alt="" width="474" 
    height="315" />[/imgcontent]

我也会将 anchor 标记放在帖子内，这样就只有 <div> with 类在短代码中使用。这样，短代码就可以重复用于其他帖子。希望上面的代码可以指导您找到解决方案。