wake-up-neo.com

Führen Sie den Shortcode mit einer bestimmten Auflösung aus

Ich habe versucht, hier eine Frage zu stellen: Shortcode mit Ajax laden aber es hat sich gelohnt, die grundlegende Frage zu stellen, was ich versuche, ohne mein verwirrtes, naives Problem hinzuzufügen. in die Mischung lösen.

Ich möchte folgendes ausführen:

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

Aber nur, wenn die Fenstergröße größer als beispielsweise 800px ist.

Irgendwelche Ideen wäre sehr dankbar!

1

Ok, lassen Sie uns das Konzept klären. Sie möchten den Inhalt nicht für mobile Geräte herunterladen und möchten sich auf die Bildschirmauflösung verlassen. Sie wissen, dass PHP (WordPress) auf dem Server ausgeführt wird. Die Bildschirmauflösung ist eine vollständig clientseitige Angelegenheit.

Der Fluss wird also sein:

  1. benutzer senden eine Anfrage an Ihre Website
  2. ihre Site-Seite wird auf dem Client geladen
  3. einige Js laufen auf dem Client, erkennen die Auflösung und führen in einigen Fällen Ajax aus, um eine Anfrage an den Server zu senden und den Shortcode zu laden

Was ist hier los? Einfach: Die Bildschirmauflösung reicht nicht aus, um das Client-Gerät zu kennen. Z.B. In diesem Moment schreibe ich von einem Desktop-PC mit einem Monitor von 26 ", aber das Browserfenster ist nicht in voller Größe und ist wahrscheinlich niedriger als 800 px. Für mich wird der unten stehende Ablauf keinen Shortcode laden. Ist das, was Sie wollen Ich glaube nicht.

Vielleicht können Sie sich auf ein window.resize js-Ereignis verlassen. Wenn ich meine Fenstergröße auf mehr als 800 px ändere, wird der Shortcode geladen, andernfalls wird der Shortcode entfernt. In diesem Fall wird eine Ajax-Anforderung an den Server gesendet, wenn ein Client die Fenstergröße so ändert, dass die Auflösung von breakout überschritten wird:

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();

});

Ist das was du willst? Vielleicht, aber es gibt eine andere Lösung (meiner Meinung nach eine bessere Lösung).

Wordpress als eine Funktion wp_is_mobile, die ein mobiles Gerät erkennt, aber auch dann true zurückgibt, wenn es sich bei dem Gerät um ein 10-Zoll-Tablet mit hochauflösendem Bildschirm handelt. Dies ist nicht ideal, aber es gibt ein Skript, das Ihnen helfen kann. Es ist Mobile Detect .

Wie benutzt man es? Lade es herunter und lege es in einen Ordner. Aus Gründen der Übersichtlichkeit nehme ich an, dass es sich um Ihre Themenwurzel handelt. In Ihrer Seite, wo der Shortcode erscheinen muss, setzen Sie etwas wie:

@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"]');

Das ist alles. Kein Grund zur Sorge, kein Grund, sich auf window.resize zu verlassen und das Telefon lädt niemals Ihren Shortcode herunter, PC und Tablets laden ihn immer herunter .

Wenn Sie vermeiden möchten, dass Tablets über den Schieberegler heruntergeladen werden, entfernen Sie die zweite Bedingung in der Anweisung if.

Um die Lösung zu verbessern, können Sie den Schieberegler bei niedriger Auflösung auch über CSS-Medienabfragen ausblenden, sodass Desktops und Tablets mit geänderter Fenstergröße (wie die Mine jetzt) ​​den Schieberegler nicht anzeigen.

Sicher nicht perfekt, aber ich denke, es gibt derzeit keine perfekte Lösung für diese Angelegenheit, und diese letzte scheint mir die beste unter den Möglichkeiten zu sein.

1
gmazzap

Sie benötigen JavaScript im Frontend, um die Bildschirmgröße des Benutzers zu messen. Dann können Sie ein Cookie setzen, das diese Informationen bei jeder Anfrage sendet.

Pseudocode: Rufen Sie beim Laden der Seite die Fenstergröße ab und speichern Sie diesen Wert in einem Cookie.

Sie können diese Informationen in Ihrem PHP Code verwenden, um Entscheidungen darüber zu treffen, ob bestimmter Code ausgeführt werden soll oder nicht.

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

CSS-Tricks als großartiger Artikel, in dem erklärt wird, wie eine Technik wie diese funktioniert -> http://css-tricks.com/make-client-side-data-available-server-side/

Dies funktioniert nicht, wenn Sie mit etwas wie WP Super Cache oder W3 Total Cache cachen, da diese Plugins die Ausgabe Ihrer Vorlage cachen, sodass Ihr Server bei jeder Anforderung weniger Arbeit leistet. Wenn sich eine dynamische Bedingung in der Anforderung ändert, wird die Logik, die durch PHP ausgeführt werden muss, nicht ausgeführt.

0
kingkool68

Alternative Methode

Der Autor von Metasliderschlägt vor, WP Mobile Detect zu verwenden. Hier ist ein Codebeispiel, mit dem ich ein ähnliches Ergebnis erzielt habe wie das, was Sie meiner Meinung nach suchen. Benötigt das WP Mobile Detect Plugin.

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

