Jak utworzyć podgląd łącza wizualnego w WordPress

Wzbogacanie stron i postów WordPress o treści, takie jak pomocne zasoby, powiązane produkty, promocyjne CTA lub zabawne artykuły, może pomóc Tobie lub Twojej marce zaoferować większą wartość swoim odbiorcom. Zwykły link nie zawsze jednak da radę – o ile tekst kotwicy i otaczający go sentyment nie są wystarczająco przekonujące, te linki mogą zostać przetarte. Tworząc wizualne linki do swojej witryny, takie jak ulepszone te, które widzisz na Facebooku, możesz dodać angażujące, interaktywne treści, na które zwrócą uwagę Twoi odwiedzający. Wtyczka Visual Link Preview dla WordPress to prosty sposób na dodanie więcej rozmachu do swoich linków.

Oto tylko kilka sposobów korzystania z tej wtyczki:

• Dodaj CTA do linku afiliacyjnego.
• Utwórz kopię zapasową twierdzeń, faktów i statystyk.
• Wybieraj treści z innych witryn.
• Dołącz pomocne zasoby, aby czytelnicy mogli dowiedzieć się więcej.
• Promuj produkty swojego sklepu e-commerce.

Ponadto, w swojej najprostszej formie, wtyczka Visual Link Preview jest bardziej atrakcyjnym sposobem łączenia się z powiązanymi postami i zachęcania ludzi do pozostania w Twojej witrynie na dłużej.

Wtyczka umożliwia tworzenie wizualnego podglądu dowolnego linku wewnętrznego lub zewnętrznego, a także możesz utworzyć niestandardowy szablon ze stylem pasującym do Twojej marki lub witryny. Następnie umieść uproszczone pole podglądu w dowolnym miejscu posta lub strony. Przyjrzyjmy się, jak dodać pole podglądu do WordPressa zarówno w Gutenbergu, jak i klasycznym edytorze.

Znajdowanie i instalowanie wtyczki Visual Link Preview

Prawdopodobnie już wiesz, jak to zrobić, ale na wszelki wypadek, oto super szybki przegląd instalacji nowej wtyczki WordPress:

• Zaloguj się do swojego pulpitu WordPress.
• Wybierz Wtyczki z lewego paska bocznego.
• Wybierz Dodaj nowy w podmenu, które pojawi się pod Wtyczkami.
• Wpisz „Podgląd łącza wizualnego” w pasku wyszukiwania w prawym górnym rogu strony.
• Kliknij Zainstaluj teraz w prawym górnym rogu okna podglądu wtyczki.
• Po zainstalowaniu kliknij Aktywuj.

Po aktywacji wtyczki zostaniesz przekierowany na stronę swojej wtyczki i zobaczysz to powiadomienie u góry. (Dokumentacja Pierwsze kroki prowadzi do tej strony).

Pierwsze kroki z ustawieniami i dostosowaniami

Po aktywacji wtyczki przewiń listę wtyczek, aby ją znaleźć. Pod nazwą wtyczki kliknij link Ustawienia – zostaniesz przekierowany na tę stronę:

Domyślnie przełącznik Użyj niestandardowego stylu będzie wyłączony. Jeśli go włączysz, pojawi się kilka opcji.

Istnieją dostosowania do następujących elementów:

• Szerokość pojemnika, kolor tła i wypełnienie.
• Promień obramowania, szerokość, styl (pełny, przerywany, kropkowany itp.) i kolor.
• Pozycja obrazu (lewa, prawa, góra lub dół), rozmiar i promień obramowania.
• Rozmiar i kolor czcionki tytułu i podsumowania.

Większość z nich jest dość oczywista, ale jest kilka rzeczy, które należy wiedzieć o rozmiarze obrazu. Możesz ustawić rozmiar miniatury lub rozmiar niestandardowy. W przypadku miniatury standardowe rozmiary to „miniaturka”, „średnia” i „duża”, więc wystarczy wpisać to, co chcesz w polu. Możesz też ustawić niestandardowy rozmiar w tym formacie: szerokośćxwysokość (na przykład 150×150).

Na razie zostawię wszystko bez zmian, aby zobaczyć, jak wygląda domyślne pole linków. Następnie wrócę, aby wprowadzić poprawki.

Używanie wtyczki z edytorem bloków Gutenberg

Wszedłem do wersji roboczej wpisu na blogu i dodałem blok pod akapitem. Blok Podgląd łącza wizualnego znajdziesz w sekcji Widgety lub możesz go po prostu wyszukać u góry selektora bloków.

Tak wygląda blok Visual Link Preview:

Po kliknięciu pola Wybierz post lub stronę nie zobaczysz listy rozwijanej zawartości; będziesz musiał szukać tego, czego chcesz. Możesz także dodać link do zewnętrznego adresu URL (omówię to za chwilę).

Wybrałem opublikowany post na blogu. Tak to wygląda bez zmian w stylu:

Ustawienia blokowania podglądu łącza wizualnego w Gutenberg

Jeśli klikniesz stos trzech kropek u góry bloku, zobaczysz menu rozwijane. Wybierz Pokaż ustawienia blokowania, aby wyświetlić prawy pasek boczny z opcjami. W tym miejscu możesz wprowadzić kilka zmian:

Zmień łącze. Pamiętaj, że jeśli klikniesz Zmień łącze, link, który masz, zostanie natychmiast usunięty, więc upewnij się, że nie klikniesz go przypadkowo.

Zmień lub usuń wyświetlany obraz. Jeśli usuniesz wyświetlany obraz, tak wygląda Visual Link:

Jeśli nie podoba Ci się, jak wygląda bez obrazu, możesz kliknąć Wybierz obraz, aby dodać go z powrotem. Musisz jednak przejrzeć Bibliotekę multimediów lub przesłać obraz – nie będziesz mieć opcji automatycznego – ponowne dodanie wyróżnionego obrazu, tak jak miało to miejsce przy pierwszym dodaniu linku.

Możesz oczywiście znaleźć polecany obraz w swojej Bibliotece multimediów, ale może on zostać pochowany. Możesz też po prostu ponownie dodać link, aby automatycznie dodał oryginalną treść.

Włącz i wyłącz ustawienia linków. Możesz zdecydować się na otwarcie linku w nowej karcie, a także możesz zmienić link w link nofollow.

Dodawanie zewnętrznego łącza za pomocą Gutenberg

Tym razem dodaję link zewnętrzny. Skopiowałem i wkleiłem w odpowiednie pole:

Gdy klikniesz Użyj tego adresu URL, dzieje się to samo, co po dodaniu linku wewnętrznego. Obraz, tytuł i fragment zostaną automatycznie wypełnione, a zmiany można wprowadzić na prawym pasku bocznym. Możesz także kliknąć Zapisz obraz lokalnie w sekcji Treść, a obraz wyświetlany przez wtyczkę pobraną ze źródła adresu URL zostanie dodany do Biblioteki multimediów WordPress.

Zapisywanie bloków wielokrotnego użytku

Jeśli masz stronę, post na blogu lub link zewnętrzny, z którego będziesz często korzystać, możesz utworzyć go raz, a następnie zapisać jako blok wielokrotnego użytku, aby łatwo dodać go w przyszłości. Działa to tylko w edytorze Gutenberga, FYI.

Po zakończeniu tworzenia bloku kliknij ikonę z trzema kropkami u góry, tę samą, której użyłeś, aby uzyskać dostęp do paska bocznego opcji. Następnie wybierz Dodaj do bloków wielokrotnego użytku. Możesz nazwać blok, a będzie on w Twojej bibliotece bloków do wykorzystania w przyszłości.

Korzystanie z wtyczki w edytorze klasycznym

Korzystając z klasycznego edytora, przejdź do swojego posta lub strony i przejdź do miejsca, w którym chcesz dodać wizualny link. Kliknij przycisk Podgląd łącza wizualnego u góry strony:

Pojawi się to okno:

Z listy rozwijanej Typ możesz dodać własny lub zewnętrzny link. Najpierw dodam własny link. Po wybraniu treści, do której chcesz utworzyć link, pola zostaną automatycznie wypełnione, tak samo jak w przypadku Gutenberga. Tutaj dokonasz wszelkich zmian. Możesz usunąć obraz i zdecydować się na dodanie nowego, zmienić tytuł i zaktualizować podsumowanie z tego okna. Możesz także użyć tutaj domyślnych ustawień wtyczki lub własnego szablonu, tak jak w przypadku Gutenberga.

Dodawanie zewnętrznego łącza za pomocą klasycznego edytora

Tym razem dodam link zewnętrzny. Oto pola dla linku zewnętrznego:

Gdy dodasz adres URL, pola zaktualizują się automatycznie – tak samo jak w przypadku linku wewnętrznego. Następnie możesz wprowadzić dowolne zmiany przed wstawieniem go na swoją stronę lub post. Masz również opcję Zapisz obraz lokalnie w klasycznym edytorze.

Dostosowywanie szablonu i ramki podglądu łącza wizualnego

Ten pasek ustawień bloku zawiera również sekcję Styl u dołu, w której można wybrać szablon Użyj domyślnego z ustawień lub szablon Prosty. Jest to jednak mylące, ponieważ w rzeczywistości są tym samym. Za chwilę wyjaśnię więcej. Najpierw zajmijmy się dostosowywaniem pola podglądu linku.

W tej sekcji stylu kliknij łącze Zmień styl szablonu. Otworzy się nowa strona, na której możesz utworzyć niestandardowy szablon (możesz również przejść tutaj poprzez ustawienia wtyczki). Ponownie, dostosowania są proste, wyjaśniające i proste, więc powinieneś mieć łatwy czas na znalezienie drogi. Oto jak wygląda szablon po tym, jak pobawiłem się kilkoma dostosowaniami:

