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

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


Trước đây, bạn phải theo dõi codex WordPress và có kiến ​​thức mã hóa khá để xây dựng một chủ đề WordPress tùy chỉnh. Nhưng nhờ có 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 về mã hóa).

Trong bài viết này, chúng tôi sẽ chỉ cho 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.

Tạo một chủ đề WordPress tùy chỉnh mà không cần viết bất kỳ mã nào

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

Không giống như các trang web 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 sẽ cần có một sự hiểu biết đúng đắn 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 ngàn đô la.

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

Những người đã không muốn giải quyết và muốn tùy chỉnh hoặc sử dụng một kéo & bỏ trình tạo trang WordPress 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 xây dựng một chủ đề WordPress dễ dàng hơn, chúng là một giải pháp cho các nhà phát triển, không phải là chủ sở hữu trang web trung bình.

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

Cho đến khi Beaver Builder, một trong những plugin xây dựng trang WordPress tốt nhất đã quyết định giải quyết vấn đề này với tiện ích bổ sung có tên là Beaver Themer.

Beaver Builder plugin xây dựng trang WordPress tốt nhất

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

Chúng ta hãy cùng xem cách sử dụng Beaver Themer để dễ dàng tạo chủ đề WordPress.

Video hướng dẫn

Đăng ký WPBeginner

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

Thiết lập Beaver Themer để xây dựng một chủ đề tùy chỉnh

Beaver Themer là một plugin bổ trợ 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ủ đề trọng 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. Lựa chọn hàng đầu của chúng tôi là:

  • Astra – Một chủ đề WordPress đa nă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 mục đích 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 chúng đều tương thích với Beaver Builder và sẽ hoạt động tốt với Beaver Themer.

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

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à cách bố trí 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ó hoạt động khi sử dụng Beaver Themer.

Bố cục chủ đề mặc định với một thanh bên

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

Tắt sidebars trong chủ đề của bạn

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.

Bố cục chủ đề không có thanh bên

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

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 để xóa 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 điều đó.

Khi bạn đã thiết lập chủ đề của mình thành 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 Beaver Themer.

Nguyên tắc cơ bản nhanh Beaver Themer

Beaver Themer hoạt động trên đỉnh Beaver Builder. Là một plugin xây dựng 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 đây 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: Mô-đun bố trí dọc giúp căn chỉnh nội dung theo chiều ngang.
  • Hàng: Bộ sưu tập 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.

Sử dụng Beaver Builder

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

Mẫu Beaver Builder

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 làm 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à khi Beaver Themer đến.

Nó thêm một mục khác vào Beaver Builder có tên là ‘Themer Layout,.

Giao diện người dùng

Bố cục Themer cho phép bạn tạo bố cục tùy chỉnh cho tiêu đề, chân trang, 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 bạn.

Sử dụng Mẫu Beaver Themer để tạo Chủ đề WordPress tùy chỉnh

Trong các hướng dẫn sau, chúng tôi sẽ hướng dẫn bạn các bước cần thiết để xây dựng các yếu tố chủ đề tùy chỉnh phổ biến nhất. Khi bạn hoàn thành, bạn sẽ biến đổi hoàn toàn chủ đề cơ bản của mình thành 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 đề 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ể khó khăn bằng các phương pháp truyền thống.

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

Để đến khu vực tiêu đề này, trước tiên, chúng tôi sẽ cần thiết lập bố cục tiêu đề trong Beaver Themer. Chuyến thăm Beaver Builder »Thêm mới trang và cung cấp một tiêu đề cho tiêu đề của bạn.

Tạo bố cục tiêu đề tùy chỉnh

Sau đó, chọn ‘Giao diện người dùng Giao diện làm loại và‘ Tiêu đề, làm tùy chọn bố cục. Khi bạn đã hoàn tất, hãy nhấp vào nút ‘Thêm giao diện người dùng để tiếp tục.

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

Cài đặt Giao diện

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

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

Bố cục tiêu đề

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 được 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ế, 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 bạn để xem tiêu đề chủ đề tùy chỉnh của bạn trong hành độ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.

Tiêu đề tùy chỉnh trong chủ đề tùy chỉnh của bạn

Ngoài tiêu đề, bạn sẽ không hiển thị bất kỳ nội dung nào và có thể bạn sẽ thấy khu vực chân trang 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ư bạn đã tạo tiêu đề tùy chỉnh.

Đi qua Beaver Builder »Thêm mới trang và cung cấp một tiêu đề cho bố trí chân trang của bạn. Tiếp theo, chọn ‘Giao diện người dùng Giao diện làm loại và‘ Chân trang, làm tùy chọn bố cục.

Bố trí chân trang

Nhấp vào nút ‘Thêm giao diện người dùng để tiếp tục.

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

Cài đặt bố trí chân trang

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

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.

Chỉnh sửa bố cục chân trang của bạn

Bạn có thể thêm các mô-đun, khối văn bản hoặc bất cứ thứ gì 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à hơn thế nữa.

Khi bạn hài lòng với thiết kế, 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 khu vực nội dung cho bài và trang

Bây giờ chúng tôi đã tạo các tiêu đề và chân trang cho mỗi trang và đăng trên trang web, đã đến lúc xây dựng phần thân bài hoặc trang (khu vực nội dung).

Chúng tôi sẽ bắt đầu theo cách tương tự như cách chúng tôi xây dựng tiêu đề và chân trang bằng cách thêm bố cục ‘Đơn lẻ trong trang Thêm mới.

Tạo bài viết và bố cục trang

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 hoặc bạn có thể chọn bài đăng hoặc chỉ các trang.

Cài đặt bố cục số ít

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

Chỉnh sửa bố cục số ít

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

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, 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 bạn để xem nó trong hành động.

Bố cục chủ đề với nội dung

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ác trang lưu trữ là nơi WordPress hiển thị các danh mục, thẻ, tác giả và tài liệu lưu trữ hàng tháng của bạn.

Hãy để từ chối 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 mới trang và cung cấp một tiêu đề cho bố cục lưu trữ của bạn.

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

Sau đó, chọn ‘Giao diện người dùng theo kiểu, và‘ Lưu trữ, làm tùy chọn bố cục. Nhấp vào nút ‘Thêm giao diện người dùng để tiếp tục.

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

Lưu trữ cài đặt bố cục

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

Beaver Builder sẽ khởi chạy với bố cục lưu trữ cột đơn cơ bản. Nó sẽ hiển thị tiêu đề lưu trữ ở trên cùng, theo sau là bài viết.

Chỉnh sửa bố cục Lưu trữ cho chủ đề của bạn

Bạn có thể chỉ 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 các mô-đun, hàng và cột mới nếu cần.

Sau đó, nhấp vào nút ‘Xong sắp xếp để 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 phân cấp mẫu, ví dụ: trang 404, phần mẫu, trang kết quả tìm kiếm và hơn thế nữa.

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 tìm hiểu cách tạo chủ đề WordPress tùy chỉnh mà không cần học lập trình. 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 SEO và người dùng tốt hơn.

Jeffrey Wilson Administrator
Sorry! The Author has not filled his profile.
follow me
    Like this post? Please share to your friends:
    Adblock
    detector
    map