Как редактировать шаблон 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. Вы можете установить любую тему, и изменить ее так, как это нужно вам.

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

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

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

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

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

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

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

Однако, если вы желаете постигнуть всю суть работы с сайтом и получить дополнительные знания, то стоит попробовать загрузить и установить для начала тему с помощью какого-нибудь ФТП клиента (я, например, использую Файлзиллу).

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

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

• Распакуйте архив, кликнув по нему правой кнопкой мыши и выбрав соответствующую операцию;
• Получив доступ по FTP к файлам вашего сайта, загрузите папку, полученную после разархивирования, на хостинг в директорию (папку) themes

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

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

Гораздо удобнее с этой точки зрения программа Notepad++, которая также устанавливает соединение по FTP, имеет подсветку синтаксиса, а в случае сделанной вами ошибки позволяет возвращать исходное содержание файлов на несколько шагов. Впрочем, оцените сами. Вот вид вебстраницы в разделе редактора шаблонов админки Вордпресс:

А вот какой интерфейс для редактирования предлагает Нотпад плюс плюс:

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

И еще. Редактирование шаблонов WordPress я советую осуществлять на локальном сервере, то бишь на своем компьютере (здесь Денвер, а еще лучше, Open Server вам в помощь). Сделали все нужные изменения, протестировали, а затем уже заливаете файлы на хостинг. Эксперименты с "живым" сайтом могут дорого стоить.

Файловая структура шаблонов страниц

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

Для моего блога в папку с одной из установленных тем этот путь выглядит так:

При просмотре в окне редактора Нотпад++ папка со всеми файлами вашей темы WordPress будет выглядеть следующим образом:

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

Однако существуют шаблоны, которые отвечают за вывод специально созданной вебстраницы. Например, на моем блоге одно время существовала форма обратной связи на странице «Контакты», с целью ее установки был создан файл mail.php.

Кроме того, есть шаблоны, которые нужны для конструирования отдельных частей, отображаемых на всех страницах сайта. Это шапка, или хидер (header.php), левая и/или правая колонка, иначе сайдбар (sidebar.php), подвал, или футер (footer.php). Схематически такую конструкцию с областями страницы можно представить так:

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

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

Иерархия шаблонов WordPress и последовательность вывода страниц

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

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

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

Начнем с домашней вебстраницы. Приоритет здесь отдан Home. То есть последовательность, с которой Вордпресс будет взаимодействовать с шаблоном, следующая: сначала происходит запрос Home, если его нет, то WordPress обращается к основному шаблону Index:

1. Home (главный приоритет);
2. Index.

Если конструируется отдельная статья блога, шаблоном которой по умолчанию является Single, то последовательность обращения будет такой:

1. Single-. Скажем, если в конкретном случае тип записи product, то WP будет обращаться к шаблону single-product.php;
2. Single;
3. Index.

Для статической страницы Page иерархия следующая:

1. Custom template (пользовательский шаблон, который создан специально для конкретной вебстраницы);
2. Page-. Здесь slug — короткое название (псевдоним) страницы. Например, если в составе темы присутствует файл с названием page-recent-news, то WP обратиться к нему;
3. Page-. Если вебстраница отождествляется по конкретному идентификатору (id) 12, то именно она будет следующей по иерархии, ежели отсутствуют указанные выше;
4. Page;
5. Index.

Чтобы вывести страницу рубрик, Вордпресс предпримет поиск специального файла, затем будет искать по id. Если таких шаблонов не существует, то преимущество получит общий шаблон Category, далее по убывающей Archive и Index:

1. Category-;
2. Category-;
3. Category;
4. Archive (архив);
5. Index.

Аналогичная картина вырисовывается и для тега (метки). В первую очередь специальный шаблон, далее на основе id, после чего Tag, Archive и Index:

1. Tag-;
2. Tag-;
3. Tag;
4. Archive;
5. Index.

Возможно наличие странички автора статей. Тогда будет осуществлен запрос к файлу шаблона Author, после чего по убывающей — к Archive и Index:

1. Author;
2. Archive;
3. Index.

Продолжаем, осталось немного. Существует возможность наличия страницы временного архива Date. В этом случае WP после неудачи будет искать Archive, после него Index:

1. Date;
2. Archive;
3. Index.

На подавляющем большинстве ресурсов используется страница поиска, которая определяется шаблоном Search. В случае его отсутствия — файл основного шаблона Index:

1. Search;
2. Index.

Далее, страница ошибки 404. Если файла 404.php не окажется, то взаимодействие произойдет с шаблоном Index:

1. 404;
2. Index.

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

1. Image, video, audio;
2. Application;
3. Attachment;
4. Index.

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

Как изменить тему WordPress неподготовленному человеку

Update:>>> Извините, пришлось добавить после начала дискуссии в комментариях. Не все дочитывают статью до конца, поэтому сразу скажу, что описываемый способ для тех, кто имеет лишь поверхностное, общее представление о том, что такое CSS и HTML. <<<

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

Не могу сказать, что являлся в то время знатоком HTML или CSS, потому требовался совершенно не требующий мозгов способ. И он нашелся.

Macromedia Dreamweaver. Я использовал 8 версию. (кстати, подойдет любой WYSIWYG-редактор, который имеет инструментарий для корректировки CSS.

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

Dreamweaver позволяет править и такие странички, если воспользоваться функционалом live data view (кнопка панели инструментов). Но мне такой вариант не понравился, потому я так и не смог победить ошибку, которую выводила программа при попытке изменить какое-нибудь свойство CSS файла.

Потому сделал все проще. Так как мне надо было только откорректировать некоторые параметры CSS, я сохранил страницу блога локально (Файл — Сохранить как-Веб страница только HTML в FireFox). Далее открыл полученный файл.htm в текстовом редакторе и изменил путь файла CSS таким образом:

<link rel="stylesheet" href=http://blog.site.ru/wp-content/themes/
themename/style.css type="text/css" media="screen" />

<link rel="stylesheet" href="style.css" type="text/css"
media="screen" />

Следующий шаг — скопировал в папку, в которую сохранил страничку — файл style.css и папку images из каталога темы блога, которую желаю поменять.
Последнее действие — открываем сохраненный файл в Dreamweaver (или в вашем любимом редакторе). И в удобном окне меняем любые свойства CSS-ки.
После того, как все откорректировано, файл стиля сохраняем и копируем в каталог темы блога. Так же в каталог images копируем добавленные или измененные изображения.
Все.

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

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