Trusted WordPress tutorials, when you need them most.
Beginner’s Guide to WordPress
Puchar WPB
25 Million+
Websites using our plugins
16+
Years of WordPress experience
3000+
WordPress tutorials
by experts

Jak używać edytora wizualnego do tworzenia widżetów w WordPress?

Za pomocą odpowiedniego edytora wizualnego można tworzyć własne widżety z funkcjami odnośników, obrazków, tekstu i nie tylko. Następnie możesz dodać te widżety do różnych obszarów twojego motywu i wyświetlać je w całej witrynie internetowej WordPress.

W WPBeginner stworzyliśmy wiele widżetów do różnych celów na naszych własnych witrynach. Podczas gdy niektóre z widżetów zostały opracowane we własnym zakresie, istnieje inny sposób, w jaki można zrobić to samo bez dotykania ani jednej linii kodu.

Przetestowaliśmy na przykład wtyczkę Widgets Option i stwierdziliśmy, że jest to najlepsza opcja dla wszystkich rodzajów witryn internetowych. Z drugiej strony, do tworzenia widżetów można również użyć najnowszego, pełnego edytora witryn w WordPress.

W tym artykule pokażemy, jak używać edytora wizualnego do tworzenia widżetów w WordPress.

How to use visual editor to create widgets in WordPress

Dlaczego warto używać edytora wizualnego do tworzenia widżetów w WordPress?

Widżety umożliwiają dodawanie bogatych treści poza główną stroną i obszarem wpisów. Każdy motyw WordPress jest inny, ale zazwyczaj można dodawać widżety do obszarów takich jak stopka, nagłówek i panel boczny.

Wiele witryn internetowych korzysta z tych obszarów, aby wyświetlić sekcję informacji, wyświetlić najpopularniejsze wpisy, dodać formularz zapisu do newslettera e-mail i nie tylko.

WordPress umożliwia dodawanie szerokiej gamy bloków do dowolnego obszaru gotowego na widżet, a wiele wtyczek WordPress dodaje również własne bloki.

Na przykład, jeśli używasz Smash Balloon Twitter Feed, możesz osadzać najnowsze tweety w dowolnym obszarze gotowym do widżetów za pomocą bloku Twitter Feed wtyczki.

An example of a custom block provided by a WordPress plugin

Czasami jednak możesz chcieć utworzyć własny widżet, który pokaże bogatą treść multimedialną twoim klientom. Na przykład, możesz przesłać swoje zdjęcie autorskie, a następnie użyć go do utworzenia widżetu biogramu autora, wraz z odnośnikami do różnych profili w mediach społecznościowych.

W związku z tym zobaczmy, jak można użyć edytora wizualnego do tworzenia własnych widżetów w WordPress. Po prostu skorzystaj z poniższych odnośników, aby przejść do metody odpowiedniej dla twojego motywu:

Metoda 1: Korzystanie z wtyczki Widgets Options (działa ze wszystkimi motywami WordPress)

Najprostszym sposobem na stworzenie własnego widżetu jest użycie wtyczki Widget Options. Dodaje ona wiele dodatkowych ustawień do standardowego wizualnego edytora widżetów WordPress, w tym możliwość wyświetlania różnych widżetów w zależności od roli użytkownika, ukrywania widżetów WordPress na urządzeniach mobilnych i nie tylko.

Dodaje również widżet tekstowy, który można konfigurować za pomocą własnych odnośników, obrazków, formatowania i innych elementów. Pozwala to na stworzenie własnego widżetu bez konieczności pisania jakiegokolwiek kodu.

Najpierw należy zainstalować i włączyć wtyczkę Widget Options. Aby uzyskać więcej informacji, zobacz nasz przewodnik krok po kroku, jak zainstalować wtyczkę WordPress.

Po włączaniu, przejdź do strony Wygląd ” Widżety w twoim kokpicie WordPress.

The Widget Options settings screen

Zobaczysz teraz listę wszystkich obszarów gotowych na widżety w twoim motywie WordPress. Dostępne opcje mogą się różnić w zależności od twojego motywu.

Zobaczysz również wszystkie widżety, które możesz dodać do swojej witryny. W tym przewodniku użyjemy widżetu Tekst, więc po prostu przeciągnij go i upuść w dowolnym obszarze gotowym na widżet.

How to use the visual editor to create widgets in WordPress

Zobaczysz teraz małe wyskakujące okienko.

