Cum să adăugați cronologie pe site-ul WordPress?

WordPress vine cu un editor de blocuri Gutenberg implicit care oferă blocuri pentru inserarea de butoane, pictograme sociale, coloane și multe alte elemente. Cu toate acestea, în multe situații aveți nevoie de widget-uri personalizate, cum ar fi Întrebări frecvente, acordeon, cronologie etc. În special, cronologia va fi mai utilă pentru a prezenta cititorilor dvs. progresul sau creșterea. Deși nu există blocuri implicite pentru cronologia, din fericire, aveți mai multe moduri de a adăuga cronologia pe site-ul WordPress.

Înrudit: Cum să adăugați widget cronologie pe site-ul Weebly?

Ce este o cronologie?

Cronologia este o reprezentare vizuală a evenimentelor afișate în funcție de timp. Acestea pot lua forma de videoclipuri, imagini, text sau alte forme de conținut pentru a oferi o experiență de utilizator atrăgătoare și extrem de interactivă. Puteți adăuga cronologie pe site-ul WordPress într-o direcție verticală sau orizontală, prezentând fluxul de evenimente.

Avantajele adăugării cronologiei?

Există multe motive pentru care ați putea dori să inserați o cronologie într-o postare sau pagină:

• Este o modalitate excelentă de a vă prezenta progresul companiei sau istoria mărcii de-a lungul anilor.
• Dacă oferiți servicii de proiect, este util să afișați etapele de dezvoltare ale proiectelor.
• Puteți folosi cronologia pentru liniile de viață ale produselor și pentru a prezenta realizările.
• De asemenea, cronologia este utilă atunci când doriți să spuneți povești, să vizualizați produse și procese (care transmit mesaje complexe ca fiind mai simple) utilizatorilor finali sau publicului țintă.

Astfel, afișarea unor cronologie frumoase vă ajută să creați mai multă încredere în vizitatorii dvs. și iată cum să le faceți.

Diferite metode de a adăuga cronologie în WordPress

Opțiunea ușoară în WordPress este să utilizați unul dintre pluginurile de cronologie disponibile. Cu toate acestea, puteți, de asemenea, să creați pur și simplu un widget și să inserați oriunde cu conținut personalizat.

1. Widget cronologic vertical personalizat

Mai jos este widgetul cronologic personalizat pe care îl puteți insera oriunde pe site-ul dvs. folosind blocul „HTML personalizat”.

• 2025

  Evenimentul cronologic 5

  Iată conținutul evenimentului tău cronologic. Introduceți un mic paragraf pentru a descrie evenimentul în detaliu.

• 2024

  Evenimentul cronologic 4

  Iată conținutul evenimentului tău cronologic. Introduceți un mic paragraf pentru a descrie evenimentul în detaliu.

• 2023

  Evenimentul cronologic 3

  Iată conținutul evenimentului tău cronologic. Introduceți un mic paragraf pentru a descrie evenimentul în detaliu.

• 2022

  Evenimentul cronologic 2

  Iată conținutul evenimentului tău cronologic. Introduceți un mic paragraf pentru a descrie evenimentul în detaliu.

• 2021

  Evenimentul cronologic 1

  Iată conținutul evenimentului tău cronologic. Introduceți un mic paragraf pentru a descrie evenimentul în detaliu.

