Вдохните в свой статический сайт новую жизнь с помощью WordPress конвертации (Часть 2)

Помогите!

Это, возможно, первая реакция, когда вы пытаетесь понять, что вам необходимо сделать для конвертации веб-сайта на 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>&copy; 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>&copy; <?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(); ?>

Сейчас давайте перейдем на нашу главную страницу и посмотрим, что получилось:

Вдохните в  статический веб-сайт новую жизнь при помощи WordPress конвертации (Часть 2)
Обратите внимание, что шапка веб-сайта и подвал находятся на местах, а вот боковая панель нет.

Чтобы добавить содержимое для главной страницы, откройте файл 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><?phpglobal $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-кода :

<?phpif ( 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('[&hellip;]', '...', $text);     return $text;    }add_filter('get_the_excerpt', 'trim_excerpt');

Далее нам необходимо разобраться с навигацией, которая была добавлена в файле index.php . Следующий код вызовет wp_query , класс, определенный в ядре WordPress , который обрабатывает запросы записей (или страниц) к блогу WordPress.

Далее устанавливаем возможности previous_post_link и next_posts_link , чтобы добавить навигацию к списку записей блога.

Рассмотрите приведенный ниже код:

<?phpglobal $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"><?phpif ( 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><?phpif (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*/?><?phpif(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 , а далее назначьте для нее шаблон.

Чтобы сделать это, перейдите в раздел Страницы — Добавить , а далее назовите новую страницу «Обо мне» или «Контакты»:

Вдохните в  статический веб-сайт новую жизнь при помощи WordPress конвертации (Часть 2)
Сейчас, чтобы назначить данной странице шаблон, в правой боковой панели найдите панель «Атрибуты страницы». Выберите нужный вам шаблон и нажмите кнопку «Опубликовать»:
Вдохните в  статический веб-сайт новую жизнь при помощи WordPress конвертации (Часть 2)
Сейчас вы можете перейти на эту страницу и проверить, работает ли она.

ШАГ 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"><?phpif ( 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 &ldquo;%2$s&rdquo;', '%1$s comment on &ldquo;%2$s&rdquo;', 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( __( '&larr; Older Comments', '_s' ) ); ?></div><div class="nav-next"><?php next_comments_link( __( 'Newer Comments &rarr;', '_s' ) ); ?></div></nav><!-- #comment-nav-above --><?php endif; // проверка навигации комментариев?><ol class="comment-list"><?phpwp_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( __( '&larr; Older Comments', '_s' ) ); ?></div><div class="nav-next"><?php next_comments_link( __( 'Newer Comments &rarr;', '_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 конвертации (Часть 2) [Скачать исходный код]

Советы, которые вы должны помнить

  • Каждый раз изучайте в Кодекс WordPress возможности, теги и программный код PHP , которые вы собираетесь применять. Это поможет вам использовать их правильно;
  • Убедитесь, что вы используете структурированный, без ошибок PHP -код и валидный HTML . Смотрите «Стандарты кодирования WordPress»;
  • Следуйте общепринятым стандартам дизайна при разработке веб-сайта;
  • Создавайте резервные копии ваших файлов. Всегда делайте резервные копии, просто на случай, если вы случайно измените файл шаблона. Тогда вы без проблем сможете без проблем его восстановить;
  • Не бойтесь обратиться за помощью. Если вы работаете над созданием собственной темы, скорее всего, у вас могут возникнуть определенные трудности в процессе преобразования некоторых файлов. Я рекомендую вам обратиться за помощью к Stackoverflow , сообществу разработчиков, которые помогают друг другу в вопросах связанных с разработкой кодов.

Какие способы устранения проблем вы можете использовать

Фактически не существует официальных правил, которым вы должны следовать при устранении ошибок во время разработки темы. Это могут быть собственные ошибки в коде или просто опечатки, которые вы допустили при разработке ваших шаблонов WordPress.

Тем не менее, включение режима отладки или проверка журнала ошибок может помочь.

Отображение

Поздравляем! Вы преобразовали HTML и CSS шаблон в тему WordPress . Это было несложно, правда ведь?

Вы успешно конвертировали Ваш обычный статический HTML-CSS веб-сайт в тему WordPress NeoBlog .

Заключение

Поздравляем! Вы преобразовали HTML и CSS шаблон в тему WordPress. Это было несложно, правда ведь?

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

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

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

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

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