Hướng dẫn thêm Opt-in Form vào head genesis framework

Nếu bạn đang xây dựng một trang web/blog bán hàng thì việc lấy thông tin khách hàng qua những opt-in form là điều cực kỳ quan trọng, hiện nay cũng có rất nhiều plugin hỗ trợ opt-in form nhưng nếu sử dụng quá nhiều plugin thì làm trang web ngày càng chậm lại.

Vậy bài viết này tôi muốn hướng dẫn bạn cách làm thế nào để thêm Opt-in Form vào head trong theme genesis, một cách đơn giản nhất, không làm ảnh hưởng nhiều đến tốc độ load trang..

Sử dụng plugin sẵn có eNews Extended để xác định vùng tiện ích tùy chỉnh và hiển thị widget bên dưới tiêu đề trang web.

Chúng ta sẽ sử dụng Flexbox để căn lề tiêu đề widget và các trường theo chiều ngang.

Ảnh chụp màn hình:

Máy tính để bàn:

Điện thoại di động:

Bài hướng dẫn được thực hiện với theme genesis sample nó có thể hoạt động với bất kì child theme nào.

Bước 1: Cài đặt và kích hoạt plugin Genesis eNews Extended.

Bước 2: Thêm đoạn mã sau vào cuối file functions.php trong thư mục child theme.

// Register Horizontal Opt-in widget area
genesis_register_widget_area(
 array(
 'id' => 'horizontal-opt-in',
 'name' => __( 'Horizontal Opt-in', 'my-theme-text-domain' ),
 'description' => __( 'This is the horizontal opt-in section.', 'my-theme-text-domain' ),
 )
);

// Display Horizontal Opt-in widget area below header
add_action( 'genesis_after_header', 'sk_horizontal_optin' );
function sk_horizontal_optin() {
 genesis_widget_area( 'horizontal-opt-in', array(
 'before' => '<div class="horizontal-opt-in widget-area"><div class="wrap">',
 'after' => '</div></div>',
 ) );
}

Bước 3: Thêm CSS cho nó.

Dán đoạn css sau vào file style.css

/* Horizontal Opt-in
 -------------------------------------------- */

.horizontal-opt-in {
 background-color: #50c5b5;
 color: #fff;
 padding: 20px;
 }

.horizontal-opt-in .enews {
 display: -webkit-box;
 display: -webkit-flex;
 display: -ms-flexbox;
 display: flex;
 -webkit-box-pack: center;
 -webkit-justify-content: center;
 -ms-flex-pack: center;
 justify-content: center;
 -webkit-box-align: center;
 -webkit-align-items: center;
 -ms-flex-align: center;
 align-items: center;
 max-width: 1000px;
 margin: 0 auto;
 }

.horizontal-opt-in .widget-title {
 margin-bottom: 0;
 font-size: 20px;
 margin-right: 20px;
 }

.horizontal-opt-in form {
 display: -webkit-box;
 display: -webkit-flex;
 display: -ms-flexbox;
 display: flex;
 -webkit-box-flex: 1;
 -webkit-flex: 1;
 -ms-flex: 1;
 flex: 1; /* grow this item to fill the available space */
 }

.horizontal-opt-in .enews-widget input {
 margin-bottom: 0;
 width: auto;
 margin-right: 10px;
 padding: 10px;
 line-height: 1;
 font-size: 15px;
 border: none;
 -webkit-box-flex: 3;
 -webkit-flex: 3;
 -ms-flex: 3;
 flex: 3;
 }

.horizontal-opt-in .enews-widget input[type="submit"] {
 margin-right: 0;
 padding: 10px 50px;
 background-color: transparent;
 border: 2px solid #fff;
 -webkit-box-flex: 1;
 -webkit-flex: 1;
 -ms-flex: 1;
 flex: 1;
 }

.horizontal-opt-in .enews-widget input[type="submit"]:hover {
 background-color: #fff;
 color: #333;
 }

@media only screen and (max-width: 860px) {

.horizontal-opt-in .enews {
 -webkit-box-orient: vertical;
 -webkit-box-direction: normal;
 -webkit-flex-direction: column;
 -ms-flex-direction: column;
 flex-direction: column;
 }

.horizontal-opt-in .widget-title {
 margin-bottom: 20px;
 }

.horizontal-opt-in form {
 width: 100%;
 }

}

@media only screen and (max-width: 620px) {

.horizontal-opt-in form {
 -webkit-box-orient: vertical;
 -webkit-box-direction: normal;
 -webkit-flex-direction: column;
 -ms-flex-direction: column;
 flex-direction: column;
 width: 100%;
 }

.horizontal-opt-in .enews-widget input {
 margin-right: 0;
 margin-bottom: 20px;
 }

.horizontal-opt-in .enews-widget input:last-child {
 margin-bottom: 10px;
 }

}

Bước 4: Cài đặt opt-in form.

Vào Appearance > Widgets

kéo tiện ích Genesis – eNews Extended vào vùng tùy chọn Opt-in widget và cấu hình nó.

Nếu bạn đang sử dụng MailChimp, bạn sẽ cần phải nhập URL từ mã nhúng khuôn mẫu vào các trường Tác vụ Mẫu.

Có bài hướng dẫn chi tiết: Hướng dẫn tạo form đăng ký Genesis eNews Extended – Genesis Framework – Vũ Minh Chiến