Как сделать из хорошей верстки хороший сайт

за 14 простых шагов

посмотреть скринкаст на youtube

 Прежде всего
Создайте рабочую папку

/epic
/wordpress
/kupchino < папка проекта
/html < верстка
/theme < заготовка темы
/core < установочные файлы вп
 Шаг 0: Главная
Перейдите в Параметры > Чтение и сделайте одну из
страниц главной. Это позволит не искать
редактируемую страницу при необходимости.
 Шаг 1: Верстка
Возьмите архив с готовой версткой и распакуйте его в
удобном месте. Например, на рабочем столе.

Верстка тут: http://templated.co/officememo

 Шаг 2: Новая тема
Скачайте пустую тему с http://underscores.me/,
установите, активируйте и используйте как заготовку
 Шаг 3: Файлы
Скопируйте все файлы из вашей верстки в
папку темы (кроме html-файлов)
 Шаг 4: Шаблон
Выберите в теме файл page.php Полностью
замените его содержимое кодом файла
index.html
 Шаг 5: Пути
После копирования html-кода в шаблон, сайт потеряет
пути к файлам стилей, картинок и скриптов.
Восстановите пути, добавив в src перед адресом

<?php bloginfo("template_directory"); ?>/

 Было
<img src="images/4.jpg" >
<link rel="stylesheet" href="style.css">

Стало
<img src="<?php /
bloginfo("template_directory"); ?> images/4.jpg" >
<link rel="stylesheet" href="<?php bloginfo("template_directory"); ?>/style.css">
Шаг 6: Заголовок
Замените текст между тегами <h1> на вывод
заголовка страницы

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

 Шаг 7: Контент
Замените контент страницы на вывод правильного
содержимого из редактора. Перед выводом
инициализируйте данные. Скопируйте обе команды

<?php the_post(); ?>

<?php the_content(); ?>
 Шаг 8: Имя сайта
Чтобы задать имя и описание сайта используйте
первую и вторую конструкции в нужных местах:

<?php bloginfo('name'); ?> Это название

<?php bloginfo('description'); ?> Это описание

 Шаг 9: Меню
Чтобы вывести меню, добавьте вместо списка <ul>
следующую конструкцию :

<?php wp_nav_menu('primary'); ?>

Не забудьте создать меню через

Внешний вид > Меню
 Шаг 10: Виджеты
Чтобы вывести виджетизированный блок, добавьте вместо
контента боковой колонки следующую конструкцию :

<?php dynamic_sidebar(); ?>

Не забудьте задать виджеты через

Внешний вид > Виджеты
Шаг 11: Произвольные поля
Хорошая тема может потребовать редактирования
других полей, кроме названия и контента. На этот
случай есть плагин Advanced Custom Fields
Не забудьте создать поля, их область видимости, а
затем настроить значения полей для нужных страниц.
Теперь поля готовы к использованию!

<?php the_field("photo"); ?>

Шаг 12: Подшаблоны
Хорошая тема подразумевает разделение каждого
шаблона на header, footer, sidebar и так далее.
Вынесите код в header.php, footer.php, sidebar.php
Подключите фрагменты обратно с помощью

<?php get_header(); ?> <?php get_sidebar(); ?>

<?php get_footer(); ?>
 Шаг 13: Опции темы
Хорошая тема подразумевает редактирование футера,
телефонов и адреса. Установим плагин Custom Options
Plus, чтобы хранить настройки,
Теперь заменим нужные поля текста на

<?php get_custom('copy'); ?>

<?php get_custom('phone'); ?>
 Шаг 14: Скрипты+стили
Активируйте скрипты и стили добавив

<?php wp_head(); ?> <?php wp_footer(); ?>

Перед закрывающим </head> Перед закрывающим </body>

 Шаг 14: Плагины
Установите пакет необходимых на каждом сайте
дополнений.

All in one Favicon

WP Super Cache
Cyr to Lat enhanced
 Шаг 15: Bonus
Создайте дополнительный шаблон, использовав в боковой
колонке карту вместо обычного сайдбара

contacts.php

<?php

/*
Template name: Шаблон контактов
*/
map.php
?>

<?php get_header(); ?>

<?php get_template_part(“map”); ?>

<?php get_footer(); ?>

 THE END

Конец первой части

Больше WordPress!
Хотите еще?
Откуда всё берется?

Настройки сайта

Меню
Название
Виджеты

Страница в WordPress

Контент
Название
epixx папка с названием темы
<?php
/*
images папка для картинок Template Name: Homepage
*/
основные
файлы
?>
css папка для стилей
верстки
<?php get_header(); ?>
js папка для скриптов

<?php get_template_part("parts/promo"); ?>

index.php шаблон главной страницы для блога
<?php the_post(); ?>
page.php шаблон страницы по умолчанию
<?php the_title(); ?>
header.php
<?php the_content(); ?>
footer.php части страницы
sidebar.php
<?php get_footer(); ?>
page-main.php дополнительные шаблоны страниц,
создаваемые пользователем
page-contacts.php

404.php

parts

promo.php
slider.php
Контент
Как вывести заголовок и текст

1 Добавить перед выводом контента

<?php the_post(); ?>

2 Использовать в шаблоне
<?php the_content(); ?>

3 Использовать в шаблоне
<?php the_title(); ?>

Справка: http://codex.wordpress.org/Function_Reference/register_sidebar
Название сайта
Как вывести название и описание
сайта, указанные в админке?

1 Использовать в шаблоне
<?php bloginfo('name'); ?>

2 Использовать в шаблоне
<?php bloginfo('description'); ?>

Справка: http://codex.wordpress.org/Function_Reference/bloginfo
Меню
Как вывести меню, управляемое
из админки WP?

1 Создать меню в админке и

назначить как "Главное"

2 Использовать в шаблоне
<?php wp_nav_menu('primary'); ?>

Справка: http://codex.wordpress.org/Function_Reference/register_nav_menu
Справка: http://codex.wordpress.org/Function_Reference/wp_nav_menu
Виджеты
Как вывести боковую колонку?

1 Настроить содержимое виджета Боковая

Колонка в админке

2 Использовать в шаблоне
<?php dynamic_sidebar(); ?>

Справка: http://codex.wordpress.org/Function_Reference/register_sidebar
Бонусные поля
Как вывести разные хитрые блоки?

1 Установить плагин
Advanced Custom Fields

2 Создать группу полей

"свойства страницы"

3 Создать поле reading-time

4 Привязать поле к страницам

5 Задать значение для поля

6 Использовать в шаблоне <?php the_field('reading-time'); ?>

Справка: http://www.advancedcustomfields.com/
Бонусные поля
Как вывести разные хитрые блоки?

Справка: http://www.advancedcustomfields.com/
Бонусные поля
Как вывести разные хитрые блоки?

Справка: http://www.advancedcustomfields.com/
 newtheme2/archive.php

Выводим шапку Функция the_post

переводит нас к
следующему посту
<?php get_header(); ?>
Выводим список записей!

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

<?php the_title(); ?> Выводим название записи

<?php the_content(); ?> Выводим контент

<?php endwhile; endif; ?>

<?php get_footer(); ?> Выводим подвал

Иконки здесь http://www.iconspedia.com/pack/super-mono-icons-4022/