Hướng dẫn cách hiển thị danh sách Contact Form 7 trong trang liên hệ

Bài này tôi thao tác trên theme có tên là “justread”, bạn nên chú ý để thay đổi đúng với tên theme của website của mình nhé.

Mục đích bài hướng dẫn này sẽ giúp bạn tạo một trang liên hệ từ contact from 7 mà không cần nhúng shortcode

1. Cài đặt plugin Contact form 7

Để tạo trang liên hệ từ danh sách form liên hệ, bạn cần phải cài đặt và kích hoạt plugin Contact form 7 trước. Có nhiều cách cài đặt plugin: một là cài trực tiếp từ kho plugin wordpress trong giao diện quản trị, hai là tải về rồi tải vào thư mục wp-content\plugins. Trong bài này tôi sẽ cài plugin trực tiếp bằng admin wordpress.

Sau khi cài đặt và kích hoạt thành công plugin, Contact from 7 sẽ mặc định tạo cho ta một form mẫu, bạn có thể tạo thêm form tùy theo nhu cầu sử dụng của website wordpress.

2. Tạo trang liên hệ từ page template

Để tạo trang liên hệ từ page template, trước tiên bạn hãy tạo cho tôi một file có tên bất kì, ở đây tôi sẽ đặt tên là: page-contact.php trong thư mục: wp-content/themes/justread/templates/page-contact.php ( nếu chưa có thư mục templates thì tạo nhé ).

Nội dung file page-contact.php như sau:

<?php
/* Template Name: Liên hệ */
get_header(); ?>

<div id="page-tpl" class="page-contact">
    <div class="container-content">
        <?php
            while ( have_posts() ) : the_post();
                the_content();
                
                $cf7_id = get_post_meta(get_the_ID(), 'wpshare247_cf7_id', true);
                if($cf7_id){
                    echo  do_shortcode( '[contact-form-7 id="'.$cf7_id.'" title="Form liên hệ 1"]' );
                }
            endwhile; // End of the loop.
        ?>
    </div>
</div>

<?php get_footer();

Bạn cần chú ý đoạn /* Template Name: Liên hệ */ khi cần khai báo một page template trong wordrepss.

3. Thêm Metabox vào trong page template

Cụ thể chúng ta cần add_meta_boxes vào trong trang liên hệ được tạo từ page template như trên. Đoạn code này bạn cần nhúng vào file: functions.php trong thư mục gốc của theme.

//Thêm 1 metabox vào template
add_action( 'add_meta_boxes', 'wpshare247_add_metabox_contact_page' );
function wpshare247_add_metabox_contact_page(){
    $file_template_php = basename( get_post_meta(get_the_ID() , '_wp_page_template', true) );
    if($file_template_php == 'page-contact.php'){
        $id = uniqid( "wpshare247_" );
        $title = __( 'Chọn form liên hệ', '' );
        $arr_post_type = array('page'); // array
        $context = 'normal'; // advanced ; side ; normal
        $priority = 'default'; // low ; high; default
        $callback_args =  false;
        add_meta_box( $id, $title, 'wpshare247_create_metabox_html', $arr_post_type, $context, $priority, $callback_args);
    }
}

function wpshare247_create_metabox_html( $post, $callback_args ){
    $cf7_id = get_post_meta($post->ID, 'wpshare247_cf7_id', true);
    ?>
    <p>
        <label for="wpshare247_cf7_id" class="post-attributes-label">Danh sách form</label>
        <select name="wpshare247_cf7_id" id="wpshare247_cf7_id" class="wpshare247-mtb-select">
        	<option>--Chọn 1 form--</option>
            <?php 
            $args = array( 'post_type' => 'wpcf7_contact_form', 'order' => 'DESC','posts_per_page' => '-1');
            $posts_array = get_posts( $args );
            if($posts_array){
                foreach ( $posts_array as $ct_form_it ) {
                ?>
                    <option <?php if($cf7_id == $ct_form_it->ID){ ?>selected<?php } ?> value="<?= $ct_form_it->ID ?>"><?= $ct_form_it->post_title ?></option>
                <?php
                }
            }
            ?>
        </select>
    </p>
    <?php
}

//Tiến hành lưu dữ liệu của các trường khai báo trong metabox
add_action( 'save_post_page', 'wpshare247_add_metabox_save', 10, 2 );
function wpshare247_add_metabox_save($post_id, $post){
    $file_template_php = basename( get_post_meta( $post_id , '_wp_page_template', true) );
    if($file_template_php == 'page-contact.php' && isset($_POST['wpshare247_cf7_id'])){
        update_post_meta( $post_id, 'wpshare247_cf7_id', $_POST['wpshare247_cf7_id'] );
    }
}

4. Cuối cùng là tạo trang liên hệ

Tại bước này khi tạo trang liên hệ bạn nhớ chọn giao diện là “Liên hệ” mà ta đã khai báo ở bước 2.

Sau khi “Cập nhật” bạn sẽ thấy danh sách các contact form 7 xuất hiện trong Metabox mà ta đã tạo ra ở bước 3 như sau:

Như vậy là chúng ta vừa tạo thành công trang liên hệ có thể chọn trước tiếp Contact form 7 trong danh sách mà không cần phái nhúng shortcode kiểu như [contact-form-7 id="53" title="Form liên hệ 1"]

Và trang liên hệ được tạo theo kiểu này sẽ linh động hơn trong việc quản lý nội dung đúng không.