Własny widget na WordPressie – tutorial

Używanie gotowych szablonów do zarządzania treścią na WordPressie jest bardzo pomocne. Szczególnie dla tych, które nie potrafią samodzielnie zbudować strony internetowej. Implementując gotową skórkę na blogu używamy wcześniej przygotowanych wzorów, które nie zawsze spełniają nasze wymagania. Niektóre elementy da się jednak modyfikować. Oczywiście mowa o widgecie. Jak zatem zrobić widget z własnym tekstem i grafiką?

 
 
 

Potrzeba matką wynalazków

 
Korzystając z gotowego szablonu na WordPressie zauważyłam, że nie wszystkie elementy na blogu wyglądają tak jakbyśmy tego chcieli. Mnie gotowy widget social media, z obecnie używanego szablonu niestety nie przypadł do gustu. Postanowiłam zatem zrobić go sama. W tym poście podzielę się z Wami tym, jak można w łatwy sposób dodać własny tekst oraz grafikę z odnośnikiem na swoją stronę.
 

 

Widget tekstowy 

Pierwszą rzeczą, jaką musicie wykonać jest dodanie widgetu tekstowego w dowolnie wybrane przez Was miejsce, np. w pasku bocznym.
 
 
 własny widget wordpress
 

 

Modyfikowanie treści widgetu

Choć gotowy szablon narzuca nam wygląd tekstu, to w widgecie tekstowym sami możemy go modyfikować. Aby to zrobić będziemy posługiwać się językiem HTML. Bez obaw, nie trzeba być informatykiem aby samodzielnie dopasować tekst do swoich potrzeb. Dodanie kodu z tekstem jest bardzo proste. Trzeba jednak zapoznać się z podstawowymi znacznikami edycji tekstu, które znajdują się w poniżej.

 

<br> nowa linia </br>
<b> Pogrubienie </b>
<i> Kursywa </i>
<u> Podkreślenie </u>
<s> Przekreślenie </s>
<strong> Wyszczególniony tekst </strong>
<center> Tekst, który ma być wyśrodkowany </center>
 
<font size="n"> Wielkość czcionki </font>
<font color="red"> Określenie koloru tekstu </font>
<font face="Arial"> Rodzaj czcionki </font>
 
 
Wybrane przeze mnie znaczniki to najczęściej używane formuły do formatowania tekstu w języku HTML. Jeśli jakiejś funkcji nie ma na liście, spokojnie możecie ją odnaleźć w internecie i zaimplementować ją do swojego kodu.

 

Dodawanie grafiki do widgetu

Dodanie grafiki do widgetu jest nieco bardziej złożone, jednak dla osób używających WordPressa od jakiegoś czasu nie powinno być skomplikowane. Pierwszą czynnością, którą należy wykonać jest oczywiście przygotowanie grafiki. Następnie dodajemy wybrany przez siebie obraz do Biblioteki mediów WordPress. Z tego miejsca kopiuję także Adres URL grafiki, który będzie mi potrzeby w dalszym procesie tworzenia własnego widgetu. 
 
 

 

 
biblioteka-mediow-wordpress-press-yourself
 
 

 

Obraz w widgecie implementujemy do widgetu tak samo jak w przypadku formatowania tekstu – za pomocą języka HTML. Do osiągnięcia tego celu wykorzystujemy znaczniki określające położenie obrazu w systemie WordPress.

 

 

<img src=" http://www.press-yourself.com.pl/wp-content/uploads/2016/05/press-yourself-google-plus.png/>
 

 

Do znacznika informującego o źródle możemy dodać także poniższe określenia, które umożliwiają dodanie opisu alternatywnego czy modyfikację wielkości obrazu.

 

tittle="Znajdź mnie na Google" - tytuł obrazu
alt="konto Google" - opis alternatywny
height="20" - wysokość obrazu
width="20" - szerokość obrazu
 

 

 
Znaczniki dodajemy bezpośrednio za źródłem obrazu, przed znakiem „>”
 
Jeśli chcemy aby po kliknięciu naszej grafiki, użytkownik został przeniesiony do konkretnej witryny dodajemy poniższą formułę:
 

 

<a href="http://www.press-yourself.com.pl/">
 

 

Dodatkową opcją jest także używanie określenia, które powoduje otwieranie odnośnika na nowej zakładce przeglądarki. Podobnie jak w przypadku opisu, dodajemy je bezpośrednio na końcu źródła.
 
 

 

TARGET="_blank"
 

 

 
Całość tekstu wpisanego w widget powinna zostać objęta znacznikami <p></p>, które informują o rozpoczęciu i zakończeniu akapitu. Podczas tworzenia widgetu z własną grafiką przydatna może być także funkcja określająca marginesy grafiki, które w HTML-u zapisane są w sposób następujący:

 

 
<span style="margin:0 15px 0 0;">&nbsp;</span>
 
 
 

Własny widget na WordPressie – podsumowanie

Dobrze, zatem czas abyśmy wszystkie elementy widgetu poskładali w jedną całość. 

 

PRZYKŁADOWA STRUKTURA TEKSTU W JĘZYKU HTML ZAMIESZCZONA W WIDGECIE:

 

 
własny widget na wordpressie
 
 
 

 

EFEKT KOŃCOWY NA BLOGU W WORDPRESSIE: 

 
 
widget html wordpress
 
Mam nadzieję, że wskazówki dotyczące tworzenia własnego widgetu z tekstem i grafiką będą dla Was pomocne. Jak Wam podoba się efekt końcowy i co sądzicie o tworzeniu takich widgetów? Dajcie znać w komentarzu! 
 
 
 
 
  • Próbuję przejść z wp com na org i na razie walczę z wyborem motywu. Jak już wybiorę, to pewnie twoje wskazówki przydadzą się i 1000 innych, bo nie wiem, czy ogarnę wszystko:)

    • na pewno dasz radę, grunt to iść do przodu i się nie zrażać gdy coś sprawia trudność:)

  • Genialny poradnik! Jak będę robić wtyczkę to jeszcze tu zajrzę :-)

  • Tutorial sobie zapisuje, bo czesto mnie nachodzi na zmiany na blogu :)

    • o tak, ja też lubię cały czas coś ulepszać :) mam nadzieję, że się przyda!

  • Nini K

    super, mega pomocne zapisuję :)