Jak stworzyć niestandardowy motyw podrzędny WordPress Genesis od podstaw?

Opublikowany: 2018-04-11
Jak-stworzyć-genezę-dziecko-motyw-od-zerwa
Obserwuj @Cloudways

Zanim przejdę do sedna sprawy i edycji szablonów, chciałbym zacząć od odpowiedzi na proste, ale ważne pytanie: Po co tworzyć własny motyw WordPress? Istnieje już wiele istniejących motywów, z których wiele jest bardzo dobrej jakości.

Co więcej, podjęcie takiej przygody wymaga dużo czasu i energii. Tak, ale jest też wiele korzyści z tworzenia własnego motywu WordPress i nie są one bez znaczenia. Według twórców WordPressa:

  • Aktualizacja motywu nadrzędnego nie ma wpływu na dostosowanie.
  • Dziedziczy funkcje motywu nadrzędnego.
  • Elastyczność dostosowywania bez kodowania całego motywu.

Przejdziemy przez kolejne etapy tworzenia od podstaw motywu potomnego Genesis. Oczywiście nie jest to pełne szkolenie, biorąc pod uwagę szeroki zakres WordPressa, ale ten artykuł poprowadzi Cię na solidnych podstawach, aby rozpocząć swój projekt we właściwy sposób.

Pliki tematyczne Genesis Child

Utwórz nowy folder wewnątrz wp-content > motywy i nadaj mu wybraną nazwę. Nazywamy nasz plik jako Custom .

Teraz w folderze motywu podrzędnego utwórz następujące trzy nowe pliki:

  • funkcje.php
  • styl.css
  • strona główna.php

1. Plik Functions.php

Ten plik zawiera nasze niestandardowe funkcje, które utworzymy w naszym motywie potomnym Genesis, aby zmodyfikować domyślną funkcjonalność Genesis, a także samego WordPressa.

W tym celu otwórz plik w edytorze tekstu i zacznij od dodania standardowej dokumentacji w postaci bloku doc.

 <?php

/**
 * Dostosowania motywów
 *
 * @pakiet niestandardowy
 * @autor Ibad Rehman
 * @link https://github.com/ibadrehman/custom
 * @copyright Copyright (c) 2018, Ibad Rehman
 * @licencja GPL-2.0+
 */

Ten fragment dokumentu zawiera informacje dotyczące nazwy naszego motywu, jego autora, linku, w którym jest hostowany i typu licencji.

Odwiedź codex.wordpress, aby uzyskać szczegółowe informacje na temat pliku functions.php w WordPressie.

Następna linia kodu, który dodajemy, zainicjuje framework Genesis. Są na to dwie metody. Po pierwsze, odwołując się do pliku ini.php w pliku functions.php , a po drugie, którego użyjemy w samouczku, to podczepienie naszego kodu do funkcji konfiguracji Genesis.

 add_action( 'Genesis_setup', 'custom_setup',15);

Ta funkcja łączy się z konfiguracją Genesis, która jest pierwszym parametrem. Następnym parametrem jest nazwa funkcji, której będziemy używać do wykonywania naszych niestandardowych funkcji motywu potomnego Genesis. Wreszcie trzeci parametr to wartość, która zapewnia, że ​​nasz plik funkcji zostanie wykonany po motywie nadrzędnym, więc może zastąpić naszą niestandardową funkcjonalność.

Domena tekstowa w WordPressie to identyfikator, który pomaga WordPressowi identyfikować wszystkie załadowane tłumaczenia i w tym celu dodamy kolejną funkcję do naszego pliku functions.php w następujący sposób:

 // Wczytaj domenę tekstową motywu potomnego.
load_child_theme_textdomain( 'niestandardowy' );

Dla naszej funkcji konfiguracji motywu potomnego Genesis, zainicjujemy niestandardową funkcję opakowującą.

 funkcja custom_setup(){}

Wewnątrz tej funkcji zainicjujemy:

  • Stałe
  • Wsparcie motywu

Stałe

Stałe są przydatne, gdy trzeba zmodyfikować motyw potomny Genesis. Zmiany wprowadzone w tym miejscu zostaną zastosowane w całym motywie.

