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:

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:

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.

Czy odnośnik działa?

Po dodaniu do tekstu odnośnika i zaktualizowaniu zmian koniecznie sprawdź czy link działa poprawnie. To szczególnie istotne jeśli są to pierwsze godziny z WordPressem i jeszcze nie masz pewności czy wszystko robisz tak, jak należy.

Aby zweryfikować, wystarczy że naciśniesz na „Zobacz wpis” i klikniesz na wprowadzony link. Jeśli działa to możesz otwierać szampana, gdyby się jednak okazało że prowadzi w inne miejsce albo do strony, która nie istnieje – warto przejść jeszcze raz do edycji i zweryfikować wprowadzony adres litera po literze.

Masz już gotową stronę i chcesz sprawdzić wszystkie odnośniki wewnątrz niej ale nie uśmiecha Ci się wchodzić na każdą stronę i klikać we wszystkie odnośniki? Nie ma problemu. Wystarczy, że wyszukasz w sieci frazę „online broken link checker” i znajdziesz kilka stron, które udostępniają za darmo narzędzie do sprawdzania niedziałających linków na całej Twojej witrynie. Wystarczy, że wpiszesz tam swój adres i dostaniesz po pewnym czasie listę wszystkich linków prowadzących donikąd. Narzędzie, które rekomenduję to Dead Link Checker.

Oczywiście są także wtyczki, które robią to samo na bieżąco, jednak jeśli chcesz poznać moje zdanie na ich temat to zdecydowanie odradzam Ci korzystanie z nich. Częste skanowanie strony może sprawić, że będzie się ona wolniej ładować, a Tobie – jak sądzę – zależy na zweryfikowaniu, które linki prowadzą do ślepej uliczki, poprawienie ich i sprawdzenie tego samego po raz kolejny za kilka miesięcy.

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:

Jak wygląda odnośnik?

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

<a href="http://www.500sekund.pl" target="_blank">500 sekund - najlepsze mikrokursy WordPressa</a>

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:

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:

body a {
    color: #CA2017;
    text-decoration: none;
}

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:

body a {
    color: #00BFFF;
    text-decoration: none;
}