Создание каталога песен на Wordpress с помощью Magic Fields и jPlayer

Сегодня я расскажу вам о том, как создать каталог песен с помощью 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». Вы можете ознакомиться с презентацией плагина и описанием его главных функций во вступительной статье.

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