web-dev-qa-db-fra.com

Charger un thème basé sur la détection du navigateur

Ok, je sais que la détection de navigateur est considérée comme une mauvaise pratique, mais je ne trouve pas le moyen de la contourner, car j’ai vraiment besoin de thèmes complètement différents pour un site complexe. J'ai donc arraché cette fonction à http://detectmobilebrowsers.com/

$useragent=$_SERVER['HTTP_USER_AGENT'];
 if(preg_match('/Android.+mobile|avantgo|bada\/|blackberry|blazer|compal|elaine|fennec|hiptop|iemobile|ip(hone|od)|iris|Kindle|lge |maemo|meego.+mobile|midp|mmp|netfront|opera m(ob|in)i|Palm( os)?|phone|p(ixi|re)\/|plucker|pocket|psp|series(4|6)0|symbian|treo|up\.(browser|link)|vodafone|wap|windows (ce|phone)|xda|xiino/i',$useragent)||preg_match('/1207|6310|6590|3gso|4thp|50[1-6]i|770s|802s|a wa|abac|ac(er|oo|s\-)|ai(ko|rn)|al(av|ca|co)|amoi|an(ex|ny|yw)|aptu|ar(ch|go)|as(te|us)|attw|au(di|\-m|r |s )|avan|be(ck|ll|nq)|bi(lb|rd)|bl(ac|az)|br(e|v)w|bumb|bw\-(n|u)|c55\/|capi|ccwa|cdm\-|cell|chtm|cldc|cmd\-|co(mp|nd)|craw|da(it|ll|ng)|dbte|dc\-s|devi|dica|dmob|do(c|p)o|ds(12|\-d)|el(49|ai)|em(l2|ul)|er(ic|k0)|esl8|ez([4-7]0|os|wa|ze)|fetc|fly(\-|_)|g1 u|g560|gene|gf\-5|g\-mo|go(\.w|od)|gr(ad|un)|haie|hcit|hd\-(m|p|t)|hei\-|hi(pt|ta)|hp( i|ip)|hs\-c|ht(c(\-| |_|a|g|p|s|t)|tp)|hu(aw|tc)|i\-(20|go|ma)|i230|iac( |\-|\/)|ibro|idea|ig01|ikom|im1k|inno|ipaq|iris|ja(t|v)a|jbro|jemu|jigs|kddi|keji|kgt( |\/)|klon|kpt |kwc\-|kyo(c|k)|le(no|xi)|lg( g|\/(k|l|u)|50|54|\-[a-w])|libw|lynx|m1\-w|m3ga|m50\/|ma(te|ui|xo)|mc(01|21|ca)|m\-cr|me(di|rc|ri)|mi(o8|oa|ts)|mmef|mo(01|02|bi|de|do|t(\-| |o|v)|zz)|mt(50|p1|v )|mwbp|mywa|n10[0-2]|n20[2-3]|n30(0|2)|n50(0|2|5)|n7(0(0|1)|10)|ne((c|m)\-|on|tf|wf|wg|wt)|nok(6|i)|nzph|o2im|op(ti|wv)|oran|owg1|p800|pan(a|d|t)|pdxg|pg(13|\-([1-8]|c))|phil|pire|pl(ay|uc)|pn\-2|po(ck|rt|se)|prox|psio|pt\-g|qa\-a|qc(07|12|21|32|60|\-[2-7]|i\-)|qtek|r380|r600|raks|rim9|ro(ve|zo)|s55\/|sa(ge|ma|mm|ms|ny|va)|sc(01|h\-|oo|p\-)|sdk\/|se(c(\-|0|1)|47|mc|nd|ri)|sgh\-|shar|sie(\-|m)|sk\-0|sl(45|id)|sm(al|ar|b3|it|t5)|so(ft|ny)|sp(01|h\-|v\-|v )|sy(01|mb)|t2(18|50)|t6(00|10|18)|ta(gt|lk)|tcl\-|tdg\-|tel(i|m)|tim\-|t\-mo|to(pl|sh)|ts(70|m\-|m3|m5)|tx\-9|up(\.b|g1|si)|utst|v400|v750|veri|vi(rg|te)|vk(40|5[0-3]|\-v)|vm40|voda|vulc|vx(52|53|60|61|70|80|81|83|85|98)|w3c(\-| )|webc|whit|wi(g |nc|nw)|wmlb|wonu|x700|yas\-|your|zeto|zte\-/i',substr($useragent,0,4)))
header('Location: http://detectmobilebrowser.com/mobile');

ne va pas faire qui convient à cette boîte

Alors, comment puis-je l'utiliser pour charger un thème spécifique que j'ai déjà téléchargé dans mon dossier de thèmes?

themesmobile
1
Pollux Khafra

Vous pouvez utiliser la fonction intégrée wp_is_mobile()

Remplacer un style avec wp_enqueue_style

add_action('wp_enqueue_scripts', 'my_mobile_styles');
function my_mobile_styles(){
    if(wp_is_mobile()){
        wp_register_style( 'my-mobile-style', 'URL_to_stylesheet', array('id-of-main-stylesheet') );
        wp_enqueue_style( 'my-mobile-style' );
    }
}

Changer de thème par filtres

Vous pouvez utiliser les filtres stylesheet et template pour modifier le thème rendu par WordPress.

# Parent Theme
add_filter( 'template', 'my_mobile_template', 99999, 1);
function my_mobile_template($template){
    if(wp_is_mobile())
        return 'mobile_template_dir_name';
    return $template;
}

# Parent or Child Theme (if applicable)
add_filter( 'stylesheet', 'my_mobile_stylesheet', 999999, 1);
function my_mobile_stylesheet($stylesheet){
    if(wp_is_mobile())
        return 'mobile_stylesheet_dir_name';
    return $stylesheet;
}

Isolement sur un agent d'utilisateur mobile

Vous pouvez en savoir plus en utilisant les éléments suivants extraits de wp_is_mobile () dans les crochets de votre instruction IF conditionnelle.

$is_ios = strpos($_SERVER['HTTP_USER_AGENT'], 'Mobile');
$is_Android = strpos($_SERVER['HTTP_USER_AGENT'], 'Android');
$is_silk = strpos($_SERVER['HTTP_USER_AGENT'], 'Silk/');
$is_Kindle = strpos($_SERVER['HTTP_USER_AGENT'], 'Kindle');
$is_blackberry = strpos($_SERVER['HTTP_USER_AGENT'], 'BlackBerry');
$is_opera_mini = strpos($_SERVER['HTTP_USER_AGENT'], 'Opera Mini');

À partir de là, vous pouvez mettre en file d'attente les styles qui remplacent votre thème principal.

Caveat

Il est important de noter qu'il existe une fonction appelée switch_theme() qui ne doit pas être utilisée dans ce cas. Il change littéralement l'emplacement du thème et de la feuille de style dans la base de données. switch_theme() changerait votre thème en version mobile pour tous les utilisateurs chaque fois qu'un agent utilisateur mobile est détecté.

Essai

J'utilise généralement des extensions de navigateur qui modifient la définition de l'agent utilisateur du navigateur pour tester quelque chose comme ceci. Voici quelques liens vers ceux que j'ai utilisés:

J'espère que cela vous aide!

5
Brian Fegter

Si vous utilisez des thèmes pour enfants:

if(!is_child_theme()){
     add_filter('template', 'my_mobile_template');
}
add_filter('stylesheet', 'my_mobile_stylesheet');

En effet, vous avez déjà défini le modèle dans la feuille de style des thèmes enfants.

Il m'a fallu littéralement une semaine pour le comprendre.

2
jocken