Funkcja zmiany loga w panelu WP

Logo na stronie nie musi być ustawione na sztywno w kodzie strony. Za pomocą funkcji add_theme_support() w pliku finctions.php, utworzymy możliwość zmiany loga poprzez panel administracyjny WordPress. Funkcja ta za parametr przyjmuje tablicę z następującymi parametrami:

1. height – wysokość loga (wartość podana w px),
2. width – szerokość loga (wartość podana w px),
3. flex-height – czy wysokość loga ma być elastyczna (true / false)
4. flex-width – czy szerokość loga ma być elastyczna (true / false)

W motywie przygotowanym do tego kuru, który możesz pobrać, znajduje się plik functions.php, do którego należy dodać następujący kod.

functions.php – obsługa loga poprzez panel administracyjny – fragment kodu

add_theme_support( 'custom-logo', array(
    'height'      => 70,
    'width'       => 97, 
    'flex-height' => false,
    'flex-width'  => true,
));

W motywie przygotowanym do tego kursu znajduje się również plik index.php. W pliku tym należy odnaleźć poniższą linię kodu:

index.php – sztywne ustawienie loga w motywie – fragment kodu

<img src="<?php echo get_template_directory_uri(); ?>/images/flower-logo.jpg" alt="">

Powyższą linię kodu zamieniamy na tą poniżej.

index.php – umożliwienie zmiany loga po przez panel administracyjny

<?php the_custom_logo(); ?>

Funkcja the_custom_logo(), wyświetli logo, które zostanie wybrane w panelu administratora

Zmiana loga w panelu WP

Po przygotowaniu odpowiedniej funkcji do zmiany loga, można zmieniać je w panelu administratora WordPress. W panelu wybieramy Wygląd - Dostosuj następnie Tożsamość witryny, gdzie pojawiła się możliwość zmiany loga jak na zdjęciu niżej. Jeżeli z biblioteki mediów wybierzemy obraz większy niż zdeklarowany w pliku functions.php, system WordPress, będzie skalował obraz.

Sprawdzenie czy logo istnieje

Za pomocą funkcji has_custom_logo(), można sprawdzić, czy użytkownik dokonał wyboru loga w panelu administracyjnym. Jeżeli tak funkcja zwróci true jeżeli nie funkcja zwróci false. W instrukcji warunkowej if, należy dokonać sprawdzenia. Jeżeli funkcja zwróci true wyświetlamy logo wybrane przez użytkownika, jeżeli logo nie zostało wybrane wyświetlamy domyślne logo.

index.php – sprawdzenie czy użytkownik dokonał wyboru loga – fragment kodu

if(has_custom_logo()) {
    the_custom_logo();
} else {
    echo '<img src="'.get_template_directory_uri().'/images/flower-logo.jpg" alt="">';
}

Czytaj dalej…

03.03 Obrazek w nagłówku