javascript - 如何在 Wordpress 中的特定类别图像上显示文本框？

Question

在我的网站上，我有一个用于外部图像的图像类。每张图片都必须使用 [caption] 简码。我想在整个站点的该类中的每个图像上放置一个边框和文本框。

到目前为止我已经...

.img-external {
     border: 5px solid #818a99;
     height: auto;
     width: 100%;  
     position: relative;
}

...显示正常。

我要添加...

    .text-block {
        position: absolute;
        bottom: 20px;
        right: 20px;
        background-color: black;
        color: white;
        padding-left: 20px;
        padding-right: 20px;
}

...带有文本“外部图像”

这有效...

if ($('.img-external')[0]) {
    $('.text-block').text('EXTERNAL IMAGE');
} else {}

...

<div class="img-external">
  <div class="text-block"></div>
</div>

...理论上，当我将其全部插入 codepen 时，但我怎样才能在 Wordpress 上运行它呢？

编辑:Wordpress 正在使用 <figure><img class="img-external" src="">等等，我无法让它工作。我在哪里调用文本 block ？

Answer 1

你必须编辑你的模板 js 和 css 文件。您也可以添加文件。您可以在此处找到更多信息:https://developer.wordpress.org/themes/basics/including-css-javascript/在这里:https://www.wpexplorer.com/javascript-wordpress/

干杯