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

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

Зачем редактировать исходный HTML-код?

Плагины и темы, предлагаемые WordPress для настройки элементов сайта или изменения внешнего вида, имеют множество ограничений. Чтобы оформить свой веб-сайт так, как вы хотите, необходимо отредактировать HTML-код в WordPress, чтобы получить именно те функции, которые вы ищете на сайте. Таким образом, это обеспечивает контроль и гибкость того, как ваш сайт будет выглядеть, функционировать, а также возможность выявлять и исправлять вероятные ошибки. Вот несколько простых случаев, когда вам нужно отредактировать исходный HTML-код:

Вы хотите изменить семейство шрифтов элемента абзаца на определенной странице.

Нужно скопировать и вставить весь контент поста и изменить код.

Хотел добавить собственный класс CSS к нескольким элементам на странице.

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

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

1. Редактирование кода в редакторе блоков Gutenberg

Редактор блоков Gutenberg упрощает редактирование исходного HTML в визуальном режиме. Как только необработанный HTML-код сайта WordPress станет видимым, приступайте к редактированию, изменяя стили текста, добавляя гиперссылки или любой другой код на свою страницу/публикацию. Но во-первых, есть три способа редактирования страницы или публикации в Гутенберге, и вот они:

1.1. Редактирование HTML определенного блока

Допустим, у вас есть блок абзаца и вы хотите отредактировать его исходный HTML-код. Сначала выберите блок, который хотите отредактировать, и нажмите на три точки меню. Выберите опцию «Редактировать как HTML», как показано ниже:

Вы увидите исходный код выбранных элементов и сможете редактировать его в редакторе.

Закончив редактирование кода, щелкните трехточечное меню и выберите «Редактировать визуально», чтобы вернуться к текстовому/начальному виду.

1.2. Редактирование HTML всей страницы/записи

Найдите три точки в правом верхнем углу текущей страницы или публикации и нажмите на нее. В раскрывающемся меню выберите «Редактор кода».

Таким образом, вы можете просматривать исходный код всего вашего контента и редактировать его. закончив редактирование, снова нажмите на три точки и выберите «Визуальный редактор» для выхода. Кроме того, вы можете нажать «Выйти из редактора кода», чтобы закрыть редактор кода.

1.3. Вставка пользовательского CSS в элементы

Gutenberg также позволяет добавлять пользовательский класс CSS в любой блок на странице. Выберите блок и перейдите в раздел «Блокировать» на правой боковой панели. Прокрутите вниз и добавьте свой собственный класс CSS в раздел «Дополнительные классы CSS». Вы можете добавить несколько классов CSS, разделив их запятой.

После обновления или публикации сообщения перейдите в раздел «Внешний вид > Настройка > Дополнительный CSS». Здесь вы можете добавить свой собственный CSS для класса, который вы добавили в редакторе. вы можете просмотреть изменения в реальном времени и опубликовать изменения, когда закончите.

1.4. Вставка кода с помощью пользовательского блока HTML

Этот метод требует добавления контента на вашу страницу или в публикацию путем написания HTML-кода, как правило, с нуля.

Начните с нажатия знака плюс (+) в верхней левой части существующей/новой страницы или сообщения.

Вы увидите «Пользовательский HTML» в категории «Виджеты» меню.

Кроме того, вы можете найти «Пользовательский HTML», введя ключевое слово в поле поиска.

Затем щелкните по нему и начните писать свой HTML-код.

Используйте вкладку «Предварительный просмотр», чтобы проверить внешний вид вашего работающего сайта во время написания кода.

2. Редактируйте исходный HTML-код в классическом редакторе.

Если вы используете классический редактор на своем сайте WordPress, текстовое представление — это то, что вам нужно для доступа и редактирования HTML-кода записи/страницы. Просто щелкните вкладку «Текст» классического редактора, чтобы начать вносить изменения в код, и вы можете вернуться к обычному виду после редактирования, щелкнув вкладку «Визуальный».

Часто используемые теги HTML доступны в виде кнопок меню для использования во время редактирования вашего сайта.

3. Вставьте HTML-код в область виджетов