Nie najlepiej. Częściowo problem polega na tym, że tekst podglądu jest zbyt długi. Po powrocie do swojego postu lub strony, jeśli klikniesz blok, edytor powinien pojawić się na prawym pasku bocznym. Następnie możesz przejść do sekcji Treść i kliknąć pola tytułu i fragmentu, aby wprowadzić zmiany.

Zamiast używać miniatury, wróciłem do strony dostosowywania szablonu i wprowadziłem niestandardowy rozmiar obrazu, który zmienił go w kwadrat (i na szczęście idealnie przycięty). Bawiłem się tytułem i kopią fragmentu jeszcze trochę, aby był lepiej zwymiarowany w bloku i obok obrazu. To jest lepsze:

Możesz poświęcić dużo czasu na znalezienie odpowiednich dostosowań i powinieneś, zwłaszcza, że ​​możesz utworzyć tylko jeden niestandardowy szablon.

Podgląd Twoich dostosowań szablonu

Nie możesz zobaczyć podglądu na żywo podczas dostosowywania szablonu. Musisz otworzyć swój post lub stronę w nowym oknie, wprowadzić zmiany na stronie dostosowywania szablonu, a następnie kliknąć z powrotem do posta lub strony. Przełączaj się między dwiema rozwijanymi opcjami szablonu (pamiętaj, że w rzeczywistości nie różnią się one od siebie) – to odświeża okno, dzięki czemu możesz zobaczyć najnowsze zmiany.

Jak odzyskać domyślny styl?

Załóżmy, że wprowadzasz kilka zmian, a potem zdajesz sobie sprawę, że wolisz styl domyślny. Jeśli zostawisz włączony przełącznik Użyj niestandardowej stylizacji w ustawieniach szablonu, dostosowane ustawienia zostaną zastosowane, gdy wrócisz na swoją stronę lub post, niezależnie od tego, czy wybierzesz Użyj domyślnego z Ustawień, czy Prosty z menu rozwijanego Szablon (tak jak powiedziałem, zagmatwane).

Jeśli chcesz przywrócić domyślne ustawienia wtyczki, możesz przejść do strony ustawień szablonu i wyłączyć przycisk Użyj niestandardowej stylizacji. Wszystkie twoje dostosowania będą tam, jeśli chcesz je w końcu włączyć, ale to pozwoli ci użyć domyślnych ustawień wtyczki, jeśli wolisz ich wygląd.

Wady wtyczki Visual Link Preview Plugin

Wtyczka Visual Link Preview to prosta wtyczka, która robi to, co mówi, i jest bardzo łatwa do nauczenia. Jednak ponieważ jest tak prosty, brakuje w nim również kilku obszarów, w których można by ulepszyć.

Nie ma menu rozwijanego z całą zawartością. Chciałem, aby ta opcja nie wymagała zapamiętywania nazwy posta na blogu lub strony do dodania jako linku.

Nie możesz zobaczyć podglądu na żywo dostosowanego szablonu. Przechodzenie między postem a stroną ustawień szablonu za każdym razem, gdy chcesz sprawdzić, czy jest to idealna ilość dopełnienia lub jakiego rodzaju obramowania, jest dość niezgrabne.

Możesz utworzyć tylko jeden szablon niestandardowy. To największa wada wtyczki. Nie możesz utworzyć kilku szablonów, a następnie wybrać i wybrać ten, którego używasz, aby dopasować do konkretnej strony, posta na blogu lub typu linku. Nie możesz również ustawić niektórych pól podglądu, aby używały niestandardowego szablonu, a innych, aby korzystały z domyślnych ustawień wtyczki — jest to jedno lub drugie.

Zawijanie

W sumie, nawet pomimo jej wad, wtyczka Visual Link Preview mi się podobała. Konfiguracja i użytkowanie są bardzo proste, bez względu na to, z którym edytorem wolisz pracować – Gutenberg czy klasyczny. Jest to zdecydowanie bardziej estetyczny i przyciągający wzrok sposób dodawania linków, co może zajść daleko, jeśli zajmujesz się marketingiem afiliacyjnym lub chcesz utworzyć link do swoich stron docelowych. Obecnie, ponieważ nie możesz utworzyć więcej niż jednego szablonu, najlepiej nadaje się do witryn o standardowym wyglądzie we wszystkich postach i stronach. Tak więc, jeśli masz wiele różnych stron docelowych w różnych stylach, trudno będzie utworzyć jeden szablon pola podglądu, który zmieści się w dowolnym miejscu. W przeciwnym razie jest to lekka wtyczka, która dobrze wykonuje swoją jedną pracę.

Możesz również polubić ten artykuł z pięcioma fajnymi rzeczami, które możesz zrobić w Divi za pomocą linków kotwicznych.