Dodaj następujący fragment kodu, aby dodać stałe.

 // Zdefiniuj stałe motywu.
zdefiniuj( 'CHILD_THEME_NAME', 'Niestandardowy' );
define( 'CHILD_THEME_URL', 'https://github.com/ibadrehman/custom' );
zdefiniuj( 'CHILD_THEME_VERSION', '1.0.0' );

Wsparcie motywu

Po zdefiniowaniu stałych, jesteśmy w kierunku dodania obsługi motywu dla naszego motywu potomnego Genesis. Obsługa motywów może być dodana do różnych opcji WordPress, takich jak menu, posty, galeria, podpisy, komentarze itp.

Aby to zaimplementować, użyjemy funkcji add_theme_support .

 // Dodaj strukturę znaczników HTML5.
	add_theme_support( 'html5', array( 'lista-komentarzy', 'formularz-komentarzy', 'formularz-wyszukiwania', 'galeria', 'podpis' ) );
	
	// Dodaj metatag viewport dla przeglądarek mobilnych.
	add_theme_support( 'Genesis-responsywny-viewport' );
	
	// Dodaj obsługę motywów dla ułatwień dostępu.
	add_theme_support( 'Dostępność Genesis', array(
		'404-strona',
		'menu rozwijane',
		"nagłówki",
		"rem",
		'Formularz wyszukiwania',
		'pomiń-linki',
	) );

Na koniec, w celu obsługi motywów, dodamy również obsługę naszych widżetów stopki.

 // Dodaj obsługę motywów dla widżetów stopki.
add_theme_support( 'Genesis-footer-widgets', 3 );

Pozbywanie się dodatkowych układów paska bocznego

Domyślnie Genesis zawiera sześć opcji układu i jako programista motywów, naszym obowiązkiem jest wsparcie stylizacji dla każdej z nich. Chociaż nie jest obowiązkowe posiadanie wszystkich sześciu opcji układu. W związku z tym pozbędziemy się w sumie trzech opcji, więc zostaną nam tylko trzy opcje.

Aby to zrobić, dodaj ten kod do pliku functions.php .

 // Wyrejestruj układy korzystające z dodatkowego paska bocznego.
Genesis_unregister_layout( 'treść-sidebar-pasek boczny' );
Genesis_unregister_layout( 'sidebar-content-sidebar' );
Genesis_unregister_layout( 'sidebar-sidebar-content' );

  // Wyrejestruj dodatkowy pasek boczny.
unregister_sidebar( 'sidebar-alt' );

2. Plik Style.css

Stylizację pliku CSS zaczniemy od dodania standardowego tekstu nagłówka, który zawiera informacje o nazwie motywu, autorze, wersji, opisie, szablonie itp.

Dostosowywanie arkusza stylów

Stylizacja HTML

Teraz musimy dodać obsługę resetowania HTML5 i domyślnych elementów HTML5. Na początek HTML5 resetuje wszystkie domyślne style przeglądarki i zapewnia lepsze renderowanie elementów HTML5.

Domyślne elementy HTML5 dodają stylizację do podstawowych elementów, takich jak nagłówki, lista, przyciski, akapity itp.

Stylizacja struktury motywu

Następnie dodamy CSS wymagany dla naszej struktury motywów potomnych Genesis. W tej sekcji zamierzamy wystylizować nagłówek, sekcję i stopkę naszej witryny, a ich odpowiednie klasy to:

  • site_header
  • site_inner
  • stopka_strony

Stylizacja nawigacji po motywach

Idąc dalej, dodamy stylizację do naszej nawigacji tematycznej. W tym konkretnym motywie potomnym na górze naszej strony będziemy mieli wyśrodkowany pasek nawigacyjny.

stylizacja paska nawigacyjnego

Jeśli zgubisz się podczas stylizowania motywu potomnego, możesz odwołać się do przykładowej struktury motywu Genesis. Ma prostą strukturę, a kod jest łatwy do naśladowania.

Dodawanie czcionek

