Как добавить ввод с клавиатуры на сайт WordPress?

На этом сайте мы опубликовали много статей о том, как использовать сочетания клавиш. При написании таких статей мы просто упоминали сочетания клавиш типа «Control + A» или «Command + A». Это будет выглядеть как обычный текст без какой-либо разметки. Тем не менее, WordPress предлагает простой способ добавить ввод с клавиатуры на ваш сайт. Если вы часто показываете ввод с клавиатуры на своем сайте, вот как правильно его использовать.

HTML-тег ввода с клавиатуры

Многие пользователи не знают, что в HTML есть элемент по умолчанию для добавления ввода с клавиатуры на веб-страницы. Этот элемент имеет открывающие и закрывающие теги, и вы можете использовать его, как показано ниже:

Нажмите клавиши Command + A, чтобы выбрать все содержимое в macOS.

Если вы хотите разделить ввод с клавиатуры на каждую клавишу, вы можете использовать несколько тегов , как показано ниже.

Программы для Windows, мобильные приложения, игры - ВСЁ БЕСПЛАТНО, в нашем закрытом телеграмм канале - Подписывайтесь:)

Нажмите клавиши Command + A……

Элемент ввода с клавиатуры добавит встроенный ввод, что означает, что все предложение будет отображаться как одна строка без разрыва строки. Браузеры по умолчанию используют семейство моноширинных шрифтов для различения ввода с клавиатуры при отображении HTML-разметки.

Примечание: В дополнение к вы можете использовать несколько других HTML-элементов, таких как или , для добавления встроенного ввода. Существует также элемент


, который можно использовать для вставки предварительно отформатированного текста в качестве нового абзаца.
1. Использование редактора Гутенберга
WordPress предлагает возможность ввода с встроенной клавиатуры с использованием тегов ….  Это доступно только как часть Gutenberg, поэтому убедитесь, что вы используете редактор блоков Gutenberg, а не старый классический редактор.
 
Создайте новый пост или отредактируйте существующий пост с помощью редактора Gutenberg.
Введите предложение и выберите часть, которую вы хотите сделать вводом с клавиатуры.
Щелкните маленькую стрелку вниз (отображает дополнительные инструменты блока), отображаемую на панели инструментов блока.
Выберите опцию «Ввод с клавиатуры» из появившегося списка элементов.
Добавляем ввод с клавиатуры в WordPress Gutenberg
Редактор может не отображать никаких видимых различий для добавленной части ввода с клавиатуры.  Однако вы можете нажать на часть, чтобы увидеть, что она выделена отдельно, как показано ниже.
Ввод с клавиатуры выделяется в редакторе
Как уже упоминалось, WordPress просто добавит теги  для выбранного раздела ввода с клавиатуры.  Чтобы просмотреть HTML-код, нажмите на три вертикальные точки на панели инструментов (Параметры) и выберите параметр «Редактировать как HTML».
Просмотр HTML ввода с клавиатуры в Гутенберге
 
