Как редактировать исходный 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.