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

На самом деле достаточно сделать всего пару изменений в одном из файлов шаблона. Откроем comments.php и найдём примерно следующее (примерно, потому что в разных темах по-разному, мой вариант взят из темы Classic):

<br />
<input type="text" name="author" id="author" value="<?php echo esc_attr($comment_author); ?>" size="22" tabindex="1" /><br />
<label for="author"><small><?php _e('Name'); ?> <?php if ($req) _e('(required)'); ?></small></label></p>
<p>

Удалим отсюда теги label и всё, что между ними, уберём оба тега p, значение value заменим на Анонимный комментарий, а значение type — на hidden.

В результате получим следующий код:

<br />
<input type="hidden" name="author" id="author" value="Анонимный комментарий" size="22" tabindex="1" />

Сделаем похожие изменения в поле для ввода E-mail, заменим

<br />
<input type="text" name="email" id="email" value="<?php echo esc_attr($comment_author_email); ?>" size="22" tabindex="2" /><br />
<label for="email"><small><?php _e('Mail (will not be published)');?> <?php if ($req) _e('(required)'); ?></small></label></p>
<p>

на этот код:

<br />
<input type="hidden" name="email" id="email" value="noreplay@site.com" size="22" tabindex="2" />

Поле для ввода адреса сайта можем смело удалить, вот каким оно было:

<br />
<input type="text" name="url" id="url" value="<?php echo esc_attr($comment_author_url); ?>" size="22" tabindex="3" /><br />
<label for="url"><small><?php _e('Website'); ?></small></label></p>
<p>

Проверяем результат.

Вот такое нехитрое решение оригинальной проблемы.

Для того, чтобы задизайнить в стиле сайта страницы регистрации, авторизации, настройки профиля и напоминания пароля, я использовал плагин Theme my Login, о котором писал в уроке «Подключение темы Wordpress к страницам профиля, регистрации и авторизации» (с тех пор настройки плагина немножко поменялись, имейте в виду).

Желаю вам всего самого оригинального.
Артём Савельев

P.S. Скоро подходит к концу мой марафон. Будем отчитываться =)

Для того, чтобы повторить всё это дело, вам понадобится Photoshop CS5.

Итак, откроем Photoshop и в нём создадим документ размером 1900×1200 пикселей, с разрешением 72 пикс./дюйм и цветовым режимом RGB.

Теперь нужно создать слой-заливку Градиент, для этого пройдём в Меню → Слои → Новый слой-заливка → Градиент.

У нас должно получиться следующее.

Напишите ваш текст так, чтобы каждая буква находилась в отдельном текстовом слое, как показано на картинке.

Теперь мы применим к нашим буквам эффект 3D, выберите первую букву и пройдите в Меню → 3D → Чеканка → Текстовый слой.

В нашем примере мы всего лишь добавим немного объёмности нашему тексту и наложим одну из имеющихся текстур (первую в списке).

Не нажимая OK, схватите курсором подопытную букву и поверните её так, как вам захочется.

Можно также использовать для этого навигатор в левом верхнем углу документа.

Нажмём OK и проделаем то же самое с оставшимися буквами.

Теперь объедините текстовые слои (Ctrl+E) и к новоиспечённому слою примените следующие параметры наложения (правой кнопкой на слое, в списке выбрать соответствующий пункт).

Вот что у нас получилось.

Теперь скачаем этот архив с кистями и текстурами и, выделив слой с текстом, перейдём в Меню → Слои → Слой-маска → Показать все.

Выберем созданный слой-маску и инструмент «Кисть» (B), установим чёрный цвет и загрузим кисти из скачанного архива.

Теперь можно поиздеваться над нашим текстом.

Создадим новый слой (Ctrl+Shift+N) и заполним его чёрным, используя инструмент «Заливка» (G), затем пройдём в Меню → Фильтр → Рендеринг → Блик и сделаем всё так, как показано на картинке.

Немножко подкорректируем слой, перейдя в Меню → Изображение → Коррекция → Цветовой фон/насыщенность (Ctrl+U).

Изменим режим наложения слоя на «Жёсткий свет»

и получим следующий результат.

Теперь создадим новый слой и нарисуем облака, используя инструмент «Кисть» (B) и облачные кисти, которые мы скачали с архивом. Цвет сделайте белым.

Добавьте новый слой-заливку (Меню → Слои → Новый слой-заливка → Градиент) с режимом наложения «Мягкий свет».

Результат будет примерно следующим (примерно, потому что я выбрал стиль заливки «Линейный», так не делайте).

Добавим новый корректирующий слой «Карта градиента», перейдя в Меню → Слои → Новый корректирующий слой → Карта градиента.

Изменим режим наложения слоя на «Мягкий свет»

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

Теперь импортируйте в ваш документ текстуру Grunge_texture_by_darkrose42_stock.jpg

и измените режим наложения слоя на «Мягкий свет».

Полюбуемся промежуточным результатом

и, создав новый слой, пройдём в Меню → Фильтр → Рендеринг → Облака.

Изменим режим наложения на «Мягкий свет» и установим прозрачность 69%.

Теперь, наконец-то, можем позволить себе насладиться итоговым результатом.

Поблагодарим автора урока «La 3D avec Photoshop Cs5».

Желаю вам всего самого доброго.
Артём Савельев

P.S. Недавно меня пригласили принять участие в одной потенциально симпатичой рассылке «Блоггинг для чайников: сам себе продвиженец». Возможно, в каких-нибудь выпусках вы увидите и мои комментарии. Желаю рассылке светлого будущего.

Пока я выпиливаю свои шаблоны, хотелось бы поделиться с вами какой-нибудь полезностью. Например, в ходе марафона я выучился создавать на Wordpress разнообразные каталоги, в том числе и каталог организаций, без использования плагинов.

Для этого я использую третью ветку Wordpress, функции таксономии и дополнительные типы записей. Весь процесс я буду показывать на тестовом сайте, предназначенном для тестирования возможностей Wordpress 3.

Чтобы осуществить задуманное, нам понадобиться открыть файл functions.php используемой темы и вставить перед последним закрывающим тегом ?> всё, что мы сейчас напридумываем.

Типы записей и дополнительные рубрики

Положим начало функции, которая будет содержать новый тип записей и его собственные рубрики:

function post_type_myfirms() {

При желании, замените myfirms на что-нибудь своё.

В эту функцию добавим новый тип записей:

<br />
register_post_type('firms',<br />
array(<br />
'label' => __('Организации'),<br />
'public' => true,<br />
'show_ui' => true,<br />
'publicly_queryable' => true,<br />
'supports' => array(<br />
'title',<br />
'editor',<br />
'post-thumbnails',<br />
'excerpts',<br />
'custom-fields',<br />
'revisions'<br />
)<br />
)<br />
);

Мы указали лишь некоторые параметры, объясню их вместе с теми, которые мы не здесь затронули.

• label – описание типа записей, можно указывать на своём языке;
• public – отображать ли этот тип записи в админке, по умолчанию указано значение false;
• exclude_from_search – исключать ли посты этого типа из поиска, по умолчанию false, если параметр public имеет значение true;
• publicly_queryable – позволять ли отображать посты этого типа на главной странице;
• show_ui – отображать ли стандартный интерфейс для редактирования записей этого типа, по умолчанию true, если параметр public имеет значение true;
• inherit_type – тип записи для наследования возможностей и ссылки на редактирование;
• capability_type – тип записи, по примеру которого следует подключить возможности чтения, редактирования и удаления записей, по умолчанию это «post»;
• edit_cap – управляет редактированием записей данного типа, по умолчанию «edit_$capability_type» (edit_post);
• edit_type_cap – управляет редактированием записей данного типа как класса, по умолчанию «edit_ . $capability_type . s» (edit_posts);
• edit_others_cap – управляет редактированием записей данного типа, созданных другими пользователями, по умолчанию «edit_others_ . $capability_type . s» (edit_others_posts);
• edit_others_cap – управляет публикацией записей данного типа, по умолчанию «publish_ . $capability_type . s» (publish_posts);
• read_cap – управляет чтением записей данного типа, по умолчанию «read_$capability_type» (read_post);
• delete_cap – управляет удалением записей данного типа, по умолчанию «delete_$capability_type» (delete_post);
• hierarchical – включает возможность иерархии постов, по умолчанию установлено значение false;
• supports – подключение элементов записи к странице редактирования, возможны следующие варианты:
• title — заголовок записи;
• editor (content) — содержание;
• author — автор записи;
• thumbnail — миниатюра;
• excerpts — краткий анонс;
• trackbacks — уведомления об обратных ссылках;
• custom-fields — дополнительные поля;
• comments — комментарии;
• revisions — ревизии;
• register_meta_box_cb – функция, вызываемая при установке полей записи. Используйте remove_meta_box () и add_meta_box () внутри этой функции;
• taxonomies – список дополнительных рубрик, зарегистрированных для данного типа записей, по умолчанию не используется, можно добавить поддержку отдельно с помощью функции register_taxonomy () или register_taxonomy_for_object_type ().

Более подробно обо всё об этом здесь (по-английски).

Теперь подключим таксономию (дополнительные рубрики и метки). Для этого после того кода, который мы уже вставили, зарегистрируем категории:

register_taxonomy( 'firmcat', 'firms', array( 'hierarchical' => true, 'label' => __('Категории') ) );

и после зарегистрируем города (в формате меток):

register_taxonomy( 'city', 'firms',<br />
array(<br />
'hierarchical' => false,<br />
'label' => __('Города'),<br />
'query_var' => 'city',<br />
'rewrite' => array('slug' => 'city' )<br />
)<br />
);

Подробнее читайте по-английски здесь.

Закроем функцию:

}

и активируем всё, что мы насочиняли:

add_action('init', 'post_type_myfirms');

Если ранее вы заменили myfirms на что-нибудь другое, сделайте это и здесь.

Шаблоны для каталога

Чтобы отделить наши записи от остальных материалов блога, нам понадобиться создать для них собственные шаблоны. Начнём со страницы, содержащей список рубрик, для этого откроем файл page.php и после:

<?php the_content(); ?>

добавим:

<?php if (is_page('firms')) { ?></p>
<p><strong>Рубрики</strong></p>
<p><?php wp_tag_cloud( array( 'taxonomy'=>'firmcat' , 'number'=>'0' ) ); ?></p>
<p><strong>Города</strong></p>
<p><?php wp_tag_cloud( array( 'taxonomy'=>'city' , 'number'=>'0' ) ); ?></p>
<p><?php }; ?>

