Redirection mobile dans le .htAcess (Créer un compte)

  • WordPress :5.7
  • Statut : non résolu
  • Ce sujet contient 16 réponses, 3 participants et a été mis à jour pour la dernière fois par ferman, le il y a 20 minutes.
15 sujets de 1 à 15 (sur un total de 17)
  • Auteur
    Messages
  • #2378295
    lovedirt
    Participant
    Chevalier WordPress
    133 contributions

    Bonjour,

    Ma configuration WP actuelle

    • Version de PHP/MySQL : 5.7.2
    • Thème utilisé : Neve
    • Extensions en place : Woocomerce, Gtranslate, Jetpack, Slider Revolution, Really simple SSL, WP Cloudy
    • Nom de l’hébergeur : Ionos
    • Adresse du site : https://www.rentboatsescala.Com

    Problème(s) rencontré(s) :

    Bonjour à tous.

    Je souhaiterais pouvoir rediriger les utilisateurs mobiles qui arrivent sur mon site internet vers une page d’accueil spécifique, dédiée à un affichage mobile.

    Pour ce faire, j’ai fait des recherches sur ce même forum, et j’ai trouvé des débuts de réponse en utilisant ce code dans le fichier Htacess:

    RewriteCond %{HTTP_USER_AGENT} “ipod|iphone|ipad|android|palm|googlebot-mobile” [NC]
    RewriteCond %{REQUEST_URI} !.(jpe?g|png|gif|js|css)$
    RewriteCond %{QUERY_STRING} !^home-tel
    RewriteRule (.*)http://www.rentboatsescala.com/home-tel [R=301,L]

    Le problème que je rencontre, c’est que lorsque j’essaye d’accéder au site avec un mobile, j’ai une erreur “DNS_PROBE_FINISHED_NXDomain”. Dans la barre d’adresse, l’url de destination est désormais: http//rentboatsescala.com/home-tel (il manque donc les : avant //).

    J’aimerais pouvoir trouver une âme charitable pour m’aider à rediriger les personnes vers la page souhaitée.

    Bien cordialement,

    Kévin

    #2378316
    ferman
    Participant
    Maître WordPress
    4120 contributions

    Bonjour,

    Vous avez plusieurs façons de faire ça.

    Avec .htaccess ? peut être, pas sûr.  Regardez ICI.

    • Avec une simple redirection jQuery voir ICI. J’ai essayé le code ci-dessous qui fonctionne .
      function redirect_mobile(){
      	
      if(is_home()){?>	
      	<script type="text/javascript">
      		$=jQuery;	
      		if (screen.width <= 699){
      		document.location = "https://rentboatsescala.com/bateau/cap_camarat/";
      		}
      	</script>	
      <?php }	
      ;}	
      add_filter('wp_head','redirect_mobile');

    • En chargeant une feuille de style différente selon la taille de l’écran (si le contenu entre PC et mobile n’est pas modifié). Je n’ai pas essayé.
    • Cette réponse a été modifiée le il y a 3 semaines et 4 jours par ferman.
    • Cette réponse a été modifiée le il y a 3 semaines et 4 jours par ferman.
    #2378335
    lovedirt
    Participant
    Chevalier WordPress
    133 contributions

    Bonjour,

    Je ne suis pas du tout un adepte du Jquery; où est-ce que je dois intégrer ce code, dans le CSS additionnel ?

    Je cherche également à faire en sorte que plusieurs pages aient leurs propres redirections pour mobile; pour les bateaux en location, j’ai adapté chaque page de présentation des bateaux pour un affichage mobile et un affichage bureautique.

    L’accueil aurait une redirection vers l’accueil smartphone
    Les 5 pages de bateaux auraient chacune une redirection vers la page smartphone du bateau en question.

    CDT

    #2378338
    ferman
    Participant
    Maître WordPress
    4120 contributions

    Ce code essaie de répondre à votre question initiale: “Je souhaiterais pouvoir rediriger les utilisateurs mobiles qui arrivent sur mon site internet vers une page d’accueil spécifique, dédiée à un affichage mobile.” Si vous voulez essayer le jQuery et si ça marche avec la page d’accueil, je pense qu’il sera possible de faire la même chose avec les autres pages.

    Le code est à mettre de préférence dans le fichier “functions.php” d’un thème enfant (c’est une fonction jQuery mais “enveloppée” dans une fonction php). Si vous n’avez pas de thème enfant c’est facile à créer avec l’extension “Child theme configurator“. Si vous ne voulez pas en créer vous pouvez utiliser l’extension “my custom functions“. C’est simple mais lisez les FAQ et surtout ça: “Q. What to do if this plugin crashed the website?” qui vous dit comment rétablir la situation en cas de problème (pas grave et facilement réparable par FTP, il faut donc pouvoir en cas de problème accéder aux dossiers du site par FTP).

    Je n’ai pas l’impression (mais je n’en suis pas sûr) qu’il soit possible de faire la redirection que vous souhaitez à partir d’une extension ou de .htaccess (d’après le lien que je vous ai envoyé ). Reste le js ou les CSS (les media queries) mais avec les CSS vous ne pouvez pratiquement pas modifier le contenu de la page, seulement la mise en forme.

    #2379160
    lovedirt
    Participant
    Chevalier WordPress
    133 contributions

    Bonjour Ferman, ajouter le code Jquery dans le fichier Functions.php de mon thème n’a rien changé; j’ai remis le .htacess d’origine et tenté la solution du Jquery, mais la page de base se charge, et non la page mobile.

    Je suis curieux du pourquoi je ne trouves pas ma réponse; c’est pourtant monnaie courante d’afficher des pages différentes en fonction de l’appareil qui visite le site, non ?

    CDT

    #2379165
    lovedirt
    Participant
    Chevalier WordPress
    133 contributions

    J’ai tenté via le htacess, via le functions.php, et en insérant le code ci-dessous dans le header. Je suis bien redirigé vers la bonne URL, mais rien ne s’affiche, le site se rafraichit sans ne jamais s’arrêter.

    <script type="text/javascript">
      if (screen.width <= 699) {
        document.location = "home-tel";
      }
    </script>

    #2379216
    mathieu42
    Participant
    Maître WordPress
    691 contributions

    c’est pourtant monnaie courante d’afficher des pages différentes en fonction de l’appareil qui visite le site, non ?

    depuis quelques années, les sites grands publics se basent plutôt sur un contenu html unique et ensuite c’est le code css qui fait des effets responsifs pour adapter l’affichage en fonction de la largeur de l’écran ou d’autres critères. vous pouvez voir des exemples là :

    https://developer.mozilla.org/fr/docs/Web/CSS/Media_Queries/Using_media_queries

    #2379615
    lovedirt
    Participant
    Chevalier WordPress
    133 contributions

    Mon souci, c’est que je ne souhaite pas diffuser exactement le même contenu sur les deux mêmes versions, pour faciliter la navigation sur mobile; j’ai déjà créé toutes les pages en doubles, une pour la version mobile, et une pour la version bureautique, malheureusement je n’ai toujours pas trouvé moyen de faire des redirections pour les mobiles jusqu’à présent.

    #2379635
    ferman
    Participant
    Maître WordPress
    4120 contributions

    Pour le code JQuery (#2379165), ce que vous observez est normal. Dans le code que vous mettez dans le header, il n’y a pas de condition donc la redirection se fait à partir de n’importe quelle page, y compris la page vers laquelle vous voulez rediriger (la page se redirige sur elle-même). La fonction redirect_mobile doit fonctionner (elle fonctionne chez moi ) mais peut-être que (home) n’est pas correct. Au lieu de  “home” on peut utiliser l’id de la page, c’est à dire 222. Donc essayez en remplaçant if(is_home()) par if(is_page(222))

    • Cette réponse a été modifiée le il y a 2 jours et 22 heures par ferman.
    • Cette réponse a été modifiée le il y a 2 jours et 22 heures par ferman.
    #2379779
    lovedirt
    Participant
    Chevalier WordPress
    133 contributions

    Bonjour Ferman, et de nouveau merci pour le coup de main.

    Malheureusement, le code suivant ne donne rien. La page desktop continue de se charger sur smartphone.

    function redirect_mobile(){
    	
    if(is_page(222)){?>	
    	<script type="text/javascript">
    		$=jQuery;	
    		if (screen.width <= 699){
    		document.location = "https://rentboatsescala.com/bateau/cap_camarat/";
    		}
    	</script>	
    <?php }	
    ;}	
    add_filter('wp_head','redirect_mobile');

    #2379785
    ferman
    Participant
    Maître WordPress
    4120 contributions

    Cela me laisse assez perplexe. En dernier essai, je vous propose d’essayer le code suivant:

    function redirect_mobile(){
    	
    if (is_front_page() || is_home()) {?>	
    	<script type="text/javascript">
    		$=jQuery;			
    		document.location = "https://rentboatsescala.com/bateau/cap_camarat/";		
    	</script>	
    <?php }	
    ;}	
    add_filter('wp_head','redirect_mobile');

    J’ai enlevé la condition de taille d’écran ce qui fait que vous devriez voir la redirection aussi sur PC. J’ai remplacé “home” par ” home OU front_page” pour couvrir toutes les possibilités pour la page d’accueil. Si ça fonctionne vous pouvez remettre la condition sinon je donne ma langue au chat. Il faudra chercher une autre méthode (CSS où on peut apporter des modifications, même modifier le texte mais beaucoup moins qu’avec une redirection  js et c’est lourd).

    #2379812
    lovedirt
    Participant
    Chevalier WordPress
    133 contributions

    Bonjour Ferman, peut-être que ma façon de faire n’est pas la bonne, après tout. Je n’ai pas utilisé my custom functions, car cette extension retournait une erreur lors de l’activation, je me suis tourné vers Code Snippets.

    Le bout de code donné ci-dessus fonctionne bien sur mon PC, mais mon téléphone est toujours redirigé vers la même page d’accueil; je finis par me demander si ce n’est pas directement au niveau du téléphone, pourtant j’efface les cookies et je lance une page de navigation privée à chaque fois …

     

    • Cette réponse a été modifiée le il y a 8 heures et 42 minutes par lovedirt.
    • Cette réponse a été modifiée le il y a 8 heures et 41 minutes par lovedirt.
    #2379818
    ferman
    Participant
    Maître WordPress
    4120 contributions

    Bonjour,

    My Custom Functions ou Code Snippets, cela n’a pas d’importance. Un problème de cache? Mettez le code en place et confirmez-le ici. J’essaierai sur mon téléphone.

    #2379839
    lovedirt
    Participant
    Chevalier WordPress
    133 contributions

    Bonjour, le code suivant est actuellement en place via Code Snippets. Vous devriez logiquement être redirigé vers une page de bateau en tapant l’url du site internet, http://www.rentboatsescala.com .

    function redirect_mobile(){
    	
    if(is_page(222)){?>	
    	<script type="text/javascript">
    		$=jQuery;	
    		if (screen.width <= 699){
    		document.location = "https://rentboatsescala.com/bateau/cap_camarat/";
    		}
    	</script>	
    <?php }	
    ;}	
    add_filter('wp_head','redirect_mobile');

    #2379848
    ferman
    Participant
    Maître WordPress
    4120 contributions

    Je viens de voir que la page d’accueil sur mobile n’a pas la même id que sur PC. Essayez en remplaçant 222 par 1921 et laissez le code en place pour que je puisse vérifier.

15 sujets de 1 à 15 (sur un total de 17)
  • Vous devez être connecté pour répondre à ce sujet.