是否可以根据媒体查询更改短码参数?

时间:2019-02-05 作者:Greg

我正在使用一个显示/隐藏插件,该插件有一个带有state=“open”或state=“closed”参数的短代码。我希望它在桌面上打开,但在移动设备上关闭。是否可以根据媒体查询或某些javascript或仅在屏幕大小小于768px时插入短代码的内容更改此参数?

1 个回复
SO网友:phatskat

Edit: 我之所以建议使用Javascript,是因为PHP和您的Web服务器,以及WordPress,对客户端或其屏幕大小一无所知。您可能知道有人在使用Chrome或Safari,但在您能够与Javascript交互之前,您无法了解他们的浏览器尺寸。

如果短代码的结果内容具有唯一的ID或CSS类,则可以将一些简单的Javascript添加到页面中。假设您的短代码输出如下:

<div class="my-shortcode-thing">
    <!-- HTML here -->
</div>
// Using jQuery
jQuery( function($) {
    if ( 768 <= parseInt( $(window).width(), 10 ) ) {
        return;
    }

    $(\'.my-shortcode-thing\').remove();
} );
如果需要,我还可以提供一个“香草”Javascript示例。

这里的缺点是它不会充当“真正的”mediaquery,调整浏览器大小会使其动态出现/消失,但这并非不可能。如果只是隐藏/显示内容就足够了(即,您没有need 要删除它,只需隐藏它),您可以执行以下操作:

jQuery( function($) {
    // Will store our setTimeout result
    var timeout = null;

    // Whether we\'re displaying the things.
    var displaying = true;

    function maybeToggleContent() {
        // Use your content\'s selector here
        var things = $(\'.my-shortcode-thing\');

        if ( 768 <= parseInt( $(window).width(), 10 ) ) {
            if ( displaying ) {
                return;
            }

            displaying = true;
            things.show(); // or things.fadeIn() for "fancy" stuff
            return;
        }

        if ( ! displaying ) {
            return;
        }

        displaying = false;
        things.hide(); // Again, .fadeOut() for extra pizazz
    }

    $(window).on(\'resize\', function() {
        // Using a timeout here so we don\'t bog down the resize event.
        clearTimeout(timeout);
        timeout = setTimeout( maybeToggleContent, 500);
     } );

} );

相关推荐

Namespaced shortcode?

我正在改造一个旧的WP站点,该站点有许多自定义的短代码,显然由于代码当前的组织方式,这些短代码在性能方面付出了代价。当然,我可以修复优化不好的代码,使用十几个短代码,并且一天就可以完成,但我想知道如何更好地组织它们。根据WordPress\'documentation, 建议将它们放在插件中并在上初始化init. 我们可以通过这样“命名”它们来减少这个钩子中的负载吗?[com.company shortcode attr=\"attr\" prop=\"prop\"] 有人尝试过这样的解决方案吗