После длительных мучений в попытках найти верное сочетание плагинов, решение-таки нашлось! Оказывается, прекрасно работает комбинация Unfiltered MU с PHP Execution. После установки обоих плагинов нужно также зайти в настройки PHP Execution и изменить права для пользователей (включить извлечение кода, нажав «enable» напротив имени пользователя).

Согласно данным на сайте создателя плагина, PHP Execution должен работать даже с включенным визуальным редактором, хотя такой вариант я не проверяла.

Что делать, если вы хотите, например, сделать фон вашего комментария зеленым?


Довольно легкий способ описан в статье How-to style WordPress author comments («Как выделить авторские комментарии»), однако вам придется залезать в файлы Wordpress-шаблона.

Итак, ищите файл comments.php (папка wp-content/themes/, подпапка с вашим Wordpress-дизайном или «Default»), открывайте его в «Блокноте». Нас интересуют следующие строки.

<li <?php echo $oddcomment; ?>id="comment-<?php comment_ID() ?>">
<cite><?php comment_author_link() ?></cite> пишет:
<?php if ($comment->comment_approved == '0') : ?>

Здесь указано, в каком виде выводить комментарии на странице. Благодаря этому коду комментарий выглядит следующим образом:

<li id="12345">
<cite><span id="editAuthor12345" class="editAuthor post"><a href='http://somelink' rel='external'>Имя автора</a></span></cite> пишет:

Вам нужно заменить строчки

<li <?php echo $oddcomment; ?>id="comment-<?php comment_ID() ?>">

на

<li class="<?php if ($comment->comment_author_email == "author@domain.com") echo 'author'; else echo $oddcomment; ?> item" id="comment-<?php comment_ID() ?>">

Здесь author@domain.com – это ваш почтовый адрес. Вы наверняка помните, что любой человек, написавший комментарий, должен ввести адрес электронной почты. Можно сделать так, чтобы Wordpress проверял каждый комментарий и изменял код в зависимости от того, какой именно адрес введен. И если вы введете собственный e-mail, допустим, author@domain.com, то к комментарию будет добавлен другой css-класс. В данном случае, если адрес электронной почты – author@domain.com, то у тэга <li> добавится class="author". Иначе комментарий будет показан без всяких изменений, как обычно. Вам остается изменить css-файл, вставив туда что-нибудь наподобие

.author {background-color : #E1EFDE;}

Комментарий с классом «author» отобразится светло-зеленым. Дерзайте!

Кроме того, для комментариев часто используется класс .alt, и тогда они идут не сплошным списком, а чередуются по стилю в шахматном порядке. Например, белый-серый-белый-серый. Если вы используете шаблон default (по умолчанию), то в результате вышеуказанных действий появляются какие-то странные кавычки, и у вас может пропасть .alt, т.е. этот альтернативный класс. Помогает изменение строчек comments.php

<?php
/* Changes every other comment to a different class */
$oddcomment = ( empty( $oddcomment ) ) ? 'class="alt" ' : '';
?>

на

<?php if ('alt' == $oddcomment) $oddcomment = '';
else $oddcomment = 'alt'; ?>

Хочу также добавить, что есть разные плагины, например, Highlight Author Comments, но я ни один не пробовала, поэтому не могу посоветовать что-то конкретное.

Обведем наш будущий листочек по контуру. На панели управления Edit – > Stroke, устанавливаете цвет границы по вкусу (предпочительно, серый). Я, в данном случае, использую цвет #acacac.

Увеличьте масшатб изображения. Выделите уголок листочка с помощью Rectangular Marquee Tool, как показано на рисунке:

Щелчок правой кнопкой, найдите функцию Free transform (свободная трансформация).

Цепляйтесь мышкой за верхний правый уголок выделения и тяните его в противоположном направлении, зажав Shift. Тяните до тех пор, пока уголок не станет приемлимого размера. Он должен как бы отобразиться зеркально.

Перетащите уголок на предназначенное для него место — в угол. :)

Далее выбираем инструмент «Линия» (Line Tool).

И рисуем прямую линию (зажмите Shift), как бы перечеркивая на уголок.

Ну вот, уже получается что-то отдаленно напоминающее лист бумаги. :) Осталось создать тени, чтобы наш листик выглядел более натурально. Для этого копируйте вашу косую линию, сделанную с помощью Line Tool (выделите слой с линией, затем на панели управления Layer -> Dublicate Layer…) и аккуратно перемещайте новый слой вниз и чуть влево.

Совместите края линий, как если бы вы накладывали друг на друга лесенку, и уменьшите прозрачность (Opacity) нижней линии до 60%.

Повторите операцию два раза, каждый раз уменьшая прозрачность на 20%. Вот что должно получиться (я увеличила изображение, чтобы вы видели, как тень постепенно сходит на нет). Похожего результата можно было бы добиться, используя градиенты, но вручную получается аккуратнее.

В принципе, значок уже выглядит неплохо. Скройте фоновый слой (Background Layer), нажав на изображение глазка. Объедините видимые слои: панель управления -> Layer -> Merge Visible. Вместо белого цвета должен остаться прозрачный фон.

Выделите внутреннюю поверхность листа любым удобным инструментом (например, «волшебной палочкой», Magic Wand)

Выбираете на панели управления Layer -> New Fill Layer -> Gradient…. Создаете градиент от серого к прозрачному со следующими настройками:

Вот и всё. Если градиент получился слишком темным, просто уменьшите его прозрачность (Opacity), как показано на рисунке:

Конечный результат:

Удалите белый фоновый слой и сохраните значок с прозрачным фоном: File -> Save for Web, выберите формат изображения GIF и поставьте галочку около значения Transparency («Прозрачность»).

Часто спрашивают, как изменить дизайн сайта так, чтобы он работал под 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