Приобретение навыков эффективной демонстрации кода в WordPress имеет первостепенное значение для блоггеров и создателей контента, которые постоянно публикуют код в Интернете для использования своей аудиторией. Компьютерный код, как и предполагалось, создает новый визуальный вывод на интерфейсе веб-сайта, отличный от тегов, косых черт и квадратных скобок, присутствующих в реальных фрагментах кода.
Однако это создает затруднительное положение для людей, пишущих о разработке и дизайне, поскольку им требуются средства для надлежащего представления кода без выполнения его предполагаемых функций, таких как создание кнопки или применение стилей к блоку абзаца.
Проще говоря, при создании сообщения в блоге, которое включает в себя фрагмент кода в качестве примера, крайне важно предотвратить выполнение кода. Такой подход позволяет читателям воспринимать код в его исходном виде, просматривать его в хорошо отформатированном блоке и даже копировать его содержимое для собственных разработок.
Это руководство призвано продемонстрировать различные методы отображения кода в WordPress, независимо от выбранной темы WordPress. Кроме того, это поможет вам определить наиболее подходящий метод для вашего конкретного рабочего процесса.
Создавайте потрясающие сайты
С лучшим бесплатным конструктором страниц Elementor
Начать сейчасЧто происходит, когда вы добавляете обычный код в WordPress?
Когда вы добавляете обычный код непосредственно в запись или страницу WordPress, не предпринимая никаких специальных мер, код может привести к непредвиденным последствиям. В WordPress есть встроенные механизмы, которые автоматически обрабатывают и очищают контент для обеспечения безопасности и надлежащей функциональности. В результате, когда добавляется обычный код, он может быть изменен или полностью удален WordPress.
Вот несколько вещей, которые могут произойти, когда вы добавляете обычный код в WordPress:
- Изменение кода: WordPress может изменить код, удалив или изменив определенные элементы, чтобы предотвратить потенциальные угрозы безопасности или конфликты с функциональностью платформы. Это может привести к тому, что код не будет выполняться должным образом или приведет к ошибкам.
- Удаление кода: в WordPress есть фильтры и меры безопасности, которые могут удалять определенные типы кода, которые считаются небезопасными или ненужными. Это может привести к удалению важных фрагментов кода или всего блока кода.
- Визуальное искажение: код обычно содержит специальные символы, символы и форматирование, которые могут мешать визуальному представлению вашего контента WordPress. Это может привести к проблемам с форматированием, смещению или отображению кода в виде обычного текста, а не в виде кода.
- Выполнение кода: в некоторых случаях, если код не очищается или не обрабатывается должным образом, он может выполняться и выполнять свои предполагаемые функции. Это может иметь непредвиденные последствия, такие как создание кнопок, изменение внешнего вида контента или даже влияние на общее функционирование вашего веб-сайта.
Чтобы преодолеть эти проблемы и безопасно отображать код в WordPress, рекомендуется использовать соответствующие методы или плагины, специально разработанные для демонстрации фрагментов кода. Эти методы обеспечивают правильное форматирование, сохранение и отображение кода без каких-либо нежелательных модификаций или выполнения.
Здесь мы собираемся добавить следующий HTML-код во фрагмент:
<!DOCTYPE html>
<html>
<head>
<style>
.cities {
background-color: green;
color: white;
border: 4px solid black;
margin: 10px;
padding: 10px;
}
</style>
</head>
<body>
<div class="cities">
<h2>Chicago</h2>
<p>A nickname for Chicago is The City of Broad Shoulders.</p>
</div>
<div class="cities">
<h2>Los Angeles</h2>
<p>A nickname for Los Angeles is The City of Angels.</p>
</div>
<div class="cities">
<h2>New York</h2>
<p>A nickname for New York is The Big Apple.</p>
</div>
</body>
</html>
Этот конкретный фрагмент кода использует элементы стиля HTML для создания трех блоков контента, выделенных зеленым цветом, с заголовками и абзацами.
Тем не менее, мы намерены представить необработанный код в сообщении блога, а не позволять ему отображаться в заданных блоках.
Следующие результаты можно наблюдать, когда код вставляется непосредственно в редактор блоков WordPress Gutenberg:
В свете вышесказанного очевидно, что WordPress пытается использовать код для своей основной функции создания контента. Однако он удаляет стили из кода, тем самым не предоставляя читателям желаемого результата.
Чтобы предотвратить такие обстоятельства, мы настоятельно рекомендуем использовать один из методов, перечисленных ниже, для отображения кода.
4 способа отображения кода в WordPress
Следующие методы расположены в порядке возрастания сложности, и мы предлагаем специальные подходы, адаптированные для людей, которые получают удовольствие от написания кода и контента в редакторах уценки, а не от использования WordPress.
Способ 1: использование редактора блоков Гутенберга
Редактор Gutenberg включает уже существующий блок кода, который облегчает представление фрагментов кода, сохраняя при этом их форматирование и не выполняя код.
Чтобы начать, откройте запись или страницу в WordPress и нажмите одну из кнопок «Добавить блок».
Чтобы продолжить, выберите одну из кнопок «Добавить блок».
При этом ассортимент доступных блоков будет раскрыт. У вас есть возможность либо выполнить поиск блока «Код», либо ввести ключевое слово, например «код», в строку поиска.
Найдя блок кода, идентифицируемый по значкам скобок, нажмите на него, чтобы вставить раздел кода в сообщение.
Теперь вам должна быть видна область с подсказкой «Создать код …».
Редактор WordPress Gutenberg поддерживает уценку, позволяя обнаруживать и вставлять блоки кода с помощью косой черты (/), за которой следует ввод «C» или «Code» в редакторе. Впоследствии WordPress отобразит все соответствующие блоки, упрощая процесс вставки.
Важно отметить различие между блоком кода и блоком пользовательского HTML. В то время как блок «Пользовательский HTML» предназначен для включения пользовательского HTML-кода, который будет отображаться во внешнем интерфейсе, блок «Код» специально разработан для добавления необработанного кода для целей отображения.
Сейчас самое время воспроизвести желаемый код и вставить его в обозначенную область, помеченную как «Написать код…».
Предоставленный вами код теперь заключен в указанный блок кода.
Преимуществом блока «Код» является соблюдение форматирования пробелов и табуляции в исходном фрагменте кода. Следовательно, отображаемый код должен сохранять визуальное соответствие источнику, из которого он был скопирован.
Чтобы показать свой код в записи или на странице WordPress, завершите процедуру, нажав кнопку «Опубликовать». Кроме того, у вас есть возможность получить визуальное представление о его внешнем виде перед публикацией, выбрав «Предварительный просмотр».
Нажав кнопку «Опубликовать», перейдите к доступу к активной версии сообщения, чтобы убедиться, что фрагмент кода отображается как необработанный код.
Как видно, блок «Код» отличается своей простотой, но при этом служит важной цели сохранения форматирования при представлении кода в сообщениях блога.
Обратитесь к предоставленному снимку экрана ниже. В этом конкретном примере исходный фрагмент кода остается неизменным; он просто представлен на передней панели в серой рамке.
Чтобы повысить заметность блока кода, рекомендуется рассмотреть возможность изменения его внешнего вида по умолчанию.
Чтобы получить доступ к доступным стилям для блока, выберите блок «Код» и нажмите кнопку «Настройки» (значок шестеренки). Это действие откроет вкладку «Блок», отображающую исключительно настройки блока, применимые к выбранному блоку, а именно к блоку «Код» в данном случае.
У каждого есть возможность настроить блок кода в соответствии с личными предпочтениями, включая возможность изменения таких аспектов, как цвет текста и фона.
Способ 2: использование плагина
Пожалуйста, используйте предпочтительный метод установки плагина, чтобы включить плагин Enlighter – Customizable Syntax Highlighter на свой сайт WordPress.
После активации плагин будет полностью функциональным и позволит вам вставлять код в любой пост/страницу с помощью блока Gutenberg или кнопки «Вставить» в классическом редакторе.
Если вы используете редактор блоков WordPress Gutenberg, откройте сообщение, в котором вы хотите показать код. Нажмите одну из кнопок «Добавить блок» (обозначенную символом «+»), чтобы открыть ассортимент доступных блоков.
Просмотрите или введите ключевое слово, относящееся к блоку Enlighten Sourcecode. Нажмите на соответствующий блок, чтобы включить его в сообщение.
Блок Enlighter Highlighter впоследствии появляется в интерфейсе редактора блоков с назначенным заголовком «Общая подсветка» и полем ввода текста с надписью «Вставить исходный код...».
Введите или скопируйте и вставьте нужный код, предназначенный для отображения в WordPress, в специальное текстовое поле «Вставить исходный код...».
В качестве средства подсветки синтаксиса плагин сохраняет все настройки форматирования и таблицы. Достигнув результата, перейдите к выбору кнопки «Опубликовать».
Используя эту функцию, вы можете получить доступ к пользовательскому интерфейсу вашего сообщения, чтобы наблюдать за тем же контентом, что и посетители сайта.
Плагин Enlighter предоставляет упрощенную тему по умолчанию для отображения кода, сопровождаемого номерами строк, которые помогают в процессе структурирования и ссылок.
Как упоминалось ранее, использование плагина для демонстрации кода на платформе WordPress дает явные преимущества по сравнению с альтернативными методами. Наглядным примером такого преимущества является функциональность внешнего интерфейса, предоставляемая плагином синтаксиса Enlighter, в котором строки кода динамически выделяются по мере того, как пользователь прокручивает содержимое.
Кроме того, в поле кода, расположенном в правом верхнем углу, есть несколько кнопок, которые улучшают взаимодействие с пользователем. Примечательно, что одна из этих кнопок позволяет представить код в текстовом формате без номеров строк.
Вторая кнопка, обозначенная как «Копировать в буфер обмена», облегчает мгновенное дублирование всего содержимого в поле кода, позволяя пользователям удобно передавать и вставлять код в любую нужную программу.
Наконец, третья кнопка открывает код в новом окне, тем самым представляя его в окне браузера в виде обычного текста.
Плагин Enlighter предлагает ряд тем и надежные инструменты настройки, позволяющие адаптировать внешний вид поля кода в соответствии с вашими предпочтениями. Если вы предпочитаете не использовать тему по умолчанию, вы можете вернуться к своему сообщению в WordPress и выбрать текущий активный блок исходного кода Enlighter.
Это действие откроет боковую панель «Блок» в WordPress. Если он не появится сразу, убедитесь, что вы нажали кнопку «Настройки» (значок шестеренки), расположенную в правом верхнем углу окна WordPress.
Первым параметром настройки, который следует рассмотреть, является поле «Язык», так как оно указывает плагину, какой язык кода отображать, включая соответствующие функции форматирования и выделения.
Существует значительный выбор языков кодирования, поэтому просмотрите список и выберите наиболее подходящий.
Функция Speciallines выделяет выделенные строки, позволяя пользователям вводить номера строк, разделенные запятыми.
Следовательно, обозначенные вами линии визуально выделяются для всех лиц, заходящих на сайт.
Параметр Lineoffset предоставляет средства для начала фрагмента кода с определенного номера строки, что оказывается выгодным при представлении подмножества кода из большего набора строк.
Очевидно, что при вводе значения «10» в поле Lineoffset весь блок кода начинается со строки с номером 10.
Способ 3: использование инструмента кодировщика
Посетите веб-сайт W3Docs HTML Encoder. На странице вы найдете два соседних поля. Левый предназначен для вставки вашего кода, а правый отображает закодированную версию, которую вы можете скопировать и вставить в WordPress.
Прежде чем продолжить, необходимо указать желаемый тип сохранения кода:
- Выберите JavaScript Unicode, если вы планируете вставлять код, содержащий элементы JavaScript.
- Выбирайте символы HTML, если вы работаете с HTML.
Вставьте желаемый код, который будет отображаться в WordPress, в специальное поле слева. Затем найдите и выберите кнопку «Кодировать», расположенную выше с правой стороны.
Окончательный результат может показаться озадачивающим; однако по сути это объединение элементов HTML, направленное на сохранение всего вставленного кода, избегая при этом любой непреднамеренной активации или отображения альтернативного контента во внешнем интерфейсе.
Пожалуйста, нажмите кнопку "Копировать".
Вернитесь в WordPress и получите доступ к нужной записи или странице. Перейдите к меню «Параметры» (обозначено тремя вертикальными точками), расположенному в правом верхнем углу. Затем выберите функцию редактора кода.
Текущий интерфейс будет представлять редактор кода вместо визуального редактора блоков. Найдите нужный раздел для отображения кода и приступайте к вставке закодированного HTML в редактор.
Если вы используете классический редактор WordPress, обязательно перейдите на вкладку «Текст», которая соответствует редактору кода в редакторе блоков Gutenberg.
Выберите вариант «Обновить» или «Опубликовать», чтобы завершить публикацию, и перейдите к интерфейсу публикации, чтобы увидеть ее визуальное представление.
Вы сможете наблюдать за неизмененным кодом, который изначально был вставлен в кодировщик до включения элементов кодирования HTML. Важно отметить, что кодировщики не предоставляют никаких возможностей для стилизации, что делает этот подход идеальным для достижения аккуратной и минималистской эстетики.
Способ 4: использование пользовательского шорткода
Создание собственного шорткода выполняет задачу вставки повторно используемых блоков кода без необходимости ручного копирования и вставки. Именно поэтому пользовательские шорткоды предоставляют надежную возможность для отображения кода на платформе WordPress.
Преимущества использования пользовательских шорткодов для представления кода заключаются в следующем:
- Пользовательские шорткоды позволяют сохранять сложные участки кода для повторного использования в будущем, избавляя от необходимости многократно вводить длинные фрагменты кода.
- Можно определить персонализированные стили CSS для подсветки кода и контейнеров.
- Шорткоды могут использоваться любым пользователем, что позволяет другим участникам легко использовать ваши средства выделения кода и блоки простым щелчком мыши.
Создание собственного шорткода требует умения изменять файлы тем WordPress, работать с кодом PHP и, возможно, разрабатывать плагины WordPress. В результате создание собственного шорткода для WordPress может вызвать трудности у новичков в PHP.
Тем не менее, конечный результат предлагает значительно более простой подход к отображению кода на платформе WordPress.
Можно свободно выбрать любое желаемое имя для пользовательского шорткода и установить различные альтернативы, такие как [html] [/html] и [css] [/css], для поддержки различных языков программирования.
Обратите внимание, что для оптимальной подсветки синтаксиса рекомендуется использовать пользовательские шорткоды в сочетании с текстовым редактором (в WordPress Classic) или полем Custom HTML при работе с редактором блоков WordPress Gutenberg.
Цель состоит в том, чтобы создать индивидуальный шорткод, который позволяет пользователям вводить или вставлять код в пределах ограниченных границ открывающего и закрывающего тегов шорткода.
Цель состоит в том, чтобы разработать индивидуальный шорткод, который позволяет пользователям вводить или вставлять код в назначенные открывающие и закрывающие теги шорткода.
Подведение итогов
Отображение кода в WordPress имеет решающее значение для обмена концепциями программирования, обеспечения точности, улучшения внешнего вида и содействия совместной работе. Это позволяет разработчикам обучать свою аудиторию, предоставлять конкретные доказательства, улучшать пользовательский опыт и поощрять участие сообщества. Демонстрация фрагментов кода способствует прозрачности, доверию и достоверности информации. Пользовательские шорткоды или плагины могут обеспечить визуально привлекательное и хорошо структурированное отображение кода. Совместное использование кода облегчает обсуждение, обратную связь и инновации. В целом, эффективное отображение кода в WordPress необходимо для распространения знаний, обеспечения качества и роста сообщества разработчиков WordPress.
