[Jak] Dodać obszar widżetów do dowolnego motywu WordPress (2023)

Domyślnym motywem WordPress w 2014 roku był Dwadzieścia Piętnaście, szablon ze stałym paskiem bocznym po lewej stronie, który zmienia się w nagłówek w widoku mobilnym, minimalny obszar stopki, świetna typografia i ładnie wyróżniony obszar obrazu. Od tego czasu widzieliśmy wydanie TwentySixteen, TwentySeventeen, TwentyEighteen, TwentyNineteen i obecny defualt free theme Dwadzieścia Dwadzieścia.

Te motywy są niesamowite, przechodzą cały proces, aby zostać wybranym jako domyślny motyw WordPress, jednak możemy zrozumieć, że użytkownicy nadal chcą go dostosować i uczynić własnym. 

Ponieważ te motywy zazwyczaj oferują pewne ograniczenia, takie jak pojedynczy pasek boczny (który w WordPressie nazywa się obszarem gotowości na widżety), pokażemy Ci, jak dodać widżet do stopki lub jak dostosować kod dowolnego motywu, aby dodać więcej obszarów widżetów do temat. 

Dodanie obszaru widżetów do stopki TwentyFifteen to TwentyTwenty nie różni się od dodawania obszaru widżetów w większości motywów WordPress.

Jeśli chcesz zobaczyć inne motywy WordPress, zalecamy zapoznanie się z innymi popularnymi motywami, takimi jak Divi z Elegant Themes. Sprawdź naszą pełną recenzję tutaj.

Utwórz motyw potomny WordPress

Podczas dostosowywania plików szablonów motywu WordPress w celu utworzenia obszaru widżetów, dobrą praktyką jest utworzenie motyw dziecka.

Koncepcja motywu potomnego jest dość prosta — nie chcemy przerywać możliwości aktualizacji motywu do jakichkolwiek nowo wydanych wersji.

Podczas tworzenia dostosowań do motywu potomnego Twoje modyfikacje zostaną dodane do motywu potomnego, a nie do motywu oryginalnego. Gdy zaktualizowana wersja oryginalnego motywu zostanie opublikowana, będziesz mógł zaktualizować swoją kopię oryginalnego motywu i pozostawić nienaruszone zmiany w motywie podrzędnym.

Jeśli chcesz dowiedzieć się więcej porad i wskazówek związanych z WordPressem, odwiedź resztę sekcji na CollectiveRay.

1. Utwórz katalog i pliki motywów potomnych 

W pierwszym kroku utwórz folder wewnątrz wp-content> motywy teczka. Nazwij folder dwadzieścia piętnaście dzieci, dwadzieścia dwadzieścia dzieci. Ważne jest jednak, aby motyw potomny był zgodny z konwencją nazewnictwa ich rodzica.

Więc jeśli rodzic nazywa się dwadzieścia piętnaście, dziecko musi być nazwane dwadzieścia piętnaście-dziecko. Podobnie, jeśli motyw, który dostosowujesz, nazywa się dwadzieścia dwadzieścia, motyw potomny musi mieć nazwę tdwudziesty dwudziesty-dziecko.

Po utworzeniu motywu potomnego musisz 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 dla motywu potomnego, w którym możemy dodać określone wymagane funkcje.

Te dwa pliki znajdują się w folderze dwudziestu piętnastu podrzędnych lub odpowiednim folderze utworzonym dla motywu podrzędnego.

2. Dodaj plik dla obszaru widżetu WordPress (w stopce lub gdzie wolisz)

Ponieważ obszar widżetu ma zostać dodany do stopki motywu, musisz mieć plik z kodem stopki.

Najbezpieczniejszym sposobem zakodowania pliku szablonu WordPress jest rozpoczęcie od gotowego szablonu, a następnie dodanie tego, czego chcesz i/lub usunięcie tego, czego nie chcesz.

W takim przypadku weź footer.php z motywu Twenty Fifteen lub motywu Twenty Twenty lub innego motywu, który dostosowujesz, 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 Child
 Theme URI:    http://example.com/twenty-fifteen-child/
 Description:  Twenty Fifteen Child Theme
 Author:       John Doe
 Author URI:   http://example.com
 Template:     twentyfifteen
 Version:      1.0.0
 License:      GNU General Public License v2 or later
 License URI:  http://www.gnu.org/licenses/gpl-2.0.html
 Tags:         light, dark, two-columns, right-sidebar, responsive-layout, accessibility-ready
 Text Domain:  twentyfifteenchild
*/

Naprawdę ważna jest tutaj część szablon więc w powyższym przykładzie jest Szablon: dwadzieścia piętnaście. To instruuje WordPress o nazwie 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. są ważne: wszystko musi dokładnie odpowiadać nazwie folderu motywu nadrzędnego).

Następnie otwórz functions.php  i dodaj następujący fragment kodu.

Chociaż ten krok nie jest bezwzględnie obowiązkowy, jest wysoce zalecany, ponieważ w tym kodzie motyw potomny odziedziczy wygląd i zachowanie swojego rodzica.

Napiszmy więc funkcję, która łączy się z wp_enqueue_scripts() zaczep akcji. Wewnątrz funkcji ty kolejkować arkusz stylów motywu nadrzędnego za pomocą funkcja wp_enqueue_style(). 

Gwarantuje to, że motyw potomny dziedziczy style swojego rodzica, jednocześnie nadpisując własną regułę stylu style 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 w większości gotowy!

Uzyskaj dostęp do Motywy w Twojej instalacji WordPressa i powinieneś zobaczyć gotowy do użycia motyw Twenty Fifteen Child. Kliknij Aktywuj i odwiedź swoją witrynę. Powinien 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 przechodzi w functions.php. 

/** * Zarejestruj obszar widgetu 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' => __( 'Widgety stopki', 'dwadzieścia) -fifteen-child' ), 'id' => 'sidebar-2', 'description' => __( 'Dodaj widżety tutaj, aby pojawiły się 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 podłącza tę funkcję do widgets_init() zaczep akcji.

Następnie przejdźmy dalej i dodajmy nowy pasek boczny do stopki. otwarty 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 ma jakieś widżety, jeśli tak, wyświetla pasek boczny wewnątrz div z klasą "widget-area". 

Następną rzeczą, którą musisz zrobić, to przejść do panelu Widgety swojego zaplecza WordPress, zlokalizować pasek boczny Footer Widgets i dodać do niego kilka widżetów. Zapisz widżety podczas ich dodawania i sprawdź wynik.

Powyższe pokazuje kilka widżetów na pasku bocznym stopki Twenty Fifteen Child i widać, że tekst znajdował się zbyt blisko górnej części kontenera, a dolny margines widżetu był zbyt wysoki. Ten mały fragment w style.css znacznie poprawi wygląd. 

.stopka witryny .widget { margin: 0; wypełnienie: 10% 20% 0; } .site-footer .widget:last-child { margin-bottom: 10%; }	

Oto kolejny przykład dodawania kolejnego paska bocznego:

if ( is_active_sidebar( 'pasek boczny-2' ) 
  || is_active_sidebar( 'sidebar-3' ) ) : 
?> 
  "> 
     
      if ( is_active_sidebar( 'sidebar-2' ) ) { ?> 
         
           
         <?php } 
      if ( is_active_sidebar( 'sidebar-3' ) ) { ?> 
         
           
         
    

Kod, którego musisz użyć, będzie zależał od motywu, którego używasz w rzeczywistości.

Twój widget stopki WordPress jest gotowy!

W tym poście zobaczyliśmy, jak dodać nowy obszar widżetów do stopki motywu Twenty Fifteen WordPress. 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.

O autorze

Autor: Dawid AttarStrona internetowa: https://www.linkedin.com/in/dattard/E-mail: Ten adres pocztowy jest chroniony przed spamowaniem. W przeglądarce musi być włączona obsługa JavaScript, żeby go zobaczyć.

David pracuje w branży online / cyfrowej lub w jej pobliżu od 18 lat. Ma ogromne doświadczenie w branży oprogramowania i projektowania stron internetowych przy użyciu WordPress, Joomla i otaczających je nisz. Jako konsultant ds. Cyfrowych koncentruje się na pomaganiu firmom w uzyskaniu przewagi konkurencyjnej za pomocą połączenia ich strony internetowej i dostępnych obecnie platform cyfrowych.