Tạo widget thông tin liên hệ WordPress

Tạo Widget Thông Tin Liên Hệ WordPress: Hướng Dẫn Chi Tiết

Widget thông tin liên hệ là một phần quan trọng của bất kỳ trang web WordPress nào, đặc biệt là đối với các doanh nghiệp và tổ chức. Nó cung cấp cho khách truy cập một cách dễ dàng và nhanh chóng để tìm thấy thông tin liên hệ cần thiết, chẳng hạn như địa chỉ, số điện thoại, địa chỉ email và các liên kết mạng xã hội. Trong bài viết này, chúng ta sẽ khám phá các phương pháp khác nhau để tạo widget thông tin liên hệ WordPress, từ việc sử dụng các plugin chuyên dụng đến tùy chỉnh mã nguồn.

Tại Sao Widget Thông Tin Liên Hệ Lại Quan Trọng?

Trước khi đi sâu vào các phương pháp tạo widget, hãy xem xét tại sao nó lại quan trọng:

• Tăng Cường Uy Tín: Hiển thị thông tin liên hệ rõ ràng giúp xây dựng lòng tin với khách truy cập.
• Cải Thiện Trải Nghiệm Người Dùng: Giúp khách truy cập dễ dàng liên hệ với bạn, cải thiện trải nghiệm tổng thể trên trang web.
• Thúc Đẩy Tương Tác: Cung cấp các kênh liên lạc khác nhau khuyến khích khách truy cập tương tác với bạn.
• Hỗ Trợ SEO Địa Phương: Đối với các doanh nghiệp địa phương, thông tin liên hệ nhất quán trên trang web có thể cải thiện thứ hạng SEO địa phương.

Sử Dụng Plugin để Tạo Widget Thông Tin Liên Hệ

Cách dễ nhất và phổ biến nhất để tạo widget thông tin liên hệ là sử dụng một plugin WordPress. Có rất nhiều plugin miễn phí và trả phí có sẵn, mỗi plugin cung cấp các tính năng và tùy chọn tùy chỉnh khác nhau. Dưới đây là một số plugin phổ biến:

• Contact Form 7: Mặc dù chủ yếu được biết đến với việc tạo biểu mẫu liên hệ, Contact Form 7 cũng có thể được sử dụng để hiển thị thông tin liên hệ tĩnh trong một widget.
• Simple Custom CSS and JS: Cho phép bạn thêm CSS và JavaScript tùy chỉnh vào trang web của mình, điều này có thể được sử dụng để tạo kiểu cho widget thông tin liên hệ.
• Widget Options: Cung cấp các tùy chọn hiển thị có điều kiện cho widget, cho phép bạn hiển thị widget chỉ trên các trang hoặc bài đăng cụ thể.

Hướng Dẫn Sử Dụng Plugin Contact Form 7 để Tạo Widget

1. Cài đặt và Kích hoạt: Cài đặt và kích hoạt plugin Contact Form 7 từ kho plugin WordPress.
2. Tạo Biểu Mẫu Đơn Giản: Tạo một biểu mẫu đơn giản chỉ chứa các trường thông tin liên hệ như địa chỉ, số điện thoại và email. Không cần trường nhập liệu.
3. Sao Chép Shortcode: Sao chép shortcode của biểu mẫu bạn vừa tạo.
4. Thêm Widget Text: Vào Appearance > Widgets và kéo widget “Text” vào sidebar bạn muốn hiển thị thông tin.
5. Dán Shortcode: Dán shortcode vào widget Text.
6. Thêm Thông Tin Liên Hệ: Trong widget Text, thêm thông tin liên hệ của bạn phía trên hoặc dưới shortcode.
7. Lưu Thay Đổi: Lưu các thay đổi vào widget.

Tùy Chỉnh Widget Thông Tin Liên Hệ với Mã Nguồn

Nếu bạn muốn kiểm soát hoàn toàn giao diện và chức năng của widget thông tin liên hệ, bạn có thể tạo một widget tùy chỉnh bằng cách sử dụng mã nguồn. Điều này đòi hỏi kiến thức về PHP, HTML và CSS. Dưới đây là hướng dẫn từng bước:

Bước 1: Tạo Tệp Widget Tùy Chỉnh

Tạo một tệp PHP mới trong thư mục plugin của bạn (ví dụ: wp-content/plugins/my-contact-info-widget/my-contact-info-widget.php). Đảm bảo rằng plugin của bạn được kích hoạt trong WordPress.

Bước 2: Thêm Mã Widget Cơ Bản

Thêm mã PHP sau vào tệp widget:

“`php
__( ‘Displays contact information.’, ‘my-contact-info-widget’ ), )
);
}

public function widget( $args, $instance ) {
$title = apply_filters( ‘widget_title’, $instance[‘title’] );
$address = $instance[‘address’];
$phone = $instance[‘phone’];
$email = $instance[’email’];

echo $args[‘before_widget’];
if ( ! empty( $title ) )
echo $args[‘before_title’] . $title . $args[‘after_title’];

echo ‘

‘;

echo $args[‘after_widget’];
}

public function form( $instance ) {
$title = ! empty( $instance[‘title’] ) ? $instance[‘title’] : __( ‘Contact Us’, ‘my-contact-info-widget’ );
$address = ! empty( $instance[‘address’] ) ? $instance[‘address’] : ”;
$phone = ! empty( $instance[‘phone’] ) ? $instance[‘phone’] : ”;
$email = ! empty( $instance[’email’] ) ? $instance[’email’] : ”;
?>

<label for="get_field_id( ‘title’ ); ?>”>
<input class="widefat" id="get_field_id( ‘title’ ); ?>” name=”get_field_name( ‘title’ ); ?>” type=”text” value=”” />

<label for="get_field_id( ‘address’ ); ?>”>
<input class="widefat" id="get_field_id( ‘address’ ); ?>” name=”get_field_name( ‘address’ ); ?>” type=”text” value=”” />

<label for="get_field_id( ‘phone’ ); ?>”>
<input class="widefat" id="get_field_id( ‘phone’ ); ?>” name=”get_field_name( ‘phone’ ); ?>” type=”text” value=”” />

<label for="get_field_id( ’email’ ); ?>”>
<input class="widefat" id="get_field_id( ’email’ ); ?>” name=”get_field_name( ’email’ ); ?>” type=”text” value=”” />

<?php
}

public function update( $new_instance, $old_instance ) {
$instance = array();
$instance['title'] = ( ! empty( $new_instance['title'] ) ) ? strip_tags( $new_instance['title'] ) : '';
$instance['address'] = ( ! empty( $new_instance['address'] ) ) ? strip_tags( $new_instance['address'] ) : '';
$instance['phone'] = ( ! empty( $new_instance['phone'] ) ) ? strip_tags( $new_instance['phone'] ) : '';
$instance['email'] = ( ! empty( $new_instance['email'] ) ) ? strip_tags( $new_instance['email'] ) : '';
return $instance;
}
}

function register_my_contact_info_widget() {
register_widget( 'My_Contact_Info_Widget' );
}
add_action( 'widgets_init', 'register_my_contact_info_widget' );
“`

Bước 3: Giải Thích Mã Nguồn

• Plugin Header: Phần đầu của tệp PHP chứa thông tin về plugin của bạn, bao gồm tên, mô tả, phiên bản và tác giả.
• Class Widget: Lớp My_Contact_Info_Widget kế thừa từ lớp WP_Widget, cung cấp các phương thức cần thiết để tạo widget.
• Phương Thức __construct(): Hàm khởi tạo thiết lập ID, tên và mô tả của widget.
• Phương Thức widget(): Phương thức này tạo đầu ra của widget trên giao diện người dùng. Nó lấy dữ liệu từ các trường đã lưu ($instance) và hiển thị thông tin liên hệ.
• Phương Thức form(): Phương thức này tạo biểu mẫu trong khu vực quản trị WordPress, cho phép người dùng nhập thông tin liên hệ.
• Phương Thức update(): Phương thức này xử lý dữ liệu được gửi từ biểu mẫu và lưu nó vào cơ sở dữ liệu.
• Hàm register_my_contact_info_widget(): Hàm này đăng ký widget với WordPress.
• add_action( ‘widgets_init’, ‘register_my_contact_info_widget’ ): Dòng này đảm bảo rằng widget được đăng ký khi khu vực widget được khởi tạo.

Bước 4: Kích Hoạt Plugin và Sử Dụng Widget

1. Kích Hoạt Plugin: Trong khu vực quản trị WordPress, vào Plugins và kích hoạt plugin “My Contact Info Widget”.
2. Thêm Widget: Vào Appearance > Widgets và kéo widget “My Contact Info” vào sidebar bạn muốn hiển thị thông tin.
3. Nhập Thông Tin Liên Hệ: Nhập thông tin liên hệ của bạn vào các trường trong biểu mẫu widget.
4. Lưu Thay Đổi: Lưu các thay đổi vào widget.

Bước 5: Thêm CSS Tùy Chỉnh

Để tạo kiểu cho widget, bạn có thể thêm CSS tùy chỉnh vào tệp style.css của chủ đề hoặc sử dụng một plugin CSS tùy chỉnh. Ví dụ:

“`css
.contact-info {
padding: 10px;
border: 1px solid #ddd;
}

.contact-info p {
margin-bottom: 5px;
}

.contact-info i {
margin-right: 5px;
}
“`

**Lưu ý:** Đảm bảo thay thế các class và style này cho phù hợp với thiết kế trang web của bạn.

Các Lựa Chọn Nâng Cao

Ngoài các phương pháp được mô tả ở trên, còn có một số lựa chọn nâng cao để tạo widget thông tin liên hệ:

• Sử Dụng API Google Maps: Nhúng bản đồ Google Maps vào widget để hiển thị vị trí của bạn. Yêu cầu key API.
• Tích Hợp Mạng Xã Hội: Thêm các biểu tượng mạng xã hội có liên kết đến các trang profile của bạn.
• Tạo Widget Nâng Cao Sử Dụng ACF (Advanced Custom Fields): Plugin ACF cho phép bạn tạo các trường tùy chỉnh phức tạp hơn trong khu vực quản trị widget.

Kết Luận

Việc tạo widget thông tin liên hệ WordPress là một cách đơn giản nhưng hiệu quả để cải thiện trải nghiệm người dùng và thúc đẩy tương tác trên trang web của bạn. Cho dù bạn chọn sử dụng plugin hoặc tùy chỉnh mã nguồn, hãy đảm bảo rằng thông tin liên hệ của bạn luôn được cập nhật và dễ dàng tìm thấy. Bằng cách làm theo các hướng dẫn trong bài viết này, bạn có thể tạo một widget thông tin liên hệ chuyên nghiệp và hấp dẫn để giúp khách truy cập dễ dàng liên hệ với bạn.