Как в wordpress редактировать коды html: Как отредактировать код WordPress страницы html

мой сайт использует шаблон wordpress, и я хочу отредактировать домашнюю страницу, но я не могу найти исходный файл homepage…i перейти к источнику chrome — view, но не могу найти index.php, который…

Я использую WordPress и сделал несколько постов. Какой файл мне нужно отредактировать, чтобы тот же HTML отображался внизу всех сообщений?

Я помогаю члену семьи с их блогом WordPress, и он / она хотел, чтобы комментарии были показаны на главной странице. Таким образом, пользователям не нужно нажимать на заголовок, чтобы добавить…

У меня есть блог wordpress, и я хочу немного настроить его. Я знаю CSS и HTML, но не php. из того, что я понял, php должен вызывать код html, поэтому, если я смогу найти код html, мне будет легко…

Нужна некоторая помощь с содержимым контактной страницы темы wordpress. Я пытаюсь отредактировать его непосредственно из исходного кода, он, кажется, отображается как файл html. Я понимаю, что…

Я использую эту тему http://demo.themeum.com/wordpress/ educon / И нужно отредактировать красную верхнюю панель так, чтобы она выглядела как изображение Я попытался отредактировать его в классе…

Я хочу отредактировать код HTML моей страницы WordPress. Именно, я хочу создать страницу, а не посты, на моей странице WordPress , где я хочу выставить свой CV и вставить свою фотографию, которая…

Я использую тему Avada в WordPress. Я хотел бы внести небольшие изменения в мобильное меню, любые идеи о том, как я могу его отредактировать. Я знаю, что в бэкэнде WordPress я могу найти только…

Я продолжаю получать эту страницу всякий раз, когда пытаюсь отредактировать или добавить новую страницу. Я ничего не могу сделать, чтобы отредактировать мои WordPress страницы. Мой сайт в настоящее…

Где редактировать код вашего шаблона WordPress

На этой страницы вы найдете небольшую инструкцию редактировать код вашего шаблона WordPress.

Вступление

CMS WordPress всегда имела внутренний инструмент для редактирования кода установленных тем. Ранее инструмент редактора был простым. С версии WP 4.9 в редактор добавили подсветку и инструмент предупреждения ошибок редактирования (песочницу). При этом авторы добавили возможность отмены подсветки. Где редактировать код вашего шаблона WordPress в этой небольшой инструкции.

Предупреждения

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

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

Где редактировать код вашего шаблона WordPress

Авторизуйтесь в административной панели сайта. Для редакции кода ваша роль пользователя должна быть не менее администратор.

• В панели инструментов панели в левом меню выберите Внешний вид >> Редактор;
• На открывшейся вкладке, с правой стороны открывшегося окна, верху выберите нужный шаблон в выпадающем списке;

Обратите внимание, что панель WordPress позволяет редактировать код не только рабочего (активного) шаблона, но любой темы установленной на сайт.

• После открытия нужной темы, откроет файл CSS, справа выберите файл который хотите редактировать;

Если подсветка кода мешает, вам нужно отключить подсветку кода на вкладке Пользователи>>>Ваш профиль, поле «Отключить подсветку».

• После сделанных правок кода можете сохранить сделанные изменения;
• Система проверит сделанные изменения на возможные ошибки. Если ошибок не обнаружено, система сообщит об отсутствии ошибок и сохранении измененного файла.

Остаётся проверить, на сайте, применение ваших изменений.

Вывод

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

©www.wordpress-abc.ru

Другие страницы сайта (инструкции)

• Где редактировать код вашего шаблона WordPress

Куда вставлять код в WordPress?

Как оказалось, для многих фраза — Вставьте этот код в functions.php — ничего не говорит, поэтому в этом уроке я постараюсь показать максимально упрощенно, что это за код, и как именно его нужно добавлять в файлы вашей темы. Эта заметка скорее для новичков, так что если вы профи в WordPress — ничего нового вы здесь не увидите.

Итак, поехали!

Как редактировать код?

Не буду особо распинаться. Скажу коротко, у вас

1. Встроенный редактор WordPress

Находится в Консоли в меню Внешний вид → Редактор.

• Плюсы: всегда под рукой, можно оперативно внести небольшие правки в код при условии, что вы точно знаете, куда лезете.
• Минусы: для правки доступны не все файлы темы и синтаксис не подсвечивается, делая этот редактор абсолютно непригодным для серьезной работы с кодом.

2. Сторонние программы для правки кода

Для Windows я пользуюсь Notepad++ и Adobe Dreamweaver. Для MacOS могу посоветовать Coda, а для Linux ничего советовать не буду, эти ребята и так отлично знают, чем лучше править код. 🙂

• Плюсы: очевидны, удобная разметка и подсветка синтаксиса. Например в Notepad++, нажимая на любой тег, подсвечивается и его закрывающийся тег-собрат. Это очень удобно.
• Минусы: это все же отдельные программы, с которыми вам придется самому разобраться. Некоторые программы бесплатные, а некоторые платные.

Обобщенная структура 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 тега <?php, то соответственно и вставлять его нужно после закрытия предыдущего. Ничего сложного.

style.css — Таблица стилей оформления

Еще один очень важный файл, без которого не будет работать ни одна тема оформления WordPress. Этот файл как раз лучше всего «видно» на главной странице любого WordPress сайта.
Все оформление, фон, шрифты, цвета, интервалы отступа, заливка, тени, градиенты — за все это отвечает единый файл style.css, поэтому его важность сложно переоценить.
Фрагмент файла:

Этот файл отличается от всех, описанных выше, так как он целиком написан, используя разметку веб-стилей CSS. Поэтому весь код, что касается настройки оформления в наших уроках, добавляется в этот файл. Просто откройте этот файл, прокрутите в конец и добавьте свой css код начиная с новой пустой строки.

Какие еще файлы мы забыли?

Я просто коротко перечислю с описанием:

• 404.php — файл, отвечающий за страницу ошибки. Если вы перешли по ссылке, которая ссылается на несуществующую запись или страницу на вашем сайте, вы попадете на 404.php, где будет написано Извините, но такой страницы не существует, или что-то в этом роде.
• archive.php — этот файл отвечает за вывод и отбор записей по выбранным критериям: по рубрике, по автору, за день, месяц, год или по метке.
• comments.php — все просто, файл отвечает за комментирование ваших записей и страниц. Содержит настройки формы комментирования.
• page.php — файл, отвечающий за публикацию и вывод Страниц. Например, в верху нашего блога в Шапке есть меню, каждый элемент которого открывает свою Страницу.
• search.php — файл, который отвечает за поиск по сайту и вывод результатов поиска.
• single.php — файл, который отвечает за публикацию и вывод Записей. Урок, который вы читаете прямо сейчас, отображается благодаря файлу single.php.

Вот и все! Надеюсь этот урок разъяснил некоторые моменты, и теперь вам будет проще ориентироваться, в какой именно файл нужно вставлять дополнительный код.

Смотрите также:

Изучает сайтостроение с 2008 года. Практикующий вебмастер, специализирующий на создание сайтов на WordPress. Задать вопрос Алексею можно на https://profiles.wordpress.org/wpthemeus/

Как редактировать сайт на wordpress, а также его код?

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

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

Поэтому прежде всего вы должны знать, на каком движке работает ваш проект, либо в каком конструкторе он создан. Потому что в каждой системе свой подход к редактированию. Давайте разберем его на примере самого популярного движка – WordPress.

Изменяем сайт в cms WordPress

Во-первых, вам нужно зайти в панель управления. Когда эта тривиальная задача выполнена, слева видим меню управления, которое сразу отвечает на многие вопросы. Я считаю WordPress одной из самых простых систем. Какие пункты в панели мы видим?

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

JavaScript. Быстрый старт

Изучите основы JavaScript на практическом примере по созданию веб-приложения

Новые посты в WordPress добавляются с помощью удобного визуального редактора. При необходимости вы можете переключиться в режим html, в котором можете свободно вставлять код в запись, при условии владения языками html, css и javascript.

После добавления новой заметки вы увидите ее в пункте “Все записи”, где ее можно редактировать в случае необходимости.

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

Страницы. Страницы отличаются от записей тем, что информация на них публикуется один раз и обычно не меняется, также у страниц обычно отсутствуют комментарии, так как они присутствуют чисто для того, ятобы предоставить какую-то информацию. Например, на блоге могут быть такие страницы: об авторе, карта блога, контакты, услуги, предложения и т.д.

Комментарии. В этой вкладке вы можете модерировать комментарии. Если кто-то оставил комментарий и его нужно модерировать, вы это обязательно увидите. Комментарий можно одобрить, изменить, удалить или отправить в спам. А еще на него можно ответить, завязав общение с человеком.

Внешний вид. Эту вкладку я подробно рассматривать не буду, так как это займет 10 страниц текста) В общем, здесь вы можете настроить меню, виджеты, изменить шаблон, фоновый рисунок и даже поковыряться в коде.

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

JavaScript. Быстрый старт

Изучите основы JavaScript на практическом примере по созданию веб-приложения

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

Плагины. Очень важный пункт. Тут вы можете смотреть, какие плагины стоят у вас в данный момент, редактировать их и удалять, а также устанавливать новые. Хочу заметить, что при установке многих плагинов в панели управления WordPress появляются новые пункты.

Пользователи. Достаточно важный пункт, если вы планируете работать над сайтом не одни. Например, наймете какого-нибудь человека, чтобы он правил ошибки в статьях. Соответственно, нужно будет создать нового пользователя, дать ему определенные права, после чего выслать этому человеку логин и пароль для входа, либо дать ему возможность зарегистрироваться самому.

Также вы можете создать пользователям с большим количеством прав, либо совсем с ограниченными правами.

Инструменты. Сюда будут добавляться различные дополнительные возможности, которые предлагает WordPress и его плагины.

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

Вот мы и прошлись по всем пунктам, которые есть в WordPress. Хочу отметить, что это именно те, что доступны администратору. Если вы войдете на сайт в качестве автора, например, то увидите лишь пару возможностей, которые будут доступны.

Собственно, в других движках все может быть по-другому, но общая суть примерно такая же. Это то, что касается сайтов на движках. Конечно, я рассмотрел все эти настройки в первую очередь для новичков, потому что опытные пользователи разбираются в них очень легко. Если же вы хотите научиться чему-то более продвинутому, например, узнать, как редактировать шаблон сайта и даже создавать свой собственный, тогда вам нужен подробный обучающий курс. Например, вот этот, в котором полностью проходит процесс создания уникального шаблона.

Как редактировать сайт в конструкторе?

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

Как редактировать код сайта?

