Kinh nghiệm wordpress
Contents
- 1. Lộ trình học wordpress của tôi
- 2. Tùy biến quyền người dùng
- 3. Tạo khóa bảo mật mới trong wp-config.php
- 4. Tạo theme
- 5. File functions.php
- 6. Đăng ký style and script
- 7. Đăng ký menu
- 8. Header and footer
- 9. Widgets – sidebar
- 10. Search form
- 11. Add feature image – ảnh đại diện bài viết
- 12. The post
- 13. Template part
- 14. Các tag của blog post
- 15. Pagination
- 16. Post
- 17. Comment
- 18. Author template tag
- 19. Related post using WP_Query
- 20. Page template
- 21. Page 404
- 22. Category template
- 23. Date template
- 24. Attachment Template – image or file upload
- 25. Search
- 26. Custom template
- 27. Title, Logo
- 28. Thêm quảng cáo
- 29. Tạo menu admin
- 30. Query database example
- My wordpress
- 2. Plugin xịn
1. Lộ trình học wordpress của tôi
- Tìm hiểu cách vận hành của mã nguồn wordpress
- Series Lập trình theme wordpress
- Series Lập trình plugin wordpress
- Series WordPress nâng cao
- Lập trình plugin Weather
- Viết plugin đơn giản
2. Tùy biến quyền người dùng
Sử dụng plugin ADVANCED ACCESS MANAGER
Bài viết về plugin này: https://thachpham.com/
3. Tạo khóa bảo mật mới trong wp-config.php
https://api.wordpress.org/secret-key/1.1/salt/
4. Tạo theme
WordPress yêu cầu 1 theme phải có 2 file:
- index.php
- style.css
// file style.css /* Plugin Name: HTML5Aerial Description: Theme learn Version: 1.0 Author: Trong Hao Text Domain: Udemy */
Xem thêm tại: https://codex.wordpress.org/File_Header
5. File functions.php
<?php //setup define( 'JA_DEV_MODE', true ); //includes include( get_theme_file_path('/duongdantuthumucChuatheme') ); //hooks add_action('wp_enqueue_scripts', 'tenHam'); //shortcodes
6. Đăng ký style and script
//dat ten them tien to j + ten theme + _ tenham ju_enqueue // theme Udemy function ju_enqueue() { $uri = get_theme_file_uri(); // xoa cache trinh duyet khi dev // khi deploy edit define => false $version = JA_DEV_MODE ? time() : false; wp_register_style( 'main', $uri . '/assets/css/main.css', [], $version ); wp_register_style( 'datTen1', 'http://....' ); wp_register_style( 'datTen2', $uri . 'duongDan', ['datTen1'] ); //tham so thu 3: xac dinh cai nao tai truoc (datTen1 tai truoc datTen2). Tham so thu 3 co the k co cung dc wp_enqueue_style( 'datTen1' ); wp_enqueue_style( 'datTen2' ); // => header cac trang su dung them <php wp_head(); ?> wp_register_script( 'datTen3', $uri . 'duongDan', ['...'], false, true/$version ); // tham so thu 3 nhu style, // tham so thu 4: phien ban cua script. False => khong su dung phien ban wp_enqueue_style( 'datTen3' ); }
// functions.php add_action( 'after_setup_theme', 'tenHam' );
function tenHam() { register_nav_menu( 'tenMenu', __( 'Mota', 'textDomain') ); }
// chỗ cần gắn menu vào if ( has_nav_menu( 'tenMenu' ) ) { wp_nav_menu([ 'theme_location' => 'tenMenu', 'container' => false, //the bao boc menu 'menu_class' => '', 'fallback_cp' => false, //hien thi menu mac dinh 'depth' => 4 // bao nhieu cap menu ]); }
Thêm attribute walker
if ( has_nav_menu( 'tenMenu' ) ) { wp_nav_menu([ 'theme_location' => 'tenMenu', 'container' => false, //the bao boc menu 'menu_class' => '', 'fallback_cp' => false, //hien thi menu mac dinh 'depth' => 4 // bao nhieu cap menu, 'walker' => new TenClass() ]); }
Tạo class mới kế thừa class Walker_Nav_Menu
class TenClass extends Walker_Nav_Menu { public function start_lvl( &$output, $depth = 0, $args = [] ) { $output .= '<ul class="special-class">'; } public function start_el( &$output, $item, $depth = 0, $args = [], $id = 0 ) { $output .= '<li class="special-class-item">'; $output .= $args->before; $output .= '<a href="' . $item->url . '">'; $output .= $args->link_before . $item->title . $args->link_after; $output .= '</a>'; $output .= $args->after; } public function end_el( &$output, $item, $depth = 0, $args = [], $id = 0 ) { $output .= '</li>'; } public function end_lvl( &$output, $depth = 0, $args = [] ) { $output .= '</ul>'; } }
Đăng ký trên file functions.php
// functions.php //includes include( get_theme_file_path('/includes/custom-nav.php') );
<?php get_header(); ?> // => header.php <?php get_header( 'v2' ); ?>// => header-v2.php <?php get_footer(); ?> // => footer.php <?php body_class( 'tenClass1 tenClass2' ); ?>
add hook
add_action( 'widgets_init', 'tenHam' );
Đăng ký sidebar
function tenHam() { register_sidebar([ 'name' => __('tenSideBar', 'text_domain'), 'id' => 'datTenDuyNhatKhongTrung', 'description' => __('mota', 'text_domain'), 'before_widget' => '<div id="%1$s" class="widget cleafix %2$s"', 'after_widget' => '</div>', 'before_title' => '<h4>', 'after_title' => '</h4>' ]); }
Gọi file sidebar
<?php get_sidebar(); ?>
Gọi sidebar tại nơi cần sử dụng
<?php if ( is_active_sidebar( 'js_sidebar_custom' ) ) { dynamic_sidebar( 'js_sidebar_custom' ); } ?>
10. Search form
<?php $unique_id = esc_attr( uniqid( 'search-form-' ) ); ?> <form role="search" method="get" class="search-form" action="<?php echo esc_url( home_url( '/' ) ); ?>"> <div class="input-group"> <input type="search" id="<?php echo $unique_id; ?>" class="form-control" name="s" placeholder="<?php esc_attr_e( 'Search', 'text_domain' ); ?>" /> <span class="input-group-btn"> <button type="submit" class="btn btn-danger"><i class="icon-search"></i></button> </span> </div> </form>
11. Add feature image – ảnh đại diện bài viết
add vào hook after_setup_theme
add_theme_support( 'post-thumbnails' );
12. The post
<?php if( have_posts() ) { while( have_posts() ) { the_post(); ?> <div> blog post item </div> <?php } } ?>
13. Template part
get_template_part( 'tenChuan', 'custom' ); //tenChuan-custom.php
14. Các tag của blog post
// thumbnail if ( has_post_thumbnail() ) { the_post_thumbnail( 'full', [ // medium, large, thumbnail 'class' => 'tenClass' ]); } // title <?php the_title(); ?> <?php the_title( '<h2>', '</h2>' ); ?> // link blog post item <?php the_permalink(); ?> // date blog post item <?php echo get_the_date(); ?> // author <?php the_author(); ?> // get link author <?php echo get_author_posts_url( get_the_author_meta('ID') ); //co the thay ID thanh truong muon lay ?> // category of blog post item <?php the_category( ' ' ); // dau phan cach cac category o day la space ?> // comment number <?php comments_number( '0' ); ?> // trích dẫn <?php the_excerpt(); ?>
15. Pagination
previous_post_link( 'Text hiển thị' ); next_posts_link( 'Text hiển thị' );
16. Post
//post single-{post-type}-{slug}.php (single-post-hello.php) single-{post-type}.php (single-post.php) single.php singular.php index.php if( have-post() ) { while( have_post() ) { the_post(); global $post; $author_ID = $post->post_author; $author_URL = $post->get author_posts_url( $author_ID ); the_title(); get_the_date(); the_content(); the_tags(); $default = array( 'before' => '<p>', 'after' => ''</p> ); wp_link_pages($default); } }
17. Comment
///comment if( post_password_required() ) { return; } comment_form([ 'comment_field' => '<div>...', 'fields' => [ 'email' => '<div class=""> <lable>'. __('text', 'text-domain') . '</label> <input class=""/>', ], 'class_submit' => '' 'label_submit' => __('text', 'text-domain'), 'title_reply' => __('text', 'text-domain') ]); if ( have_comments() ) { } foreach ($comments as $comment) { get_avatar( $comment, 60, '', '', [ 'class' => '' ]); // 60 : kích thước comment_author(); comment_date(); comment_text(); } the_comments_pagination(); if( comments_open() || get_comments_number() ) { }
18. Author template tag
////template tags the_author(); get_avatar( $author_ID, 90, '', '', [ 'class' => ]); // 90: size get_the_author_meta( field ); // len codex.wordpress.org nl2br( get_the_author_meta( 'description' ) ) // hàm xuống dòng khi khi đọc cục html
19. Related post using WP_Query
//Related post using WP_Query $categories = get_the_category(); $rp_query = new WP_Query([ 'posts_per_page'=> 2, 'post_not_in' => [ $post->ID ], 'cat' => !empty( $categories ? $categories[0]->term_id: null) ]); if( $rp_query->have_post() ) { while( $rp_query->have_post() ) { $rp_query->the_post(); if( has_post_thumbnail() ) { the_post_thumbnail( 'thumbnail' ); } ... // su dung nhu blog single } wp_reset_post_data(); }
19.1 wp_reset_post_data()
Thiết lập lại Dữ liệu Bài viết
Trong ví dụ ở trên, tôi đã thêm wp_reset_postdata()
sau mỗi truy vấn. Điều này là rất quan trọng vì nó thiết lập lại truy vấn thành truy vấn chính đang chạy trên trang đó.
Ví dụ, nếu bạn đang sử dụng WP_Query
để chạy một truy vấn trên sidebar, sử dụng wp_reset_postdata()
có tác dụng nói cho WordPress biết rằng chúng ta vẫn đang ở trên bất cứ trang nào đang được xem và nó sẽ làm việc với truy vấn mặc định cho trang đó.
Nếu bạn không làm điều này, thì mọi truy vấn khác đang chạy trên trang (bao gồm truy vấn mặc định) có thể bị ngắt, và bất kỳ thẻ điều kiện nào đang kiểm tra loại trang đang được xem sẽ không hoạt động.
19.2 Các phương pháp truy vấn khác
pre_get_posts
get_posts()
get_pages()
query_posts()
(cái mà bạn nên tránh, tôi sẽ giải thích sau)
20. Page template
//page template page-{slug}.php page-{id}.php page.php singular.php index.php while( have_posts() ) { the_post(); } rewind_post(); //giống break //plugin tạo subtitle: // ==> WP Subtitle single_post_title() if ( function_exists( 'the_subtitle' ) ) { the_subtitle(); }
20.1 rewind_post()
Và bạn sẽ sử dụng rewind_posts()
nếu bạn cần đi đến đầu vòng lặp. Ví dụ này thật kỳ lạ, nhưng tôi không thể nghĩ ra cái nào tốt hơn. Về cơ bản, nếu bạn muốn hiển thị 3 bài đăng đầu tiên của vòng lặp, thì hãy bắt đầu và hiển thị tất cả chúng:
global $wp_query; $started_over = false; while ( have_posts() ) : the_post(); the_title(); if ( ! $started_over && $wp_query->current_post == 2 ) { $started_over = true; rewind_posts(); } endwhile;
Xem thêm: https://www.it-swarm-vi.com/vi/wp-query
20.2 single_post_title()
Kết luận: Tôi có thể sử dụng the_title () hoặc single_post_title () (wp_title trả về nhiều văn bản hơn tôi muốn). Và tôi có thể kiểm tra is_page (…) để hiển thị tên trang cụ thể khi tôi đang xem bài đăng.
Xem thêm: https://www.it-swarm-vi.com/vi/php
21. Page 404
//404 get_search_form();
22. Category template
//category template category-{slug}.php category-{id}.php category.php archive.php index.php the_archive_title(); the_archive_description();
23. Date template
Gõ số trên url 2020/11/23
//date Template date.php archive.php index.php if( is_year() ) { } else if( is_month() ) { } else if( is_day() ) { }
24. Attachment Template – image or file upload
//Attachment Template ==> image or file upload<br> {MIME-type}.php<br> attachment.php<br> single-attachment-{slug}.php<br> single.php<br> singular.php<br> index.php
25. Search
//search the_search_query(); get_search_form();
26. Custom template
/* * Template Name: tenTemplate */
27. Title, Logo
//title , logo function ju_setup_theme() { add_theme_support('title-tag'); add_theme_support('custom-logo'); } if( has_custom_logo ) { the_custom_logo(); } else { //logo default } get_bloginfo('param'); get_bloginfo('name');
28. Thêm quảng cáo
// hien thi quang cao //..==> plugin: AdSense Plugin WP QUADS
=> Xem thêm bài 32 course Complete WordPress Developer Course – Plugins & Themes
add_menu_page ($page_title, $menu_title, $capability, $menu_slug, $function = '', $icon_url = '', $position = null );
Trong đó:
$page_title
: Tiêu đề của trang nằm trên thẻ title$menu_title
: Tên của menu hiển thị ở danh sách menu$capability
: Tên quyền chứa những nhóm có thể thao tác với Menu, xem danh sách tại đây.$menu_slug
: Slug URL của trang$function
: Hàm sẽ được gọi khi bạn click vào menu, thông thường chúng ta tạo mã HTML trong hàm này.$icon_url
: Đường dẫn tới Icon của menu$position
: Vị trí hiển thị menu tính từ trên xuống.
Ví dụ:
function add_admin_menu() { add_menu_page ( 'Plugin Options', 'Plugin Options', 'manage_options', 'plugin-options', 'show_plugin_options', '', '2' ); } function show_plugin_options() { echo '<h1>Đây là trang Plugin Options</h1>'; } add_action('admin_menu', 'add_admin_menu');
Bây giờ bạn login vào Admin và xem trên dàn menu sẽ thấy xuất hiện thêm một menu mới.
add_submenu_page ($parent_slug, $page_title, $menu_title, $capability, $menu_slug, $function = '' );
Trong đó:
$parent_slug
: URL của menu cha.$page_title
: Tiêu đề của trang nằm trên thẻ title$menu_title
: Tên của menu hiển thị ở danh sách menu$capability
: Tên quyền chứa những nhóm có thể thao tác với Menu, xem danh sách tại đây.$menu_slug
: Slug URL của trang$function
: Hàm sẽ được gọi khi bạn click vào menu, thông thường chúng ta tạo mã HTML trong hàm này.
Ví dụ: Thêm 2 menu con gồm General Settings, Advance Settings vào menu Plugin Options mà ta đã tạo ở trên.
function add_admin_submenu() { add_submenu_page ('plugin-options', 'General Settings', 'General Settings', 'manage_options', 'plugin-options-general-settings', 'show_general_setting_page' ); add_submenu_page ('plugin-options', 'Advanced Settings', 'Advanced Settings', 'manage_options', 'plugin-options-advanced-settings', 'show_advanced_setting_page' ); } function show_general_setting_page() { echo '<h1>Đây là trang Plugin Options - General Settings</h1>'; } function show_advanced_setting_page() { echo '<h1>Đây là trang Plugin Options - Advanced Settings</h1>'; } add_action('admin_menu', 'add_admin_submenu');
Bây giờ bạn chạy lên sẽ thấy xuất hiện 2 menu con như hình sau:
remove_menu_page()
– dùng để xóa menu charemove_submenu_page()
– dùng để xóa menu con
Hàm này có một tham số truyền vào đó là slug của page. Ví dụ muốn xóa menu Appearance thì bạn sẽ truyền slug là themes.php
vào là được.
function remove_menu() { remove_menu_page('themes.php'); } add_action('admin_menu', 'remove_menu');
Hàm này có hai tham số truyền vào đó là slug của menu cha và slug của menu con cần xóa. Giả sử mình ẩn đi menu Add New trong menu Users.
function remove_submenu() { remove_submenu_page('users.php', 'user-new.php'); } add_action('admin_menu', 'remove_submenu');
Xem thêm: https://freetuts.net/tao-menu-trong-admin-wordpress-639.html
30. Query database example
https://gist.github.com/jeffward3283/f62b9869ac1bbae18855
//create, alter, drop table function createTableWorkTag() { global $wpdb; $wpdb->query( " DROP TABLE IF EXISTS " . $wpdb->prefix . "works_tag " ); $wpdb->query( " CREATE TABLE `" . $wpdb->prefix . "works_tag` ( `id` int(11) NOT NULL, `name` text NOT NULL, `status` bigint(20) NOT NULL, `count` int(11) NOT NULL ) ENGINE=InnoDB DEFAULT CHARSET=utf8; " ); $wpdb->query( " ALTER TABLE `" . $wpdb->prefix . "works_tag` CHANGE `id` `id` INT(11) NOT NULL AUTO_INCREMENT, add PRIMARY KEY (`id`); " ); } // insert public function postForm( $name, $status, $count ) { global $wpdb; $wpdb->insert( $wpdb->prefix . "works_tag", array( 'name' => $name, 'status' => $status, 'count' => $count, ), ); } // get data public function getDataWorksTag() { global $wpdb; return $wpdb->get_results( "SELECT * FROM " . $wpdb->prefix . "works_tag" ); }
My wordpress
1. Custom theme
https://github.com/tronghao/wordpress-my-custom
- Các custom template nằm trong folder templates như wordpress quy định.
- Thư mục src sẽ chứa code
- Phần đăng ký thư mục src vào theme sẽ ở file functions.php
include_once get_template_directory() . ‘/src/index.php’; - Phần style nằm ở src/public/css/custom.css toàn bộ css custom viết vào đây
- Phần js nằm ở src/public/js/custom.jstoàn bộ jscustom viết vào đây
- Đăng ký style và js ở file header.php
<link rel="stylesheet" href="<?php echo content_url(); ?>/themes/blankslate/src/public/css/custom.css"> <script src="<?php echo content_url(); ?>/themes/blankslate/src/public/js/custom.js">
2. Plugin xịn
2.1 Elementor
Plugin cực xịn tạo giao diện nhanh chống, dễ dàng, tạo các slider, nav,… chỉ cần kéo thả.
Kinh nghiệm:
- Tạo các template cần thiết, có shortcode rồi, gắn vào chỗ nào cần làm slider là đã có một slider nhanh chống dễ dàng.
2.2 WP Form
Việc cần làm là design form rồi gắn vào thôi, mọi chuyển xử lý, submit, view, delete, update đã có WP Form lo.
2.3 All-In-One-WP-Migration-With-Import-master
Chuyển dữ liệu từ chỗ này qua chỗ khác không còn khó nữa vì có plugin này lo rồi.
2.4 UX Builder
Theme flatsome cũng có tool UX Builder ngon tương tự elementor nhưng nó chỉ xài được cho theme này thôi.
3. Từng bước tạo nhanh CRUD Table Admin
Tham khảo: https://www.youtube.com/watch?v=HrFViVnGY68
Link generate code: http://projects.tareq.co/wp-generator/index.php
Lưu ý: tạo bảng trong cơ sở dữ liệu trước, sau đó làm các bước sau:
B1: Vào link lấy source plugin crud: https://github.com/tronghao/wordpress-my-custom
B2: Đổi tên plugin tương ứng trong file plugin.php của folder crud-plugin
B3: Vào link generate code phía trên, click nút generate ở step 1
Điền các thông tin như hình, thay đổi ở vùng bôi đỏ.
Copy các đoạn code tương ứng vào các file.
B4: Vào File plugin.php chỉnh thành tên Class Name phía trên vừa đặt (dòng 20)
B5: Vào link phía trên và nhấn generate ở step 2
Điền các thông tin như hình, thay đổi ở vùng bôi đỏ.
Copy các đoạn code tương ứng vào các file.
B6: Vào link phía trên và nhấn generate ở step 3
Điền các thông tin như hình, thay đổi ở vùng bôi đỏ.
Copy các đoạn code tương ứng vào các file.
Lưu ý:
- Form_Handler thêm prefix phía sau tên class và ở dòng cuối cùng để không bị trùng class (Form_Handler_Teacher)
- add function vào sau file đừng replace.
B7: Add code sau vào file class-crud-admin-menu.php case của function plugin_page
case 'delete': global $wpdb; $wpdb->delete( $wpdb->prefix. 'test2', array( 'ID' => $_GET['id'] ) ); $template = dirname( __FILE__ ) . '/views/crud-list.php'; break; // dòng 3 change thành tên table database
B8: Test plugin