Mai jos este codul complet pentru widget-ul cronologic și puteți personaliza aspectul și textul în funcție de nevoile dvs. Puteți introduce acest cod oriunde pe site-ul dvs. fără niciun plugin suplimentar.

 <style> .tl { position: relative; padding: 20px 0 20px; list-style: none; } .tl:before { content: " "; position: absolute; top: 0; bottom: 0; left: 50%; width: 3px; margin-left: -1.5px; background-color: #eeeeee; } .tl > li { position: relative; margin-bottom: 20px; list-style-type: none !important; } .tl > li:before, .tl > li:after { content: " "; display: table; } .tl > li:after { clear: both; } .tl > li:before, .tl > li:after { content: " "; display: table; } .tl > li:after { clear: both; } .tl > li > .tl-panel { float: left; position: relative; width: 40%; padding: 20px; border: 1px solid #d4d4d4; border-radius: 5px; -webkit-box-shadow: 0 1px 6px rgba(0,0,0,0.175); box-shadow: 0 1px 6px rgba(0,0,0,0.175); } .tl-body { font-size: 18px; line-height: 26px; color: rgba(121, 112, 112, 0.71); } .tl > li > .tl-panel:before { content: " "; display: inline-block; position: absolute; top: 26px; right: -15px; border-top: 15px solid transparent; border-right: 0 solid #ccc; border-bottom: 15px solid transparent; border-left: 15px solid #ccc; } .tl > li > .tl-panel:after { content: " "; display: inline-block; position: absolute; top: 27px; right: -14px; border-top: 14px solid transparent; border-right: 0 solid #fff; border-bottom: 14px solid transparent; border-left: 14px solid #fff; } .tl > li > .tl-badge { z-index: 1; position: absolute; top: 16px; left: 50%; width: 50px; height: 50px; margin-left: -25px; border-radius: 50% 50% 50% 50%; text-align: center; font-size: 1.4em; line-height: 50px; color: #fff; background-color: #999999; } .tl > li.tl-inverted > .tl-panel { float: right; } .tl > li.tl-inverted > .tl-panel:before { right: auto; left: -15px; border-right-width: 15px; border-left-width: 0; } .tl > li.tl-inverted > .tl-panel:after { right: auto; left: -14px; border-right-width: 14px; border-left-width: 0; } .tl-badge { font-size: 18px !important; font-weight: bold; } .tl-badge.primary { background-color: #2e6da4 !important; } .tl-badge.success { background-color: #3f903f !important; } .tl-badge.warning { background-color: #f0ad4e !important; } .tl-badge.danger { background-color: #d9534f !important; } .tl-badge.info { background-color: #5bc0de !important; } .tl-title { margin-top: 0; margin-bottom: 10px; color: rgba(45, 45, 72, 0.44); font-size: 20px; } @media screen and (max-width: 380px) { .tl > li > .tl-panel { width:25% !important; } } @media screen and (max-width: 800px) { .tl > li > .tl-panel { width:33%; } } </style> <ul class="tl"> <li> <div class="tl-badge success"> 2025 </div> <div class="tl-panel"> <div class="tl-heading"> <h4 class="tl-title">Timeline Event 5</h4> </div> <div class="tl-body"> <p>Here is the content for your timeline event. Enter a small paragraph to describe the event in detail.</p> </div> </div> </li> <li class="tl-inverted"> <div class="tl-badge warning"> 2024 </div> <div class="tl-panel"> <div class="tl-heading"> <h4 class="tl-title">Timeline Event 4</h4> </div> <div class="tl-body"> <p>Here is the content for your timeline event. Enter a small paragraph to describe the event in detail.</p> </div> </div> </li> <li> <div class="tl-badge danger"> 2023 </div> <div class="tl-panel"> <div class="tl-heading"> <h4 class="tl-title">Timeline Event 3</h4> </div> <div class="tl-body"> <p>Here is the content for your timeline event. Enter a small paragraph to describe the event in detail.</p> </div> </div> </li> <li class="tl-inverted"> <div class="tl-badge"> 2022 </div> <div class="tl-panel"> <div class="tl-heading"> <h4 class="tl-title">Timeline Event 2</h4> </div> <div class="tl-body"> <p>Here is the content for your timeline event. Enter a small paragraph to describe the event in detail.</p> </div> </div> </li> <li> <div class="tl-badge info"> 2021 </div> <div class="tl-panel"> <div class="tl-heading"> <h4 class="tl-title">Timeline Event 1</h4> </div> <div class="tl-body"> <p>Here is the content for your timeline event. Enter a small paragraph to describe the event in detail.</p> </div> </div> </li> </ul>

2. Adăugați cronologie în WordPress cu Cool Timeline Plugin

Primul pas necesită instalarea și activarea pluginului „Cool Timeline”. Utilizați funcția de căutare prin submeniul „Adăugați nou” din categoria meniului din bara laterală „Plugins” pentru a realiza acest lucru. După activarea pluginului, elementele „Povești cronologie” și „Setări cool cronologie” vor apărea acum ca noi meniuri din bara laterală în tabloul de bord. Pentru a utiliza pluginul, trebuie să creați povești și apoi să creați o cronologie pentru a afișa poveștile pe măsură ce evenimentele decurg.

Configurați setările implicite ale pluginului

Dacă doriți să personalizați setările implicite, accesați meniul „Cool Timeline Settings” pentru a găsi toate setările relevante pe care le puteți utiliza cu pluginul Cool Timeline.

• Setări generale – aici puteți personaliza alinierea implicită, lungimea conținutului, eticheta titlului, numărul de articole de afișat, activarea sau dezactivarea citirii mai multe, ordinea poveștilor etc.
• Setări de stil – aici puteți personaliza culorile pentru fundal și alte elemente. De asemenea, puteți adăuga CSS personalizat pentru a vă decora cronologia conform nevoilor dvs.
• Setări tipografie – setați dimensiunea fontului, familia și greutatea pentru fiecare element din cronologia.
• Setări avansate – aici puteți găsi diferențele dintre versiunile gratuite și pro.

După ce ați terminat personalizările, faceți clic pe butonul „Salvare modificări” pentru a salva toate setările.

Creați povești pentru cronologie

După cum am menționat, trebuie să creați povești pentru a le folosi ca evenimente în widget-ul cronologiei. Treceți cursorul pe meniul „Povești cronologie” și faceți clic pe submeniul „Adăugați nou” din panoul de administrare al site-ului dvs. Adăugați titlu și conținut media care ar merge alături de povestea dvs. De asemenea, introduceți descrierea poveștii folosind fie interfața „Vizuală, fie „Text”. Faceți clic pe butonul „Adăugați pictogramă” pentru a selecta o pictogramă poveste.

Apoi, derulați în jos la „Setări Povestea cronologiei” și selectați data/anul/ora poveștii, declarați imaginea poveștii ca dimensiune mică sau completă. Setați imaginea prezentată și completați funcții suplimentare precum formatul poveștii, categoriile și setările personalizate pe care le include versiunea pro. Puteți lăsa câmpurile pentru versiunea pro necompletate atunci când utilizați versiunea gratuită a pluginului. În cele din urmă, atingeți butonul „Publicați” pentru a vă crea povestea cronologică cu succes. De asemenea, faceți același lucru pentru alte povești care ar apărea în cronologia dvs.

Notă: După cum vedeți, pluginul folosește Editorul clasic pentru a crea povești, în timp ce acceptă blocurile Gutenberg, precum și widgetul Editor clasic pentru inserarea în postare. Poveștile pe care le creați sunt stocate ca tip de postare personalizat cu numele cool_timeline.

Adăugați cronologie în postarea sau pagina WordPress

Plugin-ul oferă mai multe aspecte ale cronologiei, cum ar fi machete verticale, orizontale, unilaterale, simple și compacte. Vom explica cum să folosiți cronologia atât în ​​Gutenberg, cât și în editorii clasici.

Folosind Cool Timeline Shortcode Block în Gutenberg Editor

Aveți două moduri de a genera și adăuga cronologia - utilizați codul scurt sau utilizați blocul instantaneu de generare a cronologiei. Când vă aflați în editorul Gutenberg, faceți clic pe pictograma + din colțul din dreapta sus și căutați „cronologie”. Veți vedea două blocuri – Cool Timeline Shortcode și Cool Timeline – Insta Builder.

Faceți clic pe blocul „Cool Timeline Shortcode” și pluginul vă va afișa previzualizarea împreună cu shortcode-ul. Puteți personaliza setările din bara laterală, cum ar fi schimbarea aspectului și puteți completa alte detalii pe măsură ce vă corespund intereselor. Shortcode-ul va fi actualizat automat și va apăsa butonul „Publica”.

Acum, puteți vedea că poveștile sunt inserate automat într-un aspect frumos cronologic conform setărilor dvs.

Dacă doriți să afișați poveștile într-o cronologie orizontală, trebuie doar să selectați „Orizontal” ca aspect al cronologiei și alte setări pentru a se potrivi cronologiei dvs. Cealaltă parte, aspecte simple și compacte vor funcționa fie ca setări orizontale sau verticale ale cronologiei.

De fapt, puteți lipi codul scurt de mai jos direct oriunde pe site-ul dvs. pentru a prezenta poveștile ca o cronologie.

 [cool-timeline layout="default" skin="default" date-format="F j" icons="YES" show-posts="10" animation="FadeInOut" order="DESC" story-content="full"]

Explicațiile pentru a efectua editarea sunt următoarele:

• Cool-timeline: este sintaxa noastră implicită de pornire a pluginului.
• Aspect: există aproximativ cinci opțiuni majore de aspect, care sunt verticale, orizontale, unilaterale, simple și compacte. Puteți face modificări în codul de mai sus pentru a intra în considerațiile dvs.
• Skin: opțiunile curate/implicite sunt disponibile aici.
• Format de dată: puteți alege orice format de dată pentru a fi afișat alături de povești, în funcție de limba sau de reprezentarea stilului dvs. de țară.
• Pictograme: puteți alege să activați sau să dezactivați pictogramele (Da/Nu) pentru orice poveste cronologică.
• Postări de prezentare: asistați la paginare, adesea pentru o cronologie (cu o mulțime de povești).
• Animație: există un singur efect de animație disponibil în versiunea gratuită Cool Timeline (adică – FadeInOut). Puteți cumpăra pro pentru mai mult.
• Ordine: ajută la aranjarea și gestionarea modului în care apar poveștile pe cronologia, fie în ordine crescătoare, fie în ordine descrescătoare (ASC/DESC).
• Conținutul poveștii: are fie o opțiune scurtă/completă pentru a afișa întregul text HTML, fie o scurtă descriere cu citire mai multe pentru poveștile cronologice.

Adăugați cronologie în Gutenberg folosind Instant Builder Block

Metoda shortcode este utilă, deoarece puteți copia și lipi shortcode-ul oriunde pe site-ul dvs. pentru a afișa aceeași cronologie. Cu toate acestea, trebuie să creați povești, iar poveștile pot fi folosite doar într-o singură cronologie. Dacă doriți să creați mai multe cronologie care să arate diferite evenimente, atunci puteți face acest lucru cu ușurință în timp real folosind blocul „Cool Timeline – Instant Builder” cu setările sale. În pagina dvs. sau în tabloul de bord al editorului de postări, căutați și adăugați blocul „Cool Timeline – Instant Builder”. Începeți să editați titlul cronologiei, descrierea, datele, pictogramele, imaginile și adăugați mai multe povești dacă doriți. Puteți utiliza fie „Implicit (ambele fețe)”, fie „Une parte” ca aspect al cronologiei și să personalizați dimensiunile și culorile titlului/descrierea.

Adăugați cronologie cu Elementor Page Builder

Pluginul Cool Timeline oferă un plugin suplimentar de utilizat cu popularul plugin Elementor pentru generarea de pagini. Dacă utilizați Elementor, instalați și activați pluginul „Elementor Timeline Widget Addon”, editați pagina sau postați cu care doriți să vă creați cronologia (butonul „Editați cu Elementor”). Introduceți „cronologia” în bara de căutare, apoi trageți și plasați componenta „Cronologia poveștii”. Utilizați setările „Editați cronologia poveștii” pentru a modifica diferite opțiuni pentru a îndeplini cerințele dvs. ideale pentru cronologia.

Utilizarea Editorului clasic pentru inserarea cronologiei

Dacă utilizați Classic Editor în loc de Gutenberg, nu vă faceți griji!!! Cool Timeline are o opțiune și pentru Editorul clasic. Când vă aflați în Editorul clasic, faceți clic pe meniul drop-down „Cool Timeline Shortcode” și alegeți „Add Cool Timeline Shortcode”.

Ajustați selecțiile în fereastra pop-up și faceți clic pe butonul „OK” pentru a introduce codul scurt al cronologiei.

În mod similar, puteți selecta opțiunea „Add Cool Horizontal Timeline” pentru a insera un widget de cronologie orizontală.

Gânduri finale

O cronologie poate spori semnificativ credibilitatea afacerii tale. Deși există multe pluginuri de cronologie disponibile, pluginul Cool Timeline oferă o modalitate decentă de a adăuga o cronologie pe site-ul WordPress. puteți crea cu ușurință machete verticale sau orizontale, personalizați aspectul. Dacă nu sunteți interesat să utilizați pluginul, atunci utilizați codul widget prezentat mai sus.