Тем самым мы отобразим списки рубрик и городов в формате облака меток. Подробнее читайте в описании функции wp_tag_cloud.

Теперь создадим новую страницу с постоянной ссылкой «firms».

Добавим пару тестовых организаций, для этого перейдём в Организации → Добавить новую. Там же создадим пару категорий и добавим города.

Смотрим, что у нас получилось:

Теперь создадим шаблон для категорий и городов. Начнём с последнего, для этого откроем любой предусмотренный в теме файл категории или просто index.php и сохраним его как taxonomy-city.php.

В созданном файле добавим отображение рубрики, в котором располагается организация, перед:

<?php the_content() ?>

вставим:

<?php echo get_the_term_list( $post->ID, 'firmcat', '
<p>Рубрика: ', ', ', '</p>
<p>' ); ?>

а чтобы добавить заголовок страницы с названием города, после:

<?php if (have_posts()) : ?>

вставим:

<br />
<h2>Организации в городе "<?php $term = get_term_by( 'slug', get_query_var( 'term' ), get_query_var( 'taxonomy' ) ); echo $term->name; ?>"</h2>
<p>

Теперь сохраним этот файл как taxonomy-firmcat.php и заменим код для отображения рубрики на отображение города:

<?php echo get_the_term_list( $post->ID, 'city', '
<p>Город: ', ', ', '</p>
<p>' ); ?>

а код заголовка заменим, например, на следующий:

<br />
<h2><?php $term = get_term_by( 'slug', get_query_var( 'term' ), get_query_var( 'taxonomy' ) ); echo $term->name; ?></h2>
<p>

Создадим также шаблон для одиночной записи. Для этого сохраним файл single.php как single-firms.php и добавим в нём перед:

<?php the_content(); ?>

как рубрику:

<?php echo get_the_term_list( $post->ID, 'firmcat', '
<p>Рубрика: ', ', ', '</p>
<p>' ); ?>

так и город:

<?php echo get_the_term_list( $post->ID, 'city', '
<p>Город: ', ', ', '</p>
<p>' ); ?>

Проверяем результат:

Виджет

В принципе, каталог у нас готов, но я бы ещё добавил один симпатичный виджет со списком всех категорий и городов. Снова откроем файл functions.php и перед последним закрывающим тегом ?> добавим:

function firmcats() {<br />
?></p>
<li>
<h3>Организации</h3>
<p><strong>Рубрики:</strong></p>
<ul>
<?php wp_tag_cloud( array( 'taxonomy'=>'firmcat' , 'smallest' => 12,<br />
'largest' => 12,<br />
'unit' => 'px', 'format'=>'list' ) ); ?>
</ul>
<p><strong>Города:</strong></p>
<ul>
<?php wp_tag_cloud( array( 'taxonomy'=>'city' , 'smallest' => 12,<br />
'largest' => 12,<br />
'unit' => 'px', 'format'=>'list' ) ); ?>
</ul>
</li>
<p><?php };<br />
function register_firm_widget() {<br />
register_sidebar_widget('Организации', 'firmcats');<br />
}<br />
add_action('init', 'register_firm_widget');<br />

Получаем вот такую симпатяшку:

На этом всё. Наш каталог вы можете пощупать на тестовом сайте.

Как вы могли догадаться, Wordpress настолько чудесен, что мой сегодняшний урок лишь самая малая часть того, как можно извратиться при создании каталога организаций.

Можно самыми разными способами, в самых разных количествах и качествах отображать информацию, добавленную с помощью дополнительных типов записей и сортировать её с помощью дополнительных рубрик.

Желаю вам всего самого доброго и возвращаюсь к разработке 40 тем для Wordpress в рамках марафона «60000 руб./месяц за 100 дней».

Артём Савельев.

P.S. Компания Universe of Web предлагает услуги по увеличению продаж с через Интернет, в том числе поисковую раскрутку сайтов и контекстную рекламу.

На днях случилось мне создать сайт на Wordpress, в основе которого фотогалерея с разными симпатяшками. Хотел было взяться за привычные потуги с плагином Magic Fields, примерно как в моём «предыдущем уроке», но мой коллега вовремя меня одёрнул, указав на то, что Wordpress теперь вполне самостоятельный в плане колдовства с фотографиями.

Стал он таким примерно с версии 2.9.2 (на более ранних не смотрел), но здесь ещё присутствует небольшая неприятность: до создания миниатюры записи необходимо либо сохранить запись, либо после загрузки изображения закрыть окно управления галереей, снова открыть его и только тогда выбрать миниатюру.

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

Для сегодняшнего урока я создал тестовый сайт с наипоследнейшей версией Wordpress, где мы будем упражняться с кодом, и где вы сможете оценить результат наших стараний. Новый шаблон по умолчанию до некоторой степени заумный, и я ещё не успел разобраться с его устройством, поэтому операцию буду проводить на привычном шаблоне Default (отчего и у вас не должно возникнуть трудностей, потому что большинство шаблонов используют похожую структуру).

В последнее время получаю всё больше отзывов, в которых читатели просят делать мои уроки более подробными, чтобы даже «самые юные» пользователи Wordpress сумели со всем этим разобраться. По всему по этому буду стараться этим просьбам удовлетворять, и если что-то покажется вам до смеха элементарным — не серчайте, просто улыбнитесь.

Для начала создадим отдельную рубрику для наших фотографий, для чего пройдём в Записи → Рубрики.

Не пугайтесь забавных фраз на англо-русском, это потому что версия Wordpress третья, а языковые файлы от второй.

Также нам нужно настроить размеры миниатюр, которые Wordpress будет любезно создавать для нас из загруженных в него изображений. Откроем страницу Параметры → Медиафайлы и установим нужные нам значения для маленькой, средней и крупной миниатюр. Я поставил 100, 400 и 900 пикселей по ширине и высоте.

Теперь мы можем загружать наши фотографии. Пройдём в Записи → Добавить новую, укажем заголовок, набросаем немного описательного текста для наших картинок, отметим нужную рубрику и приступим к загрузке фотографий.

Можно поступить по-разному: показывать в каждой записи по одной миниатюре или помимо миниатюры отображать ещё и остальные картинки из галереи. Я рассмотрю оба примера, а вы уже сами прицельтесь и сделайте так, как вам будет нужнее.

Для загрузки фотографий, воспользуемся самой первой кнопкой из четырёх находящихся справа от текста «Загрузить/вставить». Если навести на неё курсор, должна появиться надпись «Добавить изображение» (или подобная, зависит от используемого перевода). После нажатия откроется симпатичное окошко, в котором мы и будем наслаждаться загрузкой изображений.

Чтобы добавить заголовки изображений, необходимо справа от изображения кликнуть на слове «Показать», откроется редактор изображения. В нём, справа от кнопки «Вставить в запись», которую в данном случае нажимать не нужно, находится ссылка «Использовать как миниатюру», которую мы и используем, чтобы создать миниатюру для записи.

Публикуем запись и открываем файл functions.php, который находится в папке используемого шаблона, и в который мы добавим пару нужностей. Если вы, как и я, хотите изменять файлы темы непосредственно через админку Wordpress, перейдите на страницу Внешний вид → Редактор (Editor) и из списка справа выберите необходимый файл.

Приступим к изменениям. Во-первых, если в вашей теме нет фразы «add_theme_support» (это можно выяснить поиском по странице: Ctrl+F), это означает что тема не поддерживает миниатюры, что необходимо исправить добавлением следующего кода:

if ( function_exists( 'add_theme_support' ) )<br />
add_theme_support( 'post-thumbnails' );

в подходящее место, например перед последним закрывающим тегом:

?>

Во-вторых, для более удобного управления записями с фотографиями, добавим сразу после нашего кода ещё чуть-чуть писанины:

if ( !function_exists('fb_AddThumbColumn') && function_exists('add_theme_support') ) {<br />
// for post and page<br />
add_theme_support('post-thumbnails', array( 'post', 'page' ) );<br />
function fb_AddThumbColumn($cols) {<br />
$cols['thumbnail'] = __('Thumbnail');<br />
return $cols;<br />
}<br />
function fb_AddThumbValue($column_name, $post_id) {<br />
$width = (int) 35;<br />
$height = (int) 35;<br />
if ( 'thumbnail' == $column_name ) {<br />
// thumbnail of WP 2.9<br />
$thumbnail_id = get_post_meta( $post_id, '_thumbnail_id', true );<br />
// image from gallery<br />
$attachments = get_children( array('post_parent' => $post_id, 'post_type' => 'attachment', 'post_mime_type' => 'image') );<br />
if ($thumbnail_id)<br />
$thumb = wp_get_attachment_image( $thumbnail_id, array($width, $height), true );<br />
elseif ($attachments) {<br />
foreach ( $attachments as $attachment_id => $attachment ) {<br />
$thumb = wp_get_attachment_image( $attachment_id, array($width, $height), true );<br />
}<br />
}<br />
if ( isset($thumb) && $thumb ) {<br />
echo $thumb;<br />
} else {<br />
echo __('None');<br />
}<br />
}<br />
}<br />
// for posts<br />
add_filter( 'manage_posts_columns', 'fb_AddThumbColumn' );<br />
add_action( 'manage_posts_custom_column', 'fb_AddThumbValue', 10, 2 );<br />
// for pages<br />
add_filter( 'manage_pages_columns', 'fb_AddThumbColumn' );<br />
add_action( 'manage_pages_custom_column', 'fb_AddThumbValue', 10, 2 );<br />
}

Это снабдит список записей миниатюрой.

На этом махинации с файлом functions.php заканчиваются, и нам остаётся отобразить наши изображения в шаблоне. Начнём с категории фотографий, откроем для редактирования файл archive.php (или index.php, если его нет) и после фразы:

the_post();

добавим:

if (is_category('photos') && !is_single()) { ?>ЗДЕСЬ БУДЕТ КАРТИНКА<?php } else {

и чтобы закрыть условие, перед:

endwhile;

вставим:

}

Вместо «photos», вставьте в код ID вашей категории с фотографиями или её slug (альтернативное имя латинскими буквами для адреса страницы). Теперь нам нужно заменить фразу ЗДЕСЬ БУДЕТ КАРТИНКА на код, который будет эту картинку показывать:

<a href="<?php the_permalink() ?>"><br />
<?php the_post_thumbnail('thumbnail'); ?></a>

Если хотите, можно несколько усложнить себе жизнь и настроить появление среднего изображения при наведении курсора на миниатюру. Для этого, вместо предложенного выше кода необходимо вставить следующий:

<a href="<?php the_permalink() ?>"<br />
class="tooltip" style="z-index:<?php the_ID(); ?>;"><br />
<?php the_post_thumbnail('thumbnail'); ?><br />
<span><?php the_post_thumbnail(array(300, 300),<br />
array('class' => 'imagetooltip')); ?></span></a>

и чтобы всё было чистенько и красиво, в самом конце файла style.css добавим необходимые стили:

.tooltip img {<br />
border:4px solid #dddddd;<br />
z-index:1000;<br />
}<br />
.tooltip {<br />
position:relative;<br />
margin-right:15px;<br />
display:block;<br />
float:left;<br />
margin-bottom:15px;<br />
}<br />
.tooltip span {<br />
position: absolute;<br />
right: 0;<br />
top: 95px;<br />
display: none;<br />
left:95px;<br />
min-width: 50px;<br />
padding: 0;<br />
white-space: nowrap;<br />
font-size: 11px;<br />
text-align: right;<br />
background:none;<br />
color: #fff;<br />
z-index:9000;<br />
}<br />
.tooltip span img {border:0;<br />
}<br />
.tooltip span small {<br />
display:none;<br />
}<br />
.tooltip:hover span { display: block; }

В итоге получаем вот такую красотень. Ссылка с картинки ведёт на демо.

Займёмся теперь одиночной записью, шаблон которой скрывается в файле single.php. Откроем этот файл и после:

the_post();

добавим:

if (in_category('photos')) { ?>ЗДЕСЬ БУДЕТ КАРТИНКА<?php } else {

и закроем условие, добавив:

}

перед:

comments_template();

или, если вы не используете в своём шаблоне комментарии, перед:

endwhile;

Не забываем заменить «photos» на slug или ID своей категории. Чтобы наши изображения красиво увеличивались при нажатии, установим плагин Shutter Reloaded, и перейдя на страницу Внешний вид → Shutter Reloaded, активируем второй вариант преобразования ссылок (если это не сделано по умолчанию).

Затем приступим к замене фразы ЗДЕСЬ БУДЕТ КАРТИНКА на что-нибудь более существенное. Ранее я обещал показать два разных варианта отображения картинок в одиночной записи. На тестовом сайте вы можете посмотреть оба варианта на одной странице — используйте подходящий.

Чтобы отобразить среднее изображение, заменим нашу фразу на следующий код:

<a rel="lightbox[]" href="<?php $thumbnail = wp_get_attachment_image_src(get_post_thumbnail_id(), 'large');<br />
echo $thumbnail[0]; ?>" ><?php the_post_thumbnail('medium'); ?></a>

а если нам нужны все изображения записи, то получить их можно следующим образом (нужно убрать из кода пробел перед gallery):

<?php echo do_shortcode('[ gallery columns="6" size="thumbnail" itemtag="ul" icontag="li" captiontag="p" link="file"]'); ?>

Объясню некоторые параметры:

• columns — количество изображений в строке;
• size — размер изображения, у нас указана миниатюра, можно выбрать среднее (medium) или большое (large) изображение;
• link — куда ведёт ссылка с изображения, в нашем случае откроется оригинальный файл.

Подробнее о разных параметрах здесь (осторожно, английский).

Теперь добавим немножко красок в файл style.css, чтобы всё у нас выглядело ровно и красиво. В конце файла вставим:

.gallery .gallery-item {<br />
width:110px !important;<br />
margin:0;<br />
padding:0;<br />
margin-right:15px !important;<br />
margin-bottom:15px !important;<br />
list-style:none;<br />
}<br />
.gallery .gallery-item li {<br />
margin:0 !important;<br />
padding:0 !important;<br />
list-style:none;<br />
}<br />
.gallery .gallery-item li a {<br />
border:4px solid #dddddd;<br />
display:block !important;<br />
}<br />
.gallery .gallery-item li a img {<br />
border:0 !important;<br />
}

Смотрим, что у нас получилось, и потихоньку начинаем радоваться.

В принципе, фундамент заложен, галерея уже работает и может вполне пригодиться даже в таком виде, но я хотел бы ещё рассказать вам, как добавить пару полезных виджетов, которые будут отображать случайные и последние фотографии. Вновь откроем файл functions.php и перед закрывающим тегом:

?>

добавим виджет случайного показа изображений:

function randomimages() { $randomimg = new WP_Query('cat=3&showposts=2&orderby=rand');<br />
if($randomimg->have_posts()) : ?><br />
<h3>Случайные изображения</h3>
<p><?php<br />
while($randomimg->have_posts()) : $randomimg->the_post(); ?><br />
<a href="<?php the_permalink() ?>"><?php the_post_thumbnail(array(60, 60), array('class' => 'imagetooltip')); ?></a><br />
<?php endwhile; endif; };

ниже добавим виджет для показа последних добавленных изображений:

function lastimages() { $lastimg = new WP_Query('cat=3&showposts=2&orderby=date&order=DESC');<br />
if($lastimg->have_posts()) : ?><br />
<h3>Новые изображения</h3>
<p><?php<br />
while($lastimg->have_posts()) : $lastimg->the_post(); ?><br />
<a href="<?php the_permalink() ?>"><?php the_post_thumbnail(array(60, 60), array('class' => 'imagetooltip')); ?></a><br />
<?php endwhile; endif; };

и закончим всё это дело регистрацией виджетов:

function register_my_widget() {<br />
register_sidebar_widget('Случайные изображения', 'randomimages');<br />
register_sidebar_widget('Новые изображения', 'lastimages');<br />
}<br />
add_action('init', 'register_my_widget');;

Изменения шаблона закончены. Теперь нам останется перейти на страницу Внешний вид → Виджеты и активировать наши новенькие виджеты, перебросив их в один из сайдбаров. Вот что у нас получилось.

На этом урок окончен. Посмотреть результат в действии можно на тестовом сайте. Помните, что всё это только примеры, которые вы можете использовать как вам угодно, изменяя их под себя — главное не бояться, читать документацию, и не забывать, что Гугл знает ответы на большую часть ваших вопросов, связанных с Wordpress.

Если будет нужна помощь — оставляйте комментарии, постараемся решить вопрос качественно и оперативно.

Желаю вам всего самого интересного. До новых встреч.
Артём Савельев.

P.S. Юридической фирмой «Центр правового обслуживания» предлагается защита от рейдерского захвата — многолетний профессиональный опыт в этой области.

Продолжаю серию уроков по использованию замечательного плагина Magic Fields. Сегодня мы подробно рассмотрим создание полноценной фотогалереи или портфолио художника (что-то похожее в своё время я реализовал на сайте Виктора Лукьянова).

В установке Wordpress нет ничего сложного (тем не менее когда-нибудь чего-нибудь хотелось бы об этом написать, для самых маленьких), о том, как установить и настроить плагин Magic Fields я писал во вступительной статье этой серии.

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

Для начала нам понадобится зайти в панель администратора и создать новую категорию под рабочим названием «Фотографии». Затем, чтобы создать панель записей пройдём в Magic Fields → Write Panels (Панели записей) и там нажмём на Create a Write Panel (Создать панель записей).

Теперь создадим группу дополнительных полей под названием «Фотография». Для этого перейдём на страницу Magic Fields → Write Panels (Панели записей) и там кликнем на Edit Fields/Groups (Изменить поля/группы) напротив только что созданной панели «Фото». Там нажимаем на Create a Group и создаём группу.

Теперь мы вполне можем позволить себе создать дополнительные поля. Добавим поле «Изображение»: для этого сбегаем в Magic Fields → Write Panels (Панели записей), напротив панели «Фото» выберем Edit Fields/Groups (Изменить поля/группы) и далее create field (создать поле) справа от группы «Фотография». В качестве типа поля (Type) выберем Image.

После нажатия на кнопку Continue нам будет предложено настроить максимальные параметры для изображения, поставим Width (Ширину) 400 пикселей и завершим создание дополнительного поля для изображения кнопкой Finish (Закончить).

Добавим поле «Описание», чтоб иметь возможность подписывать наши изображения. Проделаем всё то же, что и с предыдущим полем, но в качестве типа (Type) выберем Multiline Textbox.

Нажав на Continue, настроим предложенные опции следующим образом.

Чтобы иметь возможность сортировать изображения по годам, добавим соответствующее поле, в качестве типа (Type) используем Textbox, а в поле Name укажем «imyear».

Чтобы было чем развлекать себя дальше, добавим пару пробных изображений. Пройдём в панель «Фото» и выберем New (Новая запись).

Теперь у нас есть всё для того, чтобы произвести изменения в шаблоне. Я по-прежнему в качестве примера использую шаблон по умолчанию (Default), если у вас возникнут трудности с интеграцией моего кода в свой шаблон, свяжитесь со мной по почте или через комментарии, постараюсь помочь.

Начнём с одиночной записи. Откроем файл single.php и после:

<?php the_content('
<p class="serif">' . __('Read the rest of this entry »', 'kubrick') . '</p>
<p>'); ?>

добавим изображение:

<?php $image = get('image'); if($image != '') { ?><br />
<? echo get_image('image'); ?><br />
<?php } ?>

и снабдим его описанием:

<?php $description = get('description'); if($description!= '') { ?></p>
<p><?php echo get('description'); ?></p>
<p><?php } ?>

подчеркнём всё это дело годом:

<?php $imyear = get('imyear'); if($imyear!= '') { ?></p>
<p><?php echo get('imyear'); ?> год</p>
<p><?php } ?>

и порадуемся тому, что у нас всё работает и не глючит.

Теперь подправим шаблон категории, чтобы красиво разместить в нём изображения из рубрики «Фотографии». Откроем файл archive.php (и/или index.php) и после:

<?php while (have_posts()) : the_post(); ?>

добавим:

<?php if (is_category(42) || in_category(42) && !is_home() && !is_single()) { ?><br />
ЗДЕСЬ БУДЕТ ИЗОБРАЖЕНИЕ<br />
<?php } else { ?>

42 — это ID категории с фотографиями, можно узнать его, если навести курсор на нужную рубрику в админке и посмотреть на адрес ссылки.

Чтобы закончить код, необходимо перед:

<?php endwhile; ?>

добавить:

<?php }; ?>

Теперь нам необходимо заменить фразу ЗДЕСЬ БУДЕТ ИЗОБРАЖЕНИЕ на маленькое превью. Добавим на место этой фразы код, который позволит пропорционально уменьшать ширину и высоту изображений.

<?php<br />
//Новая ширина = Данная высота * (Изначальная ширина / Изначальная высота)<br />
//Новая высота = Данная ширина * (Изначальная высота / Изначальная ширина)<br />
$img = @getimagesize(''.get('gallery_image').'');<br />
$w = $img[0];<br />
$h = $img[1];<br />
$defaultImageWidth = 150; //замените на желаемую ширину<br />
$defaultImageHeight = 150; //замените на желаемую высоту<br />
$imageWidth = $w; // используйте getimagesize() для получения ширины изображения<br />
$imageHeight = $h; // используйте getimagesize() для получения высоты изображения<br />
if($imageWidth > $imageHeight)<br />
{<br />
// альбомное изображение<br />
$newWidth = $defaultImageWidth;<br />
$newHeight = (int)($defaultImageWidth * $imageHeight / $imageWidth);<br />
if($newHeight > $defaultImageHeight)<br />
{<br />
$newHeight = $defaultImageHeight;<br />
$newWidth = (int)($defaultImageHeight * $imageWidth / $imageHeight);<br />
}<br />
}<br />
elseif ($imageHeight > $imageWidth)<br />
{<br />
// портрет<br />
$newHeight = $defaultImageHeight;<br />
$newWidth = (int)($defaultImageHeight * $imageWidth / $imageHeight);<br />
if($newWidth > $defaultImageWidth)<br />
{<br />
$newWidth = $defaultImageWidth;<br />
$newHeight = (int)($defaultImageWidth * $imageHeight / $imageWidth);<br />
}<br />
}<br />
else<br />
{<br />
// квадратное изображение<br />
$newWidth = $defaultImageWidth;<br />
$newHeight = $defaultImageHeight;<br />
} ?>

Чтобы показать изображение, после этого кода нужно добавить следующий:

<a href="<?php the_permalink() ?>"<br />
class="image_photogallery"><br />
<img src="<?php echo pt(); ?>?src=<? echo get('image'); ?>&w=<?php echo $newWidth ?>&h=<?php echo $newHeight ?>"<br />
alt="<?php the_title(); ?>"<br />
title="<?php the_title(); ?>" /><br />
</a>

Я использовал класс .image_photogallery, стиль которого мы немедленно настроим в файле style.css, в конце которого добавим, например, такой код:

a.image_photogallery {<br />
display:block;<br />
float:left;<br />
width:180px;<br />
height:180px;<br />
text-align:center;<br />
background-color:#CCCCCC;<br />
margin-right:15px;<br />
margin-bottom:15px;<br />
}<br />
a.image_photogallery img {<br />
margin-top:15px;<br />
margin-bottom:15px;<br />
border:1px solid #FFFFFF;<br />
}

И вот какая красотень у нас получилась. Конечно же, можно настроить стили как вам больше нравится, я только показал, что это возможно.

Теперь не лишним будет добавить фильтр по годам. Для этого в файле archive.php (и/или index.php) перед:

<?php while (have_posts()) : the_post(); ?>

вставьте:

<?php if (is_category(42) || in_category(42) && !is_home() && !is_single()) { ?></p>
<form method="post" action="">
<p>Год:</p>
<select name="imyear" >
<option value=""></option>
<p><?php<br />
$listyears2 = $wpdb->get_results("SELECT DISTINCT meta_value FROM $wpdb->postmeta<br />
WHERE meta_key = 'imyear' ORDER BY meta_value");<br />
foreach ($listyears2 as $listyear2) {<br />
if ($listyear2->meta_value != '') {<br />
$option = '<br />
<option ';<br />
if ($listyear2->meta_value == $_REQUEST["imyear"]) {$option .= 'selected '; }<br />
$option .= 'value="'.$listyear2->meta_value.'">';<br />
$option .= $listyear2->meta_value;<br />
$option .= '</option>
<p>';<br />
echo $option;<br />
}} ?><br />
</select>
</p>
<input type="submit" value="Показать" class="s_submit" name="submitimyear" />
</form>
<p><?php if (isset($_REQUEST["imyear"])) { $paramyear2=$_REQUEST["imyear"]; } else { $paramyear2=""; };<br />
if ($paramyear2!= "") {<br />
query_posts($query_string . '&x_imyear='.$paramyear2);<br />
} ?><br />
<?php }; ?>

Всё работает, наслаждаемся.

Конечно, это один из самых простых примеров издевательства над Wordpress с помощью плагина Magic Fields, потенциал которого невероятен. Как только я закончу серию уроков по использованию этого плагина, я планирую составить из них книгу, более подробную и с большим количеством примеров.

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

P.S. Кстати, вчера получил на почту февральский выпуск журнала БлогоNEWS, который я прочитал почти ни на что не отвлекаясь за пару часов, от чего получил массу удовольствия, особенно когда обнаружил в рубрику «Дайджест Блогосферы» упоминание моего недавнего урока «Украшаем комментарии в Wordpress», за что благодарен всетельно и вседушно и призываю всех почитать новый выпуск журнала БлогоNEWS — очень много интересностей.

Последние несколько дней приходится тратить очень много времени на поиск и удаление тонны комментариев, ссылки с которых ведут не на блоги авторов, а на разного калибра неблоги, ГС это или нет — судить не стану, мне в любом случае подобные исходящие ссылки не нужны, тем более бесплатно — я с Яндексом хочу дружить и с Гуглом.

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

Можно решить вопрос несколькими способами, я нашёл для себя наиболее подходящий и, как мне кажется, наиболее выгодный как для блога, так и для спаммеров, которые сэкономят своё и моё время.

Я решил не отказываться от dofollow, это могло бы обидеть моих читателей, что не есть хорошо, но чтобы больше не тратить уйму времени на одобрение/удаление комментариев, я поставил небольшое ограничение: теперь ссылки в комментариях будут dofollow только если автор уже имеет 3 одобренных комментария (количество отображается в скобочках, справа от имени автора). Для этого я использовал плагин Lucia’s Linky Love.

Я не против коротких комментариев типа «хорошо сказал», «спасибо» или «не понравилось» — это нормально, необязательно указывать причину приязни или неприязни, бывает так, что не нравится пост, а указать причину не получается, вполне вероятно что просто не нравится автор и к нему предвзятое отношение — пусть, это не страшно. Но подобные комментарии, так же как и любые другие, имеют для меня ценность, только если они оставлены искренне, а не ради dofollow-ссылки.

Информация обо всём об этом добавлена в форму отправки комментария. Надеюсь, моя новая «политика» никого не расстроит, я очень готов обсуждать эти вынужденные нововведения.

А как вы боретесь с подобными явлениями на своих блогах? Может я упустил какой-то полезный манёвр или плагин? Поделитесь опытом

Желаю вам всего самого интересного.
Артём Савельев.

P.S. А вот от платной, не вполне тематической, но вполне симпатичной ссылки я бы не отказался. Как вариант, приглашаю вас смотреть фильмы онлайн, только сильно не засматривайтесь. Кстати, кто что хорошего видел в последнее время в кинотеатрах домашних и уличных (на самом деле интересно)?

Сегодня я добрался до формы комментариев своего блога и слегка над ней поиздевался: добавил поле для указания аккаунта в Twitter и автоматическое увеличение поля для ввода сообщения. Посмотрел на всё это дело и понял, что у меня вполне симпатичные комментарии, отчего захотелось показать вам, как сделать такие же.

За всю историю блога я успел сотворить с комментариями следующее.

• Разделил комментарии и трекбеки. Очень наглядно это представлено на странице конкурса на «7 лучших советов начинающим блоггерам».
• Добавил возможность указать свой аккаунт в Твиттере, ссылка на который вместе с иконкой появляется под текстом комментария.
• Убрал гадость под названием «nofollow» — это такой тег, который делает из блоггера жадину в глазах его читателей.
• Установил простенький антироботовый заборчик.
• Сделал комментарии древовидными, отчего они и смотрятся симпатично, и искать в них информацию удобно.
• Добавление происходит с помощью технологии Ajax, которая позволяет не перезагружать страницу, когда в этом нет необходимости.
• Научил поле для ввода сообщения самоувеличиваться в зависимости от широты слога комментатора.

Теперь я подробно опишу свои действия и в качестве примера буду использовать свой сайт для «Тестирования разных штук», который постепенно обрастает всякими разностями.

Отделение трекбеков от комментариев

Трекбеки — это такие ссылки, которые другие блоги пытаются автоматически опубликовать у вас на сайте, типа в замен на то, что они сослались на вас. По умолчанию они добавляются в одну кучу с комментариями, что порой очень некрасиво и неудобно. Исправляем.

В вашем шаблоне откройте файл comments.php и после

<?php foreach ($comments as $comment) : ?>

вставьте

<?php $comment_type = get_comment_type(); ?><br />
<?php if($comment_type == 'comment') { ?>

перед

<?php endforeach; ?>

добавьте

<?php } else { $trackback = true; } /* End of is_comment statement */ ?>

перед

<?php else : // If there are no comments yet ?>

вставьте

<?php if ($trackback == true) { ?></p>
<h3>Trackbacks</h3>
<ol>
<?php foreach ($comments as $comment) : ?><br />
<?php $comment_type = get_comment_type(); ?><br />
<?php if($comment_type != 'comment') { ?></p>
<li><?php comment_author_link() ?></li>
<p><?php } ?><br />
<?php endforeach; ?>
</ol>
<p><?php } ?>

Это пересказ коротенькой статьи «Separating Trackbacks from Comments», и этот метод сработает у вас только если вы используете старый шаблон комментариев, а не функцию wp_list_comments ().

В новых версиях Wordpress (например 2.9.1) в шаблоне Default используется как раз эта функция. Я решил не заморачиваться и заменил файл comments.php на аналогичный из другого стандартного шаблона Classic, где всё сделано почти так, как нам необходимо.

Чтобы всё было полностью хорошо, замените

<ol id="commentlist">

на

<ol class="commentlist">

Посмотреть результат можно, например, на этой странице.

Древовидные комментарии

Для этого мы используем замечательный плагин Wordpress Thread Comment, который заодно обеспечит нам добавление комментариев с помощью Ajax. Скачаем, установим и приступим к настройкам.

Перейдём на страницу Настройки → Древовидные комментарии. Для примера включим «Использование поддержки AJAX» и в поле «Информировать комментатора о появлении новых комментариев» выберем «Commenter choose to do so (default checked)».

Теперь проверим, разрешены ли древовидные комментарии на странице Настройки → Обсуждение, и пойдём дальше. Посмотреть результат можно на той же странице тестового сайта.

Captcha

Чтобы роботы-спамеры нас не мучали, установим какой-нибудь плагин, предназначенный для их отпугивания. Это может быть, например, Quiz или Amcaptcha от Алексея Московского.

Избавление от nofollow

Чтобы наши читатели с удовольствием комментировали наши записи, откроем их ссылки для индексации в Google. Для этого существует замечательный плагин Dofollow.

@Twitter

Чтобы нашим читателям было ещё интереснее комментировать наш блог, предоставим им возможность оставлять ссылки на свои аккаунты в системе микроблогинга Twitter. Для этого используем плагин Twitterlink Comments. Скачаем, установим и приступим к настройкам.

Перейдём на страницу Настройки → TwitterLink Settings и в поле «Add Twitter Field Automatically?» выберем «No». В поле «Twitter Link Position» я выбрал «End of Comment Text», что позволит обображать ссылку на твиттер пользователя под его комментарием.

Link Format

HTML before link — здесь я отметил «No» для «Use NoFollow?» и в текстовое поле вставил следующий код, содержащий иконку Твиттера:

<p class="twi"><img src="http://seogad.ru/twi.png" />

Иконку я взял из замечательной французской коллекции иконок.

HTML after link — здесь я закрыл тег:

</p>
<p>

Модификация шаблона

Теперь сохраним настройки (Save changes) и перейдём к редактированию шаблона. Для начала откроем файл style.css и добавим туда стили для нашей иконки со ссылкой.

p.twi {<br />
line-height:16px;<br />
}<br />
p.twi img {<br />
float:left;<br />
margin-right:5px;<br />
}

Это только пример, можете задизайнить как вам больше нравится.

В ручную добавим текстовое поле в форму отправки комментария. Для этого откроем файл comments.php и после

<label for="url"><small><?php _e('Website'); ?></small></label></p>
<p><?php endif; ?>

добавим

<br />
<input type="text" name="atf_twitter_id" id="atf_twitter_id" value="" size="22" tabindex="3" />
<label for="atf_twitter_id"><small><?php _e('Имя в Twitter (без http:// и @)'); ?></small></label></p>
<p>

Модификация поля для сообщений

С Твиттером мы разобрались, и если есть желание, можем добавить последнюю вкусность для нашей формы добавления комментария — автоматически расширяемое поле для сообщения, для создания которого понадобится скачать и активировать плагин Comment Autogrow. К сожалению, на моём тестовом блоге этот плагин пришлось отключить, так как он мешал корректной демонстрации моего урока по созданию каталога песен на Wordpress, но он активирован на этом блоге.

На этом урок окончен. Надеюсь, вам понравилось украшать комментарии на Wordpress вместе со мной.

До новых встреч. Желаю всего самого интересного.
Артём Савельев.

P.S. Не забываем, что Аббат Кальне проводит конкурс для блоггеров, в рамках которого просит рассказать участников, чем для них является блоггинг. Работы принимаются до 20 февраля.

Wordpress всем хорош, в том числе и тем, что жить и работать спокойно не даёт — постоянно чего-то в нём не хватает для полного счастья, отчего и разработчикам плагинов радость — есть чем заняться, и всем, кому эти плагины облегчают жизнь. Сегодня я расскажу о том, как сделать страницы авторизации, регистрации, редактирования профиля и напоминания в одном стиле с публичной частью сайта на Wordpress.

Есть в этом мире два замечательных плагина: Theme My Login и Theme My Profile, они-то и помогут нам в нашем деле. Скачаем, установим и приступим к настройкам и модификациям.

Рабочий пример вы можете пощупать на моём тестовом сайте.

Установка

Существуют как минимум два способа установить плагин для Wordpress.

Ручная установка

1. Скачиваем архив с нужным плагином на локальный компьютер.
2. Извлекаем архив.
3. Полученную папку с плагином с помощью FTP-клиента помещаем в каталог /wp-content/plugins, который находится в папке с вашим сайтом на виртуальном хостинге (как правило).
4. В панели администратора переходим на страницу Плагины → Установленные, находим наш плагин и нажимаем «Активировать».

Автоматическая установка

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

1. В панели управления заходим на страницу Плагины → Добавить новый.
2. Вводим в поле поиска название плагина, нажимаем «Найти плагины».
3. Из результатов поиска выбираем нужный плагин и нажимаем «Установить», откроется окно с описанием, в нём также нажимаем «Установить сейчас».
4. Возможно вам будет предложено ввести данные для FTP-доступа.
5. После того, как плагин загрузится, нажмите на «Активировать плагин».

Настройка плагинов

Я подготовил для вас переводы этих плагинов на русский язык. Скачайте и загрузите эти файлы в папки wp-content/plugins/theme-my-login/language и wp-content/plugins/theme-my-profile/language соответственно.

• theme-my-login-ru_RU.zip
• theme-my-profile-ru_RU.zip

Некоторые фразы не переведены, так как не доступны для перевода с помощью программы Poedit, а править напрямую файлы плагинов не очень предусмотрительно.

Настройка Theme My Login

General — в нашем примере мы не будем включать ни один из параметров.

Template — здесь у нас есть возможность настроить текст служебных ссылок и приветствия (Titles), а также текст служебных сообщений (Messages).

Links — это настройка ссылок для виджета, который в нашем примере мы использовать не будем, почему — объясню ниже. А если по делу — там всё просто, можно добавлять и удалять ссылки, которые будут видны авторизованным пользователям, причём для каждой группы их можно настраивать индивидуально.

Redirection — после авторизации можно отправить пользователей из разных групп на разные страницы.

E-mail — здесь можно и нужно настроить сообщения, которые плагин будет отправлять пользователям по разным поводам.

Теперь объяснюсь по поводу виджета — если он вам понадобится, вы всегда сможете его использовать, я же покажу вам альтернативный способ сделать форму входа и меню пользователя с помощью изменения кода шаблона — так будет более гибко, у вас будет возможность самим решить, что показывать неавторизованным, а что — авторизованным пользователям, будь то ссылки, картинки, любой другой код.

В нужном месте шаблона вставляем следующий код:

<?php global $user_ID, $user_identity, $user_level ?><br />
<?php if ( $user_ID ) : ?><br />
СОДЕРЖИМОЕ ДЛЯ ПОЛЬЗОВАТЕЛЕЙ<br />
<?php else : ?><br />
СОДЕРЖИМОЕ ДЛЯ НЕАВТОРИЗОВАННЫХ ПОЛЬЗОВАТЕЛЕЙ<br />
<?php if ( get_option('users_can_register') ) : ?><br />
ЕСЛИ МОЖНО ЗАРЕГИСТРИРОВАТЬСЯ<br />
<?php endif ?><br />
<?php endif; ?>

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

СОДЕРЖИМОЕ ДЛЯ ПОЛЬЗОВАТЕЛЕЙ я заменил на ссылки для пользователя, причём ссылка на администрирование доступна только администраторам.

<br />
<h2 class="widgettitle">Меню пользователя</h2>
<p>Здравствуйте, <strong><?php echo $user_identity ?></strong>.</p>
<ul>
<?php global $user_ID; if( $user_ID ) : ?><br />
<?php if( current_user_can('level_10') ) : ?></p>
<li><a href="<?php bloginfo('url') ?>/wp-admin/index.php">Администрирование</a></li>
<p><?php else : ?><br />
<?php endif; ?><br />
<?php endif; ?></p>
<li><a href="<?php bloginfo('url') ?>/wp-admin/profile.php">Настройки профиля</a></li>
<li><a href="<?php echo wp_logout_url(get_permalink()); ?>">Выйти</a></li>
</ul>
<p>

В результате получаем примерно следующее:

СОДЕРЖИМОЕ ДЛЯ НЕАВТОРИЗОВАННЫХ ПОЛЬЗОВАТЕЛЕЙ мы поменяем на форму авторизации пользователей.

<br />
<h2 class="widgettitle">Авторизация</h2>
<form name="loginform-tml-main" id="loginform-tml-main" action="/login/?instance=tml-main&action=login" method="post">
<p><label for="log-tml-main">Логин</label></p>
<input type="text" name="log-tml-main" id="log-tml-main" class="input" size="18" />
<p><label for="pwd-tml-main">Пароль</label></p>
<input type="password" name="pwd-tml-main" id="pwd-tml-main" class="input" value="" size="18" />
<p><label for="rememberme-tml-main"><br />
<input name="rememberme-tml-main" type="checkbox" id="rememberme-tml-main" value="forever" /> Запомнить?</label></p>
<input type="submit" name="login-submit-tml-main" id="login-submit-tml-main" value="Войти" />
<input type="hidden" name="redirect_to" value="http://wptest.ru/login/" />
<input type="hidden" name="testcookie" value="1" />
</form>
<p>

Неавторизованным пользователям достанется примерно такая форма:

ЕСЛИ МОЖНО ЗАРЕГИСТРИРОВАТЬСЯ заменим на ссылки на страницы авторизации и восстановления пароля.

<ul>
<li><a href="<?php bloginfo('url') ?>/login/?instance=tml-main&action=register">Регистрация</a></li>
<li><a href="<?php bloginfo('url') ?>/wp-login.php?action=lostpassword">Забыли пароль?</a></li>
</ul>
<p>

Вот такую красотень увидят все, кто ещё не авторизовался или не зарегистрировался на сайте.

С плагином Theme My Login мы разобрались. Приступим к его товарищу.

Theme My Profile

Здесь всё предельно просто. Заходим в Настройки → Theme My Profile и выбираем группы пользователей, для которых необходимо темизировать страницу редактирования профиля.

Возможно, вам захочется настроить стиль этой страницы. Для этого вам понадобится внести изменения в файл style.css. Я добавил туда следующее:

#your-profile .form-table td {<br />
text-align:left;<br />
width:60%;<br />
}<br />
#your-profile .form-table th {<br />
text-align:right;<br />
vertical-align:top;<br />
width:30%;<br />
padding-top:8px;<br />
}<br />
#your-profile .form-table input {<br />
display:block;<br />
}<br />
#your-profile .form-table textarea {<br />
width:260px;<br />
}<br />
#your-profile .form-table select {<br />
height:auto;<br />
width:260px;<br />
}

Надеюсь, урок для вас не был сложным. С удовольствием отвечу на ваши вопросы в комментариях. Живой пример вы можете посмотреть и пощупать на моём тестовом сайте.

Всего самого доброго.
Артём Савельев.

P.S. Кстати, иллюстрация к уроку создана из скриншотов недавно созданного мной блога Сергея Ройзмана, который публикует уникальную информацию для руководителей продающих подразделений крупных Российских и международных компаний, КАМов (Key Account Managers), Продакт, Сейлз менеджеров, работающих в Больших продажах (B2B и B2G).

P.P.S. Типография Галеон предоставляет полиграфические услуги в Москве — офсетная печать, современное качество.

Сегодня я расскажу вам о том, как создать каталог песен с помощью Wordpress, плагина Magic Fields и скрипта jPlayer. Для своих уроков я создал демо сайт, на котором вы можете посмотреть, что у нас с вами получится.

Итак, у нас уже есть установленный Wordpress и активирован плагин Magic Fields. Для начала зайдём в панель администратора и там создадим новую категорию под названием «Песни». Далее нам нужно создать панель записей, за этим идём в Magic Fields → Write Panels (Панели записей) и там нажимаем на Create a Write Panel (Создать панель записей) и создаём панель записей.

Теперь в нашей панели записей создадим группу дополнительных полей под названием «Композиция». Для этого нам нужно пойти в Magic Fields → Write Panels (Панели записей) и нажать Edit Fields/Groups (Изменить поля/группы) напротив только что созданной панели «Песни». Там нажимаем на Create a Group и создаём группу.

Затем создадим дополнительные поля. Начнём с поля «Исполнитель»: идём в Magic Fields → Write Panels (Панели записей), напротив панели «Песни» нажимаем Edit Fields/Groups (Изменить поля/группы) и кликаем на create field (создать поле) справа от только что созданной группы «Композиция» и создаём дополнительное поле.

Для загрузки mp3 мы создадим поле «Файл» и в качестве типа поля (Type) укажем Audio.

Также я создал ещё поля «Альбом» и «Год» для последующей удобной сортировки композиций. Все поля создаются так же, как мы поступили с «Исполнителем» и «Файлом», о разных типах я рассказывал во вступительной статье этой серии.

Теперь добавим пару песен, чтобы было с чем упражняться. Пойдём в панель «Песни» и там выберем New (Новая запись). Мне очень нравится Жак Брель и группа Пилот, поэтому я добавлю именно их песни, снабжённые текстами.

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

Нам понадобится скачать архив со скриптом jPlayer, разархивировать его и загрузить файлы Jplayer.swf и jquery.jplayer.js в папку js, которую необходимо создать в каталоге с шаблоном (например /wp-content/themes/default/js).

Теперь можно взглянуть на разные демо проигрывателя и выбрать то, что по душе именно вам. Кстати, внешний вид легко изменяем с помощью CSS и javascript.

Выбрав понравившийся вариант, приступим к его установке. Для начала узнаем ID категории с песнями, чтобы плеер работал только для них. Я, например, в админке Wordpress в разделе «Рубрики» подвожу мышкой к рубрике «Песни» и снизу в строке состояния браузера вижу ссылку, последняя цифра которой и есть то, что я ищу.

Подключаем плеер для одной песни. Сначала откроем файл header.php вашего шаблона и после вставим следующий код:

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3/jquery.min.js"></script><br />
<script type="text/javascript" src="<?php bloginfo('stylesheet_directory'); ?>/js/jquery.jplayer.js"></script>

Тем самым мы подключили необходимые скрипты. Теперь нужно после этого кода вставить код самого плеера, окруженный условиями так, чтобы он работал только в категории «Песни», ID которой 3, только если открыта одиночная запись и только если для этой записи загружен файл.

<?php if (in_category(3) && is_single()) {<br />
$file = get('file'); if ($file != "") {<br />
?><br />
<script>
$(document).ready(function(){
$("#jquery_jplayer").jPlayer({
ready: function () {
$(this).setFile("<?php echo get('file'); ?>").play();
demoInstanceInfo($(this), $("#jplayer_info"));
},
cssPrefix: "single",
volume: 50,
oggSupport: false,
swfPath: "<?php bloginfo('stylesheet_directory'); ?>/js",
})
.jPlayerId("play", "player_play_single")
.jPlayerId("pause", "player_pause_single")
.jPlayerId("stop", "player_stop_single")
.jPlayerId("loadBar", "player_progress_load_bar_single")
.jPlayerId("playBar", "player_progress_play_bar_single")
.jPlayerId("volumeMin", "player_volume_min_single")
.jPlayerId("volumeMax", "player_volume_max_single")
.jPlayerId("volumeBar", "player_volume_bar_single")
.jPlayerId("volumeBarValue", "player_volume_bar_value_single")
.onProgressChange( function(loadPercent, playedPercentRelative, playedPercentAbsolute, playedTime, totalTime) {
var myPlayedTime = new Date(playedTime);
var ptMin = (myPlayedTime.getUTCMinutes() < 10) ? "0" + myPlayedTime.getUTCMinutes() : myPlayedTime.getUTCMinutes();
var ptSec = (myPlayedTime.getUTCSeconds() < 10) ? "0" + myPlayedTime.getUTCSeconds() : myPlayedTime.getUTCSeconds();
$("#play_time_single").text(ptMin+":"+ptSec);
var myTotalTime = new Date(totalTime);
var ttMin = (myTotalTime.getUTCMinutes() < 10) ? "0" + myTotalTime.getUTCMinutes() : myTotalTime.getUTCMinutes();
var ttSec = (myTotalTime.getUTCSeconds() < 10) ? "0" + myTotalTime.getUTCSeconds() : myTotalTime.getUTCSeconds();
$("#total_time_single").text(ttMin+":"+ttSec);
})
.onSoundComplete( function() {
$(this).play();
});
});
</script><br />
<?php } } ?>

Теперь настроим стили, картинки для которого я благополучно забрал с рабочего примера действием «Сохранить как». Они есть в архиве, который можно скачать ниже на этой странице. Изображения нужно загрузить в папку images вашего шаблона. Если такой папки нет, то её нужно создать. Потом откроем файл style.css и добавим в конце:

#player_container_single {<br />
position: relative;<br />
background-color:#eee;<br />
width:418px;<br />
height:100px;<br />
border:1px solid #009be3;<br />
margin-top:20px;<br />
}<br />
#player_container_single ul#player_controls_single {<br />
list-style-type:none;<br />
padding:0;<br />
margin: 0;<br />
}<br />
#player_container_single ul#player_controls_single li {<br />
overflow:hidden;<br />
text-indent:-9999px;<br />
}<br />
#player_play_single,<br />
#player_pause_single {<br />
display: block;<br />
position: absolute;<br />
left:40px;<br />
top:20px;<br />
width:40px;<br />
height:40px;<br />
cursor: pointer;<br />
}<br />
#player_play_single {<br />
background: url("images/spirites.jpg") 0 0 no-repeat;<br />
}<br />
#player_play_single.single_hover {<br />
background: url("images/spirites.jpg") -41px 0 no-repeat;<br />
}<br />
#player_pause_single {<br />
background: url("images/spirites.jpg") 0 -42px no-repeat;<br />
}<br />
#player_pause_single.single_hover {<br />
background: url("images/spirites.jpg") -41px -42px no-repeat;<br />
}<br />
#player_stop_single {<br />
position: absolute;<br />
left:90px;<br />
top:26px;<br />
background: url("images/spirites.jpg") 0 -83px no-repeat;<br />
width:28px;<br />
height:28px;<br />
cursor: pointer;<br />
}<br />
#player_stop_single.single_hover {<br />
background: url("images/spirites.jpg") -29px -83px no-repeat;<br />
}<br />
#player_progress_single {<br />
position: absolute;<br />
left:130px;<br />
top:32px;<br />
background-color: #eee;<br />
width:122px;<br />
height:15px;<br />
}<br />
#player_progress_load_bar_single {<br />
background: url("images/bar_load.gif") top left repeat-x;<br />
width:0px;<br />
height:15px;<br />
cursor: pointer;<br />
}<br />
#player_progress_load_bar_single.single_buffer {<br />
background: url("images/bar_buffer.gif") top left repeat-x;<br />
}<br />
#player_progress_play_bar_single {<br />
background: url("images/bar_play.gif") top left repeat-x ;<br />
width:0px;<br />
height:15px;<br />
}<br />
#player_volume_min_single {<br />
position: absolute;<br />
left:274px;<br />
top:32px;<br />
background: url("images/spirites.jpg") 0 -170px no-repeat;<br />
width:18px;<br />
height:15px;<br />
cursor: pointer;<br />
}<br />
#player_volume_max_single {<br />
position: absolute;<br />
left:346px;<br />
top:32px;<br />
background: url("images/spirites.jpg") 0 -186px no-repeat;<br />
width:18px;<br />
height:15px;<br />
cursor: pointer;<br />
}<br />
#player_volume_min_single.single_hover {<br />
background: url("images/spirites.jpg") -19px -170px no-repeat;<br />
}<br />
#player_volume_max_single.single_hover {<br />
background: url("images/spirites.jpg") -19px -186px no-repeat;<br />
}<br />
#player_volume_bar_single {<br />
position: absolute;<br />
left:292px;<br />
top:37px;<br />
background: url("images/volume_bar.gif") repeat-x top left;<br />
width:46px;<br />
height:5px;<br />
cursor: pointer;<br />
}<br />
#player_volume_bar_value_single {<br />
background: url("images/volume_bar_value.gif") repeat-x top left;<br />
width:0px;<br />
height:5px;<br />
}<br />
#player_playlist_message_single {<br />
position: absolute;<br />
left:0;<br />
bottom:0;<br />
width:338px;<br />
padding:5px 40px 10px 40px;<br />
font-family: Arial, Helvetica, sans-serif;<br />
line-height:1.4em;<br />
height:1em;<br />
background-color:#ccc;<br />
}<br />
#play_time_single,<br />
#total_time_single {<br />
padding-top:.3em;<br />
font-weight:normal;<br />
font-style:oblique;<br />
font-size:.7em;<br />
}<br />
#play_time_single {<br />
float:left;<br />
}<br />
#total_time_single {<br />
float:right;<br />
text-align: right;<br />
}

