Risotto » html http://blog.sleety.org Темы для Wordpress на русском языке. Wed, 31 Mar 2010 13:10:51 +0000 en hourly 1 Wordpress Theme Generator http://blog.sleety.org/wp/wordpress-theme-generator/ http://blog.sleety.org/wp/wordpress-theme-generator/#comments Sun, 14 Sep 2008 17:57:20 +0000 deerstop http://blog.sleety.org/?p=115 Мы наконец-то переехали на новый хостинг и заодно обновились до Wordpress 2.6.2. Всё, вроде бы, функционирует нормально, за исключением тэгов, ссылки на которые работать упорно отказываются. Но я их заставлю. :)

В прошлом году практически в каждом блоге висела ссылка на генераторы тем для Wordpress с предложением попробовать, но в то время я совершенно не заинтересовалась, а тут на днях Сергей подкинул несколько ресурсов, позволяющих быстро и просто создавать темы для Wordpress:

Я решила проверить, какой на деле толк от генераторов. Первый сайт мне не очень понравился: функций много, даже есть возможность загружать изображения, но интуитивно сложно разобраться, куда нажимать. Управление неудобное, и нельзя сделать симпатичную тему за пару минут. С другой стороны, если вы любите копаться в деталях и продумывать цвет каждого крошечного блока, то, наверное, этот ресурс как раз для вас. :)

Тот случай, когда без «пол-литры» не разберёшься:

Я где-то с третьего раза догадалась, что значат «Pos. Hor» и «Pos. Ver».

На втором сайте меню гораздо удобнее и сразу ясно, что требуется от пользователя. Возможностей намного меньше, но зато остаётся шанс поправить готовую тему вручную. Любой человек, пользовавшийся визуальными редакторами (Microsoft FrontPage, Dreamweaver) знает, насколько сильно автоматика запутывает код, поэтому чем меньше будет этого кода, тем лучше. Нечто полноценное в генераторе создать, конечно, нельзя, но зато можно сбросить с себя рутинную работу по размещению блоков и сразу заняться украшательствами.

Кстати, в готовой теме весь текст будет на английском, поэтому для неопытного русскоязычного пользователя генератор тем полностью бесполезен. :) Вообще, должна сказать, что работа с генератором изрядно напоминает русификацию тем: генератор может служить большим подспорьем, если вы немного разбираетесь в html и готовы исправлять ошибки, а также переводить файлы шаблона с английского языка.

]]> http://blog.sleety.org/wp/wordpress-theme-generator/feed/ 0 Создание темы для Wordpress. http://blog.sleety.org/wp/create-wp-theme/ http://blog.sleety.org/wp/create-wp-theme/#comments Mon, 11 Jun 2007 06:42:26 +0000 deerstop Оригинал статьи – anekostudios.com. Перевод вольный.

Часто спрашивают, как изменить дизайн сайта так, чтобы он работал под Wordpress. На самом деле, это довольно просто. Сайт, который вы видите — мой первый опыт в изготовлении подобных тем. Я расскажу, как заставить мирно сосуществовать Wordpress и любые дизайны. Надеюсь, у вас есть хотя бы какие-то познания в HTML, CSS и — в идеале — PHP, но если возникнут вопросы, можете задавать их прямо здесь, в комментариях.

Итак, я расскажу, что я обычно делаю, когда у меня есть:
1) сайт, который надо совместить с Wordpress
и/или 2) желание создать новую тему специально для Wordpress.

Шаг первый. Оформление вашего сайта.

Для начала надо создать сам сайт. Я использую тот язык разметки, который мне удобнее (обычно XHTML 1.0 Strict, при необходимости Transitional), и просто сооружаю шаблон сайта: кодирую всё, как если бы делала обычную статическую страницу, создаю кнопки, заголовки, файл стилей CSS и цвета — всё. После этого я проверяю код и файл стилей на наличие ошибок. Такая проверка очень важна, особенно если вы собираетесь разместить готовую тему для общего пользования. Если вы исправите ошибки сейчас, то более чем в два раза сократите время последующих правок. Я также стараюсь чаще комментировать во время работы, особенно когда кодирую в XHTML. Нет ничего противнее, чем наблюдать кучу <div>-тэгов в начале файла, столько же в конце, еще больше — в середине, и не знать, какой <div> закрыт, а какой нет.