Код вы сможете изменять, только если имеете доступ к файлам на сервере. Например, FTP-доступ. Соединяемся по ftp и находим у себя на сервере папку со своим сайтом. Там уже вы сможете увидеть файлы, найти нужный и редактировать. Вообще советую вам лезть в код, только если есть хотя бы базовые знания.

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

Прямо на сервере

Качать себе на компьютер, изменять и закачивать обратно

Первый способ позволяет увидеть результат сразу. Но вообще для экспериментов я крайне советую вам ставить локальный сервер.

Ну что ж, на этом я буду заканчивать этот экскурс по редактированию интернет-ресурса для начинающих. По крайней мере с вордпресом вы должны справиться, потому что он ориентирован как раз на новичков. До встречи в следующих статьях и подписывайтесь на webformyself, если хотите получать новые знания по сайтостроению.

JavaScript. Быстрый старт

Изучите основы JavaScript на практическом примере по созданию веб-приложения

Фреймворк YII2. Быстрый старт

Создание блога с использованием фреймворка Yii2!

Все способы добавить код в WordPress

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

Для того, чтобы добавить код в WordPress существует несколько удобных, правильных и неудобных, неправильных способов. В этой статье я расскажу вам про все эти способы. И все они могут пригодиться на практике. 

Добавление кода в виджет

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

Для тех, кто не знает: виджеты находятся в пункте «Внешний вид», подпункте «Виджеты». Нужно лишь переместить мышкой виджет «HTML-код» или «Текст» из области «Доступные виджеты» (слева страницы), в какую либо область справа страницы. Затем в него можно вставить текст и сохранить с помощью соответствующей кнопки.

Если используется виджет «Текст», то код нужно добавлять во вкладку «Текст», а не «Визульно».

Но удобнее, всё-таки, использовать виджет «HTML-код», который специально для этого и предназначен. В нём всего одна вкладка, а также есть подсветка синтаксиса.

Иногда возникает необходимость добавить в виджет PHP код и сделать так, чтобы он работал. В этом случае придётся пользоваться дополнительным плагином, который создаст новый виджет «PHP-код».

Плагин называется PHP Code Widget и ссылка на него ниже.

Добавление кода в настройки темы

Ещё один способ добавить код в WordPress — это внедрить его в настройки дизайна. Подойдёт для добавления своих CSS стилей, а в не которых случаях (в зависимости от темы) и других видов кодов.

Для интеграции перейдите в пункт «Внешний вид», подпункт «Настроить». Вы увидите секции с опциями слева. Откройте «Дополнительные стили».

И вставьте CSS код в поле. Не забудьте сохранить всё кнопкой «Опубликовать».

А если нажать на кнопку с иконку в виде шестерёнки, то можно будет ещё и просто сохранить изменения, без публикации, и даже запланировать их публикацию на указный день и время. 

Некоторые темы в своих настройках позволяют добавлять и другие  типы кодов в разные области сайта. Например, тема Frontier, которая используется на моём сайте, имеет специальное поле для вставки кода в область сайта head.

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

Добавление кода с помощью плагинов

Универсальный способ добавить код в WordPress — это использовать плагин. И есть несколько вариантов. 

Во-первых, рекомендую простой плагин Head, Footer and Post Injections. После активации перейдите в пункт «Настройки», подпункт «Head and footer». И тут вы увидите возможность добавить любой код в любое место сайта: в шапку, подвал, записи, страницы. Кроме того, есть дополнительные опции, вроде включения добавленного кода только на некоторых устройствах или типах страниц.

Есть, что изучать в этом плагине. Только один недостаток — всё на английском языке. Скачать можно по ссылке ниже.

Ещё один способ добавить код в WordPress, это плагин My Custom Functions. Он решает задачу интеграции PHP функций, и добавляет их так, будто они были написаны в файле темы functions.php. При этом ни обновление темы, ни даже её изменение данную интеграцию не нарушает. 

Работу этого плагина я рассматривал на примере добавления в тему функции для реализации чек-бокса соглашения на обработку персональных данных в форме комментариев WordPress.

Скачать плагин можно по ссылке ниже.

После активации плагина, перейдите в пункт «Настройки», подпункт «PHP inserter». Включите применение кода и добавьте свою PHP функцию.

Добавление кода в файл темы или плагина

Вначале я писал о том, что есть правильные и неправильные способы добавить код в WordPress. Как раз таки сделать это непосредственно в файл плагина или темы — является самым неправильным методом, но рабочим. Иногда это бывает единственным способом, и поэтому на практике, всё-таки, используется.

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

Итак, чтобы добавить код в WordPress прямо в файл, нужно перейти в пункт «Внешний вид», подпункт «Редактор» (если речь о теме) или пункт «Плагины», подпункт «Редактор» (если речь о плагине).

Сначала вы увидите пугающее предупреждение, где нужно нажать на «Я понимаю». 

И теперь перед вами откроется редактор. Здесь в списке сверху можно выбрать редактируемый продукт (тему или плагин), в колонке справа выбирается файл, а в самом центре редактор с поддержкой синтаксиса кода. 

Кроме этого, добраться до файлов тем и плагинов можно через файловый менеджер или FTP подключение. Плагины хранятся в папке wp-content/plugins, а темы в wp-content/themes. Каждый плагин/тема в отдельной папке.

При редактировании файлов будьте внимательны, делайте резервные копи. 

Статьи по теме:

Редакторы — Справка

Редактор — это место, где добавляется содержимое для сайта или блога. В одном редакторе можно обрабатывать как записи, так и страницы. На этой странице описаны различные редакторы, которыми вы можете воспользоваться.

Редактор WordPress

Редактор WordPress, который также называют редактор блоков, был выпущен в конце 2018 года. Он предоставляет самые мощные и гибкие возможности редактирования WordPress. Им пользуются миллионы владельцев веб-сайтов по всему миру.

Каждый элемент сайта, например изображения, тексты, видеоролики и заголовки, добавляется посредством блока. Блоки — это отдельные структурные элементы, которые позволяют изолировать области содержимого для редактирования.

Подробнее о том, как работает редактор 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 осуществляется двумя способами:

