• Gelöst donaldtrump

    (@donaldtrump)


    Hallo, hat jemand einen Tip (bzw. Problemlösung) für folgendes (ich glaube die allgemeine Beschreibung ohne Angabe von Einzelheiten reicht hier):

    Auf ca. 10 selbst definierten templates meiner noch auf localhost befindlichen WP-Site befindet sich (jeweils im „page-container“-Bereich) ein kleines javascript, mit dem -je nach template- eine definierte Anzahl von Bannern (pictures) geladen wird. Funktioniert bestens.

    Die Site ist jedoch responsive, also es gibt media queries. Funktionieren auch. Allerdings sind die Banner für die Darstellung auf kleinen viewports (smartphones) viel zu groß (ca. 950×450 px).

    Da die Seiten noch weitere (kleinere) pictures beinhalten, würde die Ladezeit auf den smartphones wahrscheinlich inakzeptabel.

    No-display im CSS kommt natürlich nicht in Frage.

    Es müßte aber irgendeine Abfrage stattfinden, also ungefähr „falls media screen max-width: 480px“ dann bitte „template ohne Banner“ laden.

    Und da die templates natürlich unterschiedlich sind (z.b. template-spezifische sidebars, 1 oder 2 sidebars bzw. mit/ohne sidebar, unterschiedliche main-content-Bereiche etc), müßte die Abfrage das auch berücksichtigen, also erstens den viewport und zweitens: „falls auf template xy zugegriffen wird, dann nicht laden sondern stattdessen template xy ohne banner laden“.

    Ich würde dann also jeweils ein template xy ohne banner anlegen.

    Aber ich sehe schon, das ist nicht irgendwie in WP lösbar ohne zusätzliche Mittel, Abfrage per script oder so. (?)

