Если хочешь быть счастливым, будь им (К. Прутков).

Создать тему WordPress с нуля

Главное меню » Блог-платформа wordpress » Лучшие учебники по темам WordPress » Создать тему WordPress с нуля

07.12.2016

введение

Вы когда-нибудь хотели узнать, как создать свой собственный шаблон WordPress? Это действительно легко. Следующие шаги помогут вам создать минималистичный шаблон с листингом-страницы и статьи-страницы на основе Twitter Bootstrap.

Начните с вашего шаблона

Зайдите в вашу установку WordPress и перейдите к wp—content/themes/.

Создайте новый каталог с именем вашей новой темой, в нашем примере my—theme.

Базовая версия должна содержать следующие файлы:

header.php
footer.php
index.php
single.php
style.css

header.php

Файл header.php является глобальным заголовком, который будет использоваться в каждом шаблоне страницы. В нашем примере он будет выглядеть следующим образом

<!DOCTYPE html>
<html lang="ru">
<head>
	<meta charset="utf-8">
	<!-- вывод заголовка HTML генерируется в WordPress -->
	<title><?php wp_title('|', true, 'right'); ?></title>
 
	<!-- включает bootstrap и темы собственного стиля -->
	<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css">
	<link rel="stylesheet" type="text/css" href="<?php echo get_stylesheet_uri(); ?>" media="screen" />
 
	<!-- включить jQuery и начальную загрузку JavaScript -->
	<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
	<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script>
 
	<!-- вызовите эту функцию, чтобы включить заголовки WordPress -->
	<?php wp_head(); ?>
</head>
<body>
 
<div class="container">
	<div class="row">
		<div class="col-xs-12">
			<div class="well">
				<!-- output the site title -->
				<p class="site-title"><a href="<?php echo esc_url( home_url( '/' ) ); ?>" rel="home"><?php bloginfo( 'name' ); ?></a></p>
 
				<!-- вывод описания сайта -->
				<?php
				$description = get_bloginfo( 'description', 'display' );
				if ( $description || is_customize_preview() ) : ?>
					<p class="site-description"><?php echo $description; ?></p>
				<?php endif; ?>
			</div>
		</div>
	</div>
</div>

footer.php

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

div class="container footer-box">
	<footer>
		<div class="container">
			<div class="row">
				<div class="col-xs-12 text-center">
					<!-- показывают авторское право в текущем году -->
					&copy; <?php echo date('Y'); ?>
				</div>
			</div>
		</div>
	</footer>
</div>
 
<!-- важно: включает контент подвала в WordPress -->
<?php wp_footer(); ?>
 
</body>
</html>

Читать WordPress 5.8.1 выпущен для исправления множества уязвимостей

index.php

Файл index.php является шаблоном, используемый для отображения страницы статьи листинга. В нашем примере это будет выглядеть следующим образом:

<!-- include our header -->
<?php get_header(); ?>
 
<div class="container">
	<div class="row">
		<!-- цикл через все посты -->
		<?php if (have_posts()) : while (have_posts()) : the_post(); ?>
		<div class="col-xs-12">
			<!-- название статьи на страницу c ссылкой на полное содержание -->
			<h2><a href="<?php the_permalink(); ?>"><?php the_title(); ?></a></h2>
			<p class="author">
				<!-- показать автора -->
				Автор: <?php the_author(); ?> &bull;
				<!-- показать дату опубликованной статьи -->
				Опубликовано: <?php the_date(); ?> &bull;
				<!-- показать количество комментариев -->
				<?php comments_number(); ?> &bull;
				<!-- показывать метки, присвоенные статьи -->
				<?php the_tags(); ?>
			</p>
			<div class="excerpt">
				<!-- вывести отрывок статьи -->
				<?php the_excerpt(); ?>
			</div>
			<div class="text-right">
				<!-- показать ссылку "Читать далее" связанной со статьей -->
				<a class="more-link" href="<?php the_permalink(); ?>">Читать далее</a>
			</div>
			<hr>
		</div>
		<?php endwhile; endif; ?>
	</div>
	<div class="row">
		<div class="col-xs-12">
			<div class="text-center">
				<!-- показать ссылки пагинации на предыдущую и следующую посты -->
				<?php previous_posts_link( '< Предыдущий пост' ); ?> &bull;
				<?php next_posts_link( 'Следующий пост >' ); ?>
			</div>
		</div>
	</div>
</div>
 
<!-- подключить футер -->
<?php get_footer(); ?>

single.php

Файл single.php содержит шаблон для просмотра одной статьи. Он выглядит следующим образом :

<!-- подключить заголовок -->
<?php get_header(); ?>
 
<div class="container">
	<!-- нужен цикл, хотя там только один пост -->
	<?php if (have_posts()) : while (have_posts()) : the_post(); ?>
	<div class="row">
		<div class="col-xs-12">
			<!-- показать заголовок поста -->
			<h1><?php the_title(); ?></h1>
			<p class="author">
				<!-- показать автора -->
				Автор: <?php the_author(); ?>&bull;
				<!-- показать дату публикации -->
				Опубликовано: <?php the_date(); ?>&bull;
				<!-- показать количество комментариев -->
				<?php comments_number(); ?>&bull;
				<!-- показать теги, присвоенные статьи -->
				<?php the_tags(); ?>
			</p>
			<hr>
		</div>
	</div>
						
	<div class="row">
		<div class="col-xs-12">
			<div class="content">
				<!-- показать содержание статьи -->
				<?php the_content(); ?>
			</div>
		</div>
	</div>
	
	<!-- если комментарии разрешены, показать комментарии -->
	<?php if (comments_open() || get_comments_number()): ?>
	<div class="well">
		<?php comments_template(); ?>
	</div>
	<?php endif; ?>
 
	<?php endwhile; endif; ?>
</div>
 
<!-- подключить подвал -->
<?php get_footer(); ?>

Читать Как добавить форму поиска в постах с помощью шорткода в WordPress

style.css

Файл style.css содержит директивы CSS, чтобы дать нашему шаблону свой уникальный внешний вид. Должен присутствовать, в противном случае наш шаблон не будет работать.