Как создать WordPress тему из HTML

Если вы начали с веб-сайта HTML (+ CSS) без CMS, вы не должны бросить все это при переходе на WordPress. Вы можете конвертировать HTML в WordPress и запустить (теперь более мощный) сайт на WordPress динамической платформе.

Или, может быть, у вас другая ситуация. Может быть, вам просто интересно, как конвертировать дизайн HTML в полноценную тему WordPress. Или, может быть, вы просто хотели бы узнать основы WordPress (+ PHP) программирования.

Какой бы ни была причина, вы здесь сегодня, а я попытаюсь познакомить вас с основами создания темы WordPress от HTML. Вы можете следовать этому руководству, чтобы создать свою тему с нуля или вы можете скачать WPExplorer тему https://github.com/wpexplorer/wpex-starter-theme, которая обеспечивает "пустой холст", чтобы создать свою тему со всеми необходимыми файлами шаблонов и кода для начала работы. В противном случае, запускайте редактор кода (я использую и рекомендую Notepad ++ или SublimeText ) и браузер, а затем следуйте этому простому руководству до конца.

Название вашей WordPress темы

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

Общие предположения на данный момент:

У вас есть ваш index.html и CSS-файл для таблицы стилей тоже готов.
У вас есть рабочая установка WordPress по крайней мере одной темой.
Вы уже создали папку, в которой вы будете готовить свою новую WordPress тему.

Давайте вернемся к имени вашей темы WordPress. Откройте редактор кода, скопируйте и вставьте содержимое таблицы стилей в новый файл. Сохраните его как style.css в папке темы. Добавьте следующую информацию в самой верхней части вновь созданной style.css:

/* Theme Name: Название темы
Theme URI: URL темы
Description: Краткое описание
Version: 1.0 или любая другая, какую вы хотите
Author: Ваше имя или ник
Author URI: Ваш сайт
Tags: Тэги для размещения темы в репозитории */

Переведем ваш шаблон HTML в PHP файлы

В этой статье далее предполагается, что вы имеете ваш шаблон HTML с расположенными слева направо: заголовок, содержание, боковая панель, футер. Если у вас есть другой дизайн, вам, возможно, придется немного поиграть с кодом. Это весело и очень легко.

Следующий шаг включает в себя создание четырех PHP файлов. Используя редактор кода, создайте index.php, header.php, sidebar.php и footer.php, и сохраните их в папке темы. Все файлы пусты на данный момент, так что мы не ожидаем, что они будут что-то делать. Для иллюстрации, я использую следующие index.html и CSS файлы таблиц стилей:

index.html

<!DOCTYPE html>
	<head>
		<meta charset="UTF-8">
		<title>Как создать WordPress тему из HTML</title>
		<link rel="stylesheet" type="text/css" media="all" href="style.css"/>
	</head>
	<body>
		<div id="wrap">
			<header class="header">
				<p>Это раздел заголовка. Здесь будет логотип.</p>
			</header><!-- .header -->
			<div class="content">
				<p>Это область с основным контентом</p>
			</div><!-- .content -->
			<div class="sidebar">
				<p>Это сайдбар</p>
			</div><!-- .sidebar -->
			<footer class="footer">
				<p>А это футер</p>
			</footer><!-- .footer -->
		</div><!-- #wrap -->
	</body>
</html>

CSS STYLESHEET