Ich verwende immer noch eine @media-Abfrage, um den Schieberegler abhängig von der Bildschirmbreite auszublenden, und ich weiß, dass dies nicht zu 100% kompatibel ist. Ein guter Fallback kann jedoch darin bestehen, ein einzelnes Bild einzuschließen, falls der Schieberegler nicht geladen wird. Auf diese Weise bleibt der Inhalt des Entwurfs immer dort, wo er benötigt wird.

Anfängliche Methode

Diese Methode funktioniert nicht speziell für das Plug-in Metaslidername__, da der Autor niemals beabsichtigt hat, den shortcodenamen__ über AJAXaufrufen zu lassen. Sie erhalten etwas anzuzeigen, aber keine Funktionalität. Es ist möglicherweise möglich, die JS-Dateien einzuschließen und den entsprechenden Befehl auszuführen, um den Schieberegler zu starten. Die oben beschriebene alternative Methode ist jedoch viel einfacher. Diese Methode funktioniert jedoch noch für einige andere/ähnliche Anforderungen.

Ich fühle deinen Schmerz @dontwakemeup. Ich möchte so ziemlich das Gleiche tun. Ich verwende gerne metasliderund häufig CSS @media zur Erkennung der Bildschirmbreite anstelle der tatsächlichen Geräteerkennung, da ich mich nicht um das jeweilige Gerät kümmere, sondern um die Bildschirmbreite und das Layout meines Inhalts. Ich möchte den Schieberegler unter bestimmten Breiten ausblenden, unabhängig vom Gerät, da er dem Fluss des Designlayouts entspricht.

Beschreibung ist unten; wenn alles gesagt und getan ist, wird das Verfahren so ähnlich verlaufen

  1. seite ohne Schieberegler laden
  2. AJAXÜberprüfen Sie, ob der Schieberegler geladen ist (über den hinzugefügten Klassennamen oder Ihre bevorzugte Methode), und überprüfen Sie die Bildschirmbreite, um festzustellen, ob ein Schieberegler benötigt wird. ( @ gmazzap'sload_shortcode() function kann genau das sein, wonach Sie hier suchen)
  3. Bei Bedarf: Laden Sie den Schieberegler.
  4. Alle zukünftigen AJAXname__-Aufrufe werden schnell mit einer Prüfung beantwortet, um festzustellen, ob der Inhalt bereits geladen ist (über Schritt 2) und abrupt endet.
  5. Behalten Sie eine CSS @media-Abfrage bei, um den bereits geladenen Schieberegler möglicherweise auszublenden, wenn sich die Bildschirmbreite ändert. Es hat keinen Sinn, etwas zu "entladen", nur um es möglicherweise später erneut "laden" zu müssen.

Hier ist ein Code, den ich gefunden habe, mit dem Sie eine Funktion einmal pro ausgewähltem Zeitraum aufrufen können. Dies ist zusammen mit einem Aufruf von AJAXnützlich, um zu begrenzen, wie oft die Funktion während der Größenänderung eines Benutzers aufgerufen wird. Auf diese Weise wird die Funktion im Idealfall nur einmal pro Größenänderung aufgerufen. Anstatt für jeden Frame aufgerufen zu werden, der auftritt, während der Benutzer das Fenster ändert, um es seinen Wünschen anzupassen. (Dies kann häufig vorkommen, und Sie benötigen nur einen ..., nachdem der Benutzer fertig ist.)

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);
};
})();

Ich habe diesen Code auf Stack Overflow, HERE , gefunden und ihn leicht nach meinen Wünschen geändert.

Von hier aus möchten Sie dem Container einen loadedname__-Klassennamen hinzufügen oder auf andere Weise feststellen, dass der Schieberegler shortcodeüber AJAXgeladen wurde. Dadurch wird verhindert, dass versucht wird, Dinge mehr als einmal zu laden. (Wiederum glaube ich, dass die Funktion @ gmazzaps dies für Sie tun kann.)

Sie möchten weiterhin CSS @media query verwenden, um den Schieberegler abhängig von der Bildschirmbreite auszublenden, damit das Layout für Benutzer erhalten bleibt, die ihre Bildschirmbreite auf einem Desktop ändern (wie bereits erwähnt). Meiner Meinung nach geht die @ gmazzaps -Funktion hier etwas über Bord, indem jQueryverwendet wird, um den Schieberegler auszublenden, wenn eine @media-Abfrage gut funktioniert.

HINWEIS: Die Funktion @ gmazzaps sieht gut aus, zeigt jedoch nicht die WordPress-Seite des Aufrufs AJAXan. Sie müssen das nach Ihren Wünschen bauen.

Die WordPress-Seite Ihres AJAXname__-Aufrufs könnte so einfach sein wie: (Nur ein Beispiel, ich habe es nicht getestet. Ihre Laufleistung wird variieren.)

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

Hoffe, das hilft dir oder jedem anderen, der diese Seite findet. Ich weiß, dass ich es bei Bedarf selbst verwenden werde.

0
KnightHawk