Personalizacja motywu – logo, tytuł i nagłówek strony

W tym artykule skupiam się na górnej części strony. Odpowiadam na pytania: jak dodać logo do motywu WordPress, jak zmienić tytuł i opis strony z statycznego na dynamiczny oraz jak korzystać z niestandardowych nagłówków.

W poprzednim wpisie z tej serii udało nam się aktywować nasz nowy motyw w panelu admina. Podpięliśmy też arkusz stylów i skrypt js. Teraz czas zająć się topem strony, czyli na pierwszy ogień idzie logo, nazwa strony i nagłówek z zdjęciem w tle.

Nowe możliwości dzięki add_theme_support()

Żeby włączyć korzystanie z wielu różnych użytecznych funkcjonalności WordPress (takich jak: miniaturki do wpisów, różne formaty wpisów, własne logo, własne menu nawigacyjne itp.) trzeba najpierw dać znać WordPressowi, że chcemy używać takich elementów.

Robimy to w pliku functions.php, gdzie tworzymy sobie nową funkcję o nazwie cloudyblog_setup i wpinamy ją do zaczepu akcji o nazwie 'after_setup_theme’.

Dzięki temu nasza funkcja wywoła się w momencie, gdy motyw zostanie wczytany i zainicjowany. Zgodnie z dokumentacją WordPress’a, jest to odpowiedni czas na użycie funkcji add_theme_support() w celu dodania obsługi poszególnych funkcjonalności.

W dalszej części tego wpisu, wewnątrz tej funkcji będziemy dodawać obsługę logo i własnego, niestandardowego nagłówka witryny.

<?php 
/**
 * Cloudy Blog functions
 */

function cloudyblog_setup(){

  // Tutaj będziemy rejestrować nowe funkcjonalności
  
}
add_action('after_setup_theme', 'cloudyblog_setup');

Dodwanie logo do motywu WordPress

Na początek chcę, żeby użytkownik motywu CloudyBlog mógł sobie sam zmienić logo. Takie wsparcie rejestruje się przy użyciu funkcji add_theme_support() i wygląda to tak:

function cloudyblog_setup(){

  // Własne logo w motywie
  add_theme_support( 'custom-logo', array(
    'height'      => 50, // wysokość logo
    'width'       => 67, // szerokość logo
    'flex-height' => false, // czy wysokość ma być elastyczna
    'flex-width'  => true, // czy szerokość ma być elastyczna
  ) );

}
add_action('after_setup_theme', 'cloudyblog_setup');

Krok po kroku co robię w związku z podmianą statycznego logo na dynamiczne w motywie:

Rejestruję możliwość dodawania logo do motywu (to jest powyższy fragment z add_theme_support).
Z pliku header.php usuwam statyczne, podlinkowane logo.
W miejsce usuniętych linii kodu wrzucam funkcję, która wyciągnie z bazy danych logo załadowane przez użytkownika (to jest dynamiczne dodawanie zawartości więc korzystam z PHP): <?php the_custom_logo(); ?>
Idę do panelu admina (Wygląd > Personalizacja > Tożsamość witryny > Logo [wybierz logo] ).
Wybieram logo, podgląd w customizerze odświeża się i w nagłówku pojawia się nasze załadowane przed chwilą logo.
Zapisuję zmiany klikając w button 'opublikuj’.
Na froncie pojawia się podlinkowane logo o ustawionej w funkcji wysokości.

Dobra, logo już mamy, więc teraz czas zająć się tytułem i opisem strony, który nadal jest zakodowany na sztywno.

Dynamiczny tytuł i opis strony

Podobnie jak wyżej, najpierw muszę usunąć z pliku header.php statyczny nagłówek razem z opisem. W miejsce usuniętego nagłówka i opisu wklejam poniższy kod PHP.

Jest to dłuższy fragment kodu, ale też trochę bardziej kompleksowy – w zależności od strony, na której jesteśmy, będzie wyświetlał tag h1 lub p z tytułem strony a także pobierze opis strony wpisany w panelu Customizera i wyświetli go w nagłówku.

// Jeśli jesteśmy na domyślnej stronie głównej
<?php if ( is_front_page() && is_home() ) : ?>
    
    // Wyświetl podlinkowany nagłówek h1 z tytułem strony pobranym przez funkcję bloginfo()
    <h1 class="site-title"><a href="<?php echo esc_url( home_url( '/' ) ); ?>" rel="home"><?php bloginfo( 'name' ); ?></a></h1>

    // Jeśli jesteśmy na jakiejkolwiek innej stronie
    <?php else : ?>
    
    // Wyświetlamy podlinkowany tag p z tytułem strony
    <p class="site-title"><a href="<?php echo esc_url( home_url( '/' ) ); ?>" rel="home"><?php bloginfo( 'name' ); ?></a></p>

<?php endif; ?> // koniec pętli if

// Pobierz z bazy danych opis strony, który wpisał użytkownik w panelu admina
// i zapisz go w zmiennej $cloudyblog_description
<?php $cloudyblog_description = get_bloginfo( 'description', 'display' ); ?>

// Jeśli mamy wpisany opis strony
<?php if ( $cloudyblog_description ) : ?>

    // Wyświetl opis strony
    <p class="site-description"><?php echo $cloudyblog_description; ?></p>

<?php endif; ?>
// koniec pętli if

Po zapisaniu pliku header.php, mogę odwiedzić Customizer (Wygląd > Personalizacja > Tożsamość witryny) i zmodyfikować pola „tytuł witryny” i „opis” – zmiany po zapisaniu pojawią się na froncie.

Dodatkowo na samym dole sekcji „tożsamość witryny” mamy możliwość załadowania favicony do naszej strony.

