Trong bài viết này mình sẽ chia sẻ lại bài hướng dẫn của anh Thạch Phạm hướng dẫn cụ thể cho các bạn cách làm trang nghe nhạc sử dụng player của zippyshare và jwplayer.
Các bạn sử dụng 1 Custom Post Types cho bài hát và 2 Custom Taxonomies cho custom post type này để phân loại theo thể loại và ca sĩ.
Theme được anh Thạch Phạm tạo dựa trên BLANK-Theme. Các bạn có thể bấm vào đây để dowload. Đây là bố cục đơn giản của theme mà Thạch Phạm đã thiết kế sẵn:
Sau khi dowload xong các bạn copy thư mục BLANK-Theme vào thư mục themes, đổi tên và vào file style.css sửa lại với nội dung sau:
/*
Theme Name: Nghe nhạc trực tuyến
Theme URI: http://worpress.org
Description: Hướng dẫn làm website nghe nhạc trực tuyến đơn giản
Author: DuongDV
Author URI: http://worpress.org
Version: 1
*/
html {
margin
:
0
;
padding
:
0
;
border
:
0
;
}
body, div, span, object, iframe, h
1
, h
2
, h
3
, h
4
, h
5
, h
6
, p, blockquote,
pre
, a, abbr, acronym, address,
code
, del, dfn, em, img, q, dl, dt, dd, ol, ul, li, fieldset, form, label, legend, table,
caption
, tbody, tfoot, thead, tr, th, td, article, aside, dialog, figure, footer, header, hgroup, nav, section {
margin
:
0
;
padding
:
0
;
border
:
0
;
font-size
:
100%
;
font
: inherit;
vertical-align
:
baseline
;
}
article, aside, details, figcaption, figure,
footer, header, hgroup, menu, nav, section {
display
:
block
;
}
body {
line-height
:
1
;
font-family
:
Arial
,
Helvetica
,
sans-serif
;
}
ol, ul {
list-style
:
none
;
}
blockquote, q {
quotes
:
none
;
}
blockquote:before, blockquote:after,
q:before, q:after {
content
:
''
;
content
:
none
;
}
table {
border-collapse
:
collapse
;
border-spacing
:
0
;
}
a {
text-decoration
:
none
;
color
:
#2882bc
;
}
a:hover {
color
:
#e74c3c
;
}
.clear {
clear
:
both
;
}
.header-
top
{
background
:
#f9f9f9
;
height
:
60px
;
width
:
100%
;
padding
:
0
;
}
.wrap {
width
:
960px
;
margin
:
0
auto
;
}
.header-
top
.logo {
position
:
relative
;
float
:
left
;
width
:
83px
;
height
:
44px
;
background
:
url
(images/logo.png)
left
top
no-repeat
;
text-indent
:
-10000px
;
display
:
block
;
margin-top
:
8px
;
margin-right
:
110px
;
}
.header-
top
#search-form #s {
width
:
450px
;
float
:
left
;
height
:
27px
;
line-height
:
27px
;
font-size
:
13px
;
padding
:
5px
;
border
:
1px
solid
#cecece
;
-webkit-border-radius:
3px
;
-moz-border-radius:
3px
;
border-radius:
3px
;
}
.header-
top
#search-form #search-sb {
background
:
url
(images/searchicon.png)
10px
3px
no-repeat
;
cursor
:
pointer
;
float
:
left
;
height
:
40px
;
line-height
:
40px
;
width
:
56px
;
border
:
1px
solid
#cecece
;
-webkit-border-radius:
3px
;
-moz-border-radius:
3px
;
border-radius:
3px
;
margin-left
:
5px
;
}
.header-
top
#search-form #search-sb:hover {
background
:
#cecece
url
(images/searchicon.png)
10px
3px
no-repeat
;
}
.header-
top
#search-form {
padding-top
:
10px
;
}
.login-box {
float
:
right
;
margin-top
:
13px
;
}
.login-box a {
font-weight
:
bold
;
font-size
: .
8em
;
}
.header-menu {
width
:
100%
;
min-width
:
1000px
;
background
:
#424242
;
}
#h-menu {
font-family
:
Arial
, Sans-
Serif
;
font-size
:
10px
;
line-height
:
15px
;
text-transform
:
uppercase
;
text-align
:
left
;
}
#h-menu > ul {
width
:
auto
;
list-style-type
:
none
;
padding
:
0
;
margin
:
0
;
-webkit-border-radius:
2px
;
-moz-border-radius:
2px
;
-o-border-radius:
2px
;
border-radius:
2px
;
}
#h-menu > ul li {
display
: inline-
block
;
*
display
:
inline
;
zoom:
1
;
}
#h-menu > ul li.
right
{
float
:
right
;
}
#h-menu > ul li.menu-item-has-children {
position
:
relative
;
}
#h-menu > ul li.menu-item-has-children:hover ul {
display
:
block
;
z-index
:
999999
;
}
#h-menu > ul li.menu-item-has-children ul {
display
:
none
;
width
:
250px
;
position
:
absolute
;
margin
:
0
;
padding
:
0
;
list-style-type
:
none
;
background
:
#424242
;
border
:
1px
solid
#fffafc
;
border-bottom
:
3px
solid
#d9ced2
;
border-top
:
0
none
;
}
#h-menu > ul li.menu-item-has-children ul li {
display
:
block
;
}
#h-menu > ul li.menu-item-has-children > a {
background-image
:
url
(
'images/caret.png'
);
background-repeat
:
no-repeat
;
background-position
:
90%
-95%
;
}
#h-menu > ul li.menu-item-has-children.current_page_item > a,
#h-menu > ul li.menu-item-has-children > a:hover {
background
:
#1ABC9C
url
(
'images/caret.png'
)
no-repeat
;
background-position
:
90%
195%
;
}
#h-menu > ul li a {
display
:
block
;
padding
:
12px
24px
11px
24px
;
text-decoration
:
none
;
color
:
#ffffff
;
}
#h-menu > ul li.current_page_item a,
#h-menu > ul li a:hover {
background
:
#1ABC9C
;
color
:
#fff
;
text-shadow
:
0px
1px
0px
#000
;
}
.content-wrap {
margin-top
:
10px
;
}
.content {
width
:
640px
;
float
:
left
;
}
.content .ctitle {
padding
:
10px
0
;
border-bottom
:
1px
solid
#1ABC9C
;
font-weight
:
bold
;
text-transform
:
capitalize
;
margin-bottom
:
20px
;
}
.sidebar {
width
:
300px
;
float
:
right
;
}
.sbox {
width
:
300px
;
padding
:
10px
0
;
}
.widget ul {
margin
:
5px
0
;
}
.widget ul a {
font-size
: .
9em
;
}
.sbox .stitle, .widget h
3
{
padding
:
10px
5px
;
background
:
#1ABC9C
;
text-transform
:
capitalize
;
color
:
#fff
;
font-weight
:
bold
;
}
.slst li {
margin
:
10px
0
;
width
:
300px
;
overflow
:
hidden
;
}
.slst li a:first-child {
font-size
:
12px
;
display
:
block
;
color
:
#64B4EE
;
font-weight
:
bold
;
line-height
:
16px
;
}
.slst li a:hover {
color
:
#e74c3c
;
;
}
.slst .info-music {
width
:
200px
;
float
:
left
;
}
.slst .sview {
float
:
right
;
font-size
:
11px
;
color
:
#999
;
background
:
url
(images/spider-
icon
.png)
0
-1px
no-repeat
;
padding-left
:
15px
;
}
.mlst li {
width
:
640px
;
float
:
left
;
margin-right
:
20px
;
border-bottom
:
#ececec
solid
1px
;
padding
:
8px
0px
;
line-height
:
24px
;
}
.mlst .info-song {
float
:
left
;
width
:
380px
;
font-size
:
12px
;
white-space
:
nowrap
;
overflow
:
hidden
;
text-
overflow
: ellipsis;
}
.mlst .view {
float
:
right
;
font-size
:
11px
;
color
:
#999
;
background
:
url
(images/spider-
icon
.png)
0
5px
no-repeat
;
padding-left
:
15px
;
}
.mlst .info-song h
3
{
float
:
left
;
}
.mlst .info-song span {
float
:
left
;
padding
:
0px
5px
;
color
:
#666
;
font-size
:
12px
;
}
.mlst .info-song p {
float
:
left
;
max-width
:
140px
;
white-space
:
nowrap
;
overflow
:
hidden
;
text-
overflow
: ellipsis;
}
.mlst_more {
float
:
right
;
display
: inline-
block
;
font-size
: .
9em
;
margin-top
:
10px
;
}
.footer {
width
:
100%
;
min-width
:
1000px
;
background
:
#f9f9f9
;
padding
:
10px
0
;
min-height
:
50px
;
line-height
:
50px
;
text-align
:
center
;
font-size
: .
9em
;
}
.tabs {
margin
:
5px
0
;
}
.tabs li {
display
: inline-
block
;
border
:
1px
solid
#e5e5e5
;
}
.tabs li.active, .tabs li:hover {
background
:
#1ABC9C
;
}
.tabs li.active a, .tabs li:hover a {
color
:
#fff
;
}
.tabs li a {
text-transform
:
uppercase
;
font-size
: .
9em
;
padding
:
3px
29px
;
display
: inline-
block
;
}
.slst {
display
:
none
;
}
#week {
display
:
block
;
}
.slst .singers a {
color
:
#666
!important
;
display
: inline-
block
!important
;
font-size
: .
8em
;
font-weight
:
normal
!important
;
}
.links_lst {
margin
:
10px
0
;
}
.links_lst a {
display
: inline-
block
;
padding
:
5px
10px
;
color
:
#fff
;
background
:
#2882C1
;
}
.links_lst a:hover, .links_lst a.ac {
background
:
#1ABC9C
;
}
.song_info {
line-height
:
1.5em
;
font-size
: .
9em
;
}
.song_info h
2
{
font-weight
:
bold
;
padding-bottom
:
5px
;
border-bottom
:
1px
solid
#FE8F01
;
margin-bottom
:
10px
;
}
.song_info #lyric {
height
:
210px
;
overflow
:
hidden
;
background
:
#F9F9F9
;
padding
:
3px
;
margin
:
5px
0
;
}
.song_info .full_height {
height
:
100%
!important
;
}
Bên trên là toàn bộ css cho theme. Về hình ảnh của theme các bạn có thể dowload tại đây và copy vào thư mục images của theme. Còn về thông tin thì các bạn đổi lại cho phù hợp sau đó vào dashboard kích hoạt theme này lên.
Tiếp đến các bạn vào file functions.php, xóa hết nội dung trong đó và viết lại với nội dung mới sau:
function
dvd_register_song_post_type() {
$labels
=
array
(
'name'
=>
'Bài hát'
,
'singular_name'
=>
'Bài hát'
,
'add_new'
=>
'Thêm mới'
,
'add_new_item'
=>
'Thêm mới bài hát'
,
'edit_item'
=>
'Sửa bài hát'
,
'new_item'
=>
'Bài hát mới'
,
'all_items'
=>
'Danh sách bài hát'
,
'view_item'
=>
'Xembài hát'
,
'search_items'
=>
'Tìm bài hát'
,
'not_found'
=>
'Không tìm thấy!'
,
'not_found_in_trash'
=>
'Không có bài hát nào trong thùng rác!'
,
'menu_name'
=>
'Bài hát'
);
$args
=
array
(
'labels'
=>
$labels
,
'public'
=> true,
'publicly_queryable'
=> true,
'show_ui'
=> true,
'show_in_menu'
=> true,
'query_var'
=> true,
'rewrite'
=>
array
(
'slug'
=>
'bai-hat'
),
'capability_type'
=>
'post'
,
'has_archive'
=> true,
'hierarchical'
=> false,
'menu_position'
=> 3,
'supports'
=>
array
(
'title'
,
'thumbnail'
)
);
register_post_type(
'song'
,
$args
);
}
add_action(
'init'
,
'dvd_register_song_post_type'
);
dd_action(
'init'
,
'dvd_create_song_taxonomies'
);
function
dvd_create_song_taxonomies() {
$labels
=
array
(
'name'
=>
'Thể loại'
,
'singular_name'
=>
'Thể loại'
,
'search_items'
=>
'Tìm kiếm'
,
'all_items'
=>
'Danh sách thể loại'
,
'parent_item'
=>
'Thể loại cha'
,
'parent_item_colon'
=>
'Thể loại cha:'
,
'edit_item'
=>
'Sửa Thể loại'
,
'update_item'
=>
'Cập nhật'
,
'add_new_item'
=>
'Thêm mới'
,
'new_item_name'
=>
'Thêm Thể loại'
,
'menu_name'
=>
'Thể loại'
,
'not_found'
=>
'Không tìm thấy'
,
'add_or_remove_items'
=>
'Thêm hoặc xóa'
,
'popular_items'
=>
'Thể loại phổ biến'
,
'popular_items'
=>
'Xem thể loại'
);
$args
=
array
(
'hierarchical'
=> true,
'labels'
=>
$labels
,
'show_ui'
=> true,
'show_admin_column'
=> true,
'query_var'
=> true,
'rewrite'
=>
array
(
'slug'
=>
'the-loai'
),
);
register_taxonomy(
'song_category'
,
'song'
,
$args
);
$labels
=
array
(
'name'
=>
'Ca sĩ'
,
'singular_name'
=>
'Ca sĩ'
,
'search_items'
=>
'Tìm kiếm'
,
'all_items'
=>
'Danh sách Ca sĩ'
,
'edit_item'
=>
'Sửa Ca sĩ'
,
'update_item'
=>
'Cập nhật'
,
'add_new_item'
=>
'Thêm mới'
,
'new_item_name'
=>
'Thêm Ca sĩ'
,
'menu_name'
=>
'Ca sĩ'
,
'not_found'
=>
'Không tìm thấy'
,
'add_or_remove_items'
=>
'Thêm hoặc xóa'
,
'popular_items'
=>
'Phổ biến'
,
'popular_items'
=>
'Xem Ca sĩ'
);
$args
=
array
(
'hierarchical'
=> true,
'labels'
=>
$labels
,
'show_ui'
=> true,
'show_admin_column'
=> true,
'query_var'
=> true,
'rewrite'
=>
array
(
'slug'
=>
'ca-si'
),
);
register_taxonomy(
'singer'
,
'song'
,
$args
);
}
Các bạn vào dashboard kiểm tra, kết quả sẽ như thế này:
Ở đây 1 bài hát mình sẽ có nhiều link nhạc khác nhau, cụ thể của mình là zippyshare, youtube, mp3 và mp4. Ngoài ra còn có thêm lời bài hát. Mình sẽ sử dụng custom field để lưu trữ chúng và dùng meta box để hiển thị các trường dữ liệu.
$song_customfields
=
array
(
//mảng custom fields
array
(
"type"
=>
"text"
,
"name"
=>
"link-zippyshare"
,
"label"
=>
"Link zippy share"
,
"size"
=> 60
),
array
(
"type"
=>
"text"
,
"name"
=>
"link-youtube"
,
"label"
=>
"Link youtube"
,
"size"
=> 60
),
array
(
"type"
=>
"text"
,
"name"
=>
"link-mp3"
,
"label"
=>
"Link mp3"
,
"size"
=> 60
),
array
(
"type"
=>
"text"
,
"name"
=>
"link-mp4"
,
"label"
=>
"Link mp4"
,
"size"
=> 60
),
array
(
"type"
=>
"wp_editor"
,
"name"
=>
"lyric"
,
"label"
=>
"Lời bài hát"
)
);
add_action(
"add_meta_boxes"
,
"dvd_add_song_box_meta"
);
//hook đăng ký meta box
function
dvd_add_song_box_meta() {
add_meta_box(
"song_box"
,
"Thông tin thêm"
,
"dvd_show_song_box"
,
"song"
,
"normal"
,
"low"
);
//hàm thêm meta box
}
function
dvd_show_song_box(){
//hiển thị meta box đã đăng ký
global
$song_customfields
,
$post
;
$song_info
= get_post_custom(
$post
->ID);
echo
"<table>"
;
foreach
(
$song_customfields
as
$field
){
switch
(
$field
[
'type'
]){
case
'text'
:
?>
<tr>
<td><label
for
=
"<?php echo $field['name']; ?>"
><?php
echo
$field
[
'label'
]; ?></label></td>
<td><input autocomplete=
"off"
type=
"text"
value=
"<?php if(isset($song_info[$field['name']])) echo $song_info[$field['name']][0]; ?>"
id=
"<?php echo $field['name']; ?>"
name=
"<?php echo $field['name']; ?>"
size=
"<?php echo $field['size']; ?>"
/>
</td>
</tr>
<?php
break
;
case
'wp_editor'
:
?>
<tr>
<td><label
for
=
"<?php echo $field['name']; ?>"
><?php
echo
$field
[
'label'
]; ?></label></td>
<td>
<?php
$lyric
= isset(
$song_info
[
$field
[
'name'
]]) ?
$song_info
[
$field
[
'name'
]][0] :
""
;
wp_editor(
$lyric
,
$field
[
'name'
],
array
(
"media_buttons"
=> false));
?>
</td>
</tr>
<?php
break
;
}
}
echo
"</table>"
;
}
Để dễ tùy biến và tránh việc lặp lại thao tác cho cùng 1 loại input thì ở trên mình đã tạo ra 1 mảng lưu custom fields và loop qua chúng để hiển thị thông qua hook add_meta_boxes và hàm add_meta_box.
function
dvd_save_product_custom_post(
$post_id
){
global
$song_customfields
;
if
(defined(
'DOING_AUTOSAVE'
) && DOING_AUTOSAVE)
//tự động lưu
return
;
if
(!current_user_can(
'edit_post'
,
$post_id
))
//kiểm tra quyển
return
;
if
(isset(
$_REQUEST
[
'post_type'
]) &&
$_REQUEST
[
'post_type'
] ==
"song"
){
//kiểm tra request
foreach
(
$song_customfields
as
$field
){
if
(isset(
$_REQUEST
[
$field
[
'name'
]]) && !
empty
(
$_REQUEST
[
$field
[
'name'
]])){
update_post_meta(
$post_id
,
$field
[
'name'
],
$_REQUEST
[
$field
[
'name'
]]);
}
else
{
delete_post_meta(
$post_id
,
$field
[
'name'
]);
}
}
}
}
add_action(
"save_post"
,
"dvd_save_product_custom_post"
);
Vì có nhiều link nhạc cho 1 bài hát nên mình đã custom lại đường dẫn của bài hát như sau:
http://domain/bai-hat/ten-bai-hat/loại-link-nhạc.html
Thông qua loại-link-nhạc chúng ta sẽ lấy và phát đúng loại link yêu cầu.
Vì thế cần phải đăng ký 1 query var, 1 rewrite rule mới và custom lại permalink của post. Các bạn thêm tiếp đoạn code sau:
add_filter(
'query_vars'
,
'dvd_insert_song_query_vars'
);
function
dvd_insert_song_query_vars(
$vars
) {
array_push
(
$vars
,
'link_type'
);
//đăng ký query var với tên link_type
return
$vars
;
}
add_action(
'rewrite_rules_array'
,
'dvd_song_rewrite_rules'
);
function
dvd_song_rewrite_rules(
$rules
) {
$new_rules
=
array
();
$new_rules
[
'bai-hat/([^/]+)/?([^/]+)?.html/?'
] =
'index.php?song=$matches[1]&link_type=$matches[2]'
;
//thêm rule mới
return
$new_rules
+
$rules
;
}
add_filter(
'post_type_link'
,
'custom_song_post_permalink'
);
function
custom_song_post_permalink (
$post_link
) {
//sửa lại đường dẫn của custom post type
global
$post
;
if
(!
is_object
(
$post
))
return
$post_link
;
$type
= get_post_type(
$post
->ID);
switch
(
$type
){
case
'song'
:
return
home_url() .
'/bai-hat/'
.
$post
->post_name .
'.html'
;
default
:
return
home_url() .
'/'
.
$type
.
'/'
.
$post
->post_name .
'.html'
;
}
}
Tiếp tục thêm đoạn code sau để xử lý lưu các thông tin được nhập trên meta box xuống csdl. Ta dùng hook save_post:
function dvd_save_product_custom_post( $post_id ){ global $song_customfields ; if (defined( 'DOING_AUTOSAVE' ) && DOING_AUTOSAVE) //tự động lưu return ; if (!current_user_can( 'edit_post' , $post_id )) //kiểm tra quyển return ; if (isset( $_REQUEST [ 'post_type' ]) && $_REQUEST [ 'post_type' ] == "song" ){ //kiểm tra request foreach ( $song_customfields as $field ){ if (isset( $_REQUEST [ $field [ 'name' ]]) && ! empty ( $_REQUEST [ $field [ 'name' ]])){ update_post_meta( $post_id , $field [ 'name' ], $_REQUEST [ $field [ 'name' ]]); } else { delete_post_meta( $post_id , $field [ 'name' ]); } } } } add_action( "save_post" , "dvd_save_product_custom_post" ); |
Vì có nhiều link nhạc cho 1 bài hát nên mình đã custom lại đường dẫn của bài hát như sau:
http://domain/bai-hat/ten-bai-hat/loại-link-nhạc.html
Thông qua loại-link-nhạc chúng ta sẽ lấy và phát đúng loại link yêu cầu.
Vì thế cần phải đăng ký 1 query var, 1 rewrite rule mới và custom lại permalink của post. Các bạn thêm tiếp đoạn code sau:
add_filter(
'query_vars'
,
'dvd_insert_song_query_vars'
);
function
dvd_insert_song_query_vars(
$vars
) {
array_push
(
$vars
,
'link_type'
);
//đăng ký query var với tên link_type
return
$vars
;
}
add_action(
'rewrite_rules_array'
,
'dvd_song_rewrite_rules'
);
function
dvd_song_rewrite_rules(
$rules
) {
$new_rules
=
array
();
$new_rules
[
'bai-hat/([^/]+)/?([^/]+)?.html/?'
] =
'index.php?song=$matches[1]&link_type=$matches[2]'
;
//thêm rule mới
return
$new_rules
+
$rules
;
}
add_filter(
'post_type_link'
,
'custom_song_post_permalink'
);
function
custom_song_post_permalink (
$post_link
) {
//sửa lại đường dẫn của custom post type
global
$post
;
if
(!
is_object
(
$post
))
return
$post_link
;
$type
= get_post_type(
$post
->ID);
switch
(
$type
){
case
'song'
:
return
home_url() .
'/bai-hat/'
.
$post
->post_name .
'.html'
;
default
:
return
home_url() .
'/'
.
$type
.
'/'
.
$post
->post_name .
'.html'
;
}
}
Ok. Bây giờ các bạn vào phần quản lý thêm thể loại, ca sĩ và bài hát.
Phần quản lý đã ổn. Bây giờ đến phần hiển thị. Các bạn vào phần quản lý menu và tạo 1 menu với tên tùy ý để hiển thị trang chủ, thể loại và ca sĩ. Sau đó các bạn vào file header.php thêm đoạn code này vào sau thẻ <body <?php body_class(); ?>>:
<
div
class
=
"header-top"
>
<
div
class
=
"wrap"
>
<
h1
><
a
href="<?php bloginfo('url'); ?>" title="Nghe Nhạc Trực Tuyến">Nghe Nhạc Trực Tuyến</
a
></
h1
>
<
form
action
=
"#"
method
=
"get"
id
=
"search-form"
>
<
input
type
=
"text"
name
=
"s"
id
=
"s"
placeholder
=
"Nhập từ khóa cần tìm ...."
>
<
input
type
=
"submit"
id
=
"search-sb"
value
=
""
>
</
form
>
<!--search form-->
<
div
class
=
"login-box"
>
<
a
href
=
"#"
>Đăng nhập</
a
> |
<
a
href
=
"#"
>Đăng ký</
a
>
</
div
>
</
div
>
</
div
>
<!--end hedaer-top-->
<
div
class
=
"header-menu"
>
<
div
class
=
"wrap"
>
<
div
id
=
'h-menu'
>
<?
php
wp_nav_menu(array("menu" => "header menu", "container" => ""));
?>
</
div
>
</
div
>
</
div
>
<!--end header menu-->
<
div
class
=
"content-wrap"
>
<
div
class
=
"wrap"
>
Các bạn đổi lại tên menu vừa tạo trên hàm wp_nav_menu để gọi nó ra. Tiếp đến vào file index.php viết lại với nội dung sau:
<?php get_header(); ?>
<div
class
=
"content"
>
<h2
class
=
"ctitle"
>Bài hát mới</h2>
<ul
class
=
"mlst"
>
<?php
$arg
=
array
(
"post_type"
=>
"song"
,
"post_status"
=>
"publish"
,
"posts_per_page"
=> 10,
"orderby"
=>
"ID"
,
"order"
=>
"DESC"
);
$new_songs
=
new
WP_Query(
$arg
);
while
(
$new_songs
->have_posts()) :
$new_songs
->the_post();
?>
<li>
<div
class
=
"info-song"
>
<h3><a href=
"<?php the_permalink(); ?>"
><?php the_title(); ?></a></h3>
<span>-</span>
<p>
<?php
$singers
= get_the_terms(get_the_ID(),
"singer"
);
if
(
$singers
&& ! is_wp_error(
$singers
) ) :
$singers_name
=
""
;
foreach
(
$singers
as
$singer
){
$singers_name
.=
$singer
->name.
", "
;
}
echo
rtrim(
$singers_name
,
", "
);
endif
;
?>
</p>
</div>
<div
class
=
"view"
>
<?php
$view
= get_post_meta(get_the_ID(),
"view"
, true);
if
(
$view
)
echo
$view
;
else
echo
0;
?>
</div>
</li>
<?php
endwhile
;
?>
</ul>
<a
class
=
"mlst_more"
href=
"#"
>Xem thêm >></a>
</div><!--
end
content-->
<?php get_sidebar(); ?>
<?php get_footer(); ?>
Đoạn code trên cũng dễ hiểu. Mình dùng WP_Query để custom truy vấn hiển thị các bài hát mới. Vào tiếp file sidebar.php sửa lại với nội dung bên dưới. File này sẽ hiển thị các bài hát xem nhiều theo tuần, tháng và năm bên sidebar.
<
div
class
=
"sidebar"
>
<?
php
if (function_exists('dynamic_sidebar') && dynamic_sidebar('Sidebar Widgets')); //widget sẽ hiển thị khi theo tác kéo thả trong dashboard ?>
<
div
class
=
"sbox"
>
<
h3
class
=
"stitle"
>Bài hát nghe nhiều</
h3
>
<
ul
class
=
"tabs"
>
<
li
class
=
"active"
><
a
href
=
"#week"
>Tuần</
a
></
li
>
<
li
><
a
href
=
"#month"
>Tháng</
a
></
li
>
<
li
><
a
href
=
"#year"
>Năm</
a
></
li
>
</
ul
>
<?
php
$
week
=
date
('W');
$
month
=
date
('m');
$
year
=
date
('Y');
//lấy ngày tháng năm hiện tại
$
base_arg
=
array
(
"post_type" => "song",
"post_status" => "publish",
"posts_per_page" => 10,
"meta_key" => "view",
"orderby" => "meta_value_num",
"order" => "DESC"
);
?>
<
ul
class
=
"slst"
id
=
"week"
>
<?
php
query_posts(array_merge($base_arg, array("year"=>$year,"w"=>$week)));
while(have_posts()) : the_post();
?>
<
li
>
<
div
class
=
"info-music"
>
<
a
href="<?php the_permalink(); ?>"><?
php
the_title(); ?></
a
>
<
p
class
=
"singers"
><?
php
the_terms(get_the_ID(), "singer", "", ", "); ?></
p
>
</
div
>
<
div
class
=
"sview"
>
<?
php
$
view
=
get_post_meta
(get_the_ID(), "view", true);
if($view) echo $view; else echo 0;
?>
</
div
>
</
li
>
<?
php
endwhile;
wp_reset_query();
?>
</
ul
>
<!--week-->
<
ul
class
=
"slst"
id
=
"month"
>
<?
php
query_posts(array_merge($base_arg, array("year"=>$year,"monthnum"=>$month)));
while(have_posts()) : the_post();
?>
<
li
>
<
div
class
=
"info-music"
>
<
a
href="<?php the_permalink(); ?>"><?
php
the_title(); ?></
a
>
<
p
class
=
"singers"
><?
php
the_terms(get_the_ID(), "singer", "", ", "); ?></
p
>
</
div
>
<
div
class
=
"sview"
>
<?
php
$
view
=
get_post_meta
(get_the_ID(), "view", true);
if($view) echo $view; else echo 0;
?>
</
div
>
</
li
>
<?
php
endwhile;
wp_reset_query();
?>
</
ul
>
<!--month-->
<
ul
class
=
"slst"
id
=
"year"
>
<?
php
query_posts(array_merge($base_arg, array("year"=>$year)));
while(have_posts()) : the_post();
?>
<
li
>
<
div
class
=
"info-music"
>
<
a
href="<?php the_permalink(); ?>"><?
php
the_title(); ?></
a
>
<
p
class
=
"singers"
><?
php
the_terms(get_the_ID(), "singer", "", ", "); ?></
p
>
</
div
>
<
div
class
=
"sview"
>
<?
php
$
view
=
get_post_meta
(get_the_ID(), "view", true);
if($view) echo $view; else echo 0;
?>
</
div
>
</
li
>
<?
php
endwhile;
wp_reset_query();
?>
</
ul
>
<!--month-->
<
script
type
=
"text/javascript"
>
jQuery(document).ready(function($){
$('.tabs li a').click(function(){ //xử lý bật, tắt tab
$('.slst').css({'display' : 'none'});
$($(this).attr('href')).fadeIn();
$('.tabs li').removeClass('active');
$(this).parent().addClass('active');
return false;
});
});
</
script
>
</
div
>
</
div
>
<!--end sidebar-->
Trong file này mình dùng query_posts để hiển thị bài hát theo tuần, tháng, này kết hợp jquery bật, tắt các tabs.
Tiếp đến file footer.php. File này đơn giản chỉ hiển thị copy right thôi. Các bạn có thể tùy chỉnh lại.
</
div
>
<!--end wrap-->
</
div
>
<!--end content-wrap-->
<
div
class
=
"clear"
></
div
>
<
div
class
=
"footer"
>
<
div
class
=
"wrap"
>
Copyright © 2014 by Your Name - Powered by WordPress
</
div
>
<?
php
wp_footer(); ?>
</
div
>
</
body
>
</
html
>
<?
php
get_header(); ?>
<?
php
if (have_posts()) : while (have_posts()) : the_post(); ?>
<?
php
$
view
=
get_post_meta
(get_the_ID(), "view", true);
if(!$view){
update_post_meta(get_the_ID(), "view", 1);
}else{
update_post_meta(get_the_ID(), "view", $view + 1);
}
//cập nhật lượt nghe
?>
<
div
class
=
"content"
>
<
h1
class
=
"ctitle"
>Bài hát: <?
php
the_title(); ?></
h1
>
<?
php
$
slink_accept
=
array
("zippyshare", "youtube", "mp3", "mp4"); //mảng các loại link cho phép
$
links
=
array
();
foreach($slink_accept as $type){
$
link
=
get_post_meta
(get_the_ID(), "link-".$type, true);
if($link){
$links[] = array("type" => $type, "link" => $link);
}
} //lấy các link của bài hát
if(count($links) == 0) :
echo "Link bài hát không tồn tại!";
else :
$link_type = get_query_var("link_type"); //lấy loại link
if($link_type && in_array($link_type, $slink_accept)){
foreach($links as $link){
if($link['type'] == $link_type){
dvd_play($link['link'], $link['type']);
break;
}
}
}else{
dvd_play($links[0]['link'], $links[0]['type']);
}
?>
<
div
class
=
"links_lst"
>
Link:
<?
php
foreach($links as $link){
?>
<
a
<?php if($link_type == $link['type']) echo "
class
=
'ac'
"; ?> href="<?
php
echo str_replace(".html", "/".$link['type'].".html", get_the_permalink()); ?>"><?
php
echo $link['type']; ?></
a
>
<?
php
}
?>
</
div
>
<
div
class
=
"song_info"
>
<
h2
>Thông tin bài hát:</
h2
>
<
p
><
b
>Thể loại</
b
>: <?
php
the_terms(get_the_ID(), "song_category", "", ", "); ?></
p
>
<
p
><
b
>Trình bày</
b
>: <?
php
the_terms(get_the_ID(), "singer", "", ", "); ?></
p
>
<
p
><
b
>Lời bài hát</
b
>: </
p
>
<
div
id
=
"lyric"
>
<?
php
$
lyric
=
apply_filters
( 'the_content', get_post_meta(get_the_ID(), "lyric", true) );
$
lyric
=
str_replace
( ']]>', ']]>', $lyric );
echo $lyric;
?>
</
div
>
<
p
><
a
id
=
"turn"
href
=
"javascript:void(0);"
>Bật, tắt</
a
> hiển thị toàn bộ lời bài hát</
p
>
<
script
type
=
"text/javascript"
>
jQuery(document).ready(function($){
$('#turn').click(function(){
if($('#lyric').hasClass('full_height')){
$('#lyric').removeClass('full_height');
}else{
$('#lyric').addClass('full_height');
}
});
});
</
script
>
</
div
>
<?
php
endif;
?>
</
div
>
<?
php
endwhile; endif; ?>
<?
php
get_sidebar(); ?>
<?
php
get_footer(); ?>
function
dvd_play(
$link
,
$type
){
if
(
$type
==
"zippyshare"
){
//link zippy share dùng player của zippy
if
(preg_match(
"/www([0-9]+).zippyshare.com/v/([0-9]+)/file.html/s"
,
$link
,
$id
)){
?>
<script type=
"text/javascript"
>
var
zippywww=
"<?php echo $id[1]; ?>"
;
var
zippyfile=
"<?php echo $id[2]; ?>"
;
var
zippytext=
"#000000"
;
var
zippyback=
"#e8e8e8"
;
var
zippyplay=
"#ff6600"
;
var
zippywidth=640;
var
zippyauto=true;
var
zippyvol=100;
var
zippywave =
"#000000"
;
var
zippyborder =
"#cccccc"
;
</script>
<script type=
"text/javascript"
src=
"http://api.zippyshare.com/api/embed_new.js"
></script>
<?php
}
}
else
{
// các link còn lại dùng player của jwplayer
$file
=
$link
;
if
(
$type
==
"youtube"
)
//thiết lập link youtube cho phù hợp
{
$pattern
=
'%^
(?:https?:
//)?
(?:www.)?
(?:
youtu.be/
| youtube.com
(?:
/embed/
| /v/
| .*v=
)
)
([w-]{10,12})
($|&).*
$%x'
;
$result
= preg_match(
$pattern
,
$link
,
$matches
);
if
(false !==
$result
) {
$file
=
"https://www.youtube.com/watch?v="
.
$matches
[1];
}
}
?>
<script src=
"http://jwpsrv.com/library/6dYsVKQwEeOJmCIACmOLpg.js"
></script>
<div id=
'jwplayer'
></div>
<script type=
'text/javascript'
>
jwplayer(
'jwplayer'
).setup({
file:
'<?php echo $file; ?>'
,
width:
'100%'
,
height:
'<?php if($type == "youtube" || $type == "mp4") echo "350"; else echo "20"; ?>'
,
autostart: true
});
</script>
<?php
}
}
Hàm trên sẽ chọn player phù hợp cho mỗi loại link. Link zippyshare sẽ dùng player của chính nó, các link còn lại dùng jwplayer. Với link youtube, do có nhiều loại nên cần chuyển nó về 1 loại duy nhất để có thể play được. Về jwplayer các bạn có thể vào đây đăng ký 1 tài khoản và sử dụng bản miễn phí.
Thử với 1 bài hát để xem kết quả nhé:
Sau khi xem bài này bạn đã hình dung và biết cách tạo 1 site và khung nhạc bạn tham khảo thêm các bài viết tiếp để làm tốt và hiểu sâu về cách làm trang nhạc trong WordPress