具有onClick功能的WordPress文本小工具

时间：2016-03-24 作者：Ceddy Muhoza

我有一个文本小部件，我只是在其中放置了一个iframe。

几天前，我想在移动浏览器上覆盖这个小部件，并在移动浏览器上添加图像的背景，幸运的是我使用了How to hide widget on mobile , 我更改了链接中的代码，而不是在移动设备上隐藏小部件，我只是给它一个背景图像。

现在我的问题是如何向这个小部件添加onclick函数，例如，当这个小部件在移动浏览器上单击时，我称之为短代码。

任何关于如何向文本小部件添加一些javascript的代码示例，以便在单击它时调用一个短代码。

3 个回复
最合适的回答,由SO网友:Ceddy Muhoza 整理而成

最后，我所要做的就是指定移动自定义css代码，我给它起个名字，然后让它只对移动设备可见（800width及以上不是移动的，可能是tablet、pc e.t.c）

@media only screen 
and (max-width : 800px) {

.media{ display: none; }

}


@media only screen 
and (min-width : 800px) {


.vid{
    display: none;
}   

}
然后从我的小部件中，我添加了指向我放在标题中的自定义函数的图像背景。php

<img class="vid" onclick="myFunction();" src="http://www.domain.com/wp-content/uploads/2016/03/button.png"  />

SO网友:RiaanP

我不完全确定您的设置是什么，但您可能可以使用jQuery向iframe元素添加一个on（\'click\'）。

perhaps:
$(iframe).on(\'click\',function(){
window.location = "http://www.yoururl.com";
})

SO网友:db306

下载mobble 插件，这将使您能够开始执行一些RESS（响应服务器端）。这个插件重量很轻，使用起来也很好，它还将用户代理和浏览器信息添加到所有页面的主体类中。因此，您可以简单地为您的小部件执行以下操作：

.mobile .myWidget{
display: none;
}
.desktop .myWidget{
// whatever }

.tablet .myWidget{
// whatever }
它还提供可在php代码中使用的布尔值：

if(!is_mobile){
// code to display widget sidebar?
}
如果最终使用了这些布尔值，并且使用了w3 Total Cache等缓存插件，请确保激活用户代理模式，以便服务器为每个用户代理创建不同的副本。这样，您就可以确保桌面上没有移动版本，反之亦然。

标签： javascript   小码农  

相关推荐

将JavaScript添加到WordPress网站

我有一个JavaScript代码片段，我想添加到我的WordPress+WooCommerce网站：$(document).ready(function() { $(\'.input-text\').on(\'input\', function() { var valueLength = $(this).val().length; if (valueLength > 0) { $(this).closest