Как в wordpress редактировать коды html – Где редактировать код вашего шаблона WordPress

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

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

Вступление

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

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

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

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

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

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

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

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

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

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

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

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

Вывод

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

©www.wordpress-abc.ru

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

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

www.wordpress-abc.ru

Как редактировать шаблон Вордпресс | ТВОЙ ПОМОЩНИК

Написал Елена Молгачева в 21 мая 2015, 07:34 Отредактировано: 20 мая 2017, 07:25

Давно хотела написать этот исторический экскурс.

Его тема – извечный вопрос: «Что лучше: установить новый плагин или разобраться, как редактировать шаблон Вордпресс?»

Итак, стартуем.

Какой шаблон WordPress лучше выбрать?

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

Я тоже думала несколько дней прежде, чем решила, на каком же остановиться.

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

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

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

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

И окружающие будут Вам очень благодарны.

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

Поэтому самый главный совет начинающим: начните!

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

Какие альтернативы существуют, кроме выбора готовой темы Вордпресс?

Можно создать блог с помощью конструктора шаблонов (генератор тем Artistreer). Это доступно даже начинающим. Прочитайте комментарии к вышеуказанной статье про выбор дизайна. Там есть весьма успешные примеры такого пути.

Но есть и неудачные. Были случаи, когда блог, созданный с помощью конструктора Parallels Web Presence Builder, очень медленно загружался, и никак не удавалось увеличить скорость загрузки сайта.

Можно выбрать и более сложный вариант самостоятельной верстки с помощью адаптивной сетки bootstrap.

Ну, а что после выбора шаблона?

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

Плагины WordPress обеспечат добавочные функции.

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

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

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

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

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

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

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

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

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

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

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

Новичкам это будет интересно. И, возможно, они возьмут себе что-то на заметку.

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

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

Редактирование шаблона WordPress.

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

Для этого я узнала, как проверить ссылки с главной страницы с помощью сервиса DNews.ru.

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

Добавляем счетчики в подвал.

Проверила и обнаружила посторонние внешние ссылки. Чтобы их удалить, зашла через Редактор своего сайта, в Подвал (Footer.php), нашла их по поиску (для этого нужно нажать на клавиатуре одновременно Ctrl и F, и подставлять по очереди в окошко поиска найденные с помощью сервиса лишние ссылки) и удалила.

Удалять лучше не только ссылку, а весь фрагмент кода, начиная с открывающего тега и заканчивая закрывающим тегом анкора (a).

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

Но я давно избавилась от всех лишних ссылок. Поэтому для примера я задала ссылку на счетчик, который установлен у меня в подвале и закрыт от индексации тегами noidex и nofollow. Что тоже – вариант.

Устанавливаем слайдер.

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

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

Это, оказалось, сделать на удивление просто. Под силу даже самым начинающим.

И я очень гордилась своим слайдером, картинки в котором последовательно менялись и рекламировали мои лучшие статьи.

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

Добавляем постраничную навигацию.

3. Далее мне очень приглянулась постраничная навигация на главной странице.

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

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

Поэтому вносить рекомендованные изменения в код нужно очень внимательно и аккуратно.

Экономим место на сервере.

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

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

Таких копий обычно накапливается большое количество под каждой статьей. И они занимают значительные объемы.

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

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

Устанавливаем кнопки социальных сетей.

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

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

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

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

Правильные заголовки h2 для всех страниц сайта.

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

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

Мне это очень помогло при продвижении в Google.

Разметка и структурированные данные.

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

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

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

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

Дополнительная защита сайта на WordPress.

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

Добавляем миниатюры записи WordPress на страницы рубрик и поиска по сайту.

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

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

Теперь эти страницы выглядят более привлекательно и информативно. Можете оценить сами. Посетите одну из рубрик или задайте фразу для поиска в виджете «Найди у помощника».

Как сделать, чтобы Главная страница сайта отличалась от всех остальных.

10. Многие новички задают такой вопрос.

Я отредактировала Главную страницу своего сайта, минимизировав количество виджетов на ней и их состав.

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

