Як додавати прості та елегантні виноски в WordPress

Ви хочете додати виноски до своїх публікацій у блозі WordPress?

Якщо ви пишете статтю, яка посилається на дослідження або містить багато складної інформації, ви можете використовувати виноски. Ці маленькі пронумеровані позначки в тексті надають додатковий контекст реченню або абзацу.

У цій статті ми крок за кроком покажемо вам, як додавати прості та елегантні виноски до ваших публікацій у блозі WordPress.

Якщо ви ведете освітній блог, публікуєте дослідження або висвітлюєте новини, то виноски – це чудовий спосіб надати вашому контенту більше контексту. Ви можете використовувати їх для додавання коментарів, виділення важливих фактів або вставки посилань на наукові джерела на своєму веб-сайті.

Виноска зазвичай виглядає як невеликий номер, виділений надрядковим шрифтом в основному тексті. Вміст виноски розміщується внизу сторінки або відображається у вигляді підказки, щоб відрізнити її від основного вмісту.

Ось приклад:

Example of a footnote in McKinsey's website

Окрім забезпечення ясності та прозорості для ваших читачів, виноски можуть зробити ваш веб-сайт на WordPress більш професійним та надійним. Вони показують, що ви провели дослідження і маєте джерела, які підтверджують ваші твердження.

Редактор WordPress.org тепер має вбудовану функцію виносок, яку ви можете легко використовувати для вставки додаткового контексту.

Цей посібник покаже вам, як додавати виноски WordPress до публікацій або сторінок блогу двома способами: за допомогою блоку виносок у редакторі Gutenberg і плагіна.

Ви можете скористатися посиланнями нижче, щоб перейти до конкретного методу:

Цей спосіб найкраще підходить для тих, хто хоче використовувати прості виноски без встановлення плагіна.

Щоб скористатися блоком виносок WordPress, відкрийте редактор блоків Gutenberg для нового або існуючого допису чи сторінки.

Після цього просто виділіть слово у вашому контенті, до якого ви хочете додати виноску. На панелі інструментів блоку натисніть стрілку, що випадає, і виберіть “Виноска”.

Adding a footnote to a text in the WordPress block editor

Тепер вас буде перенаправлено в нижню частину сторінки, де автоматично додано блок “Виноски”. Тут ви можете ввести додаткову інформацію.

Крім того, ви можете налаштувати колір, типографіку, розміри та межі блоку за допомогою налаштувань на правій панелі.

Customizing the footnotes block in the WordPress block editor

Ви можете повторити цей крок, щоб додати стільки виносок, скільки потрібно.

Попередній перегляд вашого сайту WordPress повинен містити посилання на речення, яке ви виділили раніше.

Example of the footnote made in WordPress

Натиснувши на гіперпосилання, ви потрапите в нижню частину сторінки з виноскою.

Ви також можете натиснути стрілку з гіперпосиланням, щоб повернутися до розділу, до якого призначено виноску.

An example of the footnote content at the bottom of the page, made using WordPress

Хоча цей метод досить простий для початківців, він не пропонує багато можливостей для налаштування. Якщо вам потрібно більше способів змінити вигляд виноски, просто перейдіть до наступного методу.

Іншим способом створення виносок є використання безкоштовного Modern Footnotes plugin. На відміну від Footnotes block, він пропонує набагато більше можливостей для зміни вигляду виноски.

Наприклад, ви можете зробити так, щоб виноска відображалася у вигляді підказки і містила додаткову інформацію внизу сторінки.

Перше, що вам потрібно зробити, це встановити плагін Modern Footnotes. Щоб дізнатися більше про встановлення плагіна, перегляньте наш посібник про те, як встановити плагін WordPress.

Налаштування параметрів плагіна Modern Footnote

Після встановлення плагіна ви можете перейти до Налаштування ” Сучасні виноски. Тут ви можете налаштувати параметри виносок відповідно до ваших уподобань.

Давайте пройдемося по кожному параметру по черзі.

“Поведінка десктопних виносок” дозволяє вам вибрати, як має поводитися виноска, коли веб-сайт переглядається на стаціонарному комп'ютері.

Ви можете зробити так, щоб виноска з'являлася при наведенні курсору на підказку або при натисканні користувачем на підказку. Крім того, виноска може розгортатися під текстом виноски.

Selecting a Desktop footnote behavior using the Modern Footnotes plugin

Яку саме ви оберете, залежить від ваших уподобань. За замовчуванням на мобільних екранах виноска розгортатиметься під текстом.

Крім того, ви також можете встановити прапорець “Показувати вміст виноски у власній підказці браузера при наведенні на номер виноски”, якщо це необхідно. Це означає, що при наведенні курсору на текст виноски з'являтиметься підказка браузера, а не плагіна.

Ми рекомендуємо вимкнути цей параметр, якщо ви вибрали опцію підказки для поведінки виноски на робочому столі. Інакше ви матимете дві підказки для однієї виноски, що може дратувати читачів.

