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

введение

Вы когда-нибудь хотели узнать, как создать свой собственный шаблон 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>

 

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(); ?>

 

style.css

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

body {

	background-color: lightblue;

}

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



2016-12-07T14:12:54
Темы WordPress