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="">等，但我无法使其正常工作。我在哪里称呼文本块？

Answer 1

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

欢呼声

Answer 2

更改此内容：

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

对此：

if ($('.img-external')) {
        $('.img-external').first().find('.text-block').text('EXTERNAL IMAGE');
    } else {}

如果您只想为带有 .img-external 类的第一个div添加文本

欢呼

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

2 个答案: