Jak stworzyć wtyczkę widżetu WordPress?

Jeśli jesteś fanem WordPressa, prawdopodobnie znasz widżety. Widżety to te małe pola, które można dodać do paska bocznego lub innych obszarów motywu gotowych na widżety. Zwykle zawierają informacje, takie jak ostatnie posty na Twoim blogu, Twój kanał na Twitterze lub kalendarz. Ale czy wiesz, że możesz tworzyć własne widżety? To całkiem proste. W tym artykule pokażemy, jak stworzyć wtyczkę widżetu WordPress. Zaczniemy od utworzenia podstawowego pliku wtyczki, a następnie dodania klasy widżetu . Następnie zarejestrujemy nasz widżet, aby pojawił się w panelu administracyjnym WordPressa. Na koniec dodamy trochę kodu, aby wyświetlić nasz widżet na interfejsie naszej witryny. Zacznijmy!

Niedawno opracowałem wtyczkę o nazwie Freelancer Widgets Bundle. Kiedy zostałem zapytany, co powinienem napisać dla wtyczki, pomyślałem, że nadszedł czas, aby napisać ten post, ponieważ ludzie o to pytali. Kiedy instalujesz wtyczkę WordPress, musisz dodać do niej dodatkowy kod. Do tworzenia wtyczki potrzebny jest edytor, taki jak Coda (Mac) lub Dreamweaver (PC). Konstruktor to funkcja, która definiuje nazwę i główne argumenty widżetu; to jest przykład tego, jak to może wyglądać. Dokonując zmian w polach formularza, upewnij się, że używasz esc_attr(), ponieważ jest to zrobione ze względów bezpieczeństwa. Parametr „customize_selective_refresh” umożliwia odświeżenie widżetu w obszarze Wygląd, a także podczas jego edycji.

Innymi słowy, zmiany w widżecie nie muszą być odświeżane, aby pojawiły się na liście. Wszystkie znaczniki, z wyjątkiem tekstu podstawowego, są usuwane za pomocą WP_strip_all_tags. WP_kses_post_string() jest tą samą funkcją, co ciąg treści posta. Ta funkcja wygeneruje treść dla strony internetowej za pomocą funkcji widget(). Tę funkcję można dostosować, aby zawierała określony znacznik lub klasę. GitHub to idealne miejsce do przeglądania całego kodu.

Gdy chcesz dodać widżet do witryny, przejdź do strony, na której chcesz to zrobić i wklej kod przed zamknięciem tagu HTML „/body”. Konieczne jest umieszczenie kodu na każdej stronie internetowej, na której chcesz wyświetlić widżet. Sprawdź zaporę sieciową, aby sprawdzić, czy widżet sieciowy (klasyczny) jest włączony.

Oba są stworzeniami wizualnymi, ale oba mają różne cechy, takie jak widoczność i interakcja. Jeśli Twoja strona działa płynnie i poprawnie w tle, jest to wtyczka. Aby użytkownik mógł wchodzić z nim w interakcję na stronie, musi być on widoczny dla użytkownika.

Jak utworzyć niestandardową wtyczkę widżetu dla WordPress?

