Вы уже знакомы с уроками о том как самому сделать тему для WordPress, а теперь я даю вам возможность сэкономить свое время и сделать свой дизайн для уже готовой темы. Я говорю о теме с практически чистым файлом стилей и пояснениями в каждом файле, чтобы вам было проще разобраться во всех функциях WordPress. Так же не забывайте о сборнике функций для WordPress в котором вы найдете еще несколько интересных решений.
Тема состоит из 8 файлов:
1 - шапка сайта, файл header.php
2 - тело сайта, файл index.php
3 - формируем комментарии, файл comments.php
4 - формирование виджетов в сайдбаре, файл functions.php
5 - левый сайдбар сайта, файл sidebar.php
6 - правый сайдбар сайта, файл sidebar_2.php
7 - подвал сайта, файл footer.php
8 - стили, файл style.css
Тема трехколоночная с виджетсовместимыми сайдбарами. В теме есть пояснения практически по всем функциям и вам не составит труда придать теме свой неповторимый дизайн. Вобщем качайте тему и смотрите сами.
Мы протестировали тему, убедились что все файлы содержат верную кодировку и теперь доведем до конца создание файла index.php, а именно пропишем функции для вывода содержания блога.
Файл index.php предназначен для вывода страниц и постов блога. Начнем с того, что заключим все содержание выводимой информации в один блок:
<html>
<head>
<meta http-equiv=Content-Type content=text/html; charset=utf-8>
<title><?php bloginfo(’name’); ?><?php wp_title(); ?></title>
<style type=text/css media=screen>
@import url( <?php bloginfo(’stylesheet_url’); ?> );
</style>
<?php wp_head(); ?>
<link href=”images/favicon.ico” rel=”shortcut icon”>
</head>
<body>
<div align=center>
<table border=0 cellpadding=8 cellspacing=0 width=900 id=page>
<tr>
<td colspan=3>
<!– Выводим на страницу header –>
<?php get_header(); ?>
<!– Конец вывода header –>
</td>
</tr>
<tr>
<td width=200 valign=top>
<!– Выводим на страницу sidebar –>
<?php get_sidebar(); ?>
<!– Конец вывода sidebar –>
</td>
<td width=500 valign=top>
<!– Выводим на страницу index –>
<div id=index>
Контент, файл index.php, тут будут разные функции.
</div><!– /index –>
<!– Конец вывода index –>
</td>
<td width=200 valign=top>
<!– Выводим на страницу sidebar_right –>
<?php include(TEMPLATEPATH . ‘/sidebar_right.php’); ?>
<!– Конец вывода sidebar_right –>
</td>
</tr>
<tr>
<td colspan=3>
<!– Выводим на страницу footer –>
<?php get_footer(); ?>
<!– Конец вывода footer –>
</td>
</tr>
</table>
</div>
</body>
</html>
Чтобы не запутаться в закрывающих тегах для </div> допишем пояснения вида <!– /index –>
Итак, начнем, для вывода постов (записей) необходим следующий цикл:
<div id=index>
<?php if (have_posts()) : while (have_posts()) : the_post(); ?>
<?php endwhile; else: ?>
<?php endif; ?>
</div><!– /index –>
Теперь будем работать внутри этого цикла, добавим вывод заголовка поста и выделим его тегом <h1>
<div id=index>
<?php if (have_posts()) : while (have_posts()) : the_post(); ?>
<h1><a href=”<?php the_permalink() ?>” rel=”bookmark”><?php the_title(); ?></a></h1>
<?php endwhile; else: ?>
<?php endif; ?>
</div><!– /index –>
Выводим содержание статьи:
<div id=index>
<?php if (have_posts()) : while (have_posts()) : the_post(); ?>
<h1><a href=”<?php the_permalink() ?>” rel=”bookmark”><?php the_title(); ?></a></h1>
<?php the_content(__(’(more…)’)); ?>
<?php endwhile; else: ?>
<?php endif; ?>
</div><!– /index –>
Можно вывести еще информацию об авторе статьи, дату и время публикации, мы этого делать не будем. Выведем информацию о том в какой рубрике написан пост:
<div id=index>
<?php if (have_posts()) : while (have_posts()) : the_post(); ?>
<h1><a href=”<?php the_permalink() ?>” rel=”bookmark”><?php the_title(); ?></a></h1>
<?php the_content(__(’(more…)’)); ?>
<?php _e(”Написано в рубрике:”); ?> <?php the_category(’,') ?>
<?php endwhile; else: ?>
<?php endif; ?>
</div><!– /index –>
Выводим список использованных меток:
<div id=index>
<?php if (have_posts()) : while (have_posts()) : the_post(); ?>
<h1><a href=”<?php the_permalink() ?>” rel=”bookmark”><?php the_title(); ?></a></h1>
<?php the_content(__(’(more…)’)); ?>
<?php _e(”Написано в рубрике:”); ?> <?php the_category(’,') ?>
<?php the_tags(’Метки:’); ?>
<?php endwhile; else: ?>
<?php endif; ?>
</div><!– /index –>
Функция для редактирования записи:
<div id=index>
<?php if (have_posts()) : while (have_posts()) : the_post(); ?>
<h1><a href=”<?php the_permalink() ?>” rel=”bookmark”><?php the_title(); ?></a></h1>
<?php the_content(__(’(more…)’)); ?>
<?php _e(”Написано в рубрике:”); ?> <?php the_category(’,') ?>
<?php the_tags(’Метки:’); ?>
<?php edit_post_link(’Редактировать’); ?>
<?php endwhile; else: ?>
<?php endif; ?>
</div><!– /index –>
Выводим функции для навигации по страницам блога:
<div id=index>
<?php if (have_posts()) : while (have_posts()) : the_post(); ?>
<h1><a href=”<?php the_permalink() ?>” rel=”bookmark”><?php the_title(); ?></a></h1>
<?php the_content(__(’(more…)’)); ?>
<?php _e(”Написано в рубрике:”); ?> <?php the_category(’,') ?>
<?php the_tags(’Метки:’); ?>
<?php edit_post_link(’Редактировать’); ?>
<?php next_posts_link(__(’Предыдущая запись’)) ?>
<?php previous_posts_link(__(’Следующая запись’)) ?>
<?php endwhile; else: ?>
<?php endif; ?>
</div><!– /index –>
Вызываем информацию о комментариях:
<div id=index>
<?php if (have_posts()) : while (have_posts()) : the_post(); ?>
<h1><a href=”<?php the_permalink() ?>” rel=”bookmark”><?php the_title(); ?></a></h1>
<?php the_content(__(’(more…)’)); ?>
<?php _e(”Написано в рубрике:”); ?> <?php the_category(’,') ?>
<?php the_tags(’Метки:’); ?>
<?php edit_post_link(’Редактировать’); ?>
<?php next_posts_link(__(’Предыдущая запись’)) ?>
<?php previous_posts_link(__(’Следующая запись’)) ?>
<?php comments_popup_link(’Нет комментариев’, ‘1 Комментарий’, ‘% Комментариев’); ?>
<?php comments_template(); ?>
<?php endwhile; else: ?>
<?php endif; ?>
</div><!– /index –>
Наконец выводим сообщение об ошибке если запрешенной страницы не существует, обратите внимание куда правильно вставлять этот код:
<div id=index>
<?php if (have_posts()) : while (have_posts()) : the_post(); ?>
<h1><a href=”<?php the_permalink() ?>” rel=”bookmark”><?php the_title(); ?></a></h1>
<?php the_content(__(’(more…)’)); ?>
<?php _e(”Написано в рубрике:”); ?> <?php the_category(’,') ?>
<?php the_tags(’Метки:’); ?>
<?php edit_post_link(’Редактировать’); ?>
<?php next_posts_link(__(’Предыдущая запись’)) ?>
<?php previous_posts_link(__(’Следующая запись’)) ?>
<?php comments_popup_link(’Нет комментариев’, ‘1 Комментарий’, ‘% Комментариев’); ?>
<?php comments_template(); ?>
<?php endwhile; else: ?>
<?php _e(’Sorry, no posts matched your criteria.’); ?>
<?php endif; ?>
</div><!– /index –>
На этом с основными функциями файла index.php мы закончили, теперь нужно задать параметры для дальнейшего форматирования (дизайна, внешнего вида) страницы, например так:
Параметры для страницы index.php зададим в файле style.css
Переходим к функциям файла комментариев comments.php
Как создать тему для WordPress
Урок 1. Создаем тему для WordPress
Урок 2. Создаем файл index.php
Урок 3. Тег head для блога
Урок 4. Редактирование таблицы стилей
Урок 5. Скриншот для темы WordPress
Урок 6. Тестируем самодельную тему
Урок 7. Функции файла index.php
Урок 8. Функции файла comments.php
На предыдущих 5-ти уроках нами были сделаны основные файлы для темы WordPress. Теперь мы сделаем несколько изменений в этих файлах и протестируем нашу темку.
Откройте поочередно все файлы темы кроме index.php и пропишите на русском языке их названия, например в файл header.php пишем ШАПКА и т.д.
Теперь зайдите в панель администратора и активируйте тему Дизайн => Темы.
Посмотрите как теперь выглядит ваш блог:
Если у вас получилось как показано на рисунке ниже, значит вам нужно изменить кодировку для всех файлов темы:
Для изменения кодировки откройте файл в Дримвеаре, откройте окно свойств страницы:
Выберите кодировку UTF-8 и сохраните документ:
Проделайте эти действия для всех файлов и обновите страницу блога, все иероглифы исправятся на нормальные буквы.
Продолжаем создавать нашу тему и в следующем уроке доделаем файл index.php
Как создать тему для WordPress
Урок 1. Создаем тему для WordPress
Урок 2. Создаем файл index.php
Урок 3. Тег head для блога
Урок 4. Редактирование таблицы стилей
Урок 5. Скриншот для темы WordPress
Урок 6. Тестируем самодельную тему
Урок 7. Функции файла index.php
Урок 8. Функции файла comments.php
Вы решили сделать для своего блога самописную тему? Тогда начнем с того, что установим Вордпресс для тестирования нашей будущей темы. Не советуем тестировать создаваемую тему на вашем работающем блоге с записями, мало ли что случится! Лучше всего установите новый Вордпресс в Денвере, затем откройте папку wp-content/themes и создайте в ней новую папку для будущей темы, назовите ее, например: free_subject или как захотите…
Решите для себя какая будет структура у вашего блога, будет меню слева или справа, ширина таблиц, расположение контента и рекламы…
Создайте файл index.php с таблицей, например так:
В таблице подписано в какой ячейке будут располагаться части темы, тоесть из каких файлов будет “собираться” единый внешний вид. Таким образом получилось 5 файлов:
header.php - выводит шапку сайта
sidebar.php - выводит меню
index.php - выводит контент
sidebar_right.php - выводит меню для рекламы
footer.php - выводит подвал сайта
В дальнейшем нам еще понадобится файл comments.php который будет выводить комментарии. Для задания стилей еще нужно создать файл style.css. Итого получилось 7 главных файлов их вполне достаточно для создания полноценной темы для блога. Конечно для рабочей темы можно было обойтись и одним файлом index.php, но удобнее разбить его на несколько файлов и работать отдельно с каждым из них.
Итог урока: Новая папка с пустыми файлами (7файлов) только в файле index.php имеется следующий хтмл-код:
<div align=center>
<table border=0 cellpadding=8 cellspacing=0 width=900 id=page>
<tr>
<td colspan=3>Шапка, файл header.php</td>
</tr>
<tr>
<td width=200 valign=top>Меню, файл sidebar.php</td>
<td width=500 valign=top>Контент, файл index.php</td>
<td width=200 valign=top>Реклама, файл sidebar_right.php</td>
</tr>
<tr>
<td colspan=3>Подвал, файл footer.php</td>
</tr>
</table>
</div>
Переходим к следующему уроку, где мы подробнее поработаем над файлом index.php.
Как создать тему для WordPress
Урок 1. Создаем тему для WordPress
Урок 2. Создаем файл index.php
Урок 3. Тег head для блога
Урок 4. Редактирование таблицы стилей
Урок 5. Скриншот для темы WordPress
Урок 6. Тестируем самодельную тему
Урок 7. Функции файла index.php
Урок 8. Функции файла comments.php
Сборник функций для создания тем WordPress
Известно, что изменить внешний вид блога, работающего на WordPress, очень просто, достаточно зайти в панель администратора и выбрать в закладке Дизайн одну из доступных тем. Конечно, предварительно темы нужно скопировать в папку wp-content/themes. По умолчанию WordPress использует тему default, ее внешний вид изображен на рисунке:
Не каждого вебмастера удовлетворит данная тема, поэтому многие ищут в Интернете другие темы или делают их сами, кстати на создании тем для WordPress некоторые еще и зарабатывают.
Наш сайт computerlessons.ru также работает на движке блога WordPress и имеет самописную тему. Сделать тему для блога на первый взгляд сложно, но создав одну, вторую вы сможете сделать “с закрытыми глазами”.
Сделать свою тему для блога сможет каждый из вас, просто начните изучение с первого урока по созданию темы для WordPress.
Как создать тему для WordPress
Урок 1. Создаем тему для WordPress
Урок 2. Создаем файл index.php
Урок 3. Тег head для блога
Урок 4. Редактирование таблицы стилей
Урок 5. Скриншот для темы WordPress
Урок 6. Тестируем самодельную тему
Урок 7. Функции файла index.php
Урок 8. Функции файла comments.php
Сборник функций для создания тем WordPress
Тему для WordPress сделай сам
Научитесь зарабатывать в Интернете