Потребитель — это покупатель, который на что-либо жалуется (Гарольд Коффин).

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

FavoriteLoadingДобавить в избранное
1 Звезда2 Звезды3 Звезды4 Звезды5 Звезд (1 оценок, среднее: 5,00 из 5)
Загрузка...
7 декабря 2016
Создать тему WordPress с нуля

введение

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


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

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

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

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

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 с нуля

Если вы нашли ошибку, пожалуйста, выделите фрагмент текста и нажмите Ctrl+Enter.

Просмотров: 198

Если статья понравилась, то поделитесь ей в социальных сетях:

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

Войти с помощью: 

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

Сообщить об опечатке

Текст, который будет отправлен нашим редакторам:

Заполните форму и наш менеджер перезвонит Вам в самое ближайшее время!

badge
Обратный звонок 1
Отправить
galka

Спасибо! Ваша заявка принята

close
galka

Спасибо! Ваша заявка принята

close