Хотите добавить сноски к своим сообщениям в блоге WordPress?
Если вы пишете статью, которая ссылается на исследования или содержит много сложной информации, возможно, вы захотите использовать сноски в своем контенте. Это небольшие пронумерованные знаки в тексте, которые придают дополнительный контекст предложению или абзацу.
В этой статье мы покажем вам, как шаг за шагом добавлять простые и элегантные сноски к сообщениям в блоге WordPress.
![Добавляйте сноски в сообщения блога WordPress Добавляйте сноски в сообщения блога WordPress](https://www.wpbeginner.com/wp-content/uploads/2021/08/add-footnotes-in-WordPress-blog-posts-OG-1.png)
Если вы ведете образовательный блог, публикуете исследования или освещаете новости, то сноски — отличный способ придать больше контекста вашему контенту. Вы можете использовать их, чтобы добавлять комментарии, выделять важные факты или вставлять цитаты из научных источников на свой веб-сайт.
Сноска обычно отображается в виде небольшого надстрочного номера в основной части текста. Фактическое содержимое сноски затем размещается внизу страницы или отображается в виде всплывающей подсказки, чтобы отличить его от основного содержимого.
Вот пример:
![Пример сноски на сайте McKinsey Пример сноски на сайте McKinsey](https://www.wpbeginner.com/wp-content/uploads/2023/11/footnote-mckinsey-example-min.png)
![Пример сноски на сайте McKinsey Пример сноски на сайте McKinsey](https://www.wpbeginner.com/wp-content/uploads/2023/11/footnote-mckinsey-example-min.png)
Помимо обеспечения ясности и прозрачности для ваших читателей, сноски могут сделать ваш сайт WordPress более профессиональным и заслуживающим доверия. Они показывают, что вы провели исследование и имеете источники, подтверждающие ваши утверждения.
Редактор WordPress.org теперь имеет встроенную функцию сносок, которую вы можете легко использовать для вставки дополнительного контекста.
Это руководство покажет вам, как добавлять сноски WordPress к сообщениям или страницам вашего блога двумя способами. Один — с использованием блока «Сноски» в редакторе Гутенберга, а другой — с плагином.
Вы можете использовать ссылки ниже, чтобы перейти к конкретному методу:
Этот метод лучше всего подходит для людей, которые хотят использовать простые сноски и не хотят устанавливать для этой цели плагин.
Чтобы использовать блок сносок WordPress, вам нужно будет открыть редактор блоков Гутенберга для новой или существующей записи или страницы.
После этого просто выделите слово в своем контенте, к которому вы хотите добавить сноску. На панели инструментов блока щелкните стрелку раскрывающегося списка и выберите «Сноска».
![Добавление сноски к тексту в редакторе блоков WordPress Добавление сноски к тексту в редакторе блоков WordPress](https://www.wpbeginner.com/wp-content/uploads/2023/11/footnote-block-down-arrow-min.png)
![Добавление сноски к тексту в редакторе блоков WordPress Добавление сноски к тексту в редакторе блоков WordPress](https://www.wpbeginner.com/wp-content/uploads/2023/11/footnote-block-down-arrow-min.png)
Теперь вы будете перенаправлены в нижнюю часть страницы, где блок «Сноски» был добавлен автоматически. Здесь вы можете ввести дополнительную информацию.
Кроме того, вы можете настроить цвет, типографику, размеры и рамку блока, используя настройки на правой панели.
![Настройка блока сносок в редакторе блоков WordPress Настройка блока сносок в редакторе блоков WordPress](https://www.wpbeginner.com/wp-content/uploads/2023/11/footnote-block-min.png)
![Настройка блока сносок в редакторе блоков WordPress Настройка блока сносок в редакторе блоков WordPress](https://www.wpbeginner.com/wp-content/uploads/2023/11/footnote-block-min.png)
Не стесняйтесь повторить этот шаг, чтобы включить столько сносок, сколько необходимо.
Когда вы предварительно просматриваете свой сайт WordPress, там должна быть ссылка на сноску к предложению, которое вы выделили ранее.
![Пример сноски, сделанной в WordPress Пример сноски, сделанной в WordPress](https://www.wpbeginner.com/wp-content/uploads/2023/11/hyperlinked-footnote-min.png)
![Пример сноски, сделанной в WordPress Пример сноски, сделанной в WordPress](https://www.wpbeginner.com/wp-content/uploads/2023/11/hyperlinked-footnote-min.png)
Если вы нажмете на гиперссылку, вы попадете в конец страницы со сноской.
Здесь вы также можете щелкнуть стрелку с гиперссылкой, чтобы вернуться к разделу, которому назначена сноска.
![Пример содержимого сноски внизу страницы, сделанный с помощью WordPress. Пример содержимого сноски внизу страницы, сделанный с помощью WordPress.](https://www.wpbeginner.com/wp-content/uploads/2023/11/footnote-list-min.png)
![Пример содержимого сноски внизу страницы, сделанный с помощью WordPress. Пример содержимого сноски внизу страницы, сделанный с помощью WordPress.](https://www.wpbeginner.com/wp-content/uploads/2023/11/footnote-list-min.png)
Хотя этот метод довольно прост для новичков, он не предлагает множества вариантов настройки. Если вы ищете другие способы изменить внешний вид сноски, просто перейдите к следующему методу.
Другой метод создания сносок — использование бесплатной программы Современные сноски плагин. В отличие от блока «Сноски», он предлагает гораздо больше возможностей для изменения внешнего вида сноски.
Например, вы можете сделать так, чтобы сноска отображалась в виде всплывающей подсказки, а также дополнительной информации внизу страницы.
Первое, что вам нужно сделать, это установить плагин Modern Footnotes. Для получения дополнительной информации об установке плагина ознакомьтесь с нашим руководством по установке плагина WordPress.
Настройка параметров плагина современных сносок
Установив плагин, вы можете перейти к Настройки » Современные сноски. Здесь вы можете настроить параметры сносок по своему усмотрению.
Давайте пройдемся по каждой настройке по отдельности.
«Поведение сноски на рабочем столе» позволяет выбрать, как должна вести себя сноска при просмотре веб-сайта на настольном компьютере.
Вы можете сделать так, чтобы сноска появлялась при наведении курсора на всплывающую подсказку или при нажатии пользователем на всплывающую подсказку. Альтернативно, сноска может расширяться под текстом сноски.
![Выбор поведения сноски на рабочем столе с помощью плагина Modern Footnotes Выбор поведения сноски на рабочем столе с помощью плагина Modern Footnotes](https://www.wpbeginner.com/wp-content/uploads/2023/11/desktop-footnote-behavior-min.png)
![Выбор поведения сноски на рабочем столе с помощью плагина Modern Footnotes Выбор поведения сноски на рабочем столе с помощью плагина Modern Footnotes](https://www.wpbeginner.com/wp-content/uploads/2023/11/desktop-footnote-behavior-min.png)
Какой из них вы выберете, зависит от ваших предпочтений. Тем не менее, на экранах мобильных устройств сноска по умолчанию будет расширяться под текстом.
Кроме того, при необходимости вы также можете установить флажок «Показывать содержимое сноски во встроенной всплывающей подсказке веб-браузера при наведении курсора на номер сноски». Это означает, что сноска будет отображаться во всплывающей подсказке браузера, а не в плагине, когда курсор наводит курсор на текст.
Мы рекомендуем отключить этот параметр, если вы выбираете опцию всплывающей подсказки для поведения сносок на рабочем столе. В противном случае у вас будет две всплывающие подсказки для одной и той же сноски, что может раздражать читателей.
Ниже вы также можете выбрать отображение списка сносок внизу сообщений. Таким образом, читатель сможет увидеть всю дополнительную информацию в одном месте.
Вы также можете включить эту функцию, если сообщение в блоге распространяется через RSS-каналы.
![Настройки отображения сносок плагина Modern Footnote Настройки отображения сносок плагина Modern Footnote](https://www.wpbeginner.com/wp-content/uploads/2023/11/footnote-settings-display-new-min.png)
![Настройки отображения сносок плагина Modern Footnote Настройки отображения сносок плагина Modern Footnote](https://www.wpbeginner.com/wp-content/uploads/2023/11/footnote-settings-display-new-min.png)
Прокрутив вниз, вы можете вставить заголовок для списка сносок и выбрать для него тег заголовка. Это помогает отделить фактическое содержание вашего сообщения в блоге от сносок. Вы можете написать что-то вроде «Ссылки», «Сноски», «Цитаты» или «Дополнительная информация».
Если вы хотите добавить собственный CSS для изменения текста сноски, смело вставляйте его в поле «Современный пользовательский CSS для сносок».
И последнее, но не менее важное: вы можете настроить шорткод Modern Footnotes, если не хотите использовать встроенную версию. Обязательно вводите короткий код без скобок.
Если вас устраивают настройки, просто нажмите «Сохранить изменения».
![Сохранение изменений в плагине Modern Footnotes Сохранение изменений в плагине Modern Footnotes](https://www.wpbeginner.com/wp-content/uploads/2023/11/footnote-settings-save-min.png)
![Сохранение изменений в плагине Modern Footnotes Сохранение изменений в плагине Modern Footnotes](https://www.wpbeginner.com/wp-content/uploads/2023/11/footnote-settings-save-min.png)
Добавление сносок с помощью плагина Modern Footnotes
Теперь, когда вы настроили параметры современных сносок, давайте вставим несколько сносок в ваш контент. Откройте редактор блоков для нового или существующего сообщения или страницы.
Есть два способа добавить сноску. Один из них с коротким кодом, что мы и рекомендуем.
Сначала найдите предложение, в которое хотите вставить сноску. Затем рядом с этим предложением введите следующий короткий код:
[mfn]Insert your footnote here[/mfn]
Обязательно замените текст в скобках своей информацией.
Мы также предлагаем поместить короткий код в тот же блок, что и предложение, рядом с текстом, без пробелов между ними, как в примере ниже. В противном случае сноска может выглядеть оторванной от текста.
![Пример того, как добавить короткий код сноски с помощью плагина Modern Footnotes Пример того, как добавить короткий код сноски с помощью плагина Modern Footnotes](https://www.wpbeginner.com/wp-content/uploads/2023/11/footnote-shortcode-min.png)
![Пример того, как добавить короткий код сноски с помощью плагина Modern Footnotes Пример того, как добавить короткий код сноски с помощью плагина Modern Footnotes](https://www.wpbeginner.com/wp-content/uploads/2023/11/footnote-shortcode-min.png)
Другой способ — ввести текст сноски рядом с предложением, к которому вы хотите добавить сноску. Убедитесь, что между текстом сноски и предложением нет пробела.
В приведенном ниже примере мы хотим добавить сноску, содержащую научную цитату для предложения, которое начинается с «Исследования предполагают…».
Затем выделите сноску и нажмите кнопку со стрелкой вниз на панели инструментов. После этого выберите «Добавить сноску».
![Нажатие кнопки «Добавить сноску» в плагине Modern Footnotes. Нажатие кнопки «Добавить сноску» в плагине Modern Footnotes.](https://www.wpbeginner.com/wp-content/uploads/2023/11/footnote-add-footnote-method-min.png)
![Нажатие кнопки «Добавить сноску» в плагине Modern Footnotes. Нажатие кнопки «Добавить сноску» в плагине Modern Footnotes.](https://www.wpbeginner.com/wp-content/uploads/2023/11/footnote-add-footnote-method-min.png)
Недостаток второго метода заключается в том, что при редактировании содержимого может быть сложно отследить, какие строки текста имеют сноску, а какие нет. Вот почему мы рекомендуем метод шорткода.
При предварительном просмотре записи в блоге вы увидите, что рядом с предложением теперь стоит цифра. Если вы используете опцию всплывающей подсказки, сноска будет выглядеть так:
![Как выглядит всплывающая подсказка «Современные сноски» Как выглядит всплывающая подсказка «Современные сноски»](https://www.wpbeginner.com/wp-content/uploads/2023/11/footnote-hover-min.png)
![Как выглядит всплывающая подсказка «Современные сноски» Как выглядит всплывающая подсказка «Современные сноски»](https://www.wpbeginner.com/wp-content/uploads/2023/11/footnote-hover-min.png)
С другой стороны, сноска появится под текстом, если вы используете расширяемое форматирование.
Вот как это выглядит, если нажать на номер:
![Как выглядит расширяемое форматирование сносок с использованием плагина Modern Footnotes Как выглядит расширяемое форматирование сносок с использованием плагина Modern Footnotes](https://www.wpbeginner.com/wp-content/uploads/2023/11/modern-footnote-expandable-min.png)
![Как выглядит расширяемое форматирование сносок с использованием плагина Modern Footnotes Как выглядит расширяемое форматирование сносок с использованием плагина Modern Footnotes](https://www.wpbeginner.com/wp-content/uploads/2023/11/modern-footnote-expandable-min.png)
Наконец, если вы решите отобразить все содержимое сноски внизу сообщения, вы можете прокрутить вниз, чтобы найти все там.
Они должны быть где-то над разделом комментариев.
![Содержимое сноски внизу страницы, созданное с помощью плагина Modern Footnotes. Содержимое сноски внизу страницы, созданное с помощью плагина Modern Footnotes.](https://www.wpbeginner.com/wp-content/uploads/2023/11/footnote-content-bottom-min-1.png)
![Содержимое сноски внизу страницы, созданное с помощью плагина Modern Footnotes. Содержимое сноски внизу страницы, созданное с помощью плагина Modern Footnotes.](https://www.wpbeginner.com/wp-content/uploads/2023/11/footnote-content-bottom-min-1.png)
Бонусный совет: используйте пользовательские поля WordPress, чтобы добавить больше информации в свой контент
Помимо сносок, еще один способ предоставить дополнительную информацию в ваших сообщениях и страницах WordPress — использовать настраиваемые поля.
Пользовательские поля WordPress — это метаданные, используемые для вставки дополнительной информации в сообщение или страницу. Например, если вы ведете блог с несколькими авторами, вы можете захотеть отображать в сообщении блога имена ваших участников, а не только свои собственные.
Если вас интересуют настраиваемые поля, просто ознакомьтесь с нашим руководством по настраиваемым полям WordPress 101.
Мы покажем вам, как добавлять настраиваемые поля с помощью редактора блоков и некоторых плагинов, в том числе WPCode. Этот плагин предлагает безопасный и простой способ добавления фрагментов кода на ваш сайт WordPress, даже если вы новичок.
![WPCode — лучший плагин фрагментов кода WordPress WPCode — лучший плагин фрагментов кода WordPress](https://www.wpbeginner.com/wp-content/uploads/2015/10/wpcode.jpg)
![WPCode — лучший плагин фрагментов кода WordPress WPCode — лучший плагин фрагментов кода WordPress](https://www.wpbeginner.com/wp-content/uploads/2015/10/wpcode.jpg)
Мы надеемся, что эта статья помогла вам научиться добавлять сноски на ваш сайт WordPress. Вы также можете ознакомиться с нашими экспертными подборками лучших плагинов типографики WordPress и нашим руководством о том, как показывать и скрывать текст в сообщениях WordPress с эффектом переключения.
Если вам понравилась эта статья, то подписывайтесь на нашу рассылку YouTube канал для видеоуроков по WordPress. Вы также можете найти нас на Твиттер и Фейсбук.