Пошаговое руководство по верстке на вордпресс. Глава вторая: создаем скелет
В этой главе мы научимся выводить на экран отдельную страницу и меню, а также узнаем разницу между записями и страницами и подробнее изучим скелет WP. Итак, результатом прошлой главы у нас стал белый экран. Это не совсем то, что нам требуется, поэтому пойдем дальше.
Страницы и записи
По сути дела сайт на ворпрессе состоит из страниц и записей. Эти два типа выводимого контента очень похожи, да и в большинстве случаев взаимозаменяемы. Все, что вам надо знать для интеграции верстки в WP – это то, что страницы чаще всего представляют собой статичный контент.
Для каждой страницы делается свой шаблон – и они, чаще всего опять же, являются корневыми в меню. Страницы – это «Главная», «О нас», «Портфолио», «Блог», «Контакты» и так далее. У нас на сайте получается 6 страниц, вот мы их сразу и добавим.
Наполнять контентом пока не будем – я это обычно делаю в последнюю очередь. Дело в том, что WP нередко добавляет собственные стили в содержимое страниц и записей, так что лучше все сделать сразу после оформления всех стили (мы же внесем и свои, верно?).
Скелет WP
Любая тема вордпресс состоит из заголовка, вывода основной части и подвала. Создайте заготовки для нескольких файлов и залейте их на сервер в папку upread. Файл header.php:
<!doctype html>
<html>
<head>
<meta http-equiv="Content-type" content="text/html; charset=<?php bloginfo('charset'); ?>">
<meta http-equiv="X-UA-Compatible" content="IE=Edge">
<title><?php wp_title('', true, 'right'); ?> <?php bloginfo('name'); ?></title>
<link rel="pingback" href="<?php bloginfo('pingback_url'); ?>" />
<?php wp_head(); ?>
</head>
<body <?php body_class(); ?>>
<script src="//ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script>
<div class="wrapper">
<header>
<a href="/" class="logo"><img src="<?php bloginfo('template_url'); ?>/images/logo.png" alt="" style="height: 110px;"></a>
<? wp_nav_menu( array('menu' => 'topp' , 'menu_class' => 'top-menu')); ?>
</header>
Файл footer.php:
</div> <footer></footer> <?php wp_footer(); ?> </body> </html>Файл functions.php:
<?php
function enqueue_styles() {
wp_enqueue_style( 'upread-style', get_stylesheet_uri());
wp_register_style('font-style', 'http://fonts.googleapis.com/css?family=Oswald:400,300');
wp_enqueue_style( 'font-style');
}
add_action('wp_enqueue_scripts', 'enqueue_styles');
function enqueue_scripts () {
wp_register_script('html5-shim', 'http://html5shim.googlecode.com/svn/trunk/html5.js');
wp_enqueue_script('html5-shim');
}
add_action('wp_enqueue_scripts', 'enqueue_scripts');
show_admin_bar(false);
if (function_exists('add_theme_support')) {
add_theme_support('menus');
}
register_sidebar(array(
'name' => __('Виджеты на странице поста'),
'id' => 'postin-widget-area',
'description' => __('Виджеты на странице поста'),
'before_widget' => '',
'after_widget' => '',
'before_title' => '<h3><a href="#">',
'after_title' => '</a></h3>',
));
add_theme_support( 'post-thumbnails' ); // для всех типов постов
remove_filter('the_content', 'wpautop');
?>
Файл page.php:
<?php get_header(); ?> <div class="main-heading"> <h1><?php the_title(); ?></h1> </div> <section> <?php if (have_posts()): while (have_posts()): the_post(); ?> <?php the_content(); ?> <?php endwhile; endif; ?> </section> <?php get_footer(); ?>Пока просто скопируйте и особо не переживайте насчет того, что ничего не понятно – мы подробно разберем все строчки в этих файлах по мере необходимости. А такая необходимость уже возникла. Например, за что отвечает эта строка?
<link rel="pingback" href="<?php bloginfo('pingback_url'); ?>" />
Это такая команда так называемой pingback system – система обратной отсылки команды ping. С помощью этой строки вы сможете узнать, если какой-то блог на WordPress поставил ссылку на ваш сайт. Ну и наоборот.
Меню
После редактирования файла с функциями, у вас должна появиться возможность создания меню – воспользуемся ей. Создадим меню с названием topp и добавим в него все наши страницы.
Теперь самое время немного изменить стили. Файл style.css:
.logo {
display: block;
float: left;
}
.top-menu {
margin-left: 188px;
height: 70px;
border-bottom: 1px solid #D0D0D0;
padding: 6px 0 0;
}
.top-menu li {
display: inline-block;
}
И теперь мы можем наблюдать вот такую картину:
Все еще довольно далеко от оригинала, но по крайне мере уже не белый экран. Продолжение следует...
Автор этого материала - я - Пахолков Юрий. Я оказываю услуги по написанию программ на языках Java, C++, C# (а также консультирую по ним) и созданию сайтов. Работаю с сайтами на CMS OpenCart, WordPress, ModX и самописными. Кроме этого, работаю напрямую с JavaScript, PHP, CSS, HTML - то есть могу доработать ваш сайт или помочь с веб-программированием. Пишите сюда.
Программы на заказ
Отзывы
Контакты