1. Можно воспользоваться ссылкой на WP Admin в конце списка, настроек в разделе «Мои сайты» (слева).
2. Можно добавить /wp-admin к URL-адресу сайта (пример: example.wordpress.com/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.

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

Содержание

Редактор WordPress используется для создания страниц и записей с медиаданными, а также для управления их структурой. Вам больше не нужно беспокоиться о выравнивании и структурировании текста, цитат и изображений. Теперь каждый элемент в записи или на странице помещён в отдельный блок. А вы можете просто творить.

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

Элементы редактора WordPress

Редактор WordPress состоит из трех основных разделов: верхнего меню, боковых меню и основной области содержимого.

Элементы верхнего меню

Добавление блоков: список всех доступных блоков, шаблонов блоков и часто используемых блоков.

Режимы — инструменты для выбора и редактирования блоков различными способами. Чтобы выбрать, нажмите Escape; чтобы вернуться к редактированию, нажмите «Ввод».

«Отменить» и «Повторить» — отменить действие или повторить отмененное действие.

Сведения — количество символов, слов, заголовков, параграфов и блоков, используемых в документе.

Структура — список всех блоков, использованных на странице. Он нужен для переключения между блоками.

До публикации записи или страницы будут также отображаться такие элементы:

Сохранить черновик — сохранение черновика страницы или записи.
Предварительный просмотр — просмотр страницы/записи с установленной темой.
Опубликовать — публикация страницы или записи.

После публикации записи или страницы будут отображаться такие элементы:

Сделать черновиком — отменить публикацию страницы или записи и превратить ее в черновик.
Предварительный просмотр — просмотр страницы/записи с установленной темой.
Обновить — добавление нового содержимого и обновление опубликованной страницы/записи.

Настройки — управление отображением бокового меню настроек страницы, документа или блока.

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

Jetpack — включение и выключение использования отметок «Нравится» и кнопок «Поделиться» в отдельных записях и на страницах, предварительный просмотр публикаций в соцсетях и получение коротких ссылок на запись или страницу.

Опции — настройки просмотра, стиль редактора и дополнительные инструменты.

При нажатии в верхнем меню на значки «Настройки», «Глобальные стили» и Jetpack открываются различные боковые меню.

Если вы не видите боковое меню в редакторе блоков, нажмите один из значков в верхнем меню рядом с кнопкой «Опубликовать»/»Обновить».

Настройки

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

При нажатии на блок в боковом меню настроек появляются дополнительные параметры блока, соответствующие его типу.

Глобальные стили

В боковом меню «Глобальные стили» можно изменить используемые по умолчанию шрифты заголовков и основного текста на всем сайте.

Jetpack

В боковом меню Jetpack можно выполнять следующие действия.

Область содержимого в редакторе WordPress

Это третий элемент редактора WordPress, который вы будете использовать большую часть времени. Это основной раздел редактора, в котором можно добавить блоки с содержимым.

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

Добавление содержимого с помощью блоков

Для создания содержимого в редакторе WordPress используются блоки. Отдельный блок есть для каждого типа материалов: текста, изображений, видео и аудио, столбцов, пробелов, разрывов страниц, кнопок оплаты, календарей и многого другого!

Добавление блока

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

Для добавления блока и выбора необходимого типа блока можно использовать различные способы.

Самый быстрый способ добавить блок — использовать значок плюса. Где бы вы ни увидели значок плюса, на него можно нажать и добавить блок.

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

1. Нажмите черный значок «+» сбоку от пустого блока.
2. Нажмите значок «+» в левом верхнем углу окна редактора. Тут можно увидеть, как будут смотреться блоки различных стилей.
3. Нажмите клавишу «Ввод» (клавишу перевода строки), находясь в выбранном блоке, чтобы создать под ним новый блок.
4. Щёлкните три точки над выделенным блоком и выберите, куда добавить новый блок: выше или ниже текущего.

Когда вы будете знать названия всех блоков, сможете добавлять их, вводя косую черту и название блока. Например, /image или /heading.

Просмотр часто используемых блоков

Чтобы создать рубрику часто используемых блоков, выполните следующие действия.

1. Нажмите значок многоточия (три точки) в правом верхнем углу экрана редактора.
2. Выберите Параметры.
3. Поставьте флажок рядом с пунктом Показывать часто используемые блоки.

Когда функция часто используемых боков включена, их список доступен в библиотеке блоков.

Нажмите значок «+» в верхнем меню, чтобы открыть библиотеку блоков. Часто используемые блоки отображаются вверху списка.

Перемещение блоков

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

Настройка блоков

Каждый блок имеет собственные настройки. Чтобы найти их, нажмите на блок. Откроется панель инструментов в верхней части блока. Дополнительные настройки также находятся на боковой панели справа от редактора.

Если вы не видите настройки блока в правой части окна редактора, щелкните значок настроек ⚙️ (шестеренка) рядом с кнопкой «Опубликовать» или «Обновить», чтобы раскрыть боковую панель меню.

Примеры различных панелей инструментов блока

Настройки блока — панель инструментов

Для доступа к дополнительным опциям, которые есть у большинства блоков, нажмите кнопку с многоточием справа от панели инструментов блока.

1. Команда Скрыть параметры блока закрывает меню настроек.
2. Команда Дублировать создает второй блок с тем же содержимым на той же странице.
3. Команда Вставить до/после добавляет новый блок до или после текущего.
4. Команда Редактировать как HTML переводит блок в версию HTML для редактирования кода HTML. В режиме редактирования HTML эта опция меняется на «Редактировать визуально».
5. Команда Добавить в часто используемые блоки позволяет создать блок, который можно использовать на других страницах с сохранением содержимого и стиля. Подробнее.
6. Команда Удалить блок удаляет блок со страницы или из записи.

Не весь код будет работать в режиме «Редактировать как HTML». Если код правильно сформирован и не содержит ошибок, убедитесь, что он включён в список разрешённых тегов HTML и не является кодом для ограниченного использования, как, например, JavaScript.

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

На скриншоте справа активным блоком является «Абзац», поэтому у него можно изменить размер шрифта, шрифт и цвет фона. Также для него доступны расширенные опции: создание переходов по странице или добавление класса CSS.

Если вы не видите настройки блока в правой части окна редактора, щелкните значок настроек ⚙️ (шестеренка) рядом с кнопкой «Опубликовать» или «Обновить», чтобы раскрыть боковую панель меню.

Изменение типа блока

Можно ли изменить тип блока? Без проблем! Каждый блок можно преобразовать в блок другого сходного или связанного типа. Например, изменить абзац на заголовок, список или цитату.

Навигация по блокам (выбор боков)

Некоторые блоки вкладываются в другие (так называемые «родительские» блоки), и нужен простой способ выбирать родительский блок. 

Например, вы хотите растянуть блок столбца на всю ширину страницы. Если нажать на отдельный столбец, в его настройках нужного параметра не будет. Он есть в настройках родительского блока («Столбцы») и позволяет изменить стиль разметки блока «Столбцы».

Чтобы выбрать родительский блок, наведите курсор на самый левый значок на панели инструментов блока, как на этом скриншоте.

Эта функция может пригодиться, если есть текст в блоке «Столбец» и нужно выбрать этот блок или если есть несколько кнопок в блоке «Кнопки» и нужно выбрать общий блок кнопок.

Либо можно использовать меню «Сведения», чтобы переключаться между добавленными в запись или на страницу блоками.

Меню «Сведения» — это выпадающее меню со всеми блоками, вставленными на страницу или в запись. Оно упрощает обзор структуры страницы и выбор блока, с которым вы хотите поработать.

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

С помощью меню «Сведения» особенно удобно переходить к блокам, которые сложно найти по-другому, например к отдельным столбцам в блоке «Столбцы» или блокам внутри блока «Группа».

Удаление блока

Чтобы удалить блок, выберите его и нажмите кнопку с многоточием на панели инструментов над ним. Вы увидите настройки, где есть опция удаления данного блока.

Шаблоны блоков

Шаблоны блоков — это коллекция блоков, которую можно вставить в запись или на страницу. Это быстрый способ добавить содержимое с красивой структурой.

Например, существует шаблон, с помощью которого можно вставить и расположить рядом три изображения.

Вставка шаблона блока

1. Нажмите значок «+» в верхнем меню, чтобы добавить новый блок.
2. Откройте вкладку Шаблоны.
3. Щелчком мыши выберите шаблон, который необходимо вставить. Он будет вставлен в документ в месте расположения курсора.

Подробные сведения см. в руководстве по работе с шаблонами блоков.

Предварительный просмотр страниц и записей

Хотя редактор блоков дает представление о том, как будет выглядеть страница после публикации, могут быть небольшие изменения в ее внешнем виде из-за темы или ее настроек.

Параметр Предварительный просмотр загружает страницу, с которой вы работаете, вместе с темой и сохраненными пользовательскими настройками (например, пользовательскими CSS).

Этот параметр также позволяет увидеть, как страница или запись будет выглядеть на ПК, планшете или мобильном устройстве. При использовании тарифного плана WordPress Business и выше можно также просмотреть, как страница будет выглядеть в результатах поиска и при публикации в соцсетях.

Настройки документа

Справа от редактора блоков в разделе настроек документа можно добавлять теги и рубрики, добавлять изображения в избранные, отслеживать и изменять статус записи и т. п. Эти опции применяются ко всей странице или ко всей записи.

Щёлкните стрелку вниз рядом с каждым заголовком в настройках документа, чтобы редактировать конкретные опции.

Если вы не видите настройки документа в правой части окна редактора блоков, щелкните значок настроек в виде шестеренки ⚙️ в правом верхнем углу.

Дополнительные параметры

Настройте параметры редактирования в соответствии со своими потребностями с помощью трёх точек справа от значка настройки.

Просмотреть

Показывает опции там, где отображаются панели инструментов блока при редактировании.

Редактор

По умолчанию открывается визуальный редактор. Переключитесь в редактор кода, чтобы просматривать всю страницу в виде HTML-кода.

Не весь код будет работать в режиме «Редактировать как HTML». Если ваш код имеет верный синтаксис и не содержит ошибок, убедитесь, что в нем используются только разрешенные теги HTML и нет кода с ограничениями на использование, например JavaScript.

Инструменты

Управляйте существующими блоками, которые можно использовать многократно, копируйте все содержимое для вставки на другую страницу или освойте комбинации клавиш быстрого доступа.

Опции

Укажите, какие настройки документа будут видны на боковой панели.

Часто задаваемые вопросы

Если хотите написать собственный код HTML, можете воспользоваться блоком «Пользовательский HTML».

Остальные параметры редактирования кода HTML в редакторе WordPress находятся здесь.

Не весь код будет работать в режиме «Редактировать как HTML». Если код правильно сформирован и не содержит ошибок, убедитесь, что он включён в список разрешённых тегов HTML и не является кодом для ограниченного использования, как, например, JavaScript.

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

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

Если на сайте используется тарифный план WordPress.com Business, возможно, у вас есть плагины, позволяющие добавить в редактор пользовательские блоки. Этих блоков не будет на другом сайте, где такой плагин отсутствует.

Некоторые настройки блоков (wide или full-width) должны поддерживаться в вашей теме. Одинаковые блоки могут присутствовать на разных сайтах, но какие-то настройки, применяемые для них, могут немного отличаться в зависимости от используемой темы.

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

Наша цель заключается в том, чтобы новый редактор WordPress был так же легко доступен для всех, как и предыдущие редакторы. И даже более того. Мы хотим, чтобы все могли им пользоваться. Согласно стандартам доступности WordPress, «весь новый или обновляемый код, выпускаемый на WordPress, должен соответствовать рекомендациям Руководства по обеспечению доступности веб-контента (WCAG) 2.0 на уровне AA«. Без исключений. Если возникнут проблемы доступности, свяжитесь с нами.

Нет. Новый редактор блоков будет работать со всеми темами. Но, возможно, не все темы будут поддерживать специальные функции разметки (например, содержимое с настройками wide и full-width).

Чтобы узнать количество слов на странице или в записи, нажмите значок информации, который выглядит как буква i в круге в левом верхнем углу экрана. Эта опция доступна в версии для ПК, но недоступна в мобильной версии.

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

Были ли эти инструкции полезны?

Как редактировать код WordPress

Хотя WordPress позволяет не кодировщикам легко управлять веб-сайтом, вероятно, наступит время, когда вы захотите отредактировать код в WordPress, чтобы получить немного больше контроля над тем, как ваш сайт выглядит или функционирует.

Чтобы помочь вам в этом, этот пост покажет вам, как безопасно редактировать код в WordPress несколькими различными способами:

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

Предпочитаете посмотреть видео версию?

Как вы можете редактировать код WordPress:

Чтобы получить больший контроль над внешним видом и функциями вашего сайта WordPress, вы можете редактировать код WordPress, настраивая различные области:

• Новый редактор блоков и классический редактор позволяют редактировать HTML-код для отдельных сообщений или страниц.
• Если вы хотите отредактировать исходный код своей темы WordPress, используйте дочернюю тему.
• Рассмотрите возможность использования подключаемого модуля для управления фрагментами кода, которые вы добавляете в или functions.php вашей темы.
• Если вы просто хотите добавить собственный CSS, вы можете использовать область «Дополнительный CSS» в настройщике WordPress или такой плагин, как «Simple CSS».

Как редактировать HTML в WordPress для отдельных сообщений / страниц

Давайте начнем с простейшего способа редактирования HTML в WordPress — доступа к исходному коду отдельных сообщений, страниц или других типов сообщений WordPress.

Вы можете сделать это как в новом редакторе блоков WordPress (Gutenberg), так и в старом классическом редакторе TinyMCE.

Как редактировать HTML в WordPress в редакторе блоков (Гутенберг)

Есть несколько способов работы с HTML в Gutenberg.

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

Вместо этого вы можете просто использовать специальный блок Custom HTML и вставить туда HTML-код, который вы хотите использовать:

Пользовательский блок HTML Гутенберга

Однако может наступить время, когда вам потребуется напрямую отредактировать HTML другого блока.Например, если вы хотите добавить тег nofollow к ссылке в редакторе блоков, вам нужно будет отредактировать HTML этого блока.

Это можно сделать двумя способами…

Во-первых, вы можете щелкнуть по параметрам отдельного блока и выбрать вариант Редактировать как HTML :

Как редактировать отдельный блок как HTML

Это позволит вам редактировать HTML только для этого отдельного блока:

Пример редактирования HTML блока

Или, если вы хотите отредактировать HTML для всего сообщения , вы можете получить доступ к редактору кода из основного раскрывающегося меню Инструменты и параметры .Или вы также можете просто использовать это сочетание клавиш для переключения между кодом и визуальным редактированием — Ctrl + Shift + Alt + M :

Как получить доступ к полному редактору кода в Gutenberg

Имейте в виду, что в полном редакторе кода вам придется обойти всю эту разметку для блоков — например, .

Как редактировать HTML в WordPress в классическом редакторе (TinyMCE)

Если вы все еще используете классический редактор WordPress (TinyMCE), вы можете редактировать HTML для всего сообщения, перейдя на вкладку Text :

Как редактировать HTML в классическом редакторе WordPress

Как отредактировать исходный код в вашей теме WordPress

Теперь давайте перейдем к более широкой теме — как редактировать код в вашей теме WordPress.Ставки немного выше, поэтому нам нужно ответить на несколько предварительных вопросов, прежде чем мы перейдем к практическим рекомендациям.

Почему ставки выше? Проще говоря, это потому, что вы можете сломать свой сайт, если здесь что-то напутаете!

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

Используйте дочернюю тему для любых изменений прямого кода

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

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

Если вы хотите узнать больше о преимуществах дочерних тем, а также о том, как их создать, ознакомьтесь с нашим полным руководством по дочерним темам WordPress.

Рассмотрите возможность использования плагина вместо редактирования кода в дочерней теме

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

Подпишитесь на информационный бюллетень

Хотите узнать, как мы увеличили трафик более чем на 1000%?

Присоединяйтесь к 20 000+ других, которые получают нашу еженедельную рассылку с инсайдерскими советами по WordPress!

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

Например, инъекции заголовка, нижнего колонтитула и поста упрощают внедрение фрагментов кода там, где это необходимо. А поскольку все эти фрагменты кода разделены в интерфейсе плагина, управлять ими в будущем будет проще.

Точно так же, если вы добавляете фрагмент кода, который может быть помещен в файл functions.php вашей дочерней темы, бесплатный плагин Code Snippets станет отличным вариантом.

Таким образом, если вы хотите отредактировать код в WordPress, чтобы добавить фрагменты в свою тему…

• раздел
• Функции.php файл

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

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

Используйте встроенный редактор кода WordPress

Если вы планируете напрямую редактировать код своей темы, мы настоятельно рекомендуем вам сделать резервную копию своего сайта перед этим (либо всего сайта, либо файла, который вы редактируете).

Как только вы это сделаете, вы можете получить доступ к редактору кода темы на панели инструментов, перейдя в Внешний вид → Редактор темы . Здесь WordPress сначала выдаст предупреждение, подобное тому, что вы узнали выше:

Предупреждение перед доступом к редактору кода на приборной панели

Затем вы сможете использовать боковую панель справа для перехода между различными файлами тем и самим редактором кода для внесения фактических изменений:

Встроенный редактор кода WordPress

Использование SFTP для редактирования кода в WordPress

В качестве альтернативы редактору кода на панели инструментов вы также можете редактировать файлы темы через SFTP.У этого подхода есть два преимущества:

• Вы можете использовать предпочитаемый редактор кода.
• Если вы случайно что-то сломали, вы можете сразу исправить проблему. Напротив, если вы редактируете код через свою панель управления WordPress, всегда есть вероятность, что вы можете сломать что-то, что блокирует вас из вашей панели управления WordPress, что означает, что вам нужно будет подключиться через SFTP, чтобы решить проблему (хотя, опять же — это менее вероятно благодаря недавним изменениям).

Вот как подключиться к вашему сайту через FTP.

После этого перейдите в папку своей темы — … / wp-content / themes / child-theme-name . Найдите файл, который хотите отредактировать, и щелкните его правой кнопкой мыши. Большинство программ FTP предоставляют вам возможность редактировать файл и автоматически повторно загружают файл после внесения изменений.

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

Как редактировать HTML в WordPress через SFTP

Как добавить собственный CSS в WordPress

Если вы хотите добавить в WordPress только собственный CSS, а не редактировать HTML или PHP-код WordPress, вам не нужно использовать редактор кода на панели инструментов или методы SFTP.

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

Для начала перейдите в Внешний вид → Настройте на панели инструментов WordPress:

Как получить доступ к настройщику WordPress

Затем найдите параметр Additional CSS в настройщике WordPress:

Где найти дополнительную опцию CSS в настройщике WordPress

Это откроет редактор кода, в который вы можете добавить желаемый CSS.Когда вы добавляете CSS, предварительный просмотр вашего сайта будет автоматически обновляться в соответствии с этими изменениями:

Как редактировать CSS в настройщике WordPress

Еще один хороший вариант для добавления CSS — плагин Simple CSS от Tom Usborne. Он дает вам аналогичную опцию в настройщике WordPress, а также позволяет добавлять настраиваемый CSS к отдельным сообщениям или страницам через мета-поле.

Наконец, если вы хотите добавить тонну настраиваемого CSS — например, сотни или тысячи строк — другой вариант — создать свою собственную таблицу стилей CSS и использовать wp_enqueue_scripts, чтобы добавить ее в свою тему.

Сводка

Если вы хотите редактировать код в отдельном посте или странице WordPress, новый редактор блоков и классический редактор предоставляют вам возможности для непосредственного редактирования HTML.

С другой стороны, если вы хотите отредактировать исходный код своей темы WordPress, следует учесть несколько вещей:

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

Если после этих соображений вам все еще нужно внести прямые правки в код, вы можете отредактировать исходный код дочерней темы на панели инструментов WordPress, перейдя в Внешний вид → Редактор темы . Или вы можете подключиться к своему сайту через SFTP и отредактировать код таким образом.

Наконец, если вы просто хотите добавить собственный CSS, вам не нужно напрямую редактировать код своей темы. Вместо этого вы можете просто использовать область Additional CSS в настройщике WordPress или такой плагин, как Simple CSS.

Есть вопросы о том, как редактировать код в WordPress? Спрашивайте в комментариях!

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

редакторов — Поддержка — WordPress.com

Редакторы

Редактор — это место, где вы добавляете контент на свой сайт или в блог.И сообщения, и страницы используют один и тот же редактор. На этой странице объясняются различные редакторы, которые вы можете использовать.

Содержание

Редактор WordPress

Также называется — редактор блоков. — редактор WordPress, запущенный в конце 2018 года. Это самый мощный и гибкий инструмент редактирования WordPress, который используют миллионы владельцев веб-сайтов по всему миру.

Каждый элемент сайта, например изображения, текст, видео и заголовки, добавляется через блок .Блоки — это отдельные структурные элементы, которые позволяют изолировать области содержимого для редактирования.

Редактировать HTML в редакторе WordPress

У вас есть два варианта редактирования HTML в редакторе WordPress:

На панели инструментов для каждого блока многоточие или три точки имеет параметр Редактировать как HTML для редактирования HTML только для этого конкретного блока.

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

Не весь код будет работать при редактировании как HTML. Если ваш код правильно сформирован и не содержит ошибок, проверьте, есть ли он в списке одобренных HTML-тегов и не является ли он запрещенным, как JavaScript.

Перейти в редактор WordPress

Если вы создали страницу или сообщение в классическом редакторе до того, как редактор WordPress был представлен, редактор WordPress сохранит ваш существующий контент в классическом блоке, который поддерживает многие те же функции, что и классический редактор.

Вы можете преобразовать контент в блоки, используя три точки в правом верхнем углу классического блока.

↑ Содержание ↑

Классический редактор

Классический редактор был редактором по умолчанию для сайтов и блогов WordPress.com до запуска редактора WordPress (см. Выше).

В редакторе WordPress вы найдете классический блок, который воспроизводит функциональность классического редактора внутри редактора WordPress. Вот как это выглядит:

↑ Оглавление ↑

Сторонние редакторы

Сайты, которые были обновлены до бизнес-плана или плана электронной коммерции, могут устанавливать сторонние плагины редактора, такие как Elementor и WP Bakery.Иногда сторонние темы также включают свой собственный редактор.

Имейте в виду, что при использовании стороннего редактора лучше всего получить поддержку инструмента через разработчиков, которые его создали. Они часто включают ссылки, по которым можно связаться с ними напрямую через страницу настройки инструмента в вашей панели управления WP-Admin.

Помогите нам стать лучше:

Мы всегда стремимся улучшить нашу документацию. Если эта страница не ответила на ваш вопрос или оставила желать большего, дайте нам знать! Нам нравится слышать ваши отзывы.Для получения поддержки используйте форумы или форму обратной связи. Спасибо!

Как редактировать HTML в WordPress и зачем это нужно

WordPress — это простая в использовании платформа, которую можно использовать, не касаясь ни единой строчки кода. Но знание того, как редактировать HTML в WordPress, — это хороший навык, который нужно иметь за плечами.

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

В этой статье мы поговорим о том, зачем редактировать HTML в WordPress и как это делать правильно.

Это нужно?

WordPress прекрасно работает «из коробки», а это означает, что вы можете создать красивый и функциональный веб-сайт, не написав никакого кода.

На самом деле, WordPress имеет огромную коллекцию тем и плагинов для легкой настройки вашего сайта. Итак, вам действительно не нужно знать, как редактировать HTML в WordPress.

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

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

Однако бывают случаи, когда вам нужно отредактировать HTML в WordPress, потому что это может быть единственный способ.

Например, если вы хотите выполнить расширенную настройку темы или добавить к своим сообщениям HTML-эффекты, такие как привлекательный выделенный текст.

Имейте в виду, что неправильное редактирование кода в WordPress принесет больше вреда, чем пользы. Делайте это осторожно .

На что следует обратить внимание

Редактирование исходного кода WordPress — серьезная задача. Вы должны минимизировать риск, когда можете.

Для этого вы должны обдумать, какова ваша цель, какие инструменты использовать и сколько времени у вас есть.

Спросите себя: каков ваш мотив? Вы хотите внести изменения для тестирования , учебных целей или расширенная настройка ?

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

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

Для редактирования исходного кода WordPress требуется текстовый редактор HTML, например Notepad ++ для Windows или Text Wrangler для Mac.Вам также необходимо подготовить FTP-клиент, например FileZilla , и современный браузер, например Google Chrome .

Последнее, но самое важное — решить, сколько времени вы хотите потратить на выполнение задачи.

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

Редактирование исходного кода в WordPress

Как вы, возможно, знаете, WordPress использует четыре разных языка программирования: HTML, CSS, PHP и JavaScript.

Каждый язык имеет свой собственный код и выполняет разные функции. Например, HTML управляет структурой содержимого, а CSS — внешним видом. При этом вам может потребоваться выполнить определенные операции, используя определенный набор кода.

Теперь давайте узнаем больше о том, как редактировать исходный код WordPress.

Как редактировать HTML в WordPress

Как указывалось ранее, HTML — сокращение от языка гипертекстовой разметки — управляет структурой содержимого.

Вы можете добавлять в свои сообщения WordPress любой тип контента, например текст, изображения, видео.Обычно вы делаете это из редактора WordPress.

WordPress имеет два типа редакторов: визуальный и текстовый (HTML) редактор. В классическом редакторе вы можете легко переключаться с визуального редактора на редактор HTML, поскольку они расположены рядом.

1. Щелчок по трехточечной кнопке меню на каждом блоке
2. Щелчок по трехточечному меню в верхнем левом углу для редактирования всего сообщения

Но как редактировать HTML на домашней странице? По сути, вы можете добавить собственный HTML-код из областей виджетов. Перейдите к Внешний вид -> Виджет .

В областях виджетов вы можете редактировать HTML-код доступных виджетов или добавлять другие виджеты из меню Custom HTML .

Для редактирования HTML вам нужно сначала выбрать целевой виджет, внести изменения и сохранить его.

Как редактировать PHP и CSS в WordPress

CSS (каскадные таблицы стилей) применяет стиль к HTML. Он отвечает за определение представления веб-страницы.

Когда вы применяете тему WordPress, ваш веб-сайт будет иметь определенный макет, цвет и шрифты. Если вам не нравится определенная тема, вы можете использовать другую.

Но что, если вы хотите сохранить макет темы, но хотите изменить шрифт? Затем вам может потребоваться отредактировать PHP и CSS в WordPress.

Будьте осторожны, этот метод может не подойти новичкам в WordPress.

Есть два способа редактировать PHP и CSS в WordPress: с помощью редактора кода WordPress или FTP-клиента.

1. Редактор кода WordPress

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

После создания дочерней темы активируйте ее. Затем вы можете перейти к Appearance -> Editor .

Убедитесь, что вы выбрали целевую дочернюю тему, которую хотите отредактировать. Например, если вы хотите отредактировать нижний колонтитул, вы можете выбрать footer.php справа. Затем вы можете добавить или отредактировать код в редакторе кода.

После редактирования кода нажмите кнопку Обновить файл .

2. FTP-клиент

Следующий метод использует FTP-клиент.

Хотя это мощный метод, мы не рекомендуем его использовать. . Это небезопасно и может поставить под угрозу ваш сайт при неправильном обращении. Но вот как это сделать, если вы чувствуете себя квалифицированным и доверяете своим навыкам.

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

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

Заключение

Вам нужна веская причина для редактирования HTML в WordPress. В большинстве случаев достаточно использовать темы и плагины.

Если вам нужно исправить какие-либо проблемы или выполнить расширенную настройку, вы можете отредактировать исходный код WordPress. Перед тем как это сделать, нужно учесть следующие моменты: — ваши цели, , — инструменты, и — ваше время, .

Существуют разные операции при редактировании исходного кода WordPress:

• Редактировать HTML в WordPress из редактора
• Редактировать PHP и CSS в WordPress с помощью редактора кода WordPress или FTP-клиента

Помните, безопасность превыше всего!

Ричард Бойетт

Ричард — разработчик программного обеспечения WordPress и эксперт по системам управления контентом.Когда Ричард не играет с кодом, он любит хорошее кино и крафтовое пиво.

Как редактировать исходный код WordPress (HTML, CSS, PHP, JavaScript)

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

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

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

Плагины для редактирования кода WordPress

Наша команда в WP Buffs помогает владельцам веб-сайтов, партнерам-агентствам и партнерам-фрилансерам решать проблемы, в том числе редактировать и поддерживать исходный код вашего сайта .Если вам нужно, чтобы мы управляли одним веб-сайтом или поддерживали 1000 клиентских сайтов, мы готовы помочь.

Почему важно знать, как редактировать исходный код WordPress 👈🏻

По умолчанию WordPress — это чрезвычайно интуитивно понятная и удобная платформа . Есть много способов настроить и изменить свой сайт, даже не касаясь строчки кода, благодаря темам и плагинам.

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

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

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

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

Как редактировать HTML в WordPress 💻

Перво-наперво: давайте обсудим, как получить доступ к вашему HTML-коду в WordPress .Обратите внимание, что внесение изменений в код вашего сайта всегда сопряжено с определенным риском. Редактирование HTML-кода относительно безопасно по сравнению с другими методами, которые мы обсудим в этом посте, но все же разумно действовать с осторожностью и сначала создать резервную копию.

Как редактировать HTML в классическом редакторе WordPress

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

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

Как редактировать HTML в редакторе блоков WordPress

Если вы используете редактор блоков (Gutenberg), для переключения с визуального редактора на текстовый редактор (или редактор кода) потребуется еще несколько шагов.Однако у вас также есть несколько вариантов редактирования HTML-кода, включая внесение изменений на всю страницу или публикацию или для отдельных блоков.

Чтобы отредактировать HTML-код всей страницы или публикации, щелкните три вертикальные точки, расположенные в правом верхнем углу редактора, затем выберите Редактор кода:

Откроется редактор HTML WordPress. Чтобы переключиться с визуального редактора на текстовый редактор в определенном блоке , щелкните три вертикальные точки на панели инструментов блока, затем выберите «Редактировать как HTML:

Другой способ добавить HTML на страницу или сообщение — использовать пользовательский блок HTML :

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

Когда вы закончите, сохраните изменения в своем сообщении или на странице.

Как редактировать HTML для вашей домашней страницы в WordPress

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

Вы также можете щелкнуть «Редактировать страницу» в верхней панели администратора. на вашей домашней странице, чтобы получить доступ к классическому редактору или редактору блоков:

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

Как редактировать HTML в виджете WordPress

Наконец, вы можете добавить HTML в боковую панель или нижний колонтитул WordPress . Многие темы WordPress также используют раздел виджетов для управления контентом на главной странице вашего сайта.

Вы можете настроить домашнюю страницу, верхний и нижний колонтитулы с помощью виджета Custom HTML :

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

Начало работы с редактированием исходного кода вашей темы WordPress 🏁

Ваша тема WordPress состоит из файлов шаблонов. Иногда мы также называем их вашим исходным кодом WordPress . Они включают необработанные файлы тем (PHP), а также каскадные таблицы стилей (CSS) и JavaScript (JS) вашего веб-сайта WordPress.

Если вы хотите отредактировать эти компоненты (или шаблон по умолчанию в WordPress), существует два основных способа доступа к файлам темы :

1. Использование редактора тем WordPress , который позволяет напрямую редактировать файлы исходного кода WordPress на панели инструментов с помощью любого веб-браузера.
2. Через протокол передачи файлов (FTP) , где вы редактируете файлы исходного кода WordPress локально, а затем загружаете свои изменения в среду хостинга WordPress.

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

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

Второй — создать дочернюю тему. При изменении темы WordPress лучше всего внести изменения в дочернюю тему . В противном случае при следующем обновлении темы ваши изменения будут перезаписаны.

После того, как вы выполнили эти шаги, готов приступить к работе. . Давайте сначала посмотрим, как редактировать тему WordPress прямо с панели инструментов.

Как редактировать исходный код WordPress через редактор тем Theme

Если вы не знакомы, WordPress поставляется со встроенным редактором , который позволяет вам изменять файлы вашей темы онлайн.В редакторе тем вы можете получить доступ к PHP, CSS, JavaScript и всем другим файлам, связанным с разработкой, которые составляют вашу тему. Вот как это сделать.

Доступ к редактору тем

Если ваш сайт WordPress все еще запущен и у вас есть доступ к серверной части, вы можете найти исходный код своего сайта в разделе Внешний вид> Редактор тем :

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

Если у вас установлено несколько тем или вы используете комбинацию тем для взрослых и детей, вы можете переключаться между темами в правом верхнем углу редактора:

Для выберите определенные файлы темы для редактирования , вы можете выбрать из списка справа от редактора:

Точные файлы, доступные здесь, будут зависеть от вашей темы, но, как минимум, вы должны увидеть:

• стиль.css : Это ваша таблица стилей, которая содержит множество функций, связанных с дизайном, например шрифты и цветовую схему вашей темы.
• functions.php : Файл functions.php вашей темы включает PHP-код, который изменяет стандартные функции WordPress.

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

WordPress не позволит вам сохранить изменения, если заметит ошибки в коде . Это часть того, что делает использование редактора тем немного безопаснее, чем редактирование кода WordPress через FTP, о чем мы поговорим позже.

Что делать, если ваш редактор тем отсутствует

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

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

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

Как редактировать файлы JavaScript в WordPress ✍🏻

Прежде чем вы сможете использовать JavaScript где-нибудь на своем сайте WordPress, вам понадобится файл, содержащий ваш код JavaScript.Большинство тем, если не все, поставляются с парой файлов JavaScript, которые могут быть размещены в другом месте и «вызываться» кодом в ваших header.php, footer.php или других файлах шаблонов.

Если вы пишете собственный JavaScript , у вас будет доступ к своей работе в WordPress, где вы можете увидеть список своих файлов. Вы можете открыть любой из них и внести нужные изменения прямо с помощью редактора тем . Все файлы JavaScript заканчиваются на.js расширение:

Если вы добавляете JavaScript с помощью стороннего плагина , то вы просто вызываете внешний файл, размещенный в другом месте. Чтобы использовать написанный JavaScript, вам нужно будет вызывать файл везде, где вы хотите его использовать.

Вы можете вызвать JavaScript, поместив следующий сценарий (который направляет вашу страницу в расположение соответствующего файла) в любом месте, где вы хотите, чтобы код загружался:

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

Как добавить JavaScript в верхний или нижний колонтитул WordPress

Если вы хотите внести изменений в верхний или нижний колонтитулы на вашем веб-сайте, в том числе с использованием JavaScript в нескольких местах, вы можете сделать это в заголовке.php и footer.php вашей темы.

Многие сторонние инструменты требуют добавления кода в заголовок вашего сайта . Короче говоря, это означает, что вы будете работать с файлом header.php (который должен быть указан справа от редактора тем), в частности с областью, заключенной между тегами:

Когда вы добавляете JavaScript в файл заголовка , обязательно поместите код где-нибудь между этими двумя тегами (после или под открывающим тегом и над или перед закрывающим тегом).

Тег может быть трудно найти. Если вам не удается его найти, нажмите клавиши Command (или Control ) + F после щелчка в редакторе. Затем вы можете найти его, просто набрав «голова» в строке поиска .

Вот пример того, как мы добавили код Диспетчера тегов Google и проверочный код Ahrefs прямо над тегом:

Вы можете редактировать нижний колонтитул таким же образом — просто выберите нижний колонтитул .php файл вместо header.php :

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

Опять же, вы можете использовать ярлык Command + F , чтобы найти тег, а затем проверить его прямо над ним, чтобы убедиться, что ваш код был успешно добавлен.Возможно, вам потребуется очистить кеш браузера, чтобы все отображалось правильно.

Как добавить скрипты верхнего и нижнего колонтитула с помощью подключаемого модуля

Добавление скриптов верхнего и нижнего колонтитула вручную — не единственный вариант. Существуют плагины , помогающие с этими задачами , и некоторые темы и фреймворки имеют встроенную такую ​​функциональность.

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

Этот метод выгоден, потому что WordPress обычно перезаписывает ваш файл header.php во время обновлений. Используя плагин (или некоторую внешнюю функциональность, имитирующую такие плагины), вы на гарантируете меньше работы для себя . Вы можете обновить WordPress Core, не беспокоясь о необходимости вручную повторно добавлять код.

Он предоставляет бесплатный способ легко добавить простой код в верхний или нижний колонтитул вашего сайта WordPress .Пытаетесь ли вы добавить скрипты Google Analytics, код AdSense или любой сторонний код интеграции, этот плагин может сделать это всего за несколько кликов .

После того, как вы установите и активируете плагин , вы можете получить доступ к редактору JavaScript, перейдя в Настройки > Вставить верхние и нижние колонтитулы :

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

Как добавить JavaScript в сообщения и страницы WordPress

Вместо того, чтобы включать его в файлы header.php или footer.php для использования на всем вашем веб-сайте, вы также можете добавить JavaScript в сообщения или страницы WordPress по отдельности . Для этого вам потребуется:

1. Добавьте свой JavaScript в один из файлов темы WordPress (или создайте новый)
2. Вызовите файл из своего сообщения или страницы

Итак, как вы вызываете свой файл JavaScript из сообщения? Один из способов — использовать функцию Custom Fields в качестве виджета WordPress JavaScript.В редакторе блоков щелкните три вертикальные точки, чтобы открыть раскрывающееся меню, затем выберите Options :

В нижней части меню Параметры в разделе Расширенные панели , установите флажок рядом с Настраиваемые поля :

Под вашим редактором сообщений теперь вы увидите пространство , где вы можете добавить настраиваемые поля :

Укажите Имя для вашего поля.Затем введите фрагмент кода JavaScript как Value . Когда вы закончите, нажмите Добавить настраиваемое поле с на , сохраните изменения .

Теперь вы можете использовать свой собственный JavaScript в любом месте на странице. Для этого вам нужно использовать тег шаблона, который настраивает используемую вами тему. Вы также можете использовать плагин, который управляет настраиваемыми полями от вашего имени.

Как редактировать CSS вашего сайта WordPress 🖋️

Процесс редактирования CSS вашего сайта WordPress очень похож на процесс изменения вашего JavaScript.Для этого можно использовать три метода:

1. Редактируйте файлы CSS в редакторе тем
2. Используйте встроенный редактор CSS вашей темы в настройщике WordPress
3. Добавьте CSS с помощью плагина

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

Как редактировать CSS в WordPress с помощью редактора тем

Все файлы CSS, используемые для темы вашего сайта WordPress, можно найти в редакторе тем ( Внешний вид> Редактор тем ).В списке справа найдите файлы с расширением .css :

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

Как редактировать CSS в WordPress с помощью настройщика WordPress

Помимо редактора тем WordPress, вы также можете изменить свой CSS с помощью настройщика WordPress .Чтобы получить к нему доступ, перейдите в Внешний вид> Настроить на панели инструментов WordPress:

Далее, нажмите Additional CSS внизу левой панели навигации:

Откроется редактор кода , где вы можете добавить собственный CSS:

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

Когда вы закончите добавлять собственный CSS в настройщик, нажмите кнопку Опубликовать , чтобы сохранить изменения.

Как редактировать CSS CSS с помощью плагина

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

Например, CSS Hero — это интуитивно понятный инструмент, который позволяет редактировать все аспекты дизайна вашего сайта и стиля без изменения файлов темы. :

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

Функции CSS Hero включают:

• Готовые, фрагменты редактируемых стилей
• Интеграция и поддержка шрифтов Google и TypeKit
• Внешний визуальный редактор для предварительного просмотра ваших изменений по мере их внесения

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

Как редактировать исходный код WordPress через FTP 📥

Как вы могли вспомнить ранее в этом посте, использование редактора тем WordPress — это всего лишь один из способов доступа и изменения исходного кода вашего веб-сайта. Другой вариант — использовать FTP-клиент , например FileZilla. Эти типы инструментов позволяют вам подключаться к серверу вашего веб-сайта для доступа к хранящимся на нем файлам.

Этот подход включает в себя внесение изменений в ваш файл локально , а затем повторную загрузку измененных файлов в среду хостинга WordPress. Это важно, если у вас нет доступа к серверной части вашего сайта или если вы выполняете какую-либо работу с PSD> WordPress.

Вот как начать работу с FTP в четыре этапа.

Шаг 1. Найдите или создайте учетные данные FTP

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

Если нет, вы можете создать свое имя пользователя и пароль в cPanel в разделе Файлы> Учетные записи FTP :

Щелкните этот значок, затем выберите Добавить учетную запись FTP :

На странице Добавить учетную запись FTP введите следующее:

1. Добавьте уникальный идентификатор для вашего имени пользователя FTP .Ваше имя пользователя FTP будет [email protected], поэтому скопируйте / вставьте его в безопасное место.
2. Создайте надежный пароль . Мы рекомендуем использовать генератор паролей для создания пароля с рейтингом надежности 100/100. Это будет ваш пароль FTP, поэтому скопируйте и вставьте его в безопасное место.
3. Для расширения Directory , всегда используйте public_html .
4. Ваша Квота всегда должна быть Без ограничений .

Нажмите Create FTP Account , и все готово! Если у вас проблемы с созданием информации для входа на FTP , вы можете воспользоваться Google «FTP [ваш хостинг-провайдер]».

Как правило, здесь есть по крайней мере несколько полезных статей и руководств. Например, SiteGround предоставляет огромную поддержку в этой области:

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

Шаг 2. Загрузите FTP-клиент, например FileZilla

Когда у вас есть учетные данные для входа на FTP в квадрат, следующим шагом будет загрузка FTP-клиента, такого как FileZilla:

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

Шаг 3. Войдите в среду своего веб-хостинга через FileZilla

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

Если ваша cPanel перечисляет IP-адрес , вы также можете использовать его в качестве хоста. После ввода этих учетных данных нажмите кнопку Quickconnect :

Он должен соединить вас с вашим сервером в течение нескольких секунд.

После входа в систему вы получаете доступ к исходным файлам WordPress и можете вносить изменения в HTML, CSS, PHP и JS по своему усмотрению. Просто щелкните любой файл правой кнопкой мыши и выберите Просмотр / редактирование :

Когда вы внесли изменения (опять же, будьте осторожны, чтобы не оставить белый экран на вашем веб-сайте), вы можете сохранить файл . Затем FileZilla автоматически повторно загрузит его и заменит старую версию.

Как отредактировать тему WordPress без программирования 🚫

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

Хотя вы не сможете изменить столько, сколько сможете, с помощью специального кода, вы все равно можете многое сделать с помощью настройщика WordPress Customizer .Опять же, это находится в Внешний вид> Настроить :

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

Однако, если вы хотите сделать больше, чем то, что предоставляет Customizer, вы также можете использовать дополнительных плагинов .Давайте взглянем на самые полезные из них.

Плагины для редактирования вашей темы WordPress без программирования

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

Если вам нужен редактор визуальных стилей, мощный бесплатный вариант — это плагин YellowPencil:

Этот плагин редактора стилей CSS для WordPress позволяет быстро и легко настроить дизайн вашего сайта.Вы можете вносить изменения в любую страницу или тему без программирования. Кроме того, вы можете предварительно просмотреть изменения в режиме реального времени . Доступны бесплатные и премиальные версии.

Этот плагин представляет собой живой редактор CSS для WordPress , в котором есть адаптивные сетки и функциональность редактирования «укажи и щелкни», что позволяет точно и легко настраивать элементы. Это надежный вариант , если вы используете построитель страниц , такой как Elementor или Beaver Builder, поскольку он имеет встроенную интеграцию.

Наконец, если вы хотите изменить больше, чем стиль и внешний вид вашего сайта, вы можете использовать Ultimate Tweaker:

Этот плагин премиум-класса включает инструмент минификатора HTML , интерфейс перетаскивания, настраиваемые значки и многое другое. Чтобы получить лучшее представление о функциях и функциях, мы рекомендуем изучить демонстрацию плагина.

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

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

Однако, если мысль о редактировании исходного кода WordPress пугает или редактор тем недостаточно мощный для ваших нужд, мы здесь, чтобы помочь .В WP Buffs мы предлагаем планы обслуживания и круглосуточную поддержку, чтобы помочь вам со всеми вашими потребностями в обслуживании и настройке!

Хотите оставить отзыв или присоединиться к беседе? Добавляйте свои комментарии 🐦 в Twitter.

| Как редактировать коды WP, не нарушая работу вашего сайта

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

В этой статье мы дадим вам пошаговую инструкцию по добавлению / редактированию ваших кодов WordPress.

Содержание

1. Редактирование кодов в WordPress
2. Редактирование исходного кода в вашей теме WordPress
3. Заключение

Редактирование кодов в WordPress

HTML, CSS, PHP и JavaScript — четыре языка программирования, используемые WordPress , каждый со своей функцией.

HTML определяет структуру содержимого вашего сайта, а CSS определяет внешний вид вашего сайта. С другой стороны, JavaScript изменяет HTML и CSS для обеспечения динамической функциональности.

Теперь давайте посмотрим, как добавлять и редактировать эти коды в WordPress.

Как редактировать HTML-код в WordPress (редактор WP Classic)

Редактировать HTML-код записи или страницы WordPress довольно просто. Вам не нужно выходить за пределы панели инструментов, чтобы сделать это.Просто нажмите вкладку « текст » в редакторе публикации / страницы.

Текстовый редактор позволяет добавлять, редактировать и удалять HTML-код. Чтобы просмотреть изменения, перейдите на вкладку « visual ». Не забудьте сохранить изменения.

Как добавить или отредактировать HTML-код в редакторе Гутенберга

С редактором Гутенберга (блочный) у вас еще больше гибкости. Вы можете вносить изменения либо во всю свою страницу / сообщение, либо в отдельный блок.

Чтобы внести изменения в HTML-код всего сообщения или страницы, просто нажмите на три точки, расположенные в верхней правой части экрана.Щелкните « Code Editor ».

Теперь вы можете редактировать HTML-код сообщения. Чтобы выйти из редактора, нажмите « редактор кода выхода » в верхней части редактора.

Как вы, наверное, знаете, редактор Гутенберга состоит из отдельных блоков, которые можно редактировать независимо. Чтобы отредактировать HTML-код отдельного блока, просто перейдите к блоку. Затем нажмите три точки над блоком и выберите « Изменить как HTML ».

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

Вы можете нажать « Preview », чтобы увидеть, как это выглядит во внешнем интерфейсе.

Не забудьте сохранить изменения.

Как добавить или отредактировать HTML-код в виджете WordPress

Бывают дни, когда вам может понадобиться добавить HTML-код на боковую панель или нижний колонтитул вашего сайта. Для этого перейдите в Внешний вид >> Виджеты.

Найдите виджет « Custom HTML » и щелкните раскрывающийся список, чтобы выбрать, где вы хотите создать виджет. Затем нажмите « Добавить виджет ».

Введите свой HTML-код и нажмите «Сохранить» .

И все!

Редактирование исходного кода в вашей теме WordPress

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

Перед редактированием исходного кода вашей темы обратите внимание на несколько моментов.

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

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

Чтобы узнать, как создать дочернюю тему для себя, ознакомьтесь с нашим полным руководством по дочерним темам WordPress.

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

Существует 3 основных способа редактирования исходного кода вашей темы: редактор темы, плагин и FTP.

Как редактировать CSS сайта WordPress

Как было сказано ранее, CSS вашего сайта отвечает за его внешний вид. Если вам нужно изменить семейство шрифтов, размер, цветовую схему и т. Д., Отредактируйте CSS.

Вы можете редактировать CSS:

1. Через редактор тем
2. Использование настройщика WordPress
3. С плагином

Любой из них будет работать нормально.

Как редактировать CSS в WordPress через редактор тем

Если вы не знаете, WordPress поставляется со встроенным редактором тем . Вы можете вносить изменения в свои файлы шаблонов прямо отсюда.

Чтобы получить доступ к редактору тем, перейдите в Внешний вид >> Редактор тем.

На вашем экране откроется редактор кода и боковая панель справа. Выберите любой из файлов темы на боковой панели и внесите в файл изменения.

Файлы, которые вы видите, различаются от темы к теме. Однако все темы WordPress содержат эти 2 файла:

• style.css : здесь вы можете изменить шрифты, цветовую схему и общий внешний вид вашей темы.
• functions.php : этот файл содержит код PHP, который изменяет функции вашего сайта по умолчанию.

Файлы с расширением .css являются файлами CSS. Внесите желаемые изменения и нажмите «Обновить файл» для сохранения.

Как отредактировать свой CSS-код WordPress с помощью плагина

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

Например, Custom CSS и JS — это плагин, который позволяет настраивать внешний вид вашего сайта, не изменяя файлы темы . Плагин поставляется с простым в использовании текстовым редактором с подсветкой синтаксиса.

Вы можете добавить столько кодов, сколько хотите, и вы не потеряете их при изменении темы.

Чтобы использовать плагин, просто скачайте, установите и активируйте его.

Другие плагины WordPress, используемые для редактирования CSS, включают CSS hero, плагин Genesis Extender, WordPress Custom CSS и т. Д.

Редактирование CSS-кода WordPress с помощью настройщика WordPress

Вместо редактора тем WordPress вы можете использовать встроенный настройщик WordPress.

Чтобы посетить настройщик WordPress, перейдите в «Внешний вид >> Настроить » на панели инструментов:

Затем нажмите Additional CSS .

Откроется редактор кода. Добавьте свой собственный CSS и нажмите кнопку Опубликовать .

Как добавить JavaScript на свой сайт WordPress

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

Вам также может потребоваться добавить Javascript на ваш сайт WordPress, когда вам нужно:

• Расширение функциональности плагина.
• Подключите к своему веб-сайту внешний элемент, например Google Analytics.
• Скрыть или отобразить элементы HTML.
• Выполнять сложные операции с переменными CSS.

Теперь добавить или редактировать Javascript не так просто, как редактировать HTML или CSS. Вы должны быть осторожны с тем, как вы пишете код и куда вы его добавляете.

В первую очередь, есть два места, где вы можете добавить Javascript:

1. Верхний или нижний колонтитул вашей темы: JavaScript, добавленный в этих местах, работает на уровне всего сайта
2. На странице или в сообщении

Как добавить скрипты верхнего и нижнего колонтитула с помощью подключаемого модуля

Самый простой способ добавить скрипты верхнего и нижнего колонтитула в WordPress — использовать плагин.Этот метод более ценен, если вы хотите добавить независимые от темы сценарии, которые остаются даже при изменении темы.

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

Примером этого плагина является плагин Insert Headers and Footers :

Он позволяет легко добавлять код вставки в верхний и нижний колонтитулы вашего WP-сайта.Этот плагин пригодится, когда вам нужно добавить скрипты Google Analytics или пиксельный код Facebook.

Чтобы использовать плагин, установите и активируйте его. Затем войдите в редактор JavaScript, открыв «Настройки »> «Вставить верхние и нижние колонтитулы» :

Страница содержит 3 текстовых поля, в которые вы можете добавлять сценарии в верхний, основной и нижний колонтитулы вашего сайта.

После добавления вашего скрипта в нужный раздел нажмите кнопку save внизу страницы.

Боковое примечание: некоторые темы (например, Genesis Framework) имеют такую ​​функциональность (они позволяют вставлять коды в любое место на вашем сайте), поэтому вам не понадобится плагин.

Как добавить JavaScript в сообщения и страницы WordPress

Помимо добавления кодов JS в верхний и нижний колонтитулы вашего сайта (что работает на всем сайте), вы можете добавлять их по отдельности в сообщения и страницы.

Первое, что нужно сделать, это установить плагин Code Embed. Затем активируйте его.

Далее вам нужно будет включить настраиваемые поля для вашего сообщения или страницы.

Если вы используете классический редактор, откройте страницу или сообщение, где вам нужно добавить JS-код в свой редактор WP. Затем нажмите « Screen Options » в правом верхнем углу панели инструментов и отметьте опцию « Custom Fields ».

Если вы используете редактор Гутенберга, вот как получить доступ к функции настраиваемых полей WP:

Щелкните 3 вертикальные точки в правом верхнем углу экрана и выберите Параметры :

Затем установите флажок «Настраиваемые поля» в разделе Advanced Panels .

Теперь опция «Настраиваемые поля» полностью работает на вашем сайте.

Вот что делать дальше. Прокрутите сообщение вниз (в классическом редакторе или редакторе Гутенберга), вы увидите раздел, в котором можно добавить настраиваемые поля.

Щелкните Введите новый и введите имя нового настраиваемого поля в поле « Name » (пусть имя начинается со слова CODE, например CODEjsforpage). Затем в поле « Value » введите фрагмент кода JS.Наконец, сохраните изменения , нажав кнопку « Добавить настраиваемое поле ».

На этом этапе вы можете вставить свой JS-код в любом месте сообщения или страницы. Просто добавьте код встраивания: {{CODEjsforpage}} туда, где вы хотите, чтобы код был.

Редактирование PHP в WordPress

Есть 2 основных способа редактирования PHP в WordPress — редактор кода WP и клиент FTP.

1. Редактор кода WordPress

Это самый простой метод редактирования PHP, поскольку вы можете войти в свою панель управления WordPress.

Для начала создайте дочернюю тему и активируйте ее. Затем перейдите к Внешний вид >> Редактор тем .

Выберите дочернюю тему, которую хотите отредактировать. Щелкните, чтобы открыть файл, который нужно отредактировать (файлы PHP имеют расширение .php). Например, если вам нужно отредактировать нижний колонтитул своего сайта, щелкните файл footer.php в правой части экрана. Теперь отредактируйте файл в редакторе WordPress.

Не забудьте нажать кнопку Обновить файл .Это сохранит ваши изменения.

2. Редактирование кода PHP через FTP

Использование FTP-клиента — еще один метод редактирования ваших файлов php. Это наиболее полезно, когда у вас нет доступа к панели управления WordPress, возможно, из-за ошибки WordPress или атаки вредоносного ПО.

Если у вас есть доступ к редактору кода WordPress, используйте его во что бы то ни стало. Это быстрее.

Тем не менее, первое, что вам нужно сделать здесь, это загрузить FTP-клиент (предпочтительно FileZilla). Затем откройте его и нажмите « файл >> менеджер сайта» .

Затем введите данные для входа в систему с учетными данными FTP (ваш домен, имя пользователя и пароль). Эти данные обычно совпадают с данными для входа в cPanel. Если вы этого не знаете, обратитесь в свою хостинговую компанию WordPress.

Теперь нажмите «Подключиться».

После подключения у вас будет доступ к вашим основным файлам WordPress. Чтобы отредактировать определенный файл, скажем, wpconfig.php, щелкните файл правой кнопкой мыши и выберите View / Edit из списка параметров.После редактирования кода сохраните изменения и загрузите отредактированный файл обратно на сервер, когда Filezilla предложит это сделать.

Заключение

WordPress нравится многим за его гибкость и надежные возможности настройки. Если вам не нравится какая-то функция, не нужно ее придерживаться. Вы можете изменить его с помощью плагина или напрямую отредактировав код WordPress.

Надеюсь, теперь вы можете редактировать HTML, CSS, JavaScript и PHP в WordPress.Не стесняйтесь исследовать все красоты, которые может предложить WordPress. Однако не забывайте действовать осторожно, особенно при добавлении или редактировании исходных кодов.

Чтобы помочь вам стать профессионалом WordPress, у нас есть видеоуроки, а также учебный блог по WordPress. Пожалуйста, ознакомьтесь с ними, чтобы изучить WordPress. И, если вам все еще нужна помощь с вашим сайтом WordPress, обратитесь к нашим разработчикам WordPress и специалистам по поддержке, чтобы начать работу.

Вектор баннера создан GraphiqaStock — www.freepik.com

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

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

Зачем редактировать HTML-код в WordPress?

Несмотря на то, что WordPress — это готовая к использованию CMS, которая не требует опыта программирования и предлагает тысячи тем и плагинов для настройки вашего сайта, обучение редактированию HTML даст вам большую гибкость.

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

Вот некоторые из основных вещей, которые вы можете сделать, настроив HTML-код:

• Включить текст, изображения и видео
• Добавить функции или особенности
• Больше контроля над своим сайтом на WordPress
• Устранение неполадок, связанных с отсутствием доступа к панели администратора WordPress.

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

Когда не следует редактировать HTML?

Как вы, наверное, знаете, WordPress использует четыре основных языка: HTML, CSS, PHP и JavaScript. Это означает, что для внесения некоторых изменений вам нужно знать больше, чем просто HTML. Вот почему в некоторых случаях настройка HTML-кода не является хорошей идеей.

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

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

Как редактировать HTML в WordPress

В этом руководстве мы покажем вам различные способы настройки HTML-кода в WordPress:

1. Классический редактор WordPress
2. Редактор блоков WordPress
3. Отредактируйте исходный код HTML
4. С плагинами
5. Виджеты

Давайте посмотрим на каждый из них, чтобы вы могли выбрать наиболее подходящий для вас.

Перед тем, как начать…

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

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

1) Классический редактор WordPress

