Персонализирани списъци в WordPress публикации

Списъците играят много важна роля в текстовете, a в WordPress – като елемент от структурата на публикацията.

Персонализирани списъци в WordPress
От тук използвам имената на приложенията за примерите надолу.

По-точно като структурен елемент на страниците HTML. В редкторите WYSIWYG, които се използват за създаване на форматиран текст в WordPress, Blogger и други, има само начини за създаване на стандартни номерирани и пунктови списъци. За разнообразие, красота, прегледност могат да се създадат други типологии – персонализирани списъци.

 

Списъци в WordPress

HTML дава възможност с таговете за неномерирани списъци <ul></ul> и за номерирани списъци <ol></ol> и за елементи от списъците <li> да се създават списъци, чрез редактора на WordPress, без да има необходимост да се знае кода.

Пример: Персонализирани списъци в WordPress 2

Благодарение на CSS можем да дефинираме по различни начини вида на HTML списъците.

Пример:

Персонализирани списъци в WordPress 3

Персонализирани списъци в WordPress

В CSS3 имаме общо 4 свойства на форматирането на списъците. 3 от тях определят единични аспекти. Четвъртият тип list-style е свойство в съкратен синтаксис.

1. List-style-image



Дефинира URL на едно изображение, което да се използва като маркер на списъците.

Синтаксис:

selector {list-style-image: url(<url_image>);}

ul {list-style-image: url(image.png);}
ol {list-style-image: url(image.png);}

Стойностите могат да бъдат

  • URL абсолютен или относителен на изображението. 
  • Ключовата дума none : не се използва никакво изображение и маркерът е по подразбиране.

Пример:

<ol style="list-style-image: url('URL image.png');">
<li>Screenit.</li>
<li>Screenshot Utility.</li>
<li>Cattura dello schermo.</li>
<li>Touchshot.</li>
<li>Screenshot touch.</li>
</ol>

Резултатът е:

  1. Screenit.
  2. Screenshot Utility.
  3. Cattura dello schermo.
  4. Touchshot.
  5. Screenshot touch.

2. List-style-position

Показва позицията на маркера относно текста.

selector {list-style-position: value;}

Стойността може да отговаря на една от тези две ключови думи:

  • outside: стойност по подразбиране; маркерът се намира извън текста;
  • inside: маркерът става интегрирана част от текста; ако текстът започва отначалото, маркерът остава вътре.

Пример:

 

3. List-style-type

Синтаксис:

selector {list-style-type: value;}

Има дълъг списък на стойности за атрибута type.

( Част от тях са стилове, които могат да се използват чрез вградения редактор на WordPress, без да се интересуваме самите ние от кода.)

Стойност                          Описание

disc                                     плътен цветен кръг; цветът може да бъде сменен за

всички типове със свойството color

circle                                празен кръг

square                                квадратче

decimal                              десетична бройна система – 1,2,3,…

decimal-leading-      десетична бройна система с водеща цифра 0 – 01, 02, 03,…

zero

lower-roman                    малки римски цифри – i, ii, iii, iv, ….

upper-roman                      големи римски цифри – I, II, III, IV, …

lower-alpha                       букви ASCII малки – a,b,c,…

upper-alpha                       букви ASCII големи – A, B, C,…

lower-latin                       подобно на lower-alpha

upper-latin                      подобно на upper-alpha

lower-greek                      малки букви от старата гръцка азбука

Пример:

4. List-style

Синтаксис:

selector {list-style: valore-type value-position value-image ;}

Персонализирани списъци на повече нива

Код и резултат:
Списъци - код и резултат

Персонализирани списъци на две или три колонки

Код и резултат:

Списъци - код и резултат 1

Заместваме Е1, Е2 и Е3 съответно с групи елементи от Елемент 1…. Елемент 15.

Получаваме това за кода и резултата:

Списъци - код и резултат 2

Описaтелни списъци в HTML

HTML поддържа и описателни списъци. Това са списъци от термини с описание на всеки термин.

Използват се следните тагове на HTML:

<dl>  дефинира описателния списък, <dt> дефинира термина (името), <dd> описва всеки термин.

Пример и резултат:

Списъци - код и резултат 3

Има още много различни възможности за създаване на списъци, които често са необходими като важен елемент от структурата на една публикация. С повече въображение и малко познание на код HTML, CSS3 можем да си направим изразителни персонализирани списъци.

Оставете коментар

Този сайт използва Akismet за намаляване на спама. Научете как се обработват данните ви за коментари.