Tạo custom page trong WordPress dễ dàng

Tạo Custom Page trong WordPress Dễ Dàng

WordPress, một nền tảng quản lý nội dung (CMS) phổ biến, cung cấp sự linh hoạt tuyệt vời trong việc xây dựng trang web. Mặc dù WordPress có sẵn các mẫu trang (page template) cơ bản, đôi khi bạn cần tạo các trang tùy chỉnh (custom page) để đáp ứng nhu cầu cụ thể của dự án. Bài viết này sẽ hướng dẫn bạn cách tạo custom page trong WordPress một cách dễ dàng, ngay cả khi bạn không phải là một lập trình viên chuyên nghiệp.

Tại Sao Nên Tạo Custom Page?

Custom page cho phép bạn vượt qua những hạn chế của các mẫu trang mặc định và tạo ra các trang có thiết kế và chức năng độc đáo. Dưới đây là một số lý do tại sao bạn nên xem xét việc tạo custom page:

• **Tính Linh Hoạt:** Custom page mang lại sự linh hoạt tối đa trong việc thiết kế giao diện và chức năng của trang.
• **Cải Thiện Trải Nghiệm Người Dùng:** Bạn có thể tùy chỉnh trang để cung cấp trải nghiệm tốt hơn cho người dùng, phù hợp với mục đích của trang.
• **Tăng Cường Nhận Diện Thương Hiệu:** Custom page giúp bạn tạo ra các trang mang đậm dấu ấn thương hiệu, từ đó tăng cường nhận diện thương hiệu.

Các Phương Pháp Tạo Custom Page Trong WordPress

Có nhiều phương pháp để tạo custom page trong WordPress, từ việc viết code trực tiếp đến sử dụng các plugin hỗ trợ. Dưới đây là một số phương pháp phổ biến:

1. Tạo Custom Page Template bằng Code

Đây là phương pháp truyền thống và đòi hỏi kiến thức về PHP, HTML và CSS. Tuy nhiên, nó mang lại sự kiểm soát cao nhất đối với thiết kế và chức năng của trang.

**Bước 1: Tạo File Template**

Tạo một file PHP mới trong thư mục theme của bạn (ví dụ: `/wp-content/themes/ten-theme-cua-ban/`). Đặt tên cho file này một cách dễ hiểu, ví dụ: `page-gioi-thieu.php`.

**Bước 2: Thêm Header Template**

Trong file `page-gioi-thieu.php`, hãy thêm đoạn code sau vào đầu file:

“`php

“`

`Template Name: Trang Giới Thiệu` là đoạn code quan trọng, nó khai báo đây là một template và đặt tên cho template này là “Trang Giới Thiệu”. Bạn có thể thay đổi tên này theo ý muốn. `get_header();` sẽ tải header của theme.

**Bước 3: Thêm Nội Dung Trang**

Tiếp theo, bạn cần thêm nội dung trang. Thông thường, bạn sẽ sử dụng loop của WordPress để hiển thị nội dung của trang:

“`php

“`

Đoạn code này sử dụng `the_post()` để lấy nội dung của trang từ cơ sở dữ liệu và hiển thị nó bằng `get_template_part( ‘template-parts/content’, ‘page’ );`. Nếu theme của bạn không có file `template-parts/content-page.php`, bạn có thể sử dụng `the_content();` để hiển thị nội dung.

**Bước 4: Thêm Footer Template**

Cuối cùng, thêm footer của theme vào cuối file:

