Чайникам 

Верстка шаблона Wordpress из HTML макета. Темы для WordPress — из каких шаблонов они состоят и как все это работает

Этот туториал покажет, как создать новый шаблон страницы для шаблонов WordPress Cherry Framework .

    Войдите в админ панель WordPress.

    Откройте меню Страницы -> Добавить новую (Pages -> Add New) и создайте новую страницу с новым шаблоном страницы.

    Введите заголовок страницы и сохраните изменения. В правой колонке в панели вы можете выбрать один из используемых в вашей теме шаблонов страницы. Вам необходимо добавить новый шаблон станицы в этот список. Все эти шаблоны находятся в папке на вашем сервере. Но вам необходимо добавить новый шаблон страницы в папку wp-content/themes/theme##### .

    Создайте новый.php файл в любом редакторе, например, Dreamweaver или Notepad++, и назовите его, например, new.php . Добавьте в этот файл следующий код:

    Сохраните файл и загрузите его в папку wp-content/themes/theme##### на ваш сервер.

    Теперь вернитесь к странице, которую вы создали в админ панели WordPress. В панели Атрибуты страницы (Page Attributes) вы можете выбрать новый шаблон страницы под названием “Пользовательский” (“Custom”).

    Cнова откройте файл new.php file и начните добавлять свой контент. Файл может содержать все, что вы захотите, включая неизменяемый контент или элементы макета страницы, которые будyт выводить ее контент.

    Вы можете использовать элементы кода других шаблонов страницы из папки wp-content/themes/CherryFramework , чтобы создать специфическую страницу.

    Давайте сначала добавим хедер и футер в новый шаблон страницы:

    Если вы сохраните изменения, то сможете увидеть их на странице:

    Теперь необходимо выбрать вид контента, который вы хотите использовать на этой странице. Допустим, у вас нет отдельного шаблона страницы для пользовательских постов “Наша команда” (“Our Team”). И вам нравится дизайн шаблона страницы Отзывов (Testimonials) и вы бы хотели использовать этот дизайн для постов “Наша команда” (“Our Team”). Для этого в меню Дизайн -> Редактор (Appearance -> Editor ) вы легко найдете файл, который содержит код шаблона страницы Отзывов (Testimonials). Его название page-testi.php .

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

    " data-motopress-wrapper-file="page-testi.php" data-motopress-wrapper-type="content">
    " data-motopress-type="static" data-motopress-static-file="static/static-title.php">
    " id="content" data-motopress-type="loop" data-motopress-loop-file="loop/loop-testi.php">
    sidebar" id="sidebar" data-motopress-type="static-sidebar" data-motopress-sidebar-file="sidebar.php">

    Вставьте скопированный код в файл new.php. Замените Template Name: Custom на Template Name: Team

    И замените page-testi.php на new.php в этом коде.

    Данный код также содержит ссылку на файл loop/loop-testi.php . Это еще один файл, который вам необходимо скопировать и редактировать. Скопируйте файл loop-testi.php из папки wp-content/themes/CherryFramework/loop и вставьте его в папку wp-content/themes/theme#####/loop (если в папке вашей темы отсутствует папка loop , вам следует создать ее). Переименуйте этот файл, например, на loop-new.php и откройте его для редактирования. Замените слово “testi” на слово “team” во всех строчках файла и сохраните изменения. (Для замены слов вы можете использовать комбинацию клавиш Control (Command) + F).

    Когда файл loop-new.php создан и отредактирован, снова откройте файл new.php и замените loop/loop-testi.php на loop/loop-new.php в его коде. В результате ваш код будет выглядеть следующим образом:

    " data-motopress-wrapper-file="new.php" data-motopress-wrapper-type="content">
    " data-motopress-type="static" data-motopress-static-file="static/static-title.php">
    " id="content" data-motopress-type="loop" data-motopress-loop-file="loop/loop-new.php">
    sidebar" id="sidebar" data-motopress-type="static-sidebar" data-motopress-sidebar-file="sidebar.php">

    Сохраните изменения и проверьте вашу новую страницу. Теперь она должна содержать пользовательские посты “Наша команда” (“Our Team”) с дизайном страницы Отзывов (Testimonials).

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

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

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

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

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

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

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

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

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

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

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

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


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


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

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

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

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

