Как в WordPress вставить математические формулы, музыкальные ноты и гитарные аккорды?

На страницах WordPress-сайта, кроме привычного всем контента (текст, видео и изображения), также можно отображать математические формулы, музыкальные ноты и гитарные аккорды. Для этого существует несколько удобных и бесплатных плагинов. Давайте рассмотрим их все по порядку.

Как на сайте WordPress вставить математическую формулу?

Довольно неплохим решением для работы с математическими формулами является плагин Insert math. Он позволяет вставлять и редактировать формулы через удобное окно в виде блока или строки, а также просматривать, контролировать формулу прямо во время набора и изменять ее цвет.

Среди основных особенностей плагина можно выделить:

  • удобное окно для вставки и редактирования формул;
  • блочная и строчная вставка формул;
  • изменение цвета формул;
  • присвоение формулам уникальных ID или css-классов;
  • фоновое выделение формул в визуальном редакторе;
  • добавление полосы прокрутки к формулам при маленькой ширине браузера.

Для начала работы с формулами плагин, во-первых, необходимо установить и активировать, после чего можно сразу приступать к работе. Следует открыть на редактирование или создать новую запись.

Страница редактирования записи

Видно, что на панели инструментов появилась кнопка. Итак, для начала следует установить курсор в то место контентного блока редактора, где должна быть вставлена формула. После это нужно нажать кнопку fx.

Всплывающее окно вставки формулы

Перед Вами появилось окно, в котором собственно и нужно будет вставлять формулу. Для набора формул плагин рекомендует использовать специальный технический язык LaTeX. Также в окне предоставляется ссылка, ведущая на конкретные примеры оформления формул с помощью этого языка. На странице https://en.wikibooks.org/wiki/LaTeX/Mathematics описан синтаксис языка и даны примеры конкретных формул. Вставим, например, следующую формулу из примера:

Страница https://en.wikibooks.org/wiki/LaTeX/Mathematics

Видно, что в правой части отображается результат готовой формулы. В левой же — эта же формула, только с помощью языка LaTeX. Этот код и необходимо будет добавить в окно нашего редактора.

Всплывающее окно вставки формулы

Видно, что после вставки LaTeX-кода в окне появился результат. Нажав кнопку Дополнительные настройки, Вы сможете выбрать цвет формулы, а также задать ей ID и css-класс.

Всплывающее окно вставки формулы

Для вставки формулы следует нажать кнопку Вставить. В итоге контентный блок записи будет иметь следующий вид:

Страница редактирования записи

После того, как будет нажата кнопка Обновить, на странице будет отображена добавленная формула.

Страница записи на сайте

Как на сайте WordPress вставить музыкальные ноты?

Для отображения нотной грамоты на сайте WordPress воспользуемся бесплатным плагином ABC Notation. Плагин не предоставляет каких-либо страниц настроек и визуальных редакторов музыкальных нот. Для вставки музыкальных нот дополнение предлагает ознакомится с официальной документацией, где расписано, как с ним работать. К сожалению, вся документация изложена на английском языке. Но для музыкантов это не должно стать проблемой. Итак, мы добавим пример из официальной документации:

[abcjs]
X:1
K:A
a2a2e2e2|f2f2e4|
[/abcjs]

Видно, что это простой шорткод, в котором заключена нотная грамота. Его необходимо просто вставить в нужную часть записи.

Страница редактирования записи

После того, как будет нажата кнопка Обновить, на сайте отобразятся вставленные ноты.

Страница записи на сайте

Как на сайте WordPress вставить гитарные аккорды?

Для отображения на сайте гитарных аккордов будем использовать бесплатный плагин Guitar Chords Widget for WordPress. Дополнение не имеет каких-либо настроек. Чтобы увидеть его в действии, во-первых, необходимо установить и активировать плагин, после этого в админ-панели перейти в раздел Внешний вид -> Виджеты.

Раздел админ-панели Виджеты

В разделе виджетов добавился виджет Guitar Widget, который следует переместить в желаемую область виджетов сайта. Отметим, что виджет также не имеет каких-либо настроек. В итоге на сайте появится выбор гитарных аккордов.

Страница записи на сайте

Курс WordPress-разработчик
Если Вам понравилась статья — поделитесь с друзьями
Михаил Петров