Статьи

WordPress: новичок в освоении, часть 2

Январь 28, 2019

В этой серии статей для начинающих и мастеров, состоящей из шести частей, мы будем использовать расширенные функции WordPress для создания собственного портфолио и блога, включая страницу параметров, несколько стилей и поддержку новых функций WordPress 2.7. Сегодня мы создаем макет нашей домашней страницы.

Также доступно в этой серии:

  1. WordPress: от новичка до мастера, часть 1
  2. WordPress: новичок в освоении, часть 2
  3. WordPress: новичок в освоении, часть 3
  4. WordPress: от новичка до мастера, часть 4
  5. WordPress: от новичка до мастера, часть 5
  6. WordPress: новичок в освоении, часть 6

Перейти в раздел

В этой части мы будем создавать первую полосу для нашего портфолио, используя нашу страницу параметров и обрабатывая настраиваемые поля в сообщениях. Прежде чем начать, создайте следующие файлы и папки в папке /wp-content/themes/ innovation / вы создали ранее:

  • /inc/
    • /cache/
  • header.php
  • footer.php
  • sidebar.php

Также сохраните этот сценарий TimThumb PHP Image Resizer как thumb.php в папке /inc/ . TimThumb — это «умный» скрипт изменения размера изображений PHP от Darren Hoyt .

Ниже приведен обзор того, как будет выглядеть наша главная страница:


Наш файл header.php будет содержать #head и #nav включая открывающие теги для #wrap , #content и .contentwrap .

footer.php будет содержать раздел #footer и закрывающие теги для #content и последнего раздела над ним (это может быть .contentwrap , .extraswrap или #sidebar зависимости от страницы).

Область .contentwrap будет содержать две последние публикации из нашей категории «Портфолио», а .extraswrap будет .extraswrap , .extraswrap для виджетов, где мы можем размещать виджеты с панели инструментов.

В верхней части файла header.php следующий код.

1
2
3
4
5
6
<!DOCTYPE html PUBLIC «-//W3C//DTD XHTML 1.0 Strict//EN» «http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd»>
<html xmlns=»http://www.w3.org/1999/xhtml» <?php language_attributes();
<head profile=»http://gmpg.org/xfn/11″>
<meta http-equiv=»Content-Type» content=»<?php bloginfo(‘html_type’); ?>; charset=<?php bloginfo(‘charset’); ?>» />
  
<title><?php wp_title(‘&laquo;’, true, ‘right’);

Как вы можете видеть, это в основном код, который вы добавляете в начало любого документа xHTML Strict, только мы заменили некоторые разделы функцией WordPress, которая будет выводить соответствующий код в зависимости от языка, на котором работает WordPress.

В конце кода находится наш заголовочный тег, который опять-таки использует функции WordPress для получения имени текущей страницы и названия сайта.

Далее мы включаем наш файл style.css используя WordPress bloginfo(); функция. Важно использовать эту функцию для включения основной таблицы стилей, а не для прямого ввода пути к файлу.

1
<link rel=»stylesheet» href=»<?php bloginfo(‘stylesheet_url’); ?>» type=»text/css» media=»screen» />

Затем код для получения правильной таблицы стилей цветовой схемы, выбранный из опций, которые мы создали в предыдущей части:

01
02
03
04
05
06
07
08
09
10
11
12
13
14
15
<?php
require(TEMPLATEPATH . «/var.php»);
  
if($ts_colourscheme) {
    if($ts_colourscheme == «Choose a colour scheme:») { ?>
        <link rel=»stylesheet» type=»text/css» media=»all»
        href=»<?php bloginfo(‘template_directory’); ?>/styles/deepblue.css» /><?php
    } else { ?>
        <link rel=»stylesheet» type=»text/css» media=»all»
        href=»<?php bloginfo(‘template_directory’); ?>/styles/<?php echo $ts_colourscheme; ?>» /><?php
    }
} else { ?>
    <link rel=»stylesheet» type=»text/css» media=»all»
    href=»<?php bloginfo(‘template_directory’); ?>/styles/deepblue.css» /><?php
} ?>

Таблица ниже объясняет, что делает приведенный выше код:


Мы проверяем, существует ли наша опция цветовой схемы ( $ts_colourscheme ) на странице опций, и была ли она установлена ​​правильно (то есть не оставлена ​​как «Выберите цветовую схему:»). Если этот параметр установлен неправильно или не существует, по умолчанию будет использоваться цветовая схема deepblue.css ; в противном случае мы используем таблицу стилей, которая была выбрана на странице параметров.

