WP-DOC

Pisanie motywu

03.03 Obrazek w nagłówku

Ostatnia modyfikacja: 22.05.2021

Zmiany w motywie

Zanim przejdziemy do zmiany obrazka w nagłówku, musimy dokonać zmiany w budowie motywu. W pliku style.css, dla klasy header, czyli całego nagłówka, jest przypisane zdjęcie w tle za pomocą właściwości background. Kod ten wygląda następująco.

Przypisanie obrazka tła do nagłówka – style.css

.header {
    display: flex;
    justify-content: center;
    align-items: center;
    width: 100%;
    height: 100%;
    background: url('images/header_1.jpg') center center no-repeat;
    background-size: cover;
    text-align: center;
    overflow: auto;
}

Z pliku style.css musimy wyciąć linię background: url('images/header_1.jpg') center center no-repeat; a następnie umieścić ją w pliku index.html w znaczniku header, jako styl lokalny. Należy pamiętać, aby do ścieżki dodać url dodać funkcję get_template_directory_uri(). Później cały adres url do pliku zamienimy na odpowiednią funkcję, która będzie wyświetlać grafikę wybraną przez użytkownika w panelu administracyjnym WordPress.

Dodanie obrazka nagłówka do kodu html – index.php

<header class="header" style="background: url('<?php echo get_template_directory_uri(); ?>/images/header_1.jpg') center center no-repeat; background-size: cover;">

Po zmianie z pliku style.css można usunąć background-size: cover.

Dodanie funkcjonalności

Aby umożliwić zmianę zdjęcia w panelu administratora WP, posłużyć się funkcją add_theme_support(), którą wykorzystaliśmy do obsługi loga. W pliku functions.php wystarczy dodać następującą linię kodu.

Dodanie możliwości zmiany obrazka w nagłówku w panelu WP – functions.php

add_theme_support('custom-header');

Teraz w panelu administratora WordPress wybierając kolejno Wygląd - Nagłówek, mamy możliwość dodawania obrazków do nagłówka. Aby obrazek zmieniał się dynamicznie w motywie, musimy dokonać zmiany w pliku index.php, w znaczniku header. W stylu lokalnym w właściwości backgraund w adresie url, zamiast ścieżki do pliku umieszczamy funkcję header_image(), która wyświetli ścieżkę do aktualnego obrazka.

Wykorzystanie funkcji header_image() do dynamicznej zmiany obrazka – index.php

<header class="header" style="background: url('<?php header_image();?>') center center no-repeat; background-size: cover;">

Dodatkowe możliwości

Wykorzystując add_theme_support() dla custom-header jest możliwość zmiany domyślnych ustawień. Poniżej lista wszystkich argumentów jakie może przyjąć ta funkcja.

Wszystkie domyślne ustawienia add_theme_support() dla custom-header

add_theme_support('custom-header', array(
    'default-image'          => '',
	'width'                  => 0,
	'height'                 => 0,
	'flex-height'            => false,
	'flex-width'             => false,
	'uploads'                => true,
	'random-default'         => false,
	'header-text'            => true,
	'default-text-color'     => '',
	'wp-head-callback'       => '',
	'admin-head-callback'    => '',
	'admin-preview-callback' => '',
));

Domyślny obrazek

Najciekawszą opcją z dodatkowych możliwości dla custom-header jest default-image. Jest do domyślne zdjęcie, którego nie da się usunąć z poziomu panelu administracyjnego WP, gdyż zdjęcie te może znajdować się w jakimś folderze motywu. Jeżeli pobrałeś przykładowy motyw na tą cześć kursu, w folderze images znajduje się plik header_1.jpg. To właśnie ten plik będzie domyślnym obrazkiem nagłówka. Zmodyfikuj kod w pliku functions.php jak na listingu niżej. Ponownie należy wykorzystać funkcję get_template_directory_uri(), aby uzyskać ścieżkę do folderu z motywem.

Podanie ścieżki do domyślnego zdjęcia nagłówka – functions.php

add_theme_support('custom-header', array(
    'default-image'  => get_template_directory_uri() . '/images/header_1.jpg'
));

Zdjęcie nagłówka należy zarejestrować za pomocą funkcji register_default_headers() jak na listingu niżej.

Rejestracja obrazka nagłówka – functions.php

// Dodanie wsparcia własnego zdjęcia w nagłówku
register_default_headers(array(
    'podstawowy' => array(
        'url'           => get_template_directory_uri() . '/images/header_1.jpg',
        'thumbnail_url' => get_template_directory_uri() . '/images/header_1.jpg',
        'description'   => 'Podstawowy', 'wpnauka_firma'
    )
));

add_theme_support('custom-header', array(
    'default-image'  => get_template_directory_uri() . '/images/header_1.jpg'
));
// ------------------------------------------------------------

Powyższy kod rejestrujący zdjęcie nagłówka, może wyglądać niejasno, gdyż jest to tablica w tablicy. Pierwsza tablica rejestruje nagłówek, natomiast w drugiej tablicy podajemy dane do zarejestrowania obrazka nagłówka. Taka konstrukcja daje możliwość zarejestrowania kilku domyślnych obrazków nagłówka, jak na listingu niżej.

Rejestracja kilku obrazków nagłówka

// Dodanie wsparcia własnego zdjęcia w nagłówku
register_default_headers(array(
    'podstawowy' => array(
        'url'           => get_template_directory_uri() . '/images/header_1.jpg',
        'thumbnail_url' => get_template_directory_uri() . '/images/header_1.jpg',
        'description'   => 'Podstawowy', 'wpnauka_firma'
    ),
    'drugoplanowy' => array(
        'url'           => get_template_directory_uri() . '/images/header_2.jpg',
        'thumbnail_url' => get_template_directory_uri() . '/images/header_2.jpg',
        'description'   => 'Drugoplanowy', 'wpnauka_firma'
    )
));

add_theme_support('custom-header', array(
    'default-image'  => get_template_directory_uri() . '/images/header_1.jpg'
));
// ------------------------------------------------------------

Przy zastosowaniu kodu jak wyżej, będziemy posiadać dwa zdjęcia jako podstawowe.

Czytaj dalej…

03.04 Tytuł strony w nagłówku

KOMENTARZE

Jeżeli masz pytanie lub sugestie dotyczącą artykułu to napisz komentarz. Wartościowe komentarze zostaną umieszczone jako opinie warte uwagi.

Napisz komentarz

Wszystkie pola są obowiązkowe. E-mail nie będzie udostępniony, ani wykorzystywany do rozsyłania wiadomości reklamowych.

Jeszcze nikt nie napisał komentarza.