1. Herzlich willkommen bei WPDE.org, dem grössten und ältesten deutschsprachigen Community-Forum rund um das Thema WordPress. Du musst angemeldet oder registriert sein, um Beiträge verfassen zu können.
    Information ausblenden

Banner/Widgets auf Mobiler Ansicht deaktivieren

Dieses Thema im Forum "Mobil mit WordPress" wurde erstellt von Sandrotheonce, 28. Juni 2016.

  1. Sandrotheonce

    Sandrotheonce Member

    Registriert seit:
    27. Juni 2016
    Beiträge:
    11
    Zustimmungen:
    0
    Hallo liebe Forengemeinschaft,

    mich belastet schon wochenenlang ein kleines Problem & ich nehme an bei euch an der richtigen Stelle zu sein.

    Ich nutzt das Thema HashOne und habe als Test einen Banner/Widget von Amazon in die Seite eingebunden mit einer Größe von: width="728" height="90"

    Mit dem Plugin Yellow Pencil habe ich die Möglichkeit Codes für das Design einzugeben bzw. auch über die Themeneditoren.
    Viele schreiben immer von Display: none - jedoch weiß ich nicht recht wo ich den code eingeben muss bzw. wie ich diesen genau einfügen muss damit Display none nur ausschließlich bei der Ansicht von Mobile-Geräten aktiviert wird.

    Bisher ist es mir lediglich gelunden ,,Display none" für Desktop sowie Mobile zu aktivieren oder deaktivieren.

    Ich muss den Banner auf jeden Fall ausblenden da auf der mobilen Ansicht aufgrund der Länge von der Anzeige das komplette Layout nicht mehr festsitzt.

    Kann mir bitte jemand helfen ?

    Vielen lieben Dank vorab und liebe Grüße

    Sandro
     
  2. maxe

    maxe Well-Known Member
    Ehrenmitglied

    Registriert seit:
    1. Mai 2008
    Beiträge:
    19.581
    Zustimmungen:
    277
    Schau dir dazu auch mal die css media queries min-width / max-width an.
     
  3. Sandrotheonce

    Sandrotheonce Member

    Registriert seit:
    27. Juni 2016
    Beiträge:
    11
    Zustimmungen:
    0
    Vielen Dank für deinen Hinweis.

    Ich bräuchte einen Tipp wie ich zum beispiel das max-width für ein Obejkt speziell nur für Mobile hinterlegen kann - vorallem wo ?!
     
  4. maxe

    maxe Well-Known Member
    Ehrenmitglied

    Registriert seit:
    1. Mai 2008
    Beiträge:
    19.581
    Zustimmungen:
    277
    was meinst du genau? Du musst die max-width angeben, bis wohin ausgeblendet werden soll:
    Code:
    Entschuldige, aber du musst dich registrieren oder anmelden um den Inhalt sehen zu können!
     
  5. Sandrotheonce

    Sandrotheonce Member

    Registriert seit:
    27. Juni 2016
    Beiträge:
    11
    Zustimmungen:
    0
    Ich meine wie ich der Css Datei sage - das der Befehl lediglich bei mobiler Ansicht greift.
    Wenn ich in die Style.CSS den Code beginne mit @media all ec. greift es dann nur für Mobile oder auch Desktop ?

    Ich möchte praktisch der CSS sagen - sie soll alle Banner die größer als ,, width 360px " sind ausblenden mit display none bei ausschließlich mobiler Ansicht.

    LG Sandro
     
  6. maxe

    maxe Well-Known Member
    Ehrenmitglied

    Registriert seit:
    1. Mai 2008
    Beiträge:
    19.581
    Zustimmungen:
    277
    kennst du einen Desktop PC mit einer Display Breite kleiner 700px? Daraus ergibt sich doch die logische Antwort, Werte kannst du ja auch auf deine Bedürfnisse ändern.
     
  7. helix

    helix Well-Known Member

    Registriert seit:
    28. Juli 2011
    Beiträge:
    1.808
    Zustimmungen:
    27
    Ich weiß zwar nicht, was du damit genau beschreiben willst. Aber wenn es dir das Layout verschiebt / zerhagelt, wenn der Bildschirm zu klein ist, ist das doch ein Argument dafür, das Element abhängig von der Bildschirmgröße nicht zu zeigen. (Unabhängig ob mobil oder Desktop)

    Dafür gibt es schon eine Möglichkeit. Unter Umständen auch sinnvoll, das muss man immer im jeweiligen Fall entscheiden.

    Das geht aber nicht mit dem gelben Bleistift, sondern mit einem Child-Theme und entsprechendem Eintrag in den betroffenen Template-Dateien. Und zwar über die Abfrage wp_is_mobile() Damit kannst du entweder eine eigene Klasse wie „mobile“ zuweisen oder (dann über die functions.php) deine Body-Class erweitern oder auch festlegen, dass das Banner für Mobilgeräte gleich gar nicht geladen wird. Das betrifft dann aber auch Tablets.

    Gruß
    helix
     
  8. Sandrotheonce

    Sandrotheonce Member

    Registriert seit:
    27. Juni 2016
    Beiträge:
    11
    Zustimmungen:
    0
    Wirklich sehr nett das ich hier so tolle hilfe bekomme.

    Ich teste gerade diverse Möglichkeiten.
    Ich stehe noch am Anfang zu verstehen wie ich diverse Klammern ec. setze.

    Wie muss der Code in der funktons.php lauten ?

    in etwa:
    if (wp_is_mobile()) {iframe{display:none}} ?

    Ich bekomme ständig fehlermeldungen.
    Ist es egal an welcher Stelle ich den Code einsetze in der Datei oder muss man auf die Zeilen genau achten ?

    LG Sandro
     
  9. helix

    helix Well-Known Member

    Registriert seit:
    28. Juli 2011
    Beiträge:
    1.808
    Zustimmungen:
    27
    Zuerst musst du entscheiden: Willst du die Body-Class erweitern? Oder reicht es, nur an der Stelle, wo das Banner eingebunden ist, eine entsprechende Klasse (und damit Möglichkeit, über CSS anzusprechen) einzubauen.
    Das mit der Body-Class ist sinnvoll, wenn du die Unterscheidung mobil-oder-desktop auch noch für weitere Dinge brauchst.
    Direkt an der Stelle, wo das Banner eingebunden ist, ist sinnvoll, wenn du vielleicht das Banner für mobil gleich gar nicht ausgeben willst – weil: du brauchst ja auch die mobilen Geräte nicht laden lassen, was nachher gar nicht angezeigt wird (das passiert aber, wenn man nur übers CSS geht mit display: none)

    Body-Class erweitern: Such mal genau danach. Auf deutsch. Oder auf englisch „custom body class“, sinnigerweise immer mit wp mit in der Suchphrase. Und zumindest, wenn du auf englisch suchst, kannst du ohne weiteres auch gleich das is_mobile mit in die Suchphrase aufnehmen, da wirst du – englischsprachig – auch Anleitungen genau dafür finden.
    Das ist eine Ergänzung in deiner functions.php

    Direkt an der Stelle, wo das Banner eingebunden ist: Entsprechende Template-Datei schnappen, bearbeiten, unter gleichem Namen in den Ordner des Child-Themes legen. Hierfür musst du die functions.php nicht verändern, nur die entsprechende Template-Datei.
    Die Bearbeitung ist eine schlichte if-Abfrage oder ein if-else-Konstrukt.

    Wenn es mobile ist, gib dem Element, in dem dein Banner ist, die Klasse mobile.
    Oder: wenn es mobile ist, gib nichts aus, ansonsten (else) gib das Element mit dem Banner aus.
    Oder: wenn es mobile ist, gib die Mobilversion aus, ansonsten …

    Auch dazu verrät dir die Suchmaschine genügend Anleitungen und Codeschnipsel. (Du musst dich da sowieso selber reinfitzen mit dem Child-Theme und so; wenn dann wirklich noch Unklarheiten bleiben: klar, frag nach, dazu ist das Forum da.)

    Gruß
    helix
     
  1. Diese Seite verwendet Cookies, um Inhalte zu personalisieren, diese deiner Erfahrung anzupassen und dich nach der Registrierung angemeldet zu halten.
    Wenn du dich weiterhin auf dieser Seite aufhältst, akzeptierst du unseren Einsatz von Cookies.
    Information ausblenden
  1. Diese Seite verwendet Cookies, um Inhalte zu personalisieren, diese deiner Erfahrung anzupassen und dich nach der Registrierung angemeldet zu halten.
    Wenn du dich weiterhin auf dieser Seite aufhältst, akzeptierst du unseren Einsatz von Cookies.
    Information ausblenden