0

Cách dễ dàng tạo một chủ đề WordPress tùy chỉnh (không cần bất kỳ mã nào)

Bạn có muốn tạo một chủ đề WordPress tùy chỉnh từ đầu không?

Trước đây, bạn phải học theo codex của WordPress và có kiến thức viết mã khá tốt để xây dựng một chủ đề WordPress tùy chỉnh. Nhưng nhờ các trình tạo chủ đề WordPress mới, giờ đây bất kỳ ai cũng có thể tạo một chủ đề WordPress hoàn toàn tùy chỉnh trong vòng một giờ (không cần kiến thức mã hóa).

Trong bài viết này, chúng tôi sẽ hướng dẫn bạn cách dễ dàng tạo một chủ đề WordPress tùy chỉnh mà không cần viết bất kỳ mã nào.

Creating a custom WordPress theme without writing any code

Tạo một chủ đề WordPress tùy chỉnh cho người mới bắt đầu

Không giống như các trang HTML tĩnh, chủ đề WordPress là một tập hợp các tệp mẫu được viết bằng PHP, HTML, CSS và JavaScript. Thông thường, bạn cần phải hiểu rõ về tất cả các ngôn ngữ thiết kế web này hoặc thuê một nhà phát triển web để tạo một chủ đề WordPress tùy chỉnh.

Nếu bạn đã thuê một nhà phát triển hoặc đại lý, thì chi phí của một chủ đề WordPress tùy chỉnh có thể lên tới hàng nghìn đô la.

Vì nhiều chủ doanh nghiệp nhỏ không đủ khả năng chi trả chi phí cao cho một chủ đề WordPress tùy chỉnh, nên rất nhiều người trong số họ đã quyết định sử dụng các chủ đề mặc định đi kèm với WordPress.

Những người không muốn ổn định và muốn tùy chỉnh đã sử dụng trình tạo trang WordPress kéo và thả hoặc họ sử dụng khung chủ đề để xây dựng chủ đề tùy chỉnh.

Mặc dù các khung chủ đề WordPress giúp việc xây dựng một chủ đề WordPress dễ dàng hơn, nhưng chúng là một giải pháp cho các nhà phát triển, không phải một chủ sở hữu trang web trung bình.

Mặt khác, các plugin trình tạo trang WordPress giúp tạo bố cục trang tùy chỉnh cực kỳ dễ dàng bằng cách sử dụng giao diện kéo và thả, nhưng chúng chỉ giới hạn ở bố cục. Bạn không thể tạo các chủ đề tùy chỉnh với nó.

Cho đến khi Beaver Builder , một trong những plugin tạo trang WordPress tốt nhất đã quyết định giải quyết vấn đề này bằng tiện ích bổ sung của họ có tên là Beaver Themer .

Beaver Builder best WordPress page builder plugin

Beaver Themer là một tiện ích bổ sung của trình tạo trang web cho phép bạn tạo bố cục chủ đề tùy chỉnh bằng cách sử dụng giao diện kéo và thả và không cần học viết mã.

Hãy cùng xem cách sử dụng Beaver Themer để dễ dàng tạo một chủ đề WordPress.

Video hướng dẫn

Nếu bạn không thích video hoặc cần thêm hướng dẫn, thì hãy tiếp tục đọc.

Thiết lập Beaver Themer để tạo một chủ đề tùy chỉnh

Beaver Themer là một plugin bổ sung cho Beaver Builder , vì vậy bạn sẽ cần cả hai plugin cho bài viết này.

Trước tiên, bạn cần cài đặt và kích hoạt các plugin Beaver Builder và Beaver Themer . Để biết thêm chi tiết, hãy xem hướng dẫn từng bước của chúng tôi về cách cài đặt plugin WordPress .

Beaver Themer cho phép bạn tạo một chủ đề tùy chỉnh, nhưng bạn vẫn sẽ cần một chủ đề để bắt đầu. Chúng tôi khuyên bạn nên sử dụng chủ đề có dung lượng nhẹ bao gồm mẫu trang có chiều rộng đầy đủ để hoạt động như chủ đề bắt đầu của bạn.

Bạn có thể tìm thấy nhiều chủ đề như vậy trong thư mục chủ đề WordPress.org. Hầu hết các chủ đề WordPress hiện đại bao gồm một mẫu toàn chiều rộng. Các lựa chọn hàng đầu của chúng tôi là:

Astra – Một chủ đề WordPress đa năng có dung lượng nhẹ miễn phí đi kèm với hỗ trợ tích hợp cho Beaver Builder.
OeanWP – Một chủ đề WordPress đa năng miễn phí phổ biến khác đi kèm với hỗ trợ trình tạo trang đầy đủ.
Chủ đề StudioPress – Tất cả các chủ đề của họ đều tương thích với Beaver Builder và sẽ hoạt động hiệu quả với Beaver Themer.

