Tạo trang landing page trong WordPress sử dụng custom fields – Top1Dev

Hầu như website bán hàng nào cũng cần landing page để giới thiệu về sản phẩm hoặc dịch vụ. Đây chính là nơi để người dùng tìm thấy những thông tin quan trọng nhất về công ty cũng như về sản phẩm mà bạn đang bán. Bạn chắc chắn sẽ cần phải giới thiệu đến những lợi ích mà sản phẩm dịch vụ mang lại để khuyến khích người dùng đăng ký hoặc mua chúng. Nếu bạn có nhiều sản phẩm hoặc đang chạy nhiều chiến dịch khác nhau, bạn có thể sẽ cần tạo nhiều landing page khác nhau, mỗi cái dùng cho một sản phẩm hay một chiến dịch riêng.

Việc tạo nhiều trang landing page như vậy sẽ làm bạn mất khá nhiều thời gian từ việc thiết kế cho tới code thành trang hoàn thiện. Câu hỏi mà các developer sẽ thường xuyên tự hỏi khi làm các landing page như vậy đó là làm thế nào để biến các bản thiết kế trên giấy kia thành một trang landing page hoàn chỉnh trong WordPress?

Có một số cách để thực hiện việc đó. Bạn có thể sử dụng một plugin page builder để tạo bố cục cho trang chỉ bằng cách kéo thả các khối nội dung trong một UI khá dễ sử dụng. Hoặc bạn có thể tự mình code thủ công từ a đến z. Và trong bài viết này, mình sẽ cho bạn thêm một giải pháp nữa, đó là tạo một trang landing page có thể tùy biến được trong WordPress bằng cách dùng custom fields.

Ý tưởng chung về việc sử dụng custom field để tạo landing page

Ý tưởng chung cho cách làm này là:

• Bạn thiết kế trang landing page của bạn và chuyển đổi nó sang dạng HTML / CSS.
• Bạn tạo các custom field cho các phần nội dung như trong thiết kế, ví dụ như: heading, text, ảnh, …

Bất cứ khi nào bạn cần chỉnh sửa nội dung trên landing page, bạn chỉ đơn giản là sửa nội dung đó trong custom field trong phần admin của WordPress là được mà không cần phải động đến code.

So sánh cách làm này với việc tạo một landing page bằng page builder thì bạn sẽ thấy cách này chỉ yêu cầu bạn tự code một chút ở phần template dạng HTML / CSS thôi. Cách này không có kiểu giao diện kéo thả. Tuy nhiên, nó cho phép bạn tạo một trang landing page giống chính xác với thiết kế, và toàn bộ các đoạn code đều được tối ưu nên trang sẽ có tốc độ tải rất nhanh.

So với việc bạn tự mình code một trang landing page dạng tĩnh, thì custom field sẽ giúp bạn tùy biến các phần text, hình ảnh, … mà không cần phải code, nên tiện hơn khá nhiều khi bạn cần thay đổi.

Để làm bạn hiểu rõ hơn về cách làm này, chúng ta hãy cùng xem một ví dụ dưới đây nhé.

Thao tác cụ thể để tạo landing page bằng custom field

Bước 1: Chọn một thiết kế

Để tiết kiệm thời gian làm việc với các thiết kế dạng PSD và chuyển đổi chúng sang dạng HTML/CSS, bạn hãy chọn một design có sẵn nào đó từ HTML5UP – Spectral.

Đây là ảnh chụp một thiết kế như vậy với một vài mô tả cho từng phần nội dung:

Và đây là phần code HTML của thiết kế này. Bởi vì đoạn code khá là dài, nên mình không nhúng nó trực tiếp vào bài viết, bạn vào link kia để lấy code nhé.

Bước 2: Phân tích các phần nội dung trong thiết kế

Bây giờ, nhìn vào các phần nội dung có trong từng phần của trang. Chúng ta cần phải làm rõ phần nào là cần tùy biến, phần nào không. Bên dưới đây là danh sách các phần cần tùy biến sau này (chỉnh sửa được). Chúng ta sẽ cần thông tin này cho bước sau đấy.

• Hero
  • Tiêu đề
  • Mô tả
  • Nút với link và text

• Intro
  • Tiêu đề
  • Mô tả
  • 3 icon loại Font-Awesome

• Services: Có 3 dịch vụ, mỗi dịch vụ sẽ gồm:

• Features:
  • Tiêu đề
  • Mô tả
  • 6 tính năng, mỗi tính năng gồm:
    • Icon dạng Font-Awesome
    • Tiêu đề
    • Mô tả
    • Call to action (CTA):
      • Tiêu đề
      • Mô tả
      • Nút thứ 1 gồm link và text
      • Nút thứ 2 gồm link và text

Lưu ý là chúng ta không cần phân tích phần header và footer nhé. Chúng thường cố định theo thiết kế chung của website rồi. Chúng ta chỉ phân tích phần nội dung của trang landing page mà chúng ta xây dựng thôi.

Bước 3: Tạo một template cho trang landing page

Trước khi tạo custom field cho các phần nội dung của trang landing page mà chúng ta vừa phân tích ở trên, chúng ta cần tạo một template cho trang này đã.

Bạn chỉ cần tạo một file tên là template-home.php trong folder của theme với nội dung như sau:

Cái này khá là đơn giản, giống như tạo bất kỳ template nào trong WordPress thôi. Chúng ta sẽ giữ nội dung chính của template này trống (bên trong phần div) để giữ cho phần logic sau này được rõ ràng.

Bước tiếp theo là bạn thêm phần code HTML từ file index.html vào tag div như này.

Sau đó, chúng ta sẽ có một template với nội dung cố định. Nếu sau này bạn không muốn thay đổi các nội dung trên trang, thì đến đây là bạn đã hoàn thành việc tạo landing page rồi. Còn nếu không, bạn tiếp tục thao tác bước 4 nhé.

Bước 4: Tạo custom field cho các phần nội dung của landing page

Để tạo custom field cho các phần nội dung trên landing page, chúng ta sẽ sử dụng plugin Meta Box. Đây là một plugin giúp bạn tạo các custom field nhanh chóng và cho bạn rất nhiều lựa chọn. Bạn có thể tìm hiểu thêm về cách nó hoạt động như nào ở đây nhé.

Để tạo custom field các các phần nội dung như trên, bạn thêm đoạn code sau vào file functions.php của theme mà bạn đang dùng nhé:

add_filter( 'rwmb_meta_boxes', function( $meta_boxes ) {
// Code for sections go here (see below)

return $meta_boxes;
} );

Mỗi một meta box là một mảng (array) với các phần thiết lập riêng và các field riêng. Mỗi file cũng là một mảng với các thiết lập riêng. Để hiểu rõ hơn về cách dùng Meta Box, bạn có thể đọc thêm tài liệu hướng dẫn của nó ở đây nhé.

Với mỗi khu vực, chúng ta sẽ tạo một meta box riêng với tiêu đề giống với tiêu đề của từng khu vực luôn. Mỗi field trong meta box sẽ được tạo tương ứng với từng thành phần trong khu vực nội dung đó.

Chúng ta sẽ lần lượt thực hiện một vài khu vực đặc biệt nhất thôi nhé, các phần còn lại thì làm tương tự. Bạn có thể xem toàn bộ code của tất cả các phần ở đây.

Khu vực Hero

$meta_boxes[] = array(
    'title' => 'Section Hero',
    'post_types' => 'page',
    'fields' => array(
        array(
            'id' => 'hero_title',
            'name' => 'Title',
            'type' => 'text',
        ),
        array(
            'id' => 'hero_desc',
            'name' => 'Description',
            'type' => 'wysiwyg',
            'options' => array(
                'teeny' => true,
                'quicktags' => false,
            ),
        ),
        array(
            'id' => 'hero_button_link',
            'name' => 'Button Link',
            'type' => 'text',
        ),
        array(
            'id' => 'hero_button_text',
            'name' => 'Button Text',
            'type' => 'text',
        ),
    ),
);

Khu vực Services

$meta_boxes[] = array(
    'title' => 'Section Services',
    'post_types' => 'page',
    'fields' => array(
        array(
            'type' => 'group',
            'id' => 'services',
            'clone' => true,
            'fields' => array(
                array(
                    'id' => 'image',
                    'name' => 'Image',
                    'type' => 'image_advanced',
                    'max_file_uploads' => 1,
                ),
                array(
                    'id' => 'title',
                    'name' => 'Title',
                    'type' => 'text',
                ),
                array(
                    'id' => 'desc',
                    'name' => 'Description',
                    'type' => 'text',
                ),
                array(
                    'id' => 'image_style',
                    'name' => 'Image Style',
                    'type' => 'radio',
                    'options' => array(
                        'left' => 'Left',
                        'right' => 'Right',
                    ),
                ),
            ),
        ),
    ),
);

Trong phần này, chúng ta sẽ dùng tới extension Meta Box Group để nhóm các field có liên quan lại với nhau (các field của cùng một dịch vụ). Việc này sẽ giúp chúng ta quản lý các field và dữ liệu tốt hơn. Ta cũng sẽ dùng đến cả tính năng clone (nhân bản) để cho phép thêm dịch vụ (service) vào khu vực này tùy ý.

Sau khi thêm đoạn code trên vào file functions.php, bạn sẽ thấy các field xuất hiện trong phần chỉnh sửa trang như sau:

Bước 6: Lấy dữ liệu và hiển thị chúng ra trang landing page

Đây là bước cuối cùng rồi. Chúng ta sẽ cần lấy dữ liệu từ các custom field và hiển thị chúng ra ngoài frontend.

Để làm việc đó, bạn chỉ cần thay thế các đoạn text và hình ảnh đã được code và đặt cố định trong file template-home.php, sử dụng hàm rwmb_the_value () hoặc là hàm rwmb_meta ().

Bây giờ, chúng ta thử lấy dữ liệu từ custom field của phần Hero nhé. Code cho các phần khác cũng tương tự.

 

 

 

Learn More

Bạn có thể xem toàn bộ code cho cả trang ở đây.

Cuối cùng, bạn chỉ cần tạo một trang, chọn template cho nó là “Homepage Template” (template mà chúng ta đã tạo ở trên cho loại trang landing page), rồi điền các nội dung cần thiết vào các custom file là bạn đã có một trang landing page hoàn hảo luôn rồi.

Cuối cùng, mình tổng hợp lại các bước thực hiện để có một landing page bằng cách dùng custom field đó là:

1. Chọn một thiết kế và chuyển đổi nó sang dạng HTML / CSS;
2. Phân tích các thành phần trong thiết kế, xác định phần nào là phần cần tùy biến;
3. Tạo một template cho trang dựa trên file HTML của thiết kế bạn chọn;
4. Tạo custom field cho các phần cần tùy biến;
5. Lấy dữ liệu của các custom field và hiển thị chúng ra trang landing page ngoài frontend.

Với các bước này, bạn sẽ hoàn toàn kiểm soát được trang landing page của mình từ khâu thiết kế cho tới nội dung, bao gồm cả những chi tiết nhỏ nhất như CSS và HTML. Trang landing page của bạn sẽ được tối ưu tốc độ, hiệu suất và chắc chắn là nhanh hơn các trang landing page được tạo bởi các page builder rồi. Chúc các bạn thành công!