Этот учебник покажет вам , как создать простую тему WordPress. При создании собственной темы, вы можете использовать бесплатные темы из репозитория WordPress.
Для того, чтобы начать строить свою тему, сначала нужно создать вложенную папку в каталоге wp-content/themes в вашей папке WordPress. Для этого урока мы будем называть папку «tutorial_themes». Имя папки должно соответствовать названию темы, которую вы хотите создать. Для этого вы можете использовать любой FTP — клиент или менеджер файлов в вашей хост-панели.
Перед тем, как приступить к созданию темы, вы должны решить, как будет выглядеть макет вашего сайта. На этом уроке мы будем строить тему WordPress, которая состоит из заголовка, боковой панели, область содержимого и нижнего колонтитула, как показано ниже:
Для этого мы должны создать следующие файлы в директории tutorial_themes:
Вы можете создать эти файлы локально с помощью простого текстового редактора (например ,блокнота) , и загрузить их через FTP или вы можете использовать Диспетчер файлов в вашей хост-панели для создания файлов непосредственно на вашей учетной записи хостинга.
Теперь давайте рассмотрим каждый файл и что он должен содержать:
В этом файле вы должны добавить следующий код:
<html>
<head>
<title>Учебник по темам</title>
<link rel="stylesheet" href="<?php bloginfo('stylesheet_url'); ?>">
</head>
<body>
<div id="wrapper">
<div id="header">
<h1>ЗАГОЛОВОК</h1>
</div>
В основном, это простой HTML-код с одной строкой, содержащей код PHP и стандартную функцию WordPress. В этом файле вы можете указать мета-теги, такие как заголовок вашего сайта, мета-описания и ключевые слова для вашей страницы.
Сразу же после титула мы добавим
<link rel="stylesheet" href="<?php bloginfo('stylesheet_url'); ?>">
он сообщает WordPress, чтобы загрузить файл style.css. Он будет обрабатывать стиль вашего сайта.
<?php bloginfo('stylesheet_url'); ?>
это функция WordPress, которая на самом деле загружает файл таблицы стилей.
Затем мы добавили в начало «div» с классом обертку, которая будет основной контейнер сайта. Мы установили класс для этого, чтобы мы могли изменить его с помощью файла style.css.
После этого мы добавили простое название ЗАГОЛОВОК, завернутое в «div» с классом «header», который будет позже указан в файле таблицы стилей.
<?php get_header(); ?>
<div id="main">
<div id="content">
<h1>Главная облать</h1>
<?php if (have_posts()) : while (have_posts()) : the_post(); ?>
<h1><?php the_title(); ?></h1>
<h4>Опубликован <?php the_time('F jS, Y') ?></h4>
<p><?php the_content(__('(далее...)')); ?></p>
<hr> <?php endwhile; else: ?>
<p><?php _e('Извините, нет постов по вашим запросам.'); ?></p><?php endif; ?>
</div>
<?php get_sidebar(); ?>
</div>
<div id="delimiter">
</div>
<?php get_footer(); ?>
Код в этом файле начинается с
<?php get_header(); ?>
который будет включать файл header.php и код в нем на главной странице. Он использует внутреннюю функцию WordPress, чтобы сделать это. Мы объясним это подробно позже в этом руководстве. Тогда мы поместили текст Основная область, чтобы указать, какой раздел вашей темы отображается в этой области.
Следующие несколько строк состоят из PHP кода и стандартных функций WordPress. Этот код проверяет, есть ли у вас сообщения в своем блоге, созданных с помощью WordPress административной панели WordPress и отображает их.
Далее, мы включаем файл sidebar.php с этой линии
<?php get_sidebar(); ?>
В этом файле вы можете отобразить Ваш пост, категории, архивы и т.д.
После этой линии, мы вставляем пустой «div», который будет разделять основной областью и боковую панель от нижнего колонтитула.
Наконец, мы добавляем одну последнюю строку
<?php get_footer(); ?>
который будет включать файл footer.php на вашей странице.
В sidebar.php мы добавим следующий код:
<div id="sidebar">
<h2 ><?php _e('Категории'); ?></h2>
<ul >
<?php wp_list_cats('sort_column=name&optioncount=1&hierarchical=0'); ?>
</ul>
<h2 ><?php _e('Архивы'); ?></h2>
<ul >
<?php wp_get_archives('type=monthly'); ?>
</ul>
</div>
В этом файле мы используем внутренние функции WordPress для отображения категории и архивы постов. Функция возвращает WordPress их как элементы списка, поэтому мы обернули фактические функции в не отсортированных списках (теги <ul>).
Вы должны добавить эти строки в файл footer.php:
<div id="footer"> <h1>ПОДВАЛ</h1> </div> </div> </body> </html>
С помощью этого кода мы добавим простое название нижнего колонтитула. Вместо этого кода вы можете добавить ссылки, дополнительный текст, информацию об авторских правах для вашей темы и дополнительные объекты.
Добавьте следующие строки в файл style.css:
body { text-align: center; }
#wrapper { display: block; border: 1px #a1a2a2 solid; width:90%; margin:0px auto; }
#header { border: 1px #a2a2a2 solid; }
#content { width: 74%; border: 2px #a1a2a2 solid; float: left; }
#sidebar { width: 24%; border: 2px #a1a2a2 solid; float: right; }
#delimiter { clear: both; }
#footer { border: 1px #a1a2a2 solid; }
.title { font-size: 12pt; font-family: verdana; font-weight: bold; }
Этот простой файл CSS устанавливает основный дизайн вашей темы. Эти строки устанавливают фон вашей страницы и окружены основные части вашего сайта границами для удобства.
Как мы уже упоминали, внутренние функции WordPress часто используются в коде темы. Вы можете взглянуть на полный Справочник по функциям на официальном сайте WordPress для получения дополнительной информации о каждой функции.
С этого момента вы можете изменить файл CSS, добавлять изображения, анимацию и другое содержание к вашей теме, чтобы достичь какого вы хотите внешнего вида для вашего блога!
(Пока оценок нет)
Загрузка...
Заполните форму и наш менеджер перезвонит Вам в самое ближайшее время!
Спасибо! Ваша заявка принята
Спасибо! Ваша заявка принята
