На нашем сайте мы используем cookie для сбора информации технического характера и обрабатываем IP-адрес вашего местоположения. Продолжая использовать этот сайт, вы даете согласие на использование файлов cookies. Здесь вы можете узнать, как мы пользуемся файлами cookies.
Я согласен
логотип upread.ru

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



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





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



Урок 39. Коллекция Стек (Stack) C#
Героическое фэнтези не на вечер


© upread.ru 2013-2023
При перепечатке активная ссылка на сайт обязательна.
Задать вопрос
письмо
Здравствуйте! Вы можете задать мне любой вопрос. Если не получается отправить сообщение через эту форму, то пишите на почу up777up@yandex.ru
Отправляя сообщение я подтверждаю, что ознакомлен и согласен с политикой конфиденциальности данного сайта.