Показываем дату редактирования статьи.

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

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

И теперь каждый может увидеть дату последнего редактирования и оценить свежесть статьи.

Меняем форму для комментариев на новую.

12. Чтобы защититься от спама в комментариях и не чистить постоянно папку «Спам», мне захотелось установить у себя на сайте современную проверку reCaptcha 2.0 -Я не робот.

Но сделать это получилось только после замены старой формы для комментариев на новую, построенную с помощью функции WordPress comment_form (). Фактически — это всего лишь одна строка. Все очень просто.

Узнайте, как мне удалось установить проверку «Я не робот» на свой WordPress сайт.

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

Редактируем код страницы WordPress.

1. Таким изменением кода можно считать установку баннеров с рекламой или кликабельных картинок в боковую колонку сайта (sidebar).

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

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

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

3. Еще один пункт — добавление видео и презентаций на свой сайт. Здесь тоже все предельно просто. Берем предлагаемый код и помещаем его в нужное место статьи.

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

Как центрировать видео (тег iframe)?

Я решаю эту проблему, помещая добавляемый код в обрамление родительских тегов параграфа (p) или промежуточного заголовка (h4,h5,h5) с последующим центрированием текста.

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

Ранее я прибегала для этого к услугам устаревшего тега center. Но после того, как поисковые системы стали обращать больше внимания на правильность написания кода (валидность), я внесла исправления во все свои статьи, куда добавляла видео или вставляла презентации, чтобы было меньше ошибок.

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

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

Очень важное замечание.

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

Это удобно делать с помощью расширения браузера Google Chrome RDS bar.

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

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

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

Заходите ко мне еще.

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

Но глаза боятся, а руки делают.

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

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

А у меня теперь сохранится памятка на случай смены темы WordPress для организации нового дизайна.

Уважаемые блогеры!

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

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

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

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

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

Жду Ваших отзывов и предложений.

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

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

Елена и tvoy-internet.ru

tvoy-internet.ru

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

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

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

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

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

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

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

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

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

Узнать подробнее

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

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

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

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

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

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

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

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

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

Узнать подробнее

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

Узнать подробнее

Хотите узнать, что необходимо для создания сайта?

Посмотрите видео и узнайте пошаговый план по созданию сайта с нуля!

Смотреть видео

webformyself.com

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

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

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

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

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

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

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.

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

Насколько полезным был этот пост?

Нажмите на звезду, чтобы оценить этот пост!

Отправить рейтинг

Средний рейтинг: 4.8 / 5. Количество голосов: 31

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

hostenko.com

Как редактировать тему шаблон wordpress

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

Я вижу две основные причины, зачем нам это нужно:

• Большинство настроек блога связано с редактированием кода – html или css. Во многих своих статьях я пишу о том, что нужно отредактировать определенный файл темы. Если вы не знаете, как искать эти файлы и какими средствами удобнее их править, эта статья для вас.
• При создании блога вы установили на него тему (шаблон) из интернета и хотите что-то в ней изменить, добавить элементы дизайна или функциональные блоки. Но для этого обязательно обладать хотя бы минимальными знаниями HTML и CSS. Независимо, новичок вы или имеете опыт в создании сайтов, для редактирования шаблона WordPress вы должны понимать из чего он состоит и для чего нужна каждая его часть. Поэтому для начала рассмотрим структуру шаблона WordPress.

Структура шаблона WordPress

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

• index.php – Шаблон начинается с файла index.php, который выводит главную страницу сайта.
• header.php —  Шапка сайта. В этот файл вынесена повторяющаяся на каждой странице сайта верхняя часть. Он начинается с тега <html>, содержит полностью <head></head>, в который вставляется большинство скриптов при настройке блога. В нем открывается тег <body> и выводится логотип, слоган, верхнее меню и прочие элементы шапки.
• style.css – основной стилевой файл шаблона, в котором задается внешний вид элементов сайта. Чтобы редактировать шаблон WordPress, чаще всего приходится работать именно с этим файлом.