Ви також можете відображати список виносок внизу дописів нижче. Таким чином, читач зможе побачити додаткову інформацію в одному місці.

Ви також можете ввімкнути цю функцію, коли публікація в блозі синдикується через RSS-канали.

Modern Footnote plugin's footnote display settings

Прокручуючи вниз, ви можете вставити заголовок для списку виносок і вибрати тег заголовка. Це допоможе відокремити власне вміст вашого допису від виносок. Ви можете написати посилання, виноски, цитати або додаткову інформацію.

Якщо ви хочете додати кастомний CSS для зміни тексту виноски, вставте його у поле “Сучасний кастомний CSS для виносок”.

Нарешті, ви можете налаштувати шорткод Modern Footnotes, якщо не хочете використовувати вбудовану версію. Переконайтеся, що ви вводите шорткод без дужок.

Якщо ви задоволені налаштуваннями, натисніть “Зберегти зміни”.

Saving changes in the Modern Footnotes plugin

Додавання виносок за допомогою плагіна Modern Footnotes

Тепер, коли ви налаштували параметри плагіна Modern Footnotes, давайте додамо деякі виноски до вашого контенту. Відкрийте редактор блоків для нового або існуючого допису чи сторінки.

Існує два способи додати виноску. Перший – за допомогою шорткоду, і ми рекомендуємо саме його.

Спочатку знайдіть речення, до якого ви хочете вставити виноску. Потім, поруч з цим реченням, введіть наступний шорткод:

[mfn]Insert your footnote here[/mfn]

Переконайтеся, що текст між дужками замінено на вашу інформацію.

Ми рекомендуємо розміщувати шорткод в одному блоці з реченням, поруч з текстом, без пробілів між ними, як у прикладі нижче. Інакше виноска може виглядати відірваною від тексту.

An example of how to add a footnote shortcode using the Modern Footnotes plugin

Інший спосіб – ввести текст виноски поруч із реченням, до якого ви хочете додати виноску. Переконайтеся, що між текстом виноски та реченням немає пробілів.

У наведеному нижче прикладі ми хочемо додати виноску, що містить наукове посилання, до речення, яке починається зі слів “Дослідження показують…”.

Виділіть виноску і натисніть кнопку зі стрілкою вниз на панелі інструментів. Після цього виберіть “Додати виноску”.

Clicking the Add a Footnote button from the Modern Footnotes plugin

Недоліком другого методу є те, що під час редагування контенту може бути важко відстежити, до яких рядків тексту було додано виноску, а до яких ні. Ось чому ми рекомендуємо метод шорткоду.

Коли ви переглядаєте публікацію в блозі, ви побачите, що поруч з реченням з'явився номер. Якщо ви використовуєте опцію підказки, ось як виглядатиме виноска:

What the Modern Footnotes tooltip looks like

З іншого боку, виноска з'явиться під текстом, якщо ви використовуєте розширюване форматування.

Ось як вона виглядає, коли ви натискаєте на номер:

What the expandable footnote formatting looks like using the Modern Footnotes plugin

Нарешті, якщо ви відобразите вміст виносок внизу допису, ви можете прокрутити його вниз, щоб знайти все, що там є.

Вони мають бути десь над розділом коментарів.

The footnote content at the bottom of the page, made with the Modern Footnotes plugin

Бонусна порада: Використовуйте кастомні поля WordPress, щоб додати більше інформації до вашого контенту

Окрім виносок, ще одним способом надання додаткової інформації у ваших публікаціях і сторінках WordPress є використання кастомних полів.

Кастомні поля WordPress – це метадані, які використовуються для вставки додаткової інформації в публікацію або сторінку. Наприклад, якщо ви ведете блог з кількома авторами, ви можете захотіти відобразити імена ваших дописувачів, а не лише своє власне, у публікації блогу.

Якщо вас цікавлять кастомні поля, перегляньте наш посібник “101 кастомне поле WordPress”.

Ми покажемо вам, як додавати кастомні поля за допомогою редактора блоків і деяких плагінів, в тому числі WPCode. Цей плагін пропонує безпечний і простий спосіб додавання фрагментів коду на ваш веб-сайт WordPress, навіть якщо ви новачок.

WPCode - Best WordPress Code Snippets Plugin

Ми сподіваємося, що ця стаття допомогла вам дізнатися, як додавати виноски на сайт WordPress. Ви також можете ознайомитися з нашою експертною добіркою найкращих плагінів для типографіки WordPress і нашим керівництвом про те, як показувати і приховувати текст у публікаціях WordPress за допомогою ефекту перемикання.

Якщо вам сподобалася ця стаття, підпишіться на наш канал YouTube, щоб отримувати відеоуроки з WordPress. Ви також можете знайти нас у Twitter та Facebook.

Share this article
Shareable URL
Prev Post

Як створити Order Bump для WooCommerce (крок за кроком)

Next Post

9 найкращих плагінів для обробки кредитних карток для WordPress (порівняння)

Залишити відповідь

Ваша e-mail адреса не оприлюднюватиметься. Обов’язкові поля позначені *