Продолжая, мы включаем наши каналы RSS & Atom и открываем тег body:

1
2
3
4
5
6
<link rel=»alternate» type=»application/rss+xml» title=»<?php bloginfo(‘name’); ?> RSS Feed» href=»<?php bloginfo(‘rss2_url’); ?>» />
<link rel=»alternate» type=»application/atom+xml» title=»<?php bloginfo(‘name’); ?> Atom Feed» href=»<?php bloginfo(‘atom_url’); ?>» />
<link rel=»pingback» href=»<?php bloginfo(‘pingback_url’); ?>» />
<?php wp_head();
</head>
<body>

Следующий код намного проще, чем предыдущий раздел. Как показано на рисунке выше, мы будем использовать больше функций WordPress для извлечения информации из базы данных WordPress:

1
2
3
4
5
6
<div id=»wrap»>
  
<div id=»head»>
    <h1><?php bloginfo(‘name’);
    <h3><?php bloginfo(‘description’);
</div>

bloginfo('name'); и bloginfo('description'); Функции извлекают соответствующие настройки со страницы «Общие настройки» в панели управления WordPress:



Получение списка страниц из базы данных также очень просто. Мы используем wp_list_pages(); функция. Обратите внимание, что мы также включаем title_li= аргумент. Это необходимо для того, чтобы функция не создавала дополнительный элемент списка под названием «Навигация:» перед перечислением страниц.

1
2
3
4
5
6
7
8
<div id=»nav»>
    <ul>
    <?php wp_list_pages(«title_li=»);
    </ul>
</div>
  
<div id=»content»>
<div class=»contentwrap»>

Мы также открыли соответствующие div и оболочки для следующего раздела.

Если вы сейчас перейдете к установке WordPress, она будет выглядеть примерно так:


Помните, что мы включим любые цветовые стили в deepblue.css чтобы deepblue.css можно было легко создавать разные цветовые схемы. Все остальное пойдет в style.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
*{padding:0;margin:0;}
  
body {
    font-family: Arial, Helvetica, sans-serif;
    }
      
p {
    font-size: 0.9em;
    line-height: 1.5em;
    margin-bottom: 10px;
    }
      
ul, ol {
    margin: 0 0 10px 10px;
    }
      
li {
    font-size: 0.9em;
    line-height: 1.5em;
    list-style-position: inside;
    margin-bottom: 3px;
    }
      
img {
    border: none;
    }
      
h1, h2, h3, h4, h5, h6 {
    font-weight: normal;
    }
      
h3, h4 {
    margin: 15px 0 2px 0;
    }
      
h4, h5, h6 {
    font-weight: bold;
    }
      
a:link, a:visited {
    text-decoration: none;
    }
      
a:hover, a:active, a:focus {
    text-decoration: underline;
    outline: none;
    }

Это должно выглядеть очень просто для всех, кто имеет базовое понимание HTML и CSS. Мы установили поля и отступы для всех элементов (*) в 0, чтобы переопределить стили по умолчанию, которые каждый браузер применяет к странице. Затем мы добавляем новые поля, размеры шрифта и высоту строк для основных элементов, чтобы улучшить читаемость среди них.

Далее мы создадим немного макета:

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
#wrap {
    margin: 0 auto;
    width: 980px;
    }
      
#head {
    margin: 25px 0;
    overflow: hidden;
    }
      
#head h1 {
    float: left;
    margin-left: 20px;
    }
      
#head h3 {
    font-family: Georgia, «Times New Roman», Times, serif;
    font-size: 0.8em;
    font-style: italic;
    float: right;
    line-height: 1.7em;
    text-align: right;
    margin: 0 20px 0 0;
    width: 500px;
    }

Элемент #wrap — это контейнер, в котором хранится все. Мы используем ширину 980 пикселей (это примерно столько, сколько мы можем достичь при разрешении 1024×768). И мы использовали margin: 0 auto; центрировать его в браузере.

Заголовок и слоганы ( h1 и h3 соответственно) затем перемещаются по обе стороны от контейнера.

#head имеет свойство overflow: hidden; так что он будет правильно удерживать плавающие элементы. Как правило, div не будет обтекать плавающих детей (как у нас здесь). Посмотрите на изображение ниже в качестве примера (желтый представляет поле, назначенное #head ):


