Персонализирани списъци в 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-zero десетична бройка системаma с водеща цифра 0 (01, 02, 03, …)
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 ;}

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

 Код:
 <ol>
<li>Елемент 1</li>
<li>Елемент 2
<ol style=“list-style:lower-alpha;“>
<li>Елемент 2.1</li>
<li>Елемент 2.2</li>
</ol> </li>
<li>Елемент 3</li>
<li>Елемент 4
<ol style=“list-style:lower-alpha;“>
<li>Елемент 4.1</li>
<li>Елемент 4.2</li>
</ol> </li>
<li>Елемент5</li>
</ol>
Елемент 2 и Елемент 4 на свой ред са съставени от списъци.
 Резултатът:
  1. Елемент 1
  2. Елемент 2
    1. Елемент 2.1
    2. Елемент 2.2
  3. Елемент 3
  4. Елемент 4
    1. Елемент 4.1
    2. Елемент 4.2
  5. Елемент 5

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

Код:

<table>
<tbody>
<tr>
<td>E1</td>
<td>E2</td>
<td>E3</td>
</tr>
</tbody>
</table>

Резултат:

E1 E2 E3

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

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

<table>
<tbody>
<tr>
<td>
<ol>
<li>Елемент 1</li>
<li>Елемент 2</li>
<li>Елемент 3</li>
<li>Елемент 4</li>
<li>Елемент 5</li>
</ol>
</td>
<td>
<ol start=“6″>
<li>Елемент 6</li>
<li>Елемент 7</li>
<li>Елемент 8</li>
<li>Елемент 9</li>
<li>Елемент 10</li>
</ol>
</td>
<td>
<ol start=“11″>
<li>Елемент 11</li>
<li>Елемент 12</li>
<li>Елемент 13</li>
<li>Елемент 14</li>
<li>Елемент 15</li>
</ol>
</td>
</tr>
</tbody>
</table>

Резултат:

  1. Елемент 1
  2. Елемент 2
  3. Елемент 3
  4. Елемент 4
  5. Елемент 5
  1. Елемент 6
  2. Елемент 7
  3. Елемент 8
  4. Елемент 9
  5. Елемент 10
  1. Елемент 11
  2. Елемент 12
  3. Елемент 13
  4. Елемент 14
  5. Елемент 15

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

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

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

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

Пример:

<dl>
<dt>Screenit</dt>
<dd>- screenshot app</dd>
<dt>Screenshot Utility</dt>
<dd>- tool for performing various operation on the screenshots</dd>
</dl>

Резултат:


Screenit
– screenshot app
Screenshot Utility
– tool for performing various operation on the screenshots

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

Бонус: Много иконки в Icondeposit.


Тагове:

Коментари