Classic Editor — популярный редактор контента для WordPress. Этот плагин позволяет легко редактировать HTML-файлы на вашем сайте.

Сначала установите и активируйте плагин Classic Editor на своем сайте. Затем откройте любой пост или страницу, и вы увидите два режима: визуальный и текстовый.

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

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

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

После добавления или настройки HTML-кода просто обновите или опубликуйте сообщение, и все!

2) Редактор блоков WordPress

Последняя версия WordPress поставляется с новым редактором под названием Gutenberg. Это расширенный редактор контента с большим количеством функций. Если вы используете Gutenberg, вы также можете редактировать HTML-код, как мы это делали раньше.

Чтобы добавить настраиваемый раздел HTML в свои сообщения или страницы, используйте блок HTML и добавьте к нему HTML-код. Затем обновите сообщение, и все готово.

Иногда вам нужно отредактировать существующие абзацы или изображения и добавить дополнительный стиль. Чтобы отредактировать существующий HTML-код в WordPress с помощью Gutenberg, выберите элемент, который вы хотите настроить, и нажмите Дополнительные параметры .

После этого выберите опцию Edit As HTML .

Вы увидите HTML-режим элемента и сможете его настроить.

Когда вы будете довольны изменениями, вы можете легко переключиться обратно в визуальный редактор, нажав Редактировать визуально .

