Diễn Đàn SEO - vnseo.edu.vn - Một trong những tính năng cốt lõi được cung cấp bởi WordPress trong việc mở rộng chức năng của nó là API Meta Box của nó. Meta Boxes cho phép bạn dễ dàng thêm dữ liệu bổ sung nội dung của bạn. Ví dụ, Post Tags meta box cho phép bạn thiết lập thẻ cho bài viết của bạn. Trong bài viết này, Blog Lập Trình Web Vũ Công Tịnh sẽ cùng các bạn viết Plugin Wordpress cơ bản cho thêm Meta Description và Title cho các trang trên website sử dụng WordPress. Để làm được điều này, chúng ta cũng sẽ tìm hiểu làm thế nào để tạo ra một hộp meta tùy chỉnh(Custom Meta Boxes), làm thế nào để lưu dữ liệu đó cho từng trang, và làm thế nào để lấy dữ liệu và lưu lại. Giờ chúng ta hãy bắt đầu! Tạo Meta Box Đầu tiên chúng ta cần phải xác định được sẽ hiển thị Box này ở đâu. Trong Plugin của chúng ta Meta Box sẽ được thêm vào cho các bài viết( Posts) và các trang( Pages). Để làm được điều này chúng ta cần tạo 1 function chứa biến mà lưu trữ 1 mảng nơi lưu trữ Box đó và sử dụng vòng lặp Foreach và thêm Box sử dụng hàm add_meta_box. Thêm nội dung vào file functions.php: Mã: 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', 'SEO Wordpress Plugin by VuCongTinh.Com', 'tes_mb_function', $screen, 'normal', 'high' ); } } add_action( 'add_meta_boxes', 'tes_mb_create' ); Như vậy chúng ta đã tạo được 1 Meta Box cho riêng mình. Cuối cùng, function sẽ được nối với hành động add_meta-box: Mã: function tes_mb_create() { add_meta_box( 'tes-meta', 'SEO Wordpress Plugin by VuCongTinh.Com', 'tes_mb_function', 'post', 'normal', 'high' ); add_meta_box( 'tes-meta', 'SEO Wordpress Plugin by VuCongTinh.Com', 'tes_mb_function', 'page', 'normal', 'high' ); } add_action('add_meta_boxes', 'tes_mb_create'); Thêm trường dữ liệu cho Meta Box Sau khi đã tạo được Meta Box công việc chúng ta cần làm tiếp theo là cho Wordpress biết nó cần hiển thị Box vừa tạo ở đâu. Ở bài viết này chúng ta chỉ thêm 2 trường là: Title và Meta Description, các bạn muốn thêm các trường khác có thể viết tương tự. Để thêm trường cho Meta Box bạn thêm mã bên dưới vào wp-admin/includes/template.php Mã: function tes_mb_function($post) { / /Lấy các dữ liệu Meta Data nếu chúng đã tồn tại $tes_meta_title = get_post_meta( $post->ID, '_tes_meta_title', true ); $tes_meta_description = get_post_meta( $post->ID, '_tes_meta_description', true ); // Thêm 1 trường nonce để chúng ta có thể kiểm tra nó sau khi xác thực dữ liệu 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: 430px" 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>'; } Giải thích: Mã: $tes_meta_title = get_post_meta( $post->ID, '_tes_meta_title', true ); $tes_meta_description = get_post_meta( $post->ID, '_tes_meta_description', true ); Đoạn mã trên có chức năng kiểm tra nếu các trường này tồn tại thì sẽ lấy dữ liệu ra để hiển thị vào Meta Box. wp_nonce_field( 'tes_inner_custom_box', 'tes_inner_custom_box_nonce' );Dòng mã trên được thêm để chúng ta có thể kiểm tra nó sau này, trong quá trình xác minh trước khi đưa dữ liệu vào CSDL. Đoạn còn lại là HTML để hiển thị nội dung của Box thôi Lưu dữ liệu Meta Box Meta Box của chúng ta hiện tại vẫn chưa hoàn thành, công việc tiếp theo cần làm là lưu dữ liệu meta box. Để lưu dữ liệu chúng ta sẽ tạo 1 hàm lưu có nội dung như bên dưới sau đó thêm vào cuối file functions.php: Mã: function tes_mb_save_data($post_id) {[/I] [I][/I] [I] /*[/I] [I] * We need to verify this came from the our screen and with proper authorization,[/I] [I] * because save_post can be triggered at other times.[/I] [I] */[/I] [I][/I] [I] // Check if our nonce is set.[/I] [I] if ( ! isset( $_POST['tes_inner_custom_box_nonce'] ) )[/I] [I] return $post_id;[/I] [I][/I] [I] $nonce = $_POST['tes_inner_custom_box_nonce'];[/I] [I][/I] [I] // Verify that the nonce is valid.[/I] [I] if ( ! wp_verify_nonce( $nonce, 'tes_inner_custom_box' ) )[/I] [I] return $post_id;[/I] [I][/I] [I] // If this is an autosave, our form has not been submitted, so we don't want to do anything.[/I] [I] if ( defined( 'DOING_AUTOSAVE') && DOING_AUTOSAVE )[/I] [I] return $post_id;[/I] [I][/I] [I] // Check the user's permissions.[/I] [I] if ( 'page' == $_POST['post_type'] ) {[/I] [I][/I] [I] if ( ! current_user_can( 'edit_page', $post_id ) )[/I] [I] return $post_id;[/I] [I] } else {[/I] [I][/I] [I] if ( ! current_user_can( 'edit_post', $post_id ) )[/I] [I] return $post_id;[/I] [I] }[/I] [I][/I] [I] /* OK, its safe for us to save the data now. */[/I] [I][/I] [I] // If old entries exist, retrieve them[/I] [I] $old_title = get_post_meta( $post_id, '_tes_meta_title', true );[/I] [I] $old_description = get_post_meta( $post_id, '_tes_meta_description', true );[/I] [I][/I] [I] // Sanitize user input.[/I] [I] $title = sanitize_text_field( $_POST['tes_meta_title'] );[/I] [I] $description = sanitize_text_field( $_POST['tes_meta_description'] );[/I] [I][/I] [I] // Update the meta field in the database.[/I] [I] update_post_meta( $post_id, '_tes_meta_title', $title, $old_title );[/I] [I] update_post_meta( $post_id, '_tes_meta_description', $description, $old_description );[/I] [I]}[/I] [I]add_action( 'save_post', 'tes_mb_save_data' ); Sử dụng Meta BoxMọi công việc thêm Meta Box đã hoàn tất vậy làm thế nào để sử dụng nó? Công việc cuối cùng của chúng ta là chènTitle Tag và Meta Description vào phần <head> của website. Để làm việc này chúng ta sẽ tạo ra 1 hàm mới và thêm vào file functions.php: Mã: 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 '<!-- SEO Wordpress Plugin by VuCongTinh --> <title>'.$tes_meta_title.'</title> <meta property="og:title" content="' . $tes_meta_title . '" /> <meta property="og:description" content="' . $tes_meta_description . '" /> <meta name="description" content="' . $tes_meta_description . '" /> <!-- / SEO Wordpress Plugin by VuCongTinh --> '; } add_action( 'wp_head', 'tes_mb_display' ); Đoạn mã trên có chức năng Insert dữ liệu của Meta Box vào phần <head> của trang web. Cuối cùng là thành quả của chúng ta: Bên trên là code và demo Tạo Plugin SEO Wordpress mình đã test trên website của Công ty SEO OSVN và đang chạy rất ngon, bạn nào có ý tưởng thêm trường dữ liệu nào đó tốt hơn cho SEO có thể làm theo cách tương tự. Chúc các bạn có 1 ngày học tập, làm việc hiệu quả! Và đừng quên Like+ Share nhé!