Вы можете видеть, что исходный код имеет открытые и закрытые теги kbd для выбранной части.
Исходный HTML имеет тег KBD
Снова нажмите «Параметры» и выберите «Редактировать визуально», чтобы просмотреть блок в обычном режиме.
Опубликуйте свой пост и проверьте живую страницу, чтобы узнать, как ваша тема выводит раздел ввода с клавиатуры.  Вы можете щелкнуть правой кнопкой мыши и выбрать опцию «Проверить», чтобы просмотреть CSS, используемый вашей темой для класса kbd.  В нашем примере мы использовали тему Astra, и эта тема использует только собственный шрифт без выделения вывода.
Стиль темы для ввода с клавиатуры
2. Показать ввод с клавиатуры в классическом редакторе
Если вы используете классический редактор или настраиваемый тип записи, у вас нет опции по умолчанию для добавления ввода с клавиатуры.  В этом случае вам нужно использовать теги  вручную.
Когда вы находитесь в классическом редакторе, введите предложение в «визуальном» режиме.
Нажмите на вкладку «Текст», чтобы переключиться в редактор текстового режима.
Переключить текстовый редактор в WordPress
Добавьте теги  и  в начале и в конце текста ввода с клавиатуры соответственно.
Добавить теги KBD в текстовом редакторе
Переключите режим редактора обратно на «Визуальный» и опубликуйте свой пост.
Вывод будет похож на вывод редактора Gutenberg, как показано в разделе 1 выше.
3. Использование пользовательского CSS для класса kbd
Как видите, вывод не выделен темой Astra.  Если ваша тема не использует пользовательский CSS для тега KBD, вы можете легко добавить его в соответствии с вашими потребностями.  Например, вы можете использовать следующий CSS для класса kbd.
kbd {граница: 1px сплошная rgb¬¬¬¬¬(211 211 211);  отступ: 3px;  фон: rgb(211 211 211);  радиус границы: 5px;  вес шрифта: 600;  семейство шрифтов: наследовать;  }
Перейдите в раздел «Внешний вид > Настройка».
Нажмите на опцию «Добавить CSS», которая отображается как последний элемент.
Вставьте приведенный выше код CSS в текстовое поле.
Нажмите кнопку «Опубликовать», чтобы применить изменения.
Добавить пользовательский CSS для класса kbd в WordPress
Просмотрите страницу с вводом с клавиатуры, и она будет выглядеть с фоновым полем, как показано ниже.
Ввод с клавиатуры с пользовательским CSS в WordPress
Вы можете изменить цвет фона, семейство шрифтов, границы и другие свойства в CSS, чтобы ввод с клавиатуры соответствовал внешнему виду вашего сайта.
4. Добавление ввода с клавиатуры в виджеты
Если вы хотите добавить ввод с клавиатуры в виджеты боковой панели или нижнего колонтитула, вы можете использовать для этой цели пользовательский блок/виджет HTML.  Редакторы Gutenberg и Classic предлагают опцию Custom HTML, чтобы облегчить вам задачу.  Тем не менее, вы должны использовать код CSS и HTML вместе, чтобы это работало.  Кроме того, опция виджетов будет отображаться только при использовании тем, не основанных на блоках, и будет недоступна для тем, основанных на блоках.
Перейдите в меню «Внешний вид > Виджеты» в панели администратора.
Найдите и вставьте пользовательский блок HTML в редактор блоков виджетов Gutenberg.  Вставьте следующий пример кода и нажмите кнопку «Обновить».
Если вы используете классический редактор, то найдите и вставьте в нужную область виджет «Пользовательский HTML».  Вставьте приведенный ниже код и нажмите кнопку «Сохранить», чтобы применить изменения.
Нажмите клавиши Command + A, чтобы выбрать все содержимое в macOS.  Нажмите клавиши Command + C, чтобы скопировать выбранный контент в macOS.  Нажмите клавиши Command + V, чтобы вставить скопированное содержимое в macOS.
 
Добавить ввод с клавиатуры в пользовательский блок HTML Gutenberg
Добавить ввод с клавиатуры в пользовательский HTML-виджет
Проверьте свою страницу, и вы должны увидеть ввод с клавиатуры, как показано ниже.
Клавиатурный ввод в виджете боковой панели
Вы также можете вставить часть HTML только внутри пользовательского элемента HTML и вставить CSS в разделе «Внешний вид > Настройка > Дополнительный CSS».  Кроме того, у вас есть виджет «Текст» для классического редактора, который работает аналогично варианту 2, как описано выше.
Примечание: Помните, что добавление CSS в настройщик будет включать код на все страницы вашего сайта.  Это нормально для области виджетов, однако иногда вы можете захотеть использовать ввод с клавиатуры только на нескольких страницах.  В этом случае лучше всего использовать блок Custom HTML и вставить полные CSS и HTML внутри блока.  Это работает только в редакторе Gutenberg, так как вставка CSS в текстовом режиме не будет работать в классическом редакторе.
Заключительные слова
Использование ввода с клавиатуры и выделение содержимого поможет пользователям легко идентифицировать сочетания клавиш и другие устройства ввода.  Хотя WordPress использует теги HTML … в редакторе Gutenberg, большинство тем не корректно оформляют вывод.  Вы можете добавить пользовательский CSS, как описано выше, чтобы сделать внешний вид привлекательным для ваших пользователей.  Для классического редактора вы можете вручную добавить HTML в текстовом режиме и CSS в настройщике, чтобы это работало.
 
Программы для Windows, мобильные приложения, игры - ВСЁ БЕСПЛАТНО, в нашем закрытом телеграмм канале - Подписывайтесь:)