Как видите, добавить или отредактировать существующий HTML-код с помощью Gutenberg можно быстро и легко. Перед публикацией всегда проверяйте предварительный просмотр, чтобы убедиться, что все выглядит хорошо.

3) Отредактируйте исходный код HTML в WordPress

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

1. Редактор файлов приборной панели
2. FTP

3.1) Редактор файлов приборной панели

Это самый простой способ редактирования исходного кода без посещения других веб-сайтов и использования каких-либо дополнительных инструментов.

На панели управления WordPress перейдите в Внешний вид> Редактор тем .

Справа вы увидите все файлы темы.

В правом верхнем углу у вас также есть возможность изменить каталог вашей темы.

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

Вот некоторые из наиболее распространенных файлов, которые вы можете захотеть отредактировать:

• index.php
Заголовок
• .php
• footer.php
• functions.php
• style.css

Допустим, вы хотите отредактировать заголовок своей темы, поэтому выберите из списка файл header.php .

Обычно файлы .php содержат PHP, но также и другие языки, такие как HTML, JavaScript (иногда) и CSS (в некоторых случаях). Таким образом, вы можете редактировать файлы HTML оттуда. Как упоминалось выше, одна запятая или апостроф может сломать ваш сайт, поэтому будьте осторожны.

3,2) FTP

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