Ansicht von 13 Antworten – 1 bis 13 (von insgesamt 13)
  • Ich würde das vermutlich mit wp_is_mobile() lösen. Erläuterungen dazu findest du hier.

    wp_is_mobile funktioniert
    ist allerdings eine php Lösung, das bedeutet du kannst kein Cache Plugin verwende, dass statische Seiten dann ausliefert
    und das machen fast alle gängigen Cache Plugins, die es gibt.

    Thread-Starter donaldtrump

    (@donaldtrump)

    Geht ja zur Not auch ohne Cache-plugin… aber ich habe mangels Kenntnis grundsätzlich Probleme, wp_is_mobile anzuwenden.
    Auf https://codex.wordpress.org/Function_Reference/wp_is_mobile steht:

    <?php
    if ( wp_is_mobile() ) {
    	/* Display and echo mobile specific stuff here */
    }
    ?>

    Aber da ich kaum Ahnung von php habe, weiß ich nicht was genau ich da reinschreiben muß.

    Habe mir verschiedene Seiten angeguckt und mir daraus was zusammengestückelt, geht aber nicht – d.h. weiße Seite kommt:

    Ablauf:
    Seite x mit „template-spezial“ wird geladen. Damit mobile Geräte stattdessen das „template-spezial-no-banner“ laden, schreibe ich in das „template-spezial“ oben rein:

    <?php
    if ( wp_is_mobile() ) {
    
    if ( is_page_template( 'template-spezial' ) ) {
           get_template_part( 'template-spezial-no-banner.php' );
        }
    
    }
    ?>

    (Weiß nicht was „template_part“ ist, aber „get_template“ funktioniert auch nicht.

    Dann habe ich noch versucht:

    <?php
    if ( wp_is_mobile() ) {
    
    if ( $pagenow = 'template-spezial')
    else
           ( $pagenow = 'template-spezial-no-banner.php' );
    }
    ?>

    ($pagenow habe ich irgendwo gesehen, ich dachte mir das könnte passen, keine Ahnung ob WP damit was anfangen kann)

    Thread-Starter donaldtrump

    (@donaldtrump)

    Habe jetzt auch versucht:

    <?php
    if ( wp_is_mobile() ) {
           get_template( 'template-spezial-no-banner.php' );
        }
    ?>

    kommt aber leider auch weiße Seite.

    Thread-Starter donaldtrump

    (@donaldtrump)

    Habe jetzt dies hier versucht:

    <?php
    if ( wp_is_mobile() ) {
          get_template( 'template-spezial-no-banner.php' );
    }
    else {
    	  get_template( 'template-spezial.php' );
    }
    ?>

    Aber ich will hier nicht alles vollschreiben mit meinen Experimenten…

    Thread-Starter donaldtrump

    (@donaldtrump)

    Meine letzte Version, die nicht funktioniert (weiße Seite):

    <?php
    if ( wp_is_mobile() ){
         get_template( 'spezial-no-banner' );
    }
    else {
    	  get_template( 'spezial' );
    }
    endif;
    ?>

    Um längere Code-Abschnitte zu teilen sind Dienste wie Pastebin.com oder GitHub besser geeignet.

    Davon abgesehen … was hast du denn dauernd mit get_template() vor? 🙂
    Hast du dir dazu mal die Beschreibung im Codex durchgelesen? 😉

    Retrieves the directory name of the current theme, without the trailing slash.

    Es ist auch nicht so, dass du ein anderes Template lädst. Statt dessen führst du, wenn Mobilgeräte erkannt wurden, einen anderen PHP-Code durch. Da das dynamisch passiert (d.h. es wir fallweise jedesmal neu entschieden, welcher Code ausgeführt wird) funktioniert, wie Monika schon völlig richtige monierte, das Cachen der Seite nicht. Nun aber zum Code:

    Nehmen wir an, dein Slider-Plugin verfügt über Shortcodes. Um auf Mobilgeräten ein hübsches (Stand-)Bild auszugeben, auf anderen Geräten aber den Slider könnte der Code so aussehen:

    if( wp_is_mobile() ) {
      echo '<img src="' . get_stylesheet_directory_uri() . '/images/standbild.jpg" alt="Standbild">';
    } else {
      echo do_shortcode( '[awesomeslider id=42]' ); // siehe Anmerkung *
    }

    (*Noch besser wäre es, direkt die Funktion einzufügen, die durch den Shortcode aufgerufen wird. Dann muss der Shortcode nicht erst umgewandelt werden.)

    Thread-Starter donaldtrump

    (@donaldtrump)

    oh klasse vielen Dank,
    50% funktioniert für mich, also im if-echo gebe ich einfach nichts aus, dann erscheint auch nichts, wie gewünscht.
    die zweiten 50%:
    kann man im else-echo auch js-code eingeben? dieser ist ja für jedes meiner templates verschieden, genau gesagt, sieht er z.B. so aus (In einem template also z.B. dieser Code, im anderen z.B. 5 Banner etc.):

    <!– BEGINN BANNERROTATION –>

    <script type="text/javascript">
    <!--
    var z= 3;
    Banner = new Array(z);
    
    Banner[0] = '<IMG SRC="http://localhost:8888/wp-content/.../xy.jpg" ALT="" WIDTH= HEIGHT= BORDER=0>';
    Banner[1] = '<IMG SRC="http://localhost:8888/wp-content/.../xyz.jpg" ALT="" WIDTH= HEIGHT= BORDER=0>';
    
    var jetzt=new Date();
    var z=(jetzt.getSeconds())%2;
    document.write(Banner[z]);
    //-->
    </script>

    <!– ENDE BANNERROTATION –>
    Dieser Code findet sich also (mit unterschiedlicher Banner-Anzahl) auf allen meiner templates.

    if( wp_is_mobile() ) {
      echo '<img src="' . get_stylesheet_directory_uri() . '/images/standbild.jpg" alt="Standbild">';
    } else { ?>
    
    <!-- BEGINN BANNERROTATION -->
    <script type="text/javascript">
    <!--
    var z= 3;
    Banner = new Array(z);
    
    Banner[0] = '<IMG SRC="http://localhost:8888/wp-content/.../xy.jpg" ALT="" WIDTH= HEIGHT= BORDER=0>';
    Banner[1] = '<IMG SRC="http://localhost:8888/wp-content/.../xyz.jpg" ALT="" WIDTH= HEIGHT= BORDER=0>';
    
    var jetzt=new Date();
    var z=(jetzt.getSeconds())%2;
    document.write(Banner[z]);
    //-->
    </script>
    <!-- ENDE BANNERROTATION -->
    
    <?php } ?>
    Thread-Starter donaldtrump

    (@donaldtrump)

    Klasse! Funktioniert bestens, herzlichen Dank!

    Mit eigenen Worten und anfängerhaft beschrieben, wurde das Banner-script also aus der php-else-anweisung herausgenommen, es erscheint sozusagen separat als Text und kann ausgeführt werden. Als ich vorher am rumprobieren war, hatte ich schon so ein komisches Gefühl als wenn das script da irgendwie fehl am Platz ist (in der if/else-„Konstellation“. Vielleicht (!) hätte ich ja selbst drauf kommen können, wenn ich mir drei Tage oder so Zeit genommen hätte und intensiver logisch nachgedacht oder noch länger rumprobiert hätte….

    Daß ich damit kein Cache-plugin benutzen kann, ist vielleicht nicht optimal. Aber ich will ohnehin mit so wenig plugins arbeiten wie möglich, insofern ist das für mich ok.

    Nochmals danke!!!

    Mit eigenen Worten und anfängerhaft beschrieben, wurde das Banner-script also aus der php-else-anweisung herausgenommen, es erscheint sozusagen separat als Text und kann ausgeführt werden.

    Nein, ganz im Gegenteil. Der HTML-Code wird nur ausgeführt, wenn das if-Statement false ausgibt. Die Unterbrechung des PHP-Codes dient nur der besseren Lesbarkeit des HTML/JavaScript. Das kann aber auch alles per echo ausgegeben werden. Ein hübsches PHP-Tutorial auf Deutsch findest du z.B. hier.

    Aber ich will ohnehin mit so wenig plugins arbeiten wie möglich, insofern ist das für mich ok.

    Frag dich mal, warum du mit so wenig Plugins wie möglich arbeiten möchtest. Solltest du dabei zufällig auf den Gedanken kommen, damit die Performance zu verbessern – genau dafür sind Cache-Plugins gemacht.

    Thread-Starter donaldtrump

    (@donaldtrump)

    Ich kam zu der falschen Schlußfolgerung, weil nach else { das Ende der php-Anweisung, also ?> stand, und nach dem script dann wieder der Anfang einer Anweisung, also <?php auftauchte.

    Betr.: plugins
    Ja bestimmt ermöglichen bzw. beschleunigen plugins gewisse Prozesse oder Abläufe (nehme ich als Laie so an), und als Laie glaubte ich bislang tatsächlich, zuviele plugins oder eine ungünstige Kombination von plugins bremsen WP vielleicht aus.
    Kommt wahrscheinlich auch immer drauf an, wie komplex ein Theme ist? Ich bin ja für was puristisches.

    Grundsätzlich stimmt die Aussage, dass sich die Performance mit jedem Plugin, dass geladen werden muss, verschlechtert. Allerdings kommt es auch darauf an, ob Plugins sich im Frontend oder Backend einbringen, wieviel Speicher sie benötigen, wieviel Abfragen sie ausführen, etc.

    Cache-Plugin sollen aber das Ergebnis zwischenspeichern und damit genau das, was zu Performanceeinbußen führt (Aufruf und Ausführung der einzelnen Plugins) umgehen. Deshalb wäre es vermutlich an der falschen Stelle gespart, auf ein Cache-Plugin zu verzichten.

Ansicht von 13 Antworten – 1 bis 13 (von insgesamt 13)
  • Das Thema „Je nach viewport (media query) unterschiedliche templates laden“ ist für neue Antworten geschlossen.