Logo w nagłówku linkujące do strony głównej

27 stycznia, 2012 | wrociu | 0 komentarzy
Logo w nagłówku
Udostępnij dalej:

Ostatnio na forach pojawił się kilkukrotnie temat związany z obrazkiem w nagłówku. Takim obrazkiem może być na przykład logo. Najważniejszym założeniem jest aby obrazek linkował do strony głównej naszego bloga. W tym wpisie pokażę jak szybko zrealizować taką zmianę. Przeprowadzimy ją na przykładzie szablonu Simplistic Blue (wersja 1.3.2). O kilku modyfikacjach tego szablonu pisałem już tu i tu.

Przed zmianami nagłówek naszej strony wygląda tak:

Nagłówek przed zmianami

Nagłówek przed zmianami

Co należy wykonać aby zastąpić „Demo” logiem? Odpowiedź poniżej w 3 prostych krokach.

W pierwszym kroku kopiujemy nasz obrazek do folderu „images” naszego szablonu – katalog_główny_witryny\wp-content\themes\simplistic-blue\images. Załóżmy, że nasz plik z naszym obrazkiem nazywa się logoImage.png i ma rozmiar 80px na 80px.

Gdy masz już skopiowany obrazek poszukaj w pliku header.php szablonu następującego fragmentu kodu:

<div id="header">
   <h1><?php bloginfo('name'); ?>  |  <font size="2"><?php bloginfo('description'); ?></font></h1>
   <div id="navigation">

Zastąp ten kod następującym fragmentem:

<div id="header">
	<a href="<?php bloginfo('url'); ?>">
        <img id="logoHeader" src="<?php
  		echo bloginfo( 'template_directory' )."/images/logoImage.png";
  		?>" alt="Logo bloga mojego"/>
	</a>
	<h1><font size="2"><?php bloginfo('description'); ?></font></h1>
	<div id="navigation">

I to by w zasadzie wystarczyło, ale w szablonie Simplistic Blue (wersja 1.3.2) warto jeszcze zadbać o style. Naszemu obrazkowi nadaliśmy id logoHeader. Warto zatem dodać do pliku style.css naszego szablony chociaż taką sekcję:

#logoHeader {
	float: left;
	padding: 5px;
}

Dzięki temu tekst – opis naszego bloga będzie opływać obrazek, natomiast padding odsunie logo od krawędzi tła nagłówka. Efekt powinien wyglądać tak:

Nagłówek po zmianach

Nagłówek po zmianach

Podsumowując dodaliśmy logo zamiast standardowego tytułu. Logo linkuje do strony głównej naszego bloga. Użyliśmy następujących funkcji:

bloginfo( 'template_directory' ) – zwraca (a w zasadzie bardziej pasuje tu słowo wyświetla) ścieżkę do katalogu głównego naszego szablonu.

bloginfo('url') -zwraca URL naszej głównej strony.

Miłego weekendu!


zostaw odpowiedź