Własny nagłówek

Na stronach Codex’u możemy dowiedzieć się czym jest niestandardowy nagłówek w motywie WordPress:

Custom header is an image that is chosen as the representative image in the theme top header section.
Cytat: WordPress Codex

Ja rozwiązanie na implemenację takiego nagłówka podpatrzyłam w motywie Twenty Seventeen już w trakcie kodowania „dynamicznego” motywu, więc w pliku header.php zmienił się nieco mark-up i musiałam dodać trochę nowego ostylowania w css. Ale do rzeczy – ogólnie zależy mi na tym, żeby można było z poziomu panelu admina zmieniać zdjęcie w tle nagłówka motywu.

Tuaj z pomocą przychodzi feature „custom header” czyli niestandardowy nagłówek. Żeby wprowadzić do naszego motywu taką funkcjonalność, najpierw dodajemy wsparcie funkcją add_theme_support() a później rejestrujemy domyślne nagłówki (ja dodałam dwa):

function cloudyblog_setup(){

  // Dodanie wsparcia własnego logo przez motyw..

  // Dodanie wsparcia własnego nagłówka przez motyw
  add_theme_support( 'custom-header', array(
	'default-image'  => get_template_directory_uri() . '/includes/img/default-header-rain.jpg', // domyślne zdjęcie
	'header-text'    => false, // czy razem z obrazkiem chcemy jakiś tekst
	'width'          => 2000, // szerokość nagłówka
	'height'         => 280, // wysokość nagłówka
        'flex-height'    => true, // czy wysokość może być elastyczna
  ) );
  
  // Określenie domyślnych nagłówków, które będą dostępne w motywie
  // %s automatycznie zostanie zastąpione ścieżką do naszego motywu
  register_default_headers( array(
      'rain' => array(
          'url'           => '%s/includes/img/default-header-rain.jpg',
          'thumbnail_url' => '%s/includes/img/default-header-rain.jpg',
          'description'   => 'Rain',
      ),
     'face' => array(
         'url'           => '%s/includes/img/default-header-face.jpg',
         'thumbnail_url' => '%s/includes/img/default-header-face.jpg',
         'description'   => 'Face',
     ),
  ) );

}
add_action('after_setup_theme', 'cloudyblog_setup');

W katalogu z naszy motywem (cloudyblog/includes/img/) dołożyłam domyślne zdjęcia dla nagłówków. Zdjęcia przycięłam do rozdzielczości 280px x 2000px.

W pliku header.php wyświetlamy ten nagłówek (nadpisałam też plik style.css, zmiany do zobaczenia w repozytorium na GH, link na końcu wpisu):

<header class="site-header">
    <div class="site-custom-header">

       <!-- własny nagłówek -->
       <div class="site-custom-header-media">
           <?php the_custom_header_markup(); ?>
       </div>
        
       <!-- reszta kodu -->

     </div>
</header>

Teraz mogę odwiedzić panel Customizer’a ( Wygląd > Nagłówek ) i zobaczę, że w „Sugerowanych” wyświetlają się moje zarejestrowane nagłówki. Wybieram sobie jeden z nich i klikam „Opublikuj”.

Na tą chwilę, logo, tytuł i opis strony oraz zdjęcie nagłówka są już dynamiczne, można je zmieniać w panelu admina, czyli o to chodziło.

Podsumowanie użytych funkcji

Podsumowanie z WordPressowymi funkcjami, które były dzisiaj używane:

add_theme_support() – do dodania obsługi danej funkcjonalności przez motyw
the_custom_logo() – wyświetla logo z linkiem do strony głównej
bloginfo() – wyświetla informacje o stronie (np. jej nazwę, opis)
home_url() – zwraca adres strony głównej
register_default_headers() – do rejestracji domyślnie używanych przez motyw niestandardowych nagłówków
the_custom_header_markup() – zwraca niestandardowy nagłówek

Kod na GitHub’ie

Kod źródłowy motywu aktualizuję po każdym odcinku, można go znaleźć na GitHubie. Każda aktualizacja dostaje swój tag z numerem odcinka (tj. ten odcinek będzie miał tag 0.0.5).

Link do repozytorium z motywem WordPress : kliknij tutaj

—

Photo by Alex Holyoake on Unsplash

Obserwuj

3 komentarzy

najstarszy

najnowszy oceniany

Inline Feedbacks

View all comments

precell

4 lat temu

Właśnie kończę dłubanie mojego prywatnego szablonu do WP i nawet nie pomyślałem żeby ładować logo przez personalizacje 🙂 Dzięki za rozwiązanie, chyba zastosuje je u siebie.

W serii wpisów brakuje mi tematu dotyczącego komentarzy do wpisów/stron, niestety ten standardowy kod z dokumentacji WP jest mało elastyczny.

A więc mogę liczyć na taki wpis? 😉

Odpowiedz

Crocoder

Autor

Reply to precell

Przydatna opcja jeśli chcesz łatwo zaktualizować logo bez grzebania w kodzie. 🙂 Będzie wpis o systemie komentarzy z WP i o tym, jak zakodować własny wygląd komentarza – jestem już w trakcie pisania go. Przed wpisem o komentarzach będzie jeszcze parę innych – o miniaturkach i stronie wpisu razem z paginacją, więc chwilkę to jeszcze potrwa.

Reply to Crocoder

Fajnie 😉 Co do paginacji, uwzględnij niestandardowe wpisy, bo mi się paginacja na stronie archiwum takiego wpisu posypała. Tzn sama paginacja się wyświetla, ale cały czas pokazuje pierwszą podstronę.