Остальные файлы:

• single.php – отвечает за отображение каждой отдельной записи. Т.е. внешний вид страницы, на которой вы сейчас читаете мою статью, настраивается именно в этом файле.
• page.php – вывод статической страницы блога. Новые страницы создаются в разделе «страницы» в левом меню, а их вид настраивается в этом файле.
• sidebar.php – отвечает за вывод сайдбара (боковой колонки блога), где находятся виджеты. Эта часть шаблона тоже повторяется на каждой странице WordPress сайта, поэтому вынесена в отдельный файл. Обычно не приходится редактировать этот файл, потому что все изменения производятся над виджетами. Однако никто не запрещает вписать какой-то код напрямую в файл sidebar.php.
• functions.php – файл с php-функциями темы. Все они влияют на внешний вид и работу сайта, определяют события при определенных действиях пользователей.
• footer.php – футер (подвал) сайта, его нижняя часть. Это тоже повторяющийся на всех страницах  элемент. В него обычно вставляют счетчики посещаемости, копирайт и контактные данные.
• category.php – за вывод страницы с перечнем всех записей определенной категории отвечает данный файл.
• tag.php – вывод архива записей по соответствующему тегу прописан в этом файле.
• archive.php – архив всех записей за определенный месяц (год) настраивается здесь.
• search.php – выводит результаты поиска по блогу.
• comments.php – отображение комментариев к записям и страницам.
• 404.php – шаблон ошибки 404 – страница не найдена.

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

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

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

1. Редактирование шаблона через админку WordPress
   В админке зайдите в раздел «Внешний вид» — «Редактор» и справа в колонке вы увидите все файлы темы, доступные для редактирования. Выберите нужный файл, отредактируйте и не забудьте кликнуть по кнопке «Обновить».Данный способ очень удобен, когда нужно внести незначительные изменения: редактирование через админку делается быстро, просто, не нужно запускать дополнительные программы и вводить пароли. Из минусов – стандартный редактор не имеет функции подсветки кода и нумерации строк, поэтому вносить серьезные многочисленные изменения таким образом не удобно.
2. Правка файлов через файловый менеджер хостинга
   Как вы уже знаете, я пользуюсь одним из лучших хостингов — beget, у которого отличный файловый менеджер с дружелюбным интерфейсом. Мне нравится редактировать шаблоны WordPress этим способом, потому что опять же не нужно запускать никаких программ, настраивать подключений, копировать файлы на компьютер и код подсвечивается. Файлы шаблона WordPress, который вам нужно отредактировать, находятся в папке: /wp-content/themes/название_вашей_темы/ Зайдите в нее и откройте нужный файл для редактирования. Если ваш хостинг не обладает таким удобным файловым менеджером, советую выбрать другой хостинг:)
3. Редактирование шаблона по ftp
   Этот способ удобен, если предстоит серьезная работа с файлами, особенно если нужно редактировать сразу несколько файлов в разных папках.
   • Запустите ваш ftp-клиент. Для подключения по ftp я использую программу FileZilla или Total Commander — по ссылке подробная инструкция настройки соединения. Настройте соединение с сайтом и зайдите в папку вашей вордпресс темы: /wp-content/themes/название_вашей_темы/
   • Скопируйте файл, который нужно редактировать к себе на локальный диск.
   • Откройте файл в программе для редактирования кода и внесите необходимые изменения. Я советую программы Notepad++ или Dreamweaver, в них подсвечивается код, пронумерованы строки и конечно есть множество других функций и преимуществ.

Настройка темы WordPress в админке

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

Зайдите в раздел «Внешний вид» — «Настроить», откроется окно с основными настройками темы. Здесь можно ввести название и описание сайта, которые отобразятся в шапке сайта после сохранения. Так же вы можете изменить цвет фона или фоновое изображение и другие настройки — разобраться не сложно.   Большую часть настроек темы WordPress можно выполнить в разделе «Внешний вид» -> «Имя вашей темы». Здесь можно загрузить логотип, фавикон и т.д. Настроек очень много, но честно сказать, я ими никогда не пользуюсь, так как мне проще работать с кодом, чтобы редактировать тему WordPress.

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

