Ikona HOME w pasku nawigacyjnym

Czasami brakuje mi drobnych funkcjonalności w używanym motywie (ang. theme). Otóż chciałem mieć w pasku menu ikonę, po kliknięciu której znajdę się z powrotem na stronie głównej. Nic prostego. Przekonacie sie sami podczas lektury.

Pierwszym krokiem jest znalezienie odpowiedniej ikony (według upodobania). Ważny jest jej rozmiar, coś zbliżonego do rozmiaru wyświetlanego menu (chodzi o zawierający go kontener ). Ja wykorzystałem 24px na 24px. Tym sposobem, wstawiając w jednej linii ikonę i menu, nie będzie wydziane przesuniecie obu elementów względem siebie. Ikonkę należy wgrać na serwer FTP. Najlepiej do katalogu używanego motywu.  W ogólnie przyjętym zwyczaju elementy menu znajdują się w pliku header.php Wraz z HTML 5 mamy do dyspozycji znacznik <header> oraz <nav> wprowadzający czystość opisu struktury i w nich znaduje się interesujące nas miejsce. W starszym zapisie trzeba szukać coś w stylu:

<div id=”site-navigation” class=”main-navigation” >

Określamy teraz pojemnik/ramę, w którym znajduje się przywołanie paska nawigacji kodem typu wp_nav_menu.  Przed tym wywołaniem wstawimy dodatkowy kod.

Miejsce dodatkowego kodu
Na potrzeby naszej ikony, proponuję utworzyć oddzielny „pojemnik” i przypisać do niego klasę; coś w rodzaju:

<div class=”homeatmenu”>

Dzięki temu będzie można ustawić dodatkowe formatowanie z pliku style.css . By stworzyć odnoścnik do strony głownej użyjemy standardowej komendy HTML

<a href=”POLE-X”>POLE-Y</a> gdzie:

zamiast POLE-X wpisujemy adres absolutny strony
http://www.filipkowski.com
ewentualnie korzystamy z zapytania PHP o adres strony
<?php echo esc_url( home_url( ‘/’ ) ); ?>

zamiast POLE-Y wpisujemy adress absolutny odpowiedniej ikony graficznej
http://www.twojastrona.pl/wp-content/uploads/image/home24x24.jpg
ewentualnie korzystamy z odwołania PHP względem adresu/pozycji pliku style.css
<?php echo bloginfo( ‘stylesheet_directory’ ) . ‘/images/home24x24.jpg’; ?>

Ostatecznie otrzymujemu poniższą postać:

<div class=”homeatmenu”>
     <a href=”<?php echo esc_url( home_url( ‘/’ ) ); ?>” rel=”home”>
     <img src=”<?php echo bloginfo( ‘stylesheet_directory’ ) . ‘/images/home24x24.png’; ?>”>
     </a>
</div>

Ostateczna wersja kodu
Ostateczny efekt powyższych zmian możecie obserwować na żywo na tej stronie.

Pozdrawiam

Sebastian

Leave a Reply

Your email address will not be published. Required fields are marked *