Разработка темы для WordPress с нуля

wordpress

Сайт на CMS WordPress можно сделать при помощи хорошо подобранной готовой темы. Но для реализации особенных проектов выбрать уже кем-то разработанную тему достаточно сложно. Например, если нужен сайт с оригинальным дизайном или специфическим функционалом, нечего не рассчитывать на готовое решение. В подобных случаях можно взять примерно подходящую тему и преобразовать ее в нужный сайт, изменив ее почти полностью под свои требования. Другой вариант – создать свою собственную тему.

Создание своей идеальной темы для WordPress

wordpress

Своя тема, сверстанная специально для определенного сайта (или серии однотипных сайтов), обеспечивает веб-мастеру целый ряд преимуществ. Максимум функций, которые будут нужны, реализуются через код. Для полноценной работы ресурса понадобится минимум расширений и дополнений. При этом тема сразу будет иметь желаемый дизайн. Есть еще один немаловажный плюс – в готовых темах предусматривается большое количество функций, многие из которых при настройке сайта приходится отключать или удалять. В своей теме лишних элементов не будет, что обеспечит ей легкость, безотказность и хорошую скорость.

Как сверстать тему для WordPress

Верстка темы с нуля выполняется в несколько этапов. Рассмотрим подробнее каждый из них.

Добавление темы

Сначала нужно пройти по пути «/wp-content/themes» и создать новую папку. Ей следует присвоить любое название, она будет папкой для новой темы. Внутрь этой папки необходимо поместить два основных файла – index.php и style.css. В файл style.css обязательно вписывается описание темы и метаданные. Делается это вот по такому макету:

/*

Theme Name: Название темы

Version: 105.1

Description: Описание темы

Author: Имя разработчика

Author URI: сайт разработчика (если есть)

*/

Все css стили прописываются ниже значка */. Чтобы новая тема красиво отображалась, нужно в ее папку добавить файл с картинкой, желательно в формате screenshot.png.

Еще надо добавить в файл functions.php. В него будут вноситься коды различных функций.

Теперь тема добавлена. Чтобы продолжить разработку, нужно зайти в консоль вордпресс, открыв ее по адресу http://{site-name}/wp-admin, зайти в раздел управления темами, найти в нем новую тему по ее имени, и нажать на кнопку «активировать». Когда тема будет активирована, появится ссылка на нее. Если пройти по этой ссылке, открывается пустая пока еще страница сайта.

Предварительный осмотр

На открывшейся странице видно, что она состоит из шапки (верхней части), поля для контента и подвала (нижней части). На всех страницах кроме главной есть сайдбар, расположенный по умолчанию слева. Чтобы при дальнейшей работе задать теме более точное руководство, лучше страницы главного меню и страницы подменю оформлять по-разному. Первые пусть имеют формат «страниц WordPress» (page), а вторые – «постов блога WordPress» (post). Это касается, конечно, больших многостраничных тем с многоуровневым меню.

Структура страниц

Теперь мы имеем готовый макет. Далее начинается процесс детализации темы. Первым делом стоит разобраться со структурой страниц. Перед тем как приступить к процедуре добавления страниц, нужно указать их стиль в настройках через консоль платформы. Ссылки должны создаваться в таком формате: «http://site_name/page_name».

Добавляются страницы через панель управления вордпресс. При добавлении каждой странице нужно присваивать порядковый номер. Очень важно после добавления всех страниц указать, что домашняя страница «Home» будет главной страницей сайта.

Header.php и Footer.php

Header.php и Footer.php

Header сайта (шапка) – это верхний блок, который обычно остается неизменным при переходе между страницами. Кроме того, это часть макета, содержащая почти весь код, являющийся общим для всего сайта. Для реализации шапки составляется файл 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(); ?>>

<div class=”wrapper”>

Здесь все необходимое для включения шапки вставлено внутрь кодировки head. Последней строкой введена команда wp_head() необходимая для добавления заголовков WP. Далее открывается блок «wrapper».

