Chào các bạn, mấy ngày vừa qua mình bận giải quyết một số project cho khách hàng, nên nay mới có thời gian cặm cụi vô đây được. Nhưng cũng nhờ công làm mấy cái project đó mà mình biết thêm một chút về WordPress. Đó là sử dụng Meta Box trong việc hỗ trợ thêm tính năng cho bài viết.
Và bài viết ngày hôm nay sẽ giúp các bạn sử dụng meta box để xây dựng Plugin SEO đơn giản cho blog wordpress của bạn giống như một số plugin nổi tiếng khác như: All in one seo pack, Yoast plugin SEO….
Tạo Meta box
Đầu tiên, chúng ta sẽ phải quyết định nơi hộp Meta box sẽ xuất hiện trong khu vực bài viết của mình. Và trong plugin của chúng ta, meta box sẽ được thêm vào post và page. Chúng ta viết một hàm, sau đó sẽ móc nối (hook) tới một sự kiện add_meta_boxes
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 | function tes_mb_create() { /** * @array $screens Write screen on which to show the meta box * @values post, page, dashboard, link, attachment, custom_post_type */ $screens = array( 'post', 'page' ); foreach ( $screens as $screen ) { add_meta_box( 'tes-meta', 'Search Engine Listing', 'tes_mb_function', $screen, 'normal', 'high' ); } } add_action( 'add_meta_boxes', 'tes_mb_create' ); |
Trong đó
tes-meta: là id của meta boxSearch Engine Listing: là tên của meta box-
test_mb_function: là hàm chúng ta sẽ gọi ra để hiển thị để người dùng nhập dữ liệu $screen: là biến chúng ta lấy bên trên, quy định nơi meta box sẽ xuất hiệnnormal: Vị trí mà meta box sẽ xuất hiện, nói thế nào nhỉ, nó sẽ xuất hiện bên dưới khu vực viết bài, hay bên side bar bên phải, ở đây normal là ở bên dưới bài viết nhé.
Viết function
Thực chất việc hoạt động của meta box là lấy theo custom field như bình thường thôi, có chăng là gom lại quản lý cho dễ 😀
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 | function tes_mb_function($post) { / /retrieve the metadata values if they exist $tes_meta_title = get_post_meta( $post->ID, '_tes_meta_title', true ); $tes_meta_description = get_post_meta( $post->ID, '_tes_meta_description', true ); // Add an nonce field so we can check for it later when validating wp_nonce_field( 'tes_inner_custom_box', 'tes_inner_custom_box_nonce' ); echo '<div style="margin: 10px 100px; text-align: center"> <table> <tr> <td><strong>Title Tag:</strong></td><td> <input style="padding: 6px 4px; width: 300px" type="text" name="tes_meta_title" value="' . esc_attr($tes_meta_title) . '" /> </td> </tr> <tr> <td><strong>Meta Description:</strong></td><td> <textarea rows="3" cols="50" name="tes_meta_description">' . esc_attr($tes_meta_description) . '</textarea></td> </tr> </table> </div>'; } |
Kết quả chúng ta sẽ được như này.
Tùy vào khả năng tùy biến của bạn, cũng như nhu cầu sử dụng meta box bạn có thể thêm nhiều trường khác tương tự.
Lưu dữ liệu
Tiếp theo chúng ta viết hàm để lưu lại dữ liệu vào database
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 | function tes_mb_save_data($post_id) { /* * We need to verify this came from the our screen and with proper authorization, * because save_post can be triggered at other times. */ // Check if our nonce is set. if ( ! isset( $_POST['tes_inner_custom_box_nonce'] ) ) return $post_id; $nonce = $_POST['tes_inner_custom_box_nonce']; // Verify that the nonce is valid. if ( ! wp_verify_nonce( $nonce, 'tes_inner_custom_box' ) ) return $post_id; // If this is an autosave, our form has not been submitted, so we don't want to do anything. if ( defined( 'DOING_AUTOSAVE') && DOING_AUTOSAVE ) return $post_id; // Check the user's permissions. if ( 'page' == $_POST['post_type'] ) { if ( ! current_user_can( 'edit_page', $post_id ) ) return $post_id; } else { if ( ! current_user_can( 'edit_post', $post_id ) ) return $post_id; } /* OK, its safe for us to save the data now. */ // If old entries exist, retrieve them $old_title = get_post_meta( $post_id, '_tes_meta_title', true ); $old_description = get_post_meta( $post_id, '_tes_meta_description', true ); // Sanitize user input. $title = sanitize_text_field( $_POST['tes_meta_title'] ); $description = sanitize_text_field( $_POST['tes_meta_description'] ); // Update the meta field in the database. update_post_meta( $post_id, '_tes_meta_title', $title, $old_title ); update_post_meta( $post_id, '_tes_meta_description', $description, $old_description ); } add_action( 'save_post', 'tes_mb_save_data' ); |
Hiển thị ra ngoài site
Chúng ta sẽ đăng ký hàm vào sự kiện wp_head của wordpress để hiển thị ra ngoài site
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 | function tes_mb_display() { global $post; // retrieve the metadata values if they exist $tes_meta_title = get_post_meta( $post->ID, '_tes_meta_title', true ); $tes_meta_description = get_post_meta( $post->ID, '_tes_meta_description', true ); echo ' <!-- Tutsplus Easy SEO (author: http://tech4sky.com) --> <meta property="og:title" content="' . $tes_meta_title . '" /> <meta property="og:description" content="' . $tes_meta_description . '" /> <meta name="description" content="' . $tes_meta_description . '" /> <!-- /Tutsplus Easy SEO --> '; } add_action( 'wp_head', 'tes_mb_display' ); |
Kết quả khi view source của site lên chúng ta sẽ được như này.
You must log in to post a comment.