В последней части этой серии мы создали нашу платформу тем, которая представляет собой довольно простой шаблон, в который мы добавили некоторые функции, которые мы обычно используем. Теперь мы можем использовать наш фреймворк двумя способами: как дочернюю тему и как настоящий шаблон, который мы просто копируем и редактируем. Сегодня мы собираемся использовать нашу структуру как дочернюю тему.
Я сделал учебник по созданию простой дочерней темы , но на этот раз он немного другой, потому что у нас нет полноценной темы для работы. У нас есть почти минимальный уровень в отношении стилей и функциональности. Итак, помня об этом, давайте двигаться вперед.
Примечание: так что это руководство не слишком длинное, я могу предположить, что вы знакомы с тем, как создавать дочерние темы для WordPress.
Начиная
Первое, что нам нужно сделать, это создать папку в нашем каталоге / themes /. Я назвал мой wp-шаблонный ребенок (очень креативно, я знаю); Вы можете назвать свое что угодно. Как всегда, мы начнем с нашего файла style.css и определения темы:
|
1
2
3
4
5
6
7
8
9
|
/*
Theme Name: Framework Child
Theme URI: http: //example.com/
Description: Child theme for Your Framework Theme
Author: Your Name
Author URI: http: //your-site.com/
Template: wp-boilerplate
Version: 1.0
*/
|
Помните, что с дочерними темами нам нужна эта дополнительная строка, чтобы определить, в каком каталоге находится родительская тема. Как только это установлено, WordPress знает, где взять файлы родительской темы. Следующее, что нам нужно сделать, это импортировать CSS из нашей среды:
|
1
|
@import url(«../wp-boilerplate/style.css»);
|
Это необходимый шаг, если вы не хотите начинать с нуля, так как это перезапишет CSS из родительской темы. Также имейте в виду, что это будет загружено после загрузки всего CSS из нашей темы, включая ie.css.
Теперь, если вы помните, наш фреймворк без каких-либо модификаций выглядит так:
Немодифицированная тема Boilerplate
Здесь следует иметь в виду, что, поскольку это наша структура, мы гораздо лучше знакомы с ней, чем с другими системами; мы создали его для наших собственных стилей кодирования. Хотя это может показаться похожим на другое учебное пособие по дочерней теме, которое я делал, одно большое отличие состоит в том, что родительская тема — это наша собственная структура, созданная для наших собственных потребностей.
Мы собираемся добавить немного стиля, начиная с базового CSS. Добавьте эти строки кода в CSS вашей дочерней темы:
|
1
2
3
4
5
6
7
8
9
|
body{
background: #000000;
}
a, a:visited{ color: #a2a085;
#container{
background: #FFFFFF;
}
|
Это закладывает некоторые основы для трансформации нашей темы, которая будет происходить в основном в CSS. Мы изменили некоторые значения по умолчанию в теле, ссылке и цветах контейнера. Теперь мы собираемся сделать наш заголовок более привлекательным.
|
01
02
03
04
05
06
07
08
09
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
|
header{
font-size: 1.4em;
background: #D1CFB5;
}
header h1{ padding: 10px;
header h1 a, header a:visited{ color: #69652B;
nav{
background: #ABA0B6;
font-size: 1.5em;
padding: 3px;
border-bottom: 1px solid #221F49;
border-top: 1px solid #221F49;
}
nav a, nav a:visited{
color: #221F49;
}
nav a:hover{
color: #4C4B55;
}
|
Как и в случае с нашими базовыми стилями, мы просто переписали стили заголовка и навигации из фреймворка. Я также пошел дальше и добавил некоторые другие стили для нашей дочерней темы, которые включены в этот учебник, если вы хотите взять смотреть. В итоге мы получили следующее:
Наша детская тема с некоторым стилем
Теперь давайте взглянем на создание нового шаблона макета, который мы будем строго использовать в нашей дочерней теме.
Добавление пользовательского шаблона страницы
Большая часть нашей темы уже решена благодаря нашей структуре, но это не значит, что мы не можем добавить к ней. В следующем разделе мы создадим собственную домашнюю страницу с шаблонами страниц и небольшой магией функций. Давайте создадим новую страницу с именем page-home.php и добавим это:
|
01
02
03
04
05
06
07
08
09
10
11
12
13
14
15
16
17
18
19
20
21
22
23
|
<?php
/*
* Template Name: Home
*/
get_header();
<?php if (have_posts()) : while (have_posts()) : the_post();
<h2><?php the_title();
<?php the_content(‘<p class=»serif»>Read the rest of this page »</p>’);
<?php
if ( !function_exists( ‘dynamic_sidebar’ ) || !dynamic_sidebar(‘Homepage Widgets’) ) :
endif;
?>
<?php endwhile;
<?php get_footer();
|
У нас есть довольно стандартная страница с именем шаблона, циклом и теми же тегами шаблона, которые мы использовали на странице нашей платформы. Тем не менее, я также добавил область виджетов прямо под содержимым, чтобы мы могли добавлять на домашнюю страницу все, что хотели. Теперь мы должны определить эту область виджета в нашей теме через наш файл функций.
Помните, что файл функций нашего ребенка загружается до файла функций родителя.
Создайте файл functions.php в нашей дочерней теме и добавьте это:
|
01
02
03
04
05
06
07
08
09
10
11
12
13
|
<?php
register_sidebar( array (
‘name’ => __( ‘Homepage Widgets’, ‘home-widgets’ ),
‘id’ => ‘home-widget-area’,
‘description’ => __( ‘The home widget area’, ‘wpbp’ ),
‘before_widget’ => ‘<div class=»widget»>’,
‘after_widget’ => «</div>»,
‘before_title’ => ‘<h3 class=»widget-title»>’,
‘after_title’ => ‘</h3>’,
) );
?>
|
Теперь мы можем добавлять виджеты на нашу домашнюю страницу! Я добавил канал RSS. Перед применением любого CSS это выглядит так:
Домашняя страница с виджетом RSS
Вы, конечно, можете стилизовать этот канал так, как вам нравится.
Сделать больше
Мы можем сделать гораздо больше, используя обширный API WordPress. Мы можем использовать функции, чтобы изменить шаблон комментариев, создать пустой файл боковой панели, чтобы, по сути, удалить боковую панель или полностью заменить нижний колонтитул. Возможности бесконечны, потому что наша структура очень легкая / простая.
Учебный опыт
Одна из действительно приятных особенностей использования нашей собственной доморощенной среды — это то, что мы можем постоянно улучшать ее. Я на самом деле использую это больше как шаблон, который я копирую и изменяю (скоро будет учебное пособие), поэтому его переключение и использование в качестве дочерней темы показало мне пару улучшений, которые я мог бы внести в среду.
- Сначала я изменю общий шаблон, чтобы боковая панель не была соединена с заголовком. Вместо этого я добавлю
<php get_sidebar(); ><php get_sidebar(); >к отдельным шаблонам страниц. Это облегчит удаление его с новых страниц или даже передачу ему другой боковой панели (alaget_sidebar('different-sidebar')). - Существуют некоторые обычные функции / классы PHP, которые я использую снова и снова, за рамками проектов WordPress. Я, вероятно, добавлю их в свой файл
functions.phpтак как я все равно регулярно их использую. Один из классов — это процессор форм, поэтому мне не понадобится плагин для создания простых форм электронной почты. - Наконец, я обнаружил, что в последнее время я много интегрировал пользовательские типы постов в свои проекты. Я могу создать простой шаблон CPT для добавления в структуру. Тогда я мог бы при необходимости вызывать этот файл в дочерних темах.
Помните, что у вас есть много возможностей для личной настройки, если вы не планируете выпустить свой фреймворк для общественности.
Вывод
Здесь мы внесли некоторые базовые изменения в нашу структуру через нашу дочернюю тему. Этот метод особенно полезен, если вы сохраняете структуру, похожую на ваш сайт, и вы просто хотите вносить изменения с помощью CSS (например, CSS Zen Garden ). Также полезно добавлять новые шаблоны страниц и пользовательские функции поверх того, что уже есть. Однако, поскольку мы используем базовую структуру / шаблон, если мы полностью изменим структуру темы, мы могли бы также создать тему с нуля, если мы используем дочернюю тему, так как мы, вероятно, заменим большую часть файлы шаблонов. В следующий раз я собираюсь скопировать и вставить наш шаблон и внести изменения в саму тему, чтобы получить максимальную отдачу от кода, который мы уже выложили.