Podstawy Wordpress

Widgety w WordPress

5 stycznia 2017 • By

Widgety w WordPress

Czym są widgety w WordPress i w jaki sposób mogą nam pomóc usystematyzować przejrzystość bloga? Dzisiaj znajdziecie kolejny wpis o podstawach blogowania w WordPress.

Jest to kolejny  wpis z cyklu edukacyjnego „Jak założyć bloga w WordPress”. Składa on się z następujących artykułów: 

  1. Jak założyć bloga 
  2. Jak zainstalować WordPress
  3. Szablon w WordPress darmowy czy płatny?
  4. Jak stworzyć menu i strony w WordPress
  5. Jak stworzyć wpisy i kategorie w WordPress
  6. Widgety w WordPress <<< jesteś tutaj
  7. Przydatne ustawienia w WordPress
  8. Przydatne wtyczki w WordPress
  9. Przydatne narzędzia dla blogera

Widgety w WordPress: podstawy

Widgety są narzędziem pomagającym nam osiągnąć określone działanie na blogu w określonym miejscu (po ludzku pisząc, są to narzędzia takie jak: dodatkowe ikonki social media, miejsce na reklamę, wyszukiwarka tekstu na blogu). Na początku przedstawię Wam strukturę panelu w którym można dodawać widgety. Poniżej zamieściłem grafikę, jak wygląda to w moim przypadku (zaznaczam, że zakupiłem już szablon. Więc sporo rzeczy może nie być w darmowej wersji twojego szablonu):

(kliknij na obrazek, aby otworzyć w nowym oknie)

Widgety wordpress1

  1. Strzałka numer jeden pokazuje nam gdzie dokładnie musimy kliknąć, żeby otworzyć nasz panel (rozwijamy menu wygląd po czym naciskamy przycisk widgety)
  2. Ramka numer dwa pokazuje nam, jakie mamy dostępne widgety. Przykładowo niektóre z nich pozwalają nam dodawać obrazki, banery, ikony social media, wyszukiwarkę, ostatnie komentarze, kalendarz itd. W zależności od naszej potrzeby możemy znaleźć bardzo wiele. Moim zdaniem będą nas interesować przede wszystkim takie, które umożliwią dodanie zdjęcia i tekstu. A przede wszystkim hiperłącze/przekierowanie do innego postu lub strony. Mój szablon dysponuje już wbudowanymi widegtami, które umożliwiają mi takie opcje (Sondos Baner, Sondos Video & Audio). W przypadku darmowego szablonu, będziemy musieli wybrać widget „Tekst” w którym musimy zamieścić kod HTML, żeby wyświetlił się nasz obrazek. z dodatkami. Poniżej pokaże wam jak w łatwy sposób to uczynić bez znajomości języka HTML.
  3. Ramka numer trzy obejmuje swoim zasięgiem kilka pól:
    3.1 Home Sidebar– miejsce gdzie będą wyświetlane nasze widgety w panelu bocznym na stronie głównej
    3.2 Pages Sidebar– miejsce gdzie będą wyświetlane nasze widgety w panelu bocznym na utworzonych stronach
    3.3 Post Sidebar– miejsce gdzie będą wyświetlane nasze widgety w panelu bocznym na utworzonych postach
    3.4 Footer Widgets 1 – miejsce gdzie będą wyświetlane nasze widgety w panelu bocznym na stopce numer 1
    3.5 Footer Widgets 2 – miejsce gdzie będą wyświetlane nasze widgety w panelu bocznym na stopce numer 2
    3.6 Footer Widgets 3 – miejsce gdzie będą wyświetlane nasze widgety w panelu bocznym na stopce numer 3
    Jeżeli nie wiecie
    gdzie dokładnie znajdują się wymienione części strony, możecie zerknąć na moje poprzednie wpisy o tym jaki wybrać szablon, jak dodać stronę i jak dodać wpisy i kategorie.

Widgety w WordPress: przykładowy wygląd głównej strony

Tak wygląda moja przykładowa strona główna. Patrząc od góry możecie zauważyć, że użyłem:

  1. Sondos About (widget wyświetlający informacje o mnie, które zamieszcze w nim)
  2. MailChimp newsletter (widget służący do zapisu na newsletter)
  3. Sondos Social Media (ikonki social media, wbudowane do szablonu)
  4. Chmura tagów (tagi, dzięki którym możemy sortować wybraną przez nas treść)

