УРОК 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
Выводим нужные виджеты через Консоль