Vì lợi ích của hướng dẫn này, chúng tôi sẽ sử dụng Astra , chủ đề WordPress nhẹ và dễ tùy chỉnh.

Thiết lập chủ đề của bạn cho Beaver Themer

Khi xây dựng một chủ đề WordPress tùy chỉnh với Beaver Themer, điều quan trọng là phải đảm bảo rằng Beaver Themer có quyền truy cập vào toàn bộ nội dung của trang (từ cạnh này sang cạnh khác).

Đây là bố cục Astra mặc định. Như bạn có thể thấy rằng bố cục này bao gồm một thanh bên có thể khó làm việc khi sử dụng Beaver Themer.

Default theme layout with a sidebar

Bạn có thể thay đổi điều đó bằng cách truy cập bảng điều khiển quản trị của trang web của bạn và sau đó điều hướng đến Giao diện » Trang tùy chỉnh . Từ đây, bạn cần chuyển sang tab Bố cục »Thanh bên .

Turning off sidebars in your theme

Khi đó, chỉ cần chọn ‘Không có Thanh bên’ trong tùy chọn bố cục mặc định và nhấp vào nút Xuất bản để lưu các thay đổi của bạn.

Chủ đề của bạn bây giờ sẽ bắt đầu sử dụng bố cục không có thanh bên. Đây là cách bố trí tốt nhất để sử dụng với Beaver Themer.

Theme layout with no sidebars

Bố cục toàn trang này cho phép Beaver Themer sử dụng từng inch của màn hình, vì vậy bạn có thể tạo ra trải nghiệm hình ảnh đẹp mắt từ đầu đến cuối.

Hầu hết các chủ đề WordPress bao gồm một tệp mẫu cho các trang có chiều rộng đầy đủ. Nếu bạn đang sử dụng một số chủ đề khác, thì bạn có thể tìm thấy một tùy chọn để loại bỏ các thanh bên trong cài đặt chủ đề của mình.

Nếu bạn không thể tìm thấy nó, hãy liên hệ với nhà phát triển chủ đề của bạn và họ có thể giúp bạn làm điều đó.

Khi bạn đã thiết lập chủ đề của mình thành một bố cục toàn chiều rộng, bạn đã sẵn sàng tạo chủ đề WordPress tùy chỉnh của mình bằng cách sử dụng Beaver Themer.

Nguyên tắc cơ bản của Quick Beaver Themer

Beaver Themer hoạt động trên Beaver Builder. Là một plugin tạo trang, Beaver Builder cho phép bạn kéo và thả các mục vào một trang để tạo bố cục tùy chỉnh.

Nó có các mục sau mà bạn có thể sử dụng trong bố cục của mình:

Mẫu: Tập hợp các hàng cột và mô-đun tạo nên toàn bộ bố cục trang.
Cột: Các mô-đun bố cục theo chiều dọc giúp căn chỉnh nội dung theo chiều ngang.
Hàng: Bộ sưu tập theo chiều ngang của nhiều mô-đun
Mô-đun: Một mục xuất ra thông tin cụ thể như tiêu đề, khối văn bản, bảng, thư viện, v.v.

Chỉ cần chỉnh sửa một trang trong Beaver Builder và sau đó nhấp vào nút thêm ở góc trên cùng bên phải. Sau đó, bạn có thể kéo và thả các cột, hàng, mô-đun vào trang của mình và bắt đầu chỉnh sửa chúng ngay lập tức.

Using Beaver Builder

Nếu bạn không muốn bắt đầu từ đầu, hãy chọn từ danh sách các mẫu được tạo sẵn để bắt đầu.

Beaver Builder templates

Beaver Builder cũng cho phép bạn lưu bố cục của mình và sau đó sử dụng chúng dưới dạng mẫu.

Để tìm hiểu thêm, hãy xem bài viết của chúng tôi về cách tạo bố cục trang tùy chỉnh bằng Beaver Builder .

Tuy nhiên, chúng tôi không chỉ muốn tạo bố cục trang. Chúng tôi muốn tạo một chủ đề tùy chỉnh hoàn chỉnh.

Đây là lúc Beaver Themer bước vào.

Nó thêm một mục khác vào Beaver Builder được gọi là ‘Themer Layout’.

Themer Layout

Bố cục Themer cho phép bạn tạo bố cục tùy chỉnh cho đầu trang, chân trang, các vùng nội dung, trang 404 và các phần mẫu khác.

Đây là các khối xây dựng của tất cả các chủ đề WordPress và bằng cách sử dụng chúng, bạn sẽ có thể tạo một chủ đề tùy chỉnh phù hợp với nhu cầu của mình.

