УРОК 6. ВЫВОД ТИПОВЫХ БЛОКОВ И НОВОСТЕЙ

В папке с темой создадим следующие файлы:

header.php, sidebar.php, footer.php

Переместить код соответствующих блоков (header, sidebar, footer), находящийся в файле index.php в эти файлы и подключим их через стандартные функции WordPress

<?php get_header(); ?>

Например, код шапки

Скопируем в файл header.php и выведем шапку в index.php кодом

<?php get_header(); ?>

также для других блоков

<?php get_sidebar(); ?>

<?php get_footer(); ?>

в footer добавим

<?php wp_footer(); ?>

Вывод новостей в WordPress

Для этого создадим Рубрику Новости в Консоли WordPress

Сделаем эту рубрику основной

удалим Рубрику «Без рубрики»

Создадим 4 новости в рубрике Новости, скопировав содержимое c сайта iee.unn.ru

Выводим на главной странице эти новости (последние записи)

Циклы и вывод записей

Цикл используется в WordPress для вывода записей (новостей). С помощью циклов WordPress обрабатывает каждую из записей для вывода на текущей странице и форматирует ее в соответствии с указанными критериями внутри цикла. HTML или PHP код, расположенный внутри Цикла, будет повторен для каждой записи.

Внутри блока контент добавим следующий код

Смотрим, что получается

Новости не оформлены графически

Для оформления обернем каждую новость блоком post

Зададим отступы для каждой новости величиной 10px

Также уберем параметр высота и заливка блока content

Параметры записей в WordPress

Выводим заголовки новостей с помощью функции the_title();

Ссылку на новость выведем с помощью функции the_permalink();

Уменьшим размер текста заголовка до размеров текста новости

Поддержка миниатюр в WordPress

Добавим поддержку миниатюр для новостей в файле functions.php

add_theme_support(‘post-thumbnails’); // устанавливаем поддержку миниатюр

set_post_thumbnail_size(150, 150, TRUE); // устанавливаем размер миниатюр

Заходим в режим редактирования новости

В консоли появится соответствующий блок (Миниатюра записи) через который мы прикрепим к каждой новости миниатюру. Прикрепите миниатюру к каждой записи. Картинки возьмите с сайта iee.unn.ru

Вывод миниатюр в index.php осуществляется с помощью функции the_post_thumbnail();

Смотрим что получается

Зададим обтекание текста справа и отступ справа от картинки в размере 10px, а также серую рамку вокруг картинки

Код в style.css будет выглядеть следующим образом

Выведем неполный текст новости с возможностью вывода на полный текст

Для этого в режиме редактирования консоли в нужном месте щелкнем по кнопке more

Обновим запись и посмотрим что получилось

Появилась ссылка далее с возможностью перехода на полный текст новости

Чтобы изменить текст ссылки (далее…), выводимый по умолчанию, добавим нужный параметр для функции the_content:

<?php the_content(‘Читать далее’); ?>

Вывод часть записей на главную страницу

Через настройки wordpress выведем вместо 3 записи (вместо 4-х).

На главной странице пропала новость 4

Для вывода предыдущих или следующих новостей используются функции:

next_posts_link

previous_posts_link

Для оформления этих ссылок используем класс link

Задайте параметры для класса link: выравнивание по центру, отступы 30px, ссылка меняет цвет при наведении на бордовый

Шаблоны записей и страниц

single.php – шаблон, отвечающий за вывод одиночных записей (новостей), т.е. определяет какой будет выглядеть внешний вид записи

page.php – шаблон, отвечающий за вывод страниц сайта, т.е. определяет внешний вид стационарной страницы

Создайте эти 2 файла с кодом index.php, несколько скорректировав его.

Оформите шапку сайта с помощью блочной верстки (самостоятельно)

Картинки в wordpress выводятся следующим образом:

(если файл logo.png хранится в папке images)

Под новостями выведем блок Видео

Каждое видео выводим с помощью тэга <iframe></iframe> высотой 180px, шириной 280px

Подписи видео выводит с помощью тэга <p>

Каждое видео заключаем в отдельный <div>

Ссылки на видео:

• https://www.youtube.com/embed/KDBgFlTTLF8
• https://www.youtube.com/embed/tPc3TRWLG4s
• https://www.youtube.com/embed/AlAvbbrQ5F0

Самостоятельно оформите подвал сайта

Под ним блоки соц. сетей

Вывод виджета ВКонтакте осуществляется скриптом:

Вывод не типовых блоков 

Блоки видео и соц. сетей подключите через функцию include, предварительно создав php-файлы (video.php, social.php) :

<?php include(TEMPLATEPATH. ‘/video.php’); ?>

Блок footer мы подключали ранее с помощью функции get_footer();

ПОИСК НА САЙТЕ

Вставим в блок search следующий код:

<?php get_search_form(); ?>

 ВИДЖЕТЫ

Подключим поддержку виджетов в function.php

Выводим виджеты в sidebar.php и footer.php

В Консоли — Виджеты отобразились виджеты с именами sidebar и footer

Выводим нужные виджеты через Консоль