mercredi 8 juillet 2015

How to use conditional tags to switch this style sheets?

[[OK there are some genius guys started to Downvoting.. please let me know why.. That will help to understand the reason at least. Then I can learn bit more]]

My site works fine but I want to slightly change my if else conditions as per my new requirement. Right now I think it's not about wordpress but it's about how to change some PHP conditional tags. So I am asking here.

My previous requirements were :

  1. If the site is loaded on mobile site I have to show a button and when it's clicked the site should enqueue a style sheet called responsive.css
  2. When the site is (in mobile) responsive another button should be shown to switch to default style.css when the button is clicked.

I put following buttons:

<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>

style.css

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

responsive.css

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

And my 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 );
            }
        }
    }
?>

This is how I achieved my old requirements and work fine. No any issue in 1st & 2nd requirements

Now I have updated requirements:

  1. By default a non-responsive site should be loaded if the user from desktop
  2. By default a responsive site should be loaded if the user from mobile
  3. If the user clicks a desktop switching button from mobile (responsive) site, the non-responsive site should be loaded in the mobile.
  4. If the user clicks a mobile switching button from mobile (non-responsive) site, the responsive site should be loaded.

In summary:

  1. If the site is loaded on mobile it should enqueue the style sheet style.css and should show the button desktop_site

  2. If the user clicks the button desktop_site then it should enqueue responsive.css and should show the button mobile_site

  3. If the user clicks mobile_site button again it should enqueue style.cssand should show the button desktop_site

I think it almost just if else condition changes but I could not solve.

Suggestions and solutions please....

Aucun commentaire:

Enregistrer un commentaire