1. This site uses cookies. By continuing to use this site, you are agreeing to our use of cookies. Tìm hiểu thêm.

Share Theme Nhạc Wordpress Cho Anh Em Nào Cần

Thảo luận trong 'Wordpress Theme' bắt đầu bởi Phạm Hoài Vũ, 1/1/18.

Lượt xem: 413

  1. Phạm Hoài Vũ
    Online

    Phạm Hoài Vũ Guest

    Chào các bạn! Qua bài viết “Tạo một khung phát nhạc MP3 và ZippyShare trong bài viết” của mình các bạn đã biết cách chèn player để phát nhạc, cụ thể là mp3 và zippyshare. Trong bài viết này mình sẽ hướng dẫn cụ thể cho các bạn cách làm 1 trang nghe nhạc sử dụng player của zippyshare và jwplayer.

    Mình sẽ 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 mình tạo dựa trên BLANK-Theme. Các bạn có thể

    để dowload. Đây là bố cục đơn giản của theme mà mình đã thiết kế sẵn:

    Xem đính kèm 2301

    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, h1, h2, h3, h4, h5, h6, 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 h3 {
    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 h3 {
    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 h2 {
    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_enqueue_scripts(){
    wp_enqueue_script('jquery');
    }
    add_action('wp_enqueue_scripts', 'dvd_enqueue_scripts');
    if (function_exists('register_sidebar')) {
    register_sidebar(array(
    'name' => 'Sidebar Widgets',
    'id' => 'sidebar-widgets',
    'description' => 'These are widgets for the sidebar.',
    'before_widget' => '<div id="%1$s" class="widget %2$s">',
    'after_widget' => '</div>',
    'before_title' => '<h3>',
    'after_title' => '</h3>'
    ));
    }
    function dvd_register_nav_menu() {
    register_nav_menus(
    array(
    'main-menu' => 'Menu'
    )
    );
    }
    add_action("init","dvd_register_nav_menu");
    Với code bên trên chúng ta đã đăng ký sidebar, menu và kích hoạt thư viện jquery cho theme. Đó là những thứ tối thiếu nhất phải có.

    Tiếp tục với file functions.php. Chúng ta sẽ đăng ký 1 custom post type cho bài hát. Cụ thể như 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');
    Bài hát đã có rồi, để quản lý dễ dàng hơn thì cần phân loại chúng. Ở đây mình phân loại theo thể loại và ca sĩ. Các bạn có thể phân loại tùy ý.

    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:

    Xem đính kèm 2302

    Ở đâ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_boxeshàm add_meta_box.

    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:

    <div class="header-top">
    <div class="wrap">
    <h1><a href="<?php bloginfo('url'); ?>" title="Nghe Nhạc Trực Tuyến" class="logo">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>
    Vậy là đã xong phần hiển thị ngoài trang chủ và sidebar. Để hiển thị thông tin bài hát các bạn tạo 1 file với tên single-song.php trong thư mục theme và viết code với nội dung sau:


    <?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(); ?>
    Code bên trên xử lý hiển thị thông bài hát, gọi player phù hợp cho từng loại link và cập nhật lượt nghe. Với hàm dvd_play() các bạn vào lại file functions.php chèn thêm đoạn code sau:


    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ào nghe 1 bài xem sao nhé:

    Xem đính kèm 2303

    Lời kết
    Mình xin kết thúc phần 1 tại đây. Qua bài hướng dẫn này hy vọng nó giúp ích cho các bạn trong việc tạo 1 website nghe nhạc đơn giản. Trong phần kế tiếp mình sẽ hướng dẫn các bạn hoàn thiện các chức năng như xem thêm bài hát mới, tìm kiếm, hiển thị bài hát theo thể loại, ca sĩ …

     
    Chính sửa cuối: 24/1/18
  2. Đang tải...


  3. ExpertVN
    Offline

    ExpertVN Cu Ly Trưởng Thành viên BQT

    Tham gia:
    14/9/17
    Bài gửi:
    335
    Đã được thích:
    38
    Điểm thành tích:
    28
    Không thấy link down nhỉ ?
     
  4. Chủ Thớt
    Chủ Thớt
    Phạm Hoài Vũ
    Online

    Phạm Hoài Vũ Guest

    không sữa bài viết dc vậy
     

Chia sẻ trang này