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

4 回答

• 0

  Update 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]
  

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

  回复于 2024-04-18T09:09:07+08:00
• 1

  使用PHP本机 DOMDocument 功能使其工作 . 以下是它的工作原理：

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

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

  这显然有一个缺点，它剥离了所有标签，包括 <strong> 和 <a> . 当我找到时，会回来解决这个问题 .

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

  <?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'); 将所有图像url存储到$ 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(); 我可以从解析的标记中检索我需要的每个属性，包括用户在后端提供的 Headers ，替代文本和宽度/高度 .

  希望能帮助到你 .

  回复于 2024-04-18T09:09:07+08:00
• 0

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

  index.php/2017/07/28/test
  

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

  回复于 2024-04-18T09:09:07+08:00
• 2

  我建议使用占位符创建某种HTML模板，这样您只需输入占位符（文本和图像URL），您的模板将处理其余部分 .

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

  Snippy让您可以创建自己的短代码并为其选择名称 . 然后，您可以在短代码中添加HTML，CSS和JavaScript（在Snippy中，这些名称为“位”） . 然后将短代码放在页面或帖子上，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代码段，而无需在任何地方复制它 .

  回复于 2024-04-18T09:09:07+08:00