Главная›Тарифы›Как сделать свой шаблон на wordpress. Создание различных тем WordPress вручную и с помощью программ. Дублирование файлов шаблонов
Как сделать свой шаблон на wordpress. Создание различных тем WordPress вручную и с помощью программ. Дублирование файлов шаблонов
Создать шаблон для WordPress проще, чем можно подумать. Для этого не надо обладать огромным опытом разработки дизайна или программирования сайтов. В этой статье расскажем об основах создания с нуля собственных тем WordPress.
Зачем вообще может понадобиться создание собственного шаблона WordPress, когда можно воспользоваться имеющимися в базе заготовками? Вот какие причины могут подтолкнуть к этому:
Можно получить уникальный сайт или лэндинг, отличный от конкурентов. Учитывая миллионы блогов, построенных на этой CMS, каждый типовой дизайн используется как минимум сотню раз.
Полная свобода действий на этапе разработки. Можно добавлять собственный функционал с нужными именно вам рабочими элементами.
Можно сделать несколько видов и предоставить посетителям возможность переключаться между разными темами, что повысит интерес и лояльность к веб-ресурсу.
Простота работы на Вордпресс делает ее доступной для многих (в помощь будут видео-уроки в интернете). А значит, собственноручная разработка главной или создание дочерней темы позволит сэкономить деньги на привлечении сторонних дизайнеров и программистов.
Можно воспользоваться возможностью дочерних тем – когда корректировки вносятся в дублеры таблицы стилей style.css, а главный файл при этом остается нетронутым. Это позволяет быстро отменить изменения, если они окажутся неудачными, а также не терять наработки при обновлении основной темы.
Краткая инструкция
Конечно, пройти полное обучение тому, как создать шаблон страницы, с помощью одной статьи не получится. Для начала важно понять основы – как делаются самые простые темы. На основе них уже можно заняться «творчеством» и создать лэндинг или сайт по своим желаниям. Сейчас дадим вам краткую шпаргалку с поэтапными инструкциями – она поможет понять, как происходит создание сайта.
Шаг первый: подготовительные работы
Перед началом работ надо убедиться, что у вас есть текстовый редактор (самым простым является Блокнот или Nodepad++, тем более скачать их можно бесплатно). Следующий шаг – установка движка WordPress и набора Denwer на локальный компьютер. Денвер – это пакет важных инструментов для программистов. С помощью них значительно облегчается и ускоряется процесс разработки и внесения изменения сайтов. Как его устанавливать, подскажет это видео:
Шаг второй: создают папку новой темы
Переходим в нужную директорию. Она чаще всего имеет следующий путь: . Здесь хранятся все темы – и стандартные, и произвольные. Заходим в нее создаем новую папку. Называем ее, например, «MyFirstTheme».
Теперь переходим в новую папку и обязательно добавляем два файла, сделанных через Nodepad++ или другой редактор. Это index.php и style.css. Пока эти документы пусть останутся пустыми, потом мы еще займемся их наполнением. Еще добавьте в «MyFirstTheme» сюда папку images. куда можно будет добавлять картинки для оформления шаблона.
В последствии в «MyFirstTheme» можно добавлять шаблоны для отдельных частей сайта: боковой панели (sidebar.php), сайта (header.php), записей на страничках (single.php), комментариев (comments.php) и пр. Набор дополнительных файлов зависит от структуры, которую вы запланируете для своего веб-ресурса.
Шаг третий: наполнение index.php
Первое, что надо сделать – заполнить индексный файл (index.php). Вот пример самого простого кода, по которому у сайта будет четыре области: header, main, sidebar и footer.
Site Title
В файле можно прописать любые элементы, которые вы хотите видеть у себя на сайте. Больше информации о прописывании кода index.php для создания тем в WordPress можно получить из видео:
Шаг четвертый: заполняем и style.css
Теперь надо открыть style.css, добавить и заполнить следующие поля (вписать вместо *** собственную информацию о сайте и владельце). Введенные данные будут отображаться в админке.
/*Theme Name: ***
Theme URI: http:// ***
Author URI: http:// ***
Description: ***
В последствии в этот файл можно будет вводить разные данные и правила, определяющие внешний облик страниц. Например:
(информация в /**/ — это комментарии, а не части кода)
На данном этапе пока рано задавать строгие параметры стилей, но при дальнейшей работе с файлом вам пригодится этот видеоурок:
Шаг пятый: разбиваем файлы
Все элементы, указанные в index.php следует продублировать отдельными файлами. В шаге первом в примере помимо главной части main были указаны header, sidebar и footer – следовательно, для них создаем свои документы в формате.php.
Например, создаем файл header.php, открываем index.php. находим соответствующий участок кода и вставляем его в новый файл. Это будет:
Site Title
Тоже самое проделывается для остальных частей. Это надо сделать для более легкой навигации. Когда элементов будущего сайта будет много, то отдельные файлы помогут лучше ориентироваться для проверки или внесения изменений.
Чтобы главный индексный файл был согласован с дополнительными, в index.php под блоками для каждой части надо прописать следующее:
Ниже приведен список стандартных файлов шаблонов, используемых WordPress. Их можно не использовать или добавлять свои разделы:
Header – стиль шапки вашего сайта.
Comments – шаблон для создания комментариев.
Home – тема для главной страницы.
Page — определяет тему, если создадите отдельные странички на сайте
Category – шаблон для разбивки на категории
Date – определяет стиль вывода даты-времени.
Archive – шаблон для архивного раздела со старыми материалами.
Search – файл, в котором указываются параметры для поиска на сайте.
404 — шаблон для страницы, на которой сообщается об ошибке 404 Not Found.
Footer – определяет стиль подвала вашего сайта.
Когда впоследствии вы будете дорабатывать каждый элемент, понадобится наглядный видеоурок. Вот несколько подборок, которые могут вам помочь:
Шапка в header.php:
Добавление контента:
Стилизация комментариев:
Подвал на сайте:
Как можно вносить изменения без опасений
Когда надо вносить изменения на страницы сайта, то есть риск что-то неправильно прописать и не суметь «откатить» назад. Также может случиться так, что внесения в таблицу стилей исчезнут при обновлении главной темы.
Чтобы этого не произошло, можно создать дочернюю тему WordPress (подтему) – это дублер файла стилей style.css, не затрагивающий главный файл (изменения в одном не отменяют обновления в другом).
Создание дочерней темы WordPress не составит никакого труда. Надо сделать новую папку в основном каталоге C:\WebServers\home\localhost\www\НАЗВАНИЕ_ЗАДАННОЕ_ПРИ_УСТАНОВКЕ\wp-content\themes
. В новой папке делаем свой файл style.css с вот таким содержимым:
Theme Name: НАЗВАНИЕ ТЕМЫ
Template: НАЗВАНИЕ ПАПКИ В ДОЧЕРНЕЙ ТЕМОЙ
Theme URI: ЗАПОЛНИТЬ
Description: ЗАПОЛНИТЬ
Author URI: ЗАПОЛНИТЬ
/* импортируем стили родительской темы */
@import url(«../НАЗВАНИЕ/style.css»);
/* Свои дополнительные стили */
Foo{ color:red; }
Теперь можно в админке зайти во «Внешний вид›Темы» и активировать дочерний шаблон. В дальнейшем можно работать в новом файле. В дополнение небольшая видео-презентация на тему дочерних шаблонов:
Только следует учесть, что вордпресс генерирует некоторые классы, которые должны присутствовать в таблице стилей. К примеру классы aligncenter, alignleft и alignright
служат для выравнивания изображений и блочных элементов, и их нужно включить в свою таблицу стилей (можно скопировать из таблицы стилей дефолтной темы):
Следующие классы используются для выравнивания изображений, которые имеют подписи (можно скопировать из дефолтной темы, в дальнейшем при необходимости поправить):
Кроме того, существует еще несколько классов WordPress, которые необязательно описывать в таблице стилей, но, т.к. WordPress генерирует страницы с их использованием, можно и им задать стиль:
.categories {...} .cat-item /* Этот класс присваивается всем категориям */} .current-cat {/* стиль текущей категории */} .current-cat-parent {/* стиль для предка(ов) текущей категории */} .children {/* класс для потомка */} .pagenav {/* постраничная навигация */} .page_item {/* любой элемент списка */} .current_page_item {/* этот класс присваивается в списке страниц к текущей активной странице */} .current_page_parent {/*класс для родительской страницы по отношению к текущей */} .current_page_ancestor {/* любая страница верхних уровней по отношению к данной */} .widget {/* все виджеты обворачиваются в этот класс */}
В процессе верстки используйте блоки и стили к ним, как это определено в скринах в начале статьи. Это не обязательно, но очень даже желательно.
К примеру в дальнейшем мы подключим поисковую форму на сайт через спец. тег wordpress, в результате чего wordpress выведет такую форму:
Поэтому учитываем это при верстки темы.
И последнее, что нужно добавить в style.css это информацию о себе любимом и о созданной теме. Информация размещается в начале файла в коментах:
/* Theme Name: Придумайте уникальное имя темы Theme URI: http://ссылка-на-домашнюю-страницу-темы Description: Описание темы Author: Автор темы Author URI: http://ссылка-на-страницу-автора Template: название-темы-предка Tags: теги темы - только из списка предлагаемого wordpress.org Version: версия Ну и здесь текст лицензии */
Также не забудьте сделать screenshot.png
и положить его в папку с шаблоном (в корень). Информация, размещенная таким образом в таблице стилей, будет отображаться в админке в разделе Управление «темами»
. Сверстанный шаблон тестируем в браузерах, если все норм, можно идти далее.
Код страниц сверстанного шаблона приводить не буду, т.к. он достаточно большой, вы его просто скачайте , далее будем работать с ним.
Принцип работы wp-темы
:
Если вы откроете папку темы по умолчанию (wp-content/themes/default), вы увидите множество файлов PHP (файлы темы) и одного файла style.css. Когда мы просматриваем блог, WP подключает файлы темы (index.php <
На этом предварительная подготовка закончена и мы можем перейти к созданию темы из имеющегося исходного материала.
Шаг 1:
Для начала в директории тем вордпресса (wp-content/themes) создайте папку с именем нашей темы. Пусть это будет ruseller_lessons
. Затем из папки темы по умолчанию (wp-content/themes/default) скопируйте файлы comments.php, search.php
и 404.php
в папку нашей темы. Эти файлы отвечают за комментарии и поиск на блоге. Затем в ruseller_lessons
скопируйте таблицу стилей style.css
нашего шаблона, screenshot.png (300x225)
и папку images
.
Теперь файлы нашего шаблона нужно "распилить", т.е. вытащить в отдельные файлы footer, sidebar и header. Схема показывает упрощенный вид файла index.php
с метками, согласно которым будем его пилить:
Шаг 2
- Header.php
Открываем index.html
и вырезаем все, что находится до коментария , создаем новый файл header.php
и вставляем в него вырезанный код, сохраняем в директории нашей темы ruseller_lessons
:
index.html
My Blog
Blog Description
Home
About
Portfolio
Links
Contact
Теперь идем в папку с дефолтной темой, открываем header.php
и копируем оттуда теги , ,
, and
и ими заменям соответствующие строки в нашем header.php
.
Затем все теги
, находящиеся id="nav"
(список страниц в верхней части блога) заменям на функцию вордпресса
В итоге получаем:
" type="text/css" media="screen" /> " />
/">
Шаг 3 - Sidebar.php
Возращаемся к файлу index.htm. Первым делом удаляем всю форму поиска, затем вырезаем из него все от
до sidebar.php
и сохраняем его в директории нашей темы. Теперь в полученном коде заменяем все, что между тегами
вызовом сайдбаров, получаем следующий код:
Таким образом мы вызываем 2 сайдбара. Если вы смотрели Sidebar.php
дефолтной темы, то заметили, что кода там гораздо больше. Дело в том, что там просто прописано дополнительное условие, которое по умолчанию выводит архив и категории, в случае, если админ не подключил ни одного виджета к сайдбару. Мы это условие прописывать не будем.
Чтобы наши сайдбары заработали, их необходимо зарегистрировать. Для этого в директории темы создаем файл functions.php
и в нем пишем:
Осталось подключить форму поиска. Сделать это можно либо из админки путем добаления виджета в один из сайдбаров, а можно вызвать ее в sidebar.php
, что мы и сделаем. В самом начале добавляем:
...............................................
Шаг 4 - Footer.php
Возращаемся к файлу index.html и вырезаем из него все от
По нашему шаблону здесь же мы должны вывести последние записи блога (Recent Posts) и последние коментарии (Recent Comments). Последние записи будем выводить в количестве 5 штук - showposts=5
. Заменям все внутри
:
" rel="bookmark" title=" ">
Вывод последних коментариев сделаем с помощью плагина simple_recent_comments.php , скачайте его и положите в папку нашей темы. Теперь в нужном месте его нам нужно вызвать (заменям содержимое блока
):
Recent Comments", ""); } ?>
Шаг 5 - Index.php
Все что осталось в index.html
сохраняем как index.php
в папку с нашей темой, затем подключаем вызов header
, sidebar и footer
:
Oct13
Sample Blog Entry
News3 comments
Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore eu feugiat nulla facilisis at vero eros et accumsan et iusto odio dignissim qui blandit praesent luptatum zzril delenit augue duis dolore te feugait nulla facilisi. Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Read more...
Previous EntriesNext Entries
Шаг 6 - Вывод записей блога на странице index.php
Следующий рисунок демонстрирует принцип вывода записей блога. Сначала идет проверка, есть ли сообщения в базе, если нет выводит "Not Found". Если есть, выводит в цикле while
.
Открываем наш index.php и заменям статичный текст между
..
функциями (тегами) wordpresspost date, title, category, comments, next и previous
. Ориентируясь на рисунок выше получаем:
">
Ничего не найдено
Теперь тема должна уже быть доступна из админки в списке тем, ее можно активировать и посмотреть, что вышло.
Мы использовали теги Wordpress:
the_time("M"), the_time("j") -
вывод месяца и дня соответственно the_permalink()
- отображает постоянную ссылку записи the_title_attribute()
- заголовок текущей записи. the_title()
- заголовок записи или страницы the_category(", ")
- ссылку на категорию или категории, к которым принадлежит запись comments_popup_link -
выведет ссылку для комментариев во всплывающем окне если comments_ popup_script() используется, иначе выводит обычную ссылку на комментарии. the_content
- выводит содержание текущей записи. Если используется тег то сообщение показывается только до (только на главной странице, на странице записи будет показываться полностью). next_posts_link
- ссылка на предыдущие сообщения. previous_posts_link -
ссылка на следующие сообщения.
Шаг 7- Single.php Этот файл мы создадим из только что законченного index.php
, немного изменив его:
"
Pages: ", "after" => "
", "next_or_number" => "number")); ?>
Ничего не найдено
wp_link_pages
- Выводит ссылки на странице в многостраничном сообщении (при использовании ). comments_template()
- Подключает файл шаблона comments.php
из текущей папки темы previous_post_link(" %link"), next_post_link("%link")
- выведет заголовки предыдущей и следующей записи
Шаг 8 - page.php
Этот шаг проще предыдущего. Файл single.php
сохраняем как page.php
. Удаляем из page.php
вывод даты, комменты, next/previous:
"
Pages: ", "after" => "
", "next_or_number" => "number")); ?>
Ничего не найдено
На этом можно и закончить. Основные файлы темы мы собрали. Вероятно вы заметили, что в дефолтной теме больше файлов. Например archive.php
, он не является обязательным. Однако если мы подключим виджет "Архивы" или "Календарь" в сайдбаре и перейдем в какой - нибудь архив по дате, записи по выбранной дате выведутся на индексной странице
, поэтому вполне можно обойтись без archive.php
:)
Финал
. Иногда нужно/полезно вывести на странице заголовки всех записей. Для этой цели воспользуемся тегом wordpress query_post
:
/* Template Name: Archives */ ?>
" title="">
|
query_posts("showposts=-1");
- выведет все записи. Сохраним это в файл archives.php
. Обратите внимание на комментарии в начале кода Template Name: Archives
, он здесь обязателен (далее вы поймете почему)
Идем в админку и создаем новую страницу. Указываем только заголовок и указываем в "Атрибутах" шаблон Archives
, сохраняем страницу. И теперь на этой странице у нас будут выводиться все записи по шаблону archives.php
, который мы описали чуть выше:
На сегодня это все. Спасибо за внимание.
P.S собранная тема тестировалась на WordPress 2.8.5. Конечный результат скачать можно . Аналогично попробуйте создать свою тему, уверен, у вас получиться!
Статья сборная, источники: http://www.webdesignerwall.com, http://themetation.com, http://codex.wordpress.org
Эта статья поведает вам о том, как создать самую простую тему для WordPress. Хотя Codex и предоставляет обширную документацию по этому вопросу, но мне она кажется несколько сложной для новичка. Поэтому в данном «туториале» я расскажу принципы работы тем для WordPress и покажу как адаптировать под них сырой HTML-шаблон. При этом от вас не требуется знание PHP, но хорошо если вы владеете Photoshop и CSS для создания дизайна.
1. Frontend блога
До того, как мы начнём, давайте взглянем на стандартную тему WordPress и разберёмся из чего она состоит. Отметим элементы (шапка, заголовок поста, форма поиска, навигация, подвал и т. д.).
Стандартный Frontpage (index.php
)
Стандартный Single (single.php
)
2. Photoshop-макеты
Основываясь на внешнем виде стандартной темы, разработайте Photoshop-макеты для вашего блога. Для примера я использую GlossyBlue — одну из моих бесплатных тем. Скачайте demo.zip , чтобы увидеть готовый файл Photoshop.
3. HTML и CSS
Когда PSD-дизайн готов, создайте HTML+CSS шаблон каждой страницы. Следуя шагам этой инструкции, вы можете использовать мои HTML файлы GlossyBlue из demo.zip
. Распаковав архив, вы увидите index.html, single.html
и page.html
. Далее я буду использовать их для превращения в шаблон.
Зачем сперва создавать статический HTML?
Главным образом это нужно потому, что это значительно упростит процесс разработки. Обычно я создаю HTML файл для каждого шаблона, проверяю их валидность (HTML и CSS разметку) во всех браузерах. После этого остаётся лишь вырезать и вставить код WordPress. Так что можно уже не беспокоиться об ошибках в HTML или CSS.
4. Как работает тема WordPress
Если вы перейдёте к папке стандартной темы (wp-content/themes/default
), то увидите много php-файлов (называемых файлами шаблонов) и один файл style.css
. Для формирования страницы WordPress обычно использует несколько файлов шаблонов (index.php
, header.php, sidebar.php,
и footer.php
).
Подробнее в Codex: «Архитектура сайта» и «Иерархия шаблонов» .
5. Дублирование файлов шаблонов
Скопируйте папку HTML
из GlossyBlue
в папку wp-content/themes
. После этого перейдите в директорию темы default
, скопируйте comments.php
и searchform.php
в папку glossyblue
.
6. Style.css
Перейдите в папку темы default
, откройте файл style.css
. Скопируйте закомментированный в начале файла текст и вставьте в style.css
темы GlossyBlue
. Если хотите, можете изменить название и данные об авторе.
7. Разделение файлов
Теперь нам нужно понять где разделить HTML-файлы на части: header.php
, sidebar.php
, и footer.php
. На скриншоте ниже видно упрощённую версию моего index-файла, а также принцип его деления.
8. Header.php
Откройте index.html
. Вам нужно вырезать участок от верха до места, где заканчивается , вставить его в новый php-файл и сохранить как header.php
. Перейдите в папку темы default
, откройте новый header.php
. Скопируйте и замените теги, где этого требует php-код: title, link, таблицы стилей, h1 и div class=description.
Меню навигации
(wp_list_pages
) Замените тэги li
в ul id=nav
на ;
9. Sidebar.php
Вернитесь к index.html
, вырежьте код с того места, где начинается form id=searchform
и до закрытия тега div id=sidebar
, поместите его в новый php-файл и сохраните как sidebar.php
.
Замените form id=searchform
со всем содержимым на .
Замените теги li
категорий на
Замените теги li
архивов на
10. Footer.php
Вернитесь к index.html
. Извлеките оттуда код от div id=footer
включительно с тегом div id=footer
и до конца /html
затем поместите в новый footer.php
.
Недавние записи
Тут я использовал query_post для отображения 5 последних записей в блоге.
«Последние комментарии»
«Последние комментарии» сгенерированы плагином (включён в папку темы)
11. Index.php
Теперь в вашем index.html
должен остаться только div id=content
. Сохраните файл как index.php
. Впишите строки: get_header
, get_sidebar
, и get_footer
в том порядке, как они встречаются в шаблоне.
12. Разбор цикла
Цикл последовательно отображает записи блога в зависимости от ваших настроек. Скриншот ниже иллюстрирует его работу. Изначально цикл проверяет наличие записей и если таковых не находит, то выдает сообщение «Not Found»
.
13. Копирование цикла
Перейдите к директории темы default
, откройте index.php
. Скопируйте цикл из стандартного index.php
в свой — между div id=content../div
. После этого замените статический текст тегами шаблона WordPress: post date, title, category, comments, next и previous link.
14. Предпросмотр темы
Поздравляю! Вы создали публичную часть (основную часть шаблона). Теперь зайдите в административную панель, перейдите к закладке Design
, вы должны увидеть тему GlossyBlue
. Активируйте её и перейдите к публичной части, чтобы посмотреть результат в действии.
15. Single.php
Пришло время создать шаблон single.php
. Если хотите, можете повторить шаги, перенося код из стандартной темы. Но мне кажется более простым использовать только что созданный index.php
, сохранив его как single.php
. Откройте single.php
из стандартной темы и скопируйте теги шаблона в нужные места. Далее подключите comments_template
. На следующем скриншоте отображены внесенные мною изменения:
16. Page.php
Теперь новый single.php
сохраните с названием page.php
. Уберите дату записи, форму комментариев, ссылки следующий/предыдущий. Вот, собственно, и всё — ваш шаблон page.php
готов
.
17. Удаление файлов HTML
Удалите все файлы HTML из папки glossyblue
(они нам больше не понадобятся). Технически этого достаточно для создания базовой темы WordPress. Вы, наверное, заметили, что в стандартной теме больше PHP-файлов. Что же, на самом деле, они вам не так уж необходимы, если требуется простая тема. Например, если search.php
или 404.php
не будет в папке темы, WordPress автоматически использует index.php
для отображения страницы. Читайте Template Hierarchy для более подробного рассмотрения.
18. Шаблон страницы WordPress
А теперь последний пример — я покажу вам как использовать Page Template для создания страницы Архива, которая будет содержать список всех записей на вашем блоге (удобно для карты сайта). Скопируйте archives.php
из папки стандартной темы. Удалите ненужный код и получите что-то вроде этого:
Приветствую вас, друзья.
Сегодня мы затронем очень интересную, для многих, тему. Возможно, вы заметили, что совсем недавно я обновил дизайн своего блога, не знаю как вам, а мне очень нравится. Этот шаблон я создал буквально за несколько десятков минут, причем мне не потребовалось ни знание HTML, CSS и PHP ни информации на тему создания шаблонов.
Итак, как сделать шаблон для wordpress самому, без каких либо знаний?
Прежде чем я начну, не могу не упомянуть про различные способы создания шаблонов, чтобы картина была наиболее полная.
Способ №1
– вы изучаете HTML, изучаете структуру шаблонов. Конечно, при таком подходе есть свои плюсы, если у вас есть время и желание начните с него. Знание HTML еще ни кому не помешало.
Способ №2
– заказать шаблон у фрилансера. Если есть свободные деньги, то, обязательно, выбирайте именно этот способ. Стоимость создания качественного шаблона от 15 000 до 70 000 рублей.
Способ №3
– воспользоваться специальным программным обеспечение для создания шаблонов. Сразу уточню, это не создание однотипных шаблонов, в программе вполне возможно создать уникальный, красивый шаблон. Пример этот блог. Все зависит от вашей фантазии.
Как вы, наверно, уже поняли речь, в этой статье, пойдет о способе №3.
Встречаем, программа для создания шаблонов – (версия не имеет значения, я пользуюсь второй, по-моему, уже четвертая вышла). Программа платная, но мы с вами русские люди (вы поняли, о чем я). Я знаю, что в сети много уроков по этой программе, но я уже устал отвечать на один и тот-же вопрос своих подписчиков.
Скачиваем программу, запускаем ее.
1. В заглавном окне программы выбираем “WordPress”.
2. В окне предпросмотра появляется заготовка шаблона, конечно, вся кривая, но в процессе работы от нее и следа не останется.
3. Переходим на вкладку “Цвета и шрифты”, выбираем цветовую схему (в последующем мы ее немного подкорректируем), я люблю светло серую гамму цветов. Жмем на кнопку “Наборы шрифтов”, выбираем шрифты (я использую везде вердану).
4. Переходим на вкладку “Макет”, здесь нам предлагается выбрать количество и расположение колонок, а также расположение верхнего колонтитула (по простому хедера). Я всегда выбираю “Две колонки->Правая средняя сторона”.
5. На следующей вкладке нам предлагается выбрать фон будущего шаблона. С помощью данной вкладки вы можете создать свой или выбрать уже существующий фон.
6. Следующая вкладка предлагает нам настроить лист шаблона.
Задайте ширину листа (желательно не меньше 1000 px), его тень и границу.
7. На следующей вкладке нам предлагается настроить верхний колонтитул (хедер или шапка). Настройте колонтитул с помощью настроек.
1. Настройка ширины и высоты шапки.
2. С помощью этого меню вы можете загрузить в программу ранее заготовленный хедер, а также добавить к нему эффекты.
3. С помощью этого меню вы можете добавить на хедер стороннюю картинку.
4. Название вашего сайта и его слоган.
5. Расположение названия и слогана.
8. На следующей вкладке нам предлагается настроить меню (оно, обычно, располагается под шапкой). Выберите стиль меню и его заливку.
9. На следующей вкладке — “Статьи”, нам предлагается настроить внешний вид области расположения контента (текста, видео, картинок, таблиц). Настройте его с помощью приведенных настроек.
1. Изображение статьи (этот параметр ни на что не влияет, может оставить как есть).
2.С помощью этого меню вы сможете задать стиль области контента (с обводкой или без).
3. Настройка отображение текста внутри статьи.
4. Редактирование различных параметров области контента.
5. Настройка верхнего колонтитула.
6. Настройка нижнего колонтитула.
10. С помощью следующей вкладки — “Блоки”, вы можете настроить внешний вид боковых блоков (сайдбара).
НАСТРОЙКИ И ЭКСПОРТ ШАБЛОНА
1. Нажмите на кнопку “Файл” (находится в левом верхнем углу окна программы).
2. Выберите пункт “Экспорт->Настройки экспорта”. Перейдите на вкладку “Свойства” и укажите необходимые данные. Перейдите на вкладку “Footnote” и снимите все галочки.
3. Повторите шаг номер один. Выберите пункт “Экспорт->Тема WordPress”.
4. Экспортируйте шаблон как ZIP папку.
Все. Теперь вы знаете как сделать шаблон для WordPress своими руками. Удачи в создании.
Не забываем комментировать статью. Автор лучшего, по моему мнению, комментария (по итогам недели), получит мою платную книгу «Как продавать партнерские товары в интернете и получать 200% прибыли» совершенно бесплатно.
ВИДЕО-УРОК “Как сделать шаблон для WordPress без знаний HTML?
Этот туториал покажет, как создать новый шаблон страницы для шаблонов 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
.
Откройте этот файл для редактирования. Скопируйте только код контента, так как вы уже добавили хедер и футер (ниже приведен пример данного кода, ваш код может выглядеть иначе):
Вставьте скопированный код в файл 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
в его коде. В результате ваш код будет выглядеть следующим образом:
Сохраните изменения и проверьте вашу новую страницу. Теперь она должна содержать пользовательские посты “Наша команда” (“Our Team”) с дизайном страницы Отзывов (Testimonials).
Популярное в рубрике:
Самсунг Галакси перезагружается сам по себе — Решения Galaxy note...