Domyślnym motywem WordPressa w 2014 r. był Dwadzieścia Piętnaście, szablon ze stałym paskiem bocznym po lewej stronie, który w widoku mobilnym zmienia się w nagłówek, minimalistyczny obszar stopki, świetna typografia i ładny obszar wyróżnionego obrazu. Od tego czasu widzieliśmy wydanie TwentySixteen, TwentySeventeen, TwentyEighteen, TwentyNineteen i obecnego domyślnego darmowego motywu DwadzieściaDwadzieścia.
Tego typu motywy są niesamowite. Przechodzą przez cały proces, zanim zostaną wybrane jako domyślny motyw WordPress. Rozumiemy jednak, że użytkownicy nadal chcą je dostosowywać i dopasowywać do swoich potrzeb.
Ponieważ te motywy zazwyczaj oferują pewne ograniczenia, takie jak pojedynczy pasek boczny (w WordPressie nazywany obszarem gotowym na widżety), pokażemy Ci, jak dodać widżet do stopki lub jak dostosować kod dowolnego motywu, aby dodać do niego więcej obszarów widżetów.
Dodanie obszaru widżetów do stopki TwentyFifteen do TwentyTwenty niczym nie różni się od dodawania obszaru widżetów w większości motywów WordPress.
Jeśli interesują Cię inne motywy WordPress, zalecamy zapoznanie się z popularnymi motywami, np. Divi od Elegant Themes. Sprawdź naszą pełną recenzję tutaj.
{automatycznie}
Utwórz motyw potomny WordPress
Podczas dostosowywania plików szablonu motywu WordPress w celu utworzenia obszaru widżetów dobrą praktyką jest utworzenie motyw dziecka.
Koncepcja motywu potomnego jest dość prosta — nie chcemy pozbawiać Cię możliwości uaktualnienia motywu do nowo wydanych wersji.
Podczas tworzenia dostosowań do motywu potomnego Twoje modyfikacje zostaną dodane do motywu potomnego, a nie do oryginalnego motywu. Gdy pojawi się zaktualizowana wersja oryginalnego motywu, będziesz mógł zaktualizować swoją kopię oryginalnego motywu i pozostawić swoje zmiany nienaruszone w motywie potomnym.
Jeśli chcesz poznać więcej wskazówek i trików związanych z WordPressem, odwiedź resztę sekcji CollectiveRay.
1. Utwórz katalog i pliki motywu potomnego
Jako pierwszy krok utwórz folder w wp-content> motywy folder. Nazwij folder twentyfifteen-child, twentytwenty-child. Ważne jest jednak, aby motyw potomny stosował się do konwencji nazewnictwa motywu nadrzędnego.
Jeśli więc rodzic jest nazywany dwadzieścia piętnaście, dziecko musi być nazwane dwadzieścia piętnaście dzieciPodobnie, jeśli motyw, który dostosowujesz, nazywa się dwadzieściadwadzieścia, motyw potomny musi zostać wywołanydwadzieścia dwadzieścia dzieci.
Po utworzeniu motywu potomnego należy utworzyć dwa dodatkowe pliki.
Plik, który będzie używany do wprowadzania zmian w stylach CSS, powinien nazywać się style.css. Potrzebujemy również functions.php plik motywu potomnego, w którym możemy dodać pewne wymagane funkcje.
Te dwa pliki należy umieścić w folderze twentyfifteen-child lub odpowiednim folderze utworzonym dla motywu potomnego.
2. Dodaj plik dla obszaru widżetu WordPress (w stopce lub w innym preferowanym miejscu)
Ponieważ obszar widżetu ma zostać dodany do stopki motywu, potrzebny jest plik z kodem stopki.
Najbezpieczniejszym sposobem na zakodowanie pliku szablonu WordPress jest rozpoczęcie od gotowego szablonu, a następnie dodanie do niego tego, czego chcesz, i/lub usunięcie tego, czego nie chcesz.
W tym przypadku weź footer.php z motywu Twenty Fifteen, lub motywu Twenty Twenty lub innego motywu, który chcesz dostosować, i wklej go do motywu potomnego.
3. Dodaj kod do plików motywu potomnego, aby utworzyć widżet
W tej chwili mamy tylko puste pliki, więc motyw potomny nie może nic zrobić.
Abyśmy mogli wprowadzać zmiany, działający motyw potomny wymaga kilku komentarzy na górze style.css. otwarty style.css w swoim ulubionym edytorze kodu i dodaj ten fragment kodu.
/*Theme Name: Twenty Fifteen ChildTheme URI: http://example.com/twenty-fifteen-child/Description: Twenty Fifteen Child ThemeAuthor: John DoeAuthor URI: http://example.comTemplate: twentyfifteenVersion: 1.0.0License: GNU General Public License v2 or laterLicense URI: http://www.gnu.org/licenses/gpl-2.0.htmlTags: light, dark, two-columns, right-sidebar, responsive-layout, accessibility-readyText Domain: twentyfifteenchild*/
Naprawdę ważna część tutaj jest w szablon więc w powyższym przykładzie jest to Szablon: dwadzieściapiętnaście. To jest instrukcja dla WordPressa dotycząca nazwy motywu nadrzędnego.
Upewnij się, że nazwa jest dokładnie taka sama, jak nazwa folderu motywu nadrzędnego (wielkość liter, spacje, myślniki, podkreślenia itp. mają znaczenie: wszystko musi dokładnie odpowiadać nazwie folderu motywu nadrzędnego).
Następnie otwórz functions.php i dodaj następujący fragment kodu.
Choć ten krok nie jest obowiązkowy, zdecydowanie go zalecamy, ponieważ dzięki temu kodowi motyw potomny odziedziczy wygląd i styl motywu nadrzędnego.
Napiszmy więc funkcję, która łączy się z hak akcji wp_enqueue_scripts(). Wewnątrz funkcji, którą kolejkować arkusz stylów motywu nadrzędnego za pomocą funkcja wp_enqueue_style().
Dzięki temu motyw potomny dziedziczy style swojego motywu nadrzędnego, jednocześnie zastępując wszelkie określone reguły stylów we własnym motywie. style.css plik.
<?php
//Import parent styles the right way and add other stylesheets if necessary.
function twenty_fifteen_child_styles() {
wp_enqueue_style( 'parent-style', get_template_directory_uri().'/style.css' );
}
add_action( 'wp_enqueue_scripts', 'twenty_fifteen_child_styles' );
Twój motyw potomny jest już prawie gotowy!
Uzyskaj dostęp do Motywy panel w instalacji WordPress i powinieneś zobaczyć swój motyw Twenty Fifteen Child gotowy do użycia. Kliknij Aktywuj i odwiedź swoją witrynę. Powinna wyglądać dokładnie tak samo jak motyw nadrzędny.
Dodawanie obszaru widżetów
Teraz musimy dodać kod, aby zdefiniować obszar widżetu stopki. Oto fragment, który wchodzi do functions.php.
/** * Zarejestruj obszar widżetów stopki. * * @since Twenty Fifteen Child 1.0 * * @link https://codex.wordpress.org/Function_Reference/register_sidebar */ function twentyfifteen_child_widgets_init() { register_sidebar( array( 'name' => __( 'Widżety stopki', 'twenty-fifteen-child' ), 'id' => 'sidebar-2', 'description' => __( 'Dodaj tutaj widżety, które będą wyświetlane w obszarze stopki.', 'twenty-fifteen-child' ), 'before_widget' => ' ', 'after_widget' => ' ', 'before_title' => ' ', 'after_title' => ' ', ) ); } add_action( 'widgets_init', 'twentyfifteen_child_widgets_init' );
Powyższy kod dodaje funkcję, która rejestruje pasek boczny o identyfikatorze sidebar-2 (motyw Twenty Fifteen ma już pasek boczny o identyfikatorze sidebar-1), a następnie łączy tę funkcję z hak akcji widgets_init().
Następnie przejdźmy dalej i dodajmy nowy pasek boczny do stopki. Otwórz footer.php w edytorze kodu i wprowadź ten fragment tuż pod tym wierszem kodu: <footer id="colophon" class="site-footer" role="contentinfo">.
Powyższy kod najpierw sprawdza, czy sidebar-2 zawiera jakieś widżety, jeśli tak, wyświetla pasek boczny wewnątrz elementu div o klasie „widget-area”.
Następną rzeczą, którą musisz zrobić, jest przejście do panelu Widgets w zapleczu WordPress, znalezienie paska bocznego Footer Widgets i dodanie do niego kilku widżetów. Zapisz widżety, gdy je dodajesz, i sprawdź wynik.
Powyżej pokazano kilka widżetów na pasku bocznym stopki Twenty Fifteen Child i widać, że tekst był zbyt blisko górnej części kontenera, a dolny margines widżetów był zbyt wysoki. Ten mały fragment w style.css znacznie poprawi wygląd.
.site-footer .widget { margines: 0; wypełnienie: 10% 20% 0; } .site-footer .widget:last-child { margines-dolny: 10%; }
Oto kolejny przykład dodania kolejnego paska bocznego:
jeśli ( is_active_sidebar( 'sidebar-2' )
|| is_active_sidebar( 'sidebar-3' ) ) :
?>
">
jeśli ( is_active_sidebar( 'sidebar-2' ) ) { ?>
<?php }
jeśli ( is_active_sidebar( 'sidebar-3' ) ) { ?>
Kod, którego będziesz musiał użyć, będzie zależał od motywu, którego faktycznie używasz.
Twój widget stopki WordPress jest gotowy!
W tym poście pokazaliśmy, jak dodać nowy obszar widżetów do stopki motywu WordPress Twenty Fifteen. Chociaż umieściliśmy obszar widżetów w stopce motywu, możesz użyć tej logiki, aby dodać obszary widżetów praktycznie wszędzie w motywie, wykonując podobne kroki.
