Сборка собственного шаблона wordpress. Часть 3

Опубликовано: 21-11-2012 ˑ В разделе: Wordpress ˑ  Комментариев нет

Мы теперь видим наш сайт, но не можем менять содержимое. По сути, это все еще статичный html разбитый на несколько кусочков-файлов.

Не будем изобретать велосипед и возьмем на заметку файл header.php из шаблона twentyten.

Не будем брать оттуда ничего лишнего. Возьмем самое необходимое.

1. для начала определим язык, который используется на сайте с помощью wordpress:
заменим

<html lang="en">

на

<html <?php language_attributes(); ?>>

2. укажем кодировку не явным образом, а через движок

заменим

<meta charset="utf-8">

на

<meta charset="<?php bloginfo( 'charset' ); ?>" />

3. далее рассмотрим тег title

берем все что есть в версии для шаблона twentyten
вместо

<title>2 Column Layout with a top Menu</title>

мы вставляем

<title><?php
	global $page, $paged;
	wp_title( '|', true, 'right' );

	// Выводим название нашего сайта.
	bloginfo( 'name' );

	// Выводим Краткое описание для главной страницы.
	$site_description = get_bloginfo( 'description', 'display' );
	if ( $site_description && ( is_home() || is_front_page() ) )
		echo " | $site_description";

	// Выводим номера страниц если необходимо:
	if ( $paged >= 2 || $page >= 2 )
		echo ' | ' . sprintf( __( 'Page %s', 'plab' ), max( $paged, $page ) );

	?></title>

Больше раздел head в файле header.php нашего шаблона мы пока трогать не будем.

4. Идем ниже и в теге header нашего шаблона выведем название нашего сайта и краткое описание.

находим вот эту часть

<hgroup>
<h1>Ampersand Solutions</h1>
<h2>Very catchy Strapline</h2>
</hgroup>

заголовок h1 название сайта

<h1><?php bloginfo( 'name' ); ?></h1>

заголовок h2 краткое описание

<h2><?php bloginfo( 'description' ); ?></h2>

5. Мы добрались с вами до важной части шаблона, которая выводит меню в шапке.

в шаблоне twentyten находим строчку (103) и копируем ее в свой шаблон

<?php wp_nav_menu( array( 'container_class' => 'menu-header', 'theme_location' => 'primary' ) ); ?>

получаем вместо

<nav>
<ul>
<li><a href="#">Home</a></li>
<li><a href="#">Example 1</a></li>
<li><a href="#">Example 2</a></li>
<li><a href="#">Example 3</a></li>
</ul>
</nav>

меню, которое отображает пока только все страницы вашего сайта, но не рубрики и не записи.

<nav>
<?php wp_nav_menu( array( 'container_class' => 'menu-header', 'theme_location' => 'primary' ) ); ?>
</nav>

для того, чтобы управлять нашим меню и составлять его по своему усмотрению — необходимо создать в папке нашего шаблона файл functions.php, в котором пока запишем:

<?php
	register_nav_menus( array(
		'primary' => __( 'Primary Navigation', 'plab' ),
	) );
?>

и теперь в разделе «Внешний вид» \ «Меню» нашей админки мы сможем создать наше персональное меню.

Подводим итог 3 части

теперь наш файл header.php выглядит вот так:

<!DOCTYPE html>
<html <?php language_attributes(); ?>>
<head>
<meta charset="<?php bloginfo( 'charset' ); ?>" />
<title><?php
	global $page, $paged;
	wp_title( '|', true, 'right' );

	// Выводим название нашего сайта.
	bloginfo( 'name' );

	// Выводим Краткое описание для главной страницы.
	$site_description = get_bloginfo( 'description', 'display' );
	if ( $site_description && ( is_home() || is_front_page() ) )
		echo " | $site_description";

	// Выводим номера страниц если необходимо:
	if ( $paged >= 2 || $page >= 2 )
		echo ' | ' . sprintf( __( 'Page %s', 'themeNAME' ), max( $paged, $page ) );

	?></title>
<!-- The below script Makes IE understand the new html5 tags are there and applies our CSS to it -->
<!--[if IE]>
<script src="http://html5shiv.googlecode.com/svn/trunk/html5.js"></script>
<![endif]-->
<link rel="stylesheet" type="text/css" href="<?php bloginfo('stylesheet_url'); ?>" media="screen" />
<?php wp_head (); ?>
</head>
 
<body>
 
<header>
<hgroup>
<h1><?php bloginfo( 'name' ); ?></h1>
<h2><?php bloginfo( 'description' ); ?></h2>
</hgroup>
<nav>
<ul>
<?php wp_nav_menu( array( 'container_class' => 'menu-header', 'theme_location' => 'primary' ) ); ?>
</ul>
</nav>
<a href="#" title="Ampersand Solutions homepage"><img src="<?php bloginfo('template_url'); ?>/images/logo.gif" alt="Ampersand Solutions" /></a></header>

В следующей части будем разбирать вывод записей нашего сайта.

Метки: , ,


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