пример дизайна, состоящего из двух колонок В общем, для примера возьмем дизайн, состоящий из двух колонок. Конечный код (без текстового наполнения) будет выглядеть примерно так:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
<title></title>
<meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1" />
<meta name="description" content="" />
<meta name="keywords" content="" />
<meta name="copyright" content="Copyright 2005" />
<meta name="author" content="" />
<meta http-equiv="imagetoolbar" content="no" />
<meta name="MSSmartTagsPreventParsing" content="true" />
<link rel="stylesheet" href="global.css" />
</head>
<body>
<div id="wrapper">

<div id="header">
</div> <!-- конец заголовка -->

<div id="content">

<div id="sidebar">
</div> <!-- конец боковой панели -->

<div id="main">
</div>

</div> <!-- конец содержимого -->

<div id="footer">
</div> <!-- конец нижней части -->

</div> <!-- конец наполнителя -->
</body>
</html>

Зачем мне получившийся файл с готовым дизайном? Я хочу быть уверена в том, что все составляющие шаблона находятся на своих местах и в правильном порядке, и проверить ошибки на этой стадии — ведь, например, один незакрытый тэг <div> может превратить ваш дизайн в бесполезное месиво из текста и картинок. Закончите кодировку шаблона сейчас, прежде чем мы разделим этот сайт под Wordpress, исправлять что-либо потом будет немного сложнее, особенно если вы не очень разбираетесь в коде. :)

А теперь, когда готов сам дизайн, давайте приспособим его для Wordpress.

Шаг второй. Разделение шаблона.

Итак, сначала нужно разделить шаблон. Вы должны разделить свой дизайн на 4 части: header.php, footer.php, index.php и sidebar.php. Что они значат?

header.php — заголовок, то, начало вашего сайта. Обычно состоит из статичных элементов: какие-то картинки, ссылки, иногда меню.

sidebar.php — боковая панель. :)

index.php — «начинка» сайта, тут лежит ценное содержимое и динамически меняющиеся элементы (то есть программный код). :)

footer.php — нижний колонтитут, конец шаблона.

Wordpress, грубо говоря, соединяет эти четыре части, как паззл. Каждый файл ложиться на свое место и образует сам сайт. Для чего это нужно? Возьмем пример, когда в вашем сайте более ста страниц. У каждой страницы одинаковый заголовок, фоновые изображения, панель навигации и т.д., меняется чаще всего только содержимое. И если вам нужно, к примеру, добавить ссылку в меню, то придется вручную вставлять эту ссылку на каждую из 100 страниц. Когда вы используете темы, то достаточно сделать только одно изменение – например, добавить ссылку в sidebar.php — и изменяться все остальные страницы. По-моему, очень мило.

Вернемся к коду, который мы соорудили, и я покажу, как разбить его на части.

header.php:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
<title></title>
<meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1" />
<meta name="description" content="" />
<meta name="keywords" content="" />
<meta name="copyright" content="Copyright 2005" />
<meta name="author" content="" />
<meta http-equiv="imagetoolbar" content="no" />
<meta name="MSSmartTagsPreventParsing" content="true" />
<link rel="stylesheet" href="global.css" />
</head>

<body>

<div id="wrapper">

<div id="header">
</div> <!-- Конец заголовка -->

<div id="content">

С этого когда будет начинаться каждая ваша wordpress-страница. Далее у нас идет боковая панель:

sidebar.php:

<div id="sidebar">
</div> <!-- конец боковой панели --> И, наконец, нижняя панель:

footer.php:

</div> <!-- конец содержимого -->
<div id="footer">
</div> <!-- конец нижней части -->
</div> <!-- конец наполнителя -->

</body>
</html>

Я пропустила index.php, чтобы для начала показать статичные (не меняющиеся) области сайта. Конечно, впоследствии вы можете вставить туда и динамически меняющиеся элементы. А теперь index.php:

index.php:

<?php
get_header();
?>

<?php
get_sidebar();
?>

<div id="main">
<?php if (have_posts()) : while (have_posts()) : the_post(); ?>
<?php the_date('','<h2>','</h2>'); ?>

<div class="post" id="post-<?php the_ID(); ?>">

<h3 class="storytitle">
<a href="<?php the_permalink() ?>" rel="bookmark"><?php the_title(); ?></a></h3>
<div class="meta">
<?php _e("Filed under:"); ?> <?php the_category(',') ?> —
<?php the_author() ?> @ <?php the_time() ?> <?php edit_post_link(__('Edit This')); ?>
</div>
<div class="storycontent">
<?php the_content(__('(more...)')); ?>
</div>

<div class="feedback">

<?php wp_link_pages(); ?>

