Hướng dẫn thachpham wordpress nâng cao
|
Giới thiệu sơ lược về serie WordPress nâng cao. Giới thiệu tài nguyên tham khảo WordPress Codex và cách xem thông tin tại WordPress Codex đúng cách để tiết kiệm thời gian mà vẫn đọc được tài liệu cần xem. Tìm hiểu về cách làm việc của mã nguồn WordPress trong việc truy xuất dữ liệu khi có lượt truy cập vào, hay nói cách khác là cách mà các kịch bản PHP trong mã nguồn WordPress được vận hành. Bài này các bạn nên đọc trước khi xem các bài WordPress nâng cao. Tìm hiểu cấu trúc template trong theme của WordPress để tuỳ biến theme và sử dụng các template tag để hiển thị nội dung trong theme. Tìm hiểu đối tượng $wp_query mặc định và cách viết vòng lặp để hiển thị bài viết trong WordPress ra bên ngoài. Đồng thời hướng dẫn thêm cách tạo query với WP_Query. Hướng dẫn chi tiết cách sử dụng Action Hook trong WordPress và tìm hiểu các tạo một action hook. Filter Hook là tính năng nâng cao trong WordPress giúp bạn có thể sửa lại nội dung các kịch bản PHP trong các phần nhất định mà không cần phải sửa trực tiếp vào mã nguồn. Custom Field là tính năng nâng cao thú vị có trong WordPress để bạn thêm các dữ liệu thêm vào cho các bài viết. Meta Box là khung nhập liệu các nội dung thêm vào ở khu vực soạn thảo nội dung của post hoặc page. Bài này sẽ hướng dẫn bạn cách tạo một meta box toàn tập, bao gồm việc bảo mật khi gửi dữ liệu từ meta box. Hướng dẫn chi tiết cách tạo một widget bằng cách viết code kế thừa class WP_Widget mặc định. Thực hành tạo widget bài ngẫu nhiên có tùy chọn số lượng bài Bạn không biết bắt đầu từ đâu và bắt đầu thế nào để trở thành một Master WordPress trong thời gian ngắn? Đừng lo lắng, Thachpham.com sẽ giúp bạn vạch rõ con đường đúng đắn nhất để học WordPress nâng cao có hiệu quả hoàn toàn miễn phí. Có khá nhiều thứ mà bạn cần nắm vững trước khi “đâm đầu” vào WordPress nâng cao, đó là: Danh sách thứ tự bài viết bạn nên họcCác bài kỹ thuật thường dùngCác kỹ thuật được sử dụng khi lập trình trong WordPress mình đã có tổng hợp tại serie WordPress Nâng Cao, mời bạn xem qua. Các bài thực hànhLập trình theme WordPress toàn tập Nếu bạn đã có chút kiến thức về lập trình PHP và sử dụng WordPress API từ serie WordPress Nâng Cao, bây giờ bạn có thể tìm hiểu qua cách làm một theme hoàn chỉnh nhé. Cách viết plugin dự báo thời tiết Nếu bạn chưa biết bắt đầu viết plugin ở đâu thì hãy xem qua bộ video này thông qua ví dụ cách viết plugin có chức năng tự động cập nhật thông tin về thời tiết.Vậy tiếp theo là gì? Đó chỉ là những cái nền tảng, hãy cố nghiền ngẫm WordPress Codex để tìm hiểu thêm và nhất là theo dõi chuyên mục Web Development tại Thachpham.com để xem được nhiều hướng dẫn code WordPress hơn. Chia sẻ những video hướng dẫn các thủ thuật SEO từ cơ bản tới nâng cao tại Thachpham.com Bài 1: Hướng dẫn WordPress SEO by Yoast Plugin WordPres SEO by Yoast là một plugin miễn phí rất hay để hỗ trợ tối ưu SEO cho nội dung trong WordPress tốt hơn nhờ việc cho phép tuỳ chỉnh title và description cho toàn bộ nội dung. xem chi tiết hướng dẫn tại Video này: tìm hiểu thêm về SEO tại: https://ezoom.vn/dich-vu-seo Hướng dẫn WordPress SEO by YoastBài 2: Cách một website WordPress hoạt động trên Internet Cách một website WordPress hoạt động trên InternetChào các bạn! Qua bài viết “Làm khung phát nhạc mp3 và zippyshare” của Thạch 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ể bấm vào đây để dowload. Đây là bố cục đơn giản của theme mà mình đã thiết kế sẵn: Bố cục theme 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, h2, 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' => '',
'before_title' => '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: menu sau khi đăng ký post type và taxonomy Ở đâ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 "
|