如何在帖子中的图片上创建onClick事件?

时间:2018-04-02 作者:Space Money

应该是这样的:

<img onclick="og_load();"  style="cursor: pointer;" src="wp-content/uploads/2018/04/downloadnow1.png" alt="" width="455" height="116"> 
但它在以下方面不断变化:

<img style="cursor: pointer;" src="/wp-content/uploads/2018/04/downloadnow1.png" alt="" width="455" height="116" />
我假设必须在函数中添加一些内容。php但解决方案超出我的知识范围,谁能帮我一把?

干杯

Edit:嗯,我读了一些略有不同的问题,但都表示这与WP文本编辑器有关。

代码是调用我添加到head标记的脚本所在的内容锁。

在一个静态站点中,我已经让它工作了,但因为编辑器不断更改代码,所以它不会调用locker。

我尝试这样做是为了消除标签限制

方法1:禁用WordPress筛选脚本标记

如果您相信您的作者不会陷入麻烦,那么您可以在JavaScript中禁用对脚本标记的阻止。在wp配置中。php在根web目录中,您需要通过添加以下代码行来启用自定义标记:

定义(\'CUSTOM\\u TAGS\',true);

在您的职能范围内。php页面中,可以添加以下代码:

函数add\\u scriptfilter($string){global$allowedtags;$allowedtags[\'script\']=数组(\'src=>数组());return$string;}add\\u filter(\'pre\\u kses\',\'add\\u scriptfilter\');

很遗憾,出现了以下错误:

Warning: in_array() expects parameter 2 to be array, null given in /home/a7480/public_html/wp-includes/kses.php on line 1416
为了澄清这是一个帖子中的图像,点击后需要调用内容锁定器。

Update:

好吧,这很奇怪,当我将“inspect element”中的图像url替换为

<img onclick="og_load();"  style="cursor: pointer;" src="wp-content/uploads/2018/04/downloadnow1.png" alt="" width="455" height="116">
它确实有效。。。

现在来看看如何让它真正起作用。

Last Update:亲爱的上帝母亲,我终于让它工作了,唯一糟糕的是如果我切换到可视化编辑器,它会剥离代码。

1 个回复
SO网友:Rick Hellewell

通常,输出的页面代码是由主题代码生成的,没有具体说明。因此,您需要查看用于该页面的主题模板。

使用的模板由WordPress主题继承人决定,详情如下:https://developer.wordpress.org/themes/basics/template-hierarchy/ ; 看一看图形,它将帮助您了解正在使用的模板。

然后,查看该模板文件以找到输出“img”标记的内容。这需要一些挖掘。找到代码后,请将其发布到此处以获得更多帮助。

也可以使用DOM对象用一些Javascript修改所有“img”标记,但这会影响所有“img”标记,这可能不是您想要的。很多关于如何做到这一点的教程。

但如果没有生成“img”标记的代码的更多细节,就很难给出明确的答案。以上过程将帮助您了解该代码是什么。

Added

下面是一些更改DOM对象中“class”属性的代码:

function fix_img_tag() {
    $dom = new DOMDocument;
    libxml_use_internal_errors(false); // supress errors
    $dom->loadHTML($html, LIBXML_NOERROR);  // supress errors
    // img = change class to myclass (removing any other class statement)
    foreach ($dom->getElementsByTagName(\'img\') as $node) {
        $node->setattribute(\'class\',\'myclass\');

        $dom->saveHtml($node) ;
    }   
    $html = $dom->saveHTML();   // saves the object (all of the html) so we can return it   
    return $html;
}
基于该代码和DOM对象本身,您应该能够了解如何将onclick元素添加到img标记中。请注意,上述代码将更改all img标签。

然后,只需了解如何将该函数添加到\\u content()过滤器。。。提示:https://codex.wordpress.org/Plugin_API/Filter_Reference/the_content

DOM是一件有趣的事情。可以使用DOM对象执行许多操作。

(请注意,我正在为您提供如何学习如何完成任务以及如何实施任务的指导。学习东西是件好事。)

结束

相关推荐

Functions.php过滤器未应用于AJAX调用

我已经使用php向菜单中添加了一个元素(为了便于说明,简化了代码):add_filter( \'wp_nav_menu_\' . $menu_slug . \'_items\', \'add_menu_item\' , 10, 2 ); function add_menu_item ( $items ) { $item = sprintf(\'<li class=\"custom-item\">%s</li>\', menu_item_content ()