Text nur auf dem Smartphone sichtbar

Habt ihr gewusst, dass ihr die in WordPress integrierte Mobilbrowser-Erkennung «wp_is_mobile» benutzen könnt, um einen einfachen Shortcode zu generieren, mit dem ihr Text auf Smartphones ein- bzw. ausblenden könnt?

Die wp_is_mobile-Funktion antwortet mit «true», wenn deine Seite in einem mobilen Browser besucht wird und erlaubt so das Ein- und Ausblenden von Informationen abhängig vom benutzten Gerät. Das Snippet erlaubt die Benützung der Shortcodes [mobileonly] bzw. [/mobileonly] und [desktoponly] bzw. [/desktoponly] um Texte zu «taggen».

In meinem Fall wollte ich den Hinweistext, dass man den Google Calendar Landscape anschauen soll, nur auf Mobile ausgeben, da der Hinweis nur dort Sinn macht.

Einfacher Weg über PHP

Damit wir Text entsprechend «taggen» können, müssen wir etwas Code im functions.php des Themes einfügen. Denkt dabei immer daran, am besten im Child-Theme arbeiten und vorher ein Backup machen:

Über Erscheinungsbild / Editor…

 

…kommen wir im Backend von WordPress an das PHP-File heran.

 

Danach folgenden Code in functions.php einfügen und sichern:

<?php
// [desktoponly] shortcode
add_shortcode(‚desktoponly‘, ‚wp_snippet_desktop_only_shortcode‘);
function wp_snippet_desktop_only_shortcode($atts, $content = null){
if( !wp_is_mobile() ){
return wpautop( do_shortcode( $content ) );
} else {
return null;
}
}
// [mobileonly] shortcode
add_shortcode(‚mobileonly‘, ‚wp_snippet_mobile_only_shortcode‘);
function wp_snippet_mobile_only_shortcode($atts, $content = null){
if( wp_is_mobile() ){
return wpautop( do_shortcode( $content ) );
} else {
return null;
}
}
?>
Hier der Link zu wp-snippet.com um den Originalcode zu kopieren.
Nun können wir Texte, die nur im mobilen Browser sichtbar sein sollen mit dem Shortcode [mobileonly] öffnen und mit [/mobileonly] wieder schliessen.
Umgekehrt gilt das Selbe für Desktop: [desktoponly] bzw. [/desktoponly] zum Schliessen.
Nun erscheint der Text nur auf Smartphones und nicht im Desktop-Browser.

Keine Beiträge verpassen?






Wie gefiel dir dieser Beitrag?
Please wait...
Fragen oder Anregungen?
Zu den Kommentaren (2)
Passende Themen
Kommentare (2)

Schreibe einen Kommentar

Deine E-Mail-Adresse wird nicht veröffentlicht. Erforderliche Felder sind mit * markiert.

* Die Checkbox für die Zustimmung zur Speicherung ist nach DSGVO zwingend.

Ich stimme zu.

Diese Website verwendet Akismet, um Spam zu reduzieren. Erfahre mehr darüber, wie deine Kommentardaten verarbeitet werden.

  1. Mark Howells-Mead vor 6 Monaten

    Toll, aber das Code zum Copy-Pasten stimmt nicht – die Anführungszeichen sind inkorrekt 😉

    Please wait...
    • Christian Denzler vor 6 Monaten

      Danke fürs Feedback. Bei mir funktionierts. Ich habe den Code nochmals eingefügt und den Link auf die Quelle gesetzt.

      Please wait...