В прошлый раз мы использовали наш фреймворк как дочернюю тему, создавая совершенно новую тему, которая зависит от фреймворка. Сегодня мы собираемся использовать наш фреймворк как шаблон, копируя папку и внося правки прямо в нее.
Теперь некоторые люди могут поставить под сомнение причины этого, и это справедливо. Зачем нам менять саму структуру? Мое первоначальное намерение для этого фреймворка было на самом деле быть просто образцом, который я мог копировать, вставлять и модифицировать, как HTML5 Boilerplate . Из-за этого большую часть времени я использую свой шаблон, я просто копирую и вставляю его.
У этого метода также есть некоторые достоинства. Если, например, вы имеете дело с совершенно другим структурным дизайном, вы все равно будете переписывать большинство страниц шаблона. Основной причиной создания фреймворка было повторное использование CSS и более общих функций. Это просто следовало примеру создать заголовок, нижний колонтитул, индекс и т. Д., Чтобы заставить тему работать. Хотя я и пытался сделать его как можно более универсальным, я также хотел сохранить его легким. Из-за этого не существует механизма для внедрения кода в различные части темы, как в Themaic или других более крупных средах, которые я предпочитаю. Как я уже говорил в первой части, я не хотел создавать совершенно новый API, чтобы люди могли узнать, когда уже есть API WordPress.
Начиная
Прежде чем мы начнем, мы должны наметить некоторые цели для использования фреймворка в качестве шаблона. Во-первых, мы должны изменять только те файлы, которые необходимо изменить. Помните, что за пределами нашего верхнего и нижнего колонтитула мы старались сделать другие страницы как можно более общими. Это означает, что если CSS можно использовать для упорядочения того, что уже есть, мы могли бы также использовать это, поскольку это менее трудоемко (для редактирования) для нас. Мы также должны помнить о том, что находится в наших файлах темы. У нас есть 2 области виджетов (одна в нижнем колонтитуле) и несколько функций, предназначенных для повторного использования. Мы должны использовать их, если сможем. При этом, вот небольшое напоминание, с чего мы начинаем:
Наши рамки
Перво-наперво: давайте скопируем и распишем нашу структуру и подготовим ее к использованию Я просто скопировал свою папку / wp -ilerplate / и переименовал ее в / wp -ilerplate-copy / (там я снова иду с именами объявлений). Как всегда, мы изменим наш файл style.css:
|
1
2
3
4
5
6
7
8
|
/*
Theme Name: Framework Copy
Theme URI: http: //example.com/
Description: Copy of Your Framework Theme
Author: Your Name
Author URI: http: //your-site.com/
Version: 1.0
*/
|
Помните, на этот раз нам не нужна строка template потому что это прямая копия фреймворка.
Структурные изменения
Прежде чем мы углубимся в CSS, давайте рассмотрим, какие структурные изменения мы хотим внести. Я хотел бы сделать несколько вещей для общего дизайна сайта. Во-первых, разместите навигацию над именем сайта и строкой поиска (которую мы также добавим). Я также хотел бы сделать так, чтобы верхний и нижний колонтитулы увеличивали ширину экрана пользователя, сохраняя при этом контент на заданной ширине 960 пикселей. Это конечный продукт, над которым мы будем работать:
Наш конечный продукт
Что мы будем делать дальше, это изменить заголовок. Здесь все в header.php после <body> :
|
01
02
03
04
05
06
07
08
09
10
11
12
13
14
15
16
17
18
19
20
|
<div id=»wrapper» class=»group»>
<!—Header — Name of Item Here—>
<header class=»group»>
<div class=»contain»>
<nav>
<?php wp_nav_menu( array(‘menu’ => ‘Main’ ));
</nav>
<h1><a href=»<?php bloginfo(‘home’); ?>»><?php bloginfo(‘name’);
<?php get_search_form();
</div>
</header>
<!— End Header —>
<!— Main Area —>
<div class=»contain»>
<div id=»content» class=»group»>
|
Вы должны заметить пару вещей. Я изменил идентификатор основного контейнера на «обертку» и добавил класс «содержать». Это так, чтобы мы не перепутали их. #Wrapper по-прежнему применяется ко всей странице, но поскольку мы хотим, чтобы верхний и нижний колонтитулы расширяли всю ширину экрана пользователя, нам нужно удалить определение ширины. Однако, поскольку мы все еще хотим, чтобы фактический контент оставался с нашей первоначальной шириной 960 пикселей, нам нужно создать отдельный класс, который мы будем использовать для нескольких разделов контента. Вот как выглядит CSS для #wrapper и .contain:
|
01
02
03
04
05
06
07
08
09
10
11
|
#wrapper{
text-align: left;
background: #FFFFFF;
color: #333333;
}
.contain{
width: 960px;
margin: 0 auto;
}
|
Как видите, мы переместили информацию, относящуюся к ширине и выравниванию, в .contain. Теперь мы изменим footer.php, чтобы он соответствовал header.php:
|
01
02
03
04
05
06
07
08
09
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
|
<?php print «\n\n»;
</div>
<?php get_sidebar();
</div>
<!—Footer Information—>
<footer class=»group»>
<div class=»contain»>
<?php if ( !function_exists( ‘dynamic_sidebar’ ) || !dynamic_sidebar(‘Sidebar2’) ) : ?>
<?php endif;
<p>© <a href=»<?php bloginfo(‘home’); ?>»><?php bloginfo(‘name’);
</div>
</footer>
<!— End Footer Information —>
</div>
<!—end container—>
<?php wp_footer();
</body>
</html>
|
Вы можете видеть, что в дополнение к сопоставлению наших элементов div из header.php, я также добавил элемент .contain вокруг нашего содержимого нижнего колонтитула. Я также переместил боковую панель в нижний колонтитул. Как отмечали некоторые из наших читателей во второй части , это более дружественно к SEO.
Теперь, когда мы изменили основную структуру сайта, давайте взглянем на изменение одной из наших страниц шаблона.
Модификация страниц шаблона
Мы на самом деле не собираемся делать здесь слишком много. Я просто хочу сделать одно небольшое изменение (по коду) в index.php. В цикле, где мы размещаем наш заголовок и дату:
|
01
02
03
04
05
06
07
08
09
10
11
|
<p class=»date»><small><?php the_time(‘M <\b\r\/> j’) ?> <!— by <?php the_author() ?> —></small></p>
<div class=»entry»>
<h2><a href=»<?php the_permalink() ?>» rel=»bookmark» title=»Permanent Link to <?php the_title_attribute(); ?>»><?php the_title();
<?php the_content(‘Read the rest of this entry »’);
<p class=»postmetadata»><?php the_tags(‘Tags: ‘, ‘, ‘, ‘<br />’);
</div>
|
Здесь я перевернул строки заголовка и даты и назначил классу .date абзацу с информацией о дате в нем. Я также поместил всю информацию о посте в класс .entry. Вот так я мог бы создать небольшой квадрат даты для каждого поста слева от поста.
Примечание: как я уже говорил, это живой проект, который постоянно меняется. В будущих сборках я, скорее всего, сохраню класс date, чтобы легче было стилизовать этот раздел.
Площадь нашей даты
Остальные мои запланированные изменения мы можем сделать с помощью CSS из-за того, как были закодированы страницы (о чем я расскажу в следующем разделе). Тем не менее, используя фреймворк как шаблон, мы можем легче вносить изменения в нашу тему, чем в дочернюю, когда речь идет о перестановке или воссоздании определенных шаблонов.
Стилизация новой темы
Теперь, когда мы внесли свои структурные изменения, давайте посмотрим на некоторые CSS. Я выделю важные части здесь. Весь CSS включен в файлы темы, которые сопровождают этот пост. Во-первых, давайте посмотрим 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
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
|
header{
background: #fafaed;
text-align: right;
border-bottom: 1px solid #999999;
margin-bottom: 15px;
}
header nav ul, header h1, header form{
margin-top: 0;
}
header h1{
float: left;
color: #08034d;
font-size: 2.8em;
}
header h1 a, header h1 a:visited{
color: #333333;
text-decoration: none;
}
header form{
text-align: right;
}
header form input{
padding: 5px;
font-size: 1.4em;
}
nav{
text-align: center;
background: #333333;
width: 800px;
margin: 0 auto;
}
nav ul{ padding: 10px;}
nav ul li{
display: inline;
padding: 0 15px;
}
nav ul li a, nav ul li a:visited{
font-size: 1.4em;
color: #FFFFFF;
font-weight: bold;
text-decoration: none;
}
nav ul li a:hover{
color: #CFCFCF;
}
|
Здесь вы можете видеть, что мы применили цвета фона и стили шрифта к нашим элементам заголовка, а также некоторые стратегические места размещения. Наш результат — заголовок, который сильно отличается от заголовка нашего оригинального фреймворка.
Наш новый заголовок
Другая часть нашего CSS, которую я хотел бы выделить, заключалась в том, как я «исправил» боковую панель:
|
1
2
3
4
5
6
7
8
9
|
#wrapper aside{
margin-left: 675px;
}
#content{
width: 660px;
float: left;
font-size: 1.25em;
}
|
Как вы знаете, наш CSS был более или менее здесь для этого раздела — нам просто нужно было взять обратное тому, что мы имели, так как мы изменили порядок нашего кода. Чисто и довольно просто!
Остальная часть CSS довольно проста и, как я уже упоминал, включена в исходный текст этого поста. Я изменил пост CSS и применил некоторые стили по умолчанию к нашим тэгам HTML, касающиеся цвета, размеров и отступов / полей
Вывод
Я хотел завершить эту серию, взвесив достоинства этого метода по сравнению с созданием дочерней темы, так как этот пост был скорее доказательством концептуального поста (создание полной темы заняло бы очень много времени, но я мог бы сделать более углубленный один, если это требуется). Я бы сказал, что метод копирования и вставки будет лучше, если вы вносите серьезные изменения в структуру. Вы по-прежнему получаете код, который мы выложили, но вы тратите меньше времени на восстановление того, что мы уже создали в дочерней теме. Несмотря на то, что мы внесли здесь небольшие изменения, мы можем столкнуться с дизайном, который требует от нас изменения нескольких страниц, и наличие базового кода уже является большой помощью как для справки, так и для повторного использования. Я обычно иду по пути копирования и вставки, так как стараюсь, чтобы все мои проекты не выглядели одинаково.
А что насчет тебя? Что вы видите, что делаете больше?