Сначала загрузите FileZilla и создайте учетную запись. Большинство хостинговых компаний WordPress предоставят вам бесплатный доступ к FTP-аккаунту через cPanel. После того, как вы сгенерировали свое имя хоста, имя пользователя и пароль, подключитесь к своему серверу.

Если вы хотите отредактировать файлы темы, перейдите в папку wp-content > themes .

Как вы можете видеть на скриншоте выше, у нас есть четыре темы на нашем сайте: GeneratePress, Twenty Nineteen, Twenty Twenty и Twenty Twenty One.

Допустим, мы хотим отредактировать файлы GeneratePress, поэтому мы открываем папку темы.

Чтобы отредактировать файл, щелкните его правой кнопкой мыши и выберите опцию View / Edit . Например, чтобы отредактировать нижний колонтитул, вам нужно отредактировать файл footer.php .

FileZilla откроет файл в текстовом редакторе, как показано ниже.

После этого вы можете внести изменения, сохранить файл и загрузить его обратно на сервер.

3.3) cPanel

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

Для этого войдите в свою учетную запись веб-хостинга и войдите в cPanel. Затем откройте файловый менеджер .

После этого перейдите в wp-content > themes .

Откройте тему, которую хотите настроить, затем щелкните правой кнопкой мыши файл, который хотите изменить, и нажмите Изменить .