Конечно же, картинки желательно сделать свои и подогнать под их цвет и размер стиль всего плеера, но моя цель познакомить вас с тем, как это в принципе работает.

Теперь вызовим наш плеер в том месте, где нам хотелось бы его увидеть. Мне нравится уютное местечко прямо под заголовком. Для этого нам нужно открыть файл single.php (или index.php, если у вас нет такого файла) и после того места, где у вас заголовок, вставить следующий код:

<?php $file = get('file'); if($file != '') { ?></p>
<div id="jquery_jplayer"></div>
<div id="player_container_single">
<ul id="player_controls_single">
<li id="player_play_single">play</li>
<li id="player_pause_single">pause</li>
<li id="player_stop_single">stop</li>
<li id="player_volume_min_single">min volume</li>
<li id="player_volume_max_single">max volume</li>
</ul>
<div id="player_progress_single">
<div id="player_progress_load_bar_single">
<div id="player_progress_play_bar_single"></div>
</p></div>
</p></div>
<div id="player_volume_bar_single">
<div id="player_volume_bar_value_single"></div>
</p></div>
<div id="player_playlist_message_single">
<div id="play_time_single"></div>
<div id="total_time_single"></div>
</p></div>
</p></div>
<p><?php } ?>

Теперь проверяем. Сразу всё не заработало, потому что скрипты имеют свойство конфликтовать. Необходимо отключить функцию Edit-n-place в настройках Magic Fields, и тогда всё будет отлично функционировать.

