Większość szablonów pozwalają na samodzielną zmianę logotypu, jednak nie wszystkie. Dziś zaprezentuję w jaki sposób można zmienić logo z formatu tekstowego na plik .jpg nie znając języków HTML i CSS.

 Szablon był na tyle poukładany, że wyświetlił tytuł strony. Nie dał jednak możliwości zmiany go na obrazek. W tym mikrokursie pokażę w jaki sposób umieścić zamiast tekstu kod pliku z logotypem.

[FMP]

Krok 1

Wejdź do sekcji Wygląd -> Edytor do edycji pliku header.php.  W następnej kolejności znajdź element strony zawierający tytuł witryny. Zwykle tego typu elementy posiadają klasę „side-title”, „logo”, „title” albo podobną. W naszym przypadku element wyświetlający tytuł strony miał postać:

<h1 class="site-title">
<a href="<?php echo esc_url( home_url( '/' ) ); ?>" rel="home"><?php bloginfo( 'name' ); ?></a>
</h1>

Pierwsza i trzecia linia służy do oznaczenia fragmentu w środkowej linii jako nagłówka.

Druga linia zawiera tytuł strony wyświetlany przy pomocy:

<?php bloginfo( 'name' ); ?>

który jest objęty znacznikiem a href służącym do umieszczenia tam odnośnika. Aby zamiast tekstu z tytułem bloga umieścić logo w formacie JPG trzeba podmienić powyższy znacznik bloginfo na obrazek.

Krok 2

Teraz należy przygotować kod HTML odpowiadający za wyświetlenie logo.

Aby to zrobić wystarczy przejść do dodawania nowego wpisu, dodać medium czyli nasze logo, a następnie przejść do trybu tekstowego i skopiować gotowy do wklejenia kod HTML.

Dla porządku wprowadziłem w kodzie obrazka dwie drobne modyfikacje. Całkowicie usunąłem dodawane klasy do każdej grafiki umieszczonej w WordPressie, gdyż w moim przypadku nie była ona potrzebna. Druga modyfikacja to zmiana znacznika alt czyli opisu zdjęcia. Zamiast „young-gentelman” postanowiłem wpisać „Young Gentelman”.

Krok 3

Skoro już masz kod wyświetlający logo i wiesz gdzie go umieścić jedyne co nam pozostaje to zmodyfikować plik header.php. Pamiętaj o tym aby zrobić przed każdą modyfikacją kopię zapasową jeśli nie jesteś pewien czy  umieścisz kod we właściwym miejscu.

Krok 4

To w zasadzie mogłoby być wszystko, bo strona dobrze się prezentuje na dużych ekranach. Jeśli jednak spojrzymy na tablet lub telefon, wtedy szybko stwierdzimy, że konieczna jest modyfikacja.

W moim przypadku musiałem wprowadzić kilka reguł dla różnych rozdzielczości. Ogólna zasada jest taka, że musisz przejść do edycji pliku style.css, a następnie określić jak mają się zachowywać poszczególne elementy dla rozdzielczości ekranu nie większej niż jest to podane w zadeklarowanym warunku. Brzmi to trochę zawile więc przejdźmy do konkretów:

@media only screen and (max-width : 1060px) {
    .site-header .site-branding {
         width: 40%;
    }
}

W pierwszej linii znajdziemy informację – jeśli szerokość ekranu będzie wynosiła 1060px lub mniej, wtedy wykonaj linię 2-4. Linia 2 określa który kontener na stronie ma zostać zmniejszony, a linia 3 określa o ile w skali procentowej. Dzięki tej modyfikacji elementy nie nachodzą na siebie.

[/FMP]