web-dev-qa-db-fra.com

Comment changer les fichiers CSS en fonction des périphériques et des clics de bouton?

J'essaie de mettre en file d'attente un fichier css sensible si le site Web est ouvert sur des appareils mobiles.

Aussi, je veux basculer/mettre en file d'attente un fichier CSS par défaut ou non réactif lorsqu'un clic est fait sur un bouton. Le fichier css non réactif est la feuille de style par défaut chargée sur le bureau.

Les exigences sont donc les suivantes:

  1. Par défaut, un site non réactif doit être chargé si l'utilisateur à partir du bureau
  2. Par défaut, un site responsive doit être chargé si l'utilisateur de mobile
  3. Si l'utilisateur clique sur un bouton de commutation de poste de travail depuis un site mobile (responsive), le site non réactif doit être chargé dans le mobile.
  4. Si l'utilisateur clique sur un bouton de commutation de mobile depuis un site mobile (non réactif), le site sensible doit être chargé.

J'ai style.css (fichier css non réactif) dans mon répertoire de thèmes et mon fichier responsive css se trouve dans un dossier qui se trouve dans le répertoire de thèmes.

  • css non réactif est un fichier dans: theme-directory/style.css
  • responsive css est un fichier dans: theme-directory/css/responsive.css

Et j'ai les boutons suivants.

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

J'ai ajouté le code suivant dans mon functions.php

A. Pour charger le site responsive si l'utilisateur du mobile:

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

B. Pour charger le site non réactif si l'utilisateur clique sur le bouton

function switch_css_file(){
    if ($site == 'desktop'){
        function default_css(){
            wp_enqueue_style(
                'default_css',
                get_template_directory_uri() . '/style.css'
            );
        }
        add_action( 'wp_enqueue_scripts', 'default_css', 999 );
    }
    if ($site == 'mobile'){
        function default_css(){
            wp_enqueue_style(
                'default_css',
                get_template_directory_uri() . '/css/responsive.css'
            );
        }
        add_action( 'wp_enqueue_scripts', 'default_css', 999 );
    }
}
add_action('init', 'switch_css_file', 2);

Maintenant, les exigences 1 et 2 sont acceptables.

  1. Par défaut, un site non réactif est chargé si l'utilisateur du bureau
  2. Par défaut, un site sensible est chargé si l’utilisateur de mobile

Je ne suis pas sûr que la fonction switch_css_file fonctionne ou non. Les 3ème et 4ème conditions ne sont pas encore atteintes. Si je clique sur le bouton desktop_site du mobile, le site est rechargé et il est toujours en version responsive.

Comment puis-je atteindre les 3ème et 4ème exigences?

De plus, je pense que je dois installer un cookie lors du changement. Un cookie doit être défini lorsque le bouton desktop_site est cliqué et doit être désactivé lors du clic sur mobile_site.

Comment puis-je faire ceci?

wp-enqueue-scriptwp-enqueue-stylemobilecookiesresponsive
2
Foolish Coder

01. Changer

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

À

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

02. et pour supprimer le cookie lorsque le navigateur est fermé, donnez l'heure comme 0 (zéro) ou vide. quelque chose comme ça.

setcookie( 'button_clicked', $_GET['button_clicked'], 0, COOKIEPATH, COOKIE_DOMAIN);
2
Riffaz Starr