Создание WordPress темы - header.php. Часть 1.

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

WordPress Header.php

  1. Затираем все мета-описания типа Author - за мета-теги должны отвечать сторонние плагины типа All in one SEO pack.
  2. Кодировку документа будем получать исходя из текущих настроек WP, потому заменяем имеющееся
    <meta http-equiv="content-type" content="text/html; charset=utf-8" />
    на
    <meta http-equiv="content-type" content="<?php bloginfo('html_type'); ?>; charset=<?php bloginfo('charset'); ?>" />
    
  3. Указываем язык документа согласно той же логике.

    <meta http-equiv="content-language" content="<?php bloginfo('language'); ?>" />
    
  4. Прописываем свой заголовок:

    <title><?php
    	/*
    	 * Разный <title> в зависимости от просматриваемой странички
    	 */
    	global $p1, $p2;
    
    	wp_title( '|', true, 'right' );
    
    	// Добавим наименование сайта.
    	bloginfo( 'name' );
    
    	// Добавим слоган блога только на главную/домашнюю страницу.
    	$description = get_bloginfo( 'description', 'display' );
    	if ( $description and ( is_home() || is_front_page() ) )
    		echo ' | '.$description;
    
    	// Номер страницы также добавим, если необходимо:
    	if ( $p2 >= 2 or $p1 >= 2 )
    		echo ' | Страница ' . max( $p2, $p1 ) ;
    
    	?></title>
    
    
  5. Делаем вывод имени и слогана проекта:

    		<p id="logo"><a href="./" title="[Перейти на домашнюю страницу]"><?php bloginfo('name'); ?><span>блог</span></a></p>
    		
    		<h3 id="slogan"><?php bloginfo('description'); ?></h3>
    
    
  6. Задаем показ главного меню:

    		<ul>
    		<?php if (get_option('show_on_front') == 'posts') : ?>
    			<li<?php if (is_home()) : echo ' class="current_page_item"'; endif; ?>><a href="<?php bloginfo('url'); ?>">Главная</a></li>
    		<?php endif; ?>
    			<?php wp_list_pages('title_li=&depth=1'); ?>			
    		</ul>
    По условию проверяем представлена ли главная последними записями, если да, тогда печатаем ссылку. wp_list_pages - выводит меню из страниц, depth (глубина) будет равна единице, т.к. наше меню будет достаточно простым.
  7. Пришло время править стили (если вы будете внимательными, то заметите отличия кода выше от исходной html-разметки. Находим в "main.css" 40-ю строчку:
    #nav ul li:last-child a {background:none;}
    #nav ul li.current a {font-weight:bold;}
    
    Заменяем на псевдокласс плюс ещё кое-какие поправки с учетом API WordPress:
    #nav ul li:last-child a {background:none;}
    #nav ul li.current_page_item a {font-weight:bold;}
    
    Более универсальный синоним переоформления последнего дочернего элемента  списка.

Исходный код данной заметки смотрим здесь. темизацией поисковой формы, "социальными" ссылками и навигационными хлебными крошками займемся в следующих уроках.





© 2012-2014 Druweb.ru. Вы можете спокойно копировать любые материалы сайта только при наличии обратной ссылки.