Мы протестировали тему, убедились что все файлы содержат верную кодировку и теперь доведем до конца создание файла 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
В 4-ом уроке мы задали описание для нашей “самоделки” и теперь сделаем скриншот для нее.
Наша тема будет иметь изображение как показано на рисунке, конечно это только предварительный скриншот и даже скриншотом это не назовешь, но поскольку тема еще не имеет никакого вида то мы просто что-нибудь напишем на скриншоте. В дальнейшем этот скриншот можно исправить.
Чтобы получить такой скриншот сделайте файл screenshot.gif с размерами 240х180 и скопируйте его в папку с темой free_subject.
Отлично, в следующем уроке мы сделаем некоторые изменения в файлах и протестируем нашу темку.
Как создать тему для WordPress
Урок 1. Создаем тему для WordPress
Урок 2. Создаем файл index.php
Урок 3. Тег head для блога
Урок 4. Редактирование таблицы стилей
Урок 5. Скриншот для темы WordPress
Урок 6. Тестируем самодельную тему
Урок 7. Функции файла index.php
Урок 8. Функции файла comments.php
В WordPress для “одушевления” темы используется файл style.css в нем указаны параметры темы и его создателя. Например, если запустить тему в том виде в каком она сейчас есть то получим вот такую картину:
Как видите тема не подписана, нет автора и не написано в какой папке хранятся ее файлы. Эта задача легко решаема, откройте файл style.css и сделайте следующую запись:
@charset “utf-8″;
Это задание кодировки для таблицы стилей.
Теперь напишем название темы и ее url:
@charset “utf-8″;
/*
Theme Name: Free_subject
Theme URL: https://computerlessons.ru
*/
Добавляем описание темы или любой текст который захотите:
@charset “utf-8″;
/*
Theme Name: Free_subject
Theme URL: https://computerlessons.ru
Description: Русская тема Free_subject от создателя <a href=/>ComputerLessons.ru</a> Другие темы для WordPress на сайте <a href=http://on-line-design.ru>On-Line-Design.ru</a>
*/
Осталось прописать автора темы и веб-адрес:
@charset “utf-8″;
/*
Theme Name: Free_subject
Theme URL: https://computerlessons.ru
Description: Русская тема Free_subject от создателя <a href=/>ComputerLessons.ru</a> Другие темы для WordPress на сайте <a href=http://on-line-design.ru>On-Line-Design.ru</a>
Author: ComputerLessons.ru
Author URI: https://computerlessons.ru
*/
Итог работы:
В следующем уроке создадим скриншот для нашей самописной темы.
Как создать тему для WordPress
Урок 1. Создаем тему для WordPress
Урок 2. Создаем файл index.php
Урок 3. Тег head для блога
Урок 4. Редактирование таблицы стилей
Урок 5. Скриншот для темы WordPress
Урок 6. Тестируем самодельную тему
Урок 7. Функции файла index.php
Урок 8. Функции файла comments.php
На предыдущем уроке мы сделали папку с новой темой free_subject и семь файлов:
/free_subject/
header.php
sidebar.php
index.php
sidebar_right.php
footer.php
comments.php
style.css
Теперь разберемся что должен содержать файл index.php. У нас уже есть таблица с ячейками в которые нужно вставить части темы.
Начнем с файла header.php он должен выводиться в верхней части таблицы, для этого добавим следующий код вместо записи “Шапка, файл header.php“:
<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</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>
Чтобы в дальнейшем не путаться что и где выводится выделите код поясниями, как в примере выше.
Теперь выведем на страницу файлы sidebar.php, sidebar_right.php и footer.php, обратите внимание на то как выводится файл sidebar_right.php
<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 –>
Контент, файл index.php
<!– Конец вывода 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>
Без изменений осталась только строка для файла index.php
Переходим к 3-у уроку где мы рассмотрим содержание тега <head></head>
Как создать тему для 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 сделай сам
Рейтинг статьи
Загрузка ...
Связанные записи
Все записи
Загрузка ...
Научитесь зарабатывать в Интернете + ПартнЁрка
