WordPress Breadcrumb, navigációs útvonal bővítmény nélkül

Mi az a breadcrumb?

A breadcrumb nem más, mint navigációs menü. A célja a könnyebb eligazodás és navigáció az adott weboldalon. Amely honlapok rendelkeznek bloggal, kategóriákkal és komolyabb, több szint mélységű linkekkel, azoknál igen hasznos, sőt elengedhetetlen szinte. A több szint mélység azt jelenti, hogy például magyarorszag.hu/megyek/csongrad/vasarosok/ésavárosneve. Ebből a sorból már több infót is leszűrhetünk. Egyfelől melyik városról van szó, melyik megyében.

Mire jó a breadcrumb, avagy navigációs menü?

Mint fentebb is írtam, tájékozódásra elsősorban. Nem csak a látogatóknak, hanem a keresőrobotoknak is segítséget adnak, akik ezt meg is hálálják, ha jól csináljuk. (Lásd lenti kép.)

 Természetesen a breadcrumb-an szereplő szavak tovább növelik az adott oldal kulcsszó arányát, így effajta jótékony hatásuk is. Igaz nálunk nincs olyan nagy tartalom, de azért saját weblapunkra is felhejeztünk egy navigációs menüt, ami csak a blogbejegyzéseknél jelenik meg. (Lenti kép.)

 Saját breadcrumb hozzáadása a sablonunkhoz, bővítmény nélkül

Az ugye picivel jobb, ha amit tudunk azt bővítmény nélkül oldunk meg. Ezen egyszerű feladatot bátran saját kis kódszerkesztésünkkel meg tudjuk oldani. Azonban a furcsa, hogy pont egy ilyen egyszerű kódból volt nehéz működőt találni. Ami ment, abba is volt hiba. Így kiegészítettem és javítottam. Az alábbi kódot illesszük be a sablonunk functions.php fájljába:

// RotiSoft.hu - Breadcrumb, navigacios menu kezdes
function rotisoft_breadcrumb() {
    if (!is_home()) {
        echo '<div class="rotisoft_bradcrumb">';
        echo '<a title="'; //Itt kezdodik a kezdolapra muato link meghivasa
        bloginfo('name'); // A link title ertekete itt alaphelyzetbe az oldal neve
        echo '" rel="bookmark" href="'; //Megadjuk, hogy belső, más helyeken is szereplő linkról van szó
        echo get_option('home');
        echo '">';
        bloginfo('name'); // Az oldal neve, ezt helyettesitheto egyedi szoveggel is igy: echo 'sajatszoveged';
        echo ".hu</a> » ";
        if ( is_single()) { //Csak bejegyzeseknel
            echo '<a rel="bookmark" title="Blog bejegyzések" href="http://oldalad.hu/blog">Weblapkészítő Blog</a> » '; //Nalam az elso oldal egy fix lap, a bejegyzesek a Blog menupont alatt vanank. Ezt le kell cserelned a nalad szereplore! Avagy az if (is_singe-tol torold a kovetkezo sorig.
        }
        if (is_category() || is_single()) { //Kategoria neveit teszi ki es linkeli meg.
            the_category(', '); //Kategoriakat elvaszto jel, ha egy bejegyzes tobb kategoriban is szerepel.
            if (is_single()) { //Bejegyzesnel a breadcumb legvegere kiirja a bejegyzes cimet. Ez nem feltetlenul kell, torolhetjuk az if ... } -ig.
            echo " » ";
            the_title();
            }
        } elseif (is_page()) { //Oldalak eseten az oldalak nevet irja ki.
            echo " » ";
            echo the_title();
        }
        echo '</div>';
    }
}
// RotiSoft.hu - Breadcrumb, navigacios menu vege

Majd a sablonunkba a kívánt helyen hívjuk meg:

<?php rotisoft_breadcrumb(); ?>

Ezután már csak css-ben kell formáznunk. A könnyebb formázás érdekében hozzáadtam egy div elemet, amibe belekerül a navigációs menü. Így könnyen lehet egyedi színt, kinézetet – megjelenést készíteni neki, könnyen beilleszthetjük weblapunkban. Csak használjuk a „.rotisoft_bradcrumb” class elemet.

Breadcrumb plugin, bővítmény segítségével

A legegyszerűbb megoldás, ha nem szeretnénk kódok között bogarászni, hogy bővítménnyel oldjuk meg. A 2 legnépszerűbbet szeretném most kiemelni:

• Breadcrumb NavXT – Egy részletesen beállítható bővítmény.
• Really Simple Breadcrumb – Egyszerű, rém egyszerű navigációs menüt ad a megjelenéshez.
• Yoast SEO – A régimotoros keresőoptimalizálós bővítmény is tudja.

Segédanyagok:

• A functions.php szerkesztése

Források:

• CatsWhoCode.com (angol) – How to: Breadcrumb