#wrap{margin: 0 auto; width:95%; margin-top:-10px; height:100%;}
.header{width:99.8%; border:1px solid #999;height:135px;}
.content{width:70%; border:1px solid #999;margin-top:5px;}
.sidebar{float:right; margin-top:-54px;width:29%; border:1px solid #999;}
.footer{width:99.8%;border:1px solid #999;margin-top:10px;}

Вы можете скопировать оба кода, если у вас нет ничего, чтобы работать дальше. Просто скопируйте и вставьте их в редактор кода, сохраните, создайте четыре PHP файла, которые мы только что упомянули и готовьтесь к следующей части. Откройте вновь созданный (и пустой) header.php. Войдя в WordPress, перейдите к внешнему виду - >> Редактор и откройте header.php. Скопируйте весь код между тегами <HEAD> и вставьте его в свой файл header.php. Ниже приведен код, который я получил из файла header.php:

<head>
	<meta charset="<?php bloginfo( 'charset' ); ?>">
	<meta name="viewport" content="width=device-width">
	<title><?php wp_title( '|', true, 'right' ); ?></title>
	<link rel="profile" href="http://gmpg.org/xfn/11">
	<link rel="pingback" href="<?php bloginfo( 'pingback_url' ); ?>">
	<!--[if lt IE 9]>
	<script src="<?php echo get_template_directory_uri(); ?>/js/html5.js"></script>
	<![endif]-->
	<?php wp_head(); ?>
</head>

Затем откройте файл index.html и скопируйте код заголовка (т.е. код в <DIV class = "header"> раздел) к вашему header.php чуть ниже <HEAD> тегами, как показано ниже:

<head>
<html>
	<head>
		<meta charset="<?php bloginfo( 'charset' ); ?>">
		<meta name="viewport" content="width=device-width">
		<title><?php wp_title( '|', true, 'right' ); ?></title>
		<link rel="profile" href="http://gmpg.org/xfn/11">
		<link rel="pingback" href="<?php bloginfo( 'pingback_url' ); ?>">
		<link rel="stylesheet" href="<?php bloginfo('stylesheet_url'); ?>" type="text/css" />
		<!--[if lt IE 9]>
		<script src="<?php echo get_template_directory_uri(); ?>/js/html5.js"></script>
		<![endif]-->
		<?php wp_head(); ?>
	</head>
	<body>
		<header class="header">
		<p>Это раздел заголовка. Здесь будет логотип.</p>
	</header>
</head>

Затем добавьте…

<link rel="stylesheet" href="<?php bloginfo('stylesheet_url'); ?>" type="text/css" />

... В любом месте между <HEAD> теги в файле header.php, чтобы связать таблицы стилей. Не забудьте также скопировать <HTML> и <body> открывающие метки в header.php, как показано выше. Сохраните все изменения.

Скопируйте вторую секцию (то есть <DIV class = "content"> ... </DIV> от index.html во вновь созданный index.php, и добавьте ...

<pre class="prettyprint"> <?php get_header(); ?> </pre> ... На самом верху, и ...

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

... В самый конец. Эти три строки вставляют header.php, sidebar.php и footer.php (в таком порядке) и отображают их в index.php. Сохраните все изменения. На данный момент, ваш файл index.php должен выглядеть следующим образом:

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

Затем скопируйте содержимое из разделов боковой панели и нижнего колонтитула в вашем index.html в sidebar.php и footer.php соответственно.

Добавление постов

Ваш шаблон HTML собирается превратиться в тему WordPress, не так ли? Нам просто нужно добавить свои посты. Если у вас есть посты на своем блоге, как они будут отображаться в WordPress? Вы можете использовать специальный тип функции PHP, известной как Loop. Loop - это просто специализированный фрагмент кода, который отображает ваши сообщения и комментарии там, куда вы поместите его.

Теперь, чтобы отобразить свои сообщения в разделе содержимое шаблона index.php, скопируйте и вставьте следующий код между <DIV class = "content"> и </div>, как показано ниже:

<div class="content">
	<?php if ( have_posts() ) : ?>
		<?php while ( have_posts() ) : the_post(); ?>
			<div id="post-<?php the_ID(); ?>" <?php post_class(); ?>>
				<div class="post-header">
					<div class="date"><?php the_time( 'M j y' ); ?></div>
					<h2><a href="<?php the_permalink(); ?>" rel="bookmark" title="Постоянная ссылка на <?php the_title_attribute(); ?>"><?php the_title(); ?></a></h2>
					<div class="author"><?php the_author(); ?></div>
				</div><!--.post-header-->
				<div class="entry clear">
					<?php if ( function_exists( 'add_theme_support' ) ) the_post_thumbnail(); ?>
					<?php the_content(); ?>
					<?php edit_post_link(); ?>
					<?php wp_link_pages(); ?>
				</div><!--. entry-->
				<footer class="post-footer">
					<div class="comments"><?php comments_popup_link( 'Leave a Comment', '1 Comment', '% Comments' ); ?></div>
				</footer><!--.post-footer-->
			</div><!-- .post-->
		<?php endwhile; /* перемотка назад или дальше, если все посты были извлечены  */ ?>
			<nav class="navigation index">
				<div class="alignleft"><?php next_posts_link( 'Older Entries' ); ?></div>
				<div class="alignright"><?php previous_posts_link( 'Newer Entries' ); ?></div>
			</nav><!--.navigation-->
		<?php else : ?>
	<?php endif; ?>
</div><!--.content-->

Этот код будет выводить ваши посты. На данном этапе (и используя образцы файлов, приведенные в данном руководстве), ваш header.php должен выглядеть следующим образом:

<head>
	<meta charset="<?php bloginfo( 'charset' ); ?>">
	<meta name="viewport" content="width=device-width">
	<title><?php wp_title( '|', true, 'right' ); ?></title>
	<link rel="profile" href="http://gmpg.org/xfn/11">
	<link rel="pingback" href="<?php bloginfo( 'pingback_url' ); ?>">
	<!--[if lt IE 9]>
	<script src="<?php echo get_template_directory_uri(); ?>/js/html5.js"></script>
	<![endif]-->
	<?php wp_head(); ?>
</head>

Ваш sidebar.php должен выглядеть следующим образом:

<?php dynamic_sidebar( 'sidebar' ); ?>

Ваш footer.php должен выглядеть следующим образом:

<footer class="footer">
    <p>А это футер</p>
</footer>
<?php wp_footer(); // Важный хук! ?>
</body>
</html>

Заметили ли вы закрывающие <body /> и </HTML> в конце? Не забудьте включить их тоже.

Ваш style.css должен выглядеть следующим образом:

/*
Theme Name: Как создать WordPress тему из HTML
Theme URI: http://upread.ru/
Description: Эта тема показывает Вам, как создавать темы WordPress из HTML
Version: 1.0
Author: Сергей Визгорев
Author URI: http://upread.ru/
Tags: HTML to WordPress, создание WordPress темы
*/
body {
    font-family: arial, helvetica, verdana;
    font-size: 0.8em;
    width: 100%;
    height: 100%;
}

.header {
    background-color: #1be;
    margin-left: 14%;
    top: 0;
    border-width: 0.1em;
    border-color: #999;
    border-style: solid;
    width: 72%;
    height: 250px;
}

.content {
    background-color: #999;
    margin-left: 14%;
    margin-top: 5px;
    float: left;
    width: 46%;
    border-width: 0.1em;
    border-color: #999;
    border-style: solid;
}

.sidebar {
    background-color: #1d5;
    margin-right: 14%;
    margin-top: 5px;
    float: right;
    border-width: 0.1em;
    border-color: #999;
    border-style: solid;
    top: 180px;
    width: 23%;
}

.footer {
    background-color: red;
    margin-left: 14%;
    float: left;
    margin-top: 5px;
    width: 72%;
    height: 50px;
    border-width: 0.1em;
    border-color: #999;
    border-style: solid;
}

И ваш index.php должен выглядеть следующим образом:

<?php get_header(); ?>
<div class="content">
	<?php if ( have_posts() ) : ?>
		<?php while ( have_posts() ) : the_post(); ?>
			<div id="post-<?php the_ID(); ?>" <?php post_class(); ?>>
				<div class="post-header">
					<div class="date"><?php the_time( 'M j y' ); ?></div>
					<h2><a href="<?php the_permalink(); ?>" rel="bookmark" title="Постоянная ссылка на <?php the_title_attribute(); ?>"><?php the_title(); ?></a></h2>
					<div class="author"><?php the_author(); ?></div>
				</div><!--.post-header-->
				<div class="entry clear">
					<?php if ( function_exists( 'add_theme_support' ) ) the_post_thumbnail(); ?>
					<?php the_content(); ?>
					<?php edit_post_link(); ?>
					<?php wp_link_pages(); ?>
				</div><!--. entry-->
				<footer class="post-footer">
					<div class="comments"><?php comments_popup_link( 'Leave a Comment', '1 Comment', '% Comments' ); ?></div>
				</footer><!--.post-footer-->
			</div><!-- .post-->
		<?php endwhile; /* перемотка назад или дальше, если все посты были извлечены  */ ?>
			<nav class="navigation index">
				<div class="alignleft"><?php next_posts_link( 'Older Entries' ); ?></div>
				<div class="alignright"><?php previous_posts_link( 'Newer Entries' ); ?></div>
			</nav><!--.navigation-->
		<?php else : ?>
	<?php endif; ?>
</div><!--.content-->
<?php get_sidebar(); ?>
<?php wp_footer(); // Важный хук! ?>
<?php get_footer(); ?>

Все пять файлов должны быть сохранены в папке темы. Назовите папку, как хотите и сожмите её в архив ZIP с помощью WinRar или подобной программой. Загрузите новую тему в WordPress, активируйте её и посмотрите в действии!

Это было легко, не так ли? Вы можете задать стиль вашей теме, какой вы хотите, но большинство функций, которые мы любим в WordPress по-прежнему неактивно. В следующей статье цикла мы поднимемся на ступеньку выше и будем работать с другими аспектами программирования WordPress (например, файлы шаблонов и шаблонов тегов), которые позволят вам превратить ваши HTML - шаблоны в зависимости от того, как вам нравится. Оставайтесь с нами!

Продолжение следует...

Автор этого материала - я - Пахолков Юрий. Я оказываю услуги по написанию программ на языках Java, C++, C# (а также консультирую по ним) и созданию сайтов. Работаю с сайтами на CMS OpenCart, WordPress, ModX и самописными. Кроме этого, работаю напрямую с JavaScript, PHP, CSS, HTML - то есть могу доработать ваш сайт или помочь с веб-программированием. Пишите сюда.

статьи IT, WordPress, создание сайтов, верстка

Отправляя сообщение я подтверждаю, что ознакомлен и согласен с политикой конфиденциальности данного сайта.

Программирование up

Мои услуги