Шаблоны wordpress как с ними работать. Как создать тему для WordPress самому: уроки с видео. Что такое вордпресс премиум тема
Сейчас объясню, как сделать из простого 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" />Мы сделали динамическим блок
Код вызывает функцию, возвращающую языковые атрибуты в контейнер.
">
Вместо того, чтобы прописывать кодировку константой, мы вызвали функцию, которая берёт значение из настроек CMS и автоматически подставляет его в код, то есть для смены кодировки уже не придётся править файл темы.
Важная функция, обеспечивающая работу на странице стилей, плагинов и скриптов.
2. Перейдите к редактированию файла index.php. В самом его начале пропишите
,
Строчки вызывают файлы шапки, боковой панели и низа сайта.
Теперь вы можете просмотреть или даже активировать MyTheme. В результате браузер отобразит уже знакомый шаблон со статическим меню и одной-единственной страницей. Чтобы меню стало динамическим и настраиваемым, а вместо одной страницы отображались все помещённые на сайт материалы, нужно преобразовывать шаблон дальше.
Делаем динамическим верхнее меню
Пока мы имеем полностью статическую тему оформления, в том числе и с неизменным горизонтальным верхним меню. Пока его нельзя настроить из админ-панели, и если оставить код в нынешнем виде, то для вставки/удаления/переноса пунктов придётся каждый раз редактировать файл header.php , что крайне неудобно.
Чтобы не мудрствовать лукаво и не погружаться в пучину увлекательного мира программирования, зададим динамическому меню статичное название. Вместо таблицы горизонтального меню вставьте код
так, чтобы получилось следующее:
Для того, чтобы меню стало отображаться, в панели управления сайтом откройте Внешний вид -> Настроить -> Меню и либо переименуйте уже созданное меню в menu, либо создайте меню и настройте его на своё усмотрение, но обязательно присвойте ему имя menu.
Суть действий в том, что файл header.php функцией wp_nav_menu("menu=menu"); открывает меню под названием menu, которое, чтобы отобразиться, должно быть правильно названо и настроено в панели администрирования WordPress. Название menu вы можете поменять на любое другое, главное, чтобы имя совпадало и в настройках сайта, и в коде header.php .
Навигация явно куда-то съезжает, хоть и делает это красивой лесенкой. Так происходит потому, что меню нашего шаблона было неосмотрительно реализовано внутри таблицы, а надо было оформлять его списком. Частично исправить ситуацию можно, добавив в файл style.css следующий код:
#menu ul { margin: 0; /* Обнуляем значение отступов */ padding: 4px; /* Значение полей */ font-size: 18px; } #menu ul li { display: inline; /* Отображать как строчный элемент */ margin-right: 5px; /* Отступ слева */ padding: 3px; /* Поля вокруг текста */ }
Так как он прокомментирован, дополнительные объяснения вряд ли нужны. Остаётся обновить страницу и посмотреть, что список наконец-то стал горизонтальным.
Меню, конечно, можно сделать ровней и красивее, но к адаптации шаблона отношения это действо не имеет, зато крепко связано с CSS, который вы можете подробно изучить.
Завершаем «шапку»
Единственные элементы файла header.php , оставшиеся статическими - имя и описание сайта. Чтобы они брались из настроек, задаваемых в админ-панели, замените отвечающий за вывод текста в шапке код на следующие строки:
Обновите страницу - результат не заставил себя долго ждать.
Работа с файлом header.php на этом завершена, в итоге он имеет следующий код:
>
"> "> " type="text/css" media="screen" />Выводим посты
Переходим к части, содержащей основной контент страницы - редактироваться будет файл index.php .
Удалите содержимое блока right и вместо него вставьте код динамического отображения постов. Либо же удалите из файла весь код и вместо него вставьте следующее:
Начало цикла, благодаря которому страница будет выводить посты, пока они не закончатся.
Отображает заголовок поста.
/ /
Дата в формате день, месяц (сокращённо), год. Теги, комментарии.
Вывод поста.
Конец цикла при условии, что записи были.
Если же материалов нет, вывести об этом соответствующую надпись и покинуть цикл.
Вывод постраничной навигации при условии, что на одной они не помещаются.
Простой с виду код глобально изменил страницу - блог стал по-настоящему динамическим. Каждый пост можно посмотреть, ссылки работают.
Дальнейшее оформление и размещение элементов зависит только от вашей фантазии и навыков вёрстки - с отображением данных можно делать всё, что угодно, но работа над шаблоном ещё не завершена.
Добавляем виджеты
Слева от основного контента в шаблоне есть панель, на ней - блок Информация (своего рода виджет) и боковое меню. Информационный блок не должен быть статичен, а так как он очень напоминает виджет, предлагаю виджетом его и сделать. Для этого необходимо:
- зарегистрировать блок виджетов;
- вывести его в нужном месте.
Теперь подробнее.
1. В каталоге темы создайте файл functions.php. В нём хранятся функции, обеспечивающие работу шаблона. Также он может содержать и другие пользовательские процедуры.
2. Внесите в следующий код:
"MySidebar", "before_widget" => "", "after_widget" => "", "before_title" => "
", "after_title" => "
",)); ?>Этот код регистрирует блок виджетов. Вместо MySidebar вы можете вписать любое другое название. Примерно такой же функцией в этом файле можно регистрировать и меню, но я решил обойтись малой кровью и этого не делать, чтобы соприкосновение с PHP сделать минимальным, а заодно и показать два разных подхода к решению одной задачи.
3. В файле sidebar.php сотрите строки:
Информация
Далее...
и вместо них запишите:
Блок Информация ожидаемо исчез, сбоку осталось только пока ещё статическое меню.
4. Зато перемены к лучшему произошли в админ-панели - раздел Внешний вид обзавёлся подпунктами Виджеты и Меню . Перейдите в первый. Откройте его и посмотрите: внутри появился зарегистрированный в файле functions.php блок (у меня это MySidebar).
5. Чтобы воссоздать информационный блок, перетащите на сайдбар виджет Текст , в поле Заголовок введите Информация , в поле Текст - код
Мы предлагаем Вам праздничные скидки. Далее...
6. Обновите страницу блога - блок удалось воссоздать практически один в один (мелкие нюансы меняются в файле style.css и заострять на них внимание я не буду).
Адаптируем меню
Вторая часть боковой панели - вертикальное меню. Его тоже нужно переделать из статического в динамическое, чтобы редактировать затем прямо из админки.
1. Удалите огромный вложенный список меню в файле sidebar.php и вместо него введите код:
2. В панели управления WordPress откройте Внешний вид -> Настроить -> Меню , нажмите кнопку Добавить меню, назовите его так, чтобы имя в админ-панели совпадало с именем в коде страницы sidebar.php (у меня это left_menu ) и добавьте все необходимые пункты.
3. Сохраните изменения, обновите страницу и убедитесь, что динамическое меню левой части сайта работает и отображается правильно.
Код страницы sidebar.php по сравнению с исходным сильно уменьшился и в итоге стал таким:
Меню
Фактически статичной осталась только надпись Меню . И то потому, что меняться вряд ли будет, хотя и её легко можно «оживить», например, реализовав этот блок в виде ещё одной области виджетов и добавив на него блок Произвольное меню, но это, если внимательно читали статью, вы можете теперь легко сделать самостоятельно.
Работаем с файлом footer.php
Научились создавать элементы меню, создали страницу о блоге и узнали какие страницы должны быть на сайте.
В сегодняшней части урока мы познакомимся с виджетами бокового меню и постараемся сделать привлекательное расположение боковой колонки. Так же пробежимся по остальным элементам настроек, из этого урока станет ясно, что настраивать особо и нечего тут. Но всё же, я не могу оставить это без внимания.
Начнём работать с шаблоном.
Настройка шаблона wordpress
Для начала нужно зайти в панель управления, и попасть во внешний вид — настроить.
После этого мы попадаем в панель настройки шаблона, здесь мы и поработаем. В этом пункте можно увидеть:
Свойства,
Разметка,
Изображения заголовка,
Фоновое изображение,
Статическая главная страница.
Для начала нас интересует ВИДЖЕТЫ . Зайдём в него… В этом пункте нас интересует ГЛАВНАЯ БОКОВАЯ ПАНЕЛЬ. В ней нужно удалить СВЕЖИЕ ЗАПИСИ, потому что они у нас будут отображаться на главной (дублировать контент нет смысла).
Виджет АРХИВЫ так же нам не нужен, потому что у нас нет статей на несколько лет, соответственно удаляем.
МЕТА тоже удалим, это нам не понадобится, хотя подумайте, если вам нужен, можете оставить. Но я для себя его удалю, так как мне он не понадобится.
Следующее, что мы будем редактировать — СВОЙСТВА САЙТА , зайдите в этот пункт.
Тут достаточно просто, введите название и краткое описание. Если вы не хотите, чтобы описание выводилось, оставьте поле пустым.
Переходим к следующему. ЦВЕТА
Тут просто, выбирается цвет фона и цвет отображения ссылок. Если вам не нравится синий цвет ссылок, легко можно поменять его на любой другой.
Так же, выбор цветовой схемы. Тёмная и Светлая, но я не советовал бы использовать тёмную тему, чтение с таких тем нагружает глаза.
ИЗОБРАЖЕНИЕ ЗАГОЛОВКА . В теме несколько заголовков, как вы наверное могли уже заметить, они меняются при обновлении. Можно вставить собственные заголовки, для этого нужно загрузить файлы размером 1000 пикселей ширины на 288 высоты.
Остальные элементы можно не трогать. Фоновое изображение можно установить по вкусу, если вас не устраивает однотонный цвет. Меню можно не трогать, потому что у нас уже есть горизонтальное. Статическая главная страница, оставляйте без изменений, по умолчанию стоит показ последних статей, статическая страница будет выводиться на главной, без изменения.
На сегодня мы завершили пробежку по шаблону, вот такая короткая получилась статья, надеюсь информация стала полезной для новичка в создании своей личной странички в интернете. В следующей статье рассмотрим защиту блога двумя важными плагинами, которые обязательно должны стоять.
Подписывайтесь на обновления статей, чтобы не пропускать новых уроков по системе WordPress.
До скорых встреч.
С уважением С.Васильев
В этой статье мы начнем со смены внешнего вида нашего блога. Однако прежде чем начать, рекомендую ознакомится с темой WordPress и на ее основании, подобрать свой подходящий шаблон. В интернете есть очень много сайтов, которые предлагают как платные, так и бесплатные шаблоны для движка . Думаю найти их не составит труда, намного сложнее будет подобрать подходящий шаблон. После того, как вы выбрали шаблон, скачайте его к себе на компьютер. Хочу также сказать, что все шаблоны хранятся в архиве zip и в дальнейшем их распаковывать не надо. В таком сжатом архиве они загружаются на ваш хостинг.
Теперь переходите в административную панель управления своим , там заходите в меню «Внешний вид » —> «Темы «. Там вы увидите шаблоны, которые были установлены на ваш блог. В верху есть вкладка «Установить темы «, нажмите на нее. Перед вами откроется форма поиска шаблонов. Она предлагает подобрать шаблоны по цвету, колонкам, ширине, функциям, а также можно посмотреть более свежие, избранные или недавно обновленные шаблоны. Лично я не рекомендую пользоваться такой формой поиска, так как она находит только не переведенные шаблоны.
Сейчас нажимаем на вкладку «Загрузить «. Там предлагают нам выбрать файловый архив шаблона, который находится у нас на компьютере. Выбираем этот файл и нажимаем «Установить «. После установки нам предложат активировать шаблон, но вы сразу это не делайте. Вновь вернитесь в меню «Внешний вид » —> «Темы «. Там должна появится ваша новая установленная тема оформления. Под ней нажимаем на вкладку «Посмотреть «.
Теперь нам нужно наглядно посмотреть, как наш новый шаблон будет отображаться на блоге, не будет ли каких-то ошибок, пустых мест или неправильное отображение каких-либо элементов. Если вы не заметили никаких ошибок, то только тогда можете активировать свой шаблон. Такую процедуру всегда нужно проделывать перед активацией нового шаблона, чтобы в дальнейшем наблюдалась его нормальная работа.
Все, теперь ваш шаблон полностью заменен! При надобности, можете немного подредактировать свой шаблон. Для этого заходите в административную панель, в меню «Внешний вид» и в параметры темы. В зависимости от шаблона, там вы можете скрыть или поставить заголовок, скрыть или отобразить галерею анонсов своих статей, задать стиль блоков, вставлять код и редактировать его для отображения рекламы на блоге и так далее.
Если в вашем шаблоне WordPress есть какие-то ненужные отображения элементов, а данный шаблон вы из-за этого не хотите удалять, тогда вам предстоит отредактировать нужные файлы вашего шаблона. Вы должны понимать, что все шаблоны состоят из множества файлов, которые отвечают за отображение и работу отдельных элементов блога. Узнать эти основные файлы вы можете в статье . Чтобы например удалить ненужные записи и ссылки в подвале блога, вам придется их удалять в файле footer.php , который отвечает именно за этот элемент.
И так, мы установили и настроили свой шаблон , однако такой шаблон могут использовать тысячи блогов, что лишает уникальности вашему блогу. Согласитесь, будет плохо если ваш веб-дизайн будет одинаковым по сравнению с другими блогами. Посетители на таких блогах будут немного путаться. Вот даже сами возьмите и представьте хоть на минутку, что было бы если все сайты имели один общий одинаковый шаблон. Вот именно!!! Они бы потеряли свою уникальность. Сама уникальность выделяет ваш блог от других и делает его более запоминающимся для своих читателей.
Я вам рекомендую на первых порах пока временно установить бесплатный шаблон с интернета. Только после того, как вы хотя бы немного познакомились с такой темой, как веб-дизайн, можете тогда при наличии хороших денег, заказать платную тему у веб-дизайнера.
Однако если вы решили полностью погрузится в , то в дальнейшем можете не только создать свой уникальный шаблон, но и создавать много других классных шаблонов для продажи. Вообщем, ваш блог или сайт должен быть уникальным и выделятся среди других, а каким способом этого достичь, уже решайте сами. Удачи!!!