Главная›Услуги›Как создать wordpress шаблон, создаем wordpress тему. Как создать шаблон для презентации в Powerpoint самостоятельно
Как создать wordpress шаблон, создаем wordpress тему. Как создать шаблон для презентации в Powerpoint самостоятельно
Только следует учесть, что вордпресс генерирует некоторые классы, которые должны присутствовать в таблице стилей. К примеру классы 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. Каждый способ несет в себе плюсы и минусы. Но прежде чем начать, коротко о том, что такое страницы и чем они отличаются от записей.
В WordPress можно создавать страницы (page) и записи (post). Отличаются они тем, что записи: попадают в ленту на главной странице; для записей указываются категории; записи не могут быть древовидными, а страницы: используются для такого содержимого как "Обо мне", "Контакты", "Карта сайта"; не имеют категорий, а имеют древовидную структуру. Записи обычно предназначены для хронологической информации (по времени добавления), а страницы для древовидной структуры не зависимой от времени. Для примера, эта статья опубликована как "запись" в рубрике "Кодекс", а ссылки в меню шапки ведут на страницы: Функции .
Страницы похожи на записи - они расположены в одной таблице базы данных и данные у них почти одинаковы: заголовок, текст, дополнительные поля и т.д. И то и другое - это записи, но разных типов: страницы древовидные и организуются путем создания родительских и дочерних страниц, а записи объединяются рубриками и метками. В WordPress можно создавать дополнительные типы записей древовидные или нет.
Создание страниц в WordPress
Часто нужно создать отдельный шаблон страницы, чтобы вывод информации отличался от остальных страниц. Создавая шаблон страницы в WordPress, можно совершенно изменить страницу: удалить сайдбар, подвал, шапку, можно изменить страницу до неузнаваемости. Например, на этом сайте так изменяется страница на которой выводятся коды файлов WordPress .
Способ 1: шаблон страницы через файл с произвольным названием и подключением его в админ-панели (классический способ)
Это самый распространенный способ создать шаблон страницы в WordPress. Для этого нужно создать.php файл, например, tpl_my-page.php в папке темы и в самом начале файла вписать пометку, что созданный файл является шаблоном для страниц:
Теперь при создании страницы в админ-панели в блоке «Свойства страницы» мы сможем выбрать "шаблон":
С версии WordPress 4.7. такие шаблоны страниц можно создать для любого типа записи, а не только для page. Для этого дополните комментарии строкой: Template Post Type: post, page , где post, page - это названия типов записей к которым относится шаблон.
/*
Template Name: Мой шаблон страницы
Template Post Type: post, page, product
*/
Преимущества:
Создав один шаблон, мы можем удобно применять его для разных страниц. Например, можно создать шаблон без боковой панели и использовать его на разных страницах.
Можно получить только записи с указанным шаблоном. Например, можно вывести все страницы с шаблоном «Услуги» (файл servises.php). Иногда это удобно. Название файла шаблона хранится в метаполе _wp_page_template , поэтому чтобы вывести страницы с указанным шаблоном нужно создать запрос по метаполю (см. WP_Query).
Недостатки:
После создания файла шаблона в папке темы, нужно зайти в админ-панель и установить шаблон для страницы. При разработке это не всегда удобно. Поэтому если подразумевается использовать шаблон только для одной страницы, используйте второй метод.
Как это работает:
Когда вы заходите в админ-панель на страницу редактирования записи древовидного типа, WordPress просматривает все файлы шаблона на наличие в них строки:
Template Name: ***
Строка может располагаться где угодно и как угодно в файле.
Все файлы с подобными строками собираются и выводятся в выбор шаблона в блок "Атрибуты страницы".
При публикации страницы, в произвольное поле _wp_page_template записывается название файла шаблона или default , если шаблон не указан:
Далее, когда пользователь посещает страницу, WordPress проверят метаполе _wp_page_template , если шаблон установлен, то используется файл шаблона. В противном случае поиск шаблона страницы продолжается по иерархии .
Способ 2: шаблон страницы через файл с конкретным названием (иерархия файлов шаблона)
При создании страницы ей устанавливается ярлык (слаг, альтернативное название). Он используется в УРЛ страницы. И его можно изменить:
Для создание шаблона этим способом, вам нужно узнать слаг страницы и создать файл в папке темы. Допустим, наш слаг как на картинке равен contacts , тогда создадим в теме файл page-contacts.php . и заполним его нужным кодом (можно скопировать содержимое из файла шаблона page.php и отредактировать под себя). Все, теперь при посещении страницы мы должны увидеть новый шаблон. Аналогично можно взять ID (пусть 12) страницы и создать файл page-12.php .
Достоинства:
Нет необходимости заходить в админ-панель и устанавливать файл шаблона. Шаблон начинает работать сразу после создания файла. Удобно при разработке.
Недостатки:
Шаблон создается только для одной, конкретной страницы. Зависит от слага страницы, если он изменится шаблон работать не будет. Если использовать ID, то зависимость от слага пропадает, но становится непонятно в файла темы, к какой странице относится шаблон (если несколько шаблонов с ID).
Практически бесполезен при написании шаблонов, а тем-более плагинов. Его можно использовать, когда правишь свой сайт, в котором слаг или ID страницы известны заранее.
Как это работает:
WordPeress подбирает какой файл использовать в следующем порядке (файлы должны быть в корне темы):
{любое_название}.php (когда используется шаблон страницы)
page-{ярлык_записи}.php
page-{ID_записи}.php
page.php
singular.php
index.php
Способ 3: шаблон страницы через фильтр "template_include" (коддинг)
Это продвинутый способ, он более сложный, но вместе со сложностью он открывает широкие возможности. С помощью этого способа можно задать шаблон любой странице, записи, категории, любой публикации на сайте или вообще группе любых публикаций. Смотрите примеры с описанием:
// фильтр передает переменную $template - путь до файла шаблона.
// Изменяя этот путь мы изменяем файл шаблона.
add_filter("template_include", "my_template");
function my_template($template) {
# аналог второго способа
// если это страница со слагом portfolio, используем файл шаблона page-portfolio.php
// используем условный тег is_page()
if(is_page("portfolio")){
if ($new_template = locate_template(array("page-portfolio.php")))
return $new_template ;
}
# шаблон для группы рубрик
// этот пример будет использовать файл из папки темы tpl_special-cats.php,
// как шаблон для рубрик с ID 9, названием "Без рубрики" и слагом "php"
if(is_category(array(9, "Без рубрики", "php"))){
return get_stylesheet_directory() . "/tpl_special-cats.php";
}
# шаблон для записи по ID
// файл шаблона расположен в папке плагина /my-plugin/site-template.php
global $post;
if($post->ID == 12){
return wp_normalize_path(WP_PLUGIN_DIR) . "/my-plugin/site-template.php";
}
# шаблон для страниц произвольного типа "book"
// предполагается, что файл шаблона book-tpl.php лежит в папке темы
global $post;
if($post->post_type == "book"){
return get_stylesheet_directory() . "/book-tpl.php";
}
return $template;
}
Такой код нужно разместить в файл темы functions.php или в плагин, или подключить как-то еще. Как видно из примера во время фильтра template_include уже работают условные теги, установлены глобальные переменные: $wp_query , $post и т.д.
Достоинства:
Можно установить шаблон для любой страницы или группы страниц. Практически полный карт-бланш в действиях.
Можно создать шаблон при написании плагина.
Недостатки:
Необходимость писать код и отдельно его подключать (например, в functions.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" />
Мы сделали динамическим блок
Код вызывает функцию, возвращающую языковые атрибуты в контейнер.
">
Вместо того, чтобы прописывать кодировку константой, мы вызвали функцию, которая берёт значение из настроек 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
и вместо него вставьте код динамического отображения постов. Либо же удалите из файла весь код и вместо него вставьте следующее:
">
/ /
А здесь нет ничего:(404
Начало цикла, благодаря которому страница будет выводить посты, пока они не закончатся.
">
Отображает заголовок поста.
/ /
Дата в формате день, месяц (сокращённо), год. Теги, комментарии.
Вывод поста.
Конец цикла при условии, что записи были.
Если же материалов нет, вывести об этом соответствующую надпись и покинуть цикл.
Вывод постраничной навигации при условии, что на одной они не помещаются.
Простой с виду код глобально изменил страницу - блог стал по-настоящему динамическим. Каждый пост можно посмотреть, ссылки работают.
Дальнейшее оформление и размещение элементов зависит только от вашей фантазии и навыков вёрстки - с отображением данных можно делать всё, что угодно, но работа над шаблоном ещё не завершена.
Добавляем виджеты
Слева от основного контента в шаблоне есть панель, на ней - блок Информация (своего рода виджет) и боковое меню. Информационный блок не должен быть статичен, а так как он очень напоминает виджет, предлагаю виджетом его и сделать. Для этого необходимо:
зарегистрировать блок виджетов;
вывести его в нужном месте.
Теперь подробнее.
1. В каталоге темы создайте файл functions.php. В нём хранятся функции, обеспечивающие работу шаблона. Также он может содержать и другие пользовательские процедуры.
Этот код регистрирует блок виджетов. Вместо 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, красивым и непохожим. Надо будет постараться и маленько напрячь мозги.
Как создать уникальный шаблон для wordpress-начинаем
Ниже приведу список действий как создать уникальный шаблон для wordpress своими руками и бесплатно.
Сменить картинки.
Изменить название шаблона.
Сделать мелкие правки в стилях.
Начнём разбор каждого пункта по порядку.
Меняем картинки
Самый простой момент, разберу на примере шаблона twenty eleven. Заменяем стоковые изображения на свои переделанные. Надо менять в шапке, подвале, фон и остальные мелкие.
Но особого решения я вывести не могу, в моём шаблоне минимум картинок (а те что есть громадные). В общем, надо большинство изображений заменить на свои. Давайте разберу два элемента, которые заменяются:
Первый через саму админку.
Второй через код.
Если принцип поймёте, то вам большой респект.
Через саму административную панель
В современных темах есть хорошая функция настроек через сам вордпресс, почему бы ими не воспользоваться? Заходим в административную панель блога, внешний вид и настроить.
Если тема сделана для людей, то глобальные настройки дизайна будут здесь, а с мелочами разберёмся ниже. В разделе покау на примере Twenty eleven.
Общие цвета темы. Настройки основных элементов (заголовков, надписей и тому подобного).
Изображение заголовка, то есть в шапке.
Фоновое изображение. Присутствует не на всех темах, можно настроить как картинкой, так и просто цветом.
На этом этапе вот что у меня получилось. Едем дальше.
Меняем картинки вручную
Предположим картинка какого-то элемента в шаблоне вас не устраивает, и вам хочется её поменять. Что же делать? Будем разбираться. Для примера я возьму вывод картинки количества комментаторов.
Система действует для всех тем.
Нажимаем правой кнопкой мыши на элементе и ищем его вывод в коде, с помощью инструмента “просмотреть код”.
Сам элемент, нажимаем на нём правой кнопкой мыши.
Выбираем пункт “просмотреть код”.
Это сам код вывод HTML, на него внимания не обращаем.
Вот тот заветный адрес, куда надо идти с заменой. Искомый файл bubble.png, находящийся в папке images в самой теме.
То есть надо создать такой же файл, с таким же названием и заменить его. Я надеюсь вы знаете как пользоваться файловыми менеджерами типа FileZilla. Я захотел сделать картинку, выводящую количество комментариев звездой с обводкой. Сделал ее в фотошопе, и сохранил как картинку с названием bubble и расширением png.
Сделано, я открыл файлзиллу, и зашёл в активную тему twenty eleven в папку images (которую узнали выше). и простым перетаскиванием нового изображения вставляем в папку, с заменой. Все подробности на скриншоте.
Если все сделано хорошо, то новая картинка отобразиться на сайте, вот снимок.
Как понимаете, то таким методом можно сменить любую картинку, если нет настроек в административной панели.
Изменяем название шаблона
Менять можно только на бесплатных темах, это важно.
Есть два пункта и их надо сделать:
Переделываем название в файле style.css
Меняем название папки с темой.
Переделываем названия в style.css
Для этого заходим в редактор (напоминаю внешний вид-редактор
), и находим style.css.
На cкрине видим надпись, тут все надо изменить. В начале любого файла style.css в самом начале содержится информация о шаблоне. Её и надо изменить как минимум на эти строки.
Theme Name: moi-shablon
Description: Standard version 1..
License: GPL
Должно получиться так, после замены.
Вы прописывайте свои данные, мои не берите, потому что шаблон делаем уникальным. Смените как минимум имя, автора и сайт.
Разобрались, переходим к следующему пункту.
Меняем название папки с темой
Делаем через файловый менеджер, у меня Filezilla. В предыдущем пункте меняли имя темы в строчке:
Theme Name: moi-shablon
Надо оригинальное имя twentyeleven
изменить на новое, в моём случае, moi-shablon.
Идём в FileZilla папку themes
, и находим исходное название twentyeleven.
И меняем его на новое.
Если всё было сделано правильно, то заработает. Тема для поисковиков будет уже не стандартная, а уникальная.
Мелкие правки в стилях
Единого решения как создать уникальный шаблон для wordpress вывести не могу, надо просто посмотреть на шаблон чисто визуально и увидеть то, что вам не нравится. Гляжу на сайдбар.
Правда, не очень? Я хочу сделать покрупнее шрифт заголовков, потому что мелкие и сливаются с фоном. Все шаги смотрим ниже на снимке.
Выбираем тот элемент, который хотим править. Нажимаем правой кнопкой мыши.
Нажимаем на “посмотреть код”.
Весь стиль этого заголовка.
Искомое название стиля.
Открываем файл style.css. Ищем название стиля с помощью комбинации клавиш CNTRL+F.
Я хочу сделать шрифт крупнее, под ним сделать сплошную линию, сменить цвет и толщину текста. Для этого я меняю либо добавляю вот такие параметры.
Соответственно меняем либо добавляем параметры в стиль. Должно получиться так.
Все изменения сразу покажутся на сайте.
Моя задача сейчас не научить верстать, это займёт много времени и статей, а показать сам принцип как сделать шаблон уникальным.
Так со всеми остальными элементами, доводите до идеала. Показываю что получилось в рамках этой статьи.
Эта статья ответила на вопрос как создать уникальный шаблон для 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
.
Откройте этот файл для редактирования. Скопируйте только код контента, так как вы уже добавили хедер и футер (ниже приведен пример данного кода, ваш код может выглядеть иначе):
Вставьте скопированный код в файл 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).
Популярное в рубрике:
Как объединить слои в фотошопе в один или соединить их в группу...