Jak dodać odnośnik w treści w edytorze wizualnym WordPressa?

  • Poziom trudności:

Dodawanie odnośnika jest chyba jedną z częściej używanych funkcji w edytorze WordPressa. W tym mikrokursie chciałbym powiedzieć dlaczego dodawanie linków jest takie ważne, jak linkować/odlinkować zdjęcia i kiedy wykorzystywać otwieranie w nowym oknie, a kiedy deklarować, żeby odnośniki otwierały się w tym samym oknie.

Linkowanie zdjęcia do zewnętrznej strony albo do innej podstrony w ramach Twojego serwisu jest banalnie proste:

dodawanie-linka

Jak pewnie zauważyłeś podałem dwa różne sposoby dodawania odnośnika. Pierwszy to podanie dokładnej ścieżki do pliku, drugi polega na wybraniu ostatnio dodanych/wyszukiwanych stron bądź wpisów i zalinkowanie w ten sposób do nich w treści.

Jest jeszcze prostszy sposób. Od wersji 4.2 WordPressa wystarczy skopiować sobie wcześniej adres, zaznaczyć tekst, który ma być linkiem, a następnie wkleić adres odnośnika (Ctrl+V). Wygląda to w następujący sposób:

prostsze-dodawanie-linka

Rozwiązanie prostsze, ale wymaga niekiedy wejścia do ustawień odnośnika i wybrania opcji Otwórz w nowym oknie.

Kiedy używać odnośników w tym samym oknie/karcie, a kiedy w nowej?

Zasada jest prosta. Jeśli link prowadzi do innej strony, wtedy najlepiej jest wymusić, aby odnośnik otwierał się w nowym oknie/karcie. W innym przypadku najprawdopodobniej ktoś, kto kliknie na odnośnik ucieknie z Twojej strony i już na nią nie wróci. Gdyby zakładka otworzyła się w nowym oknie, wtedy nawigując między kartami przeglądarki mógłby wrócić do bazowej strony.

Co innego jeśli link prowadzi do innej podstrony Twojego serwisu. W tej sytuacji nie ma potrzeby dodawania odnośnika otwieranego w nowej karcie.

Okiełznać bałagan na stronie z odnośnikami zewnętrznymi i wewnętrznymi można instalując wtyczkę External Links i we właściwy sposób ją konfigurując.

Jak modyfikować dodane odnośniki? Co z grafiką?

Modyfikowanie jest równie proste jak dodawanie linka. Wystarczy, że klikniesz w środku odnośnika i wybierzesz ikonę wstaw/edytuj odnośnik albo klikniesz na ołówek umożliwiający edycję.

Identycznie możesz edytować dodane w treści zdjęcia. Tu uwaga, bo bardzo często się z tym problemem spotykam. Zwróć uwagę na to, czy dodane przez Ciebie zdjęcie przypadkiem nie ma odnośnika. Jeśli ma to sprawdź gdzie on kieruje. Oto kilka błędów, które powtarzają się i na dłuższą metę bardzo rażą:

  • dodając zdjęcie poprzez opcję dodaj medium bardzo często jako odnośnik podawana jest automatycznie ścieżka do dużego zdjęcia – jeśli tak jest to sprawdź czy aby na pewno duże zdjęcie jest większe od tego wyświetlanego na stronie we wpisie. Nic bardziej nie irytuje jak oglądanie takiej samej wielkości albo (sic!) mniejszej fotografii po kliknięciu na miniaturę. Przy tej okazji warto zadbać o wtyczkę, która pozwoli na bardziej efektowną ekspozycję fotografii
  • nie dodawaj odnośników do stron zewnętrznych na zdjęciu bez wyjaśnienia, że kliknięcie spowoduje przekierowanie do zewnętrznego serwisu. Budując witrynę i nawigację pomiędzy podstronami bądź przewidywalny.
  • nie dodawaj ślepych linków (zamiast adresu URL widnieje #). Jeśli dodasz link, który będzie prowadził donikąd, wtedy ktoś kto trafi na Twoją witrynę po najechaniu na zdjęcie zobaczy inny kursor. Postanowi więc kliknąć. Kliknie raz, drugi, dziesiąty i się zirytuje. Po co Ci to?

Jak usunąć odnośnik z tekstów i grafiki?

Jeśli zamierzasz usunąć odnośnik, wystarczy że skorzystasz z ikony usuń odnośnik:

usuwanie-linka

Jak wygląda odnośnik?

Zasadniczo odnośniki w HTMLu mają dosyć prostą konstrukcję:

Na pierwszą część składa się adres strony na którą ma kierować odnośnik, którą to stronę poprzedza znacznik a href. Ten znacznik sugeruje, że tekst który widzimy jest odnośnikiem. Konstrukcja target=”_blank” sugeruje, że odnośnik będzie otwarty w nowym oknie/karcie. Po zamknięciu pierwszej części a href znajduje się tekst, który jest nośnikiem linka. Całość kończy zamknięcie znacznika czyli </a>.

Jak zmienić wygląd odnośnika?

Jeszcze 10-15 lat temu zmiana koloru odnośnika nie była niczym oczywistym. Wszystkie odnośniki wyglądały właśnie tak. Linki zmieniały kolor po kliknięciu, dzięki czemu użytkownik stawiający pierwsze kroki w cyberprzestrzeni wiedział gdzie już był, a gdzie jeszcze może wejść. W dobie modemów i płatności za minutę połączenia internetowego takie rozwiązanie było na wagę złota. Czasy się zmieniły, internet upowszechnił, a projektanci mają wolną rękę w doborze koloru i stylów prezentowania odnośników.

Zwróć uwagę jak można zbadać kolor linków na Twojej stronie:

zbadaj-element-odnosnika

Zmiana koloru w pasku badania elementu choć daje natychmiastowy efekt na stronie to powoduje realnej zmiany kodu witryny. To tylko edytor poglądowy pozwalający zobaczyć jak będzie wyglądała strona po zmianie.

Aby zmienić kolor odnośników musisz wejść do sekcji Wygląd -> Edytor do pliku style.css i następnie znaleźć fragment kodu dotyczący linków. W moim przypadku to body a. Na powyższym zrzucie ekranu możesz sprawdzić, że jest on w linii 109, jednak edytor nie posiada numerowanych linii i aby precyzyjnie sprawdzić który fragment kodu możesz skorzystać z edytora numerującego linię edytując pliki bezpośrednio na serwerze.

Aby dokonać zmiany wystarczy po odnalezieniu:

zmienić 2 linię wpisując inny kod dla koloru. Kod HEX z # na początku możesz pobrać np. ze strony Color Picker lub z zaawansowanego programu graficznego. Przykładowo zmieniłem kolor linków na błękitny i kod w moim przypadku wyglądał następująco:

UDOSTĘPNIJ