Это откроет файл в текстовом редакторе, где вы сможете его настроить. После внесения изменений не забудьте сохранить файл.

4) Плагины

Другой способ редактировать HTML-код в WordPress — использовать плагины. WP File Manager — отличный бесплатный инструмент, который добавляет функцию FTP на вашу панель управления. Посмотрим, как это использовать.

Сначала войдите на свой сайт WordPress и перейдите в Плагины > Добавить новый . Найдите File Manager, установите его и активируйте.

После этого выберите опцию WP File Manager на боковой панели.

Теперь откройте каталог wp-content .

Затем откройте папку themes и выберите папку, которую вы хотите изменить. В нашем случае мы будем редактировать файлы темы Astra.

После открытия папки вы увидите все доступные файлы.Как только вы найдете тот, который хотите отредактировать, щелкните его правой кнопкой мыши и выберите опцию Code Editor .

Как и большинство программ FTP, этот плагин не требует, чтобы на вашем ноутбуке было установлено программное обеспечение текстового редактора. Если это ваш случай, плагин откроет файл в текстовом веб-редакторе, откуда вы сможете редактировать код.

Как только вы закончите редактировать файл, сохраните его, и все.

5) Виджеты

Теперь давайте посмотрим, как добавить HTML-код в область виджетов.

Сначала перейдите в Внешний вид> Виджеты .