<?php comments_popup_link(__('Comments (0)'), __('Comments (1)'), __('Comments (%)')); ?>
</div>

</div> <!--closing .post -->
<?php comments_template(); // Get wp-comments.php template ?>
<?php endwhile; else: ?>
<p>
<?php _e('Sorry, no posts matched your criteria.'); ?>
</p>
<?php endif; ?>

<?php posts_nav_link(' — ', __('« Предыдущая страница'), __('Следующая страница »')); ?>

<?php get_footer(); ?>

</div>

Если вы приглядитесь, то заметите, что это все тот же шаблон, разграниченный тэгами <div>. Только теперь он разбит на части:

<?php
get_header();
?>

<?php
get_sidebar();
?>

Здесь идет содержимое сайта, а именно, программный код. Чтобы разбираться в нем, желательно знать основы PHP-программирования. И заканчивается…

<?php
get_footer();
?>

Wordpress начнет загрузку сайта с того, что вызовет страницу index.php, которая, в свою очередь, увидит этот php-код и обратиться к header.php, sidebar.php и footer.php. К примеру,
<?php
get_header();
?>
разместит на странице заголовок — содержимое файла header.php. И так далее, пока наш сайт не соберется, как детский конструктор.

Шаг третий. Использование CSS

Итак, шаблон сайта готов, но если вы загрузите его прямо сейчас, то работать он не будет. :) Почему? Дело в том, что мы не позаботились указать правильный путь к файлу со стилями. Обычный адрес вроде

<link rel=»stylesheet» href=»style1.css» />

в данном случае не сработает. Дело в том, что файлы не будут располагаться в корневой директории сайта, а ссылка с header.php пока ведет именно туда. Вот правильный путь к CSS-файлу, который используется по умолчанию:

<link rel=»stylesheet» href=»<?php bloginfo(’stylesheet_url’); ?>» />

«Стоп!», – скажете вы. У меня же есть и другие файлы стилей: например, дополнительные заплатки для броузера IE или стили для печати страницы на принтере. Воспользуемся альтернативным вариантом:

<?php bloginfo(‘template_directory’); ?>

Это код указывает путь к вашей директории шаблонов (themes). Далее вам нужно самим указать конкретный файл со стилями, например, print.css для печати страницы на принтере:
<link rel=»stylesheet» href=»<?php bloginfo(‘template_directory’); ?>/print.css» media=»print» />
Также помните, что Wordpress, помимо своих собственных тэгов, активно использует готовые тэги HTML. Например, меню пол умолчанию оформляется как список:

<ul><h2>Ваше меню</h2>
<li>ссылка первая</li>
<li>ссылка вторая</li>
<li>еще ссылка</li>
<li>ссылка</li>
</ul>

Таким образом, если вы не используете <li> в стилях, ваша панель навигации будет выглядеть странно. Лучше назначить CSS какие-то свойства для этих тэгов. Если встретитесь с подобной ситуацией, просто посмотрите сам код страницы («CTRL» + «U» в браузере Firefox), чтобы узнать, какие-именно тэги использовал Wordpress.

Окончание

С внешним оформлением вы закончили, осталось наполнить его содержимым. Например, изменить index.php по вашему желанию, включить панель навигации в sidebar.php:

<div id="sidebar">
<?php get_links_list(); ?>
</div>

Теперь надо сделать скриншот, чтобы наш дизайн красиво отображался на странице выбора шаблонов (панель администратора Wordpress, по умолчанию Presentation или «Внешний вид»). Откройте шаблон в вашем браузере, нажмите Print Screen, затем вставьте изображение в любой графический редактор (Edit -> Paste). Уменьшите изображение до размера 300х225 и сохраните как «screenshot.png» (расширение — png).

Также желательно добавить информацию о шаблоне в css-файл. Открываете файл со стилями и в самом начале пишете:

/*
Theme Name: Название вашей темы.
Theme URI: Адрес темы в интернете.
Description: Описание.
Author: Ваше имя. :)
Author URI: Ваш сайт.
Version: Версия. Первая, вторая и так далее. Обычно номеруют: version 1.0, 2.0 и так далее. Впрочем, можете обозначать версии любым способом, каким вам удобно, например, указывать дату создания шаблона.
*/

Вот и всё. Теперь поместите файлы в какую-нибудь папку, например, newtheme. Осталось загрузить папку в директорию с другими шаблонами, по умолчанию это wp-content/themes.

Например: http://www.сайт.com/wordpress/wp-content/themes/newtheme

]]> http://blog.sleety.org/wp/create-wp-theme/feed/ 31