0

我正在使用 WordPress根据视口大小有条件地加载内容load()，但我需要用更合适的方法替换该方法。您可以通过调整浏览器大小并观看它根据浏览器大小加载自定义值来查看上面链接中的工作原理。

示例 CSS：

    body:after { 
        display: none; 

        /* Default */
        content: "Mobile";
    }

    @media (min-width: 35em) {
        body:after {
            content: "Desktop";
        }
    }

具体来说，如果 JS 可以检测到它content: "Mobile"是活动的，它将加载移动内容。如果检测到content: "Desktop"，它将加载桌面内容。

这是我正在尝试使用的javascript：

$(function() {
    var currentSize = "Mobile";
    $(window).resize(function() {
        var size = window.getComputedStyle(document.body, ':after').getPropertyValue('content');

        /* Ridiculous thing to deal with inconsistent returning of
        value from query. Some browsers have quotes some don't */
        size = size.replace(/"/g, "");
        size = size.replace(/'/g, "");

        if (size != currentSize) {
            if (size == 'Desktop') {
               $(".content").load('file.php');
               currentSize = 'Desktop';
            }
        }

    }).resize();

}

我只是意识到该load()方法不适合我正在尝试做的事情。如何加载带有自定义钩子的块？

这是我想插入桌面版本以替换移动版本代码的一些示例代码：

    <div class="item">
        <h2 class="nav-tab">One</h2>
        <?php the_block('One'); ?>
    </div>
    <div class="item">
        <h2 class="nav-tab">Two</h2>
        <?php the_block('Two'); ?>
    </div>
    <div class="item">
        <h2 class="nav-tab">Three</h2>
        <?php the_block('Three'); ?>
    </div>

如您所见，有 3 个自定义挂钩包含更多标记和代码。我不知道如何正确地将其加载到 javascript 中，以便它替换移动版本代码。

4

0 回答 0