Вдохните в свой статический сайт новую жизнь с помощью WordPress конвертации (Часть 2)
- Помогите!
- Индивидуальная настройка WordPress сайта
- Это проще простого, поверьте!
- Что вы должны в результате получить
- О чем вы узнали на текущий момент?
- Что вас ждет
- На чем мы сосредоточимся в этой статье?
- ШАГ 1 - Определение констант и регистрация поддержки меню навигации
- ШАГ 2 - Создание файла header.php
- ШАГ 3 - Создание файла footer.php
- ШАГ 4 - Работа с файлом searchform.php
- ШАГ 5 - Работа с файлом sidebar.php
- ШАГ 6 - Заполнение файла index.php
- ШАГ 7 - Работа с файлом single.php
- ШАГ 8 - Работа с файлом page.php
- ШАГ 9 - Работа с файлом page-about.php
- ШАГ 10 - Работа с файлом page-contact.php
- ШАГ 11 - Назначение шаблонов для страниц
- ШАГ 12 - Работа с файлом search.php
- ШАГ 13 - Работа с файлом content-search.php
- ШАГ 14 - Работа с файлом comments.php
- ШАГ 15 - Работа с файлом 404.php
- Наш завершенный проект
- Советы, которые вы должны помнить
- Какие методы устранения проблем вы можете использовать
- Вывод
- Заключение
Помогите!
Это, возможно, первая ваша реакция, когда вы пытаетесь понять, что вам нужно сделать для конвертации сайта на WordPress, верно?
Даже если вы только новичок и не являетесь веб-экспертом, вы все равно можете создать тему WordPress, если поймете, как работает эта CMS.
Если вы используете WordPress, в качестве основной платформы для своего сайта, скорее всего, вы уже устали использовать общие темы. Возможно, вы уже задумывались над тем, чтобы создать собственную тему с нужными вам стилями и функциями.
Индивидуальная настройка WordPress сайта
Вы можете создать свой идеальный сайт, создав макет в Photoshop, а затем преобразовать PSD-файл в HTML и CSS. После этого вы можете преобразовать его в полностью функциональную тему WordPress.
Разработка сайтов с использованием PSD-файлов Photoshop, а затем его преобразования в тему WordPress, является сегодня одним из самых простых методов в веб-дизайне и разработке. Это идеальный способ сделать сайт быстро и просто.
Это проще простого, поверьте!
Эта статья поможет вам узнать, как конвертировать HTML-CSS статический сайт в полностью функциональную тему WordPress:
- Преобразование HTML-CSS статического сайта в тему WordPress станет вашим основным методом веб-дизайна и разработки. Это означает, что вы сможете легко создавать сайты для своих клиентов за небольшой промежуток времени;
- Прочитав эту статью, вы сможете просто получить знания о том, как создать свою собственную тему WordPress.
Примечание: Вы должны иметь базовые знания HTML, CSS, JavaScript и PHP.
Что вы должны в результате получить
В конце этой статьи вы узнаете, как превратить ваш статический HTML сайт в полностью функциональную тему WordPress. Это статья даст вам представление о шаблонах темы WordPress, о которых мы уже говорили в первой части этой серии.
В этой статье вы должны будете следовать стандартам кодирования WordPress:
Всегда сначала проводите валидацию HTML и CSS кодов. Вы можете воспользоваться такими сервисами валидации, как W3C, чтобы убедиться, что ваша разметка и стили валидны.
Убедитесь, что синтаксис вашего кода WordPress не вызовет никаких проблем. Вы всегда можете посетить этот сайт, чтобы проверить, соответствует ли ваш код стандартам WordPress.
Всегда проверяйте код во всех браузерах, если это возможно. Чтобы избежать каких-либо проблем в вашей теме в дальнейшем, убедитесь, что ваш сайт работает во всех основных браузерах.
Проверьте свой код на нескольких устройствах. Поскольку планшеты и другие мобильные устройства становятся все более популярными, идеально, если ваш сайт будет адаптивным и будет работать на современных гаджетах.
О чем вы узнали на текущий момент?
В первой части этого урока мы имели дело со следующим:
- копирование файлов в папку NeoBlog WP;
- style.css;
- screenshot.png;
- активация темы.
Если вы следили за первой статьей этой серии, то знаете, что в ней мы назвали тему WordPress с помощью файла style.css и добавили скриншот темы, чтобы ее иконка отображалась в панели администрирования WordPress.
После этого, мы активировали тему. Действительно, нам еще многое предстоит сделать. Освежите в памяти действия, описанные в первой статье, после чего вы сможете наслаждаться этапами разработки второй части.
В этой статье мы уделим больше внимания шаблонам WordPress, о которых упоминали первой части этого цикла статей.
Без дальнейшей предисловий, давайте начнем работу с шаблонами, чтобы создать полностью функциональную тему WordPress.
Что вас ждет
Если быть точным, мы будем работать со следующими файлами:
- functions.php;
- header.php;
- footer.php;
- searchform.php;
- sidebar.php;
- index.php;
- single.php;
- page.php;
- page-about.php;
- page-contact.php;
- page-contact.php;
- search.php;
- content-search.php;
- comments.php;
- 404.php.
Ресурсы, необходимые для выполнения заданий данной статьи:
- Тема NeoBlog HTML and CSS;
- Базовые знания из Кодекса WordPress;
- Некоторые навыки PHP и jQuery.
На чем мы сосредоточимся в этой статье?
В первой части этой серии вы узнали, как подготовить HTML и CSS файлы для конвертации в WordPress, а также как создать скриншот и активировать тему.
В этой части вы узнаете, какой код нужно добавить в остальные шаблоны, чтобы создать рабочую тему WordPress.
В конце этой статьи вы получите тот же результат, что и в файле демо-изображения, которое мы разместили в первой части.
ШАГ 1 - Определение констант и регистрация поддержки меню навигации
Тема уже активирована! Теперь нам нужно добавить поддержку папки темы, а также меню навигации через файл functions.php. Создаем файл functions.php в корневом каталоге темы NeoBlog WP.
Далее, определяем константы для каталога темы. Скопируйте приведенный ниже код в только что созданный файл functions.php.
(Примечание: поскольку это PHP-файл, все функции и коды, относящиеся к PHP, должны быть заключены в тег ).
/***********************************************************************************************/
/* Define Constants */
/***********************************************************************************************/
define('THEMEDIR', get_stylesheet_directory_uri());
define('IMG', THEMEDIR.'/images');Вам также нужно зарегистрировать функцию для меню навигации. Ниже приведены функции, необходимые, чтобы создать рабочую навигацию. Скопируйте этот код:
add_action('init', 'register_my_menus');
function register_my_menus() {
register_nav_menus(array(
'main-menu' => 'Main Menu'
));
}Метод add_action добавляет в регистр меню навигации. В качестве первого аргумента используется событие (к которому позже будет добавлено действие), а второй аргумент определяет вызов функции register_my_menus.
Чтобы получить дополнительную информацию ознакомьтесь с этой страницей.
ШАГ 2 - Создание файла header.php
Теперь создайте файл header.php. Откройте файл index.html и скопируйте из него все, начиная от открытия объявления DOCTYPE и до закрывающегося тега, а затем вставьте этот код в файл header.php, созданный в папке темы NeoBlog WP:
<!DOCTYPE html>
<!--[if IE 8]> <html lang="en" class="ie8"> <![endif]-->
<!--[if !IE]><!--> <html lang="en"> <!--<![endif]-->
<head>
<meta charset="utf-8">
<title>NEOBLOG</title>
<meta name="description" content="A simple WordPress blog theme for 1stwebdesigner.com">
<meta name="author" content="Sam Norton">
<!-- Mobile Specific Meta -->
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
<!-- Stylesheets -->
<link rel="stylesheet" href="css/reset.css" />
<link rel="stylesheet" href="css/bootstrap.css" />
<link rel="stylesheet" href="css/style.css" />
<link href="http://maxcdn.bootstrapcdn.com/font-awesome/4.1.0/css/font-awesome.min.css" rel="stylesheet">
<!--[if lt IE 9]>
<script src="http://html5shim.googlecode.com/svn/trunk/html5.js"></script>
<![endif]-->
</head>
<body>
<!-- HEADER -->
<header class="main-header align-center ">
<a href="index.html" class="logo" ><img src="images/logo.png" class="img-responsive" alt="NEOBLOG blog theme" /></a>
<nav class="main-nav">
<ul class="inline">
<li><a href="index.html" class="active">Home</a></li>
<li><a href="about.html">About</a></li>
<li><a href="contact.html">Contact</a></li>
</ul>
</nav>
</header>Некоторые из статических тегов HTML могут быть заменены встроенными функциями WordPress, например, язык, метаинформация, класс body и так далее.
Добавьте вызов функции wp_head до закрытия тега head. Используйте его для вывода в браузере или для выполнения задач в фоновом режиме. Для получения дополнительной информации ознакомьтесь с Кодексом WordPress.
Для отображения меню навигации в шаблоне используйте функцию wp_nav_menu.
Параметр theme_location указывает назначение меню, какое месторасположение в теме для него задано. В противном случае, если это значение не было задано, параметр fallback_cb будет определять, что должно отображаться.
Чтобы узнать больше о wp_nav_menu, посетите эту страницу.
Скопируйте приведенный ниже код, и замените им код статического заголовка HTML:
<!DOCTYPE html>
<!--[if IE 8]> <html lang="en" class="ie8"> <![endif]-->
<!--[if !IE]><!--> <html <?php language_attributes(); ?>> <!--<![endif]-->
<head>
<meta charset="<?php bloginfo('charset'); ?>">
<title><?php wp_title('|', true, 'right');?><?php bloginfo('name');?></title>
<meta name="description" content="<?php bloginfo('description'); ?>">
<meta name="author" content="Sam Norton">
<!-- Mobile Specific Meta -->
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
<!-- Stylesheets -->
<link rel="stylesheet" href="<?php bloginfo('stylesheet_url'); ?>" />
<link rel="stylesheet" href="css/bootstrap.css" />
<link rel="stylesheet" href="css/style.css" />
<link href="http://maxcdn.bootstrapcdn.com/font-awesome/4.1.0/css/font-awesome.min.css" rel="stylesheet">
<!--[if lt IE 9]>
<script src="http://html5shim.googlecode.com/svn/trunk/html5.js"></script>
<![endif]-->
<?php wp_head(); ?>
</head>
<body <?php body_class(); ?>>
<!-- HEADER -->
<header class="main-header align-center ">
<a href="<?php echo home_url(); ?>" class="logo" ><img src="<?php print IMG;?>/logo.png" class="img-responsive" alt="<?php bloginfo('name');?>" /></a>
<nav class="main-nav">
<?php
wp_nav_menu(array(
'theme_location' => 'main-menu',
'container' => '',
'menu_class' => 'inline'
));
?>
</nav>
</header>ШАГ 3 - Создание файла footer.php
Создайте пустой файл footer.php и снова откройте файл index.html из папки темы NeoBlog HTML and CSS. Скопируйте из него все из раздела Sharing idea и раздела подвала. Затем вставьте скопированный код в файл footer.php папки темы NeoBlog WP.
У вас должен быть скопирован тот же код, что приводится ниже:
<!-- Sharing idea -->
<section>
<div class="sharing-container section-content align-center">
<h3>WANT TO SHARE YOUR THOUGHTS?</h3>
<p>Life is short. Start sharing your knowledge to people. It may inspire them to enjoy life and learn how to face life difficulties.</p>
<h4><a href="contact.html" >CLICK HERE TO LEARN MORE >>></a></h4>
</div>
</section>
<!-- footer -->
<footer class="main-footer section-content align-center" id="contact-info">
<p>© 2014 - <a href="http://www.1stwebdesigner.com/" target="_blank">NEOBLOG theme</a> by <a target="_blank" href="https://twitter.com/NickDalusung">Sam Norton</a></p>
</footer>
</body>
</html>Как и в случае с файлом header.php, замените некоторые HTML-теги на встроенные функции WordPress, такие как ссылка на главную страницу, текущий год и информацию о названии блога.
Смотрите приведенный ниже код:
<!-- Sharing idea -->
<section>
<div class="sharing-container section-content align-center">
<h3>WANT TO SHARE YOUR THOUGHTS?</h3>
<p>Life is short. Start sharing your knowledge to people. It may inspire them to enjoy life and learn how to face life difficulties.</p>
<h4><a href="<?php home_url(); ?>" >CLICK HERE TO LEARN MORE >>></a></h4>
</div>
</section>
<!-- footer -->
<footer class="main-footer section-content align-center" id="contact-info">
<p>© <?php echo date('Y'); ?> - <a href="<?php home_url(); ?>"><?php echo bloginfo('name'); ?></a> by <a target="_blank" href="https://twitter.com/NickDalusung">Sam Norton</a></p>
</footer>
<?php wp_footer(); ?>
</body>
</html>ШАГ 4 - Работа с файлом searchform.php
Далее добавьте разметку (с встроенными функциями WordPress), которая будет отображать панель поиска в сайдбаре. Создайте файл searchform.php, скопируйте и вставьте в него приведенный ниже код.
(Примечание: Большинство классов, которые вы здесь видите, относятся к панели поиска разметки файла index.html):
<div class="controller">
<form role="search" method="get" class="search-form" action="<?php echo home_url(); ?>">
<input type='textbox' name="s" class="form-control" id="search-box" value="<?php the_search_query(); ?>" placeholder="Search.."/>
<input class="btn btn-primary no-border" type="submit" class="search-submit" value="Search" />
</form>
</div>Обратите внимание, что в качестве значения поля здесь была использована функция the_search_query. Она просто выводит искомую фразу для текущего запроса, когда осуществляется поиск.
ШАГ 5 - Работа с файлом sidebar.php
Перед созданием файла sidebar.php зарегистрируйте сайдбар в файле functions.php. Для этого откройте файл functions.php и добавьте в него приведенный ниже код:
register_sidebar( array(
'id' => 'main-sidebar',
'name' => __( 'Main Sidebar', $text_domain ),
'description' => __( 'This the main sidebar.', $text_domain ),
) );Данный код создает определение для сайдбара и возвращает идентификатор.
Далее, давайте вызовем сайдбар. Создайте файл sidebar.php в корневом каталоге темы NeoBlog WP и вставьте в него следующий код:
<?php if ( is_active_sidebar( 'main-sidebar' ) ) : ?>
<?php dynamic_sidebar( 'main-sidebar' ); ?>
<?php endif; ?>Данный код содержит функцию, которая вызывает виджет main-sidebar и выводит разметку боковой панели, но прежде, чем продолжить, она будет проверять, активна ли боковая панель.
ШАГ 6 - Заполнение файла index.php
После добавления всех этих файлов шаблонов мы приступаем к работе с домашней страницей - файлом index.php. Сначала создаем файл index.php в корневой папке темы NeoBlog WP.
Теперь добавляем в этот файл, следующий код:
<?php get_header(); ?>
<?php get_sidebar(); ?>
<?php get_footer(); ?>Теперь давайте перейдем на нашу главную страницу и посмотрим, что получилось:
Обратите внимание, что шапка сайта и подвал находятся на своих местах, а вот боковая панель нет.
Чтобы добавить содержимое для главной страницы, откройте файл index.html и скопируйте все от области блога до закрытия тега div c классом box-layer align-center page-nav, а затем вставьте этот код ниже функции get_header. У вас должен получиться следующий фрагмент кода:
<!-- ОБЛАСТЬ БЛОГА -->
<section>
<hr class="no-margin" />
<div class="blog-container section-content">
<div class="container">
<div class="row">
<div class="col-md-8">
<ul class="negative-margin">
<li>
<h1><a href="single-blog.html" class="gray">Should I use a Pencil or a Ballpen?</a></h1>
<p class="details">By <a href="#">Sam Norton</a> / On July 20, 2014 / <a href="#">Life Hacks</a></p>
<figure>
<img class="opacity-hover box-layer img-responsive" src="images/thumb1.jpg" alt="Pencil or Ballpen" />
</figure>
<p class="excerpt">Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum..</p>
<div class="btn-margin">
<a href="single-blog.html" class="btn btn-primary">CONTINUE READING >>> </a>
</div>
</li>
<li>
<h1><a href="single-blog.html" class="gray">How to test your patience!</a></h1>
<p class="details">By <a href="#">Sam Norton</a> / On July 20, 2014 / <a href="#">Life Tips</a></p>
<figure>
<img class="box-layer img-responsive" src="images/thumb2.jpg" alt="Pencil or Ballpen" />
</figure>
<p class="excerpt">Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum..</p>
<div class="btn-margin">
<a href="single-blog.html" class="btn btn-primary">CONTINUE READING >>> </a>
</div>
</li>
</ul>
<div class="box-layer align-center page-nav">
<ul class="btn">
<li><a href="#">Next Page >>> </a></li>
</ul>
</div>
</div>Этот код будет выводить только статический контент темы. Чтобы выводить его динамически, в разметке области блога используется цикл WordPress. Скопируйте приведенный ниже код и замените им раздел блога в файле index.html:
<?php get_header(); ?>
<!-- ОБЛАСТЬ БЛОГА -->
<section>
<hr class="no-margin" />
<div class="blog-container section-content">
<div class="container">
<?php if (have_posts()) : ?>
<div class="row">
<div class="col-md-8">
<ul class="negative-margin">
<li>
<?php while(have_posts()) : the_post(); ?>
<h1><a href="<?php the_permalink(); ?>" class="gray"><?php the_title(); ?></a></h1>
<p class="details">By <a href="<?php the_author_posts() ?>"><?php the_author(); ?> </a> / On <?php echo get_the_date('F j, Y'); ?> / In <?php the_category(', '); ?></p>
<?php if (has_post_thumbnail()) : ?>
<figure> <a href="<?php the_permalink(); ?>"><?php the_post_thumbnail('', array('class' => 'opacity-hover box-layer img-responsive')); ?></a>
</figure>
<p class="excerpt"> <?php the_excerpt(); ?> </p>
<div class="btn-margin"> <a href="<?php the_permalink(); ?>" class="btn btn-primary">CONTINUE READING >>> </a> </div>
</li>
<?php endif; ?>
<?php endwhile; ?>
</ul>
<?php
global $wp_query;
if ($wp_query->max_num_pages > 1) : ?>
<div class="box-layer align-center page-nav">
<ul class="btn">
<li><?php previous_posts_link('<<< Previous Page', $wp_query->max_num_pages); ?></li>
<li><?php next_posts_link('Next Page >>>', $wp_query->max_num_pages); ?></li>
</ul>
</div> <!-- end box -->
<?php endif; ?>
<?php endif; ?>
</div>
<aside>
<div class="col-md-3 col-md-offset-1 margin-sidebar">
<?php get_sidebar(); ?>
</div>
</aside>
</div>
</div>
</div>
</section>
<?php get_footer(); ?>Цикл WordPress представляет собой блоки PHP-кода, используемые для отображения записей. Используя циклы, WordPress обрабатывает каждую запись, которая будет отображаться на текущей странице, и форматирует их согласно критериям, заданным в тегах цикла. Цикл WordPress обычно имеет следующие блоки PHP-кода:
<?php
if ( have_posts() ) {
while ( have_posts() ) {
the_post();
//
// Содержимое записи
//
} // конец while
} // конец if
?>Этот код является основным циклом вместе с разметкой; однако, он должен отображать информацию в блоге, используя следующие функции WordPress:
- the_permalink - отображает URL-адрес для постоянной ссылки на запись, которая в данный момент обрабатывается в цикле;
- the_title - отображает или возвращает заголовок текущей записи;
- the_author_posts - отображает общее количество записей, которые опубликовал автор;
- the_author - отображает имя автора записи;
- get_the_date - получает дату написания текущей записи;
- the_category - отображает ссылку на категорию или категории, к которым принадлежит запись;
- the_post_thumbnail - отображает специальное изображение для текущей записи так, как задано в панели редактирования записи (подробнее об этом ниже);
- the_excerpt - отображает выдержку из текущей записи, предварительно применив несколько фильтров, в том числе и автоматического форматирования параграфов, которое превращает двойные разрывы строк в абзацы HTML.
Что касается специального изображения, можно использовать следующий код:
<?php if (has_post_thumbnail()) : ?>
<figure> <a href="<?php the_permalink(); ?>"><?php the_post_thumbnail('', array('class' => 'opacity-hover box-layer img-responsive')); ?></a> </figure>
<?php endif; ?>Во-первых, мы проверяем, существует ли специальное изображение, установленное через панель редактирования записи WordPress. Если это так, этот код отображает URL-адрес записи и само изображение.
Обратите внимание, что массив добавляется с классом opacity-hover box-layer img-responsive. Это способ добавления класса специального изображения используется, чтобы добавить красивый эффект наведения, рамку и тень.
Но, сам этот код еще не будет выводить специальное изображение. Сначала нам нужно добавить функции для регистрации иконки. Скопируйте приведенный ниже код и вставьте его в файл functions.php:
/***********************************************************************************************/
/* Добавляем поддержку темой специального изображения */
/***********************************************************************************************/
if (function_exists('add_theme_support')) {
add_theme_support('post-thumbnails');
set_post_thumbnail_size(742, 428);
}Отлично! Теперь иконка выводится. Затем добавьте функцию, которая будет удалять скобки, многоточие или слово hellip в конце выдержки (что является форматом по умолчанию).
Откройте файл functions.php и добавьте следующий код:
/***********************************************************************************************/
/* Удаляем скобки, многоточие и hellip в выдержке */
/***********************************************************************************************/
function trim_excerpt($text) {
$text = str_replace('[…]', '...', $text);
return $text;
}
add_filter('get_the_excerpt', 'trim_excerpt');Далее нам нужно разобраться с навигацией, которая уже была добавлена в файле index.php. Следующий код вызовет wp_query, класс, определенный в ядре WordPress, который обрабатывает запросы записей (или страниц) к блогу WordPress.
Затем устанавливаем функции previous_post_link и next_posts_link, чтобы добавить навигацию к списку записей блога.
Рассмотрите приведенный ниже код:
<?php
global $wp_query;
if ($wp_query->max_num_pages > 1) : ?>
<div class="box-layer align-center page-nav">
<ul class="btn">
<li><?php previous_posts_link('<<< Previous Page', $wp_query->max_num_pages); ?></li>
<li><?php next_posts_link('Next Page >>>', $wp_query->max_num_pages); ?></li>
</ul>
</div> <!-- end box -->
<?php endif; ?>
<?php endif; ?>В качестве заключительного штриха поместите функцию get_sidebar в div с классом col-md-3 col-md-offset-1 margin-sidebar вместе с тегом HTML5 aside, чтобы задать выравнивание по правой стороне страницы.
Рассмотрите приведенный ниже код:
<aside>
<div class="col-md-3 col-md-offset-1 margin-sidebar">
<?php get_sidebar(); ?>
</div>
</aside>Как я упоминал, файл index.php будет содержать все из перечисленных кодов PHP. Проверьте приведенный ниже код, чтобы убедиться, что вы ничего не пропустили:
<?php get_header(); ?>
<!-- ОБЛАСТЬ БЛОГА -->
<section>
<hr class="no-margin" />
<div class="blog-container section-content">
<div class="container">
<?php if (have_posts()) : ?>
<div class="row">
<div class="col-md-8">
<ul class="negative-margin">
<li>
<?php while(have_posts()) : the_post(); ?>
<h1><a href="<?php the_permalink(); ?>" class="gray">
<?php the_title(); ?> </a></h1>
<p class="details">By <a href="<?php the_author_posts() ?>"><?php the_author(); ?> </a> / On <?php echo get_the_date('F j, Y'); ?> / In <?php the_category(', '); ?></p>
<?php if (has_post_thumbnail()) : ?>
<figure> <a href="<?php the_permalink(); ?>"><?php the_post_thumbnail('', array('class' => 'opacity-hover box-layer img-responsive')); ?></a> </figure>
<p class="excerpt"> <?php the_excerpt(); ?> </p>
<div class="btn-margin"> <a href="<?php the_permalink(); ?>" class="btn btn-primary">CONTINUE READING >>> </a> </div>
</li>
<?php endif; ?>
<?php endwhile; ?>
</ul>
<?php
global $wp_query;
if ($wp_query->max_num_pages > 1) : ?>
<div class="box-layer align-center page-nav">
<ul class="btn">
<li><?php previous_posts_link('<<< Previous Page', $wp_query->max_num_pages); ?></li>
<li><?php next_posts_link('Next Page >>>', $wp_query->max_num_pages); ?></li>
</ul>
</div> <!-- end box -->
<?php endif; ?>
<?php endif; ?>
</div>
<aside>
<div class="col-md-3 col-md-offset-1 margin-sidebar">
<?php get_sidebar(); ?>
</div>
</aside>
</div>
</div>
</div>
</section>
<?php get_footer(); ?>ШАГ 7 - Работа с файлом single.php
Теперь для вывода одиночных записей создайте файл single.php, а затем скопируйте и вставьте в него следующий код:
<?php get_header(); ?>
<!—Область Блога -->
<section>
<hr class="no-margin" />
<?php if (have_posts()) : while(have_posts()) : the_post(); ?>
<div class="blog-container section-content">
<div class="container">
<div class="row">
<div class="col-md-8">
<div class="box-layer custom-padding">
<section>
<h1><a href="<?php the_permalink(); ?>" class="gray"><?php the_title(); ?></a></h1>
<p class="details">By <a href="<?php the_author_posts() ?>"><?php the_author(); ?> </a> / On <?php echo get_the_date('F j, Y'); ?> / In <?php the_category(', '); ?> </p>
<?php if (has_post_thumbnail()) : ?>
<figure> <a href="<?php the_permalink(); ?>"><?php the_post_thumbnail('', array('class' => 'opacity-hover box-layer img-responsive')); ?></a>
</figure>
<p class="excerpt"> <?php the_content(); ?> </p>
<?php endif; ?>
</section>
<?php endwhile; ?>
<?php endif; ?>
<section>
<div class="comment-section">
<?php
// Если комментарии разрешены и существует хотя бы один комментарий, загружаем шаблон комментариев
if ( comments_open() || '0' != get_comments_number() ) : comments_template();
endif;
?>
</div>
</section>
</div>
<!-- ОБЛАСТЬ СВЯЗАННЫХ ЗАПИСЕЙ -->
<section>
<div class="box-layer related-articles custom-padding">
<h2 class="align-center">Related Articles</h2>
<?php
$current_categories = get_the_category();
$first_category = $current_categories[0]->term_id;
$args = array(
'post_per_page' => 3,
'category__in' => array($first_category),
'post__not_in' => array($post->ID)
);
$related_articles = new WP_Query($args);
if ($related_articles->have_posts()) : ?>
<ul>
<?php while ($related_articles->have_posts()) : $related_articles->the_post(); ?>
<li class="col-md-4">
<?php if (has_post_thumbnail()) : ?>
<figure> <a href="<?php the_permalink(); ?>"><?php the_post_thumbnail('', array('class' => 'opacity-hover box-layer img-responsive')); ?></a> </figure>
</figure>
<p class="related"><a href="<?php the_permalink(); ?>"><?php the_title(); ?></a></p>
<?php endif; ?>
</li>
<?php endwhile; ?>
<div class="clear"></div>
</ul>
<?php endif; ?>
<?php
// Восстанавливаем исходные данные записи
wp_reset_postdata();
?>
</div>
</section>
</div>
<!-- ОБЛАСТЬ САЙДБАРА -->
<aside>
<div class="col-md-3 col-md-offset-1 margin-sidebar">
<?php get_sidebar(); ?>
</div>
</aside>
</section>
<?php get_footer(); ?>Здесь отсутствует раздел комментариев. Посмотрите на следующий код:
<section>
<div class="comment-section">
<?php
if ( comments_open() || '0' != get_comments_number() ) : comments_template();
endif;
?>
</div>
</section>Он проверяет, разрешены ли комментарии к записи и существует ли хотя бы один комментарий. И после этого загружает шаблон комментариев (подробнее при рассмотрении шаблона комментариев).
ШАГ 8 - Работа с файлом page.php
После страницы блога мы займемся стационарными страницами. Создайте файл page.php, а затем скопируйте в него следующий код:
<?php get_header(); ?>
<!-- ОБЛАСТЬ БЛОГА -->
<section>
<hr class="no-margin" />
<div class="blog-container section-content">
<div class="container">
<div class="row">
<div class="col-md-8">
<div class="box-layer custom-padding">
<?php if ( have_posts() ) : while ( have_posts() ) : the_post(); ?>
<h2> <?php the_title(); ?> </h2>
<?php
if (has_post_thumbnail()) : ?>
<figure> <a href="<?php the_permalink(); ?>"><?php the_post_thumbnail(' ', array('class' => 'opacity-hover box-layer img-responsive')); ?></a> </figure>
<?php endif; ?>
<p><?php the_content(); ?> </p>
<?php endwhile; endif; //ends the loop ?>
</div>
</div>
<!-- ОБЛАСТЬ САЙДБАРА -->
<aside>
<div class="col-md-3 col-md-offset-1 margin-sidebar">
<?php get_sidebar(); ?>
</div>
</aside>
</section>
<?php get_footer(); ?>Опять же, в этом файле нет ничего нового, за исключением того, что он не имеет раздела комментариев, так как это обычная страница.
В следующих двух файлах мы создадим шаблоны встроенных типов записей WordPress. Это страницы, которые будут иметь другую структуру.
ШАГ 9 - Работа с файлом page-about.php
Для этой части статьи сначала создайте PHP-файл и назовите его page-about.php. Так как эта страница предназначена для вывода информации о владельце сайта, она содержит только простые коды HTML, шапку, боковую панель и подвал.
Добавьте соответствующий комментарий в начале файла page-about.php, чтобы WordPress рассматривал его, как шаблон страницы.
Скопируйте приведенный ниже код и вставьте его в файл page-about.php:
<?php
/* Template Name: About Page */
?>
<?php get_header(); ?>
<!-- ОБЛАСТЬ БЛОГА -->
<section>
<hr class="no-margin" />
<div class="blog-container section-content">
<div class="container">
<div class="row">
<div class="col-md-8">
<div class="box-layer custom-padding">
<img src="<?php print IMG; ?>/my_image.png" class="opacity-hover img-responsive center" alt="my image" />
<div class="align-center">
<h2> Обо мне</h2>
<p>Я веб-дизайнер с двухлетним опытом разработки. Я питаю страсть к красивому дизайну, современным и креативным веб-сайтам и дизайну, Большую часть своего времени я провожу, экспериментируя с HTML, CSS и WordPress.<p>
<hr/>
<h3 class="blue">Свяжитесь со мной по поводу любого веб-проекта</h3>
<p><i class="fa fa-envelope"></i> Email: [ваш email] </p>
<p><i class="fa fa-twitter"></i> Twitter: [ваш аккаунт twitter] </p>
</div>
</div>
<!-- КОНЕЦ ОБЛАСТИ СВЯЗАННЫХ ЗАПИСЕЙ -->
</div>
<!-- ОБЛАСТЬ САЙДБАРА -->
<aside>
<div class="col-md-3 col-md-offset-1 margin-sidebar">
<?php get_sidebar(); ?>
</div>
</aside>
</section>
<?php get_footer(); ?>ШАГ 10 - Работа с файлом page-contact.php
Контактную форму в блог можно добавить с помощью многих плагинов WordPress, но иногда этого не требуется. Для файла page-contact.php достаточно добавить немного PHP и JavaScript. Во-первых, создайте файл page-contact.php.
Теперь создайте простую контактную форму. Вставьте следующий код в файл page-contact.php:
<?php
/*
Template Name: Page Contact
*/
?>
<?php
if(isset($_POST['submitted'])) {
if(trim($_POST['contactName']) === '') {
$nameError = 'Please enter your name.';
$hasError = true;
} else {
$name = trim($_POST['contactName']);
}
if(trim($_POST['email']) === '') {
$emailError = 'Please enter your email address.';
$hasError = true; } else if (!preg_match("/^[[:alnum:]][a-z0-9_.-]*@[a-z0-9.-]+.[a-z]{2,4}$/i", trim($_POST['email']))) {
$emailError = 'You entered an invalid email address.';
$hasError = true;
} else {
$email = trim($_POST['email']);
}
if(trim($_POST['subject']) === '') {
$subjectError = 'Please enter a subject.';
$hasError = true;
} else {
$subject = trim($_POST['subject']);
}
if(trim($_POST['comments']) === '') {
$commentError = 'Please enter a message.';
$hasError = true;
} else {
if(function_exists('stripslashes')) {
$comments = stripslashes(trim($_POST['comments']));
} else {
$comments = trim($_POST['comments']);
}
}
if(!isset($hasError)) {
$emailTo = get_option('tz_email');
if (!isset($emailTo) || ($emailTo == '') ){
$emailTo = get_option('admin_email');
}
$subject = '[PHP Snippets] From '.$name;
$body = "Name: $name nnEmail: $email nnComments: $comments";
$headers = 'From: '.$name.' <'.$emailTo.'>' . "rn" . 'Reply-To: ' . $email;
wp_mail($emailTo, $subject, $body, $headers);
$emailSent = true;
}
} ?>Здесь мы просто обеспечили, чтобы форма была отправлена и заполнена правильно. Если возникает какая-либо ошибка, например, незаполненное поле или неверный адрес электронной почты, пользователю возвращается сообщение об ошибке и форма не будет отправлена.
Затем создайте форму и тексты сообщений об ошибках для каждого текстового поля и текстовой области:
<?php get_header(); ?>
<section>
<hr class="no-margin" />
<div class="blog-container section-content">
<div class="container">
<div class="row">
<div class="col-md-8">
<div class="box-layer custom-padding">
<div id="container">
<div id="content">
<div class="align-center">
<h2>We want to hear from you!</h2>
<p>If you are seeking to contact us, please fill up the form below.
If you want to advertise or be partner with us just inform
us on the message box below. </p>
<p>Thank you so much for your support!
<br/>We really appreciate!</p>
<div class="entry-content">
<?php if(isset($emailSent) && $emailSent == true) { ?>
<div class="thanks"> <p>Thanks, your email was sent successfully.</p>
</div>
<?php } else { ?>
<?php the_content(); ?>
<?php if(isset($hasError) || isset($captchaError)) { ?>
<p class="error">Sorry, an error occured.</p>
<?php } ?>
<form action="<?php the_permalink(); ?>" id="contactForm" method="post" class="general-form">
<div class="contactform">
<p>
<input type="text" name="contactName" class="form-control" id="contactName" placeholder="Your Name.." value="<?php if(isset($_POST['contactName'])) echo $_POST['contactName'];?>" class="required requiredField" />
<?php if($nameError != '') { ?>
<span class="error"><?=$nameError;?></span>
<?php } ?>
</p>
<input type="text" name="email" id="email" class="form-control" placeholder="Your Email.." value="<?php if(isset($_POST['email'])) echo $_POST['email'];?>" class="required requiredField email" />
<?php if($emailError != '') { ?>
<span class="error"><?=$emailError;?></span>
<?php } ?>
</p>
<p>
<input type="text" name="subject" id="subject" class="form-control" placeholder="Your Subject.." value="<?php if(isset($_POST['subject'])) echo $_POST['subject'];?>" class="required requiredField subject" />
<?php if($subjectError != '') { ?>
<span class="error"><?=$subjectError;?></span>
<?php } ?>
</p>
<textarea name="comments" id="commentsText" class="form-control" placeholder="Your Message" rows="4" cols="100" class="required requiredField"><?php if(isset($_POST['comments'])) { if(function_exists('stripslashes')) { echo stripslashes($_POST['comments']); } else { echo $_POST['comments']; } } ?></textarea>
<?php if($commentError != '') { ?>
<span class="error"><?=$commentError;?></span>
<?php } ?>
</p>
<p><input type="submit" class="btn btn-primary no-border" value="Send Message"></input></p>
</div>
<input type="hidden" name="submitted" id="submitted" value="true" />
</form>
<?php } ?>
</div><!-- .entry-content -->
</div><!-- .post -->
</div>
</div>
</div>
<!-- ОБЛАСТЬ СВЯЗАННЫХ ЗАПИСЕЙ -->
</div>
<aside>
<!-- ОБЛАСТЬ САЙДБАРА -->
<div class="col-md-3 col-md-offset-1 margin-sidebar">
<?php get_sidebar(); ?>
</div>
</aside>
</section>
<?php get_footer(); ?>Эта форма уже рабочая, но вы можете улучшить ее, добавив проверку на стороне клиента. Для этого используйте JQuery и jQuery-плагин валидации.
Во-первых, скачайте плагин валидации и поместите его в папку JS темы NeoBlog WP. Добавьте в файл header.php перед закрывающимся тегом head следующие ссылки:
<?php if( is_page('contact') ){ ?>
<script type="text/javascript" src="<?php bloginfo('template_directory'); ?>/js/jquery.validate.min.js"></script>
<script type="text/javascript" src="<?php bloginfo('template_directory'); ?>/js/verif.js"></script>
<?php }?>
Теперь создайте файл verif.js и поместите в него следующий код JQuery:
$(document).ready(function(){
$("#contactForm").validate();
});Отлично! Мы создали контактную форму. Теперь она будет проверять все вводимые данные и просто выбирать элемент формы с необходимым классом, а затем проверять, правильно ли заполнены поля.
Примечание: Вы можете использовать плагин, если использование приведенного выше кода для вас слишком сложно.
Попробуйте Contact Form 7, очень мощный и гибкий плагин, который добавляет контактную форму на страницы сайта.
ШАГ 11 - Назначение шаблонов для страниц
Круто! Мы создали шаблоны страниц. Чтобы привести их в действие, нам нужно назначить их страницам.
Сначала создайте страницу через панель администрирования WordPress, а затем назначьте для нее шаблон.
Чтобы сделать это, перейдите в раздел Страницы - Добавить, а затем назовите новую страницу «Обо мне» или «Контакты»:
Теперь, чтобы назначить этой странице шаблон, в правой боковой панели найдите панель «Атрибуты страницы». Выберите нужный вам шаблон и нажмите кнопку «Опубликовать»:
Теперь вы можете перейти на эту страницу и проверить, работает ли она.
ШАГ 12 - Работа с файлом search.php
Мы уже задали структуру для панели поиска, но она пока еще не работает; чтобы привести ее в действие, нам нужны некоторые дополнительные функции.
Поэтому давайте добавим функции, позволяющие вводить поисковые запросы через панель поиска.
Приведенные ниже фрагменты содержат код PHP для поиска и вывода результатов; в случае, если результаты, удовлетворяющие запросу, не найдены, нам будет возвращаться сообщение об ошибке: "К сожалению, ничего не найдено".
Создайте файл search.php и вставьте в него приведенный ниже код.
Примечание: Приведенный ниже код содержит теги HTML, связанные с файлами page.php и single.php:
<?php get_header(); ?>
<section>
<hr class="no-margin" />
<div class="blog-container section-content">
<div class="container">
<div class="row">
<div class="col-md-8">
<?php if ( have_posts() ) : ?>
<header class="page-header">
<h2 class="page-title"><?php printf( __( 'Search Results for: %s', '_s' ), '<h3>' . get_search_query() . '</h3>' ); ?></h2>
</header><!-- .page-header -->
<?php /* Запуск цикла */ ?>
<?php while ( have_posts() ) : the_post(); ?>
<?php
/*** Запускаем цикл для поиска и вывода результатов. */
get_template_part( 'content', 'search' );
?>
<?php endwhile; ?>
<?php else : ?>
<h2>К сожалению, ничего не найдено</h2>
<?php endif; ?>
</div>
<div class="col-md-3 col-md-offset-1 margin-sidebar">
<?php get_sidebar(); ?>
</div>
</div>
</div>
</div>
</section>
<?php get_footer(); ?>ШАГ 13 - Работа с файлом content-search.php
Файл search.php будет обрабатывать расположение результатов поиска; а кроме того добавлять цикл для поиска.
В папке темы NeoBlog WP создайте файл content-search.php и вставьте в него код, приведенный ниже:
<div id="post-<?php the_ID(); ?>" <?php post_class(); ?>>
<header class="entry-header">
<?php the_title( sprintf( '<h1 class="entry-title"><a href="%s" rel="bookmark">', esc_url( get_permalink() ) ), '</a></h1>' ); ?>
<?php if ( 'post' == get_post_type() ) : ?>
<div class="entry-meta">
<?php endif; ?>
</header>
<p class="details">By <a href="<?php the_author_posts() ?>"><?php the_author(); ?> </a> / On <?php echo get_the_date('F j, Y'); ?> / <?php the_category(); ?> </p>
<p><?php the_excerpt(); ?></p>
</div>ШАГ 14 - Работа с файлом comments.php
Вы помните, что наш файл single.php содержит div с классом comment-section и некоторым PHP-кодом.
Смотрите код, приведенный ниже:
<div class="comment-section">
<?php
if ( comments_open() || '0' != get_comments_number() ) :
comments_template();
endif;
?>
</div>Данный код просто проверяет, разрешены ли комментарии через панель администрирования WordPress, для этого используется оператор if. Если он возвращает значение true, то мы получаем комментарии и просто выводим их.
Обратите внимание, что этот код сам по себе не будет выводить комментарии, для этого необходимо создать comment_template, используя файл comments.php. Поэтому создайте этот файл в каталоге темы NeoBlog WP.
Теперь скопируйте приведенный ниже код и вставьте его в созданный файл:
<?php
/**
* Шаблон для отображения комментариев.
*
* Область страницы, которая содержит, как текущие комментарии,
* так и форму для добавления комментариев.
*
* @package NeoBlog
*/
/*
* Если текущая страница защищена паролем и
* посетитель еще не ввел пароль, мы
* возвращаемся назад без загрузки комментариев.
*/
if ( post_password_required() ) {
return;
}
?>
<div id="comments" class="comments-area">
<?php // Вы можете начать редактирование здесь -- включая этот комментарий! ?>
?php if ( have_comments() ) : ?>
<h2 class="comments-title">
<?php printf( _nx( 'One Comment on “%2$s”', '%1$s comment on “%2$s”', get_comments_number(), 'comments title', '_s' ), number_format_i18n( get_comments_number() ), '<h3>' . get_the_title() . '</h3>' );
?>
</h2>
<?php if ( get_comment_pages_count() > 1 && get_option( 'page_comments' ) ) : // are there comments to navigate through ?>
<nav id="comment-nav-above" class="comment-navigation" role="navigation">
<h1 class="screen-reader-text"><?php _e( 'Comment navigation', '' ); ?></h1>
<div class="nav-previous"><?php previous_comments_link( __( '← Older Comments', '_s' ) ); ?></div>
<div class="nav-next"><?php next_comments_link( __( 'Newer Comments →', '_s' ) ); ?></div>
</nav><!-- #comment-nav-above -->
<?php endif; // проверка навигации комментариев?>
<ol class="comment-list">
<?php
wp_list_comments( array(
'style' => 'ol',
'short_ping' => true,
));
?>
</ol><!-- .comment-list -->
<?php if ( get_comment_pages_count() > 1 && get_option( 'page_comments' ) ) : // are there comments to navigate through ?>
<nav id="comment-nav-below" class="comment-navigation" role="navigation">
<h1 class="screen-reader-text"><?php _e( 'Comment navigation', '' ); ?></h1>
<div class="nav-previous"><?php previous_comments_link( __( '← Older Comments', '_s' ) ); ?></div>
<div class="nav-next"><?php next_comments_link( __( 'Newer Comments →', '_s' ) ); ?></div>
</nav><!-- #comment-nav-below -->
<?php endif; // проверка навигации комментариев ?>
<?php endif; // have_comments() ?>
<?php
// Если комментарии закрыты, но комментарии существуют, давайте оставим небольшое сообщение, хорошо?
if ( ! comments_open() && '0' != get_comments_number() && post_type_supports( get_post_type(), 'comments' ) ) :
?>
<p class="no-comments"><?php _e( 'Comments are closed.', '' ); ?></p>
<?php endif; ?>
<?php
$fields = array(
'author' => '<p class="general-form">'.'<input class="form-control" placeholder="Your Name.." id="author" name="author" type="text" value="' . esc_attr( $commenter['comment_author'] ) . '" size="30"' . $aria_req . ' /></p>',
'email' => '<p class="general-form">'.'<input id="email" class="form-control" placeholder="Your Email.." name="email" type="text" value="' . esc_attr( $commenter['comment_author_email'] ) . '" size="30"' . $aria_req . ' /></p>',
'url' => '<p class="general-form">' . '<input id="url" class="form-control" placeholder="Your Website.." name="url" type="text" value="' . esc_attr( $commenter['comment_author_url'] ) . '" size="30" /></p>'
);
$comments_args = array(
'fields' => $fields,
'title_reply'=>'<h2>'.'Leave a Comment'.'<h2>',
'comment_field' => '<p class="general-form"><textarea id="comment" class="form-control" name="comment" rows="4" cols="100" aria-required="true" placeholder="Write your comment here.."></textarea></p>',
'comment_notes_after' => '',
'id_submit' => 'submit-btn'
);
?>
<?php comment_form($comments_args); ?>
</div><!-- #comments -->В этом файле происходит много действий. Во-первых, проверка, нужен ли пользователю пароль для возможности оставлять комментарии. Далее, если это так, будет отображаться номер комментария и сам комментарий.
Обратите внимание, что для комментариев также предусмотрена система навигации (которая включает в себя ссылки на предыдущий и на следующий комментарии), использующая функции previous_comments_link и next_comments_link.
Наконец, мы используем wp_list_comments, чтобы вывести все комментарии для записи или страницы на основе различных параметров, в том числе установленных в панели администрирования.
Затем добавляем небольшой скрипт wp_enqueue_script, чтобы проверить, включена ли возможность разветвленных комментариев. Если да, тогда пользователи могут отвечать на комментарии:
if( get_option('thread_comments') ){
wp_enqueue_script('comment-reply');
}ШАГ 15 - Работа с файлом 404.php
Создать пользовательскую страницу ошибки 404 можно с помощью шаблона 404.php. Это позволит обеспечить, чтобы каждая ссылка на самом деле вела на определенную веб-страницу. Если на сайте есть битые ссылки, этот шаблон будет отображать страницу ошибки.
Создайте простой шаблон страницы ошибки 404. Скопируйте в него приведенный ниже код:
<?php get_header(); ?>
<!-- ОБЛАСТЬ БЛОГА -->
<section>
<hr class="no-margin" />
<div class="blog-container section-content">
<div class="container">
<div class="row">
<div class="col-md-8">
<div class="box-layer custom-padding">
<section>
<h2> Oh Snap! Page not found!</h2>
<h3> It seems you're looking for something that isn't here!</h3>
<p> <a href="<?php echo home_url(); ?>">Click here</a> to go back to homepage! </p>
</section>
</div>
</div>
<aside>
<!-- ОБЛАСТЬ САЙДБАРА -->
<div class="col-md-3 col-md-offset-1 margin-sidebar">
<?php get_sidebar(); ?> </div>
</aside>
</section>
<?php get_footer(); ?>Ошибка 404 - это страница, сгенерированная сервером для информирования пользователя о том, что запрашиваемая страница не существует.
С помощью приведенного выше кода мы просто отображаем сообщение об ошибке с сообщением "Вот незадача! Такая страница не найдена!" А также выводим ссылку на главную страницу. Это делается для того, чтобы пользователь оставался на сайте.
Тема NeoBlog WordPress теперь завершена! Поздравляем!
Наш завершенный проект
Советы, которые вы должны помнить
- Каждый раз изучайте в Кодекс WordPress функции, теги и код PHP, которые вы собираетесь применять. Это поможет вам использовать их правильно;
- Убедитесь, что вы используете структурированный, без ошибок PHP-код и валидный HTML. Смотрите «Стандарты кодирования WordPress»;
- Следуйте общепринятым стандартам дизайна при разработке сайта;
- Создавайте резервные копии своих файлов. Всегда делайте резервные копии, просто на случай, если вы случайно измените файл шаблона. Тогда вы легко сможете его восстановить;
- Не бойтесь обратиться за помощью. Если вы работаете над созданием собственной темы, скорее всего, у вас могут возникнуть определенные трудности в процессе преобразования некоторых файлов. Я рекомендую вам обратиться за помощью к Stackoverflow, сообществу разработчиков, которые помогают друг другу в вопросах связанных с разработкой кодов.
Какие методы устранения проблем вы можете использовать
На самом деле не существует официальных правил, которым вы должны следовать при устранении ошибок во время разработки темы. Это могут быть ваши собственные ошибки в коде или просто опечатки, которые вы допустили при разработке своих шаблонов WordPress.
Тем не менее, включение режима отладки или проверка журнала ошибок может помочь.
Вывод
Поздравляем! Вы преобразовали HTML и CSS шаблон в тему WordPress. Это было несложно, правда ведь?
Вы успешно конвертировали Ваш обычный статический HTML-CSS сайт в тему WordPress NeoBlog.
Заключение
Поздравляем! Вы преобразовали HTML и CSS шаблон в тему WordPress. Это было несложно, правда ведь?
Теперь у вас есть полностью функциональная тема WordPress, которая может подтягивать контент из базы данных и отображать его.
Вы также можете добавить другие функциональные возможности и стили, для этого прочитайте Кодекс WordPress, чтобы узнать, как это делается.
Если у вас есть какие-либо замечания или предложения, пожалуйста, напишите об этом в комментариях.