To wyskakujące okienko jest zasadniczo mini-edytorem strony lub wpisu, więc powinno wyglądać znajomo.

Creating a custom widget using a visual editor

Na początek można wpisać rodzaj tytułu, który pojawi się nad widżetem.

Następnie można wpisywać rodzaj tekstu bezpośrednio w małym edytorze, dodawać odnoś niki i obrazki, zmieniać formatowanie, dodawać wypunktowania i listy numerowane i nie tylko.

A custom WordPress widget

Można również pokazywać lub ukrywać widżety na określonych stronach WordPress i dodawać do nich własne style.

Po zakończeniu konfiguracji widżetu kliknij odnośnik „Gotowe”, aby zapisać jego ustawienia.

Teraz, jeśli użytkownik przejdzie na twoją witrynę internetową, zobaczy nowy widżet rich-text na żywo.

An example of a custom author bio widget, created using a free WordPress plugin

Jeśli wolisz, możesz zbudować własny widżet wizualnie za pomocą konfiguratora WordPress.

Wystarczy przejść do Wygląd ” Widżety, ale tym razem kliknąć „Zarządzaj z podglądem na żywo”.

Creating a custom widget using the WordPress visual editor

Spowoduje to otwarcie konfiguratora z już wybranymi ustawieniami widżetu.

Możesz teraz kliknąć obszar, w którym chcesz dodać własny widżet.

Create a custom widget using the WordPress Customizer

Następnie kliknij „Dodaj widżet”, co otworzy panel pokazujący wszystkie różne widżety.

Po prostu znajdź „Tekst” i kliknij go, aby dodać go do twojej witryny internetowej.

Adding a custom text widget to a WordPress blog

Spowoduje to otwarcie małego edytora, w którym można dodawać tekst, odnośniki, multimedia i inne elementy.

Podczas wprowadzania zmian w edytorze podgląd na żywo będzie aktualizowany automatycznie.

Adding a custom text widget to WordPress

Gdy będziesz zadowolony z wyglądu widżetu, kliknij przycisk „Opublikuj”, aby uruchomić go na twoim blogu lub witrynie internetowej WordPress.

Jeśli nie możesz znaleźć konfiguratora motywu w swoim kokpicie WordPress, zapoznaj się z naszym przewodnikiem na temat poprawki brakującego konfiguratora motywu w panelu administracyjnym WordPress.

Metoda 2: Korzystanie z edytora całej witryny (działa z włączonymi motywami WordPress)

Jeśli korzystasz z motywu WordPress z włączoną obsługą bloków, możesz dodawać bloki do dowolnego obszaru obsługującego widżety za pomocą edytora na całej witrynie.

W ten sposób można tworzyć własne widżety, rozmieszczając standardowe bloki WordPressa w obszarze gotowym na widżety, takim jak panel boczny. Nie trzeba też instalować osobnej wtyczki WordPress.

Jest to również sposób na dodawanie widżetów do obszarów, których nie można edytować za pomocą standardowego edytora widżetów WordPress lub konfiguratora. Na przykład, możesz dodać widżety do szablonu twojej strony 404.

Aby rozpocząć, przejdź do Wygląd ” Edytor w kokpicie WordPress.

Opening the full-site editor (FSE) in WordPress

Domyślnie pełny edytor witryny wyświetla szablon główny twojego motywu, ale możesz dodawać widżety i bloki do dowolnego obszaru.

Aby zobaczyć wszystkie dostępne opcje, wystarczy wybrać opcję „Szablony” lub „Fragmenty szablonu”.

Choosing a block-enabled template or template part

Możesz teraz kliknąć szablon lub fragment szablonu, który chcesz edytować.

WordPress wyświetli teraz podgląd projektu. Aby przejść dalej i edytować ten szablon, kliknij małą ikonkę ołówka.

Editing the footer template in WordPress using the full-site editor (FSE)

Po wykonaniu tej czynności kliknij niebieską ikonkę „+”, a następnie znajdź pierwszy blok, którego chcesz użyć we własnym widżecie.

Możesz użyć dowolnej kombinacji bloków, ale jeśli planujesz użyć obrazka i tekstu, zalecamy rozpoczęcie od bloku Media & Text.

Pozwala to na łatwe ułożenie obrazka obok tekstu w ładnym układzie. Mając to na uwadze, blok Media & Text jest idealny do tworzenia pola informacyjnego autora, jak widać na poniższym obrazku.

The Media & Text WordPress block

