4-те най-добри начина за свиване на текст в WordPress

След като видите колко лесно е да свивате текст в WordPress, можете да се притеснявате по-малко за претрупването на сайта си с парчета съдържание, които влияят на четливостта.

Сгъваемото съдържание може да се добави с превключвател или чрез създаване на акордеон менюта. Някои WP теми се предлагат с персонализирани кратки кодове за въвеждане на менюта на акордеон навсякъде на вашия сайт.

Ако вашата тема не поддържа сгъваемо съдържание, можете да го добавите ръчно с плъгини или като редактирате файловете на вашата тема.

Той дори ще работи и с безплатни планове на WordPress.com, само без никакъв стил.

Как да свиете текст в WordPress

Използвайте плъгини „Акордеон“ или плъгини за кратък код с функцията „акордеон“ или „превключване“, за да свиете текста в WordPress. Безплатните планове на WordPress.com могат да направят съдържанието сгъваемо чрез добавяне на <подробности> HTML в текстовия редактор. На самостоятелно хоствани сайтове темите могат да бъдат кодирани за използване на WordPress куки за зареждане на jQuery UI Accordion.

Разликата между превключване и акордеон в WordPress

Функциите за акордеон и превключване са два метода, които работят за свиване на текст в WordPress.

Разликата между текст за превключване и акордеон е това...

• При елемент акордеон, когато се щракне върху една секция, се зарежда само тази секция от съдържание. Когато се щракне върху следващия елемент на акордеона, предишният текстов раздел се затваря автоматично.
• С функцията за превключване всички сгъваеми области със съдържание могат да бъдат заредени и да останат отворени. Полетата със съдържание, показани с превключващи елементи, не се затварят автоматично.

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

Те могат да превъртат заглавията на страница с често задавани въпроси, след което, когато намерят въпрос, на който искат да получат отговор, могат да щракнат, за да видят само този конкретен раздел със съдържание.

Помислете за това по този начин…

Ако искате да разберете 'колко струва доставката?', какво бихте предпочели да имате...

а) Единични заглавни ленти със специфични въпроси в заглавните тагове?

Или

б) Превъртане през 80 въпроса и отговора, докато намерите този, който искате?

Елементите на акордеона правят съдържанието ви по-пропускаемо.

4 начина за свиване на текст в WordPress

1. Използвайте блок Accordion в редактора на Gutenberg

За тези, които използват новия редактор на „блокове“ или Gutenberg на самостоятелно хостван уебсайт на WordPress, плъгините за акордеон могат да бъдат добавени от страничната лента на вашия редактор на блокове.

Това е същият процес като стария метод за добавяне на плъгини за разширяване на функционалността на вашия сайт. Просто по-удобно, тъй като вече не е необходимо да влизате в менюто на плъгините, за да добавите нов плъгин.

Заредете редактора на блокове, щракнете върху иконата +, за да добавите нов блок, след което потърсете „акордеон“.

Няма предварително инсталирани блокове за акордеон. Трябва да добавите плъгин за акордеон блок.

За нашето тестване добавената приставка беше „ акордеон ” от „WPDeveloper”.

Възможността за добавяне на плъгини от таблото за управление на редактора на WP блокове беше добавена в WordPress версия 5.6.

Ако използвате по-стара версия на WordPress, ще трябва да добавите приставката по стандартния начин.

Като алтернатива, актуализирайте вашата версия на WordPress до най-новата налична.

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

Преди беше, че скриването на изображенията в менюто на акордеона може да помогне за увеличаване на скоростта на сайта. Сега WordPress има активирано „мързеливо натоварване“ по подразбиране. Все пак това прави презентацията по-добра.

За да включите изображения в разширено съдържание, щракнете върху трите вертикални точки, изберете „Редактиране като HTML“ и добавете своя изходен код на изображението, като използвате следния HTML низ

<img src="http://yoursite.com/wp-content/uploads/2021/09/your-image-title.jpg" alt="give it an alternative title" width="###" height="###">

URL адресът на изображението се показва във вашата медийна библиотека.

2. Добавете раздел за акордеон само с HTML (изисква се за безплатни планове за WordPress.com)

При безплатните планове на WordPress.com има недостатък.

герой анджелис и сандара парк

Не можете да изпълнявате JavaScript заявки, а вие не може да инсталира WordPress плъгини или. Все още можете да свивате текст в текстовия редактор.

Отворете вашата страница или публикация в режим на редактиране и използвайте „текстовия“ редактор. Не визуалният редактор.

Кодът за добавяне е

<details>
<summary>Question 1</summary>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
</details>

(повторете толкова пъти, колкото е необходимо)

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

Тъй като е обикновен HTML, резултатът е обикновен текст.

За да включите стилизиращи елементи в акордеон или превключващи елементи, използвайте плъгин или твърдо кодирайте своя шаблон за тема.

Плъгините са по-прости, така че ако сте слаби с редактирането на код, използвайте плъгин. Плъгинът Ultimate Shortcodes има множество икони.

За страховитите продължете да четете за инструкции за твърдо кодиране на вашата тема, за да заредите персонализиран jQuery UI акордеон.

3. Използвайте Plugins, за да свиете текст в WordPress Classic Editor

Милиони потребители на WP все още работят с класическия редактор. Ако го направите, имате нужда от съвместим плъгин.

Един от най-простите плъгини за използване е...

Акордеон от PickPlugins

Този плъгин се свързва с библиотеката Font Awesome. Добавете иконата HTML код за всеки елемент от Font Awesome, за да замените стрелките по подразбиране.

//jQuery-ui-accordion
jQuery(document).ready(function($) {
$( "#accordion" ).accordion({
collapsible: true, active: false, heightStyle: "content"
});
});