P.S. Хочу напомнить вам, дорогие читатели, что если вы замечаете в моих статьях ошибки, не поленитесь нажать «Ctrl + Enter», чтобы с помощью системы Orhpus я их исправила.

pro-wordpress.ru

Как редактировать шаблон wordpress самому? Десятка лучших

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

Для начала о том, зачем нужна настройка шаблона WordPress опытному веб-мастеру и новичку:

• Практически все настройки блога завязаны на редактировании кода – чаще всего css или html. Во многих руководствах по ВордПрессу специалисты рассказывают, что для достижения результата нужно отредактировать файл темы. Если вы не совсем понимаете, о чем идет речь, как редактировать тему WordPress, самое время осваивать новый материал.
• Создавая или редактируя блог, вы установили загруженный шаблон. Все бы хорошо, но он криво встал и нуждается в небольшой доработке. Как добавить или убрать функциональные блоки, новые элементы дизайна? Знаний CSS, HTML маловато или вообще нет – с чего начинать работу? Знакомство со структурой позволит понять, как работает сайт изнутри, какие функции выполняет каждый элемент.

Разбираем структуру по кирпичикам

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

Структура

Часто приходится редактировать такие файлы:

• index.php. Он позволяет вывести главную страничку.
• header.php. Шапка сайта или его верхняя часть. Независимо от того, на какую именно страницу переходит посетитель сайта, шапка остается неизменной.
• style.css. Стилевой элемент, используемый для настройки внешнего вида шаблона WordPress.

Мы назвали 3 элемента, которые редактируют чаще остальных. Кроме них, есть другие:

• single.php – демонстрация записей.
• page.php – статическая web-страница.
• sidebar.php. Сайдбар с виджетами.
• functions.php – php-функции.
• footer.php. Он же подвал сайта, остается неизменным.
• category.php. Отвечает за вывод страничек по конкретной категории.
• tag.php. Вывод по тегу.
• archive.php. Записи за год или месяц.
• search.php. Поиск WordPress. Когда посетителю нужно найти конкретный материал, статью или файл, search.php в шаблоне помогает искать контент.
• comments.php. Аудитория сайта может дискутировать между собой, оставлять комментарии и отзывы. Чтобы настроить отображение комментариев, используют файл php.
• php. Еще один важный файл, отвечающий за ошибку 404.

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

Редактируем шаблон самостоятельно

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

Есть три варианта настройки темы или шаблона WordPress:

1. Через админку.

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

Админка

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

2. В файловом менеджере хостинга.

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

Хостинг

Как работает редактор тем WordPress? Вам нужно открыть папку по адресу /wp-content/темы/название_темы/файл. Если файлового менеджера нет, есть смысл задуматься о смене хостинга.

3. Редактируем шаблон по

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

Достаточно выполнить три простых действия:

• Запустить клиент, воспользоваться FileZilla, Total Commander. Установив соединение, нужно открыть папку темы ВордПресс по адресу: /wp-content/темы/название_темы/
• Скопировать файл, внести изменения.
• Открыть его в Dreamwaver, Notepad++, любой другой толковой программке, предназначенной для редактирования. Выбирайте ПО, с которым действительно удобно работать. Недостаточно просто загрузить тему в WordPress – нужно найти программку для редактирования с удобной подсветкой кода, нумерацией строк.

Как выглядит настройка в админке ВордПресса?

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

Хостинг

1. Открываем раздел «Внешний вид», переходим в «Настроить».
2. В открывшемся окошке прописываем название вашего сайта, делаем его краткое описание. Когда вы нажмете «Сохранить», эта информация отобразится в шапке сайта. Меняйте цвет фона, фоновое изображение – это и многое другое можно делать в настройках.
3. Большинство изменений производятся в категориях «Внешний вид», «Имя темы», загружается фавикон, логотип. Опций действительно много, и для тех, кто не хочет (не умеет) работать с кодом, это просто находка.

