Optimales WordPress-Hosting: Der Webhoster meiner Wahl
Das optimale WordPress Hosting bei hostNET

So einfach erstellst Du eine Breadcrumb-Navigation ohne Plugin

So einfach erstellst Du eine Breadcrumb-Navigation ohne Plugin

Zu viele Plugins verlangsamen WordPress. Daher ist es schön, wenn statt der zumeist überladenen Plugins kleine und nützliche Funktionen bereitstehen, die ihre Aufgabe ebenso gut erledigen. Hier der Code für eine Breadcrumb Navigation ohne Plugin.

Breadcrumb Navigation ohne Plugin erstellen

  • WordPress Version: inkl. 4.5.3
  • PHP-Version: inkl. PHP 7

Der Code:

Der folgende Code kommt in die functions.php Deines Themes.

<?php
// Ab hier kopieren
function ah_the_breadcrumb() {
                echo '<ul id="crumbs">';
        if (!is_home()) {
                echo '<li><a href="';
                echo get_option('home');
                echo '">';
                echo 'Home';
                echo "</a></li>";
                if (is_category() || is_single()) {
                        echo '<li>';
                        the_category(' </li><li> ');
                        if (is_single()) {
                                echo "</li><li>";
                                the_title();
                                echo '</li>';
                        }
                } elseif (is_page()) {
                        echo '<li>';
                        echo the_title();
                        echo '</li>';
                }
        }
        elseif (is_tag()) {single_tag_title();}
        elseif (is_day()) {echo"<li>Archive for "; the_time('F jS, Y'); echo'</li>';}
        elseif (is_month()) {echo"<li>Archive for "; the_time('F, Y'); echo'</li>';}
        elseif (is_year()) {echo"<li>Archive for "; the_time('Y'); echo'</li>';}
        elseif (is_author()) {echo"<li>Author Archive"; echo'</li>';}
        elseif (isset($_GET['paged']) && !empty($_GET['paged'])) {echo "<li>Blog Archives"; echo'</li>';}
        elseif (is_search()) {echo"<li>Search Results"; echo'</li>';}
        echo '</ul>';
}

Der Tag zum Aufruf im Theme

Im Theme kann die Navigation mittels eines einfachen Funktionsaufrufes integriert werden. Die richtigen Dateien dafür wären je nach Theme die header.php, die index.php und die single.php usw.

<?php ah_the_breadcrumb(); ?>

Der obige Code zeigt keine Breadcrumbs auf der Startseite an, sondern nur auf Unterseiten wie den Kategorien, den einzelnen Artikeln usw. Also nur dort, wo Breadcrumbs Sinn ergeben. Auf der Startseite wird nur »Home« ausgegeben.

Andreas Hecht

Andreas Hecht

entwickelt WordPress-Websites und bietet dir einen Website Sicherheit Service und einen Performance Service für deine Website. Außerdem ist er Spezialist für Onpage SEO und bringt Deine Website in die Top-Suchergebnisse von Google.

Das könnte auch interessant sein...

Optimales WordPress-Hosting: Der Webhoster meiner Wahl
Das optimale WordPress Hosting bei hostNET

4 Kommentare Kommentar hinzufügen

  1. Danke für diesen Beitrag! Die Codes funktionieren in meiner Offline-Testumgebung ausgezeichnet – bis auf einen Schönheitsfehler: Die Breadcrumb-Navigation findet sich auch auf der Startseite (= Home). Dadurch ist die Lösung leider für mich nicht brauchbar.
    Was ist zu tun?
    Danke im Voraus für die Antwort.

  2. Hallo Holger,

    sorry, einen Code, der auf der Startseite nicht mal Home ausgibt, ist schwierig zu finden oder zu realisieren. Das können meiner Erfahrung nach nicht mal die Plugin-Schwergewichte.

  3. Funktion wie folgt einbinden:

    In die Style dann noch:
    .tm-ah-breadcrumb > ul {list-style-type: none !important; padding: 0 !important; }
    .tm-ah-breadcrumb #crumbs > li {display: inline-block; font-size: 13px; margin-right: 15px; }
    .tm-ah-breadcrumb #crumbs > li::after {content: „\35“; font-size: 11px; padding: 0 2px; position: absolute;font-family: ElegantIcons; }

    .tm-ah-breadcrumb > ul {list-style-type: none !important; padding: 0 !important; }
    .tm-ah-breadcrumb #crumbs > li {display: inline-block; font-size: 13px; margin-right: 15px; }
    .tm-ah-breadcrumb #crumbs > li::after {content: „\35“; font-size: 11px; padding: 0 2px; position: absolute;font-family: ElegantIcons; }

    Font-Pack Download:
    https://www.elegantthemes.com/blog/resources/how-to-use-and-embed-an-icon-font-on-your-website

    Schöne Grüße
    Sebastian

    • Hallo Sebastian,

      danke für Deinen Kommentar und die Ergänzungen zum Artikel. Funktionen werden allerdings vom System geschluckt, damit kein ausführbarer Code entsteht. Ich empfehle daher den Code immer auf Github als Gist zu speichern und die URL des Gists dann einfach hier in den Kommentaren zu posten. Das funktioniert einwandfrei.

Schreibe einen Kommentar

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

Do NOT follow this link or you will be banned from the site!
Wir benutzen Cookies um die Nutzerfreundlichkeit der Webseite zu verbessen. Durch Deinen Besuch stimmst Du dem zu.
Teilen