如何将css类添加到特定的图像集？

时间：2019-01-31 作者：Rich

我试图理解如何在WordPress中向一组图像添加类。具体来说，我尝试添加一个类，例如，.no-lazy-load, 要避免通过延迟加载这些图像a3 Lazy Load plugin. 该集是一个流畅的幻灯片中的一系列6幅图像，它们没有其他类或id（除了.lazy-loaded 当呈现html时，插件添加的类）。

我将Jevelin主题与经典编辑器插件一起使用，没有看到通过高级选项向图像添加类的选项。事实上，我根本看不到编辑图像的高级选项。

我在考虑使用something like this 但不知道如何将此挂钩添加到该图像集，而不是DOM中的所有图像。例如，我可以使用wp_get_attachment_image 把钩子只挂在那些人身上？

我不太熟悉WordPress，如果这是一个过于宽泛的问题，我深表歉意。如果您能提供任何帮助或指引正确的方向，我们将不胜感激！

4 个回复

最合适的回答,由SO网友:Alexander Holsgrove 整理而成

您可以使用get_image_tag_class 将附件ID作为参数传递的筛选器：

apply_filters(\'get_image_tag_class\', string $class, int $id, string $align, string|array $size)

因此，您可以使用：

function my_image_tag_class($class, $id, $align, $size) {
   // Logic to check your attachment IDs
   if($some_logic) {
       $class .= \' no-lazy-loaded\';
   }
   return $class;
}
add_filter(\'get_image_tag_class\',\'my_image_tag_class\');

如果您有一个要筛选的附件ID数组，那么您的逻辑将是：

if(in_array($id, $your_array_of_attachments)) { ...

SO网友:Sabbir Hasan

您可以使用jQuery在用户浏览器上添加或删除类。方法可以是这样的：

jQuery.( document ).ready(function($){
    $( ".lazy-loaded" ).each(function() {
        //You can simply add the class then remove existing one like this
        $( this ).addClass( "no-lazy-loaded" ).removeClass(\'lazy-loaded\');

        //You can just add the class like this
        $( this ).addClass( "no-lazy-loaded" );


        //Only use one of above methods
    });
});

这将允许您操纵输出。您可以将其添加到页脚中。php文件。

****我只是再次建议一种方法。

SO网友:T.Todua

这取决于所提到的插件通过哪些挂钩和函数输出HTML。因为您还没有发布生成输出的确切函数（代码）。

1）由于我们没有足够的时间深入研究这个插件，在未知的情况下，我可能会建议使用一个简单的挂钩：

add_filter(\'a3_lazy_load_images_after\',\'output_change\');

//甚至：add\\u filter（\'the\\u content\'，\'output\\u change\'）；

function output_change($html_output) { 
   return str_replace(\'.lazy-loaded\', \'.no-lazy-loaded\', $html_output);
}

2）也可以使用这种方法：

add_filters( \'a3_lazy_load_run_filter\', \'__return_false\');

在您选择的帖子输出之前。之后，恢复行为：

add_filters( \'a3_lazy_load_run_filter\', \'__return_true\');

SO网友:tmdesigned

听起来最简单的选择是自己将想要的类添加到图像中。您正在寻找此选项，但表示找不到。然而，如果您像您所说的那样使用经典编辑器，那么实际上这是可能的。

要使用经典编辑器将类添加到图像中，请执行以下操作：

使用“添加媒体”按钮将图像添加到页面一旦图像在编辑器中，单击一次以打开菜单按钮，在图像详细信息弹出窗口中选择编辑（铅笔）按钮，单击左侧的“高级选项”，在“图像CSSClass”字段中输入所需的类名（即无延迟加载

小码农CODE

如何将css类添加到特定的图像集？

相关推荐

https images not displaying