где редактировать html код в wordpress
Редакторы
Редактор — это место, где добавляется содержимое для сайта или блога. В одном редакторе можно обрабатывать как записи, так и страницы. На этой странице описаны различные редакторы, которыми вы можете воспользоваться.
Редактор WordPress
Редактор WordPress, который также называют редактор блоков, был выпущен в конце 2018 года. Он предоставляет самые мощные и гибкие возможности редактирования WordPress. Им пользуются миллионы владельцев веб-сайтов по всему миру.
Каждый элемент сайта, например изображения, тексты, видеоролики и заголовки, добавляется посредством блока. Блоки — это отдельные структурные элементы, которые позволяют изолировать области содержимого для редактирования.
Редактирование HTML в редакторе WordPress
Существует два варианта редактирования HTML в редакторе WordPress.
На панели инструментов для каждого блока есть кнопка с многоточием. В ее меню есть опция Редактировать как HTML, которая позволяет отредактировать HTML только для этого конкретного блока.
Чтобы отредактировать HTML для всей страницы или записи, нажмите кнопку с многоточием рядом с кнопкой «Опубликовать» и перейдите в Редактор кода.
Не весь код будет работать в режиме «Редактировать как HTML». Если код правильно сформирован и не содержит ошибок, убедитесь, что он включен в список разрешенных тегов HTML и не является кодом для ограниченного использования как, например, JavaScript.
Переход на редактор WordPress
Если запись или публикация были в классическом редакторе до появления редактора WordPress, все существующее содержимое будет размещено в классическом блоке, где доступны многие функции классического редактора.
Нажмите кнопку с многоточием в правом верхнем углу классического блока, чтобы преобразовать содержимое в блоки.
Классический редактор
Классический редактор использовался по умолчанию для сайтов и блогов WordPress.com до выхода редактора WordPress (см. выше).
В редакторе WordPress есть классический блок, который повторяет функционал классического редактора WordPress. Он выглядит следующим образом:
В классическом блоке применяются те же инструменты редактирования, что и в классическом редакторе.
Классический редактор также доступен в WP Admin — классической консоли WordPress. В онлайн-руководствах по работе с WordPress часто фигурируют изображения этой консоли. Хотя практически все операции доступны в главной консоли WordPress.com, по желанию можно использовать WP Admin.
Доступ к консоли WP Admin осуществляется двумя способами:
Чтобы отредактировать страницу или запись в классическом редакторе, щелкните мышью её заголовок:
Страницы в WP Admin
В классическом редакторе есть два режима редактирования: визуальный редактор и редактор HTML.
Визуальный редактор
Визуальный редактор, работающий на базе TinyMCE, очень похож на текстовый процессор. Значки в визуальном редакторе дают возможность форматировать текст, изменять шрифты и выравнивание, вставлять маркированные и нумерованные списки, а также выполнять другие действия.
Скучаете по этому инструменту редактирования? В редакторе WordPress есть классический блок, где доступны те же функции, что и в визуальном редакторе.
Редактор HTML
Редактор HTML позволяет создавать страницы и записи в формате HTML или редактировать существующий код HTML. Для доступа к нему откройте вкладку «Текст» рядом со вкладкой «Визуальный».
Используйте редактор HTML, чтобы добавлять шорткод и стили для шрифтов или вставлять коды из внешних источников.
Добавляемый код HTML должен иметь правильный синтаксис включать только разрешённые теги HTML. С помощью кнопок в верхней части окна текстового редактора удобно вставлять распространённые теги HTML. Обратите внимание, что в WordPress.com действуют определённые ограничения на использование кода. Например, JavaScript, встроенные элементы и пользовательские формы запрещено использовать по соображениям безопасности.
Сторонние редакторы
На сайтах, тарифный план которых обновлён до версий Business или eCommerce, можно устанавливать плагины, в том числе сторонние редакторы (например, Elementor и WP Bakery). В некоторых случаях сторонние темы уже содержат собственный редактор.
Помните, что при использовании стороннего редактора лучше всего обращаться за поддержкой по связанным с ним вопросам к его разработчикам. Ссылки для прямой связи с ними часто указываются на странице настройки инструмента в консоли WP-Admin.
Куда вставлять этот код в WordPress? Общая структура файлов темы
В наших уроках мы часто приводим примеры по улучшению и расширению встроенных возможностей WordPress. Часто это просто описание по настройке интересного плагина или виджета, а часто мы приводим в тексте фрагменты кода, который нужно вставить в тот или другой файл темы, чтобы добиться желаемого результата.
Как оказалось, для многих фраза — Вставьте этот код в functions.php — ничего не говорит, поэтому в этом уроке я постараюсь показать максимально упрощенно, что это за код, и как именно его нужно добавлять в файлы вашей темы. Эта заметка скорее для новичков, так что если вы профи в WordPress — ничего нового вы здесь не увидите.
Как редактировать код?
Не буду особо распинаться. Скажу коротко, у вас 2 варианта:
1. Встроенный редактор WordPress
Находится в Консоли в меню Внешний вид → Редактор.
2. Сторонние программы для правки кода
Обобщенная структура WordPress темы
Файлы темы оформления
Любой WordPress сайт (а правильней говорить тема, потому как сайт будет работать при активации одной из установленных тем) на самом деле является набором файлов. Где-то там на стороне вашего хостинг-провайдера эти файлы обрабатываются серверами, и вам на монитор возвращается готовый результат — собственно сайт. То, что вы видите, когда заходите по адресу через веб-браузер.
В случае с WordPress этот набор файлов будет отличаться в каждой теме по-своему. Но есть одна общая черта: этот набор состоит из файлов с расширением .php, .css и .js (сам WordPress целиком написан на языке PHP, так что .php файлы — основная часть любой темы оформления).
В каждой теме оформления должен присутствовать минимальный набор файлов для корректной работы в среде движка WordPress. Вы можете открыть папку со своей активной темой ( корень_сайтаwp-contentthemesваша_тема) и, скорее всего, вы найдете там все эти файлы:
Далее мы поговорим об этих файлах подробнее.
Внешний вид сайта
Теперь поговорим о структуре внешнего облика WordPress сайта. Для того, чтобы не было путаницы типа » Я хочу добавить эту штучку вот сюда» или » Мне нужно вставить эту кнопку туда», определенные области WordPress темы принято называть своими именами. Случайный посетитель, попавший на любой сайт, видит то, что видит: кнопочки, панельки, заголовки, ссылки и так далее. Человек более подкованный в WordPress видит этот сайт более структурно.
Давайте для примера возьмем наш блог Hostenko.com/wpcafe. Вот как выглядит его главная страница:
Я специально скомпоновал изображение так, чтобы было видно все основные области.
Как видите, главная страница нашего блога состоит из 4-х частей: шапки, подвала, основной части и боковой панели. Справедливо отметить, что такая структура является наиболее распространенной в большинстве тем оформления WordPress.
Теперь, когда вы знаете название областей внешнего представления WordPress сайта, вы можете говорить: » Мне нужно добавить еще один баннер в подвале», или » Я хочу вставить виджет в боковую панель», или » Нужно изменить порядок меню в шапке».
Подробнее о файлах и коде
На изображении выше вы видите, что за каждую область сайта отвечает определенный файл в папке темы оформления. Вы видите 4 области, которым соответствуют 4 файла, но на самом деле файлов больше. Я опишу только самые важные файлы темы.
header.php — Шапка
Шапка — это верхняя область сайта, в которой содержится логотип, название сайта, верхнее навигационное меню, дополнительно могут вставляться рекламные баннеры, закрепленные страницы. Это верхняя (первая) область, соответственно и обрабатываться этот файл будет в первую очередь. Это означает, что в файл header.php также прописываются все подключаемые JavaScript файлы, CSS файлы и так далее.
footer.php — Подвал
Аналогично шапке, это нижняя область сайта, которая может содержать копирайты, контактную информацию, дополнительное меню, счетчики метрики и так далее. Если провести аналогию с Microsoft Word, то шапка и подвал — это верхний и нижний колонтитулы. Это те части сайта, которые всегда будут отображаться сверху и снизу, куда бы вы не перешли в рамках сайта.
index.php — Основная часть
Основная часть (она же контентная) отвечает за вывод ленты ваших постов (записей, публикаций, это все синонимы). В этом файле содержится код для вывода заголовка записи, миниатюры, автора, даты публикации, меток, анонса записи, кнопки для продолжения чтения записи далее.
Фрагмент файла:
sidebar.php — Боковая панель
Боковая панель — это блок сопровождающей информации, где выводятся виджеты, форма поиска, социальные кнопки, облако меток, реклама, баннеры и прочая информация. Боковая панель может быть справа от основной части или слева. Может быть 2 боковые панели сразу, а может отсутствовать вообще.
Фрагмент файла:
Код этого файла говорит о том, что сайдбар в этой теме полностью настраивается через Консоль. И только панель поиска жестко закреплена в верхней позиции. А значит, чтобы добавить или изменить любой элемент в боковой панели, нужно зайти в меню Внешний вид → Виджеты, и там перетащить в область сайдбара нужные элементы:
Например, многие наши читатели спрашивают, каким плагином реализован наш блок социальных кнопок на главной странице. Ответ примерно следующий: это не плагин а наша собственная разработка. В сайдбаре добавлен виджет «Текст», который содержит код описания каждой кнопки. Выглядит это примерно так:
functions.php — Файл конфигурации темы
Это файл, которого «не видно» на сайте, но который играет очень важную роль в правильной работе темы оформления. Фактически, здесь содержатся инструкции по работе административной части темы оформления, здесь регистрируются все дополнительные функции, которые может задействовать тема, сюда включаются для загрузки все прочие компоненты и модули темы, которые были вынесены разработчиком в рамках отдельных файлов, чтобы потом можно было заменить одну составляющую вместо всего файла functions.php целиком.
Другими словами, этот файл отвечает за основную функциональную составляющую темы оформления. И именно в functions.php вставляется большинство примеров кода из наших уроков.
Фрагмент файла:
В этот файл приходится чаще всего вставлять код из примеров в наших уроках. Делается это очень просто: скопируйте код из урока, нажав по этой кнопке:
(это картинка, а не фрагмент кода)
Затем откройте файл functions.php (или другой нужный файл) с помощью встроенного редактора или сторонней программы (как было описано выше), опуститесь в конец файла и вставьте код перед закрытием php тега ?>
Это основное и единственное правило — не нарушить целостность и структуру уже существующего кода.
Если код, который вы вставляете, начинается открытием php тега
style.css — Таблица стилей оформления
Еще один очень важный файл, без которого не будет работать ни одна тема оформления WordPress. Этот файл как раз лучше всего «видно» на главной странице любого WordPress сайта.
Все оформление, фон, шрифты, цвета, интервалы отступа, заливка, тени, градиенты — за все это отвечает единый файл style.css, поэтому его важность сложно переоценить.
Фрагмент файла:
Этот файл отличается от всех, описанных выше, так как он целиком написан, используя разметку веб-стилей CSS. Поэтому весь код, что касается настройки оформления в наших уроках, добавляется в этот файл. Просто откройте этот файл, прокрутите в конец и добавьте свой css код начиная с новой пустой строки.
Какие еще файлы мы забыли?
Я просто коротко перечислю с описанием:
Вот и все! Надеюсь этот урок разъяснил некоторые моменты, и теперь вам будет проще ориентироваться, в какой именно файл нужно вставлять дополнительный код.
Как редактировать исходный HTML-код в WordPress?
WordPress становится популярным благодаря простому в использовании интерфейсу. Дизайн WordPress устраняет необходимость кодирования и упрощает создание веб-сайтов. Тогда зачем вносить изменения в сайт, созданный на WordPress? HTML (язык гипертекстовой разметки) пригодится при добавлении дополнительных функций, расширенных функций или устранении неполадок вашего сайта путем редактирования его кода. Есть много способов редактировать внутренний код, и в этой статье мы объясним различные методы редактирования исходного HTML-кода в WordPress.
Зачем редактировать исходный HTML-код?
У плагинов и тем WordPress есть множество ограничений для настройки элементов сайта или изменения внешнего вида. Чтобы оформить свой сайт так, как вы хотите, необходимо отредактировать HTML-код в WordPress, чтобы получить именно те функции, которые вы ищете на сайте. Таким образом, это обеспечивает контроль и гибкость того, как ваш сайт будет выглядеть, функционировать, а также возможность выявлять и исправлять возможные ошибки. Вот некоторые из простых случаев, когда вам нужно отредактировать исходный HTML:
Как редактировать исходный 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-кода, обычно с нуля.
2. Измените исходный HTML-код в классическом редакторе.
Если вы используете классический редактор на своем сайте WordPress, текстовое представление — это то, что вам нужно для доступа и редактирования HTML-кода записи / страницы. Просто щелкните вкладку «Текст» в классическом редакторе, чтобы начать вносить изменения в код, и вы можете вернуться к нормальному виду после редактирования, щелкнув вкладку «Визуальный».
Часто используемые HTML-теги доступны в виде кнопок меню для использования во время редактирования вашего сайта.
3. Вставьте HTML-код в область виджетов.
Подобно использованию пользовательского HTML в области содержимого, вы можете использовать тот же блок для вставки вашего HTML-кода в область виджетов. Вы используете «Пользовательский HTML» в виджетах для настройки заголовка, боковой панели, нижнего колонтитула или других разделов вашего сайта WordPress.
4. Отредактируйте HTML-код в редакторах тем и плагинов.
Хотя это не совсем рекомендуется, поскольку любая небольшая ошибка во время редактирования темы может сделать ваш сайт неработоспособным. Вы должны создать резервную копию своего сайта перед изменением, и любое обновление, которое вы выполняете в теме после редактирования кода, приведет к потере всех сделанных изменений. В качестве альтернативы используйте дочернюю тему, чтобы обновление родительской темы не повлияло на ваши изменения в дочерней теме.
Точно так же вы можете редактировать файлы плагина в разделе «Плагины> Редактор плагинов». Помните, что эти редакторы обычно содержат файлы CSS и PHP для вашей темы и плагинов. Вы можете редактировать CSS и обновлять HTML внутри файлов PHP для изменения элементов HTML.
5. Отредактируйте HTML-код с помощью FTP или файлового менеджера.
Приложение File Manager на панели хостинга — стандартная функция, доступная для всех сайтов, разработанных с помощью WordPress. Это альтернатива и намного предпочтительнее перечисленных выше способов редактирования HTML в WordPress.
Опять же, в темах и папках WordPress не будет много файлов HTML. Вам необходимо отредактировать HTML-содержимое внутри правильных PHP-файлов для достижения требуемой функции. Вместо использования приложения File Manager вы также можете использовать FTP для удаленного входа на свой сервер и редактирования исходных файлов.
6. Использование плагина для редактирования кода
Мы рекомендуем использовать один из вышеперечисленных методов для редактирования или добавления HTML-кода на ваш сайт WordPress без использования сторонних плагинов. Однако плагины могут помочь в организации ваших изменений, особенно если вы вставляете много HTML-кода в контент сообщений. В репозитории WordPress доступны различные типы плагинов, и вы можете использовать их в зависимости от цели:
Заключительные слова
Хотя WordPress работает с PHP, окончательный результат доставляется браузеру в виде статических файлов HTML. Когда вы посмотрите на исходный код страницы в браузере, вы увидите только чистую HTML-страницу, которая включает содержимое CSS и JavaScript. Редактирование в классическом редакторе или редакторе Гутенберга — хороший вариант для изменения HTML определенных элементов на странице. Вы можете использовать другие параметры редактирования файлов для изменения содержимого HTML внутри файлов PHP.
Где редактировать код вашего шаблона WordPress
На этой страницы вы найдете небольшую инструкцию редактировать код вашего шаблона WordPress.
Вступление
CMS WordPress всегда имела внутренний инструмент для редактирования кода установленных тем. Ранее инструмент редактора был простым. С версии WP 4.9 в редактор добавили подсветку и инструмент предупреждения ошибок редактирования (песочницу). При этом авторы добавили возможность отмены подсветки. Где редактировать код вашего шаблона WordPress в этой небольшой инструкции.
Предупреждения
Во-первых, никогда не редактируйте код рабочего шаблона без резервной копии сайта или, как минимум копии шаблона. Эта мера безопасности позволит избежать потери сайта при неправильном редактировании. Делайте это, несмотря на имеющийся инструмент контроля за правкой кода (песочницу).
Во-вторых, помните, что прямая ручная правка кода шаблона, пропадёт после первого же обновления шаблона. Чтобы избежать отката редакции кода шаблона, используйте инструмент дочерней темы WordPress.
Где редактировать код вашего шаблона WordPress
Авторизуйтесь в административной панели сайта. Для редакции кода ваша роль пользователя должна быть не менее администратор.
Обратите внимание, что панель WordPress позволяет редактировать код не только рабочего (активного) шаблона, но любой темы установленной на сайт.
Если подсветка кода мешает, вам нужно отключить подсветку кода на вкладке Пользователи>>>Ваш профиль, поле «Отключить подсветку».
Остаётся проверить, на сайте, применение ваших изменений.
Вывод
Найти, где редактировать код вашего шаблона WordPress совсем не сложно. Важно точно знать, зачем это нужно, а также иметь под рукой, совсем не лишнюю резервную копию всего сайта. Хотя без ошибок не приходят знания, и если хотите разбираться в WordPress, править код нужно уметь.