Question

我想知道如何为<img>和<a>提供自定义类？我需要向这些元素的添加一些bootstrap类，以便在用户创建page时自动添加bootstrap类。

以下是在WordPress中创建新HTML时呈现的page代码

<article id="post-18" class="post-18 page type-page status-publish hentry">
  <p><a href="https://readmore.com">Lorem ipsum</a> dolor sit amet...</p>
  <p>
    <img class="alignnone size-medium" src="https://placehold.it/250x250" width="250" height="250"></p>
  <p><a href="https://readmore.com">Lorem Ipsum</a></p>
  <p>Morbi lacinia...</p>
  <p>Nullam commodo...</p>
  <p>Maecenas rutrum...</p>
</article>

如何让它看起来像这样？请注意此<img>代码示例中的<a>和第二 HTML子项。我在<div>之前添加了<img>（这就是我想要的）

<article id="post-18" class="post-18 page type-page status-publish hentry">
  <p><a href="https://readmore.com">Lorem ipsum</a> dolor sit amet....</p>
  <div class="col-lg-4 col-xs-12">
    <p><img class="alignnone size-medium img-responsive" src="https://placehold.it/250x250" width="250" height="250">
    </p>
  </div>
  <p><a href="https://readmore.com" class="btn btn-primary">Lorem Ipsum</a></p>
  <p>Morbi lacinia...</p>
  <p>Nullam commodo...</p>
  <p>Maecenas rutrum...</p>
</article>

我正在使用名为 HTML5空白WordPress主题的模板 link

Answer 1

对于图像，您可以执行此操作

.owl-prev {
        //&::before { content: "\f104"; }
    }
    .owl-next {
        //&::before { content: "\f105"; }
    }

参考is here。当我使用bootstrap用于WordPress主题时，我使用这种方法。

对于链接，您可以使用javascript / jquery执行此操作，但不可靠，因为它会将类添加到所有锚标记。

Javascript方法

function custom_class($class){
    $class .= ' additional-class'; // Concatenate custom class with the existing class.
    return $class;
}
add_filter('get_image_tag_class','custom_class');

Jquery方法

var a = document.getElementsByTagName('a');
a.classList.add('btn  btn-primary');

如果您发现任何问题，请与我们联系。

在WordPress中为HTML标记提供自定义类或ID

1 个答案: