Jak stworzyć niestandardowy widżet w WordPress za pomocą Genesis Child Theme

Opublikowany: 2018-02-15

Obserwuj @Cloudways

Genesis to jeden z najczęściej używanych frameworków WordPress do stylizacji układów stron internetowych. Jest popularny wśród programistów ze względu na architekturę motywu rodzic-dziecko. Umożliwia im dostosowywanie motywów podrzędnych zgodnie z ich wymaganiami bez wpływu na podstawową funkcjonalność motywu nadrzędnego.

W tym artykule pokażę, jak łatwo jest dostosować motyw potomny Genesis, tworząc 4 obszary widżetów w motywie Genesis Sample, który jest dostarczany bezpłatnie z Genesis Framework.

1. Konfigurowanie środowiska programistycznego

Aby zainstalować Genesis Framework, musisz mieć instalację WordPress, lokalnie lub na serwerze. Zakładam, że masz już zainstalowany WordPress na swoim serwerze, a jeśli nie, uruchom WordPressa za pomocą Cloudways Platform.

Teraz pobierz kopię Genesis Framework i przykładowego motywu ze StudioPress i aktywuj framework na swojej stronie WordPress.

Uwaga: W celu dostosowania motywu Genesis używam Sublime Text 3 jako mojego edytora tekstu. Możesz jednak wybrać dowolny inny edytor tekstu.

2. Dostosowanie motywu potomnego

Otwórz szablon Sample Genesis w edytorze tekstu i utwórz nowy plik front-page.php w katalogu głównym .

Teraz otwórz front-page.php i dodaj następujący fragment.

 <?php

geneza();

Spowoduje to zainicjowanie Genesis Framework.

wysublimowany edytor tekstu

Przykładowy motyw nie jest dostarczany z front-page.php , dlatego muszę jawnie utworzyć tę stronę, aby zarejestrować nasze obszary widżetów.

Planowanie niestandardowego widżetu Genesis

Niestandardowe obszary widżetów

Zacznę dodawać widżety od modyfikacji pliku function.php motywu, ale zanim zacznę pisać kod, pozwól mi wyjaśnić logikę back-endu.

Tutaj deklaruję funkcję, która przyjmuje tablicę parametrów:

id – do identyfikacji naszego kodu.
nazwa – to zobaczymy w naszym WordPress Dashboard.
opis – pojawi się również w panelu WordPressa.

Uwaga: „id” i „nazwa” funkcji powinny być unikalne.

Teraz otwórz function.php i dodaj następujące fragmenty kodu na końcu pliku.

Dla widżetu suwaka

 genesis_register_sidebar( tablica (
           'id' => 'pierwsza strona-1',
           'name' => __( 'Widżet suwaka strony głównej', 'przykład-genezy' ),
           'description' => __( 'To jest widżet, który trafia na pierwszą stronę.', 'genesis-sample' ),
) );

Dla widżetu treści 1

 genesis_register_sidebar( tablica (
   'name' => __( 'Treść strony głównej po lewej stronie', 'przykład-genezy' ),
   'id' => 'treść-1',
   'description' => __( 'Góra lewa strona główna', 'przykład-genezy' ),
 ) );

Dla widżetu treści 2

 genesis_register_sidebar( tablica (
   'name' => __( 'Treść strony głównej w środku', 'przykład-genezy' ),
   'id' => 'treść-2',
   'description' => __( 'Górny środek domu', 'przykład-genezy' ),
 ) );

Dla widżetu treści 3

 genesis_register_sidebar( tablica (
   'name' => __( 'Treść główna po prawej stronie', 'przykład-genezy' ),
   'id' => 'treść-3',
   'description' => __( 'Góra prawa strona główna', 'przykład-genezy' ),
 ) );

Jak widać poniżej, z powodzeniem stworzyłem 3 różne widżety. Teraz przejdźmy dalej i prześlij dostosowany motyw do pulpitu WordPress.

Pulpit nawigacyjny GenesCustom Widget

Pamiętaj, że widżety można zobaczyć w zakładce Widżety. Jednak ich aktywacja nie będzie miała żadnego wpływu na front-end naszego motywu. To dlatego, że nie dodałem znaczników, aby wyświetlić te widżety w naszym pliku front-page.php .

Aby dodać znaczniki do wyświetlania widżetów, deklaruję funkcję niestandardową w pliku front-page.php . W tej funkcji wywołuję widżet z jego „id”, który został wcześniej utworzony w pliku function.php wraz z pewnym znacznikiem HTML.

Chociaż dodanie tej funkcji nadal nic nie da, ponieważ nie dołączyliśmy jeszcze tej funkcji do żadnej akcji.

W tym celu deklaruję akcję, która zawiera hak 'genesis-meta' iw tym wywołuję funkcję 'my_homepage_setup' . W tej funkcji sprawdzam, czy obszar widżetów jest aktywny, czy nie. Jeśli tak, muszę podłączyć ten widżet do określonej lokalizacji, a następnie wywołać tę funkcję widżetu, aby wyświetlić znacznik widżetu.

Teraz dodam następujący fragment kodu w pliku front-page.php .

Widżet suwaka

 add_action( 'geneza_meta', 'my_homepage_setup' );

funkcja my_homepage_setup() {

     if ( is_active_sidebar( 'front-page-1' ) ) {
            //* Dodaj widżet suwaka
           add_action( 'genesis_after_header', 'display_front_page_1_widget' );
     }
}

// Dodaj znacznik, aby wyświetlić widżety suwaka.

funkcja display_front_page_1_widget() {
     genesis_widget_area( 'pierwsza strona-1', tablica(
           'before' => '<div class="front-page-1-widget"><div class="wrap">',
           'po' => '</div></div>',
     ) );
}

Widżety treści (1, 2 i 3)

 add_action( 'genesis_before_content', 'ng_home_page_widgets' );

//* Dodaj widżety domowe na miejscu

funkcja ng_home_page_widgets() {
           if ( is_front_page('') )
           genesis_widget_area ('treść-1', tablica(
                'before' => '<div class="jedna trzecia pierwsza hometopcol toplefthome">',
                'po' => '</div>',));
           if ( is_front_page('') )
           genesis_widget_area ('treść-2', tablica(
                'before' => '<div class="one-third hometopcol topmiddlehome">',
                'po' => '</div>',));
           if ( is_front_page('') )
           genesis_widget_area ('treść-3', tablica(
                'before' => '<div class="one-third hometopcol toprighthome">',
                'po' => '</div>',));
           }

Wreszcie trochę stylów CSS w twoim pliku style.css

Dodaję CSS do obszarów widżetów stylu. Możesz jednak stylizować w dowolny sposób.

Dla uproszczenia definiuję jedynie rozmiar i wypełnienie widżetów treści: kolor obramowania i tła dla kontenera strony.

 .pierwszy {margines-lewy:0px;}

.site-container {tło: #fff;}
.site-inner {padding-top:0px;}

treść główna {
           kolor:#7e7467;
           rozmiar czcionki: 16px;
           wysokość linii: 1,3;
           box-shadow:1px 2px 5px 0px rgba (0, 0, 0, 1);
           margines górny: 25px;
           pozycja: względna;}

.textwidget {dopełnienie: 12%;wyrównanie tekstu: do środka;}

.hometopcol {
     górny margines: 0px;
     wysokość:280px;
     obramowanie: 4px stałe rgb(255,69,0);}

.tytul widzeta {
           kolor:#c4421b;
           dopełnienie: 15px 0px 0px 15px;
           border-bottom: 4px solid rgba (162, 152, 135, 1);
           margines-dolny: 10px;
           transformacja tekstu: brak;
           rozmiar czcionki: 16px;}

.widgettitle:po {
           zadowolony: " ";
           pozycja: bezwzględna;
           góra: 43px;
           lewy: 5px;
           prawo: 5px;
           obramowanie: 1px solid rgba(162, 152, 135, 1);}

Wróćmy na stronę WordPressa i zobaczmy zmiany. Dla Slider Widget będę używał Smart Slider 3. Możesz użyć dowolnego widżetu slidera. W przypadku widżetów treści użyję po prostu tekstu.

Lista niestandardowych widżetów Genesis

Ostateczny wygląd

Na końcu tego artykułu jestem w stanie stworzyć 4 niestandardowe widżety dla motywu potomnego Genesis Sample. Domyślnie motyw Genesis nie zawiera żadnego widżetu nagłówka, ale teraz mam własny, niestandardowy widżet, który można wykorzystać jako suwak lub wyświetlić dowolną inną informację. Pozostałe 3 widżety treści można wykorzystać do wyróżnienia produktów lub usług lub dowolnej innej funkcji.

Po aktywowaniu wszystkich widżetów strona główna powinna wyglądać mniej więcej tak:

Streszczenie

Na początku tego artykułu wiedzieliśmy tylko, jak używać motywu Genesis WordPress jako przykładowego motywu potomnego, ale w miarę postępów dowiedzieliśmy się, jak tworzyć niestandardowe obszary widżetów w motywie WordPress Genesis Sample i jak umieszczać je w projekcie strony głównej.

Jestem pewien, że ten artykuł dał ci wystarczającą pewność, aby samodzielnie dostosować lub stworzyć własny motyw potomny Genesis. W celu uzyskania najlepszych praktyk zaleca się sprawdzenie oficjalnej dokumentacji Genesis i WordPress.