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

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

header.php, sidebar.php, footer.php

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

<?php get_header(); ?>

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

код блока header

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

<?php get_header(); ?>

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

<?php get_sidebar(); ?>

<?php get_footer(); ?>

в footer добавим

<?php wp_footer(); ?>

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

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

Создание Рубрики в WordPress

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

Задаем рубрику wordpress основной

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

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

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

вывод последних записей на главную страницу wordpress

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

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

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

вывод записей через цикл

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

вывод записей без оформления

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

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

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

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

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

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

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

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

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

размер текста заголовка до размеров текста новости в стилях

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

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

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

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

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

задание миниатюры в записях

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

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

код вывода миниатюры в wordpress

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

результат вывода миниатюр в wordpress

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

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

оформление миниатюры в stylecss

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

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

редактирвоание записи в wordpress

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

запись в wordpress по умолчанию

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

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

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

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

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

настройка вывода части записей

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

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

next_posts_link

previous_posts_link

функции next_posts_link и previous_posts_link

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

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

оформление ссылок в стилях

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

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

внешний вид новости в wordpress

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

внешний вид страницы сайта

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

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

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

вывод картинки в wordpress

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

шапка сайта

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

блок с видео

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

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

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

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

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

подвал сайта ИЭП

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

блок социальных сетей

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

код виджета Вконтакте

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

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

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

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

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

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

<?php get_search_form(); ?>

 ВИДЖЕТЫ

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

поддержка виджетов в functions

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

вывод виджетов в indexphp

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

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

вывод виджетов в консоли wordpress

Добавить комментарий

Войти с помощью: