Biểu mẫu Jetpack Newsletter cho theme Paradise

Thiết kế biểu mẫu đăng ký Jetpack Newsletter (Jetpack Subscriptions) cho theme Paradise.

Theo mặc định, theme Paradise sẽ sử dụng plugin Genesis eNews Extended để tạo biểu mẫu đăng ký nhận thông báo bài viết mới qua email. Plugin này hỗ trợ rất nhiều dịch vụ email marketing khác nhau, chẳng hạn như MailChimp, Aweber, FeedBlitz, Mad Mimi, GetResponse… Trước đây, nó hỗ trợ cả FeedBurner nữa, nhưng dịch vụ này sau đó đã bị Google khai tử. Giải pháp miễn phí không giới hạn, không quảng cáo, hiện nay cũng chỉ còn có Jetpack Newsletter. Tuy nhiên, nó sử dụng biểu mẫu riêng chứ không tích hợp được vào trong biểu mẫu của Genesis eNews Extended. Nếu bạn đang muốn tùy biến giao diện biểu mẫu đăng ký của Jetpack Newsletter trông giống biểu mẫu mặc định của theme Paradise thì bài viết này là dành cho bạn.

Tham khảo thêm:

• Các tính năng của theme Paradise trong Customizer
• Tạo khung đăng ký nhận bài viết qua email

Những việc cần chuẩn bị

• Cài đặt sẵn plugin Jetpack và bật tính năng Newsletter lên. Cấu hình widget của Jetpack Newsletter theo ý của bạn.
• Xóa bỏ plugin Genesis eNews Extended nếu nó đã được cài đặt trước đó.
• Cập nhật theme Paradise lên phiên bản mới nhất để đảm bảo tương thích với code CSS sẽ sử dụng ở phần sau.

Tùy biến biểu mẫu Jetpack Newsletter cho theme Paradise

1. Copy và paste đoạn code CSS sau vào Giao diện => Tùy chỉnh => CSS bổ sung:

/* Jetpack Subscriptions */
.sidebar .widget_blog_subscription.jetpack_subscription_widget {
    background-color: var(--first-color);
    padding: 40px;
    color: var(--fifth-color);
    box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
}
.sidebar .widget_blog_subscription.jetpack_subscription_widget .widget-title {
    background: none;
    padding: 10px;
    box-shadow: none;
    margin-bottom: 15px;
}
.sidebar .widget_blog_subscription.jetpack_subscription_widget #subscribe-text p {
    margin-bottom: 20px;
}
.sidebar .widget_blog_subscription.jetpack_subscription_widget .wp-block-jetpack-subscriptions__container button[type="submit"] {
    background-color: var(--second-color);
    color: var(--fifth-color);
    width: 100%;
}
.sidebar .widget_blog_subscription.jetpack_subscription_widget .wp-block-jetpack-subscriptions__container button[type="submit"]:hover,
.sidebar .widget_blog_subscription.jetpack_subscription_widget .wp-block-jetpack-subscriptions__container button[type="submit"]:focus {
    background-color: var(--fifth-color);
    color: var(--text-color);
}
#subscribe-blog-label {
    display: inline;
}

2. Copy và chèn đoạn code PHP sau đây thông qua plugin Code Snippets (không nên chèn vào file functions.php để tránh nó bị xóa mất khi cập nhật theme). Code này có tác dụng ngăn không cho Jetpack Newsletter tải CSS mặc định của nó:

//* Disable Jetpack Subscriptions CSS
function wpcb_custom_dequeue_jetpack_css() {
    if ( class_exists( 'Jetpack' ) ) {
        wp_dequeue_style( 'jetpack-subscriptions' );
        wp_deregister_style( 'jetpack-subscriptions' );
    }
}
add_action( 'wp_enqueue_scripts', 'wpcb_custom_dequeue_jetpack_css', 99 );

Hoặc dùng code sau đây nếu code bên trên không có tác dụng (trên các phiên bản Jetpack mới):

//* Disable Jetpack Subscriptions CSS
function wpcb_remove_jetpack_subscriptions_styles() {
    wp_dequeue_style( 'jetpack-subscriptions' );
    wp_deregister_style( 'jetpack-subscriptions' );
}
add_action( 'wp_enqueue_scripts', 'wpcb_remove_jetpack_subscriptions_styles', 1000 );
add_action( 'wp_print_styles', 'wpcb_remove_jetpack_subscriptions_styles', 1000 );

Đối với các phiên bản Jetpack từ 15.4 trở đi, hãy thử dùng code này:

//* Disable Jetpack Subscriptions CSS
add_filter( 'style_loader_src', function( $src, $handle ) {
    if ( 'jetpack-subscriptions' === $handle ) {
        return false;
    }
    return $src;
}, 999, 2 );

3. Lưu lại mọi thứ, xóa cache website (nếu có) và kiểm tra kết quả. Nó sẽ trông tương tự như biểu mẫu mà WP Căn bản đang sử dụng trên sidebar. Thật đơn giản phải không nào? Chúc các bạn thành công!

Nếu bạn thích bài viết này, hãy theo dõi blog của tôi để thường xuyên cập nhật những bài viết hay nhất, mới nhất nhé. Cảm ơn rất nhiều. :)