Question

我是wordpress的新手，并且正在使用自定义主题（http://demo.richwp.com/showcasedark/）。

我想使用我自己的自定义灯箱脚本（每张图片都需要一个自定义类），但我很难尝试将该类应用到我的图片库。

例如，每个图像都默认使用此HTML代码：

a href =“_ images / anim_reel001.jpg”（其次是img来源详情）

我希望它看起来像这样：

a href =“_ images / anim_reel001.jpg”class =“view”（后面是img源码详情）

似乎这样做的方法是在我的functions.php文件中创建一个自定义函数，但我完全不懂PHP脚本。此外，我不确定这是否适用于现有图像，或仅适用于我上传的新图像/画廊。任何帮助将不胜感激！

Answer 1

如果jQuery是一个选项...你可以定位所有的画廊，并确保将该类添加到锚点。你可以在这里看到这个：

The Demo

在小提琴结果中查看占位符图像上的来源，您可以看到即使在标记中<a>现在也没有类。

这可以使用3个代码块来模仿WordPress图库输出的内容。

HTML

<div id="gallery-1" class="gallery">
  <dl class="gallery-item">
    <dt class="gallery-icon">
      <a href="#">
        <img width="75" height="75" src="http://dummyimage.com/75x75/000/fff.jpg" class="attachment-thumbnail" />
      </a>
    </dt>
  </dl>

  <dl class="gallery-item">
    <dt class="gallery-icon">
      <a href="#">
        <img width="75" height="75" src="http://dummyimage.com/75x75/000/fff.jpg" class="attachment-thumbnail" />
      </a>
    </dt>
  </dl>

  <dl class="gallery-item">
    <dt class="gallery-icon">
      <a href="#">
        <img width="75" height="75" src="http://dummyimage.com/75x75/000/fff.jpg" class="attachment-thumbnail" />
      </a>
    </dt>
  </dl>

  <dl class="gallery-item">
    <dt class="gallery-icon">
      <a href="#">
        <img width="75" height="75" src="http://dummyimage.com/75x75/000/fff.jpg" class="attachment-thumbnail" />
      </a>
    </dt>
  </dl>

CSS

#gallery-1 {
  margin: auto;
}
#gallery-1 .gallery-item {
  float: left;
  margin-top: 10px;
  text-align: center;
  width: 25%;            }
#gallery-1 img {
  border: 2px solid #cfcfcf;
}
#gallery-1 .gallery-caption {
  margin-left: 0;
}

的jQuery

$(document).ready(function(){
  $('div.gallery').each(function(i) {
    $('.attachment-thumbnail').parent().addClass('view');
  });
});

好的东西发生在jQuery代码块中，因为你可以看到，当文档准备就绪时，我们通过选择它们div.gallery来浏览所有的库，然后我们循环遍历每个库到找到为WordPress图库提供给.attachment-thumbnail拇指的<img>类，我们将<img>的父母定位为<a>标记并添加你想要的课程叫.view。

值得注意的是，要使此解决方案适合您，您需要在文件中包含jQuery，否则这将无效。您可能已经包含了jQuery。

将自定义类添加到wordpress中的图库

1 个答案:

The Demo

HTML

CSS

的jQuery