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

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

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

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

• Вы хотите изменить семейство шрифтов элемента абзаца на определенной странице.
• Необходимо скопировать и вставить все содержимое сообщения и изменить код.
• Хотел добавить собственный класс CSS к нескольким элементам на странице.

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

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

1. Редактирование кода в редакторе блоков Гутенберга

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

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

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

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

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

1.2. Редактирование HTML всей страницы / сообщения

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

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

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

Гутенберг также позволяет добавлять собственный класс 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 или файлового менеджера.

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

• Начните с входа в свою учетную запись хостинга, указав данные для входа. Если вы используете cPanel, войдите в свою cPanel с URL-адресом: yoursitename.com/cpanel.
• После входа в систему вы увидите разные папки или файлы, составляющие ваш сайт.
• Найдите и щелкните «Диспетчер файлов», чтобы выбрать папку «public_html».
• Выберите «wp-content» и нажмите «themes».
• Наконец, коснитесь того файла, который хотите отредактировать. Например, вам может потребоваться отредактировать файл header.php, чтобы внести изменения в HTML в разделе заголовка вашего сайта.

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

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

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

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

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

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

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

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