Но этого не достаточно для отображения хедера. Нужно еще подключить css и js файлы. В последних версиях движка это делается через файл функций (functions.php), а не вставкой в header.php. Для подключения css c js открывается файл functions.php и в него вставляется такой код:

function enqueue_styles() {

wp_enqueue_style( ‘whitesquare-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’);

Теперь нужные стили подключены в функции enqueue_styles. Кроме этого внесено указание, что данная функция выступает подключением стилей. Вставлена функция и для подключения js файла, без которого невозможно адекватное отображение шапки в старых браузерах.

Файл footer.php отвечает за нижнюю часть сайта и содержит код подвала всех страниц:

</div>

<footer></footer>

<?php wp_footer(); ?>

</body>

</html>

Шаблон страницы

Шаблон страницы вордпресс

На следующем этапе нужно создать шаблон страницы сайта вордпресс. С этой целью создается в папке темы новый файл – 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(); ?>

В приведенном выше коде подключены файлы шапки и подвала, вставлен блок названия страниц, вставлен блок вывода на страницах и в постах контента. Чтобы стилизовать полученный шаблон, необходимо добавить в файл style.css некоторые базовые стили. Но сначала нужно добавить в тему папку с картинками – images и добавить в нее фоны, которые будут задаваться изображениями. Вариант кода для шаблона страниц в файле стилей:

body {

color: #8f8f8f;

font: 12px Tahoma, sans-serif;

background: #f8f8f8 url(images/bg.png);

border-top: 5px solid #7e7e7e;

margin: 0;

}

img {

border: 0;

}

p {

margin: 20px 0;

}

.alignleft {

float: left;

}

.alignright {

float: right;

}

.aligncenter {

display: block;

margin-left: auto;

margin-right: auto;

}

.input {

background-color: #f3f3f3;

border: 1px solid #e7e7e7;

height: 30px;

color: #b2b2b2;

padding: 0 10px;

vertical-align: top;

}

.button {

color: #fff;

background-color: #29c5e6;

border: none;

height: 32px;

font-family: ‘Oswald’, sans-serif;

}

.image {

border: 1px solid #fff;

outline: 1px solid #c9c9c9;

}

figure img {

display: block;

}

.wrapper {

max-width: 960px;

margin: auto;

}

header {

padding: 20px 0;

}

.main-heading {

background: transparent url(images/h1-bg.png);

margin: 30px 0;

padding-left: 20px;

}

.main-heading h1 {

display: inline-block;

color: #7e7e7e;

font: 40px/40px ‘Oswald’, sans-serif;

background: url(images/bg.png);

margin: 0;

padding: 0 10px;

text-transform: uppercase;

}

aside {

float: left;

width: 250px;

}

aside + section {

margin-left: 280px;

padding-bottom: 50px;

}

footer {

clear: both;

background: #7e7e7e;

color: #dbdbdb;

font-size: 11px;

}

Логотип

Дальше начинается процесс наполнения сайта. Можно сразу разместить логотип. Его разрабатывают самостоятельно, заказывают у специалистов, или просто используют картинку нужной тематики. Сам логотип сохраняют в папке images. Ему можно присвоить имя, например logo.png. После этого в header.php вставляют примерно такой код:

<div class=”wrapper”>

<header>

<a href=”/”><img src=”<?php bloginfo(‘template_url’); ?>/images/logo.png” alt=”Whitesquare logo”></a>

</header>

Форма поиска

wordpress

Форма поиска нужна не всем сайтам. Но если он состоит из разных разделов, категорий и подкатегорий, тем более, если разрабатывается интернет-магазин, без поиска обойтись нельзя. Чтобы она появилась на странице сайта, нужно создать в папке темы файл searchform.php, и разместить такой код:

<form name=”search” action=”<?php echo home_url( ‘/’ ) ?>” method=”get” class=”search-form”>

<input type=”text” value=”<?php echo get_search_query() ?>” name=”s” placeholder=”<?php echo __(‘Search’, ‘whitesquare’); ?>” class=”input”>

<button type=”submit” class=”button”><?php echo __(‘GO’, ‘whitesquare’); ?></button>

</form>

Потом в стили следует добавить вот это:

.search-form {

float: right;

}

Для подключения формы поиска нужно в файл шапки добавить код:

<header>

<?php get_search_form(); ?>

</header>

Навигация

Есть разные способы реализации навигации на сайте. Лучше всего сделать это через консоль платформы. По умолчанию этот функционал не активен. Его нужно активировать, вставив в functions.php такое значение:

if (function_exists(‘add_theme_support’)) {

add_theme_support(‘menus’);

}

Когда код будет введен, в разделе админки «Appearance», в подразделе «Menus» необходимо нажать на ссылку Create new menu. После этого ввести значение «top-menu», дальше выделить из появившегося меню страницы и добавить их в меню навигации. В результате меню появится на страницах, но оно будет без стилей. Чтобы его стилизовать, нужно добавить стили в файл стилей. Пример:

.main-navigation {

background: #f3f3f3;

border: 1px solid #e7e7e7;

}

.top-menu {

margin: 0;

padding: 0;

}

.top-menu li {

display: inline-block;

padding: 10px 30px;

margin: 0;

text-transform: uppercase;

list-style-position: inside;

font: 14px ‘Oswald’, sans-serif;

}

.top-menu li.current_page_item {

background: #29c5e6;

}

.top-menu a {

color: #b2b2b2;

text-decoration: none;

}

.top-menu li.current_page_item a {

color: #fff;

}

Футер

подвал сайта

Несмотря на то, что подвал сайта занимает обычно совсем немного места на странице, оформление этой части требует времени и усердия. Для начала нужно создать и сохранить логотип футера, а также спрайты маленьких и больших иконок. Их нужно сохранить в папке images и присвоить им имена в соответствии с назначением. После этого верстается файл footer.php. Примерно так:

<footer>

<div class=”footer-content”>

<div class=”twitter”>

<h3 class=”footer-heading”><?php echo __(‘Twitter feed’, ‘whitesquare’); ?></h3>

<time datetime=”2012-10-23″><a href=”#” class=”twitter-time”>23 oct</a></time>

<p><?php echo __(‘In ultricies pellentesque massa a porta. Aliquam ipsum enim, hendrerit ut porta nec, ullamcorper et nulla. In eget mi dui, sit amet scelerisque nunc. Aenean aug’, ‘whitesquare’); ?></p>

</div>

<div class=”sitemap”>

<h3 class=”footer-heading”><?php echo __(‘Sitemap’, ‘whitesquare’); ?></h3>

<div class=”column first”>

<a href=”/home/”><?php echo __(‘Home’, ‘whitesquare’); ?></a>

<a href=”/about/”><?php echo __(‘About’, ‘whitesquare’); ?></a>

<a href=”/services/”><?php echo __(‘Services’, ‘whitesquare’); ?></a>

</div>

<div class=”column”>

<a href=”/partners/”><?php echo __(‘Partners’, ‘whitesquare’); ?></a>

<a href=”/customers/”><?php echo __(‘Support’, ‘whitesquare’); ?></a>

<a href=”/contact/”><?php echo __(‘Contact’, ‘whitesquare’); ?></a>

</div>

</div>

<div class=”social”>

<h3 class=”footer-heading”><?php echo __(‘Social networks’, ‘whitesquare’); ?></h3>

<a href=”http://twitter.com/” class=”social-icon twitter-icon”></a>

<a href=”http://facebook.com/” class=”social-icon facebook-icon”></a>

<a href=”http://plus.google.com/” class=”social-icon google-plus-icon”></a>

<a href=”http://vimeo.com/” class=”social-icon-small vimeo-icon”></a>

<a href=”http://youtube.com/” class=”social-icon-small youtube-icon”></a>

<a href=”http://flickr.com/” class=”social-icon-small flickr-icon”></a>

<a href=”http://instagram.com/” class=”social-icon-small instagram-icon”></a>

<a href=”/rss/” class=”social-icon-small rss-icon”></a>

</div>

<div class=”footer-logo”>

<a href=”/”><img src=”<?php bloginfo(‘template_url’); ?>/images/footer-logo.png” alt=”Whitesquare logo”></a>

<p><?php echo __(‘Copyright © 2012 Whitesquare. A <a href=”http://pcklab.com”>pcklab</a> creation’, ‘whitesquare’); ?></p>

</div>

</div>

</footer>

В стилях прописывается следующее:

.footer-content {

max-width: 960px;

margin: auto;

padding: 10px 0;

height: 90px;

}

.footer-heading {

font: 14px ‘Oswald’, sans-serif;

color: #fff;

border-bottom: 1px solid #919191;

margin: 0 0 10px 0;

text-transform: uppercase;

}

footer a {

color: #dbdbdb;

}

footer p {

margin: 5px 0;

}

.twitter-time {

color: #b4aeae;

}

.twitter {

float: left;

width: 300px;

}

.twitter p {

padding-right: 15px;

}

.sitemap {

width: 150px;

float: left;

margin-left: 20px;

padding-right: 15px;

}

.sitemap .column {

display: inline-block;

margin-left: 40px;

}

.sitemap .column.first {

margin-left: 0;

}

.sitemap a {

display: block;

text-decoration: none;

font-size: 12px;

margin-bottom: 5px;

}

.sitemap a:hover {

text-decoration: underline;

}

.social {

float: left;

margin-left: 20px;

width: 130px;

}

.social-icon {

width: 30px;

height: 30px;

background: url(images/social.png) no-repeat;

display: inline-block;

margin-right: 10px;

}

.social-icon-small {

width: 16px;

height: 16px;

background: url(images/social-small.png) no-repeat;

display: inline-block;

margin: 5px 6px 0 0;

}

.twitter-icon {

background-position: 0 0;

}

.facebook-icon {

background-position: -30px 0;

}

.google-plus-icon {

background-position: -60px 0;

}

.vimeo-icon {

background-position: 0 0;

}

.youtube-icon {

background-position: -16px 0;

}

.flickr-icon {

background-position: -32px 0;

}

.instagram-icon {

background-position: -48px 0;

}

.rss-icon {

background-position: -64px 0;

}

.footer-logo {

float: right;

margin-top: 20px;

font-size: 10px;

text-align: right;

}

Главная страница

Главная страница сайта

Главная страница отличается от обычных тем, что у нее нет заголовка и отсутствует сайдбар. Чтобы создать отдельный шаблон для главной, нужно добавить еще один файл – front-page.php. В него вводится тот же код, что и для обычных страниц, но без заголовка и сайдбара.

Для оформления главной страницы можно использовать различные функции и стили. Находить их коды легко через форумы и сайты посвященные WordPress.

Сайдбар

Для сайдбара, который будет отображаться на обычных страницах, нужен отдельный файл – sidebar.php с кодом:

<aside>

<nav class=”aside-navigation”>

<? wp_nav_menu(array(‘menu’ => ‘aside-menu’, ‘menu_class’ => ‘aside-menu’)); ?>

</nav>

<h2 class=”sidebar-heading”><?php echo __(‘Our offices’, ‘whitesquare’); ?></h2>

<div class=”map”>

<img src=”<?php bloginfo(‘template_url’); ?>/images/sample.png” width=”230″ height=”180″ alt=”<?php echo __(‘Our offices’, ‘whitesquare’); ?>”>

</div>

</aside>

Подключается блок в page.php таким кодом:

<div class=”main-heading”>

</div>

<?php get_sidebar(); ?>

<section>

И, конечно нужны стили:

.aside-navigation {

background: #f3f3f3;

border: 1px solid #e7e7e7;

}

.aside-menu {

margin: 0;

padding: 0;

text-transform: uppercase;

}

.aside-menu li {

font-weight: 300;

list-style: square inside;

border-top: 1px solid #e7e7e7;

font: 14px ‘Oswald’, sans-serif;

padding: 10px;

font-weight: 300;

}

.aside-menu li:first-child {

border: none;

}

.aside-menu li.current-menu-item,

.aside-menu li.current-menu-item a {

color: #29c5e6;

}

.aside-menu a {

color: #8f8f8f;

text-decoration: none;

}

.sidebar-heading {

background: #29c5e6;

font: 14px ‘Oswald’, sans-serif;

color: #fff;

padding: 10px;

margin: 30px 0 0 0;

text-transform: uppercase;

}

.map {

background: #f3f3f3;

border: 1px solid #e7e7e7;

padding: 10px;

margin: 0 0 30px 0;

}

Страница About us

Страница About us wordpress

Страница «О нас» не обязательна, но для многих сайтов она важна, так как позволяет посетителям быстро отыскивать информацию о компании или человеке, которого представляет данный ресурс. Чтобы вывести такую страницу, можно использовать добавления нового файла и соответствующего кода стилей. Другой вариант – установить плагин, предназначенный для создания контактных страниц.

Шаблон поста

Для выведения постов нужен отдельный шаблон в файле single.php с кодом следующего вида:

<?php get_header();?>

<div class=”main-heading”>

<h1><?php the_title(); ?></h1>

</div>

<?php get_sidebar();?>

<section>

<?php while (have_posts()): the_post();?>

<?php the_content();?>

<?php

if ( comments_open() || get_comments_number() ) {

comments_template();

}

?>

<?php endwhile; ?>

</section>

<?php get_footer(); ?>

В отличие от других шаблонов здесь сначала вводятся значения для выведения контента, потом для комментариев.

Страница поиска

Функция поиска была введена выше. Но еще нет страницы для отображения результатов. Ее реализуют файлом search.php с кодом:

<?php get_header(); ?>

<div class=”main-heading”>

<h1>Search</h1>

</div>

<?php get_sidebar(); ?>

<section>

<h2 class=”content-heading”><?php printf( __(‘Search Results for: %s’, ‘default’), get_search_query() ); ?></h2>

<?php if (have_posts()): while (have_posts()): the_post(); ?>

<h3><a href=”<?php the_permalink(); ?>”><?php the_title(); ?></a></h3>

<p><?php the_excerpt(); ?></p>

<?php endwhile; else:?>

<p><?php echo __(‘Sorry, no results found’, ‘whitesquare’); ?></p>

<?php endif; ?>

</section>

<?php get_footer(); ?>

Страница архива

Архив – это отдельная страница со списком всех постов сайта. Они могут быть представлены рассортированными по какому-либо признаку – дате добавления, ключевым словам, автору. Для архива создается файл archive.php и в него вставляется код обычной страницы.

404

Страница 404 wordpress

Бывает так, что та или иная страница, или весь сайт полностью недоступен для просмотра. Очень важно чтобы при открытии недоступной страницы посетитель видел текст, призывающий зайти на сайт позже или поясняющий причину неполадки. Для этого нужно добавить в тему шаблон страницы 404. Он полностью повторяет код обычной страницы, но в нем вместо части кода, отвечающего за вывод контента, просто вставлен уже готовый текст.

Если у вас возникли вопросы по скаченному архиву или вы нашли неработающие ссылки, то напишите об этом в комментариях. Также, вы можете заказать установку, настройку или перевод этой темы WordPress.

    Комментарии и отзывы

    avatar
      Подписаться  
    На:
    Adblock
    detector