Создать тему 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">
<!-- показывают авторское право в текущем году -->
© <?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(); ?> • <!-- показать дату опубликованной статьи --> Опубликовано: <?php the_date(); ?> • <!-- показать количество комментариев --> <?php comments_number(); ?> • <!-- показывать метки, присвоенные статьи --> <?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( '< Предыдущий пост' ); ?> • <?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(); ?>• <!-- показать дату публикации --> Опубликовано: <?php the_date(); ?>• <!-- показать количество комментариев --> <?php comments_number(); ?>• <!-- показать теги, присвоенные статьи --> <?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;
}
Редактор: AndreyEx
