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:
- Par défaut, un site non réactif doit être chargé si l'utilisateur à partir du bureau
- Par défaut, un site responsive doit être chargé si l'utilisateur de mobile
- 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.
- 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.
- Par défaut, un site non réactif est chargé si l'utilisateur du bureau
- 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?
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);