WordPress потрясающий. Еще более удивительным является тот факт, что он может быть настроен для поддержки любого типа сайта, который вам нравится! Здесь мы узнаем, как создать избранные разделы и разделы «последние сообщения», которые просто необходимы для всех хороших тем новостей / журналов. Мы также перейдем к использованию «Пользовательских полей» в их полном объеме.
Вступление
В этом руководстве описывается процесс создания страницы-указателя для темы журнала / новостей для WordPress. Основными функциями этой страницы будут:
- Популярные сообщения.
- Последние записи.
- Использование переменных PHP для простой настройки вышеизложенного для пользователей вашей темы, не знакомых с PHP / WordPress.
- Получение изображения поста из раздела «Пользовательские поля» поста.
Шаг 1 — Подготовка
В установочном каталоге WordPress просмотрите «wp-content / themes» и создайте новую папку. Назовите его так, как вы хотите (я использую «WordPress Times»). Далее создайте 5 новых файлов:
- index.php
- header.php
- footer.php
- style.css
Это основной макет, который мы будем использовать:
Итак, документ размером 940 пикселей, с двумя разделами:
Контент в 600px и боковая панель в 300px, оставляя 40px поле между ними.
Шаг 2 — Заголовок
Откройте файл header.php и вставьте следующее:
|
01
02
03
04
05
06
07
08
09
10
11
12
13
14
15
16
17
|
<!DOCTYPE html PUBLIC «-//W3C//DTD XHTML 1.0 Transitional//EN» «http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd»>
<html xmlns=»http://www.w3.org/1999/xhtml» <?php language_attributes();
<head>
<meta http-equiv=»Content-Type» content=»<?php bloginfo(‘html_type’); ?>; charset=<?php bloginfo(‘charset’); ?>» />
<meta name=»description» content=»<?php bloginfo(‘description’); ?>» />
<meta name=»keywords» content=»<?php bloginfo(‘name’); ?>» />
<meta name=»author» content=»<?php bloginfo(‘name’); ?>» />
<meta name=»generator» content=»WordPress <?php bloginfo(‘version’); ?>» />
<link rel=»stylesheet» href=»<?php bloginfo(‘stylesheet_url’); ?>» type=»text/css» media=»screen, projection» />
<link rel=»alternate» type=»application/rss+xml» title=»<?php bloginfo(‘name’); ?> RSS Feed» href=»<?php bloginfo(‘rss2_url’); ?>» />
<link rel=»pingback» href=»<?php bloginfo(‘pingback_url’); ?>» />
<title><?php bloginfo(‘name’);
<?php wp_head();
</head>
<body>
<div class=»container»>
<h1 id=»header»><?php bloginfo(‘name’);
|
Пройдя через это, мы сначала определяем DOCType как XHTML 1.0 Transitional. В разделе head мы затем устанавливаем все метатеги, таблицы стилей и заголовки страниц, которые будут извлечены из WordPress; и мы включаем наши 3 файла JavaScript.
Наконец, мы открываем раздел «контейнер» и вставляем название нашего блога в качестве заголовка.
Шаг 3 — Сообщения «Последние новости»
Мы будем включать определенное пользователем количество постов из категории «Последние новости» в верхней части нашей страницы. Откройте index.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
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
|
<?php get_header();
<div id=»content»>
<?php global $more;
$more = 0;
<?php
/* ID of your ‘Breaking News’ Category */
$breaking_cat = «83»;
/* How many posts from above category to display?
$breaking_num = «3»;
/* Number of recent posts to display under the Breaking News */
$latest_num = «4»;
/* IDs of any cats you dont want to include in Recent posts.
Start each ID with a ‘minus’ symbol Seperate by a comma.
EG: $latest_ignore = «7,-6,-8,-1»;
Posts from the ‘Breaking’ category are automatically excluded.
$latest_ignore = «-1»;
?>
<!— Show x Posts from Breaking News —>
<?php query_posts(‘showposts=’.$breaking_num.’&cat=’.$breaking_cat.»);
while (have_posts()) : the_post();
?>
<div class=»breaking»>
<img src=»<?php echo get_post_meta($post->ID, ‘thumbnail’,true) ?>» alt=»Post Image» class=»postimg» />
<h2><a href=»<?php the_permalink() ?>» title=»<?php the_title(); ?>»><?php the_title();
<p class=»datetime»><?php the_time(‘l, F j, YG:i’);
<?php the_content(‘Continue…’);
<div class=»postmeta»>
<p><?php the_category(‘, ‘);
<span class=»comm»><?php comments_number(‘0 Comments’,’1 Comment’,’% Comments’);
</div><!—/postmeta—>
</div><!—/breaking—>
<?php endwhile;
|
3.1 — Открытие
|
1
2
|
<?php get_header();
<div id=»content»>
|
Первая строка — это простая PHP-функция WordPress, которая сначала включает наш файл header.php. Ниже мы открываем наш раздел «Содержание», чтобы обернуть все сообщения вместе. Я включил HTML-комментарий при закрытии каждого тега div, указывающего, какой div он закрывает. Я настоятельно рекомендую вам начать делать это в своих собственных проектах, если вы этого еще не сделали, поскольку это помогает сохранить ваш код максимально организованным.
3.2 — тег $ more
|
1
2
|
<?php global $more;
$more = 0;
|
Этот код позволяет нам включать только часть каждого сообщения, вплоть до того, где автор включил тег <- more -> — это останавливает отображение всего текста в длинных сообщениях на главной странице.
3.3 — Идентификаторы категории
|
1
2
3
4
5
|
$breaking_cat = «83»;
$breaking_num = «3»;
$latest_num = «4»;
$latest_ignore = «-1»;
|
Чтобы упростить настройку темы, мы включаем здесь любые параметры. Каждая строка комментируется дальше. Мы делаем это так, чтобы, если кто-то еще использовал вашу тему — вместо того, чтобы проскакивать весь ваш код, чтобы найти, куда поместить свои идентификаторы категории — все они легко доступны вверху файла. В этом уроке мы будем использовать эти переменные в цикле WordPress.
3.4 — Есть ли у нас сообщения?
|
1
2
3
|
<?php query_posts(‘showposts=’.$breaking_num.’&cat=’.$breaking_cat.»);
while (have_posts()) : the_post();
?>
|
Это вариант цикла WordPress, который выводит наши сообщения из базы данных. Как видите, мы используем первые две наши переменные из раздела выше. Переменные заменяют собой строку, связанную с ними. Например, используя код по умолчанию, строка автоматически станет:
|
1
|
query_posts(‘showposts=3&cat=83’)
|
Затем вторая строка говорит: если у нас есть сообщения, вставьте их в страницу в формате, указанном ниже.
3.5 — Опубликовать контент
|
1
2
3
4
5
6
7
|
<img src=»<?php echo get_post_meta($post->ID, ‘thumbnail’,true) ?>» alt=»Post Image» class=»postimg» />
<h2><a href=»<?php the_permalink() ?>» title=»<?php the_title(); ?>»><?php the_title();
<p class=»datetime»><?php the_time(‘l, F j, YG:i’);
<?php the_content(‘Continue…’);
|
Это не так страшно, как кажется, поверь мне.
- Изображение — на нашей домашней странице вы увидите, что у каждого сообщения есть свое изображение. Это включено в разделе «Пользовательские поля» WordPress при написании поста. Просто установите «ключ» на миниатюру, а затем вставьте ссылку на изображение:
Код в основном гласит: «Возьмите данные из настраиваемого поля поста с именем« thumbnail »и вставьте его в тег img».
- Заголовок — вставляет заголовок нашего сообщения в виде ссылки между тегами h2. the_permalink () получает ссылку на сообщение, а the_title () возвращает заголовок. Довольно просто, а?
- Дата и время. Здесь мы получаем время публикации сообщения в формате: l, F j, YG: i — или на английском языке: день, дата, год и время (например, суббота, 2 августа 2008 г. 14: 27).
- Содержимое — извлекает содержимое сообщения до (благодаря коду, который мы включили ранее). «Продолжить …» — текст, отображаемый в конце сообщения. Настройте это так, как вам нравится.
3.6 — Post Meta
|
1
2
3
4
5
6
7
|
<div class=»postmeta»>
<p><?php the_category(‘, ‘);
<span class=»comm»><?php comments_number(‘0 Comments’,’1 Comment’,’% Comments’);
</div>
|
Это извлекает категорию (и), из которой отправлено сообщение. Если их больше одного, они будут разделены запятыми. Затем получается ссылка на раздел комментариев и количество комментариев в статье.
|
1
2
|
</div> <!— /breaking —>
<?php endwhile;
|
Это просто закрывает «div.breaking», в котором был наш пост; и затем закрывает цикл, как только это будет сделано.
Шаг 4 — Последние сообщения
Под нашими тремя сообщениями «Последние новости» мы будем включать указанное пользователем количество последних сообщений, игнорируя при этом все сообщения из категории «Последние новости» и любые другие указанные пользователем категории, которые следует игнорировать. Мы добавим следующее в конец нашего текущего кода:
|
01
02
03
04
05
06
07
08
09
10
11
12
13
14
15
16
17
18
19
|
<!— Show x Latest Posts —>
<?php query_posts(‘showposts=’.$latest_num.’&cat=-‘.$breaking_cat.’,’.$latest_ignore.»);
<?php while (have_posts()) : the_post();
<div class=»recent»>
<img src=»<?php echo get_post_meta($post->ID, ‘thumbnail’,true) ?>» alt=»Post Image» class=»postimg-s» />
<h3><a href=»<?php the_permalink() ?>» title=»<?php the_title(); ?>»><?php the_title();
<p class=»datetime»><?php the_time(‘l, F j, YG:i’);
<div class=»postmeta»>
<p><?php the_category(‘, ‘);
<span class=»comm»><?php comments_number(‘0 Comments’,’1 Comment’,’% Comments’);
</div>
</div>
<?php endwhile;
|
4.1 — Цикл
- showposts = ‘. $ latest_num. — Указывает циклу отображать только количество последних сообщений, указанных пользователем в переменной ‘$ latest_num’.
- кот = — ‘$ breaking_cat. » $ latest_ignore.’. — Это заставляет цикл игнорировать (обратите внимание на символ «минус», который мы требуем от пользователя в переменных) сообщения, которые находятся в категории «Взлом», чтобы не дублировать какие-либо сообщения; а также игнорировать сообщения из любой категории, которую пользователь указывает в переменной ‘$ latest_ignore’.
Все остальное не требует пояснений и аналогично новостям. Несколько отличий заключается в отсутствии раздела «содержание» в каждом сообщении, а также тому, что для изображения поста присваивается класс «postimg-s» . Это позволит нам потребовать только одно миниатюрное изображение, которое мы затем уменьшим в нашем CSS с 200×200 до 50×50.
4.2 — Закрытие страницы
Чтобы завершить текущую страницу, нам нужно закрыть содержимое div # и включить наш нижний колонтитул:
|
1
2
|
</div><!—/content—>
<?php get_footer();
|
4.3 — Footer.php
В этом файле просто закройте теги #container, body и html:
|
1
2
3
|
</div><!—/container—>
</body>
</html>
|
Шаг 5 — CSS Styling
Прямо сейчас, если вы создали несколько постов, ваш дизайн должен выглядеть примерно так:
Довольно уродливо, а? Ну, не намного дольше.
5.1 — Необходимости
Откройте файл style.css и вставьте следующий код:
|
1
2
3
4
5
6
7
8
|
/*————————————————————————
Theme Name: WordPress Times
Theme URI: http://www.vivawp.com/
Description: A tutorial for NETTUTS.com by Dan Harper
Version: 1.00
Author: Dan Harper
Author URI: http://danharper.me
————————————————————————*/
|
Это необходимо в верхней части этого файла, так как он дает Theme Manager в WordPress некоторую информацию о вашей теме. Заполните разделы в нем, как вам нравится.
5.2 — Стиль
Ниже приведен весь код CSS, используемый для оформления документа. Это задокументировано ниже.
|
001
002
003
004
005
006
007
008
009
010
011
012
013
014
015
016
017
018
019
020
021
022
023
024
025
026
027
028
029
030
031
032
033
034
035
036
037
038
039
040
041
042
043
044
045
046
047
048
049
050
051
052
053
054
055
056
057
058
059
060
061
062
063
064
065
066
067
068
069
070
071
072
073
074
075
076
077
078
079
080
081
082
083
084
085
086
087
088
089
090
091
092
093
094
095
096
097
098
099
100
101
102
103
104
105
106
107
108
109
110
111
112
113
|
* {margin:0;padding:0;}
body {
background-color: #faf9f5;
color: #3d3d3d;
font-size:75%;
font-family: «Helvetica Neue», Helvetica, Arial, sans-serif;
}
#container {
width: 940px;
margin: 15px auto;
}
h1, h2, h3, h4, h5, h6 {
font-family: Georgia, «Times New Roman», Times, serif;
}
/* BLUEPRINT CSS TYPOGRAPHY */
h1, h2, h3, h4, h5, h6 {font-weight:normal;color:#111;}
h1 {font-size:3em;line-height:1;margin-bottom:0.5em;}
h2 {font-size:2em;margin-bottom:0.75em;}
h3 {font-size:1.5em;line-height:1;margin-bottom:1em;}
h4 {font-size:1.2em;line-height:1.25;margin-bottom:1.25em;height:1.25em;}
h5 {font-size:1em;font-weight:bold;margin-bottom:1.5em;}
h6 {font-size:1em;font-weight:bold;}
h1 img, h2 img, h3 img, h4 img, h5 img, h6 img {margin:0;}
p {margin:0 0 1.5em;}
li ul, li ol {margin:0 1.5em;}
ul, ol {margin:0 1.5em 1.5em 1.5em;}
/* /BLUEPRINT CSS TYPOGRAPHY */
h1#header {
margin-bottom: 20px;
}
#content {
width: 600px;
float: left;
}
.breaking, .recent {
padding: 10px;
border: 1px solid #3d3d3d;
margin-bottom: 15px;
}
.postimg {
float: right;
width: 200px;
height: 200px;
padding-bottom: 10px;
}
.postimg-s {
float: right;
width: 50px;
height: 50px;
padding-bottom: 10px;
}
.breaking h2 {
font-size: 2.5em;
line-height: 1em;
margin-bottom: 0px;
}
.breaking h2 a, .recent h3 a {
text-decoration: none;
color: #3d3d3d;
}
.breaking h2 a:hover, .recent h3 a:hover {
text-decoration: underline;
}
p.datetime {
font-style: italic;
font-size: 0.9em;
}
/* POST META */
.postmeta {
margin: -10px;
padding: 4px;
background-color: #dedbd1;
clear: both;
}
.postmeta p {
margin: 0;
padding-left: 6px;
text-transform: uppercase;
font-weight: bold;
}
.postmeta span.comm {
font-weight: normal;
}
.postmeta a:link, .postmeta a:visited {
color: #3d3d3d;
text-decoration: none;
}
.postmeta a:hover, .postmeta a:active {
text-decoration: underline;
}
#sidebar {
width: 300px;
margin-left: 620px;
}
|
5.3 — Изучение CSS
- * — Удаляет ненужные поля и отступы из всех элементов, которые вставляет браузер.
- Основная часть — базовый стиль страницы цветов и шрифтов.
- #container — устанавливает ширину страницы в 940 пикселей. 15px поле сверху и снизу и центрирует его в окне.
- h1, h2, h3, h4, h5, h6 — заголовки шрифтов в Грузию, Times New Roman, Times или любой другой шрифт с засечками.
- Между тегами комментариев Blueprint — Базовое оформление шрифтов из Blueprint CSS Framework. Сохраняет много хлопот с получением текста, чтобы хорошо выглядеть.
- h1 # header — добавляет немного отделения от имени блога и остальной части документа.
- #content — Весь наш контент упакован в 600 пикселей слева. Оставшееся пространство можно использовать как боковую панель.
- .breaking, .recent — включает в себя Breaking и Недавние сообщения в коробке с отступом 10px. 15px разрыв между каждым.
- .postimg — форматирует изображение сообщения для взлома статей. Размер изображения ограничен 200px и всплывает справа.
- .postimg-s — То же самое, что и выше, но для последних статей и размер изображения изменяется до 50px.
- .breaking h2 — Уменьшает заголовок Разрушающих статей без нижнего поля.
- .breaking h2 a, .recent h3 a — Базовая стилизация заголовков статей, скрывающая стиль ссылок по умолчанию.
- .breaking h2 a: hover, .recent h3 a: hover — при наведении курсора на ссылку на заголовок добавляется подчеркивание, чтобы показать пользователю, что на самом деле это ссылка.
- p.datetime — строка даты и времени для статей, сделанная немного меньше и выделенная курсивом.
- .postmeta — создает поле для включения мета-подробностей сообщения (категории и комментарии). margin -10px обеспечивает заполнение всего поля сообщений.
- .postmeta p — текст в элементе postmeta div делается заглавными и жирными.
- .postmeta span.comm — удаляет выделение жирным шрифтом для текста «x Комментарии».
- .postmeta a — Стиль ссылки для удаления цвета ссылки по умолчанию.
- .postmeta a: hover — Добавляет подчеркивание к ссылкам при наведении курсора.
- #sidebar — создает область для боковой панели вниз по правой стороне страницы.
Страница теперь будет выглядеть так. Гораздо чище!
Вывод
Congrats. Вы успешно создали основы для главной страницы темы новостей для WordPress, дополненной областью Избранных сообщений — обязательным элементом, когда речь идет о темах новостей. Вы также можете опередить конкурентов с помощью своих простых настроек, используя переменные PHP.
Следите за выпуском vivaWP — нового семейства тем WordPress Premium, которое выйдет в середине августа. Наша первая тема, CocoaNews , делится некоторыми базовыми кодами, показанными в этом руководстве.