Здесь вы увидите все области виджетов.

Теперь добавьте виджет HTML в любую область виджетов. В этом руководстве мы выберем боковую панель.

Вы можете добавить заголовок к коду и включить туда свой собственный HTML-код.

После добавления кода сохраните виджет, и все готово.

Бонус: редактирование CSS и PHP в WordPress

WordPress использует четыре основных языка:

Итак, вы узнали, как редактировать HTML-код в WordPress.В этом разделе мы покажем вам, как вы можете настроить код CSS и PHP вашего сайта и добавить собственные сценарии.

Редактирование и добавление кода CSS

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

После того, как вы войдете в настройщик, перейдите к Additional CSS .

Здесь вы можете просто ввести свой CSS-код.

Самое приятное то, что вы можете видеть все изменения в режиме предварительного просмотра.

Как только вы будете довольны изменениями, обновите / опубликуйте сообщение или страницу.

Это один из самых простых способов добавить код CSS на ваш сайт. Имейте в виду, что этот код будет размещен поверх файла style.css нашей темы.

ПРИМЕЧАНИЕ. Некоторые темы WordPress, такие как Divi или Avada, имеют встроенную функцию для добавления кода CSS, поэтому вы можете использовать панель тем для включения своего кода CSS вместо использования средства настройки.

Редактирование / добавление кода PHP

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

Сначала установите и активируйте фрагменты кода на своем сайте.

После этого перейдите в настройки плагинов и нажмите Добавить новый , чтобы добавить новый фрагмент на свой сайт.

Дайте фрагменту имя, чтобы запомнить, что вы добавляете, вставьте код PHP и сохраните фрагмент.

Для этого урока мы взяли простой фрагмент, чтобы добавить пользовательские размеры изображений на наш сайт. После этого нажмите «Сохранить», и все готово!

Таким образом, вы можете добавить неограниченный код PHP на свой сайт WordPress и настроить его столько, сколько захотите.

Заключение

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

В этом руководстве мы рассмотрели разные способы сделать это:

1. С классическим редактором WordPress
2. Использование редактора блоков
3. Отредактируйте исходный код HTML
4. Использование плагинов
5. Добавить HTML к виджетам

Самый простой способ настроить HTML-код — использовать редактор тем WordPress. Если вы ищете более продвинутое решение, вы можете изменить исходный код HTML с помощью FTP-клиента, такого как FileZilla.Если вы не хотите устанавливать какое-либо программное обеспечение на свой компьютер, вы можете использовать метод cPanel.

С другой стороны, если вы предпочитаете плагины, вы можете использовать WP File Manager для включения или редактирования HTML-кода, не полагаясь на какое-либо другое программное обеспечение FTP или текстовые редакторы.

Наконец, вы также можете включать и редактировать CSS или PHP, используя как WordPress Customizer, так и плагин Code Snippets.

Мы надеемся, что эта статья была полезной и помогла вам настроить ваш сайт. Знаете ли вы какие-либо другие способы редактирования файлов HTML в WordPress? Какой вы используете? Дайте нам знать в комментариях ниже!

Как редактировать файлы исходного кода WordPress

Последнее обновление — 8 июля 2021 г.

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

На чем работает WordPress?

WordPress — это бесплатная система управления контентом с открытым исходным кодом, основанная на PHP и MySQL.В основном используется для ведения блогов, его можно использовать для запуска практически любого типа веб-сайтов. Даже компании с многомиллиардными доходами, такие как Sony Music, используют WordPress для поддержки своих сайтов.

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

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

Создание резервной копии:

Изменения, вносимые в файлы исходного кода WordPress, могут сломать ваш сайт, если вы сделаете ошибку. Следовательно, всегда делайте резервную копию, прежде чем редактировать какие-либо файлы. Если вы допустили ошибку, вы можете просто заменить файлы своей резервной копией.Вы можете использовать один из многих плагинов резервного копирования, например UpdraftPlus, или просто скопировать файлы с вашего FTP-клиента.

Как редактировать файлы исходного кода WordPress?

Вот видео, которое поможет вам шаг за шагом разобраться в этом процессе.

Редактирование HTML:

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

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

Редактирование PHP и CSS:

Вы можете получить доступ к файлам исходного кода PHP и CSS WordPress через редактор внешнего вида или с помощью FTP-клиента. Внутри панели управления WordPress вы можете получить доступ к редактору в разделе Внешний вид.

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

Протокол передачи файлов (FileZilla):

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

Используя FTP-клиент FileZilla, сначала подключитесь к вашему серверу WordPress: вам необходимо указать адрес сайта, имя пользователя и пароль для входа в систему. Порт по умолчанию для FTP-серверов — 21. Затем нажмите Quickconnect.

И вы в деле. В этом окне вы можете перемещаться по файлам на вашем сервере.

Когда вы найдете файл, который нужно отредактировать, щелкните правой кнопкой мыши и выберите «Просмотр / редактирование». Это загрузит этот файл локально на ваш компьютер. FileZilla позволяет вам выбрать собственную программу для открытия файла. Таким образом, вы можете настроить FileZilla для открытия файлов WordPress с помощью редактора или IDE.

После внесения всех необходимых изменений при закрытии файла FileZilla автоматически загружает файл обратно на сервер. Если вы загрузили файл вместо того, чтобы выбрать «Просмотреть / изменить», вам придется загрузить файл вручную, чтобы изменения вступили в силу.

Итак, это два способа доступа и редактирования файлов исходного кода WordPress. Это дает вам полный контроль над своим сайтом. Благодаря этому и тысячам доступных плагинов и тем вы можете заставить свой сайт WordPress делать то, что вы хотите.