01
02
03
04
05
06
07
08
09
10
11
12
#nav {
    border-top-left-radius: 15px;
    border-top-right-radius: 15px;
    -moz-border-radius-topleft: 15px;
    -moz-border-radius-topright: 15px;
    -webkit-border-top-left-radius: 15px;
    -webkit-border-top-right-radius: 15px;
    border-bottom: none;
    clear: both;
    padding: 0 20px;
    width: 939px;
    }

Посмотрите на изображения для предварительного просмотра в верхней части учебника, и вы заметите, что мы используем закругленные углы в верхней части раздела навигации. Вместо достижения этого эффекта с помощью множества изображений и дополнительных тегов HTML, мы собираемся использовать новое свойство CSS3 border-radius чтобы дать радиус 15 пикселей обоим верхним углам.

Тем не менее, современные браузеры пока не поддерживают это свойство, но браузеры на основе Mozilla и Webkit имеют свои собственные свойства -moz-border-radius и -webkit-border-radius которые мы также можем использовать, чтобы закругленные углы работали в Firefox 3 , Сафари и хром. Internet Explorer и Opera будут просто использовать прямоугольную границу до тех пор, пока они не будут поддерживать border-radius

Примечание. Использование этих специфичных для поставщика свойств в вашем CSS остановит проверку таблицы стилей. Но так как только они останавливают валидацию — кого это волнует?

Продолжая, мы стилем элементы списка в навигации для отображения встроенного (по горизонтали):

01
02
03
04
05
06
07
08
09
10
11
12
13
14
15
16
17
18
19
20
21
22
#nav ul {
    margin: 0;
    }
  
#nav ul li {
    display: inline;
    font-size: 1em;
    line-height: 1.3em;
    margin-right: 25px;
    }
      
#nav ul li a:link, #nav ul li a:visited {
    display: -moz-inline-stack;
    display: inline-block;
    font-weight: bold;
    text-decoration: none;
    padding: 20px 10px;
    }
      
#nav ul li a:hover, #nav ul li a:active, #nav ul li a:focus {
    outline: none;
    }

Обратите внимание, что мы используем display: -moz-inline-stack; по ссылкам. Это чисто для Firefox 2 и ниже, которые (по некоторым причинам) не поддерживают display: inline-block; — даже IE6 поддерживает это!

Мы даем много отступов ссылкам, чтобы увеличить кликабельную область (вместо того, чтобы вместо этого дополнять li ).

Теперь посмотрите на страницу в вашем браузере, и она должна выглядеть следующим образом. Лучше, но теперь нужен цвет!


Во-первых, сохраните следующее изображение в папку /styles/deepblue/ как bg.jpg .


И это изображение в той же папке, что и trans.png (на самом деле это темное полупрозрачное изображение размером 1px).


Теперь откройте /styles/deepblue.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
/* Innovation default style — deepblue.css */
  
body {
    background: url(«deepblue/bg.jpg») no-repeat #101010 top center fixed;
    color: #333;
    }
      
a:link, a:visited {
    color: #5c6e80;
    }
  
#head h1 {
    color: #eee;
    }
      
#head h3 {
    color: #ddd;
    }
      
#nav {
    background: url(«deepblue/trans.png») repeat;
    border: 1px solid #111;
    }
      
#nav ul li a:link, #nav ul li a:visited {
    color: #ddd;
    }
      
#nav ul li.current_page_item a:link, #nav ul li.current_page_item a:visited {
    background: url(«deepblue/trans.png») repeat;
    color: #eee;
    }
      
#nav ul li a:hover, #nav ul li a:active, #nav ul li a:focus {
    color: #eee;
    }

Мы установили большое фоновое изображение для тела (и исправили его, чтобы оно не двигалось при прокрутке), прозрачное изображение используется в качестве фона для навигации, и мы также установили некоторые цвета шрифта.

Предварительный просмотр, и теперь у вас будет что-то вроде:


Перед тем, как создать верхнюю часть нашей домашней страницы, где находятся два наших последних элемента портфолио, нам нужно протестировать несколько постов. Тема будет использовать несколько «Пользовательских полей» для отображения дополнительной информации для элементов портфолио:

  • date (дата завершения работы)
  • client (для кого была работа)
  • link (на живую версию вашей работы)
  • preview (URL-адрес изображения вашей работы шириной 930 пикселей)
  • preview-full (увеличенная версия работы, будет отображаться в лайтбоксе)

