web-dev-qa-db-fra.com

Exécuter un shortcode à une certaine résolution

J'ai essayé de poser une question à ce sujet ici: Chargement d'un shortcode avec ajax mais j'ai pensé qu'il pourrait être intéressant de poser la question fondamentale de ce que j'essaie de faire sans ajouter mon problème confus et naïf résoudre dans le mélange.

Je veux courir ceci:

<?php echo do_shortcode('[metaslider id="8302"]'); ?>

Mais uniquement si la taille de la fenêtre est supérieure à 800 pixels par exemple.

Toutes les idées seraient très appréciées!

phpshortcodejavascriptresponsive
1
Don't Wake Me Up

Ok, clarifions le concept. Vous ne voulez pas télécharger le contenu pour appareil mobile, et vous voulez compter sur la résolution de l'écran. Vous savez que php (wordpress) fonctionne sur le serveur, la résolution de l’écran est une affaire complètement cliente.

Donc, le flux sera:

  1. l'utilisateur envoie une demande à votre site
  2. le chargement de votre page de site sur le client
  3. certains js s'exécutent sur le client, reconnaissent la résolution et, dans certaines conditions, exécutent ajax pour envoyer une requête au serveur et chargent le shortcode

Quel est le problème ici? Simple: la résolution de l'écran ne suffit pas pour connaître le périphérique client. Par exemple. En ce moment, j'écris à partir d'un ordinateur de bureau avec un moniteur de 26 ", mais la fenêtre du navigateur n'est pas en taille réelle et sa taille est probablement inférieure à 800 px. Pour moi, le flux ci-dessous ne se charge pas en shortcode. Est-ce ce que vous voulez? Je ne pense pas.

Vous pouvez peut-être compter sur un événement window.resize js pour que, lorsque je modifie la taille de ma fenêtre à une taille supérieure à 800 px, vous chargez le shortcode, sinon vous supprimez le shortcode. Dans ce cas, une demande ajax est envoyée au serveur lorsqu'un client redimensionne la fenêtre de manière à dépasser la résolution dissociation:

jQuery().ready( function($) {

function load_shortcode() {
   if ( $(window).innerWidth() > 800 ) {
      if ( $('#slider .slider-content').length && ! $('#slider').is(':visible') ) {
        // slider was loaded but is hidden, show it
        $('#slider').show();
      } else {
        // slider never loaded, load it
        $.ajax({
          url: myscriptvars.ajaxurl,
          data: { action: 'load_slider_shortcode' }
        }).done(function(output){
          if (output) $('#slider').html(output);
        });
      }
    } else {
       // slider is there but window was resized in less than 800px: hide it
       if ( $('#slider .slider-content').length) $('#slider').hide();
    }
}

$(window).resize(function() {
   load_shortcode();
});

load_shortcode();

});

C'est ce que tu veux? Peut-être, mais il existe une autre solution (une meilleure solution à mon avis).

Wordpress en tant que fonction wp_is_mobile qui reconnaît le périphérique mobile, mais renvoie true même si le périphérique est une tablette 10 "avec écran haute résolution. Ce n’est pas idéal, mais il existe un script qui puisse vous aider. C’est Détection mobile .

Comment l'utiliser: téléchargez-le et mettez-le dans un dossier. Pour la simplicité, je suppose que cela se trouve dans la racine de votre thème. Dans votre page, le shortcode doit apparaître comme suit:

@include_once( trailingslashit(TEMPLATEPATH) . 'Mobile_Detect.php' );
$detect = new Mobile_Detect;
$ismobile = ( $detect->isMobile() && ! $detect->isTablet() ); // true only for phones
if ( $mobile ) echo do_shortcode('[metaslider id="8302"]');

C'est tout. Pas besoin d'ajax, pas besoin de s'appuyer sur window.resize etphone ne téléchargez jamais votre shortcode, votre PC et vos tablettes le téléchargent toujours.

Si vous souhaitez éviter le curseur de téléchargement des tablettes, supprimez la deuxième condition de l'instruction if.

Pour améliorer la solution, vous pouvez également masquer le curseur en basse résolution via des requêtes de support CSS, de sorte que les ordinateurs de bureau et les tablettes avec une fenêtre redimensionnée (comme la mine, maintenant) ne voient pas le curseur.

Pas parfait, bien sûr, mais pour le moment je pense qu’il n’ya pas de solution parfaite à ce sujet et cette dernière me semble la meilleure parmi les possibilités.

1
gmazzap

Vous aurez besoin de JavaScript sur le front-end pour mesurer la taille de l'écran des utilisateurs. Vous pouvez ensuite définir un cookie qui envoie cette information à chaque demande.

Pseudo-code: lors du chargement de la page, obtenez la taille de la fenêtre et enregistrez cette valeur dans un cookie.

Vous pouvez utiliser ces informations dans votre code PHP pour prendre la décision d'exécuter ou non un certain code.

if( $_COOKIE['screen-size'] > 800 ) {
  //Whatever!
}

CSS Tricks comme un excellent article décrivant comment réaliser une technique comme celle-ci -> http://css-tricks.com/make-client-side-data-avata-server-side/

Cela ne fonctionnera pas si vous mettez en cache quelque chose comme WP Super Cache ou W3 Total Cache, car ces plug-in mettent en cache la sortie de votre modèle afin que votre serveur travaille moins avec chaque demande. Si certaines conditions dynamiques changent dans la demande, la logique à exécuter via PHP ne sera pas exécutée.