Sử dụng các mẫu Beaver Themer để tạo một chủ đề WordPress tùy chỉnh

Trong hướng dẫn sau, chúng tôi sẽ hướng dẫn bạn các bước cần thiết để tạo các phần tử chủ đề tùy chỉnh phổ biến nhất. Khi bạn hoàn thành, bạn đã hoàn toàn chuyển đổi chủ đề cơ sở của mình thành một chủ đề con WordPress hoàn toàn tùy chỉnh.

Xây dựng tiêu đề tùy chỉnh cho chủ đề của bạn

Hãy bắt đầu với khu vực tiêu đề trang web của bạn. Tiêu đề tùy chỉnh là một thành phần thiết yếu của một chủ đề và việc xây dựng một chủ đề có thể phức tạp bằng các phương pháp truyền thống.

May mắn thay, Beaver Themer được tích hợp các tính năng tiêu đề. Bạn có thể sử dụng mẫu được tạo sẵn hoặc sử dụng menu và mô-đun hình ảnh với bố cục hai cột.

Để đến vùng tiêu đề này, trước tiên, chúng ta cần thiết lập bố cục tiêu đề trong Beaver Themer. Truy cập Beaver Builder »Thêm trang mới và cung cấp tiêu đề cho tiêu đề của bạn.

Creating a custom header layout

Sau đó, chọn ‘Themer Layout’ làm loại và ‘Header’ làm tùy chọn bố cục. Sau khi bạn hoàn tất, hãy nhấp vào nút ‘Thêm Bố cục Themer’ để tiếp tục.

Thao tác này sẽ đưa bạn đến trang cài đặt bố cục. Từ đây, bạn cần chọn ‘Toàn bộ Trang web’ làm vị trí nơi mẫu tiêu đề sẽ được hiển thị.

Layout settings

Tiếp theo, nhấp vào nút ‘Khởi chạy Beaver Builder’ để mở giao diện trình tạo.

Beaver Builder sẽ khởi chạy với bố cục tiêu đề một cột và hai hàng cơ bản làm điểm bắt đầu.

Header layout

Bạn có thể sử dụng cùng các công cụ kéo và thả Beaver Builder để thay đổi nền, màu sắc, văn bản, v.v. Bạn cũng có thể thêm các mô-đun khác, tải các mẫu tạo sẵn và thêm hàng / cột bằng cách nhấp vào nút thêm ở trên cùng bên phải góc.

Khi bạn hài lòng với thiết kế, hãy nhấp vào nút Xong để lưu hoặc xuất bản bố cục của bạn.

Bây giờ bạn có thể truy cập trang web của mình để xem tiêu đề chủ đề tùy chỉnh của bạn đang hoạt động. Như bạn có thể thấy, chúng tôi đã áp dụng bố cục tiêu đề cho chủ đề tùy chỉnh của mình.

Custom header in your custom theme

Ngoài tiêu đề, nó sẽ không hiển thị bất kỳ nội dung nào, và bạn có thể sẽ thấy khu vực chân trang của chủ đề cơ sở của bạn.

Hãy thay đổi điều này.

Xây dựng chân trang tùy chỉnh cho chủ đề của bạn

Bạn có thể tạo chân trang tùy chỉnh cho chủ đề của mình bằng Beaver Themer giống như cách bạn tạo tiêu đề tùy chỉnh.

Đi tới Beaver Builder »Thêm trang mới và cung cấp tiêu đề cho bố cục chân trang của bạn. Tiếp theo, chọn ‘Themer Layout’ làm loại và ‘Footer’ làm tùy chọn bố cục.

Footer layout

Nhấp vào nút ‘Thêm Bố cục Themer’ để tiếp tục.

Thao tác này sẽ đưa bạn đến trang cài đặt bố cục. Từ đây, bạn cần chọn ‘Toàn bộ Trang web’ làm vị trí mà mẫu sẽ được hiển thị.

Footer layout settings

Sau đó, nhấp vào nút ‘Khởi chạy Beaver Builder’ để mở giao diện trình tạo.

Beaver Builder sẽ khởi chạy với bố cục chân trang sử dụng ba cột. Bạn có thể sử dụng bố cục này làm điểm bắt đầu và bắt đầu chỉnh sửa.

Editing your footer layout

Bạn có thể thêm mô-đun, khối văn bản hoặc bất kỳ thứ gì khác mà bạn muốn. Bạn luôn có thể thay đổi màu sắc, phông chữ, thêm hình nền, v.v.

Khi bạn hài lòng với thiết kế, hãy nhấp vào nút Xong để lưu hoặc xuất bản bố cục của bạn.