Добавим ещё информацию об исполнителе, альбоме и укажем год. Сделаем этом под плеером, прямо перед текстом:

<?php $singer = get('singer'); if($singer != '') { ?>Исполнитель: <?php echo $singer; ?><br /><?php } ?><?php $album = get('album'); if($album != '') { ?>Альбом: <?php echo $album; ?><br /><?php } ?><?php $year = get('year'); if($year != '') { ?>Год: <?php echo $year; ?><br /><?php } ?>

Всё работает, всё замечательно. Если у Вас что-то не работает, скорее всего имеет место конфликт между скриптами. Отключите ненужные плагины. Знаю, что этот скрипт может не работать вместе с плагином Contact Form.

Теперь сделаем плейлист с множеством песен. Нам нужно, чтобы он отображался только в категории с песнями и вложенными в неё, исключая одиночные записи. Для этого в файле header.php после того, что мы уже вставили:

</script><br />
<?php } } ?>

добавим следующий код:

<?php if (is_category(3) || in_category(3) && !is_home() && !is_single()) { ?><br />
<script>
$(document).ready(function(){
var playItem = 0;
var myPlayList = [
<?php $files = new WP_Query('cat=3&showposts=-1&orderby=title&order=asc'); if($files->have_posts()) : ?>
<?php while($files->have_posts()) : $files->the_post(); ?>
<?php $file = get('file'); if ($file != "") { ?>
{name:"<?php the_title(); ?>",permalink:"<?php the_permalink(); ?>",singer:"<?php echo get('singer'); ?>",mp3:"<?php echo get('file'); ?>"},
<?php } ?>
<?php endwhile; ?><?php endif; ?>
];
$("#jquery_jplayer").jPlayer({
ready: function() {
displayPlayList();
playListInit(true); // Parameter is a boolean for autoplay.
demoInstanceInfo($(this), $("#jplayer_info"));
},
oggSupport: false,
swfPath: "<?php bloginfo('stylesheet_directory'); ?>/js"
})
.jPlayerId("play", "player_play")
.jPlayerId("pause", "player_pause")
.jPlayerId("stop", "player_stop")
.jPlayerId("loadBar", "player_progress_load_bar")
.jPlayerId("playBar", "player_progress_play_bar")
.jPlayerId("volumeMin", "player_volume_min")
.jPlayerId("volumeMax", "player_volume_max")
.jPlayerId("volumeBar", "player_volume_bar")
.jPlayerId("volumeBarValue", "player_volume_bar_value")
.onProgressChange( function(loadPercent, playedPercentRelative, playedPercentAbsolute, playedTime, totalTime) {
var myPlayedTime = new Date(playedTime);
var ptMin = (myPlayedTime.getUTCMinutes() < 10) ? "0" + myPlayedTime.getUTCMinutes() : myPlayedTime.getUTCMinutes();
var ptSec = (myPlayedTime.getUTCSeconds() < 10) ? "0" + myPlayedTime.getUTCSeconds() : myPlayedTime.getUTCSeconds();
$("#play_time").text(ptMin+":"+ptSec);
var myTotalTime = new Date(totalTime);
var ttMin = (myTotalTime.getUTCMinutes() < 10) ? "0" + myTotalTime.getUTCMinutes() : myTotalTime.getUTCMinutes();
var ttSec = (myTotalTime.getUTCSeconds() < 10) ? "0" + myTotalTime.getUTCSeconds() : myTotalTime.getUTCSeconds();
$("#total_time").text(ttMin+":"+ttSec);
})
.onSoundComplete( function() {
playListNext();
});
$("#ctrl_prev").click( function() {
playListPrev();
return false;
});
$("#ctrl_next").click( function() {
playListNext();
return false;
});
function displayPlayList() {
for (i=0; i < myPlayList.length; i++) {
$("#playlist_list ul").append("
<li id='playlist_item_"+i+"'>"+ myPlayList[i].singer +" – "+ myPlayList[i].name +" <a href='"+ myPlayList[i].permalink +"'>→</a></li>
<p>");
$("#playlist_item_"+i).data( "index", i ).hover(
function() {
if (playItem != $(this).data("index")) {
$(this).addClass("playlist_hover");
}
},
function() {
$(this).removeClass("playlist_hover");
}
).click( function() {
var index = $(this).data("index");
if (playItem != index) {
playListChange( index );
} else {
$("#jquery_jplayer").play();
}
});
}
}
function playListInit(autoplay) {
if(autoplay) {
playListChange( playItem );
} else {
playListConfig( playItem );
}
}
function playListConfig( index ) {
$("#playlist_item_"+playItem).removeClass("playlist_current");
$("#playlist_item_"+index).addClass("playlist_current");
playItem = index;
$("#jquery_jplayer").setFile(myPlayList[playItem].mp3, myPlayList[playItem].ogg);
}
function playListChange( index ) {
playListConfig( index );
$("#jquery_jplayer").play();
}
function playListNext() {
var index = (playItem+1 < myPlayList.length) ? playItem+1 : 0;
playListChange( index );
}
function playListPrev() {
var index = (playItem-1 >= 0) ? playItem-1 : myPlayList.length-1;
playListChange( index );
}
});
</script><br />
<?php } ?>

Затем в файле archive.php нам нужно вызвать плейлист, при этом мы заменим стандартное отображение записей в рубрике «Песни» на плеер. Если такого файла нет, то вносите изменения в index.php

Для этого, если у вас установлена тема default, найдите строку:

<div id="content" class="narrowcolumn" role="main">

после неё добавьте:

<?php if (is_category(3) || in_category(3) && !is_home() && !is_single()) { ?><br />
<?php /* If this is a category archive */ if (is_category()) { ?></p>
<h2 class="pagetitle"><?php printf(__('Archive for the ‘%s’ Category', 'kubrick'), single_cat_title('', false)); ?></h2>
<p> <?php } ?></p>
<div id="jquery_jplayer"></div>
<div id="player_container">
<ul id="player_controls">
<li id="player_play">play</li>
<li id="player_pause">pause</li>
<li id="player_stop">stop</li>
<li id="player_volume_min">min volume</li>
<li id="player_volume_max">max volume</li>
<li id="ctrl_prev">previous</li>
<li id="ctrl_next">next</li>
</ul>
<div id="play_time"></div>
<div id="total_time"></div>
<div id="player_progress">
<div id="player_progress_load_bar">
<div id="player_progress_play_bar"></div>
</p></div>
</p></div>
<div id="player_volume_bar">
<div id="player_volume_bar_value"></div>
</p></div>
</div>
<div id="playlist_list">
<ul>
<!-- The function displayPlayList() uses this unordered list -->
</ul>
</div>
<p><?php } else { ?>

а перед кодом:

</div>
<p><?php get_sidebar(); ?>

вставьте:

<?php } ?>

Теперь в файл style.css добавим стили. Как вы могли заметить, для плейлиста с множеством композиций мы будем использовать другие классы, чтобы всё было ровно, красиво и не перемешалось.

#player_container {<br />
position: relative;<br />
background-color:#eee;<br />
width:418px;<br />
height:80px;<br />
border:1px solid #009be3;<br />
margin-top:20px;<br />
}<br />
#player_container ul#player_controls {<br />
list-style-type:none;<br />
padding:0;<br />
margin: 0;<br />
}<br />
#player_container ul#player_controls li {<br />
overflow:hidden;<br />
text-indent:-9999px;<br />
}<br />
#player_play,<br />
#player_pause {<br />
display: block;<br />
position: absolute;<br />
left:48px;<br />
top:20px;<br />
width:40px;<br />
height:40px;<br />
cursor: pointer;<br />
}<br />
#player_play {<br />
background: url("images/spirites.jpg") 0 0 no-repeat;<br />
}<br />
#player_play.jqjp_hover {<br />
background: url("images/spirites.jpg") -41px 0 no-repeat;<br />
}<br />
#player_pause {<br />
background: url("images/spirites.jpg") 0 -42px no-repeat;<br />
}<br />
#player_pause.jqjp_hover {<br />
background: url("images/spirites.jpg") -41px -42px no-repeat;<br />
}<br />
#ctrl_prev {<br />
position: absolute;<br />
left:20px;<br />
top:26px;<br />
background: url("images/spirites.jpg") 0 -112px no-repeat;<br />
width:28px;<br />
height:28px;<br />
cursor: pointer;<br />
}<br />
#ctrl_prev:hover {<br />
background: url("images/spirites.jpg") -29px -112px no-repeat;<br />
}<br />
#ctrl_prev.disabled {<br />
background: url("images/spirites.jpg") -58px -112px no-repeat;<br />
cursor:default;<br />
}<br />
#ctrl_next {<br />
position: absolute;<br />
left:88px;<br />
top:26px;<br />
background: url("images/spirites.jpg") 0 -141px no-repeat;<br />
width:28px;<br />
height:28px;<br />
cursor: pointer;<br />
}<br />
#ctrl_next:hover {<br />
background: url("images/spirites.jpg") -29px -141px no-repeat;<br />
}<br />
#ctrl_next.disabled {<br />
background: url("images/spirites.jpg") -58px -141px no-repeat;<br />
cursor:default;<br />
}<br />
#player_stop {<br />
position: absolute;<br />
left:126px;<br />
top:26px;<br />
background: url("images/spirites.jpg") 0 -83px no-repeat;<br />
width:28px;<br />
height:28px;<br />
cursor: pointer;<br />
}<br />
#player_stop.jqjp_hover {<br />
background: url("images/spirites.jpg") -29px -83px no-repeat;<br />
}<br />
#player_progress {<br />
position: absolute;<br />
left:164px;<br />
top:32px;<br />
background-color: #eee;<br />
width:122px;<br />
height:15px;<br />
}<br />
#player_progress_load_bar {<br />
background: url("images/bar_load.gif") top left repeat-x;<br />
width:0px;<br />
height:15px;<br />
cursor: pointer;<br />
}<br />
#player_progress_load_bar.jqjp_buffer {<br />
background: url("images/bar_buffer.gif") top left repeat-x;<br />
}<br />
#player_progress_play_bar {<br />
background: url("images/bar_play.gif") top left repeat-x ;<br />
width:0px;<br />
height:15px;<br />
}<br />
#player_volume_min {<br />
position: absolute;<br />
left:296px;<br />
top:32px;<br />
background: url("images/spirites.jpg") 0 -170px no-repeat;<br />
width:18px;<br />
height:15px;<br />
cursor: pointer;<br />
}<br />
#player_volume_max {<br />
position: absolute;<br />
left:368px;<br />
top:32px;<br />
background: url("images/spirites.jpg") 0 -186px no-repeat;<br />
width:18px;<br />
height:15px;<br />
cursor: pointer;<br />
}<br />
#player_volume_min.jqjp_hover {<br />
background: url("images/spirites.jpg") -19px -170px no-repeat;<br />
}<br />
#player_volume_max.jqjp_hover {<br />
background: url("images/spirites.jpg") -19px -186px no-repeat;<br />
}<br />
#player_volume_bar {<br />
position: absolute;<br />
left:314px;<br />
top:37px;<br />
background: url("images/volume_bar.gif") repeat-x top left;<br />
width:46px;<br />
height:5px;<br />
cursor: pointer;<br />
}<br />
#player_volume_bar_value {<br />
background: url("images/volume_bar_value.gif") repeat-x top left;<br />
width:0px;<br />
height:5px;<br />
}<br />
#play_time,<br />
#total_time {<br />
position: absolute;<br />
left:164px;<br />
top:49px;<br />
width:122px;<br />
font-size:.8em;<br />
font-style:oblique;<br />
}<br />
#total_time {<br />
text-align: right;<br />
}<br />
#playlist_list {<br />
width:418px;<br />
}<br />
#playlist_list ul{<br />
list-style-type:none;<br />
padding:10px 20px 20px 20px;<br />
margin:0 0 10px 0;<br />
background-color:#ccc;<br />
border:1px solid #009be3;<br />
border-top:none;<br />
width:378px;<br />
font-size:.9em;<br />
}<br />
#playlist_list li{<br />
padding:4px 0 4px 20px;<br />
border-bottom:1px solid #eee;<br />
cursor: pointer;<br />
}<br />
#playlist_list li a {<br />
margin-left:10px;<br />
}<br />
#playlist_list li.playlist_current{<br />
color:#0d88c1;<br />
list-style-type:square;<br />
list-style-position:inside;<br />
padding-left:6px;<br />
cursor: default;<br />
}<br />
#playlist_list li.playlist_hover {<br />
color:#0d88c1;<br />
}

