Question

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

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

现在我的问题是如何为这个小部件添加一个onclick功能，例如当我在移动浏览器上点击这个小部件时，我会调用一个短代码。

任何代码示例，说明如何将一些javascript添加到文本小部件，以便在单击时调用短代码。

Answer 1

我的解决方案与javascript无关。但也许这会有所帮助。

查看条件标签wp_is_mobile

https://codex.wordpress.org/Function_Reference/wp_is_mobile

if ( wp_is_mobile() ) { 
  echo do_shortcode('[YOUR-CUSTOM-MOBILE-SHORTCODE]');
} else {
  echo do_shortcode('[YOUR-CUSTOM-DESKTOP-SHORTCODE]');
}

您应该能够在移动设备上显示您想要的任何内容，然后在桌面上显示不同的内容。

Answer 2

最后，我所要做的就是指定移动自定义css代码，我给它起一个名字，然后让它只对移动设备可见（800宽度以上不可移动，可能是平板电脑，电脑等）

＆＃xA ;＆＃xA;

  @media only screen＆＃xA; and（max-width：800px）{＆＃xA;＆＃xA; .media {display：none; }＆＃xA;＆＃xA;}＆＃xA;＆＃xA;＆＃xA; @media only screen＆＃xA;和（min-width：800px）{＆＃xA;＆＃xA;＆＃xA ; .vid {＆＃XA; display：none;＆＃xA;}＆＃xA;＆＃xA;}＆＃xA;

＆＃xA;＆＃xA;

然后从我的小部件中添加图像背景指向我放入header.php

＆＃xA;＆＃xA;

 ＆lt; img class =“vid”onclick =“myFunction（）;”的自定义函数src =“http://www.domain.com/wp-content/uploads/2016/03/button.png”/＆gt;＆＃xA;

＆＃xA;

具有onclick功能的Wordpress文本小部件

2 个答案: