Widżety pozwalają dodawać elementy niebędące treścią do paska bocznego lub dowolnego obszaru gotowego na widżety na Twojej stronie WordPress. Możesz ich używać do dodawania banerów, reklam, formularzy zapisu na newsletter i innych elementów do swojej witryny.
Możesz również stworzyć niestandardowy widżet, aby osadzić unikalne funkcje z osobistym akcentem, takie jak kanały mediów społecznościowych, najnowsze posty lub tagi HTML.
W WPBeginner używamy niestandardowych widżetów do wyświetlania różnych typów treści w pasku bocznym naszej strony internetowej. W tym artykule pokażemy, jak krok po kroku utworzyć niestandardowy widżet WordPress.
Uwaga: Ten samouczek jest przeznaczony dla użytkowników WordPressa typu „zrób to sam”, którzy uczą się tworzenia i kodowania w WordPressie.
Czym jest widżet WordPress?
Widżety WordPress zawierają fragmenty kodu, które można dodać do pasków bocznych lub obszarów gotowych na widżety na Twojej stronie internetowej.
Pomyśl o nich jak o modułach, których możesz użyć do dodania różnych elementów i funkcji do swojej witryny.
Domyślnie WordPress zawiera standardowy zestaw widżetów, których można używać z dowolnym motywem WordPress. Więcej szczegółów znajdziesz w naszym przewodniku dla początkujących, jak dodawać i używać widżetów w WordPress.
WordPress pozwala również programistom tworzyć własne niestandardowe widżety.
Wiele premium motywów WordPress i wtyczek zawiera własne niestandardowe widżety, które można dodać do swoich pasków bocznych.
Na przykład, możesz dodać formularz kontaktowy, niestandardowy formularz logowania, galerię zdjęć, formularz zapisu na listę e-mailową i wiele więcej do paska bocznego bez pisania kodu.
Mając to na uwadze, zobaczmy, jak łatwo możesz stworzyć własne niestandardowe widżety w WordPressie.
Zanim stworzysz niestandardowy widżet w WordPressie
Jeśli uczysz się kodowania w WordPress, będziesz potrzebować lokalnego środowiska programistycznego. Daje Ci to swobodę nauki i testowania rzeczy bez obawy, że Twoja witryna będzie na żywo.
Możesz zainstalować WordPress lokalnie na Macu za pomocą MAMP lub Windows za pomocą WAMP.
Jeśli masz już działającą stronę, możesz przenieść ją na lokalny serwer. Więcej informacji znajdziesz w naszym przewodniku jak przenieść działającą stronę WordPress na lokalny serwer.
Po tym jest kilka sposobów na dodanie kodu niestandardowego widżetu w WordPress.
W idealnej sytuacji możesz utworzyć wtyczkę specyficzną dla witryny i wkleić tam swój kod widżetu. Pozwala to na dodawanie kodu do WordPress, który nie jest zależny od Twojego motywu WordPress.
Możesz również wkleić kod do pliku functions.php swojego motywu. Będzie on jednak dostępny tylko wtedy, gdy aktywny będzie ten konkretny motyw.
Innym narzędziem, którego możesz użyć, jest wtyczka WPCode, która pozwala łatwo dodawać niestandardowy kod do Twojej witryny.
W tym samouczku stworzymy prosty widżet, który po prostu wita odwiedzających. Celem jest zapoznanie się z klasą widżetu WordPress.
Gotowi? Zacznijmy.
Tworzenie podstawowego widżetu WordPress
WordPress zawiera wbudowaną klasę widżetów WordPress. Każdy nowy widżet WordPress rozszerza klasę widżetów WordPress.
W podręczniku dla deweloperów WordPress wymieniono 19 metod, które można zastosować z klasą WP Widget.
Jednak na potrzeby tego tutorialu skupimy się na następujących metodach.
- __construct() : To jest część, w której tworzymy identyfikator widżetu, tytuł i opis.
- widżet: Tutaj definiujemy dane wyjściowe generowane przez widżet.
- formularz: Ta część kodu jest miejscem, w którym tworzymy formularz z opcjami widżetów dla backendu.
- aktualizacja: To jest część, w której zapisujemy opcje widżetu w bazie danych.
Aby utworzyć niestandardowy widżet, możesz skopiować i wkleić poniższy fragment kodu do swojego pliku functions.php lub w WPCode (zalecane):
<?php
// Creating the widget
class wpb_widget extends WP_Widget {
function __construct() {
parent::__construct(
// Base ID of your widget
'wpb_widget',
// Widget name will appear in UI
__( 'WPBeginner Widget', 'textdomain' ),
// Widget description
[
'description' => __( 'Sample widget based on WPBeginner Tutorial', 'textdomain' ),
]
);
}
// Creating widget front-end
public function widget( $args, $instance ) {
$title = apply_filters( 'widget_title', $instance['title'] );
// before and after widget arguments are defined by themes
echo $args['before_widget'];
if ( ! empty( $title ) ) {
echo $args['before_title'] . $title . $args['after_title'];
}
// This is where you run the code and display the output
echo __( 'Hello, World!', 'textdomain' );
echo $args['after_widget'];
}
// Widget Settings Form
public function form( $instance ) {
if ( isset( $instance['title'] ) ) {
$title = $instance['title'];
} else {
$title = __( 'New title', 'textdomain' );
}
// Widget admin form
?>
<p>
<label for="<?php echo $this->get_field_id( 'title' ); ?>">
<?php _e( 'Title:', 'textdomain' ); ?>
</label>
<input
class="widefat" id="<?php echo $this->get_field_id( 'title' ); ?>"
name="<?php echo $this->get_field_name( 'title' ); ?>"
type="text"
value="<?php echo esc_attr( $title ); ?>"
/>
</p>
<?php
}
// Updating widget replacing old instances with new
public function update( $new_instance, $old_instance ) {
$instance = array();
$instance['title'] = ( ! empty( $new_instance['title'] ) ) ? strip_tags( $new_instance['title'] ) : '';
return $instance;
}
// Class wpb_widget ends here
}
// Register and load the widget
function wpb_load_widget() {
register_widget( 'wpb_widget' );
}
add_action( 'widgets_init', 'wpb_load_widget' );
Najprostszym sposobem dodawania niestandardowego kodu do witryny WordPress jest użycie WPCode. Jest to najlepsza wtyczka do fragmentów kodu, która pomaga zarządzać i wstawiać fragmenty kodu na Twojej stronie bez ryzyka jej uszkodzenia.
Najpierw musisz zainstalować i aktywować wtyczkę WPCode na swojej stronie. Jeśli potrzebujesz pomocy, zapoznaj się z naszym przewodnikiem, jak zainstalować wtyczkę WordPress.
Po aktywacji przejdź do Fragmenty kodu » + Dodaj fragment z panelu administracyjnego WordPress. Stąd wybierz opcję „Dodaj własny kod (nowy fragment)”.
Następnie możesz wkleić niestandardowy kod widżetu w obszarze Podgląd kodu.
Musisz również kliknąć menu rozwijane „Typ kodu” i wybrać opcję „Fragment PHP”.
Następnie możesz przewinąć w dół i wybrać metodę wstawiania dla swojego kodu.
WPCode pozwala wybrać, gdzie kod ma być uruchamiany. W tym samouczku możesz użyć domyślnych opcji i uruchomić go wszędzie.
Po zakończeniu możesz przewinąć do góry, aby zapisać fragment.
Aby aktywować fragment, po prostu kliknij przełącznik na „Aktywny”.
Aby dowiedzieć się więcej, zapoznaj się z naszym przewodnikiem na temat jak dodać niestandardowy kod do witryny WordPress.
Po dodaniu kodu do WordPressa musisz przejść do strony Wygląd » Widżety w swoim panelu administracyjnym WordPressa.
Następnie kliknij ikonę „Plus” dodaj blok, wyszukaj „Widżet WPBeginner” i wybierz nowy widżet.
Ten widżet ma tylko jedno pole formularza do wypełnienia.
Możesz dodać swój tekst i kliknąć przycisk „Zaktualizuj”, aby zapisać zmiany.
Teraz możesz odwiedzić swoją stronę WordPress, aby zobaczyć niestandardowy widżet w akcji.
Oto przykład, jak to wygląda na naszej stronie demonstracyjnej.
Dodawanie niestandardowego widżetu w klasycznym edytorze WordPress
Jeśli używasz klasycznego edytora widżetów do dodawania nowych widżetów do swojej witryny, proces będzie podobny.
Na liście dostępnych widżetów pojawi się nowy widżet o nazwie „Widżet WPBeginner”. Musisz przeciągnąć i upuścić ten widżet do swojego paska bocznego.
Następnie wprowadź tytuł i kliknij „Zapisz”, aby zapisać ustawienia widżetu.
Twój nowy niestandardowy widżet będzie teraz aktywny na Twojej stronie internetowej.
Teraz przestudiujmy kod ponownie.
Najpierw zarejestrowaliśmy „wpb_widget” i załadowaliśmy nasz niestandardowy widżet. Następnie zdefiniowaliśmy, co ten widżet robi i jak wyświetlić jego zaplecze.
Na koniec zdefiniowaliśmy, jak obsługiwać zmiany dokonane w widżecie.
Teraz jest kilka rzeczy, o które możesz chcieć zapytać. Na przykład, jaki jest cel textdomain?
WordPress używa „gettext” do obsługi tłumaczeń i lokalizacji. Ten textdomain i _e informuje „gettext”, aby udostępnić ciąg znaków do tłumaczenia. Aby dowiedzieć się więcej, zapoznaj się z naszym przewodnikiem na temat jak znaleźć gotowe do tłumaczenia motywy WordPress.
Jeśli tworzysz niestandardowy widżet dla swojego motywu, możesz zastąpić textdomain domeną tekstową swojego motywu.
Alternatywnie możesz użyć wtyczki do tłumaczenia WordPress, aby łatwo tłumaczyć WordPress i tworzyć wielojęzyczną witrynę WordPress.
Bonus: Dodaj niestandardowe style do swoich widżetów WordPress
Po utworzeniu widżetu WordPress możesz również dodać do niego niestandardowe style. Może to poprawić wygląd Twojej witryny, zachować spójność i zwrócić uwagę na ważne informacje.
Aby to zrobić, odwiedź stronę Wygląd » Widżety i dodaj widżet, który chcesz dostosować. Zobaczysz teraz opcje zmiany jego kolorów i typografii w panelu bloków po prawej stronie.
Jednakże, jeśli widżet nie wyświetla tej opcji, możesz go dostosować, dodając klasy CSS po rozwinięciu zakładki „Zaawansowane”.
Teraz możesz dodać niestandardową klasę CSS do swojego motywu WordPress, która będzie docelować tę konkretną klasę CSS.
W tym celu przejdź do strony Wygląd » Dostosuj i przełącz się na zakładkę Dodatkowy CSS. Zobaczysz tutaj podgląd swojej witryny z polem do dodawania reguł CSS.
Możesz teraz używać niestandardowego CSS do dostosowywania wyglądu swojego widżetu. Szczegółowe informacje znajdziesz w naszym poradniku jak dodać niestandardowe style do widżetów WordPress.
Mamy nadzieję, że ten artykuł pomógł Ci dowiedzieć się, jak łatwo tworzyć niestandardowe widżety WordPress. Możesz również zapoznać się z naszym przewodnikiem na temat jak wyłączyć bloki widżetów w WordPress oraz naszym poradnikiem na temat jak usunąć nieaktywne widżety w WordPress.
Jeśli podobał Ci się ten artykuł, zasubskrybuj nasz kanał YouTube po samouczki wideo WordPress. Możesz nas również znaleźć na Twitterze i Facebooku.
Dan
Ciąg znaków „wpb_text_domain” nie został znaleziony w przykładowym kodzie. Zgaduję, że przykładowy kod został zaktualizowany, a treść artykułu nie?
Aby potwierdzić, czy „wpb_text_domain” to faktycznie „web_widget_domain” z przykładowego kodu?
Z góry dziękuję za wszelkie opinie.
Wsparcie WPBeginner
Dziękujemy za zwrócenie na to uwagi, zaktualizujemy ten artykuł i wyjaśnimy to lepiej i uczynimy to jasnym.
Admin
marwan
Cześć,
Czy mogę umieścić kod jako osobny plik class.php, a nie w functions.php
Karel Hanton
Dziękuję za świetny tutorial. Dodałem kod do mojego wtyczki testowej i działa idealnie zgodnie z opisem – widzę widżet na liście Wygląd » Widżety i mogę go dodać do paska bocznego.
Ale nie widzę nowego widżetu na liście edytora strony. Czy czegoś brakuje, czy potrzebna jest inna rejestracja lub ustawienia?
Dziękuję jeszcze raz za pomoc.
Aldo
Jest to teraz wyświetlane jako „Starszy widżet” w WordPress. Czy istnieje nowy sposób tworzenia widżetów?
JP
to jest świetne, prosty przykład kopiuj-wklej był dokładnie tym, czego szukałem. Dzięki!
Wsparcie WPBeginner
You’re welcome
Admin
Banu
Stworzyłem wtyczkę CRUD i muszę jej użyć na jednej stronie, czy możesz mi pomóc, jak użyć tej wtyczki na stronie?
Wsparcie WPBeginner
Zależałoby to od sposobu skonfigurowania wtyczki; aby mieć ją na jednej stronie, można by użyć krótkiego kodu do wyświetlania na froncie lub przyjrzeć się API opcji, jeśli chcesz wyświetlić ją po stronie administracyjnej witryny.
Admin
Kishan
Jak mogę utworzyć więcej niż 1 niestandardowy widżet?
A także, jak mogę ustawić inne pola, takie jak radio, pole wyboru, rozwijane, tekst w widżecie?
Wsparcie WPBeginner
Musiałbyś zastąpić wpb_widget tym, jak chcesz nazwać swój nowy widżet, a następnie kod zależałby od tego, co konkretnie chciałbyś dodać. Jeśli spojrzysz do repozytorium kodu WordPress, możesz zobaczyć dostępne różne kody.
Admin
Carmen
Witaj!
Obecnie tworzę wtyczkę i potrzebuję stworzyć widżet, który pozwoli użytkownikowi dodać określoną funkcjonalność do swojej strony.
Skopiowałem kod twojego widżetu do pliku i zapisałem go w katalogu mojej wtyczki. Użyłem add_action i do_action w głównym pliku mojej wtyczki, aby go załadować, ale nadal nie działa. Czy możesz mi pomóc?
Dziękuję!
Wsparcie WPBeginner
Niestety, zależałoby to w dużej mierze od sposobu konfiguracji wtyczki. Możesz chcieć upewnić się, że obie sekcje tego kodu są ładowane, aby widżet mógł zostać dodany i wyświetlony.
Admin
Maximilian K.
Krótkie pytanie, co jeśli chcę tworzyć widżety, w których mogę umieszczać inne widżety? Na przykład puste kolumny bootstrap 6-3-3, a w każdej kolumnie mogę umieszczać widżety, takie jak obraz, tekst, najnowsze posty itp.
Czy istnieje polecenie / słowo kluczowe, które sygnalizuje, że w tym widżecie jest miejsce na inne widżety...
ponieważ jestem trochę zdezorientowany moim własnym motywem i tym, jak działa WP... widzisz, jestem początkujący ^^
Umieściłem już ogólne informacje, takie jak tytuł strony, obszary widżetów w moim stopce, dzięki czemu mogę umieszczać tam menu, powiązane linki itp. Działało.
Ale teraz jestem zdezorientowany, jak mogę zrealizować moje treści w WordPressie tak, jak zaprojektowałem je wcześniej. Może jakieś słowa kluczowe pomogą mi dowiedzieć się więcej na ich temat.
Wsparcie WPBeginner
Wymagałoby to więcej dostosowań, niż omawiamy w tym artykule. Być może będziesz musiał dowiedzieć się, jak utworzyć boczny pasek dla kodu, który możesz użyć: https://www.wpbeginner.com/wp-themes/how-to-add-dynamic-widget-ready-sidebars-in-wordpress/
Admin
Lars
Świetny samouczek! Działał idealnie.
Wsparcie WPBeginner
Glad our tutorial could help
Admin
Watson Anikwai
Jak pobrać pole niestandardowego typu posta z bazy danych WordPress i użyć widżetu do wyświetlenia go na stronie głównej?
wika
Nie mogę dodać dwóch niestandardowych widżetów.. drugi widżet się nie pojawia....
Co mam zrobić???.. proszę o pomoc
Ahad Bhatti
Naprawdę zrozumiałe i pomocne. Dziękuję.
Belitza Gomez
Witam, chciałbym dowiedzieć się, gdzie mogę znaleźć w dostępnych widżetach „niestandardowe menu”. Nie pojawia się i nie udało mi się dodać strony do stopki za pomocą tego widżetu.
dziękuję za pomoc!!!!
Samdoxer
Cześć, jak mogę wyświetlić logo zamiast tekstu? Czy zastąpienie adresu URL logo tekstem wystarczy?
Dziękuję z góry.
Wsparcie WPBeginner
Proszę, sprawdź ustawienia swojego motywu lub odwiedź stronę Wygląd » Dostosuj w obszarze administracyjnym. Tam znajdziesz opcję przesłania obrazu logo.
Admin
Gary Foster
Co było pierwsze, widżet czy aplikacja?
Czy widżet musi być zarejestrowany, jeśli tak, to jak?
Jak najlepiej chronić swój pomysł na widżet lub aplikację?
Dzięki wszystkim
shelley
Te instrukcje doskonale sprawdziły się przy tworzeniu mojego niestandardowego widżetu. Nie mogę jednak dowiedzieć się, jak zmienić rozmiar czcionki na 60px. Udało mi się dodać CSS do opcji motywu Divi, który wyśrodkował tekst i dodał obramowanie linii. Ale jak zmienić styl czcionki, proszę? Dodanie „font-size:60px” nie działa. Chcę, aby czcionka była duża, jak nagłówek biegnący przez stronę. Dziękuję.
Ahmad Farhan
Very helpfull. tankyou
Eyad
Dziękuję bardzo za Twoje tutoriale
Luigi Briganti
Cześć! Mam nadzieję, że możesz mi pomóc.
Stworzyłem niestandardowy typ posta, który wyświetla harmonogram dla sklepu. Oczywiście, możesz tworzyć tyle harmonogramów, ile chcesz, ale moja potrzeba polega na wyświetleniu danego harmonogramu w bocznym pasku strony internetowej.
W tym celu stworzyłem widżet, który zapętla posty z rozkładem jazdy, pokazując tylko 1 (mianowicie pierwszy, ponieważ sortowałem w kolejności ASC). Jest to tymczasowe rozwiązanie, tylko po to, aby zobaczyć, czy widżet działa, a faktycznie działa.
Chciałbym po prostu pokazać w backendzie listę rozwijaną wszystkich postów należących do typu postu „timetable”, abym mógł wybrać ten, którego potrzebuję, kiedy go potrzebuję, i wyświetlić go na frontendzie. Jak mogę to zrobić?
Dziękuję, jeśli możesz/chcesz pomóc.
Anees Ijaz
Dzięki, stary, za oszczędzenie mojego czasu...
Kevin
Uwielbiam ten post, często bardzo mi pomógł! Dzięki!