Вот такой получился плеер. Симпатично, не правда ли? Но будет ещё лучше, если мы вспомним о дополнительных полях «Альбом», «Исполнитель» и «Год» и сделаем удобную сортировку.

Сначала нам нужно получить от Wordpress все имеющиеся значения этих полей и показать эти значения на сайте в виде выпадающих списков.

В файле archive.php (или index.php, если такого нет) после:

<?php /* If this is a category archive */ if (is_category()) { ?></p>
<h2 class="pagetitle"><?php printf(__('Archive for the ‘%s’ Category', 'kubrick'), single_cat_title('', false)); ?></h2>
<p> <?php } ?>

добавляем:

<br />
<form method="post" action="">
<p>
Исполнитель:</p>
<select name="singer" >
<option value=""></option>
<p><?php<br />
$listsingers = $wpdb->get_results("SELECT DISTINCT meta_value FROM $wpdb->postmeta<br />
WHERE meta_key = 'singer' ORDER BY meta_value");<br />
foreach ($listsingers as $listsinger) {<br />
if ($listsinger->meta_value != '') {<br />
$option = '<br />
<option ';<br />
if ($listsinger->meta_value == $_REQUEST["singer"]) {$option .= 'selected '; }<br />
$option .= 'value="'.$listsinger->meta_value.'">';<br />
$option .= $listsinger->meta_value;<br />
$option .= '</option>
<p>';<br />
echo $option;<br />
}} ?><br />
</select>
</p>
<p>
Альбом:</p>
<select name="album" >
<option value=""></option>
<p><?php<br />
$listalbums = $wpdb->get_results("SELECT DISTINCT meta_value FROM $wpdb->postmeta<br />
WHERE meta_key = 'album' ORDER BY meta_value");<br />
foreach ($listalbums as $listalbum) {<br />
if ($listalbum->meta_value != '') {<br />
$option = '<br />
<option ';<br />
if ($listalbum->meta_value == $_REQUEST["album"]) {$option .= 'selected '; }<br />
$option .= 'value="'.$listalbum->meta_value.'">';<br />
$option .= $listalbum->meta_value;<br />
$option .= '</option>
<p>';<br />
echo $option;<br />
}} ?><br />
</select>
</p>
<p>
Год:</p>
<select name="year" >
<option value=""></option>
<p><?php<br />
$listyears = $wpdb->get_results("SELECT DISTINCT meta_value FROM $wpdb->postmeta<br />
WHERE meta_key = 'year' ORDER BY meta_value");<br />
foreach ($listyears as $listyear) {<br />
if ($listyear->meta_value != '') {<br />
$option = '<br />
<option ';<br />
if ($listyear->meta_value == $_REQUEST["year"]) {$option .= 'selected '; }<br />
$option .= 'value="'.$listyear->meta_value.'">';<br />
$option .= $listyear->meta_value;<br />
$option .= '</option>
<p>';<br />
echo $option;<br />
}} ?><br />
</select>
</p>
<input type="submit" value="Показать" class="s_submit" name="submit" />
</form>
<p>

в файле header.php ищем:

<?php $files = new WP_Query('cat=3&showposts=-1&orderby=title&order=asc'); if($files->have_posts()) : ?>

и заменяем на:

<?php<br />
if (isset($_REQUEST["singer"])) { $paramsinger=$_REQUEST["singer"]; } else { $paramsinger=""; };<br />
if (isset($_REQUEST["album"])) { $paramalbum=$_REQUEST["album"]; } else { $paramalbum=""; };<br />
if (isset($_REQUEST["year"])) { $paramyear=$_REQUEST["year"]; } else { $paramyear=""; };<br />
if ($paramsinger != "" && $paramalbum != "" && $paramyear != "") {<br />
$mp3query = "cat=3&showposts=-1&orderby=title&order=asc&x_year=".$paramyear."&x_album=".$paramalbum."&x_singer=".$paramsinger."";<br />
} elseif ($paramsinger != "" && $paramalbum != "" && $paramyear == "") {<br />
$mp3query = "cat=3&showposts=-1&orderby=title&order=asc&x_album=".$paramalbum."&x_singer=".$paramsinger."";<br />
} elseif ($paramsinger != "" && $paramalbum == "" && $paramyear != "") {<br />
$mp3query = "cat=3&showposts=-1&orderby=title&order=asc&x_year=".$paramyear."&x_singer=".$paramsinger."";<br />
} elseif ($paramsinger == "" && $paramalbum != "" && $paramyear != "") {<br />
$mp3query = "cat=3&showposts=-1&orderby=title&order=asc&x_year=".$paramyear."&x_album=".$paramalbum."";<br />
} elseif ($paramsinger != "" && $paramalbum == "" && $paramyear == "") {<br />
$mp3query = "cat=3&showposts=-1&orderby=title&order=asc&x_singer=".$paramsinger."";<br />
} elseif ($paramsinger == "" && $paramalbum != "" && $paramyear == "") {<br />
$mp3query = "cat=3&showposts=-1&orderby=title&order=asc&x_album=".$paramalbum."";<br />
} elseif ($paramsinger == "" && $paramalbum == "" && $paramyear != "") {<br />
$mp3query = "cat=3&showposts=-1&orderby=title&order=asc&x_year=".$paramyear."";<br />
} else {<br />
$mp3query = "cat=3&showposts=-1&orderby=title&order=asc";<br />
}<br />
?><br />
<?php $files = new WP_Query($mp3query); if($files->have_posts()) : ?><br />
<?php while($files->have_posts()) : $files->the_post(); ?>

Смотрим, пробуем, радуемся.

Спасибо за внимание. Надеюсь, Вам понравился урок. Задавайте вопросы — с удовольствием отвечу и помогу, показывайте то, что получилось у Вас, делитесь советами.

Вы можете скачать изменённые мной файлы вместе со скриптом и картинками. Их можно не боясь заливать поверх ваших файлов, только если у вас свежая установка Wordpress с активированным шаблоном «Default».

Это статья является частью серии «Создание сайтов с Wordpress & Magic Fields». Вы можете ознакомиться с презентацией плагина и описанием его главных функций во вступительной статье.

Всего доброго.
Артём Савельев.