Настройки внешнего вида

ТОП-10 бесплатных шаблонов

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

Avada

Минималистичная, универсальная тема WordPress с регулярными обновлениями. Есть русификатор. Рекомендуем ее для создания, дальнейшего администрирования магазинов, инфосайтов.

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

Nitro

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

Sydney

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

Allegiant

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

Riba Lite

Как упростить ведение блога, сделать процесс увлекательнее и разнообразнее? Попробуйте установить тему Riba Lite! Это идеальный вариант для тех, кто практикует создание текстового контента в таких жанрах, как путешествия, красота и здоровье, стиль жизни. Доступен большой выбор цветовых схем, поддержка версий для всех мобильных платформ. За счет использования Retina Ready получаем отличную производительность.

ColorMag

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

eStore

Клевый WooCommerce макет, который идеально подходит для создания онлайн-магазина. Совместим с плагинами Wishlist.

Ascent

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

Onetone

Шаблон сайта-одностраничника Onetone стал настолько популярным, что его установили себе десятки тысяч веб-мастеров. Позволяет организовать ресурс любой тематики. Создан с использованием CSS3, HTML5.

Awaken

Нет лучшего решения для «открытого журнала», чем Awaken. Благодаря ему, посетители вашего сайта смогут смотреть новости в удобном формате, оставлять комментарии. Тема привлекает сочным интерфейсом, удобными виджетами.

Заключение

На этом все – мы разобрали 3 основных способа редактирования тем WordPress и 10 лучших шаблонов для сайта. Выбирайте тот, который по душе и как раз соответствует вашей тематике. Желаем успехов!

Поделитесь со своими друзьями

awesome-design.com

WordPress плагин редактирования кода с админки

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

WordPress плагин для удобного редактирования кода

Advanced Code Editor – плагин для подсветки синтаксиса, при редактировании кода темы или плагина из админ панели. Поддерживает подсветку синтаксиса для PHP, HTML, CSS и JS, т.е. все что нам нужно 🙂

Установка WordPress плагина для удобного редактирования кода

Для этого переходим в раздел “Плагины” → “Добавить новый”, в поиске вбиваем название: “Advanced Code Editor” и жмем Enter.
В результатах поиска находим наш плагин (скорее всего он будет первым как на картинке), жмем на кнопку установить, после установки активируем плагин.

Работа с WordPress плагином подсветки кода

После установки и активации плагина, перейдите в раздел “Редактор” и вас приятно удивит преображения кода.

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

Основные возможности плагина Advanced Code Editor:

• Подсветка синтаксиса (PHP,HTML,JavaScript и CSS)
• Умный поиск (строка или regex).
• Поиск и Замена.
• Полноэкранное редактирование (у меня в WordPress 4.0 в этом режиме мешало боковое меню).
• 11 тем для подсветки синтаксиса.
• Возможность возвращаться в истории правок назад и вперед (редактор запоминает все правки).
• Автоподстановка с более чем 3500 WordPress функциями.
• Протестирован и работает с IE8,9,10 FF3.6 и выше, chrome 8 и выше.
• Ajax сохранение файла. (NEW)
• Ajax создание нового файла. (NEW)
• Ajax удаление файла. (NEW)
• Ajax Создание директории. (NEW)
• Переход к нужной строке с помощью сочетания клавиш Crtl + G. (NEW)
• Отображение дерева файлов (NEW)
• Кнопка скачать тему, которую редактируете.(NEW)
• Кнопка скачать плагин, который редактируете.(NEW)
• Кнопка скачать файл, который редактируете.(NEW)
• Сворачивать блоки кода.(NEW)
• Вкл/Выкл отображения дерева файлов.(NEW)
• Закомментировать/раскомментировать строку.(NEW)
• Автоформатирование кода.(NEW)
• Встроенный контроль версий.(NEW)

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

Напоследок небольшой видео обзор от автора плагина:

webcomplex.com.ua