Xây dựng vùng nội dung cho bài đăng và trang

Bây giờ chúng ta đã tạo đầu trang và chân trang cho mọi trang và bài đăng trên trang web, đã đến lúc xây dựng bài đăng hoặc nội dung trang (vùng nội dung).

Chúng tôi sẽ bắt đầu theo cùng một cách mà chúng tôi đã tạo đầu trang và chân trang bằng cách thêm bố cục ‘Số ít’ trong trang Thêm mới.

Creating posts and page layouts

Tiếp theo, bạn sẽ chọn nơi hiển thị bố cục này. Bạn có thể chọn số ít để sử dụng nó cho tất cả các bài đăng và trang riêng lẻ hoặc bạn có thể chọn bài đăng hoặc chỉ các trang.

Singular layout settings

Sau đó, nhấp vào nút ‘Khởi chạy Beaver Builder’ để mở giao diện trình tạo.

Editing singular layout

Beaver Builder sẽ tải một bố cục đơn mẫu với tiêu đề bài đăng / trang ở trên cùng, tiếp theo là nội dung, hộp tiểu sử tác giả và khu vực nhận xét.

Bạn có thể trỏ và nhấp để chỉnh sửa bất kỳ mục nào trong số này hoặc thêm mô-đun, cột và hàng mới nếu cần.

Khi bạn đã hài lòng với bố cục, hãy nhấp vào nút Xong để lưu và xuất bản các thay đổi của bạn.

Bây giờ bạn có thể truy cập trang web của mình để xem nó hoạt động.

Theme layout with content

Tạo bố cục lưu trữ cho chủ đề tùy chỉnh của bạn

Bây giờ chủ đề tùy chỉnh của bạn đã bắt đầu hình thành, bạn có thể chuyển sang tạo bố cục cho các phần khác của trang web của mình. Các trang lưu trữ là nơi WordPress hiển thị các danh mục, thẻ, tác giả và lưu trữ hàng tháng của bạn.

Hãy tạo bố cục cho các trang lưu trữ trong chủ đề tùy chỉnh của bạn.

Bạn sẽ bắt đầu bằng cách truy cập Beaver Builder »Thêm trang mới và cung cấp tiêu đề cho bố cục lưu trữ của bạn.

Creating an archive layout for your custom theme

Sau đó, chọn loại ‘Bố cục Themer’ và ‘Lưu trữ’ làm tùy chọn bố cục. Nhấp vào nút ‘Thêm Bố cục Themer’ để tiếp tục.

Thao tác này sẽ đưa bạn đến trang cài đặt bố cục. Từ đây, bạn cần chọn ‘Tất cả lưu trữ’ làm vị trí mà mẫu sẽ được hiển thị. Bạn cũng có thể tạo các bố cục riêng biệt cho từng loại lưu trữ riêng lẻ như ngày tháng, kết quả tìm kiếm, danh mục, thẻ, v.v.

Archive layout settings

Sau đó, nhấp vào nút ‘Khởi chạy Beaver Builder’ để mở giao diện trình tạo.

Beaver Builder sẽ ra mắt với bố cục lưu trữ một cột cơ bản. Nó sẽ hiển thị tiêu đề kho lưu trữ ở trên cùng, sau đó là các bài đăng.

Editing Archives layout for your theme

Bạn có thể trỏ và nhấp vào bất kỳ mục nào để chỉnh sửa thuộc tính của nó. Bạn cũng có thể thêm mô-đun, hàng và cột mới nếu cần.

Sau đó, nhấp vào nút ‘Hoàn tất’ để lưu và xuất bản các thay đổi của bạn.

Tạo các bố cục khác cho chủ đề WordPress tùy chỉnh của bạn

Beaver Themer cũng cho phép bạn tạo bố cục cho các trang khác trong hệ thống phân cấp mẫu, ví dụ: trang 404 , các phần của mẫu, trang kết quả tìm kiếm, v.v.

Sử dụng chức năng kéo và thả tích hợp của Beaver Builder, bạn có thể dễ dàng tạo chủ đề WordPress tùy chỉnh của riêng mình từ đầu mà không cần viết mã. Đây thực sự là phương pháp phát triển chủ đề WordPress thân thiện với người mới bắt đầu nhất đang tồn tại.

Chúng tôi hy vọng bài viết này đã giúp bạn học cách tạo chủ đề WordPress tùy chỉnh mà không cần học viết mã. Bạn cũng có thể muốn xem hướng dẫn của chúng tôi về cách tăng tốc trang web WordPress của bạn để có trải nghiệm người dùng và SEO tốt hơn.

.

Windy

Trả lời

Email của bạn sẽ không được hiển thị công khai. Các trường bắt buộc được đánh dấu *