Kody do html: Jak dodać bez pluginu odnośnik i obrazki do paska bocznego w WordPress
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ć:
- Następnie taki kod wstawiasz do widgetu tekstu w – Wygląd – Widgety
<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’.
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:
- Wstawiasz go do widgetu tekstu.
<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.
A jakie ty stosujesz rozwiązania w tym zakresie? A może stosujesz wtyczki?
Bartłomiej Jakubowski
28 czerwca 2011, 6:19 pmJa dodaje grafikę zupełnie tak jak Ty. Ale pewnie są jakieś wtyczki do „ułatwiania tej czynności” tylko po co nam tyle wtyczek?
Justyna
29 czerwca 2011, 2:12 pm@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 😉
Przemek
29 czerwca 2011, 2:19 pmTak czy inaczej, nie jest to takie trudne 😀
Tomasz
15 lipca 2011, 1:03 amW 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.
Awicca
15 lipca 2011, 4:16 pmJa 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.
Anna
22 lipca 2011, 12:37 amNa bocznym pasku, w obszarze widgety,robię tak, jak napisałaś w poście.
Inwestor giełdowy
6 sierpnia 2011, 11:55 pmWydaje 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.
gsmowiec
9 grudnia 2011, 12:12 amJeś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.
gsmowiec recently posted..Jak łatwo obniżyć koszty roamingu?
Łukasz Przybysz
12 lutego 2012, 8:11 pmDziękuję, bardzo mi pomogłaś 🙂
Łukasz Przybysz recently posted..A co to jest ten F.O.C.U.S.?
S.O.Zdrojewski
27 lutego 2012, 6:04 pmPrzydatny artykuł oraz komentarze.
Dziękuje za pomoc
Paweł
5 marca 2012, 5:43 pmja zrobiłem coś takiego i nie działa
i nie wiem gdzie jest błąd
GabiElla
17 stycznia 2013, 7:43 pmDziękuję bardzo za pomoc 🙂 jedyny problem w tym, że wszystko wyświetla się w jednym oknie ale jet ok 🙂
Majka
20 marca 2014, 4:23 pmDzięki! super! to samo tyczy się np stopki 🙂 3 sekundy a na kodach się nie znam w ogóle!
Majka recently posted..Asteya & Aicha – sesja zdjęciowa
Piotrek
4 grudnia 2014, 6:32 pmwiem, ż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.
Piotrek recently posted..Dlaczego rekuperator wysusza powietrze?
charmante
27 stycznia 2015, 1:43 amA 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ć.
Bartek
6 września 2016, 1:20 amA jak wstawić odnośnik w zdjęciu do kotwicy na tej samej stronie?