как редактировать код в вордпресс
Где редактировать код вашего шаблона WordPress
На этой страницы вы найдете небольшую инструкцию редактировать код вашего шаблона WordPress.
Вступление
CMS WordPress всегда имела внутренний инструмент для редактирования кода установленных тем. Ранее инструмент редактора был простым. С версии WP 4.9 в редактор добавили подсветку и инструмент предупреждения ошибок редактирования (песочницу). При этом авторы добавили возможность отмены подсветки. Где редактировать код вашего шаблона WordPress в этой небольшой инструкции.
Предупреждения
Во-первых, никогда не редактируйте код рабочего шаблона без резервной копии сайта или, как минимум копии шаблона. Эта мера безопасности позволит избежать потери сайта при неправильном редактировании. Делайте это, несмотря на имеющийся инструмент контроля за правкой кода (песочницу).
Во-вторых, помните, что прямая ручная правка кода шаблона, пропадёт после первого же обновления шаблона. Чтобы избежать отката редакции кода шаблона, используйте инструмент дочерней темы WordPress.
Где редактировать код вашего шаблона WordPress
Авторизуйтесь в административной панели сайта. Для редакции кода ваша роль пользователя должна быть не менее администратор.
Обратите внимание, что панель WordPress позволяет редактировать код не только рабочего (активного) шаблона, но любой темы установленной на сайт.
Если подсветка кода мешает, вам нужно отключить подсветку кода на вкладке Пользователи>>>Ваш профиль, поле «Отключить подсветку».
Остаётся проверить, на сайте, применение ваших изменений.
Вывод
Найти, где редактировать код вашего шаблона WordPress совсем не сложно. Важно точно знать, зачем это нужно, а также иметь под рукой, совсем не лишнюю резервную копию всего сайта. Хотя без ошибок не приходят знания, и если хотите разбираться в WordPress, править код нужно уметь.
Как редактировать шаблон WordPress?
Шаблон WordPress — это дизайн для соответствующей системы управления с особым оформлением для настройки сайтов. Это полностью готовых HTML код, со сверстанными страницами. Решение может активно использоваться для создания и настройки сайтов самых разных тематик.
Чем открыть шаблон WordPress?
Хочу сразу отметить, что если вы ничего не понимаете в кодах, CSS и HTML, то лучше не пытаться ничего делать. Ваши пробы редактирования шаблона могут привести к полной не функциональности сайта. Совсем другое, если какой-то урок четко прописывает действия и этапы выполнения, где написано откуда скопировать и куда вставить. Однако, подстрахуйтесь и сделайте бэкап данных (резервная копия), чтоб в любой момент восстановить сайт в изначальном виде.
Как менять шаблоны WordPress?
WordPress редактирование шаблона осуществляется несколькими способами. Каждый из них отличается своими особенностями и подходит для выполнения тех или иных изменений. Определитесь, что вы планируете редактировать в шаблоне и подберите удобный для вас способ реализации данной задумки. Предлагаю рассмотреть их все.
Редактирование шаблона WordPress
Такой способ удобен, если необходимо внести небольшие изменения. Редактировать через админку — быстро, несложно и не придется запускать специальные программы с вводом паролей. Из недостатков только — у редактора нет нумерации строк и подсветки кода, потому сложные и многочисленные редактирования будет делать неудобно.
Редактирование файлов используя файловый менеджер хостинга
Имея хороший хостинг с отличным файловым менеджером и дружелюбным интерфейсом, можно редактировать шаблон в нем. Этот способ также не требует запускания дополнительных программ, настройки подключений и копирования информации на ПК. А самое главное, подсвечивается код.
Файлы WordPress шаблона, которые редактируются, размещены в папке: /wp-content/themes/название_вашего_шаблона/. Открываете ее и ищете необходимый для редактирования файл.
Редактирование темы на ftp
Планируете серьезно изменить свой шаблон, тогда используйте этот способ. Редактирование темы по ftp следует использовать для работы сразу с несколькими файлами, расположенными в различных папках:
Чем редактировать шаблон WordPress?
Будет лучше, если тестовый вариант сайта был установлен локально. Это позволит без риска внести изменения и уже полностью отредактированным переносить на хостинг. Для редактирования файлов предлагаю использовать бесплатный Notepad++ редактор, имеющий подсветку синтаксиса. С ним вы сможете легко копаться одновременно во всех файлах темы.
В меню указываете папку, которую нужно найти или функцию, или слово или тег, и Notepad++ безошибочно покажет файлы, в которых есть подобные вхождения. А далее выбираете нужный вам файл и вносите в них изменения. Благодаря имеющейся подсветке, работа по редактированию будет проще и удобнее.
Выводы
Как уже упоминалось в начале поста, если вы не уверены в своих силах и сомневаетесь в успехе дальнейшего редактирования, то лучше за это не браться. Но, понимая что и как делать, можно смело приступать к работе.
Определитесь какой сложности будет проводиться модернизация темы и определите самый удобный способ редактирования. Но, на всякий случай, сделайте резервную копию, чтоб не потерять рабочий шаблон совсем. При неудачном завершении редактирования, вы сможете восстановить все данные и запустить тему в работу в изначальном виде.
Редакторы
Редактор — это место, где добавляется содержимое для сайта или блога. В одном редакторе можно обрабатывать как записи, так и страницы. На этой странице описаны различные редакторы, которыми вы можете воспользоваться.
Редактор WordPress
Редактор WordPress, который также называют редактор блоков, был выпущен в конце 2018 года. Он предоставляет самые мощные и гибкие возможности редактирования WordPress. Им пользуются миллионы владельцев веб-сайтов по всему миру.
Каждый элемент сайта, например изображения, тексты, видеоролики и заголовки, добавляется посредством блока. Блоки — это отдельные структурные элементы, которые позволяют изолировать области содержимого для редактирования.
Редактирование HTML в редакторе WordPress
Существует два варианта редактирования HTML в редакторе WordPress.
На панели инструментов для каждого блока есть кнопка с многоточием. В ее меню есть опция Редактировать как HTML, которая позволяет отредактировать HTML только для этого конкретного блока.
Чтобы отредактировать HTML для всей страницы или записи, нажмите кнопку с многоточием рядом с кнопкой «Опубликовать» и перейдите в Редактор кода.
Не весь код будет работать в режиме «Редактировать как HTML». Если код правильно сформирован и не содержит ошибок, убедитесь, что он включен в список разрешенных тегов HTML и не является кодом для ограниченного использования как, например, JavaScript.
Переход на редактор WordPress
Если запись или публикация были в классическом редакторе до появления редактора WordPress, все существующее содержимое будет размещено в классическом блоке, где доступны многие функции классического редактора.
Нажмите кнопку с многоточием в правом верхнем углу классического блока, чтобы преобразовать содержимое в блоки.
Классический редактор
Классический редактор использовался по умолчанию для сайтов и блогов WordPress.com до выхода редактора WordPress (см. выше).
В редакторе WordPress есть классический блок, который повторяет функционал классического редактора WordPress. Он выглядит следующим образом:
В классическом блоке применяются те же инструменты редактирования, что и в классическом редакторе.
Классический редактор также доступен в WP Admin — классической консоли WordPress. В онлайн-руководствах по работе с WordPress часто фигурируют изображения этой консоли. Хотя практически все операции доступны в главной консоли WordPress.com, по желанию можно использовать WP Admin.
Доступ к консоли WP Admin осуществляется двумя способами:
Чтобы отредактировать страницу или запись в классическом редакторе, щелкните мышью её заголовок:
Страницы в WP Admin
В классическом редакторе есть два режима редактирования: визуальный редактор и редактор HTML.
Визуальный редактор
Визуальный редактор, работающий на базе TinyMCE, очень похож на текстовый процессор. Значки в визуальном редакторе дают возможность форматировать текст, изменять шрифты и выравнивание, вставлять маркированные и нумерованные списки, а также выполнять другие действия.
Скучаете по этому инструменту редактирования? В редакторе WordPress есть классический блок, где доступны те же функции, что и в визуальном редакторе.
Редактор HTML
Редактор HTML позволяет создавать страницы и записи в формате HTML или редактировать существующий код HTML. Для доступа к нему откройте вкладку «Текст» рядом со вкладкой «Визуальный».
Используйте редактор HTML, чтобы добавлять шорткод и стили для шрифтов или вставлять коды из внешних источников.
Добавляемый код HTML должен иметь правильный синтаксис включать только разрешённые теги HTML. С помощью кнопок в верхней части окна текстового редактора удобно вставлять распространённые теги HTML. Обратите внимание, что в WordPress.com действуют определённые ограничения на использование кода. Например, JavaScript, встроенные элементы и пользовательские формы запрещено использовать по соображениям безопасности.
Сторонние редакторы
На сайтах, тарифный план которых обновлён до версий Business или eCommerce, можно устанавливать плагины, в том числе сторонние редакторы (например, Elementor и WP Bakery). В некоторых случаях сторонние темы уже содержат собственный редактор.
Помните, что при использовании стороннего редактора лучше всего обращаться за поддержкой по связанным с ним вопросам к его разработчикам. Ссылки для прямой связи с ними часто указываются на странице настройки инструмента в консоли WP-Admin.
Узнайте, как находить и редактировать файлы WordPress
Работать с WordPress может быть легко. По сравнению со многими другими системами управления контентом это действительно просто. Даже если вы не имеете ничего общего с кодом или дизайном, вы все равно можете создать свой блог WordPress, и вы можете начать писать и публиковать контент за считанные минуты. Если вам нужно расширить свой блог WordPress, вы можете сделать это, установив некоторые из миллионов плагинов и тем, доступных в Интернете.
Но если вы станете более серьезно относиться к своему сайту, рано или поздно вам придется кое-что настроить. Независимо от того, насколько хороша тема или плагин, сколько вариантов у вас есть, просто невозможно сделать все доступным для редактирования. Например, вы сможете изменить заголовок и некоторые важные кнопки, но как сделать это, если конкретный элемент нельзя изменить с помощью Настройщика и параметров темы / плагина? Вы сами его модифицируете.
В зависимости от того, что вы знаете о WordPress, изменение файлов может занять две минуты или может привести к сбою всего сайта после нескольких часов настройки. Прежде чем приступить к изменению файлов, убедитесь, что вы осведомлены о том, что делаете, и что у вас всегда есть резервная копия, надежно размещенная в папке за пределами вашего сервера.
Если вы решили, что пора вносить изменения, вы можете застрять на первом шаге – найти правильный файл, в котором находится код. Поскольку WordPress состоит из десятков разных файлов, у новичка могут возникнуть проблемы с их поиском. У разработчиков WordPress нет проблем с этим, потому что они уже знают иерархию шаблонов наизусть. Но если вы не очень заинтересованы в программировании, вам следует знать об этих плагинах, которые могут вам очень помочь.
Что за файл
ЦЕНА: Бесплатно
Как только вы поймете, что аббревиатура этого плагина – WTF, вы поймете, насколько он классный на самом деле. После того, как вы установите и активируете его, What the File создаст простой пункт меню прямо на вашей панели инструментов, рядом с вашим именем пользователя и вашей классной фотографией. Если вы сейчас откроете любую страницу своего сайта, вы сможете навести курсор на пункт меню What the File, и плагин сообщит вам, какие части шаблона были использованы для создания этой конкретной страницы.
Плагин позволит вам щелкнуть имя шаблона, после чего вы перейдете на страницу редактирования. Хотя это может быть полезно для внесения небольших изменений, будьте очень осторожны при редактировании файлов шаблонов непосредственно из WordPress.
Как вы уже видите, плагин довольно прост, но он может помочь вам определить части шаблона, которые вы хотите быстро изменить. Остальное зависит от тебя. Вот почему мы хотим представить еще один бесплатный плагин, который может помочь вам еще больше.
Локатор строк
ЦЕНА: Бесплатно
Если поиска правильного шаблона недостаточно, вам поможет String Locator. Представьте, что вы хотите изменить определенный HTML-элемент в своей теме или любом установленном вами плагине. Вы можете быстро найти элемент, проверив его в своем браузере, но у вас все равно будут проблемы с обнаружением файла, который отображал этот элемент. Поскольку теперь вы работаете с настраиваемыми темами и плагинами, файлы могут иметь имена, отличные от тех, к которым вы привыкли. Разработчик мог поместить код в отдельный файл, чтобы упростить дальнейшую разработку, и вы можете застрять в поиске кода в сотнях файлов. Вместо этого вы можете использовать String Locator.
Если вы решите использовать этот плагин, вам не придется беспокоиться о том, какой шаблон используется для создания конкретной строки, которую вы ищете.
Если вы ищете слово, целую фразу или фрагмент кода, этот плагин сможет его найти.
После того, как вы нажмете кнопку «Поиск» и подождите несколько секунд, пока String Locator совершит свою магию, в результатах отобразится строка, файл, в котором он находится, и номер строки. Плагин позволит вам редактировать этот конкретный файл и сразу же выделит вашу поисковую фразу!
Теперь вы можете изменить любую часть любой темы / плагина, вы можете перевести их жестко запрограммированные части и забыть о ручном сканировании файлов, которые вам неизвестны.
Хотя эти инструменты WordPress могут вам очень помочь, мы все же рекомендуем вам позаботиться о своем сайте. Если вы не совсем уверены, какие изменения вносите, убедитесь, что у вас всегда есть свежая резервная копия, и подумайте о том, чтобы нанять профессионала, который сделает всю работу за вас. Также обратите внимание, что многие разработчики не смогут помочь вам, если вы сделаете ошибку, изменив тему или плагин самостоятельно.
Как редактировать шаблон WordPress. Три главных способа
После установки темы, шаблона WordPress, часто возникает вопрос — как изменить этот шаблон. Ведь действительно, какую-бы хорошую темы вы не выбрали-бы, предусмотреть всё, авторы тем не могут. Но ничего страшного, есть несколько путей, которыми можно воспользоватся.
Некоторые из этих методов, подойдут и начинающим вебмастерам. Ну а для некоторых, вам придется знать хотя-бы азы HTML, CSS, PHP.
Почему вообще возникает необходимость редактирования темы вордпресс? Причины могут быть разными. Кому-то мешает значок автора темы внизу страницы. Кто-то хочет изменить цвета сайта. Кто-то хочет изменить формат выводимой даты постов. Ну а кто-то, хочет просто поставить код счетчика, например, яндекс метрики или гугл аналитикс. Или просто рекламу вставить.
Есть несколько способов, изменить настройки вашей темы:
С помощью встроенного редактора
После того, как вы установили тему, шаблон WordPress, вам станет доступным встроенный визуальный редактор. Если вы не знаете HTML, CSS, PHP, то вам сюда. Откройте меню Внешний вид, и выберите пункт Настроить
После чего, вы попадёте в визуальный редактор шаблона WordPress
В зависимости от темы, здесь могут быть самые разные настройки. Одни создатели тем, дают минимальные настройки, как на скрине выше. В других можно изменить намного больше настроек: тип шрифта, цвет шрифта, фона, основной цвет и так далее, добавить фоновое изображение.
Также встречаются PRO темы, который имеют отдельный редактор, в котором вообще почти все прописано. Это может быть несколько вкладок с самыми разными настройками.
С помощью тех поддержки.
Если вы купили платную версию темы, но хотите внести в неё изменения, то вы можете заказать такие изменения у самих авторов. Конечно, это будет платная услуга, но зато, все будет сделано по высшему разряду.
К сожалению, русскоязычных производителей тем, совсем немного, и в большинстве случаев, даже PRO тему, вам придется покупать за рубежом. А это означает, что скорее всего, не будет русскоязычной поддержки. Но хуже того, если вам нужно что-то доруссифицировать, то не факт, что вам помогут.
Но есть и другой вариант. Заказать изменения у фрилансера. Есть биржи фриланса, и вы можете туда обратится. Понятное дело, вначале вы должны полностью определится, что именно вам нужно. Нужно изменить цвет заголовка, значит записываем в ТЗ. Нужно вставить фоновое изображение, снова дописываем в ТЗ. И вот так, вам нужно прописать каждое изменение. Да, и не забудьте загрузить файл темы в облако или хотя-бы её название.
Затем, заходите на любую из бирж, создаёте задание, и получаете предложение. Смотрите на рейтинг претендентов, задавайте им вопросы, и делайте заказ.
На самом деле, таких бирж много, и вы можете выбрать любую.
Изменением кода темы
Окей, если вам нужны изменения, которых нет в родном редакторе темы WordPress, и вы не хотите из-за мелочи обращаться на биржу фриланса, то вы можете изменить нужный код самостоятельно. Для этого, вам нужно хотя-бы понимать, что представляют из себя PHP, HTML, CSS. В каких-то случаях, вам потребуется шапочное знание, ну а в некоторых, вам нужно будет знать их на продвинутом уровне.
Любая тема WordPress, состоит из нескольких файлов (от десяти до пары сотен, в зависимости от темы). Но основных файлов, не так много. Их можно увидеть и отредактировать во встроенном редакторе.
С помощью встроенного редактора
Перед тем, как начать редактировать код во встроенном редакторе тем, я вам советую установить плагин подсветки кода. Например HTML Editor Syntax Highlighter. Благодаря плагину подсветки, вам будет легче смотреть код. После чего, вам нужно перейти непосредственно к редактору темы. Для этого, зайдите в меню Внешний вид, и выберите пункт Редактор.
Вы увидите две области редактора. Посередине, окно редактирования. Справа, окно выбора файлов для редактирования.
Почти все темы WordPress, имеют шаблонную структуру.
Файл style.css. Этот файл отвечает за внешний вид вашего сайта. Каким будет цвет шапки, цвет текста, отступы и многое другое.
Файлы header.php, index.php, page.php, sidebar.php, footer.php и так далее. Эти файлы отвечают за функционал сайта. Если вы хотите добавить рекламный баннер в шапке сайта, то вам нужно изменить header.php, если вы хотите убрать или изменить значок копирайта в подвале сайта, то вам нужно изменить footer.php
К сожалению, в одной статье невозможно рассказать о всех возможных изменениях на всех темах. Различных тем у WordPress много. Наверное, тысячи, а может и того больше. И настроек на каждой из тем, тоже много. Ну вот например, как можно изменить значок копирайта в моей теме.
Для этого, открываем файл footer.php, прописываем своё значение, и нажимаем кнопку Обновить файл.
Внимание! Перед любыми изменениями в файлах темы, сделайте бэкап сайта.
С помощью файл менеджера хостинга
Практически любой хостинг, имеет свой собственный файл менеджер. Вы также можете зайти через него, скачать файл, исправить его в любом редакторе и загрузить обратно на хостинг.
Но помните, для редактирования, походят не все редакторы, Word и ему подобные не подойдут. Лучше использовать простой блокнот. А ещё лучше, использовать специальные программы для редактирования файлов на языках программирования, например Sublime Text.
Чтобы найти файлы темы, зайдите на сайт, найдите папку wp-content, перейдите в папку themes, выберите вашу активную тему. После этого, вы сможете отредактировать ваш файл.
С помощью FTP менеджера
Есть много различных файл менеджеров, с помощью которых можно зайти на свой сервер и отредактировать нужный вам файл. Например, это FTP менеджер File Zilla, или менеджер, встроенный в Total Commander. При регистрации на хостинге, вам должны были выслать данные для входа по FTP.
Запустите программу, введите эти данные, и вы сможете изменять файлы вашего сайта (не только файлы тем, но и другие файлы тоже).
Как видите, изменить тему WordPress, это вопрос нескольких кликов. Все это, благодаря полной открытости WordPress. Вы можете установить любую тему, и изменить ее так, как это нужно вам.
Но в тоже время, изменение оформления, часто может потребовать углубленного знания программирования. В этом случае, если вы не хотите вникать в профессию программиста, то вы можете заказать изменения.