{"id":3499,"date":"2019-12-02T16:32:49","date_gmt":"2019-12-02T15:32:49","guid":{"rendered":"https:\/\/digiamo.cz\/jak-spravne-pouzivat-kotevni-odkazy-anchor-links-na-webu-pouzitim-wordpress-sablony-divi\/"},"modified":"2019-12-02T16:32:49","modified_gmt":"2019-12-02T15:32:49","slug":"jak-spravne-pouzivat-kotevni-odkazy-anchor-links-na-webu-pouzitim-wordpress-sablony-divi","status":"publish","type":"post","link":"https:\/\/new.digiamo.cz\/new\/jak-spravne-pouzivat-kotevni-odkazy-anchor-links-na-webu-pouzitim-wordpress-sablony-divi\/","title":{"rendered":"Jak spr\u00e1vn\u011b pou\u017e\u00edvat kotevn\u00ed odkazy (Anchor links) na webu pou\u017eit\u00edm WordPress \u0161ablony DIVI?"},"content":{"rendered":"\n

Kotevn\u00ed body jsou v sou\u010dasn\u00e9 dob\u011b, kdy se st\u00e1le v\u00edce pou\u017e\u00edvaj\u00ed takzvan\u00e9 one-page webstr\u00e1nky, velmi \u010dasto vyu\u017e\u00edvan\u00e9. Jejich v\u00fdhodou je, \u017ee se mezi nimi po jejich rozm\u00edst\u011bn\u00ed v r\u016fzn\u00fdch sekc\u00edch na hlavn\u00ed str\u00e1nce um\u00edme pomoc\u00ed odkaz\u016f velmi rychle a efektivn\u011b p\u0159esouvat (tzv. Page Jump).<\/p>\n\n\n\n

Obsah \u010dl\u00e1nku:<\/h2>\n\n\n\n

Co jsou kotevn\u00ed odkazy a jak funguj\u00ed?<\/p>\n\n\n\n

Jak vytvo\u0159it kotevn\u00ed odkazy ve WordPress \u0161ablon\u011b Divi?<\/p>\n\n\n\n

Jak spr\u00e1vn\u011b vlo\u017eit odkazy na kotevn\u00ed texty do menu? <\/p>\n\n\n\n

Jak vy\u0159e\u0161it probl\u00e9m se zv\u00fdrazn\u011bn\u00edm v\u0161ech polo\u017eek v menu um\u00edst\u011bn\u00fdch na dan\u00e9 str\u00e1nce?<\/p>\n\n\n\n

Co jsou kotevn\u00ed odkazy a jak funguj\u00ed?<\/h2>\n\n\n\n

Kotevn\u00ed linky dok\u00e1\u017eou n\u00e1v\u0161t\u011bvn\u00edka webu po kliknut\u00ed dostat na specifickou \u010d\u00e1st na str\u00e1nce. M\u00edsto, na kter\u00e9 se pomoc\u00ed nich odkazuje, je ozna\u010den\u00e9 bu\u010f pomoc\u00ed “A element-u” nebo atributem CSS ID.<\/p>\n\n\n\n

V \u0161ablon\u011b Divi<\/a>, kterou u n\u00e1s vyu\u017e\u00edv\u00e1me, se ID atribut vkl\u00e1d\u00e1 po klinut\u00ed na nastaven\u00ed sekce\/\u0159\u00e1dku\/modulu pod tabem \u201ePokro\u010dil\u00e9 \u2013 Advanced\u201c. Zde se do ok\u00e9nka CSS ID vlo\u017e\u00ed specifick\u00fd kotevn\u00ed text.<\/p>\n\n\n\n

Pozor:<\/strong> Sem se vkl\u00e1d\u00e1 text bez znaku #.<\/p>\n\n\n\n

\"\"<\/figure>\n\n\n\n

Samotn\u00fd odkaz se pot\u00e9 p\u0159id\u00e1 do hlavn\u00edho menu klasicky ve WordPress n\u00e1st\u011bnce Vzhled\/Menu jako \u201eCustom Link\u201c. Tentokr\u00e1t se zad\u00e1v\u00e1 ji\u017e se znakem<\/strong> “#”, <\/strong>za kter\u00fdm bez mezery n\u00e1sleduje n\u00e1zev konkr\u00e9tn\u00edho ID, na kter\u00fd chceme odkazovat. V na\u0161em p\u0159\u00edpad\u011b m\u00e1 tvar \u201e#proc-s-nami\u201c.<\/p>\n\n\n\n

\"\"<\/figure>\n\n\n\n

Takto nastaven\u00fd odkaz v menu je ji\u017e pln\u011b funk\u010dn\u00ed a po kliknut\u00ed na textov\u00fd odkaz se p\u0159esuneme po str\u00e1nce do po\u017eadovan\u00e9ho bodu.
<\/p>\n\n\n\n

Probl\u00e9m 1 \u2013 Form\u00e1t odkazu pro kotevn\u00ed texty<\/h2>\n\n\n\n

Probl\u00e9m nast\u00e1v\u00e1 v p\u0159\u00edpad\u011b, \u017ee web obsahuje i jin\u00e9 str\u00e1nky, na kter\u00fdch se menu zobrazuje. V p\u0159\u00edpad\u011b, \u017ee se pr\u00e1v\u011b nach\u00e1z\u00edme na jin\u00e9 str\u00e1nce a chceme se dostat na \u010d\u00e1st dom\u00e1c\u00ed str\u00e1nky, na kter\u00e9 je sekce \u201ePro\u010d s n\u00e1mi\u201c, je nutn\u00e9 do menu um\u00edstit odkaz ve tvaru https:\/\/nazevdomeny.cz\/#proc-s-nami<\/strong>. To vy\u0159e\u0161\u00ed probl\u00e9m s nefunk\u010dn\u00edmi odkazy na str\u00e1nk\u00e1ch jin\u00fdch ne\u017e na t\u011bch s kotevn\u00edmi body.<\/p>\n\n\n\n

Probl\u00e9m 2 \u2013 Probl\u00e9m s ozna\u010den\u00edm v\u0161ech odkaz\u016f v menu um\u00edst\u011bn\u00fdch na dan\u00e9 str\u00e1nce<\/h2>\n\n\n\n

Pokud bychom se s odkazy v menu ocitli na dom\u00e1c\u00ed str\u00e1nce (na n\u00ed\u017e jsou um\u00edst\u011bny kotvy) a menu by bylo nastaven\u00e9 tak, \u017ee n\u011bjak\u00fdm zp\u016fsobem zv\u00fdraz\u0148uje aktivn\u00ed str\u00e1nky, na kter\u00fdch se n\u00e1v\u0161t\u011bvn\u00edk nach\u00e1z\u00ed (a:active<\/a>), mohlo by doj\u00edt k probl\u00e9mu. Do\u0161lo by toti\u017e ke zv\u00fdrazn\u011bn\u00ed v\u0161ech t\u011bchto odkaz\u016f tzv. aktivn\u00edm stavem.<\/p>\n\n\n\n

Situace by vypadala takto:<\/p>\n\n\n\n

\"\"<\/figure>\n\n\n\n

Tento probl\u00e9m lze vy\u0159e\u0161it velmi jednodu\u0161e pomoc\u00ed pluginu, kter\u00fdm si vytvo\u0159\u00edme specifick\u00e9 menu pro domovskou str\u00e1nku (nebo pro str\u00e1nku na n\u00ed\u017e jsou um\u00edst\u011bny kotevn\u00ed body). Menu bude vypadat na prvn\u00ed pohled \u00fapln\u011b stejn\u011b jako menu na zb\u00fdvaj\u00edc\u00edch str\u00e1nk\u00e1ch webu. Hlavn\u00ed rozd\u00edl je ve stylu, jak\u00fdm bude odkaz na kotevn\u00ed bod napsan\u00fd.<\/p>\n\n\n\n

Pro tyto \u00fa\u010dely doporu\u010duji plugin \u201eConditional Menus<\/a>\u201c od Themify, kter\u00fd je dostupn\u00fd zdarma (https:\/\/wordpress.org\/plugins\/conditional-menus\/<\/a>).<\/p>\n\n\n\n


Po jeho instalaci a aktivaci se v nastaven\u00edch menu v horn\u00ed \u010dasti objev\u00ed nov\u00fd tab \u201eManage Locations\u201c, ve kter\u00e9m se daj\u00ed spravovat um\u00edst\u011bn\u00ed va\u0161ich menu.<\/p>\n\n\n\n

\"\"<\/figure>\n\n\n\n

V dal\u0161\u00edm kroku je nutn\u00e9 vytvo\u0159it jedno menu (u n\u00e1s Hlavn\u00ed menu), kter\u00e9 bude ozna\u010deno ve WordPressu jako Prim\u00e1rn\u00ed menu s odkazy ve form\u00e1tu https:\/\/nazevdomeny.cz\/#proc-s-nami. Pak je t\u0159eba vytvo\u0159it druh\u00e9 menu (u n\u00e1s Hlavn\u00ed Menu dom\u016f) zcela toto\u017en\u00e9 s prim\u00e1rn\u00edm menu, kter\u00e9 bude vyu\u017e\u00edvat \u201eCustom Linky\u201c ve form\u00e1tu #proc-s-nami, pro kter\u00e9 se pomoc\u00ed nastaven\u00ed um\u00edst\u011bn\u00ed tohoto pluginu vybere podm\u00ednka zobrazen\u00ed jen na Dom\u00e1c\u00ed str\u00e1nce.<\/p>\n\n\n\n

\"\"<\/figure>\n\n\n\n
\"\"<\/figure>\n\n\n\n

Nezapome\u0148te ulo\u017eit ve\u0161ker\u00e9 zm\u011bny a v\u0161e by m\u011blo fungovat tak, jak m\u00e1. <\/p>\n\n\n\n

Douf\u00e1m, \u017ee v\u00e1m tento n\u00e1vod u\u0161et\u0159il hodn\u011b \u010dasu a budu r\u00e1d, kdy\u017e se mi v p\u0159\u00edpad\u011b ot\u00e1zek nebo nejasnost\u00ed ozvete. <\/p>\n\n\n","protected":false},"excerpt":{"rendered":"

Kotevn\u00ed body jsou v sou\u010dasn\u00e9 dob\u011b, kdy se st\u00e1le v\u00edce pou\u017e\u00edvaj\u00ed takzvan\u00e9 one-page webstr\u00e1nky, velmi \u010dasto vyu\u017e\u00edvan\u00e9. Jejich v\u00fdhodou je, \u017ee se mezi nimi po jejich rozm\u00edst\u011bn\u00ed v r\u016fzn\u00fdch sekc\u00edch na hlavn\u00ed str\u00e1nce um\u00edme pomoc\u00ed odkaz\u016f velmi rychle a efektivn\u011b p\u0159esouvat (tzv. Page Jump). Obsah \u010dl\u00e1nku: Co jsou kotevn\u00ed odkazy a jak funguj\u00ed? Jak vytvo\u0159it kotevn\u00ed odkazy ve […]<\/p>\n","protected":false},"author":4,"featured_media":54,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[27],"tags":[32],"class_list":["post-3499","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-weby","tag-anchor-linksdiviwordpress"],"meta_box":{"nadpis_cta":"","podnadpis_cta":"","text_button_cta":"","link_button_cta":""},"_links":{"self":[{"href":"https:\/\/new.digiamo.cz\/new\/wp-json\/wp\/v2\/posts\/3499","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/new.digiamo.cz\/new\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/new.digiamo.cz\/new\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/new.digiamo.cz\/new\/wp-json\/wp\/v2\/users\/4"}],"replies":[{"embeddable":true,"href":"https:\/\/new.digiamo.cz\/new\/wp-json\/wp\/v2\/comments?post=3499"}],"version-history":[{"count":0,"href":"https:\/\/new.digiamo.cz\/new\/wp-json\/wp\/v2\/posts\/3499\/revisions"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/new.digiamo.cz\/new\/wp-json\/wp\/v2\/media\/54"}],"wp:attachment":[{"href":"https:\/\/new.digiamo.cz\/new\/wp-json\/wp\/v2\/media?parent=3499"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/new.digiamo.cz\/new\/wp-json\/wp\/v2\/categories?post=3499"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/new.digiamo.cz\/new\/wp-json\/wp\/v2\/tags?post=3499"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}