“`php
Add New). Sau đó, trong phần “Page Attributes” ở bên phải, chọn template “Trang Giới Thiệu” (hoặc tên template mà bạn đã đặt).

**Bước 6: Thêm Nội Dung và Lưu Trang**

Thêm nội dung vào trang và lưu lại. Trang của bạn bây giờ sẽ sử dụng template custom mà bạn đã tạo.

2. Sử Dụng Page Builder Plugins

Các page builder plugin như Elementor, Beaver Builder, và Divi cung cấp giao diện trực quan để bạn tạo custom page mà không cần viết code. Đây là một lựa chọn tuyệt vời nếu bạn không có kiến thức về lập trình.

**Ưu điểm của Page Builder Plugins:**

• **Kéo và Thả:** Giao diện kéo và thả trực quan giúp bạn dễ dàng thêm và sắp xếp các phần tử trên trang.
• **Nhiều Mẫu Trang:** Nhiều page builder plugin cung cấp thư viện mẫu trang phong phú để bạn có thể bắt đầu nhanh chóng.
• **Khả Năng Tùy Biến Cao:** Bạn có thể tùy chỉnh giao diện và chức năng của trang một cách dễ dàng với các tùy chọn có sẵn.

**Nhược điểm của Page Builder Plugins:**

• **Hiệu Suất:** Một số page builder plugin có thể làm chậm tốc độ tải trang nếu sử dụng quá nhiều phần tử.
• **Lock-in:** Nếu bạn quyết định chuyển sang một plugin khác, bạn có thể gặp khó khăn trong việc chuyển đổi nội dung đã tạo bằng plugin cũ.
• **Học Cách Sử Dụng:** Cần thời gian để làm quen với giao diện và các tính năng của page builder plugin.

**Ví dụ: Tạo Custom Page với Elementor**

1. **Cài Đặt và Kích Hoạt Elementor:** Tải và cài đặt plugin Elementor từ WordPress plugin repository, sau đó kích hoạt nó.
2. **Tạo Trang Mới:** Tạo một trang mới trong WordPress (Pages -> Add New).
3. **Edit with Elementor:** Nhấp vào nút “Edit with Elementor” để mở giao diện Elementor.
4. **Thiết Kế Trang:** Sử dụng giao diện kéo và thả của Elementor để thêm các phần tử (widgets) vào trang, như văn bản, hình ảnh, video, nút, v.v. Bạn có thể tùy chỉnh giao diện của từng phần tử bằng các tùy chọn có sẵn.
5. **Lưu Trang:** Sau khi hoàn thành thiết kế trang, nhấp vào nút “Publish” để lưu trang.

3. Sử Dụng Custom Post Types và Advanced Custom Fields (ACF)

Phương pháp này phù hợp nếu bạn muốn tạo các trang có cấu trúc dữ liệu phức tạp, ví dụ như trang giới thiệu sản phẩm, trang danh mục dự án, v.v.

**Bước 1: Tạo Custom Post Type (CPT)**

Bạn có thể tạo CPT bằng cách sử dụng code (khuyến nghị cho người có kiến thức lập trình) hoặc sử dụng plugin như “Custom Post Type UI”.

**Ví dụ sử dụng Custom Post Type UI:**

1. **Cài Đặt và Kích Hoạt:** Cài đặt và kích hoạt plugin Custom Post Type UI.
2. **Thêm CPT Mới:** Đi đến CPT UI -> Add/Edit Post Types.
3. **Nhập Thông Tin CPT:** Nhập các thông tin cần thiết cho CPT, như Post Type Slug (ví dụ: `san_pham`), Plural Name (ví dụ: “Sản Phẩm”), và Singular Name (ví dụ: “Sản Phẩm”).
4. **Lưu CPT:** Lưu lại CPT.

**Bước 2: Tạo Custom Fields với ACF**

Advanced Custom Fields (ACF) cho phép bạn thêm các trường dữ liệu tùy chỉnh vào CPT.

**Ví dụ sử dụng ACF:**

1. **Cài Đặt và Kích Hoạt:** Cài đặt và kích hoạt plugin Advanced Custom Fields.
2. **Tạo Field Group:** Đi đến Custom Fields -> Add New.
3. **Thêm Fields:** Thêm các trường dữ liệu mà bạn muốn, ví dụ như “Giá”, “Mô Tả Ngắn”, “Hình Ảnh Sản Phẩm”, v.v. Chọn loại trường phù hợp (ví dụ: Text, Text Area, Image).
4. **Assign Field Group to CPT:** Trong phần “Location”, chọn Post Type là CPT mà bạn đã tạo (ví dụ: “Sản Phẩm”).
5. **Lưu Field Group:** Lưu lại Field Group.

**Bước 3: Tạo Template để Hiển Thị CPT**

Tạo một file template mới trong thư mục theme của bạn (ví dụ: `single-san_pham.php`). File này sẽ được sử dụng để hiển thị các sản phẩm.

**Bước 4: Sử Dụng ACF Fields trong Template**

Trong file template, bạn có thể sử dụng các hàm của ACF để lấy giá trị của các trường dữ liệu tùy chỉnh và hiển thị chúng trên trang. Ví dụ:

“`php

<?php
get_footer();
“`

Trong ví dụ này, `the_field( 'gia' )` được sử dụng để lấy giá trị của trường "Giá".

Lời Khuyên Khi Tạo Custom Page

• **Lập Kế Hoạch Cẩn Thận:** Trước khi bắt đầu tạo custom page, hãy lập kế hoạch chi tiết về mục đích, thiết kế và chức năng của trang.
• **Sử Dụng Child Theme:** Nếu bạn chỉnh sửa trực tiếp các file trong theme gốc, những thay đổi của bạn sẽ bị mất khi theme được cập nhật. Vì vậy, hãy sử dụng child theme để bảo vệ các tùy chỉnh của bạn.
• **Tối Ưu Hóa Hiệu Suất:** Đảm bảo rằng custom page của bạn được tối ưu hóa để có tốc độ tải trang nhanh chóng. Điều này bao gồm việc tối ưu hóa hình ảnh, sử dụng caching và giảm thiểu số lượng HTTP requests.

Kết Luận

Tạo custom page trong WordPress không hề khó khăn như bạn nghĩ. Bằng cách sử dụng các phương pháp được trình bày trong bài viết này, bạn có thể tạo ra các trang web độc đáo và chuyên nghiệp, đáp ứng mọi nhu cầu của dự án. Hãy lựa chọn phương pháp phù hợp với trình độ kỹ năng và yêu cầu của bạn để đạt được kết quả tốt nhất.