Ваш_сайт/wp-content/themes/название_вашей_темы

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

Сайт/wp-content/themes/country

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

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

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

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


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

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

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

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

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

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

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

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

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

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

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

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

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

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

  1. Tag-{slug};
  2. Tag-{id};
  3. Archive;
  4. Index.
  1. Author;
  2. Archive;
  3. Index.

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

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

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

  1. Search;
  2. Index.
  1. Index.

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

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

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

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

Теперь переходите в административную панель управления своим , там заходите в меню «Внешний вид » —> «Темы «. Там вы увидите шаблоны, которые были установлены на ваш блог. В верху есть вкладка «Установить темы «, нажмите на нее. Перед вами откроется форма поиска шаблонов. Она предлагает подобрать шаблоны по цвету, колонкам, ширине, функциям, а также можно посмотреть более свежие, избранные или недавно обновленные шаблоны. Лично я не рекомендую пользоваться такой формой поиска, так как она находит только не переведенные шаблоны.

Сейчас нажимаем на вкладку «Загрузить «. Там предлагают нам выбрать файловый архив шаблона, который находится у нас на компьютере. Выбираем этот файл и нажимаем «Установить «. После установки нам предложат активировать шаблон, но вы сразу это не делайте. Вновь вернитесь в меню «Внешний вид » —> «Темы «. Там должна появится ваша новая установленная тема оформления. Под ней нажимаем на вкладку «Посмотреть «.

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

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

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

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

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

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

Сейчас объясню, как сделать из простого HTML-шаблона тему WordPress на примере дизайна из той статьи.

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

Итак, приступим.

Распределяем код по файлам

1. Скачайте шаблон и распакуйте его в папку с темами WordPress (адрес вида адрес_блога_wordpress/wp-content/themes/ ). Если хотите, переименуйте папку с темой на свой вкус. Например, у меня шаблон располагается по адресу адрес_блога_wordpress/wp-content/themes/MyTheme/ .

2. Переименуйте файл styles.css в style.css .

3. Откройте style.css в редакторе кода (таком, как Notepad++) и в самое его начало вставьте следующие строки:

/* Theme Name: MyTheme Theme URI: http://test1.ru Author: NoName Author URI: http://test1.ru Description: Example of test Version: 1.0.0 License: GNU General Public License v2 or later License URI: http://www.gnu.org/licenses/gpl-2.0.html */

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

4. Создайте файлы header.php , index.php , sidebar.php , footer.php и распределите по ним код из index.html .

4.1. В header.php скопируйте код по строчку , так как этот файл отвечает за верх сайта. styles.css замените в коде на style.css - новое корректное имя файла.

4.2. В index.php вставьте код основного блока (со строки по строку ).

4.3. В sidebar.php скопируйте код бокового меню (с по ).

4.4. В footer.php вставьте оставшиеся строки (с до конца документа index.html ).

5. Удалите index.html .

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

Адаптируем header

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

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

1. Откройте файл header.php и замените содержащийся в нём код до блока

на следующий:

> "> "> " type="text/css" media="screen" /> <?php bloginfo("name"); ?>

Мы сделали динамическим блок

Код вызывает функцию, возвращающую языковые атрибуты в контейнер.

">

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

Важная функция, обеспечивающая работу на странице стилей, плагинов и скриптов.

2. Перейдите к редактированию файла index.php. В самом его начале пропишите

,

Строчки вызывают файлы шапки, боковой панели и низа сайта.

Теперь вы можете просмотреть или даже активировать MyTheme. В результате браузер отобразит уже знакомый шаблон со статическим меню и одной-единственной страницей. Чтобы меню стало динамическим и настраиваемым, а вместо одной страницы отображались все помещённые на сайт материалы, нужно преобразовывать шаблон дальше.

Делаем динамическим верхнее меню

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

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

так, чтобы получилось следующее:

Есть вопросы?

Сообщить об опечатке

Текст, который будет отправлен нашим редакторам:

Отправить