Po wybraniu bloku, którego chcesz użyć, po prostu przeciągnij go i upuść w obszarze gotowym na widżet, takim jak panel boczny lub stopka.

Edytor pełnej witryny zapewnia dostęp do pełnego zestawu narzędzi i ustawień WordPress. Oznacza to, że możesz dodać przycisk wezwania do działania, tekst, odnośniki, obrazki i inne treści do szerszego zakresu bloków.

Creating a custom widget using the full-site editor (FSE)

Mając to na uwadze, powinieneś być w stanie stworzyć dokładnie taki widżet, o jakim myślałeś. Po prostu dodaj więcej bloków i treści do obszaru gotowego widżetu, aż będziesz zadowolony z jego wyglądu.

Aby uzyskać więcej pomysłów na wykorzystanie obszarów gotowych na widżety w twoim motywie, zapoznaj się z naszą listą kontrolną rzeczy do dodania do stopki na twojej witrynie WordPress.

Gdy jesteś zadowolony z wprowadzonych zmian, kliknij „Zapisz”.

Publishing custom widgets in WordPress using FSE

Teraz, jeśli przejdziesz na swoją witrynę internetową WordPress, zobaczysz nowy konfigurator widżetu na żywo.

Mamy nadzieję, że ten artykuł pomógł ci dowiedzieć się, jak łatwo korzystać z wizualnego edytora widżetów WordPress. Możesz również zapoznać się z naszym przewodnikiem po najlepszych kreatorach stron typu „przeciągnij i upuść ” oraz jak stworzyć stronę docelową za pomocą WordPressa.

If you liked this article, then please subscribe to our YouTube Channel for WordPress video tutorials. You can also find us on Twitter and Facebook.

Ujawnienie: Nasze treści są wspierane przez czytelników. Oznacza to, że jeśli klikniesz na niektóre z naszych linków, możemy otrzymać prowizję. Zobacz jak WPBeginner jest finansowany, dlaczego to ma znaczenie i jak możesz nas wspierać. Oto nasz proces redakcyjny.

Avatar

Editorial Staff at WPBeginner is a team of WordPress experts led by Syed Balkhi with over 16 years of experience in WordPress, Web Hosting, eCommerce, SEO, and Marketing. Started in 2009, WPBeginner is now the largest free WordPress resource site in the industry and is often referred to as the Wikipedia for WordPress.

Najlepszy zestaw narzędzi WordPress

Uzyskaj BEZPŁATNY dostęp do naszego zestawu narzędzi - zbiór produktów i zasobów związanych z WordPressem, które każdy profesjonalista powinien mieć!

Reader Interactions

8 komentarzyZostaw odpowiedź

  1. Max

    Thanks for this.

    This is particularly useful for certain premium theme developers like StudioPress. The entire theme home page is built on Widgets. So this technique would work really well.

  2. Hidayat Mundana

    How can so I can add footer widgets in the other just below the footer ( footer widget should Fullwidth )
    Is there a plugin that can be used ?

    • WPBeginner Support

      Most themes have columns defined for footer widgets like three or four after that new widgets are placed below. If this is not the case with your theme, then you may need to define a new widget area.

      Administrator

  3. Your Real Name

    Andor and WPBeginner, thanks so much for these tips. I’ve often seen widgets that looked great and figured that I’d have to know how to code to do something similar. With these tips (don’t know whether I’l use the plugin or Andor’s tip) I now know how to create some nice widgets without coding.

    Thanks!
    Martin

  4. Karen

    Awesome!!! You guys always give me the best info at right, just when I need it, time!! xx

  5. Andor Nagy

    Hi,
    Nice tutorial, but there’s a much easier way to do this. You simply make the look in the post editor, then you choose the text tab instead of the visual, and copy the html code into a text widget. And it requires no plugin. :P

    Regards,
    Andor Nagy

    • WPBeginner Support

      Yes Andor you are right this would work. But it is basically for users who are developing for clients. Now if you told the clients that you can use visual editor in posts it would confuse them. This plugin provides a user interface with different labeling to do exactly what you suggested above.

      Administrator

Zostaw odpowiedź

Dziękujemy za pozostawienie komentarza. Pamiętaj, że wszystkie komentarze są moderowane zgodnie z naszymi polityka komentarzy, a Twój adres e-mail NIE zostanie opublikowany. NIE używaj słów kluczowych w polu nazwy. Przeprowadźmy osobistą i konstruktywną rozmowę.