Ako pišete dugačke članke, ili ih jednostavno želite pregledno raščlaniti i prikazati, pametno je dijelove članka prikazati u tablici sadržaja (Table of content ili TOC). Na taj ćete način čitateljima omogućiti bolje snalaženje unutar sadržaja članka. Možda ćete postaviti pokoju fusnotu a iz nje bi trebalo linkati nazad na dio članka gdje je fusnota bila navedena.
Možda ćete htjeti linkati na tzv. anchor linkove, specifične dijelove teksta na drugim stranicama/člancima ili ćete ponuditi opciju povratka na vrh članka. Opcija ima mnogo.
No, bez brige. U ovom ću vam članku opisati kako to postići bez dodavanja/promijene WordPress datoteka odnosno bez dodavanja ikakvog kôda u functions.php vaše teme. Sve ćemo odraditi unutar uređivača članka (post editora). Primjer stranice s TOC-om, “Na vrh” linkom i fusnotom potražite na dnu ovog članka.
Kako kreirati tablicu sadržaja (TOC) ?
Korak 1. Razmislite gdje će “skok” početi a gdje završiti
Na vrhu članka upisati ćete tekst koji ćete pretvoriti u klikabilne linkove. Ti će linkovi voditi na određene dijelove članka. Na primjer, imate listu naslova koja izgleda ovako:
Faza 1 : Razvoj back-enda
Faza 2 : Razvoj Frontenda
Faza 3 : Implementacija i testiranje
Na stranici ćete imati podnaslove koji su linkani na tablicu sadržaja te, u našem slučaju, koriste H3 tag. Ok, sad možemo polinkati Faza 1 : Razvoj back-enda iz tablice sadržaja s pripadajućim djelom stranice.
Korak 2. Locirajte dio stranice gdje će “skok” završiti
Prilikom uređivanja članka, u post editoru, primjetili ste dva taba (kartice), Vizualno i Tekst.
Iako većina korisnika koristi isključivo Vizualni tab, za potrebe ovog članka, odnosno prilikom dodavanja kôda, toplo preporučujemo korištenje Tekst taba.
Razlika između ova dva taba je to što u Tekst tabu vidite sav kôd koji služi formatiranju, odnosno uređuje izgled sadržaja članka.
Nakon nekog uvodnog teksta, imate podnaslov koji će biti prvi link u našoj tablici sadržaja. Taj podnaslov koristi H3 tag i u Tekst tabu izgleda ovako:
<h3>Faza 1 : Razvoj back-enda</h3>
Korak 3. Dodajte id atribut H3 tagu
U našem primjeru koristimo H3 tag, no podsjećam da id atribut možete dodati bilo kojem HTML tagu. Dakle, našem H3 tagu dodamo id po želji. U našem slučaju mediax1, te će naš kôd izgledati ovako:
<h3 id="mediax1">Faza 1 : Razvoj back-enda</h3>
Za id koristite isključivo slova i brojeve te pazite da unutar navodnika ne bude razmak.
Korak 4. Povežite H3 podnaslov s naslovom u tablici sadržaja
Sada kad smo definirali gdje će “skok” završiti, dodati ćemo link na listu naslova (Korak 1). Link ćemo dodati na način kako to inače radimo u WordPressu. Obilježite naslov koji želite pretvoriti u link i kliknite na link ikonu u tekst editoru.
U skočnom prozoru u polje URL utipkajte znak # i riječ koju ste koristili za naziv vašeg id-a. Konkretno, upišite #mediax1.
Kliknite na “Dodaj link”. Sada je vaš prvi naslov u tablici sadržaja pretvoren u link.
Korak 5. Testirajte linkove
Nakon što ste dodali link, sugeriram pregledavanje članka i testiranje jump linka. Ako sve radi, prva liga. Ako ne radi, provjerite HTML kod u Tekst tabu. Postoji i mogućnost da vaša tema ili neki od pluginova rewrite-a linkove. Ako je to slučaj, solucija je da upišete puni URL do vaše stranice + #imelinka. Ovako:
Na ovaj način možete linkati i na određeno mjesto u drugom članku na vašoj web stranici. Samo upišete cijeli URL drugog članka/stranice + #imelinka. Ovako:
Možete dodati link na određeno mjesto u drugom članku na vašoj web stranici ne koristeći tablicu sadržaja, bilo gdje u tekstu, i to na način da u Tekst tabu dodate slijedeći kôd:
<a href="http://www.moj-web.hr/neka-stranica/#naslov-ajdija">Klikni me</a>
NAPOMENA: kad kreirate id-eve za jump linkove, dajte im smislena imena kako se ne biste uskoro pogubili u nekim kriptičnim nazivima. Mogu biti duži i neka iz njih bude očito o čemu se radi.
Primjer: #kako-koristiti-page-jump
Kako kreirati link za povratak na vrh stranice ?
Na sam vrh članka/stranice, prije bilo kojeg djelića HTML koda, dodajte ovo:
<a id="vrh"></a>
Zatim, na mjesto gdje želite omogućiti čitateljima povratak na vrh stranice, upišite slijedeće:
<a href="#vrh">Na vrh ^</a>
Ako ne želite koristiti prazan a tag, možete dodati id na prvi element na stranici. Na primjer na prvi element u članku , odnosno naslov, i to na slijedeći način:
<h1 id="vrh">Glavni naslov</h1>
Kako kreirati fusnotu ?
Fusnota je riječ koja označava bilješku, napomenu stavljenu na dno stranice teksta. Fusnota dodatno objašnjava ili upućuje na dodatno objašnjenje, a može sadržavati citat ili referencu za dio teksta uz koji je postavljena. Oznaka fusnote je najčešće eksponirani broj: 1 za prvu fusnotu na stranici, 2 za drugu fusnotu itd.
Na mjestu gdje u tekstu želite dodati fusnotu upišite slijedeći kôd:
<p id="fusnota-1-povratak">Primjer fusnote.<sup><a href="#fusnota-1">[1]</a></sup></p>
Na dno stranice gdje se nalazi objašnjenje, upišite slijedeće:
<p id="fusnota-1">1. <strong><a href="#fusnota-1-povratak">^</a></strong> Objašnjenje fusnote.</p>
Obratite pažnju na niže navedeni kod. Pomoću njega smo omogućili povratak nazad na mjesto gdje se fusnota u tekstu nalazi. Koristili smo znak “^”.
<a href="#fusnota-1-povratak">^</a>
BONUS: CSS pravila za tablicu sadržaja ?
Kreirali ste tablicu sadržaja, sve polinkali kako spada ali vam tablica izgleda kao najobičnija lista? Popis naslova (Korak 1) smo “wrapali” u H3 tag tako da izgleda ovako:
<h3 id="toc"> <a href="#mediax1">Faza 1. Razvoj back-enda</a> <a href="#mediax2">Faza 2. Razvoj Front-enda</a> <a href="#mediax3">Faza 3. Implementacija i testiranje</a> </h3>
Evo i CSS stilova za našu testnu tablicu sadržaja. Popisu naslova dodali smo id toc i u style.css dodali slijedeća CSS pravila:
#toc { font-weight: 100; font-size: 13px; background: #ec4f2c; float: right; background-color: rgba(214, 214, 214, 0.24); border: 3px solid rgba(180, 180, 180, 0.53); padding: 10px; border-radius: 8px; margin: 10px; text-decoration: underline;
Kliknite niže na + i pogledajte primjer članka u kojem je korištena tablica sadržaja, fusnota i linkovi za povratak na vrh koristeći kôd iz ovog članka.
[toggle header=”Primjer tablice sadržaja”]
Primjer tablice sadržaja
Lorem Ipsum je jednostavno probni tekst koji se koristi u tiskarskoj i slovoslagarskoj industriji. Lorem Ipsum postoji kao industrijski standard još od 16-og stoljeća, kada je nepoznati tiskar uzeo tiskarsku galiju slova i posložio ih da bi napravio knjigu s uzorkom tiska.
Taj je tekst ne samo preživio pet stoljeća, već se i vinuo u svijet elektronskog slovoslagarstva, ostajući u suštini nepromijenjen. Postao je popularan tijekom 1960-ih s pojavom Letraset listova s odlomcima Lorem Ipsum-a, a u skorije vrijeme sa software-om za stolno izdavaštvo kao što je Aldus PageMaker koji također sadrži varijante Lorem Ipsum-a.
Primjer fusnote.[1]
Faza 1 : Razvoj back-enda
Lorem Ipsum je jednostavno probni tekst koji se koristi u tiskarskoj i slovoslagarskoj industriji. Lorem Ipsum postoji kao industrijski standard još od 16-og stoljeća, kada je nepoznati tiskar uzeo tiskarsku galiju slova i posložio ih da bi napravio knjigu s uzorkom tiska. Taj je tekst ne samo preživio pet stoljeća, već se i vinuo u svijet elektronskog slovoslagarstva, ostajući u suštini nepromijenjen. Postao je popularan tijekom 1960-ih s pojavom Letraset listova s odlomcima Lorem Ipsum-a, a u skorije vrijeme sa software-om za stolno izdavaštvo kao što je Aldus PageMaker koji također sadrži varijante Lorem Ipsum-a.
Odavno je uspostavljena činjenica da čitača ometa razumljivi tekst dok gleda raspored elemenata na stranici. Smisao korištenja Lorem Ipsum-a jest u tome što umjesto ‘sadržaj ovjde, sadržaj ovjde’ imamo normalni raspored slova i riječi, pa čitač ima dojam da gleda tekst na razumljivom jeziku. Mnogi programi za stolno izdavaštvo i uređivanje web stranica danas koriste Lorem Ipsum kao zadani model teksta, i ako potražite ‘lorem ipsum’ na Internetu, kao rezultat dobit ćete mnoge stranice u izradi. Razne verzije razvile su se tijekom svih tih godina, ponekad slučajno, ponekad namjerno (s dodatkom humora i slično).
Suprotno raširenom mišljenju, Lorem Ipsum nije samo slučajni tekst, već ima korijene u klasičnoj latinskoj književnosti iz godine 45. pr.n.e., što znači da mu je preko 2000 godina. Richard McClintock, profesor latinskog jezika na Hampden-Sydney koledžu u Virginiji, potražio je jednu od čudnijijh latinskih riječi, consectetur, iz Lorem Ipsum teksta, i prolazeći kroz citate te riječi u klasičnoj književnosti, otkrio nedvojbeni izvor. Lorem Ipsum dolazi iz odlomaka 1.10.32 i 1.10.33 Ciceronovog djela pod naslovom “de Finibus Bonorum et Malorum” (Krajnosti dobra i zla), napisanog 45. godine pr.n.e. Ovo je djelo rasprava o teoriji etike, a bilo je vrlo popularno u Renesansi. Prvi redak Lorem Ipsum-a, “Lorem ipsum dolor sit amet..”, dolazi iz odlomka 1.10.32.
Odavno je uspostavljena činjenica da čitača ometa razumljivi tekst dok gleda raspored elemenata na stranici. Smisao korištenja Lorem Ipsum-a jest u tome što umjesto ‘sadržaj ovjde, sadržaj ovjde’ imamo normalni raspored slova i riječi, pa čitač ima dojam da gleda tekst na razumljivom jeziku. Mnogi programi za stolno izdavaštvo i uređivanje web stranica danas koriste Lorem Ipsum kao zadani model teksta, i ako potražite ‘lorem ipsum’ na Internetu, kao rezultat dobit ćete mnoge stranice u izradi. Razne verzije razvile su se tijekom svih tih godina, ponekad slučajno, ponekad namjerno (s dodatkom humora i slično).
Suprotno raširenom mišljenju, Lorem Ipsum nije samo slučajni tekst, već ima korijene u klasičnoj latinskoj književnosti iz godine 45. pr.n.e., što znači da mu je preko 2000 godina. Richard McClintock, profesor latinskog jezika na Hampden-Sydney koledžu u Virginiji, potražio je jednu od čudnijijh latinskih riječi, consectetur, iz Lorem Ipsum teksta, i prolazeći kroz citate te riječi u klasičnoj književnosti, otkrio nedvojbeni izvor. Lorem Ipsum dolazi iz odlomaka 1.10.32 i 1.10.33 Ciceronovog djela pod naslovom “de Finibus Bonorum et Malorum” (Krajnosti dobra i zla), napisanog 45. godine pr.n.e. Ovo je djelo rasprava o teoriji etike, a bilo je vrlo popularno u Renesansi. Prvi redak Lorem Ipsum-a, “Lorem ipsum dolor sit amet..”, dolazi iz odlomka 1.10.32.
Za one koje zanima, standardni dio Lorem Ipsum-a koji se koristi od 16.-og stoljeća može se naći u nastavku na ovoj stranici. Dijelovi 1.10.32 i 1.10.33 iz djela “de Finibus Bonorum et Malorum” su doslovno preneseni iz originala, popraćeni engleskim prijevodom H. Rackhama iz 1914.
Postoje mnoge varijacije odlomaka iz Lorem Ipsum-a, ali većina je pretrpjela kojekakve promjene s dodanim humorom, ili nasumičnim riječima koje nikako tu ne spadaju. Ako trebate koristiti Lorem Ipsum, morate biti sigurni da tekst ne sadrži skrivene nepodobne riječi ili fraze. Lorem Ipsum generatori na Internetu većinom ponavljaju zadane odlomke po potrebi, što ovaj naš čini prvim pravim generatorom na Internetu. Mi koristimo riječnik od 200 latinskih riječi, u kombinaciji s nekoliko modela rečeničnih struktura, da bi generirali Lorem Ipsum koji izgleda razumno. Stoga je Lorem Ipsum s ove stranice uvijek bez ponavljanja, bez dodanog humora ili nekaraketerističnih riječi.
Faza 2 : Razvoj Front-enda
Lorem Ipsum je jednostavno probni tekst koji se koristi u tiskarskoj i slovoslagarskoj industriji. Lorem Ipsum postoji kao industrijski standard još od 16-og stoljeća, kada je nepoznati tiskar uzeo tiskarsku galiju slova i posložio ih da bi napravio knjigu s uzorkom tiska. Taj je tekst ne samo preživio pet stoljeća, već se i vinuo u svijet elektronskog slovoslagarstva, ostajući u suštini nepromijenjen. Postao je popularan tijekom 1960-ih s pojavom Letraset listova s odlomcima Lorem Ipsum-a, a u skorije vrijeme sa software-om za stolno izdavaštvo kao što je Aldus PageMaker koji također sadrži varijante Lorem Ipsum-a.
Odavno je uspostavljena činjenica da čitača ometa razumljivi tekst dok gleda raspored elemenata na stranici. Smisao korištenja Lorem Ipsum-a jest u tome što umjesto ‘sadržaj ovjde, sadržaj ovjde’ imamo normalni raspored slova i riječi, pa čitač ima dojam da gleda tekst na razumljivom jeziku. Mnogi programi za stolno izdavaštvo i uređivanje web stranica danas koriste Lorem Ipsum kao zadani model teksta, i ako potražite ‘lorem ipsum’ na Internetu, kao rezultat dobit ćete mnoge stranice u izradi. Razne verzije razvile su se tijekom svih tih godina, ponekad slučajno, ponekad namjerno (s dodatkom humora i slično).
Suprotno raširenom mišljenju, Lorem Ipsum nije samo slučajni tekst, već ima korijene u klasičnoj latinskoj književnosti iz godine 45. pr.n.e., što znači da mu je preko 2000 godina. Richard McClintock, profesor latinskog jezika na Hampden-Sydney koledžu u Virginiji, potražio je jednu od čudnijijh latinskih riječi, consectetur, iz Lorem Ipsum teksta, i prolazeći kroz citate te riječi u klasičnoj književnosti, otkrio nedvojbeni izvor. Lorem Ipsum dolazi iz odlomaka 1.10.32 i 1.10.33 Ciceronovog djela pod naslovom “de Finibus Bonorum et Malorum” (Krajnosti dobra i zla), napisanog 45. godine pr.n.e. Ovo je djelo rasprava o teoriji etike, a bilo je vrlo popularno u Renesansi. Prvi redak Lorem Ipsum-a, “Lorem ipsum dolor sit amet..”, dolazi iz odlomka 1.10.32.
Odavno je uspostavljena činjenica da čitača ometa razumljivi tekst dok gleda raspored elemenata na stranici. Smisao korištenja Lorem Ipsum-a jest u tome što umjesto ‘sadržaj ovjde, sadržaj ovjde’ imamo normalni raspored slova i riječi, pa čitač ima dojam da gleda tekst na razumljivom jeziku. Mnogi programi za stolno izdavaštvo i uređivanje web stranica danas koriste Lorem Ipsum kao zadani model teksta, i ako potražite ‘lorem ipsum’ na Internetu, kao rezultat dobit ćete mnoge stranice u izradi. Razne verzije razvile su se tijekom svih tih godina, ponekad slučajno, ponekad namjerno (s dodatkom humora i slično).
Suprotno raširenom mišljenju, Lorem Ipsum nije samo slučajni tekst, već ima korijene u klasičnoj latinskoj književnosti iz godine 45. pr.n.e., što znači da mu je preko 2000 godina. Richard McClintock, profesor latinskog jezika na Hampden-Sydney koledžu u Virginiji, potražio je jednu od čudnijijh latinskih riječi, consectetur, iz Lorem Ipsum teksta, i prolazeći kroz citate te riječi u klasičnoj književnosti, otkrio nedvojbeni izvor. Lorem Ipsum dolazi iz odlomaka 1.10.32 i 1.10.33 Ciceronovog djela pod naslovom “de Finibus Bonorum et Malorum” (Krajnosti dobra i zla), napisanog 45. godine pr.n.e. Ovo je djelo rasprava o teoriji etike, a bilo je vrlo popularno u Renesansi. Prvi redak Lorem Ipsum-a, “Lorem ipsum dolor sit amet..”, dolazi iz odlomka 1.10.32.
Za one koje zanima, standardni dio Lorem Ipsum-a koji se koristi od 16.-og stoljeća može se naći u nastavku na ovoj stranici. Dijelovi 1.10.32 i 1.10.33 iz djela “de Finibus Bonorum et Malorum” su doslovno preneseni iz originala, popraćeni engleskim prijevodom H. Rackhama iz 1914.
Postoje mnoge varijacije odlomaka iz Lorem Ipsum-a, ali većina je pretrpjela kojekakve promjene s dodanim humorom, ili nasumičnim riječima koje nikako tu ne spadaju. Ako trebate koristiti Lorem Ipsum, morate biti sigurni da tekst ne sadrži skrivene nepodobne riječi ili fraze. Lorem Ipsum generatori na Internetu većinom ponavljaju zadane odlomke po potrebi, što ovaj naš čini prvim pravim generatorom na Internetu. Mi koristimo riječnik od 200 latinskih riječi, u kombinaciji s nekoliko modela rečeničnih struktura, da bi generirali Lorem Ipsum koji izgleda razumno. Stoga je Lorem Ipsum s ove stranice uvijek bez ponavljanja, bez dodanog humora ili nekaraketerističnih riječi.
Faza 3 : Implementacija i testiranje
Lorem Ipsum je jednostavno probni tekst koji se koristi u tiskarskoj i slovoslagarskoj industriji. Lorem Ipsum postoji kao industrijski standard još od 16-og stoljeća, kada je nepoznati tiskar uzeo tiskarsku galiju slova i posložio ih da bi napravio knjigu s uzorkom tiska. Taj je tekst ne samo preživio pet stoljeća, već se i vinuo u svijet elektronskog slovoslagarstva, ostajući u suštini nepromijenjen. Postao je popularan tijekom 1960-ih s pojavom Letraset listova s odlomcima Lorem Ipsum-a, a u skorije vrijeme sa software-om za stolno izdavaštvo kao što je Aldus PageMaker koji također sadrži varijante Lorem Ipsum-a.
Odavno je uspostavljena činjenica da čitača ometa razumljivi tekst dok gleda raspored elemenata na stranici. Smisao korištenja Lorem Ipsum-a jest u tome što umjesto ‘sadržaj ovjde, sadržaj ovjde’ imamo normalni raspored slova i riječi, pa čitač ima dojam da gleda tekst na razumljivom jeziku. Mnogi programi za stolno izdavaštvo i uređivanje web stranica danas koriste Lorem Ipsum kao zadani model teksta, i ako potražite ‘lorem ipsum’ na Internetu, kao rezultat dobit ćete mnoge stranice u izradi. Razne verzije razvile su se tijekom svih tih godina, ponekad slučajno, ponekad namjerno (s dodatkom humora i slično).
Suprotno raširenom mišljenju, Lorem Ipsum nije samo slučajni tekst, već ima korijene u klasičnoj latinskoj književnosti iz godine 45. pr.n.e., što znači da mu je preko 2000 godina. Richard McClintock, profesor latinskog jezika na Hampden-Sydney koledžu u Virginiji, potražio je jednu od čudnijijh latinskih riječi, consectetur, iz Lorem Ipsum teksta, i prolazeći kroz citate te riječi u klasičnoj književnosti, otkrio nedvojbeni izvor. Lorem Ipsum dolazi iz odlomaka 1.10.32 i 1.10.33 Ciceronovog djela pod naslovom “de Finibus Bonorum et Malorum” (Krajnosti dobra i zla), napisanog 45. godine pr.n.e. Ovo je djelo rasprava o teoriji etike, a bilo je vrlo popularno u Renesansi. Prvi redak Lorem Ipsum-a, “Lorem ipsum dolor sit amet..”, dolazi iz odlomka 1.10.32.
Odavno je uspostavljena činjenica da čitača ometa razumljivi tekst dok gleda raspored elemenata na stranici. Smisao korištenja Lorem Ipsum-a jest u tome što umjesto ‘sadržaj ovjde, sadržaj ovjde’ imamo normalni raspored slova i riječi, pa čitač ima dojam da gleda tekst na razumljivom jeziku. Mnogi programi za stolno izdavaštvo i uređivanje web stranica danas koriste Lorem Ipsum kao zadani model teksta, i ako potražite ‘lorem ipsum’ na Internetu, kao rezultat dobit ćete mnoge stranice u izradi. Razne verzije razvile su se tijekom svih tih godina, ponekad slučajno, ponekad namjerno (s dodatkom humora i slično).
Suprotno raširenom mišljenju, Lorem Ipsum nije samo slučajni tekst, već ima korijene u klasičnoj latinskoj književnosti iz godine 45. pr.n.e., što znači da mu je preko 2000 godina. Richard McClintock, profesor latinskog jezika na Hampden-Sydney koledžu u Virginiji, potražio je jednu od čudnijijh latinskih riječi, consectetur, iz Lorem Ipsum teksta, i prolazeći kroz citate te riječi u klasičnoj književnosti, otkrio nedvojbeni izvor. Lorem Ipsum dolazi iz odlomaka 1.10.32 i 1.10.33 Ciceronovog djela pod naslovom “de Finibus Bonorum et Malorum” (Krajnosti dobra i zla), napisanog 45. godine pr.n.e. Ovo je djelo rasprava o teoriji etike, a bilo je vrlo popularno u Renesansi. Prvi redak Lorem Ipsum-a, “Lorem ipsum dolor sit amet..”, dolazi iz odlomka 1.10.32.
Za one koje zanima, standardni dio Lorem Ipsum-a koji se koristi od 16.-og stoljeća može se naći u nastavku na ovoj stranici. Dijelovi 1.10.32 i 1.10.33 iz djela “de Finibus Bonorum et Malorum” su doslovno preneseni iz originala, popraćeni engleskim prijevodom H. Rackhama iz 1914.
Postoje mnoge varijacije odlomaka iz Lorem Ipsum-a, ali većina je pretrpjela kojekakve promjene s dodanim humorom, ili nasumičnim riječima koje nikako tu ne spadaju. Ako trebate koristiti Lorem Ipsum, morate biti sigurni da tekst ne sadrži skrivene nepodobne riječi ili fraze. Lorem Ipsum generatori na Internetu većinom ponavljaju zadane odlomke po potrebi, što ovaj naš čini prvim pravim generatorom na Internetu. Mi koristimo riječnik od 200 latinskih riječi, u kombinaciji s nekoliko modela rečeničnih struktura, da bi generirali Lorem Ipsum koji izgleda razumno. Stoga je Lorem Ipsum s ove stranice uvijek bez ponavljanja, bez dodanog humora ili nekaraketerističnih riječi.
1. ^ Eto nas na fusnoti. Mali komadić koda koji smo koristili za ovu fusnotu vas je doveo na kraj članka. Ono što je izuzetno važno prilikom korištenja fusnota je to da čitateljima morate omogućiti da se klikom na link odmah vrate na poziciju u tekstu odakle su krenuli. U protivnom ćete ih zbuniti, osobito ukoliko imate mnogo sadržaja u članku.Zato smo koristili simbol “^” na početku ove fusnote. Taj je simbol još jedan jump link koji vas vraća na dio teksta gdje se tekst s fusnotom nalazi.
[/toggle]