Создайте новый пост в блоге с названием проекта (как на картинке выше) и введите некоторый контент о работе. Поместите сообщение в категорию «Портфолио».

Перед сохранением записи прокрутите вниз до раздела «Пользовательские поля»:


Здесь введите каждое из пользовательских полей, представленных выше. Требуется только поле preview . Вы можете использовать следующие изображения для поля preview если у вас еще нет своего собственного (щелкните правой кнопкой мыши и сохраните):

Заполнив поля, вы можете опубликовать сообщение. Повторяйте этот процесс, пока у вас не будет хотя бы двух сообщений (желательно больше).


Теперь у нас есть все необходимые условия, и мы наконец можем кодировать основную часть домашней страницы. В page-home.php введите следующее:

1
2
3
4
5
<h2>Latest Projects</h2>
  
<?php query_posts(«cat=$ts_portfolio_cat&showposts=2»);
$counter = 0;
while (have_posts()) : the_post();

query_posts(); функция WordPress для получения определенных сообщений из базы данных Как вы можете видеть в аргументах для функции (части в скобках), мы говорим WordPress, чтобы он получал только 2 сообщения из категории «Портфолио» ( $ts_portfolio_cat получает информацию со страницы параметров, которую мы создали).

С while(); Мы запустили «WordPress Loop». Здесь мы можем сказать WordPress, какая часть каждого поста нам нужна.

1
2
3
4
$counter++;
$preview = get_post_meta($post->ID, ‘preview’,true);
$date = get_post_meta($post->ID, ‘date’,true);
?>

В первой строке мы добавили один к счетчику (мы скоро будем его использовать). $counter++; сокращенная запись $counter = $counter + 1;

Затем мы используем get_post_meta(); функции для получения наших пользовательских полей ‘preview’ и ‘date’ из поста, которые помещаются в переменные $preview и $date соответственно.

1
<div class=»work <?php if($counter == 2) { echo «last»; $counter = 0; } ?>»>

Выше мы создали div с work классом для элемента портфолио, который будет удерживаться. Но обратите внимание, что мы также проверяем, что если наш $counter равен 2 (имеется в виду, что это второй элемент портфолио), мы добавляем другой класс в div названный last Этот класс пригодится, когда мы создадим стиль этого раздела.

Далее мы выводим изображение для предварительного просмотра:

1
<?php if($preview) { ?>

Если изображение для предварительного просмотра существует, то мы …

1
2
3
4
5
<a href=»<?php the_permalink(); ?>»>
    <img src=»<?php bloginfo(‘template_directory’); ?>/inc/thumb.php?src=<?php echo $preview; ?>&amp;w=450&h=210&amp;zc=1&amp;q=100″ alt=»<?php the_title(); ?>» />
</a>
<?php
} ?>

the_permalink(); Функция используется для вывода ссылки на текущий пост.

Затем мы выводим изображение для предварительного просмотра. Но мы также запускаем его через ресайзер TimThumb, чтобы изменить размер изображения до 450 пикселей в ширину и 210 пикселей в высоту (из изображения 930 пикселей это действительно так). Обратите внимание, как мы используем bloginfo('template_directory'); чтобы убедиться, что WordPress выполняет проверку в нашей папке тем (это эквивалент TEMPLATEPATH мы использовали в предыдущей части серии).

Теперь нам просто нужно вывести строку текста, которая идет под изображением (заголовок и дата):

01
02
03
04
05
06
07
08
09
10
<p>
<a href=»<?php the_permalink(); ?>»>
    <?php the_title();
</a> <?php
  
if($date) {
    echo»<span>($date)
} ?>
  
</p>

Это относительно просто. Мы используем the_permalink(); еще раз, чтобы получить ссылку на текущий пост. the_title(); используется для получения заголовка текущего сообщения.

Затем мы проверяем, было ли введено пользовательское поле $date переменной $date ) для этой записи. Если так, мы выводим это.

1
2
3
4
5
</div><!—/work—>
  
<?php endwhile;
  
</div><!—/contentwrap—>

Наконец, мы закрываем текущий work div, закрываем цикл WordPress с помощью endwhile; и закройте div contentwrap который был создан в заголовке.

Взгляните на домашнюю страницу в вашем браузере, чтобы увидеть этот замечательный шедевр:


Хорошо, возможно нет; но ничто немного CSS не может исправить. Добавьте следующее в style.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
#content {
    -moz-border-radius-bottomleft: 5px;
    -moz-border-radius-bottomright: 5px;
    -webkit-border-bottom-left-radius: 5px;
    -webkit-border-bottom-right-radius: 5px;
    border-bottom-left-radius: 5px;
    border-bottom-right-radius: 5px;
    float: left;
    padding: 19px 19px 30px 0;
    margin-bottom: 5px;
    overflow: hidden;
    width: 960px;
    }
      
.contentwrap {
    padding-left: 19px;
    overflow: hidden;
    }
      
#content h2 {
    font-weight: bold;
    letter-spacing: -1px;
    margin-bottom: 10px;
    }

#content — это оболочка для хранения всего основного содержимого. Мы добавили скругленные границы внизу, используя тот же метод, который мы использовали в навигации.

Внутри deepblue.css добавьте следующее, чтобы добавить светлый цвет фона к #content , а также определите цвет границы:

1
2
3
4
5
#content {
    background-color: #f9f9f3;
    border: 1px solid #111;
    border-top: none;
    }

Очевидно, что элементы должны отображаться в строке (бок о бок). Мы сделаем это, просто установив float: left; к обоим вместе с некоторыми полями внутри style.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
.work {
    float: left;
    margin: 0 20px 40px 0;
    width: 460px;
    }
      
.work a {
    outline: none;
    }
      
.work p {
    font-size: 0.9em;
    font-weight: bold;
    margin: 8px 0 10px 0;
    }
  
.worksingle p {
    font-weight: normal;
    }
  
.work span {
    font-size: 0.8em;
    font-weight: normal;
    }

Предварительный просмотр, и вы заметите, что элементы по-прежнему отображаются друг под другом. Быстрая проверка с помощью Firebug показывает, что второму предмету недостаточно места для правого поля.

Вот где появляется этот счетчик, добавляющий class="last" ко второму элементу:

1
2
3
.last {
    margin-right:0 !important;
    }

Мы еще не совсем закончили. Присмотритесь к нашему изображению конечного продукта, и вы заметите, что нам также нужно установить границу вокруг изображения портфолио, которая меняет цвет при наведении курсора.

Добавьте следующие цветовые стили в deepblue.css :

01
02
03
04
05
06
07
08
09
10
11
.work a:link img, .work a:visited img {
    border: 5px solid #e3e8ed;
    }
      
.work a:hover img, .work a:active img, .work a:focus img {
    border: 5px solid #5c6e80;
    }
      
.work a:link, .work a:visited {
    color: #333;
    }

Область .extraswrap домашней страницы готова к виджетам (максимум 3 виджета), то есть мы можем добавлять их и управлять ими непосредственно с панели управления WordPress — так же, как и для боковой панели с широкими возможностями:


Во-первых, нам нужно сказать WordPress создать новую область виджетов с помощью функции register_sidebar() . Следующий код идет в конце вашего файла functions.php :

1
2
3
4
5
6
7
8
9
if ( function_exists(‘register_sidebar’) ) {
    register_sidebar(array(
        ‘name’ => ‘Homepage Bottom’,
        ‘before_widget’ => ‘<div class=»extras»>’,
        ‘after_widget’ => ‘</div>’,
        ‘before_title’ => ‘<h2>’,
        ‘after_title’ => ‘</h2>’,
    ));
}

Внутри register_sidebar() мы передаем массив, содержащий некоторую информацию для нашей области виджетов. name используется для его идентификации, когда у нас есть несколько областей виджетов (или боковых панелей). before_widget и after_widget — это код, используемый для after_widget каждого отдельного виджета. По умолчанию это будет элемент списка; вместо этого мы используем div.

before_title и after_title — это то, что используется для before_title after_title отдельного виджета.

Теперь, чтобы включить этот виджет на нашу домашнюю страницу, добавьте следующее в конец page-home.php :

1
<div class=»extraswrap»>
1
2
<?php dynamic_sidebar(‘Homepage Bottom’);
get_footer();

Сначала мы открываем наш упаковочный div, а затем используем dynamic_sidebar(); функция — через которую мы передаем имя области виджета, которую мы использовали ранее, при регистрации области. Наконец, мы включаем наш файл footer.php используя get_footer() (так же, как мы включили заголовок).

Добавьте три тестовых виджета в область через «Внешний вид» -> «Виджеты» -> «Нижняя страница домашней страницы».


