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.

    &nbsp;

    <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.

    &nbsp;[/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]

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

Answer 2

使用PHP本机DOMDocument函数使其工作。以下是它的工作原理：

首先，我们需要打印the_content()的文字内容。由于我不想要图像，我们将剥离所有标记：

<h5><?php echo wp_strip_all_tags(get_the_content()); ?></h5>

这显然有一个缺点，即它会删除所有标记，<strong>和<a>。当我找到时，会回来解决这个问题。

现在，要在我想要的代码中显示图像，我们需要解析the_content()并找到<img>的所有DOMDocument标记：

<?php
  $content = get_the_content();
  $dom = new DOMDocument;
    if ($dom->loadHTML($content)) {
    $imgs = $dom->getElementsByTagName('img');
      if ($imgs->length > 0) {
        foreach ($imgs as $img) {
         $img->getAttribute('src');
        }
      }
    }
?>

最后一行$img->getAttribute('src');会将所有图片网址存储到$ img数组中。最后，我们只需要在帖子中为每个图像打印一个循环内的数组内容：

<?php foreach ($imgs as $img) { ?>
                    <a class="fancybox" rel="galeria1" href="<?php echo $img->getAttribute('src'); ?>" title="<?php echo $img->getAttribute('alt'); ?>">
                        <img class="img-responsive" src="<?php echo $img->getAttribute('src'); ?>" alt="<?php echo $img->getAttribute('alt'); ?>" width="<?php echo $img->getAttribute('width'); ?>" height="<?php echo $img->getAttribute('height'); ?>"></a>
<?php } ?>

请注意，使用getAttribute();我可以从解析后的标签中检索我需要的每个属性，包括用户在后端提供的标题，替代文字和宽度/高度。

希望它有所帮助。

Answer 3

按照文件夹的文件路径，永久链接会指出并直接编辑它。这是一个测试文件是否正确？

index.php/2017/07/28/test

您可能希望使用chrome的右键单击检查轻松找到img。

Answer 4

我建议使用占位符创建某种HTML模板，这样您只需输入占位符（文本和图像网址），模板就可以完成剩下的工作。

您可以使用免费插件Snippy来执行此操作。完全披露，我是该插件的作者。

Snippy让您可以创建自己的短代码并为其选择名称。然后，您可以在短代码中添加HTML，CSS和JavaScript片段（在Snippy中，这些名称为＆＃34; bits＆＃34;）。然后将短代码放在页面或帖子上，Snippy将输出您的HTML。

因此，根据您的情况，您可以根据HTML代码段创建一个HTML位，并为其添加{{text}}和{{image}}占位符：

<h5>{{text}}</h5>

<div class="row">
  <div class="col-sm-8">
    <a class="fancybox" rel="galeria1" ref="{{image}}" title="tests">
      <img class="img-responsive" src="{{image}}" alt="" width="474" height="315" />
    </a>
  </div>
</div>

然后，您可以将此HTML位添加到自定义短代码中，并在文本编辑器中使用短代码。现在，您可以在网站上重复使用上述HTML代码段，而无需在任何地方重复使用。

如何自定义wordpress可视化编辑器HTML输出

4 个答案: