Jak přidat hypertextový odkaz k obrázku ve WordPressu

Propojený obrázek promění statický vizuál v navigační nástroj. Místo toho, abyste po návštěvnících chtěli, aby klikli na textový odkaz nebo tlačítko, můžete jim umožnit kliknout na fotografii produktu, banner, logo nebo propagační obrázek a přejít přímo na stránku, kterou chcete zobrazit.

U firemních webů je to obzvlášť užitečné. Klikatelný obrázek může vést na stránku služby, kontaktní formulář, ceník, blogový příspěvek nebo registrační proces. Při správném použití zlepšuje použitelnost, podporuje konverze a pomáhá důležitým stránkám zůstat snadno dostupné.

Proč propojit obrázek?

Přidání hypertextového odkazu k obrázku je užitečné v mnoha běžných rozvrženích webu:

• Hero bannery vedoucí na vybranou nabídku
• Karty služeb, které otevírají podrobné stránky
• Loga, která vracejí uživatele na domovskou stránku
• Fotografie produktů vedoucí na stránky s detaily produktu
• Propagační grafiky, které posílají návštěvníky na vstupní stránku kampaně
• Sekce s výzvou k akci, které potřebují vizuální klikací cíl

Klikatelné obrázky mohou usnadnit rychlé skenování stránky, zejména na mobilních zařízeních, kde vizuální prvky často fungují lépe než drobné textové odkazy.

Než začnete

Ujistěte se, že už máte:

• Publikovanou nebo rozpracovanou stránku či příspěvek ve WordPressu
• Obrázek nahraný v knihovně médií nebo připravený k vložení
• Cílovou adresu, na kterou má obrázek odkazovat

Pokud odkazujete na interní stránku, nejprve si zkopírujte její adresu. Pokud odkazujete na externí web, ověřte, že je cílová stránka důvěryhodná a relevantní.

Jak přidat hypertextový odkaz k obrázku v blokovém editoru WordPressu

Většina moderních webů ve WordPressu používá blokový editor, známý také jako Gutenberg. Postup je jednoduchý.

1. Otevřete stránku nebo příspěvek

V administraci WordPressu přejděte na stránku nebo příspěvek, kam chcete odkaz na obrázek umístit.

2. Vložte nebo vyberte blok Obrázek

Pokud obrázek na stránce ještě není:

• Klikněte na tlačítko +
• Vyberte blok Obrázek
• Nahrajte nový obrázek, vyberte jej z knihovny médií nebo případně vložte z adresy

Pokud je obrázek na stránce už vložený, kliknutím jej vyberte.

3. Přidejte odkaz

Když je blok obrázku vybraný, najděte v liště bloku ikonu odkazu.

• Klikněte na tlačítko odkazu
• Vložte nebo napište cílovou adresu
• Stiskněte Enter nebo odkaz potvrďte

V závislosti na verzi WordPressu a šabloně můžete také vidět možnosti odkazování na:

• Soubor média
• Stránku přílohy
• Vlastní adresu
• Bez odkazu

Pro většinu firemních použití je nejlepší volbou Vlastní adresa, protože vám dává plnou kontrolu nad tím, kam obrázek vede.

4. Podle potřeby upravte chování odkazu

Některé editory umožňují zvolit, zda se odkaz otevře v novém panelu. To je často užitečné u externích odkazů, zatímco interní odkazy obvykle fungují nejlépe ve stejném panelu.

Nový panel používejte jen tehdy, když to zlepšuje zkušenost návštěvníka. Nevnucujte všem odkazům otevírání v novém panelu, protože to může působit matoucím dojmem.

5. Uložte nebo aktualizujte stránku

Klikněte na Aktualizovat, Publikovat nebo Uložit koncept, aby se změny zachovaly.

Jak odkazovat obrázek v klasickém editoru

Pokud váš web stále používá klasický editor, postup je trochu jiný, ale stále jednoduchý.

1. Vložte obrázek

Klikněte na Přidat média a vložte obrázek do obsahu.

2. Vyberte obrázek

Klikněte na obrázek, aby se zobrazila editační lišta.

3. Otevřete nastavení odkazu

Vyberte možnost odkazu z nástrojové lišty obrázku nebo z panelu s detaily obrázku podle vašeho nastavení.

4. Zadejte cílovou adresu

Vložte adresu do pole odkazu a potvrďte změnu.

5. Aktualizujte příspěvek nebo stránku

Uložte práci, aby se odkazovaný obrázek aktivoval na živém webu.

Nejlepší postupy pro propojené obrázky

Odkaz na obrázku má smysl jen tehdy, když návštěvníci okamžitě chápou, co se stane po kliknutí. Dodržujte tyto osvědčené postupy, aby bylo používání jasné a účinné.

Udělejte cíl zřejmý