И просмотреть его:


Чтобы отобразить их все встроенные, используйте следующий код в style.css :

01
02
03
04
05
06
07
08
09
10
.extraswrap {
    margin-top: 10px;
    overflow: hidden;
    }
  
.extras {
    float: left;
    margin: 0 0 0 20px;
    width: 300px;
    }

Мы также собираемся стилизовать плагин Flickr & Twitter. Во-первых, установите плагины FlickrRSS и Twitter для WordPress .

В меню «Настройки» -> «FlickrRSS» введите свой идентификационный номер Flickr, используя предоставленные инструкции (или воспользуйтесь моим: 31912870@N03 ), установите для него использование 9 квадратных изображений; а для раздела HTML Wrapper используйте:

Перед изображением: <div class="flickr">

После изображения: </div>

Это позволит нам легко стилизовать и позиционировать изображения.

Перейдите и поменяйте местами два виджета в области домашней страницы на Flickr и Twitter (не забудьте ввести свои данные Twitter в разделе «Редактировать» на виджете).



Введите следующий стиль в style.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
/* style FlickrRSS widget */
.flickr {
    display: inline;
    }
      
.flickr a:link img, .flickr a:visited img {
    margin: 0 10px 10px 9px;
    }
  
/* style Twitter widget */
ul.twitter {
    margin: 0;
    }
      
ul.twitter li.twitter-item {
    -moz-border-radius: 10px;
    -webkit-border-radius: 10px;
    border-radius: 10px;
    list-style: none;
    margin-bottom: 20px;
    padding: 8px 10px;
    }
      
ul.twitter li.twitter-item span abbr {
    border-bottom: none;
    display: block;
    font-size: 0.8em;
    font-style: italic;
    margin-top: 3px;
    }

Стиль Flickr отображает каждое изображение встроенным и устанавливает соответствующие поля для размещения трех изображений в строке. В стилях Twitter мы добавили несколько полей и отступов для разделения каждого твита, а также снова использовали border-radius .

Также добавьте следующее в deepblue.css :

01
02
03
04
05
06
07
08
09
10
11
12
.flickr a:link img, .flickr a:visited img {
    border: 3px solid #e3e8ed;
    }
      
.flickr a:hover img, .flickr a:active img, .flick a:focus img {
    border: 3px solid #5c6e80;
    }
  
ul.twitter li.twitter-item {
    background-color: #f6f5ed;
    border: 1px solid #eae9de;
    }

Каждое изображение Flickr теперь имеет рамку, над которой мы можем навести курсор, аналогично тому, что мы использовали для изображений портфолио.


Внутри footer.php вставьте следующий код. Мы закрываем соответствующие теги и добавляем уведомление об авторских правах. Не стесняйтесь удалить упоминание о себе и NETTUTS, хотя было бы полезно, если бы вы дали нам ссылку как-нибудь. Мы также добавили код Google Analytics со страницы параметров.

01
02
03
04
05
06
07
08
09
10
11
12
13
14
15
16
</div><!—/contentwrap or /sidebar or /extraswrap on homepage—>
</div><!—/content—>
  
<p class=»footer»>Copyright &copy;
<?php bloginfo(‘name’);
Design by <a href=»http://www.danharper.me»>Dan Harper</a> for
<a href=»http://www.nettuts.com»>NETTUTS</a>.
Powered by <a href=»http://www.wordpress.org»>WordPress</a>.</p>
  
</div><!—/wrap—>
<?php
wp_footer();
include(TEMPLATEPATH . «/var.php»);
echo stripslashes($ts_analytics_code);
</body>
</html>

Добавьте следующее в style.css :

1
2
3
4
5
6
p.footer {
    clear: both;
    font-size: 0.7em;
    font-style: italic;
    padding: 5px 20px;
    }

И для deepblue.css :

01
02
03
04
05
06
07
08
09
10
11
12
13
p.footer {
    color: #ccc;
    }
      
p.footer a:link, p.footer a:visited {
    color: #ccc;
    border-bottom: 1px dashed;
    }
      
p.footer a:hover {
    border-bottom: 1px solid;
    text-decoration: none;
}

На этом заканчивается второй день недели WordPress, и мы довольно много сделали! Завтра мы переходим к макету страницы «Блог» и учимся стилизовать «отдельные сообщения» в зависимости от того, в какой категории они находятся.

Часть 3 — Стилизация блога

36
Share: