Пошаговое руководство по верстке на вордпресс. Глава вторая: создаем скелет

В этой главе мы научимся выводить на экран отдельную страницу и меню, а также узнаем разницу между записями и страницами и подробнее изучим скелет 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 - то есть могу доработать ваш сайт или помочь с веб-программированием. Пишите сюда.

заметки, wordpress, верстка

Отправляя сообщение я подтверждаю, что ознакомлен и согласен с политикой конфиденциальности данного сайта.

Программирование up

Мои услуги