Používejte obrázky, které vizuálně naznačují akci nebo obsah za nimi. Obrázek služby by měl vést na související stránku služby. Propagační grafika by měla vést přímo na samotnou akci.

Používejte popisný alternativní text

Alternativní text pomáhá čtečkám obrazovky porozumět obrázku a podporuje přístupnost. Zároveň dává kontext, pokud se obrázek nenačte.

Pokud je obrázek čistě dekorativní, nemusí vůbec potřebovat hypertextový odkaz.

Dbejte na to, aby byly důležité obrázky na mobilu dobře klikatelné

Mobilní návštěvníci spoléhají na dotykové prvky. Ujistěte se, že je obrázek dostatečně velký pro pohodlné klepnutí bez nechtěných kliknutí.

Vyhněte se odkazování na nesouvisející obsah

Neposílejte návštěvníky z jednoho tématu na něco úplně jiného. Nesoulad mezi obsahem a odkazem snižuje důvěru a oslabuje konverze.

Používejte propojené obrázky střídmě

Příliš mnoho klikacích obrázků může stránku zbytečně zahltit. Používejte je tam, kde přinášejí skutečnou hodnotu, ne jen proto, že tato funkce existuje.

Kombinujte obrázky s podpůrným textem

Krátký nadpis nebo popisek poblíž obrázku pomáhá návštěvníkům pochopit další krok. To je zvlášť důležité na marketingových a službových stránkách.

Běžné případy použití na firemních webech

Propojené obrázky mohou podpořit cíle webu malé firmy několika způsoby.

Navigace na domovské stránce

Logo nebo výrazný obrázek může uživatele směrovat na klíčové stránky, jako jsou služby, ceník nebo kontakt.

Propagace produktů a služeb

Obrázky na vstupních stránkách mohou posouvat návštěvníky hlouběji do nákupního procesu.

Zvyšování zapojení do blogu

Úvodní obrázky mohou odkazovat na související zdroje, případové studie nebo interní články.

Generování poptávek

Banner nebo odznak může vést na registrační formulář, stránku konzultace nebo nabídky.

Budování důvěry

Ocenění, partnerská loga nebo grafiky s referencemi mohou odkazovat na podpůrné stránky s dalšími informacemi.

Řešení běžných problémů

Pokud propojený obrázek nefunguje podle očekávání, zkontrolujte následující:

Byla zadána nesprávná adresa

Ujistěte se, že cílová adresa je úplná a správná. Chybějící protokol nebo nefunkční interní odkaz mohou způsobit, že obrázek nebude fungovat správně.

Obrázek vede na stránku přílohy místo na správnou stránku

WordPress někdy ve výchozím nastavení používá odkaz na médium nebo přílohu. Nahraďte jej přesně tou adresou, kterou chcete použít.

Změny v editoru nebyly uloženy

Pokud se odkaz na obrázku na živé stránce neobjevuje, ověřte, že jste po úpravě klikli na Aktualizovat nebo Publikovat.

Nějaký plugin nebo šablona zasahuje do chování

Některé nástroje pro tvorbu stránek, optimalizační pluginy nebo vlastní šablony mohou změnit způsob, jakým odkazy na obrázky fungují. V případě potřeby otestujte stránku dočasně s vypnutými pluginy ve stagingovém prostředí.

Obrázek vypadá jako klikací, ale nic se neděje

To může nastat, pokud je nad obrázkem překrytý jiný prvek nebo pokud do rozvržení stránky zasahuje vlastní kód. Zkontrolujte strukturu stránky a vyzkoušejte ji v jiném prohlížeči.

Tipy pro strategii odkazů pro lepší výkon webu

Propojený obrázek by měl podporovat širší obsahovou strategii, ne jen fungovat jako dekorace.

• Odkazujte jen tehdy, když obrázek pomáhá uživateli udělat užitečný další krok
• Propojujte obrázky se stránkami, které odpovídají záměru uživatele
• Používejte jasné popisky a doprovodný výzvový text
• Pokud je to možné, sledujte výkon kliknutí v analytice
• Aktualizujte staré odkazy na obrázky, když se změní adresy stránek

Pro firemní web mohou taková drobná vylepšení zpříjemnit navigaci a snížit tření v rámci celé uživatelské cesty.

Závěrečné myšlenky

Přidání hypertextového odkazu k obrázku ve WordPressu je jednoduchý úkol, ale při promyšleném použití může výrazně zlepšit použitelnost i konverze. Ať už odkazujete logo, banner, obrázek služby nebo propagační grafiku, klíčem je ponechat cíl relevantní a akci jasnou.

Pokud spravujete firemní web, vnímejte každý klikací obrázek jako součást struktury webu. Nejlepší odkazy v obrázcích přirozeně vedou návštěvníky k dalšímu kroku, podporují váš obsah a usnadňují práci na desktopu i mobilu.