Aby utworzyć niestandardową wtyczkę widżetu dla WordPress, musisz utworzyć plik PHP z następującym kodem: /* Nazwa wtyczki: [Nazwa wtyczki] Opis: [Opis wtyczki] */ // Zarejestruj i załaduj widżet function [nazwa_wtyczki]_load_widget() { register_widget( '[nazwa_wtyczki]' ); } add_action( 'widgets_init', '[nazwa_wtyczki]_load_widget' ); // Tworzenie klasy widżetu [nazwa_wtyczki] extends WP_Widget { function __construct() { parent::__construct( // Podstawowy identyfikator widżetu '[nazwa_wtyczki]', // Nazwa widżetu pojawi się w interfejsie użytkownika __('[Nazwa wtyczki ]', '[name_of_plugin]'), // Widget description array( 'description' => __( '[Opis wtyczki]', '[name_of_plugin]' ), ) ); } // Tworzenie interfejsu widgetu // Tutaj odbywa się akcja public function widget( $args, $instance ) { $title = apply_filters( 'widget_title', $instance['title'] ); // argumenty przed i po widżecie są definiowane przez motywy echo $args['before_widget']; if (! empty( $title) ) echo $args['before_title'] . $tytuł . $args['after_title']; // Tutaj uruchamiasz kod i wyświetlasz wynik echo __( '[Nazwa wtyczki]', '[nazwa_wtyczki]' ); echo $args['after_widget']; } // Widget Backend public function form( $instance ) { if ( isset( $instance[ 'title' ] ) ) { $title = $instance[ 'title' ]; } else { $title = __( '[Nazwa wtyczki]', '[nazwa_wtyczki]' ); } // Formularz administratora widżetu ? > Kiedy użytkownicy WordPressa tworzą obszar widżetów, dodają do niego małe fragmenty treści. W zależności od obszaru widżetu, w którym jest zainstalowany, widżet może wyświetlać różne rodzaje informacji na wszystkich stronach lub może wyświetlać tylko niektóre informacje. Niektóre widżety są udostępniane domyślnie, podczas gdy inne są udostępniane za pomocą wtyczki lub motywu. Cztery wymienione powyżej metody należy dodać do swojej klasy, aby utworzyć podstawowy niestandardowy widżet. Musisz użyć funkcji register_widget(), aby zarejestrować widżet, aby móc z niego korzystać w panelu. Zanim przestudiujemy przykład przedstawiony w tym artykule, szybko omówimy cel każdej sekcji kodu. Jedną z metod używanych w klasie Custom_Widget jest metoda przypisywania znaków. Widget z identyfikatorem custom_widget utworzyliśmy za pomocą metody konstruktora przy użyciu metody __construct(). Używając metody register_widget(), nowy widżet jest tworzony po zarejestrowaniu istniejącego. Każdą z części otoczyliśmy instrukcjami if…*, aby zapewnić wyświetlanie tylko tych części, które są uwzględnione w opcjach widżetu. Metoda widget() zawierała funkcję nl2br(), która zapewnia prawidłowe wyświetlanie wszystkich tekstów wieloakapitowych. sanitize_text_field() eliminuje niepotrzebne spacje, tabulatory i podziały wierszy z argumentu. Ponadto wartość Tak jest ustawiona jako domyślna w polu wyboru, co wskazuje, że cel łącza jest ustawiony na _blank w dwóch poprzednich przypadkach. Należy określić tytuł, tekst, łącze pod tytułem oraz to, czy łącze powinno otwierać się w nowej karcie. Zapisz wybrane opcje, klikając przycisk Zapisz. Po wybraniu motywu domyślnego widżet wygeneruje inny wynik. W takim przypadku Twój widżet może wyglądać bardzo podobnie do pokazanego poniżej, jeśli użyjesz motywu Lekker WordPress.Jak utworzyć niestandardowy widżet obrazu w WordPress?Aby dodać obraz do paska bocznego WordPress, wybierz widżet „Obraz”. Możesz wprowadzić zmiany w swoim wyglądzie, przechodząc do Wygląd. Dodaj widżet „Obraz” do paska bocznego, jeśli masz stronę zawierającą widżet. Wtyczka niestandardowego widżetu Kredyt: octobercms.com Wtyczka niestandardowego widżetu to wtyczka, która umożliwia tworzenie własnego niestandardowego widżetu. Ta wtyczka jest świetna dla tych, którzy chcą stworzyć niestandardowy widżet na swojej stronie internetowej lub blogu. Dzięki tej wtyczce możesz łatwo utworzyć niestandardowy widżet bez konieczności samodzielnego kodowania. Aby zapewnić niestandardowy widżet, który może być używany z Qt Designer, musimy zapewnić samodzielną implementację, a także interfejs wtyczki. Widżet niestandardowy w tym przykładzie, podobnie jak jego odpowiednik z zegarem analogowym, nie ma żadnych niestandardowych sygnałów ani gniazd. Należy użyć makra Q_PLUGIN_METADATA(), aby upewnić się, że widget jest prawidłowo identyfikowany jako wtyczka przez eksportowanie z niego danych. Klasa AnalogClock może być używana jako niestandardowy widżet w polu widżetu i jest przykładem klasy samodzielnej. Klasa wtyczki dla klasy AnalogClock jest zawarta w Qt Designer. Konstruktor klasy QObject po prostu wywołuje konstruktor klasy bazowej QObject, który ustawia zainicjowaną zmienną na false. Funkcja isInitialized() sprawdza, czy wtyczka jest gotowa do użycia, pozwalając projektantowi Qt ją zidentyfikować. Funkcja createWidget() może generować instancje niestandardowego widżetu. Wtyczka widżetu będzie widoczna w nazwie grupy w sekcji wtyczki widżetu w Qt Designer. Podpowiedź i Co to jest? W polu widżetu możesz podać pomoc dotyczącą niestandardowego widżetu. Funkcja isContainer() sprawdza, czy widget powinien być używany jako kontener dla innych obrazów widgetów. Uniemożliwia to użytkownikowi tworzenie w nim widżetów. Niestandardowy widżet WordPress CodeCredit: www.hostpapa.in Niestandardowy widżet to świetny sposób na dodanie funkcjonalności do witryny WordPress. Podczas dodawania niestandardowego kodu widżetu do witryny należy pamiętać o kilku kwestiach. Najpierw musisz utworzyć plik o nazwie „widget.php” w katalogu twojego motywu. Następnie musisz dodać następujący kod do pliku widget.php: class Custom_Widget extends WP_Widget { function __construct() { parent::__construct( 'custom_widget', __('Custom Widget', 'text_domain'), array ( 'description' => __( 'Niestandardowy widżet dla Twojej witryny WordPress.', 'text_domain' ), ) ); } widżet funkcji publicznych( $args, $instance ) { $title = apply_filters( 'widget_title', $instance['title'] ); echo $args['before_widget']; if (! empty( $title) ) echo $args['before_title'] . $tytuł . $args['after_title']; echo __( 'Witaj świecie!', 'text_domain' ); echo $args['after_widget']; } public function form( $instance ) { if ( isset( $instance[ 'title' ] ) ) { $title = $instance[ 'title' ]; } else { $title = __( 'Nowy tytuł', 'text_domain' ); } ? > } aktualizacja funkcji publicznej( $nowa_instancja, $stara_instancja ) { $instance = array(); $instance['title'] = ( ! empty( $new_instance['title']Wordpress Dodaj widżet do szablonuDodanie widżetu do szablonu WordPress jest prostym procesem. Będziesz musiał uzyskać dostęp do plików WordPress za pośrednictwem konta hostingowego i edytować odpowiedni plik.W większości przypadków będzie to plik header.php.Poszukaj kodu kontrolującego obszar, w którym chcesz dodać widżet.Następnie skopiuj kod dla widżetu, który chcesz dodać i wklej go w odpowiednim w pliku. Zapisz plik i prześlij go na serwer. To wszystko! Widżet pojawi się teraz w witrynie WordPress.W WordPressie istnieje tag szablonu o nazwie the_widget(), który umożliwia dodanie widżetu bezpośrednio do pliki szablonów. Widżet można umieścić w pliku, który zawiera nazwę klasy widżetu, którego chcesz użyć i gdzie ma się pojawiać. Innymi słowy, jeśli chcesz wyświetlić listę ostatnich komentarzy, możesz po prostu napisać to: $instance dla każdego widżetu Używając wbudowanych funkcji, możesz dodać wiele swoich domyślnych ult WordPress widżety do plików szablonów, zamiast ich używać. Niestandardowe widżety można wstawiać w całym szablonie za pomocą metody the_widget(). Niestandardowe widżety, których można używać na innej platformie niż pasek boczny, są dostępne w wielu wtyczkach.Jak dodać widżet do mojego motywu WordPress?Odwiedź ekrany administracyjne WordPress, aby zobaczyć stronę Wygląd. Wybierz widżet, przeciągając go na określony pasek boczny lub klikając link Dodaj widżet (jeśli Twój motyw ma więcej niż jeden pasek boczny, wybierz docelowy pasek boczny). Jak wywołać widżet z szablonu strony WordPress? Pierwszym krokiem jest znalezienie i wstaw plik, w którym powinien pojawić się widżet. Drugim krokiem jest określenie, którego widżetu chcesz użyć. W tej sekcji omówimy domyślne nazwy klas widżetów WordPress: WP_Widget_Archives.Jak utworzyć niestandardowy widżet obrazu w WordPressAby utworzyć niestandardowy widżet obrazu w WordPressie, musisz najpierw utworzyć niestandardową wtyczkę lub motyw podrzędny. Gdy to zrobisz, możesz utworzyć nowy plik o nazwie „image-widget.php” w swojej wtyczce lub motywie podrzędnym. W tym pliku musisz dołączyć następujący kod: class WP_Widget_Custom_Image extends WP_Widget { function __construct() { $widget_ops = array( 'classname' => 'widget_custom_image', 'description' => __( 'Widżet, który pozwala aby przesłać niestandardowy obraz.', 'text_domain' ), ); parent::__construct( 'custom_image', __( 'Custom Image', 'text_domain' ), $widget_ops ); } widget funkcji( $args, $instance ) { echo $args['before_widget']; if ( ! empty( $instance['title'] ) ) { echo $args['before_title'] . apply_filters( 'widget_title', $instance['title'] ). $args['after_title']; } if ( ! empty( $instance['image'] ) ) { echo ”; } echo $args['after_widget']; } aktualizacja funkcji( $nowa_instancja, $stara_instancja ) { $instancja = $stara_instancja; $instance['title'] = sanitize_text_field( $nowa_instance['title'] ); $instance['image'] = esc_url_raw( $nowa_instance['image'] ); zwróć $instancję; } function form( $instance ) { $title = ! pusty( $instancja['tytuł'] ) ? $instance['title'] : __( 'Niestandardowy obraz', 'text_domain' ); $obraz = ! pusty( $instancja['obraz'] ) ? $instance['obraz'] : ”; ?Wtyczka Image Widget to prosta wtyczka, której można używać do dodawania widżetów graficznych do witryny za pomocą menedżera multimediów WordPress. Szablony wyjściowe widgetów często zawierają szablon domyślny, ale można to zmienić za pomocą plików w szablonie. W 3.2 został dodany również filtr sh_template_image_widget_php, pozwalający na nadpisanie domyślnego zachowania szablonu. Aby dowiedzieć się więcej o konkretnej instancji widżetu, musisz również dodać dwa argumenty $args i $instance. Możesz użyć tego w responsywnym projekcie, jeśli to zastąpisz. Jak mogę dodać suwak do losowych obrazów? Tak, masz taką możliwość. Zazwyczaj jest to obsługiwane bezpośrednio przez wyświetlanie paska bocznego wtyczki Image Widget; wyświetlanie paska bocznego musi być ustawione na konkretną stronę. Daj nam znać, jeśli masz jakieś pytania lub komentarze na tej stronie. Image Widget to projekt oprogramowania typu open source. Ta wtyczka została udostępniona publicznie przez różnych współtwórców. Jeśli chcesz dołączyć obraz, możesz dodać jedno pole, a jeśli chcesz dołączyć link, możesz dodać klasę. Poświęcisz na to około 15 minut, więc jest to opłacalna inwestycja.Jak utworzyć nowy widżet w WordPress?Przeciągnij widżet do odpowiedniego obszaru widżetu lub przeciągnij go z lewej strony strony w lewą stronę . Po kliknięciu widżetu, który chcesz dodać, zobaczysz listę sposobów, aby to zrobić. Aby dodać nowe widżety do istniejącego obszaru, kliknij przycisk Dodaj widżet.