Создание каталога песен на 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>
<script type="text/javascript" src="<?php bloginfo('stylesheet_directory'); ?>/js/jquery.jplayer.js"></script>

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

<?php if (in_category(3) && is_single()) {
$file = get('file'); if ($file != "") {
?>
<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>
<?php } } ?>

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

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

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

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

<?php $file = get('file'); if($file != '') { ?>
<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>
</div>
</div>
<div id="player_volume_bar_single">
<div id="player_volume_bar_value_single"></div>
</div>
<div id="player_playlist_message_single">
<div id="play_time_single"></div>
<div id="total_time_single"></div>
</div>
</div>
<?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>
<?php } } ?>

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

<?php if (is_category(3) || in_category(3) && !is_home() && !is_single()) { ?>
<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>");
$("#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>
<?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()) { ?>
<?php /* If this is a category archive */ if (is_category()) { ?>
<h2 class="pagetitle"><?php printf(__('Archive for the ‘%s’ Category', 'kubrick'), single_cat_title('', false)); ?></h2>
<?php } ?>
<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>
</div>
</div>
<div id="player_volume_bar">
<div id="player_volume_bar_value"></div>
</div>
</div>
<div id="playlist_list">
<ul>
<!-- The function displayPlayList() uses this unordered list -->
</ul>
</div>
<?php } else { ?>

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

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

вставьте:

<?php } ?>

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

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

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

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

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

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

добавляем:

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

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

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

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

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

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

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

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

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

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