Genesis Framework to popularny motyw WordPress, który został wykorzystany do stworzenia jednych z najpiękniejszych i najbardziej kreatywnych stron internetowych w Internecie. Jest to jeden z naszych ulubionych blogów dla przedsiębiorców, ponieważ jest tak wszechstronny, łatwy w użyciu i konfigurowalny.
Jedną z rzeczy, które wielu ludziom sprawia trudność w motywach Genesis, jest dodanie logo obrazu w nagłówku. Na szczęście za pomocą kilku kliknięć możesz mieć własne niestandardowe logo.
Jest to przydatne, jeśli chcesz, aby Twoja witryna miała określoną markę pasującą do Twojej firmy. Proces dodawania tego zajmuje mniej niż 10 minut i wymaga użycia tylko jednej wtyczki, która nazywa się Custom Logo Uploader firmy WPSquare.
Można go zainstalować w kilka sekund za pomocą jednego kliknięcia w panelu administracyjnym WordPress.
Oto kroki:
1) Zainstaluj wtyczkę
2) Dodaj żądane obrazy
3) Skonfiguruj ustawienia
4) Zapisz zmiany 5-10 minut później, wróć do Genesis Child Theme Settings > Header Image
6) Wybierz niestandardowe logo
7) Wprowadź żądany adres URL
8) Zapisz zmiany.
Jak dodać logo obrazu nagłówka dla motywu Genesis Child-
KROK 1: Skonfiguruj logo w panelu
Ponieważ używam „Dwadzieścia dziesięć motywów potomnych„, wystarczy przejść do Pulpit >> Wygląd >> Dostosuj >> Nagłówek i dodać logo, którego chcę użyć. Możesz dodać własne niestandardowe obrazy lub wybrać spośród dostępnych w WordPress, które znajdziesz w sekcji „Dodaj nowy”.
W moim przypadku zamierzam dodać obraz z Dashboard Media Folder, klikając plik o nazwie „header-logo.png”.
KROK 2: Dodaj niestandardowy kod do funkcji motywu potomnego Genesis.
php Otwórz plik php funkcji motywu Genesis Child, który zwykle znajduje się w głównym folderze motywu o nazwie functions.php . Możesz otworzyć ten plik za pomocą dowolnego klienta FTP lub SFTP, takiego jak Filezilla .
A jeśli nie możesz znaleźć tego pliku, możesz go utworzyć. Napisałem post, aby pokazać, jak utworzyć plik php funkcji motywu potomnego Genesis.
Oto kod, który dodałem na końcu mojego pliku functions.php, ale przed zamknięciem tagu PHP?>
// Logo nagłówka BP
add_custom_image_header( 'bp-logo' );
To mówi Genesis, aby użył obrazu o nazwie „bp-logo” jako logo nagłówka mojej witryny. Możesz zmienić tę nazwę, ale nie zapomnij zmienić jej również w następnym kroku. Teraz utwórz nowy folder o nazwie bp-logo .
Musi zostać utworzony w głównym katalogu motywu. Aby uzyskać więcej informacji, sprawdź mój post na temat tworzenia folderu w motywie potomnym Genesis.
KROK 3: Utwórz obraz logo dla motywu strony trzeciej
Problem polega na tym, że nasz obraz logo nie pojawi się w sekcji dostosowywania pulpitu WordPress, ale nadal będzie wyświetlany w interfejsie użytkownika po opublikowaniu witryny w Internecie.
Oznacza to, że musimy dodać ten obrazek do pliku header.php naszego motywu. Na szczęście możemy to zrobić, edytując nasze motyw bezpośrednio z panelu administracyjnego WordPress.
Potrzebujesz pliku zip motywu i klienta FTP lub SFTP fileZilla . Możesz użyć phpMyAdmin także jeśli wiesz, jak z niego korzystać.
Otwórz archiwum zip za pomocą swojego ulubionego programu i przejdź do /wp-content/themes/TWOJA NAZWA TEMATU/header.php . Skopiuj kod, który widzisz w tym pliku, ale przed tagiem zamykającym PHP ?> .
KROK 4: Dodaj niestandardowy kod do nagłówka Genesis Child Theme.
php Teraz otwórz plik header.php motywu (który znajduje się w /wp-content/themes/NAZWA TWOJEGO motywu/ ) i dodaj ten kod przed zamknięciem tagu PHP (który znajduje się na końcu pliku):
KROK 2: Gotowe Teraz, jeśli odwiedzisz swoją witrynę, logo pojawi się w interfejsie użytkownika.
Ale jest problem z tym kodem. Tworzy plik obrazu na twoim serwerze i jeśli prześlesz dużo obrazów, niepotrzebnie zajmie miejsce na serwerze.
Aby rozwiązać ten problem, użyłem mojej wtyczki o nazwie „Genesis Simple Hooks”. A oto zaktualizowany niestandardowy kod, który dodałem w pliku functions.php: add_action( 'genesis_before_header', 'bp_add_header_logo' );
Podstawowe kroki dodawania niestandardowych nagłówków do bloga WordPress
1) Przejdź do pulpitu nawigacyjnego swojego bloga WordPress i najedź na Wygląd. Wybierz Menu z tego miejsca.
2) Kliknij nagłówek nr 1 w menu rozwijanym Genesis Simple Headers. Otworzy się nowa strona z wieloma opcjami. Możesz zmienić dowolną z dostępnych tam opcji.
3) Pierwsza opcja to Obraz nagłówka. Kliknij przycisk przeglądania i wybierz obraz z komputera lub użyj jednego z domyślnych obrazów dostępnych w tej sekcji.
Upewnij się, że masz pozwolenie na użycie tego obrazu, ponieważ będzie on wyświetlany jako część Twojego treść bloga i pojawi się również w wynikach wyszukiwania. Możesz użyć tego samego obrazu dla wszystkich trzech obrazów nagłówka, jeśli chcesz. Możesz także zmienić tekst wyświetlany w tej sekcji.
4) Drugie menu rozwijane to Typ nagłówka. Wtyczka udostępnia 5 typów i możesz wybrać dowolny z nich. Jednak zmiana typu na H1 pomoże ci w dalszej stylizacji jako nagłówka H1.
5) Trzecie menu rozwijane to Pozycjonowanie i możesz go użyć do zmiany pozycji nagłówka obraz na Twoim blogu (lewy, środkowy lub prawy).
6) W czwartym menu rozwijanym możesz wybrać, która sekcja postów ma być wyświetlana w tym nagłówku. Masz 3 sekcje – Genesis Featured Image, Intro Text i Post Title. Jeśli chcesz wyświetlić coś innego, możesz wpisać ten kod HTML w odpowiedniej sekcji i tam się pojawi.
7) Kliknij Zapisz Menu po dokonaniu wszystkich zmian.
8) Nowy obraz nagłówka zostanie natychmiast wyświetlony na Twoim blogu, a za każdym razem, gdy odwiedzający otworzy którykolwiek z Twoich postów na blogu, ten obraz nagłówka pojawi się na górze. Możesz jednak zmienić jego pozycję na prawą lub lewą, przechodząc do Wygląd - Dostosuj - Nawigacja boczna, a następnie wybierając prawo lub lewo.
Edycja pliku Style.css z Genesis Child Theme-
Natknąłem się na motyw potomny Genesis o nazwie [i]Element[/i] w oficjalnym katalogu motywów WordPress i chciałem go użyć w moim lokalnym środowisku programistycznym.
Pierwszy i drugi post na tej stronie zawierają wskazówki, jak ustawić nowy motyw potomny Genesis do celów rozwojowych. Więc sprawdź je, jeśli jeszcze tego nie zrobiłeś.
Po tym, jak próbowałem uruchomić skrypt instalacyjny znaleziony w pierwszym poście, zdałem sobie sprawę, że zainstalował arkusz stylów motywu potomnego w katalogu o nazwie „_s”, który jest poprawny dla wszystkich motywów WordPress z wyjątkiem Genesis.
Następnie edytowałem plik motywu potomnego style.css i zmieniłem ścieżki z „Element Child Theme/style.css” na „Element Child Theme/*/style.css”.
I to faktycznie działa!
Szybkie linki
- Dlaczego logo jest ważne dla Twojej firmy
- Niezbędne elementy bloga, których nie możesz przegapić jako początkujący
- Dowiedz się teraz, jak zwiększyć swój marketing w mediach społecznościowych?
- Moja ulubiona kolekcja motywów WordPress wszech czasów
Wniosek - jak dodać logo obrazu nagłówka dla motywu Genesis Child 2024
Genesis Framework to jeden z najpopularniejszych dostępnych motywów WordPress. Jest łatwy w dostosowywaniu i zawiera mnóstwo funkcji, które pomogą Ci rozwinąć działalność.
Jednym ze sposobów personalizacji witryny jest dodanie logo z obrazem nagłówka dla motywu Genesis Child, które pojawi się w miejscu domyślnego tekstu „Genesis Framework” na górze każdej strony.
Blogi to świetny sposób na dzielenie się wiedzą, promocję produktu lub usługi oraz budowanie grona odbiorców. Ale jak je zaprojektujesz?
Istnieje wiele różnych motywów blogów, które twierdzą, że są najlepsze do tworzenia pięknych stron internetowych, ale który z nich jest dla Ciebie odpowiedni? Wzięliśmy niektóre z najpopularniejszych dostępnych obecnie szablonów Genesis Child Theme i oceniliśmy ich jakość od 1 do 5 gwiazdek w oparciu o nasze osobiste preferencje.