Подобно использованию пользовательского HTML в области содержимого, вы можете использовать тот же блок для вставки своего HTML-кода в область виджетов. Вы используете «Пользовательский HTML» в виджетах для настройки заголовка, боковой панели, нижнего колонтитула или других разделов вашего сайта WordPress.

На панели инструментов WordPress выберите «Внешний вид», а затем нажмите «Виджеты».

В зависимости от темы, которую вы используете, разверните любую вкладку «раскрывающийся список» виджетов и щелкните значок + с надписью «Добавить блок».

Затем выберите «Пользовательский HTML».

Введите свой HTML-код и, наконец, нажмите «Обновить», чтобы применить изменения, внесенные на действующий сайт.

4. Редактируйте HTML-код в редакторах тем и плагинов.

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

Для начала нажмите «Внешний вид», а затем «Редактор тем».

Вы получите предупреждающее сообщение, и нажав кнопку «Я понимаю», вы получите доступ к изменению темы.

В показанном интерфейсе редактора тем щелкните файл, с которым вы хотите работать, и начните редактировать его HTML-коды.

После завершения редактирования нажмите «Обновить файл», чтобы сохранить изменения.

Точно так же вы можете редактировать файлы плагина в разделе «Плагины > Редактор плагинов». Помните, что эти редакторы обычно содержат файлы CSS и PHP для вашей темы и плагинов. Вы можете редактировать CSS и обновлять HTML внутри файлов PHP, чтобы изменять элементы HTML.

5. Редактируйте HTML-код с помощью FTP или файлового менеджера.

Приложение «Диспетчер файлов» на панели хостинга — это стандартная функция, доступная для всех сайтов, разработанных с помощью WordPress. Это альтернатива и гораздо предпочтительнее вышеперечисленных способов редактирования HTML в WordPress.

Начните с входа в свою учетную запись хостинга с данными для входа. Если вы используете cPanel, войдите в свою cPanel с URL-адресом: .

После входа в систему вы увидите различные папки или файлы, которые составляют ваш сайт.

Найдите и нажмите «Диспетчер файлов», чтобы выбрать папку «public_html».

Выберите «wp-content» и нажмите «темы».

Наконец, коснитесь файла, который хотите отредактировать. Например, вам может понадобиться отредактировать файл header.php, чтобы внести изменения в HTML в разделе заголовка вашего сайта.

Выберите кодировку символов, а затем нажмите кнопку «Изменить», чтобы продолжить.

Для «Редактировать» есть лучший вариант «Загрузить». Рекомендуется использовать его, потому что удобное или правильное редактирование доступно на вашем персональном компьютере. после окончания редактирования загрузите файл обратно, чтобы заменить текущую папку темы.

Опять же, в темах и папках WordPress не будет много HTML-файлов. Вам нужно отредактировать содержимое HTML внутри правильных файлов PHP, чтобы получить требуемую функцию. Вместо использования приложения «Диспетчер файлов» вы также можете использовать FTP для удаленного входа на сервер и редактирования исходных файлов.

6. Использование плагина для редактирования кода

Мы рекомендуем использовать один из вышеперечисленных методов для редактирования или добавления HTML-кода на ваш сайт WordPress без использования каких-либо сторонних плагинов. Тем не менее, плагины могут помочь в организации ваших изменений, особенно если вы вставляете много HTML в контент постов. В репозитории WordPress доступны различные типы плагинов, и вы можете использовать их в зависимости от цели:

Insert HTML Snippet — это простой плагин для создания HTML-виджетов и их вставки в любом месте содержимого и области виджетов.

Вставьте верхний и нижний колонтитулы — это полезный плагин для вставки кода в область верхнего и нижнего колонтитула вашего сайта.

Фрагменты кода — если вы хотите отредактировать файл functions.php и применить новую функцию на своем сайте, то этот плагин для вас.

Заключительные слова

Хотя WordPress работает с PHP, конечный результат доставляется в браузер в виде статических HTML-файлов. Когда вы просматриваете исходный код страницы в браузере, вы увидите только чистую HTML-страницу, которая включает содержимое CSS и JavaScript. Редактирование в редакторе Classic или Gutenberg — хороший вариант для изменения HTML определенных элементов на странице. Вы можете использовать другие параметры редактирования файлов для изменения содержимого HTML внутри файлов PHP.