Menü / Navigation: Text durch Bild ersetzen

  • Hallo zusammen,

    ich kann mir zwar nicht vorstellen, dass noch keiner die Frage gestellt hat, aber ich bin wohl einfach viel zu blöd zum finden... :oops:

    Ich versuche schon ne ganze Weile, in der horizontalen Navigation (bestehend aus 1 Beitrag und 6 Seiten) den Text durch Bilder zu ersetzen. Das gelingt mir aber nicht. Der Aufruf geschieht in der sidebar.php über wp_list_pages('title_li=');
    Jetzt war mein Gedanke, dass ich die wp_list_pages() in der "/wp_includes/post-template.php" anpasse. Hab ich gemacht funktioniert aber nicht. So sieht sie aus:

    Kann mir jemand sagen, was ich noch alles anpassen muss? Oder gibts vielleicht einen viel einfacheren Weg?

    Danke und Grüße,
    Steff

    • Anzeige

    Hallo!

    Wenn du gerade an deiner Website arbeitest oder dein aktuelles Hosting überdenkst: Wir betreiben mit NetzLiving eine Hosting-Plattform, die speziell auf Performance, Sicherheit und einfache Verwaltung ausgelegt ist.

    • ✔️ Schnelle Ladezeiten (optimiert für WordPress & Co.)
    • ✔️ Deutsche Server & DSGVO-konform
    • ✔️ Persönlicher Support (kein 0815-Ticket-System)

    Mehr erfahren

  • ich kann mir zwar nicht vorstellen, dass noch keiner die Frage gestellt hat, aber ich bin wohl einfach viel zu blöd zum finden... :oops:


    War heir definitiv schonmal da. ;-) Gab sogar nen längeren Thread, wo so ziemlich alle möglichen und unmöglichen Lösungen diskutiert wurden. Vielleicht findet den ja noch jemand...

    Zitat

    Jetzt war mein Gedanke, dass ich die wp_list_pages() in der "/wp_includes/post-template.php" anpasse. Hab ich gemacht funktioniert aber nicht.


    Bitte nicht! Spätestens beim nächsten größeren WP-Update wird die Datei überschrieben und deine Änderungen dort sind futsch.

    Zitat

    Kann mir jemand sagen, was ich noch alles anpassen muss? Oder gibts vielleicht einen viel einfacheren Weg?


    Bei einigen wenigen statischen Menüpunkten würde ich diese einfach hartcodieren. Kategorien z.B. über
    Function Reference/get category link « WordPress Codex

  • Zitat

    Bitte nicht! Spätestens beim nächsten größeren WP-Update wird die Datei überschrieben und deine Änderungen dort sind futsch.

    Ohh, danke, wie recht du hast...

    Zitat

    War heir definitiv schonmal da. :wink: Gab sogar nen längeren Thread, wo so ziemlich alle möglichen und unmöglichen Lösungen diskutiert wurden. Vielleicht findet den ja noch jemand...

    Das hoffe ich doch. Wie gesagt, leider nicht gefunden. Link würde mir schon reichen.

  • Ich weiß nicht, ob das jetzt weiterhilft, aber im CSS-Zengarden wird der Trick verraten. Ich weiß nicht mehr aus der Hand, wie das funktioniert, ich habe es jedenfalls schon gemacht.

    Das Prinzip dort bezieht sich darauf, Überschriften durch Bilder im CSS zu ersetzen, trotzdem aber, wegen der Suchmaschinen und wegen Barrierefreiheit, die Überschriften als HTML-Quelltext zu behalten. Das Gleiche müsste eigentlich auch für die Navigation funktionieren. Man definiert eine Klasse für die Überschrift und setzt dann für diese Klasse display: none. Dabei ist die Reihenfolge, in der die CSS-Definition geschrieben wird, wichtig.

    Die Sache wird allerdings von älteren Browsern nicht korrekt angezeigt.

  • Ich weiß nicht, ob das jetzt weiterhilft, aber im CSS-Zengarden wird der Trick verraten. Ich weiß nicht mehr aus der Hand, wie das funktioniert, ich habe es jedenfalls schon gemacht.

    Das Prinzip dort bezieht sich darauf, Überschriften durch Bilder im CSS zu ersetzen, trotzdem aber, wegen der Suchmaschinen und wegen Barrierefreiheit, die Überschriften als HTML-Quelltext zu behalten. Das Gleiche müsste eigentlich auch für die Navigation funktionieren. Man definiert eine Klasse für die Überschrift und [COLOR=Red]setzt dann für diese Klasse display: none[/COLOR]. Dabei ist die Reihenfolge, in der die CSS-Definition geschrieben wird, wichtig.

    Die Sache wird allerdings von älteren Browsern nicht korrekt angezeigt.

    Das will ich sehen! Wenn ich display:none sage, dann ist das auch none, nada , nothing! Ist der Sinn der Angabe. Dann kann ich da auch kein Bild mehr drauf werfen.
    Wenn schon, dann bekommen die betroffenen Sachen eine ID (weil ich ja pro class nur ein Bild machen kann aber pro ID ein eigenes).

    HTML
    <h1 id="myHome">Bla Bla Bla</h1>

    und dann style ich das so, wie ich es als Bild haben will:

    Code
    #myHome {
    background: transparent url('directory/bild.jpg') no-repeat left top;
    height: 20px;
    width: 100%;
    [COLOR=Red]text-indent: -999em;
    overflow:hidden;[/COLOR]
    }

    ... und dann hab ich

    1. den Text "Bla Bla Bla" immer noch in der Seite
    2. ist der jetzt nicht mehr sichtbar
    3. sehe ich ein Bild anstatt dessen.

Jetzt mitmachen!

Sie haben noch kein Benutzerkonto auf unserer Seite? Registrieren Sie sich kostenlos und nehmen Sie an unserer Community teil!