Kody do html: Jak dodać bez pluginu odnośnik i obrazki do paska bocznego w WordPress

Autor:

W wielu miejscach na moim blogu przeczytasz o tym, że nie polecam instalowania zbyt wielu wtyczek.

Dzisiaj więc krótki wpis na temat tego jak szybko i łatwo bez pomocy jakichkolwiek wtyczek wstawić dodatkowe linki i obrazki do paska bocznego. W tym zakresie potrzebujemy kody do html: kod html na obrazek i linki.

Obrazki
Aby osiągnąć taki efekt, jak w moim pasku bocznym, w odniesieniu do mojego zdjęcia:

Potrzebny jest krótki kod html na obrazek. Może on przybrać następującą postać:

<a href="http://www.evive.pl/omnie/" target="_self"><img title="Przeczytaj więcej o Justynie Bizdra..." img class="aligncenter frame size-full wp-image-14" img src="http://www.evive.pl/images/JustynaBizdra.jpg" alt="Więcej o Justynie Bizdra..."/></a>

Kod ten zawiera wszystkie niezbędne elementy zarówno z pozycji wyglądu zdjęcia, jego tytułu, wyśrodkowania i lekkiego obramowania, jak i z zakresu optymalizacji zdjęcia. Ten ostatni element to tekst alternatywny. Ze zdjęciem jest również połączony link prowadzący do podstrony bloga i posiada on atrybut otwierania się w nowym oknie oraz domyślny atrybut dofollow. Jeżeli chcesz nadać linkowanej przez ciebie stronie atrybut nofollow, to wstawiasz kod rel=”nofollow” zaraz po target=’_self’.

Następnie taki kod wstawiasz do widgetu tekstu w – Wygląd – Widgety

Odnośniki
Wstawianie odnośników jest jeszcze łatwiejsze. Oczywiście dotyczy to wstawiania linku w widgecie tekstu, a nie w formie odnośników za pomocą blogroll.

Kod html linku, który potrzebujesz:

<a title="Przeczytaj więcej o…." rel="nofollow" href="http://www.xyz.pl" target="_blank">Przeczytaj więcej o tym rozwiązaniu.</a>

Kod ten również zawiera niezbędne elementy dotyczące atrybutu nofollow i otwierania się strony w nowym oknie oraz w zakresie tytułu linku wyświetlającego się po najechaniu myszką na odnośnik.

Wstawiasz go do widgetu tekstu.

A jakie ty stosujesz rozwiązania w tym zakresie? A może stosujesz wtyczki?

Komentarze

16 odpowiedzi na “Kody do html: Jak dodać bez pluginu odnośnik i obrazki do paska bocznego w WordPress”

28 czerwca 2011

Bartłomiej Jakubowski

Ja dodaje grafikę zupełnie tak jak Ty. Ale pewnie są jakieś wtyczki do „ułatwiania tej czynności” tylko po co nam tyle wtyczek?

Odpowiedz
1. 29 czerwca 2011
  
  Justyna
  
  @Bartłomiej, no właśnie. Ale w sumie myślę, że wstawianie kodu za pomocą wtyczki czy ręcznie (mając wzór kodu pod ręką), zajęłoby podobną ilość czasu, bo to jest takie proste 😉
  
  Odpowiedz
29 czerwca 2011

Przemek

Tak czy inaczej, nie jest to takie trudne 😀

Odpowiedz
15 lipca 2011

Tomasz

W sumie, zastanawiam się nad tym jak bardzo to szkodzi czy też pomaga, z jednej strony wtyczki na pewno bardziej obciążają serwery ale jeżeli mówimy o blogach postawionych np. na blogspot to myślę, że bez różnicy.

Ja korzystam tak i tak. Na własnych stronach, wstawiam linki, obrazki w podobny sposób do Twojego, natomiast na blogspot korzystam z wtyczek.

Odpowiedz
15 lipca 2011

Awicca

Ja w z pozycji wordpress, tj. głównego edytora dla postów, wstawiam zdjęcie, albo link, potem klikam w zakładkę w górnym prawym rogu HTML. Tym sposobem otrzymuję zamieszczony wcześniej obrazek lub zdjęcie w formie skryptu, w formie do bezpośredniego wklejenia w miejsce paska bocznego wideogadżetów ( tekst) To samo robię z linkiem.

Odpowiedz
22 lipca 2011

Anna

Na bocznym pasku, w obszarze widgety,robię tak, jak napisałaś w poście.

Odpowiedz
6 sierpnia 2011

Inwestor giełdowy

Wydaje mi się że jednak osoby nieznające się na php i html nie powinny ruszać szablonów bloga. W przypadku takich osób bezpieczniej będzie zainstalować kolejna sprawdzona wtyczkę lub zlecić to profesjonalnej firmie. Koszta zrobienia takiego linka to ok 50 zł, a mamy gwarancję że nic się nie zepsuje.

Odpowiedz
9 grudnia 2011

gsmowiec

Jeśli można zrobić coś łatwo bez wtyczki, to jak najbardziej lepiej z tego skorzystać, a nie zaraz sięgać po gotowce, przez które strona robi się ciężka.

@Inwestor giełdowy, sory, ale trochę mnie rozbawiłeś:))) Naprawdę przy sposobie przedstawionym w tym artykule nie potrzeba programisty.

@Tomasz, nie prawda, że ilość stosowanie wtyczek w serwisach na darmowych platformach jest bez różnicy. Przecież nie chodzi tutaj tylko o obciążanie serwera.

Odpowiedz
12 lutego 2012

Łukasz Przybysz

Dziękuję, bardzo mi pomogłaś 🙂

Odpowiedz
27 lutego 2012

S.O.Zdrojewski

Przydatny artykuł oraz komentarze.
Dziękuje za pomoc

Odpowiedz
5 marca 2012

Paweł

ja zrobiłem coś takiego i nie działa
i nie wiem gdzie jest błąd

Odpowiedz
17 stycznia 2013

GabiElla

Dziękuję bardzo za pomoc 🙂 jedyny problem w tym, że wszystko wyświetla się w jednym oknie ale jet ok 🙂

Odpowiedz
20 marca 2014

Majka

Dzięki! super! to samo tyczy się np stopki 🙂 3 sekundy a na kodach się nie znam w ogóle!

Odpowiedz
4 grudnia 2014

Piotrek

wiem, że nie powinno się tak komentować, ale muszę to napisać: świetny wpis. Też nie lubię niepotrzebnie obciążać serwera wtyczkami czymś, co można niedużym nakładem zrobić ręcznie.

Odpowiedz
27 stycznia 2015

charmante

A ja z tego nic nie zrozumiałam, bo się na tym nie znam. Muszę wstawić obrazek przekierowujący do strony anie mam bladego pojęcia jak to zrobić.

Odpowiedz
6 września 2016

Bartek

A jak wstawić odnośnik w zdjęciu do kotwicy na tej samej stronie?

Odpowiedz