javascript - 如何使用条件标签来切换这个样式表？

Question

我的网站工作正常，但我想根据我的新要求稍微更改我的 if else 条件。现在我认为这不是关于 wordpress 的，而是关于如何更改一些 PHP 条件标签 的。所以我在这里问。

我之前的要求是:

1. 如果网站加载到移动网站上，我必须显示一个按钮并当它被点击时，网站应该将一个名为的样式表排入队列响应式.css
2. 当网站(在移动设备上)响应时，另一个按钮应该是显示单击按钮时切换到默认 style.css。

我放置了以下按钮:

<div class="cr-athavan-lang-image">
    <a href="?site=mobile" class="mobile_site" id="mobile_site"><img src="file/path/to/img" alt="switch to mobile site"></a>
    <a href="?site=desktop" class="desktop_site"><img src="file/path/to/img" alt="switch to desktop site"></a>  
</div>

样式.css

.desktop_site { display: none; }  /* Hiding switch to desktop site button if the site is loaded on desktop */

响应式.css

.desktop_site { display: block; margin-top: 5px; } /* bring back switch to desktop site button if the site is loaded on mobile */

还有我的functions.php

<?php
if ( !wp_is_mobile() ) { // to hide mobile switching button on desktop site 
    function print_inline_script_hide_site_switch() {                   
        ?>
        <script type="text/javascript">     
            jQuery('.mobile_site').hide();                                              
        </script>
        <?php                 
    }
    add_action( 'wp_footer', 'print_inline_script_hide_site_switch' );
}
    else {              
        add_action('init', 'is_it_mobile_or_desktop', 1);
        function is_it_mobile_or_desktop(){
            if (isset($_GET['site']) && in_array($_GET['site'], array('mobile', 'desktop'))){
                setcookie( 'site', $_GET['site'], time() + 3600, COOKIEPATH, COOKIE_DOMAIN);
            }
        }

        add_action('init', 'who_am_i', 2);
        function who_am_i(){

            $site = isset($_GET['site']) && in_array($_GET['site'], array('mobile', 'desktop')) ?  $_GET['site'] : 
                    (isset($_COOKIE['site']) && in_array($_COOKIE['site'], array('mobile', 'desktop'))  ? $_COOKIE['site'] : 'default_css');

            if ($site == 'mobile'){
                function responsive_css(){
                    wp_enqueue_style(
                        'wpa_custom',
                        get_template_directory_uri() . '/css/responsive.css'
                    );
                }
                add_action( 'wp_enqueue_scripts', 'responsive_css', 999 );

                function print_my_inline_script() {                 
                    ?>
                    <script type="text/javascript">
                    /*My inline scripts*/                                               
                    </script>
                    <?php                 
                }
                add_action( 'wp_footer', 'print_my_inline_script' );

            } 
            else {
                function default_css(){
                    wp_enqueue_style(
                        'default_css',
                        get_template_directory_uri() . '/style.css'
                    );
                }
                add_action( 'wp_enqueue_scripts', 'default_css', 999 );
            }
        }
    }
?>

这就是我如何实现我的旧要求并且工作得很好。第一个和第二个要求没有任何问题

现在我更新了要求:

1. 默认情况下，如果用户来自桌面
2. 默认情况下，如果用户来自移动
3. 如果用户通过移动设备点击桌面切换按钮(响应式)站点，非响应式站点应加载到移动设备。
4. 如果用户在移动设备上点击移动设备切换按钮(非响应式)网站，应加载响应式网站。

总结:

1. 如果网站在移动设备上加载，它应该将样式表排入队列style.css 并且应该显示按钮desktop_site

2. 如果用户单击按钮desktop_site，那么它应该入队responsive.css 并应显示按钮 mobile_site

3. 如果用户再次点击 mobile_site 按钮，它应该入队style.css并且应该显示按钮desktop_site

我认为这几乎只是if else条件改变，但我无法解决。

请提出建议和解决方案......

Answer 1

我认为这个问题与您的 WordPress 交换问题之一相关:wordpress.stackexchange.com/questions/193813/how-to-switch-css-files-according-to-devices-and-button-click/

是的，正如您所假设的，解决方案位于 if 语句中:

改变

if (($site == 'desktop'){ // code line }

致

if (($site == 'desktop') && (wp_is_mobile())) { // code line }