Вордпресс — это надежная система управления контентом, на которой работает более половины всех веб-сайтов в Интернете. Встроенная CRM упрощает создание веб-сайта, даже если вы никогда раньше не писали компьютерную программу. Хотя так легко отобразить блок обычного текста на веб-сайте WordPress, этого нельзя сказать о компьютерном коде. Фрагмент кода должен быть адекватно отображен, чтобы зрители могли его проанализировать и понять. И здесь на помощь приходят блоки кода WordPress.
Если вы хотите знать, как использовать блоки кода в WordPress, вы пришли в нужное место. В этой статье мы проведем вас через весь процесс, чтобы вы могли начать делиться фрагментами кода со своими читателями. Продолжайте читать, чтобы узнать больше.
Как использовать блоки кода в WordPress
Отображение компьютерной программы в виде обычного текста веб-страницы может иметь катастрофические последствия. Многим пользователям будет трудно визуализировать и понять. К счастью, многие редакторы WordPress имеют функцию блоков кода, которая позволяет отображать компьютерную программу в формате кода.
К счастью, использовать блоки кода для отображения компьютерного кода относительно просто. Для начала вам нужно переключиться на собственный редактор WordPress, поскольку некоторые текстовые плагины могут не иметь этой функции. Сделав это, выполните следующие действия, чтобы добавить блок кода на страницу веб-сайта:
- Откройте веб-страницу, на которую вы хотите добавить блок кода, нажав кнопку «Создать».
- Введите «/ код» и нажмите «Ввод».
- Введите или вставьте код, который вы хотите отобразить, и нажмите клавишу «Ввод».
- Вы также можете использовать панель инструментов блока кода, чтобы настроить внешний вид только что написанного кода. Например, вы можете использовать кнопку «B», чтобы выделить строку жирным шрифтом, или кнопку «i», чтобы выделить ее курсивом.
- Когда вы закончите создание своей веб-страницы, нажмите кнопку «Предварительный просмотр», чтобы увидеть, как будет выглядеть блок кода в реальной версии.
- Если вас устраивают окончательные результаты, нажмите кнопку «Обновить», чтобы другие пользователи также могли увидеть блок кода.
Как изменить типографику вашего блока кода
Типографика говорит о многом и может улучшить или разрушить эстетику не только вашего блока кода, но и всей веб-страницы. Чтобы изменить типографику блока кода, выполните следующие действия:
- Выделите блок кода, типографику которого вы хотите изменить.
- Нажмите значок «Настройки» в правом верхнем углу экрана.
- В разделе «Типографика» укажите предпочитаемую типографику.
- Нажмите кнопку «Обновить», чтобы сохранить изменения.
Вы можете дополнительно настроить внешний вид блока, изменив цвет, фон, межбуквенный интервал и межстрочный интервал.
Например, если у вас есть веб-сайт с темной тематикой, вы также можете захотеть, чтобы ваш кодовый блок имел другой фон.
Как удалить блок кода в WordPress
Блоки кода не являются постоянными, и, как и любые другие элементы веб-страницы WordPress, вы можете удалить их. Вот как это сделать:
- Откройте веб-страницу или сообщение с блоком кода, который вы хотите удалить.
- Нажмите на блок кода, который вы хотите удалить, чтобы выделить его.
- На виджете, который появляется прямо над блоком кода, нажмите на три точки.
- Из вариантов выберите «Удалить код».
Вышеупомянутое действие должно удалить весь блок кода с веб-страницы. Кроме того, вы можете просто выбрать блок и нажать клавишу «Удалить». Вы также можете одновременно нажать клавиши «Ctrl» + «Shift» + «Z», и это должно привести к тем же результатам.
Как редактировать уже опубликованный блок кода
Время от времени вы обязательно совершаете ошибки. Вы также можете наткнуться на лучший способ реализовать идею с помощью кода. WordPress позволяет редактировать уже существующие блоки кода, следуя приведенным ниже инструкциям:
- Откройте страницу с блоком кода, который вы хотите отредактировать.
- Нажмите «Изменить».
- Щелкните блок кода, чтобы включить редактирование кода.
- После внесения изменений нажмите кнопку «Обновить».
Как добавить блок кода на ваш сайт WordPress с помощью плагина
Если вы часто добавляете фрагменты кода на свой веб-сайт, возможно, лучше всего будет приобрести более надежный плагин, который поможет вам. Одним из популярных мощных и превосходных блоков кода является SyntaxHighlighter Evolved плагин.
Этот плагин имеет преимущество перед родным редактором WordPress, потому что:
- Он выделяет количество строк во фрагменте кода.
- Он поддерживает несколько языков программирования
- Это позволяет вашим зрителям копировать и вставлять отображаемый код
Вот как использовать плагин для лучшего управления фрагментами кода на вашем сайте:
- Установите и активируйте программу SyntaxHighlighter Evolved плагин.
- Откройте страницу или публикацию, если хотите добавить блок кода.
- Включите редактирование и нажмите кнопку «плюс».
- Найдите «SyntaxHighLighter Evolved» и откройте первый попавшийся результат.
- Вставьте или напишите код в доступном блоке кода.
- Нажмите значок настроек в правом верхнем углу экрана и перейдите на вкладку «Блокировать».
- Укажите, как должна выглядеть ваша нумерация и какие строки кода вы хотите выделить.
- Вы также можете включить «Сделать URL-адреса интерактивными», если хотите сделать свой код интерактивным.
Чтобы изменить цвет и схему форматирования блока кода, выполните следующие действия:
- Перейдите в «Настройки» и перейдите в раздел «SyntaxHighlighter».
- Измените тему вашего блока.
- Нажмите «Сохранить» «Предварительный просмотр», чтобы просмотреть, как изменения будут выглядеть в режиме реального времени.
Дополнительные часто задаваемые вопросы
Как сделать блок кода кликабельной ссылкой?
Чтобы сделать код блокирующим ссылку с помощью редактора WordPress, выполните следующие действия:
Chrome открывается при запуске Windows 10
1. Выберите строку кода, которую вы хотите использовать в качестве ссылки.
2. Во всплывающем виджете выберите значок ссылки. Кроме того, вы можете нажать клавиши «Ctrl» + «K» на клавиатуре.
3. Введите URL-адрес, на который должен ссылаться код, и нажмите клавишу «Ввод».
Могу ли я выделить код с помощью редактора блоков кода, предоставляемого редактором WordPress?
Нет, блок кода, предоставляемый родным редактором WordPress, не позволяет пользователям копировать и вставлять код. Для этого вам понадобится помощь расширенного плагина редактирования блока кода, такого как плагин «SyntaxHighligher Evolved».
Есть ли у Elementor функция кодовых блоков?
Elementor — популярный плагин перетаскивания, который используется для создания веб-сайтов WordPress. К сожалению, если вы используете плагин для создания веб-сайтов, вы не найдете на своем веб-сайте блока, позволяющего форматировать компьютерные программы. Поэтому вам нужно переключиться на обычный редактор WordPress, чтобы закончить задачу.
Подготовьте свой веб-сайт и запустите его
Независимо от того, ведете ли вы блог по программированию или просто хотите поделиться фрагментами кода на своем веб-сайте, очень важно знать, как использовать блоки кода в WordPress. Блоки кода облегчат жизнь вашим читателям и в целом повысят удобство работы с вашим сайтом. Как видите, вставка блоков кода — относительно простой процесс, особенно в родном редакторе WordPress.
Пробовали ли вы использовать блоки кода, которые предоставляет WordPress? А как насчет плагина SyntaxHighlighter Evolved? Пожалуйста, поделитесь с нами своим опытом в разделе комментариев ниже.