0
kingkool68

Méthode alternative

L'auteur de Metaslider suggère d'utiliser WP Mobile Detect . Voici un exemple de code que j'ai utilisé pour obtenir un résultat similaire à ce que je pense que vous recherchez. Nécessite le plug-in WP Mobile Detect.

<?php if(shortcode_exists('metaslider') && function_exists(wpmd_is_notphone) && wpmd_is_notphone()):
            echo(do_shortcode('[metaslider id=8302]'));
endif; ?>

J'utilise toujours une requête @media pour masquer le curseur en fonction de la largeur de l'écran et je sais que ce n'est pas compatible à 100%. Toutefois, une solution de rechange pourrait consister à inclure une seule image si le curseur ne se charge pas. De cette façon, il y aura toujours du contenu dans le flux de la conception là où il doit être.

Méthode initiale

Cette méthode ne fonctionne pas spécifiquement pour le plugin Metaslider car l'auteur n'a jamais voulu faire appeler la shortcode via AJAX. Vous obtiendrez quelque chose à afficher, mais aucune fonctionnalité. Il peut être possible d'inclure les fichiers JS et d'exécuter la commande appropriée pour commencer le curseur, mais la méthode alternative ci-dessus sera tellement plus facile. Cette méthode fonctionnera toujours pour certains besoins similaires.

Je ressens votre douleur @dontwakemeup. Je veux faire beaucoup la même chose. J'aime utiliser metaslider et j'utilise souvent CSS @media pour la détection de la largeur de l'écran plutôt que pour la détection du périphérique car je ne me soucie pas du périphérique spécifique, mais de la largeur de l'écran et de la présentation de mon contenu. Je souhaite masquer le curseur au-dessous de certaines largeurs, quel que soit l'appareil, car il s'adapte au flux de la présentation.

La description est ci-dessous; quand tout est dit et fait la procédure ira quelque chose comme ça

  1. charger la page sans curseur
  2. AJAX vérifie si le curseur est chargé (via et ajouté le nom de la classe ou votre propre méthode préférée) et contrôle la largeur de l'écran pour voir si un curseur est nécessaire. (La fonction @ gmazzap } _ load_shortcode() peut être ce que vous recherchez ici.
  3. Si nécessaire: chargez le curseur.
  4. Tous les futurs appels AJAX seront rapidement vérifiés pour vérifier que le contenu est déjà chargé (via l'étape 2) et qu'il se termine brutalement.
  5. Conservez une requête CSS @media pour masquer éventuellement le curseur déjà chargé si la largeur de l'écran change. Inutile d'essayer de "décharger" quoi que ce soit pour éventuellement le "recharger" plus tard.

Voici un code que j'ai trouvé qui vous permet d'appeler une fonction une fois par période choisie. Ceci est utile avec un appel AJAX pour limiter le nombre d'appels de la fonction au cours du redimensionnement d'un utilisateur. De cette façon, la fonction ne sera idéalement appelée qu'une fois par redimensionnement. Plutôt que d'être appelé pour chaque image qui se produit lorsque l'utilisateur modifie la fenêtre pour l'adapter à ses désirs. (Cela pourrait être beaucoup de fois, et vous n'avez besoin que d'un seul ... une fois l'utilisateur terminé)

var event_call_function_once = (function ()
{
var timers = {};
return function (callback, ms, uniqueId)
{
    if (!ms)
    {
        ms = 2000;
    }
    if (!uniqueId)
    {
        uniqueId = "Don't call this twice without a uniqueId";
    }
    if (timers[uniqueId])
    {
        clearTimeout (timers[uniqueId]);
    }
    timers[uniqueId] = setTimeout(callback, ms);
};
})();

J'ai trouvé ce code sur Stack Overflow, ICI , et l'ai légèrement modifié selon mes propres désirs.

À partir de là, vous souhaiterez ajouter un nom de classe loaded au conteneur ou un autre moyen de détecter que le curseur shortcode a été chargé via AJAX. Cela empêchera d'essayer de charger les choses plus d'une fois. (Encore une fois, je crois que la fonction @ gmazzap } peut le faire pour vous.)

Vous souhaiterez quand même utiliser la requête CSS @media pour masquer le curseur en fonction de la largeur de l'écran afin de conserver la disposition afin que les utilisateurs puissent modifier la largeur de leur écran sur un bureau (comme indiqué précédemment). À mon avis, je pense que la fonction @ gmazzap va un peu trop loin en utilisant jQuery pour masquer le curseur lorsqu'une requête @media fonctionnera correctement.

REMARQUE: la fonction @ gmazzap semble correcte, mais il ne montre pas le côté WordPress de l'appel AJAX. Vous devrez construire cela pour répondre à vos besoins.

Le côté WordPress de votre appel AJAX pourrait être quelque chose d'aussi simple que: (Juste un exemple, je ne l'ai pas testé. Votre kilométrage variera.)

//WP AJAX action function
function load_slider_shortcode() 
{               
    echo(do_shortcode('[metaslider id=8302]')); 
    die();
}

J'espère que cela vous aide, ou quiconque trouve cette page. Je sais que je vais l'utiliser moi-même au besoin.

0
KnightHawk