Урок #15. Интеграция вёрстки. Страница 404. Создание темы WordPress.
Страница 404 является самой простой при интеграции, потому что нам не нужно использовать циклы для вывода информации. Сейчас вы сами в этом убедитесь.
Подготовка к интеграции
0. Переименовываем файл 404.html в 404.php.
Разбиение на блоки: header, sidebar и footer
Открываем файл 404.php для внесения изменений.
Выделяем весь код сверху до закрытия блока div с классом header и удаляем его. У вас должен быть удалён этот участок кода.
<!DOCTYPE html> <html> <head> <!-- Charset --> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" /> <!-- Page info --> <title>404 страница</title> <meta name="language" content="ru"> <!-- Favicon --> <link rel="shortcut icon" href="favicon/favicon.png" type="image/png"> <link rel="shortcut icon" href="favicon/favicon.ico" type="image/x-icon"> <link rel="apple-touch-icon" sizes="60x60" href="favicon/favicon_apple_60.png"> <link rel="apple-touch-icon" sizes="76x76" href="favicon/favicon_apple_76.png"> <link rel="apple-touch-icon" sizes="120x120" href="favicon/favicon_apple_120.png"> <link rel="apple-touch-icon" sizes="152x152" href="favicon/favicon_apple_152.png"> <!-- Style CSS--> <link rel="stylesheet" href="reset.css"> <link rel="stylesheet" href="style.css"> <!-- JQuery Library --> <script type="text/javascript" src="http://code.jquery.com/jquery.min.js"></script> </head> <body> <!-- Обёртка --> <div id="wrapper"> <!-- Шапка --> <div class="header"> <!-- Название блога и описание --> <div class="bloginfo"> <h1><a href="">Блог Артёма Санникова</a></h1> <p>Подробные пошаговые обучающие уроки по сайтостроению и продвижению.</p> </div> <!-- Навигация --> <div class="nav"> <ul> <li class="current_page_item"><a href="">Главная</a></li> <li><a href="">Об авторе</a></li> <li><a href="">Контакты</a></li> <li><a href="">Карта сайта</a></li> </ul> </div> </div>
Вместо удалённого кода вставляем функцию для подключения файла header.php.
<?php get_header(); ?>
Выделяем блоки sidebar и footer, а затем удаляем их. На их место вставляем конструкции для подключения файлов sidebar.php и footer.php.
<?php get_sidebar(); ?> //подключение файла sidebar.php <?php get_footer(); ?> //подключение файла footer.php
Область для вывода текста страницы
На странице 404 нам не нужно запускать цикл для вывода информации, так как эта страница в основном является статической и замена информации происходит редко. Нам нужно всего лишь внести одну небольшую правку в блок text-post.
Перемещаемся в блок div с классом text-post, находим текст:
<p>Попробуйте вернуться на <a href="">главную страницу</a>, и повторите поиск.</p>
В атрибут href ссылки вставляем функцию, которая будет автоматически выводить адрес главной страницы.
<p>Попробуйте вернуться на <a href="<?php bloginfo('url'); ?>">главную страницу</a>, и повторите поиск.</p>
Интеграция завершена
Страница 404 успешно прошла интеграцию и теперь она готова к работе.
Окончательный вариант страницы 404.php представлен ниже.
<?php get_header(); ?> <!-- Область для вывода контента --> <div class="content"> <!-- Информация о записи страницы/записи--> <div class="title-404"> <h1>Ошибка #404 - Ничего не найдено</h1> </div> <!-- Текст страницы/записи --> <div class="text-post"> <p>Извините, запрашиваемая страница не найдена!</p> <p>Попробуйте вернуться на <a href="<?php bloginfo('url'); ?>">главную страницу</a>, и повторите поиск.</p> </div> </div> <?php get_sidebar(); ?> <?php get_footer(); ?> </div> </body> </html>
Если у вас остались какие-то вопросы или вы нашли непонятный момент в описании, пишите в комментариях ниже и я вам обязательно отвечу.
С уважением, Артём Санников
Сайт: ArtemSannikov.ru
Метки: Wordpress, Создание темы.