WordPress Plugins – Easy Table of Contents

Съдържание

В статията ще ви представим един много полезен за читателите плъгин Easy Table of Contents, който автоматично създава списък с линкове от заглавията на секциите в страница или публикация.

По този начин читателите добиват представа за цялото съдържание и могат да навигират лесно към секциите, които те считат за интересни и полезни.

Инсталиране и достъп до настройки

Влизаме в Plugins > Add New, въвеждаме името на плъгина Easy Table of Contents в полето за търсене и инсталираме и активираме плъгина:

Настройките на плъгина може да достъпим от две места. През линка Settings в Plugins > Easy Table of Contents:

или ако кликнем линка Settings > Table of Contents в главното меню:

Настройки в панел General

В панела General избираме типовете съдържание, за които плъгина ще създава Table of Contents блок (в примера създаваме страница с дълъг текст, разделен на параграфи със заглавия H2, H3 и H4):

Маркираме опцията Auto Insert за да активираме плъгина за всички страници (опцията за персонализирани настройки разглеждаме в края на статията):

Настройката Position служи за позициониране на блока с линкове. Налични са следните опции в падащото меню:

Before first heading - преди първото заглавие;
After first heading - след първото заглавие;
Top - най-отгоре след заглавиете на страницата;
Bottom - най-отдолу след публикацията;
Show when - след колко заглавия да се зарежда Table of Contents;
Display Header Label - дали да се показва етикета на Table of Contents;
Header Label - тук въвеждаме желаното от нас име на блока;

Ако са маркирани следващите две настройки - Toggle View и Initial View, по подразбиране Table of Contents ще бъде затворен и потребителя по желание може да го отвори като кликне иконата вдясно:

Описание на последните три настройки в панела General:

Show as Hierarchy - стилизиране на линковете в йерархичен ред;
Counter - активиране на брояч, който поставя номер пред всеки линк, запазвайки йерархията;
Smooth Scroll - плавно превъртане до съответната секция от съдържанието;

Настройки в панел Appearance

В панела Appearance имаме достъп до следните настройки:

Width - ширина на Table of Contents - опцията Auto се настройва автоматично спрямо най-дългия линк.

Ако изберем фиксирана стойност Custom Width някои линкове може да се разделят на два реда.

Ако от падащото меню Float изберем другите две опции - Left или Right, текста от първия параграф ще обвие Table of Contents отстрани и отдолу, ако е достатъчно дълъг.

Следващите три настройки определят големината на заглавието на Table of Contents (Title Font Size), дебелина на шрифта (Title Font Weight) и големина на линковете (Font Size).

Настройки на цветовата гама

Следващите настройки дефинират цветовата гама на Table of Contents. В секция Theme може да изберем между няколко готови цветови решения, но най-добре е да маркираме опцията Custom и да поставим точните цветове на нашия сайт в секция Custom Theme:

Background Color - цвят на фона;
Border Color - цвят на границата;
Title Color - цвят на заглавието;
Link Color - цвят на линковете;
Link Hover Color - цвят на линковете при посочване с мишката;
Link Visited Color - цвят на посетените линкове;

В секция Headings избираме за кой тип заглавия да се създават линкове:

Настройката Smooth Scroll Offset показва разстоянието от горния край на екрана до избраното заглавие:

Така изглежда в персонализиран вид Table of Contents на примерната страница:

Виждате колко добре работи подреждането и номерирането на линковете в йерархичен ред.

Кликаме даден линк и съдържанието плавно се превърта до избраното заглавие:

Пренаписване на настройки за отделна статия

И в двата WordPress редактора (Gutenberg и Classic Editor) при инсталацията се появява допълнителен панел Table of Contents под страницата или публикацията. Ако не виждате този панел трява да го активирате през Screen Options (Classic Editor) или в панела Options (Gutenberg):

С маркиране на опцията Disable the automatic... изключваме общите настройки и в полетата по-долу въвеждаме специфични настройки само за тази страница или публикация: