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

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

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

Списъци в WordPress

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

Пример: 

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

Пример:

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

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

1. List-style-image

(adsbygoogle = window.adsbygoogle || []).push({});

Дефинира 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, Е2 и Е3 съответно с групи елементи от Елемент 1…. Елемент 15.

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

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

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

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

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

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

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