Pamiętajcie, że wszystkie z tych rzeczy możemy zrobić w darmowym szablonie nie ma potrzeby kupowania.

Wordpress główna strona z opcją fragmentująca

Widgety w WordPress: jak użyć widget „tekst” w łatwy sposób

Poniżej zaprezentuje wam jak możemy w łatwy sposób zmodyfikować widget „tekst” bez znajomości języka HTML. Odbędzie się to w kilku krokach

  1. Musimy utworzyć testowy wpis
  2. Dodać naszą grafikę (w ramach potrzeby hiperłącze do grafiki) + tekst (tak jakbyśmy tworzyli dla siebie wpis, tylko w tym wypadku będziemy przykładowo tworzyć ikonke. Zobaczcie jak wygląda ona na obrazku poniżej)
  3. Skopiować zawartość z zakładki „tekstowy” w naszym wpisie (kod html)
  4. Wkleić skopiowaną zawartość do widgetu „tekst” i zapisać (wklejamy kod html do widgetu)
  5. Jak nie za bardzo rozumiecie to poniżej macie więcej tekst opisowego

(kliknij w obrazek, aby otworzyć w  nowym oknie)

kopiowanie-kodu-html-z-nowego-wpisu1

Po utworzeniu wpisu wstawiamy grafikę za pomocą przycisku „dodaj medium” (tak jak pokazuje strzałka nr 1). Później wstawiamy nasz tekst i grafikę (u mnie jest to książka + tekst). Pamiętajmy żebyśmy byli na wizualnej zakładce jak poniżej w punkcie nr 2. Krokiem numer trzy jest przestawienie zakładki na tekstową (strzałka nr. 3). I końcowym krokiem jest skopiowanie naszego całego tekstu do widgetu tekst i zapisujemy zmiany.

Dodawanie naszego kodu html do widgetu tekst

Teraz dodajemy do naszej strony widget „Tekst”. W pierwszym kroku wpisujemy określony przez nas tytuł. Następnie wklejamy nasz skopiowany tekst i zapisujemy. Tak jak pokazałem na grafice poniżej:

widget-tekstowy-dla-html1

Finalnie nasza grafika na głównej stronie wygląda w następujący sposób:

wyglad-widgetu-darmowego

Oczywiście powinniśmy dokładnie dobrać tekst do ramki naszego szablonu. Żeby wszystko prezentowało się w ładny sposób. Edycja zależy już tylko od naszego zmysłu wizualnego.

Mam nadzieje, że pomogłem. Jeżeli nadal masz wątpliwości z wyżej wymienionymi zagadnieniami to daj znać w komentarzu. Postaram się pomóc!

Zapisz się na newsletter bo dzięki temu będziesz na bieżąco z nowymi artykułami! Po potwierdzeniu subskrypcji otrzymasz dostęp do wartościowych narzędzi w excel.

Na koniec standardowo Apel Michała:

Zgodnie ze sławnym powiedzeniem Billa Clintona: „Gospodarka Głupcze mam do Was ogromny apel:

  • Rozmawiajcie ze znajomymi na tematy ważne dla Polski, szczególnie te związane z gospodarką. Śledźcie wypowiedzi wszystkich polityków (tutaj są linki na FB). Pytajcie co i jak konkretnie mają zamiar zrobić w kwestiach gospodarczych i finansów publicznych? Jakie dokładnie będzie to miało przełożenie na stronę przychodową i kosztową? Czy oni wiedzą o czym w ogóle mówią? Nie dajcie się zwieść sloganom i byle jakim odpowiedziom bo slogany nic nie zmienią!
  • Jeżeli jesteś dziennikarzem czy blogerem, pisz jak najwięcej na tematy gospodarcze! Merytoryczna dyskusja w tym zakresie, to klucz do sukcesu naszego kraju, mocnego wzrostu wynagrodzeń w Polsce i powrotu kilku mln osób z emigracji oraz poprawy sytuacji finansów publicznych! Zgodnie z moim artykułem i poniższym wykresem: W matni: krach polskiej gospodarki w ciągu kilkunastu lat? Podatki + wyjazdy = bankructwo państwa i ZUS

wynagrodzenia-a-pkb

Źródło: powyższy artykuł, obliczenia własne dla roku 2012 na podstawie GUS, wordbank.org, forsal.pl