Ważnym elementem stylizacji motywu jest czcionka używana w nagłówkach i tekście głównym. Aby dodać czcionki do naszego motywu potomnego, użyjemy czcionek Google. W tym celu musimy wyedytować dwa pliki: odpowiednio functions.php i style.css.

W pliku functions.php użyjemy funkcji wp_enqueue_style wewnątrz naszej funkcji niestandardowej.

 funkcja custom_equeue_styles() {

	wp_enqueue_style( 'google-fonts', '//fonts.googleapis.com/css?family=Roboto:400,400italic,700,700italic|Homar' );

}

Jak widać, patrząc na adres URL, użyliśmy dwóch popularnych czcionek; Roboto dla tekstu głównego i Lobster dla nagłówków.

Teraz musimy również dodać akcję, aby połączyć nasze czcionki z naszym motywem potomnym.

 // Dodaj arkusz stylów Google Font.
add_action( 'wp_enqueue_scripts', 'custom_equeue_styles' );

3. Plik Front-page.php

Być może zauważyłeś, że większość motywów WordPress korzysta z tego szablonu, który zazwyczaj wyświetla posty statyczne lub najnowsze posty zgodnie z preferencjami użytkownika. Nie jest to wymagany plik szablonu dla motywu, ale użyjemy go w naszym motywie podrzędnym, aby wyświetlić najnowsze posty lub niestandardowe widżety (poza zakresem tego artykułu).

Stwórzmy nową stronę w katalogu głównym i nazwijmy ją front-page.php . Podobnie jak pliki style.css i functions.php , tutaj również dodamy blok dokumentacji po początkowym tagu PHP.

 <?php

/**
 * Dostosowania motywów
 *
 * @pakiet niestandardowy
 * @autor Ibad Rehman
 * @link https://github.com/ibadrehman/custom
 * @copyright Copyright (c) 2018, Ibad Rehman
 * @licencja GPL-2.0+
 */

Następnie zainicjujemy funkcję, która usunie posty wyświetlane na naszej stronie.

 funkcja custom_home_page_setup() {

	// Usuń posty.
	remove_action( 'Genesis_loop', 'Genesis_do_loop' );
}

Ta funkcja będzie bezużyteczna, jeśli nie zdefiniujemy akcji WordPress do określenia pozycji naszego motywu.

 add_action( 'Genesis_meta', 'custom_home_page_setup' );

Na koniec zainicjujemy framework Genesis.

Geneza(); (Potrzebny do każdego szablonu, który tworzymy)

Przykładowe dane

Obecnie nasz motyw jest surowy i nie wygląda atrakcyjnie. Dlatego, aby urozmaicić sprawę, możemy wykorzystać przykładowe dane dostępne przez WordPress i przesłać przykładowe strony, komentarze i posty.

Przejdź do jednostki motywu WordPress, strony testowej i kliknij repozytorium git, aby pobrać plik xml. Po pobraniu przejdź do pulpitu WordPress, w obszarze Narzędzia, kliknij Importuj > Uruchom Importer znajdujący się na dole WordPress, aby rozpocząć proces importowania.

Zawijanie!

Praktycznie stworzyliśmy nasz motyw potomny Genesis od podstaw. Pamiętaj, aby dodać komentarze tam, gdzie jest to potrzebne, ponieważ pomoże to Tobie lub innemu programiście w zrozumieniu kodu pod kątem przyszłych modyfikacji i debugowania. Przetestuj swój motyw na różnych rozmiarach ekranu, aby zapewnić jego responsywność, a także poszukaj możliwych błędów. Zaprojektuj atrakcyjny obraz miniatury dla swojego motywu potomnego.

Kod źródłowy: https://github.com/ibadrehman/custom

Wyzwanie

Po utworzeniu motywu potomnego poszliśmy dalej i stworzyliśmy kilka niestandardowych widżetów potomnych dla naszego motywu potomnego Genesis.

Tak wygląda nasz motyw potomny Genesis po dodaniu niestandardowych widżetów.

motyw z niestandardowymi widżetami potomnymi

Utwórz motyw potomny Genesis, postępując zgodnie z tymi dwoma artykułami i udostępnij swój produkt końcowy. Powodzenia!