在移动设备上禁用媒体文件图像链接

时间:2015-08-25 作者:Connor

我希望禁用移动设备上的“媒体文件”图像链接,以便在移动设备上查看网站时,只需显示图像,而不显示任何链接。

我希望做到这一点,因为在一种响应性强的设计中,我的图像在移动设备上都是100%宽的。单击图像只会打开一个大小相同的图像,甚至更小,具体取决于lightbox的填充设置。

我使用shadowbox js plugin 打开响应灯箱中的媒体文件图像链接。此插件检测媒体文件图像链接,并添加一个rel=“shadowbox”以在lightbox中打开全尺寸版本。

我在这里首先尝试在原生WordPress媒体文件图像链接代码中实现所描述的功能,因为我相信该插件只是简单地与之挂钩。

我对此做了很多研究,但都没有结果。我尝试的一个不成功的实现来自以下线程:Disable Linked Gallery Images If Mobile Browser

在此过程中,我向函数中添加了以下代码。php文件(我想通过functions.php文件或插件实现这一点),但它不起作用。

$image = wp_get_attachment_image( $id, $size, false );
// if it\'s set to not show the image link
if(isset($attr[\'link\']) && (\'none\' == $attr[\'link\']) && !is_mobile() ){
// then just show the image
echo $image;
} else {
// else show the image wrapped in a link
$link = wp_get_attachment_url($id);
echo "<a href=\\"$link\\">$image</a>";
}
是否可以禁用移动设备上的“媒体文件”图像链接?

2 个回复
SO网友:Sandeep

您可以使用HTML和CSS轻松做到这一点。您可以为同一个图像写入2块div,并切换显示:无;CSS中使用媒体查询的属性,如下所示。注意:我已删除mobile的“a href”标记。

<!--HTML Start -->
 <div class="image-grid desktop">
 <a href="#"><img  src="#" /></a>
 <div>

   <!--For Mobile -->

 <div class="image-grid mobile">
 <img  src="#" />
 <div>

<!--HTML End -->

<!--CSS Start -->
.image-grid.mobile{display:none;}


@media only screen 
  and (min-device-width: 320px) 
  and (max-device-width: 480px)
  and (-webkit-min-device-pixel-ratio: 1) {

.image-grid.desktop{display:none;}
.image-grid.mobile{display:block;}

}


<!--CSS End -->

SO网友:David Gallagher

你不可能从functions.php 或插件。您发布的代码需要替换显示图像的页面的模板文件中的代码。

如果可以修改模板文件,请找到模板中生成图像HTML的位置,然后可以用类似于您发布的代码的内容替换它。您很可能需要以某种方式修改上面发布的代码。

此外,除非您添加了is_mobile() 功能,您将需要替换is_mobile() 具有wp_is_mobile().

最后,我应该补充一点,这不是一个“响应性”解决方案。理想情况下,您应该使用HTML和/或CSS和/或JavaScript来解决您的问题。

相关推荐

PAGINATE_LINKS不会在分类过滤的自定义帖子类型归档上创建正确的链接

经过几个小时的测试和混乱。。。我面对墙,厌倦了搜索(主要是因为我的谷歌答案已经全部点击了!)I\'m trying to display paginate_link with a filters taxonomy form (AGAIN ????? ;).通过这里的所有解决方案,我发现了如何在表单的结果中获得正确编号的分页first page 的结果。主要问题,是在分页链接中,他们使用了错误的$第paged页;和我的筛选器从查询中删除(通过tax\\u query=>;…)第/2页,以及下面的其他内容