如何在手机版浏览网站时禁用Wordpress功能？

Question

我有一个自定义图库短代码，因为我在我的图库页面中使用同位素。所以基本上，我有一个画廊页面，我只需将所有图像拖放到此处，然后让 dessandro 的同位素布局完成其余的工作。此外，我使用 Fancybox 作为我的灯箱，单击时可以看到完整版本的图像。这些都在我创建的functions.php自定义库中。

它看起来不错，但是，在移动设备中，我想禁用这个功能，即 fancybox，因为在这么小的设备中使用灯箱有点尴尬。

我的解决方案是，禁用我在functions.php中创建的自定义图库功能，以便wordpress的本机图库（顺便说一句，在新的更新3.5中很酷）将生效，因此也可以使用fancybox禁用同位素。

如果用户点击移动版本上的图像，它将链接到attachment.php模板而不是fancybox，因为自定义功能现已禁用。

一个很好的例子是 http://thereason.us/

这个网站是在 wordpress 中的，所以我知道它是可能的。有人有想法吗？

谢谢。

Answer 1

好吧，他们正在做的是检查屏幕宽度是否超过

500

像素，如果是，则打开灯箱，否则保留链接的默认操作并打开附件页面。

因此，我建议您更改函数，以将

data-attachment

或不同的属性添加到链接到图像的锚点，该图像将保存附件页面的 URL。

然后在你的JS中，首先将点击事件绑定到你的灯箱链接，例如：

(function($){
    $(".gallery a[href$='.jpg'], .gallery a[href$='.png'], .gallery a[href$='.jpeg'], .gallery a[href$='.gif']").on('click', function(){
        if ( parseInt($(window).width()) < 500 ) {
            window.location.href = $(this).attr('data-attachment');
            return false;
        }
    });
    // Initialize Fancybox
    $(".gallery a[href$='.jpg'], .gallery a[href$='.png'], .gallery a[href$='.jpeg'], .gallery a[href$='.gif']").attr('rel','gallery').attr('class','fancybox').fancybox();
})(jQuery);

然后实例化灯箱。理论上，这应该在灯箱函数之前绑定您之前的函数，但我不能 100% 确定。

Answer 2

我知道，这个问题很老了，但我仍然遇到同样的问题。

我使用带有经典编辑器（非古腾堡）的默认 WordPress 库，使用 Flexbox 进行改进，并使用 javascript 删除

<br>

标签。

我的第一个解决方案

它基本上是用 span 元素替换锚元素，如下所示：

document.addEventListener('DOMContentLoaded', function(){
    const galeries = document.querySelectorAll(".gallery");
    var widthDisplay = window.innerWidth;
    const widthPhone = 568; // landenscape max
        
    if(widthDisplay < widthPhone){ // LightBox plugin
            for(var i = 0; i < galeries.length; i++){
                var linc = galeries[i].querySelectorAll('a');
                
                for(var a = 0; a < linc.length; a++){
                    linc[a].outerHTML = "<span>" + linc[a].innerHTML + "</span>"; // replace <a> with <span> and also deactivate the gallery only on smartphone
                }
            }
        }
    
});

但是，此解决方案会加载图像，然后在 1 秒或更短的时间后，使用新标签再次重新加载它们。这对用户来说是一个糟糕的用户体验。

我的第二个/最佳解决方案

它使用纯CSS：

@media only screen and (max-width: 568px) { // landenscape phone max
  .gallery dl dt a {
        pointer-events: none;
        cursor: default;
        text-decoration: none;
    }
}

灵感来自于：如何仅使用 CSS 禁用链接

此解决方案的唯一缺点是，锚链接也可以使用热键

tab

+

enter

激活，将鼠标悬停在链接上，但据我所知，移动设备没有键盘，而且它是将图像在手机上居中并按下热键变得非常困难。