РЕКЛАМА
BlogJet - программа для публикации в WordPress. Очень удобная и полезная программа, значительно облегчит ваш труд при наполении блога новыми статьями. Печатать новый пост можно прямо в программе и позже подключиться к Интернет и опубликовать пост.
Установка BlogJet очень простая. Для подключения к вашему блогу достаточно ввести логин и пароль, если нужно опубликовывать изображения, то придётся ещё ввести ftp-данные от хостинга.
НОВОСТИ
Видеоурок о том как работать со скриптами в Денвере, например, установить скрипт блога Вордпресс.
Ничего особенного в уроке нету, просто пример того, что Денвер работает с PHP-файлами.
Как установить Денвер
Денвер
Мы протестировали тему, убедились что все файлы содержат верную кодировку и теперь доведем до конца создание файла 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
Уже создан файл index.php и выводятся основные файлы темы, теперь разберем содержание тега <head>.
Для начала в существующем хтмл-коде выделите “голову” и “тело”:
<html>
<head>
</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 –>
Контент, файл 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>
</body>
</html>
Укажем вид кодировки для блога. Обратите внимание что Вордпресс использует кодировку UTF-8 и менять ее на другую не рекомендуется:
<head>
<meta http-equiv=Content-Type content=text/html; charset=utf-8>
</head>
Выводим названия блога и страниц:
<head>
<meta http-equiv=Content-Type content=text/html; charset=utf-8>
<title><?php bloginfo(’name’); ?><?php wp_title(); ?></title>
</head>
Прикрепим таблицу стилей style.css
<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>
</head>
Для вывода некоторой служебной информации и ключевых слов (меток) вставьте следующую строку:
<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(); ?>
</head>
Наконец, если вы хотите выделить в дальнейшем свой блог, можно вставить строку для фавикона:
<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>
На этом с шапкой кода мы закончили, переходим к 4-у уроку - Редактирование таблицы стилей.
Как создать тему для 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
Рейтинг статьи
Загрузка ...
Страница 1 из 2 / 1 2 Следующая
Связанные записи
Все записи
Загрузка ...
Научитесь зарабатывать в Интернете + ПартнЁрка
