Bạn đã bao giờ thấy mình ước mình có một chủ đề WordPress được tạo riêng cho trang web của bạn chưa? Chắc chắn, thư mục chủ đề WordPress.com cung cấp rất nhiều tùy chọn để phù hợp với tất cả các loại trang web. Ngoài ra, bạn có thể tải lên bất kỳ chủ đề hoặc plugin nào bạn muốn trên gói Business trở lên. Nhưng cuối cùng đó vẫn là thứ được tạo sẵn và không phải là duy nhất cho trang web của bạn.
Vì vậy, điều gì sẽ xảy ra nếu bạn có thể tạo chủ đề của riêng mình và điều chỉnh nó theo đúng những gì bạn cần? Chao ôi , tôi nghe bạn nói, tôi không phải là nhà phát triển web! Tôi không biết làm thế nào để viết mã, làm thế nào tôi có thể tạo ra một cái gì đó như vậy?
Tôi nói vậy, đừng sợ! Hóa ra, bạn hoàn toàn có thể học cách tạo một chủ đề WordPress mà không cần bất kỳ kỹ năng viết mã nào . Nhờ có plugin Tạo khối chủ đề và Trình chỉnh sửa trang web WordPress, bất kỳ ai cũng có thể làm điều đó và trong bài đăng này chúng tôi sẽ hướng dẫn bạn cách thực hiện. Từng bước, bạn sẽ học cách chuyển từ canvas trống sang chủ đề khối làm sẵn mà bạn có thể xuất và sử dụng trên bất kỳ trang web WordPress nào.
Trong bài viết này:
- Giới thiệu Plugin tạo chủ đề khối
- Cách tạo chủ đề WordPress bằng trình chỉnh sửa trang web và plugin tạo chủ đề khối
- Bước 1: Cài đặt Plugin
- Bước 2: Chỉnh sửa thiết kế trang web của bạn với trình tùy chỉnh và trình chỉnh sửa trang web
- Làm việc với các biến thể kiểu
- Tăng chiều rộng nội dung
- Thay đổi phông chữ của bạn
- Sửa đổi màu chủ đề
- Thay đổi các phần của Mẫu
- Trao đổi khối vòng lặp truy vấn
- Tóm tắt: Xem video tốc độ hướng dẫn đến điểm này
- Bước 3: Sửa đổi Mẫu Trang bằng Trình chỉnh sửa Trang web
- Thiết kế lại các Mẫu Đơn và Trang
- Điều chỉnh Mẫu Lưu trữ
- Bước 4: Xuất chủ đề của bạn
- Bước 5: Tải chủ đề mới lên trang web WordPress.com của bạn
- Bước 3: Sửa đổi Mẫu Trang bằng Trình chỉnh sửa Trang web
- Sử dụng chủ đề tùy chỉnh của bạn để xây dựng một trang web đơn giản
- Tạo chủ đề WordPress tùy chỉnh: Không có vấn đề gì, ngay cả đối với người mới bắt đầu
Giới thiệu Plugin tạo chủ đề khối
Đầu tiên, hãy nói về một công cụ giúp tạo chủ đề của riêng bạn trong WordPress dễ dàng hơn nhiều. Plugin Create Block Theme có sẵn miễn phí trong thư mục WordPress . Như tên cho thấy, nó giúp bạn xây dựng các chủ đề của riêng mình, ngay cả khi không có kỹ năng kỹ thuật.
Đây là những gì nó có thể làm:
Xuất chủ đề đang hoạt động của bạn với cài đặt tùy chỉnh – Tải xuống chủ đề hiện đang hoạt động của bạn với bất kỳ thay đổi nào bạn đã thực hiện để sử dụng lại ở nơi khác.
Tạo chủ đề con – Thiết lập chủ đề con nơi bạn có thể thực hiện các thay đổi đối với trang web của mình mà không cần sửa đổi trực tiếp chủ đề chính.
Sao chép chủ đề của bạn – Bạn cũng có thể tạo một bản sao của chủ đề hiện tại của mình và xuất nó, bao gồm bất kỳ tùy chỉnh nào bạn đã thực hiện, làm chủ đề mới.
Ghi đè chủ đề hiện tại – Điều này làm cho các thay đổi của bạn vĩnh viễn bằng cách ghi đè cài đặt chủ đề mặc định với chủ đề của bạn.
Tạo một chủ đề trống – Plugin cũng có thể thiết lập một chủ đề soạn sẵn làm điểm bắt đầu trống để tạo thiết kế của riêng bạn.
Lưu các thay đổi của bạn dưới dạng biến thể kiểu – Thay vì tạo một chủ đề hoàn toàn mới, plugin cũng có thể lưu các tùy chỉnh của bạn dưới dạng biến thể kiểu của thiết kế hiện có.
Nhúng Google Fonts – Bạn có thích một kiểu chữ trên Google Fonts mà bạn muốn sử dụng cho chủ đề hoặc trang web của mình không? Plugin Create Block Theme có thể nhúng nó vào trang web của bạn chỉ với một vài cú nhấp chuột.
Nhúng phông chữ cục bộ – Một tùy chọn tương tự như trên nhưng dành cho phông chữ mà bạn có tệp. Plugin hỗ trợ các định dạng .ttf , .woff và .woff2 và giúp tải lên và nhúng chúng vào trang web của bạn dễ dàng.
Cách tạo chủ đề WordPress bằng trình chỉnh sửa trang web và plugin tạo chủ đề khối
Được rồi, hãy xem cách này hoạt động trong thực tế. Dưới đây, chúng tôi sẽ tạo một chủ đề hoàn toàn mới trong Trình chỉnh sửa trang web, sau đó xuất và sử dụng nó trên một trang web trực tiếp với sự trợ giúp của Tạo chủ đề khối.
Lưu ý: Tốt nhất bạn nên thực hiện việc xây dựng và tùy chỉnh chủ đề trong môi trường phát triển cục bộ hoặc trang web dàn dựng , nghĩa là tránh xa tầm nhìn của công chúng. Bạn không nên làm điều đó trên trang web trực tiếp của mình, nơi khách truy cập có thể xem kết quả của quá trình thử và sai của bạn.
Đối với hướng dẫn này, chúng tôi sẽ sử dụng chủ đề Blockbase làm ví dụ. Chủ đề được thực hiện để cung cấp một điểm khởi đầu trung lập cho các ý tưởng của riêng bạn.
Chúng tôi cũng đã lấp đầy nó với nội dung giả để xem rõ hơn những thay đổi ảnh hưởng đến thiết kế như thế nào. Bạn có thể sử dụng bất kỳ chủ đề WordPress hỗ trợ khối nào khác theo cách tương tự như bên dưới.
Bước 1: Cài đặt Plugin
Điều đầu tiên cần làm để tạo một chủ đề WordPress bằng Create Block Theme là cài đặt plugin. Để làm được điều đó, hãy truy cập trang web (dàn dựng) hiện có của bạn, sau đó đến Plugin> Add New .
Tại đây, hãy tìm kiếm nó theo tên và cài đặt và kích hoạt plugin khi nó bật lên trong danh sách.
Khi bạn đã hoàn thành việc đó, bạn sẽ tìm thấy một vài mục menu mới trong Giao diện .
Ở đây, chủ đề cung cấp tất cả các tùy chọn mà chúng ta đã nói ở trên. Chúng tôi sẽ đi vào chi tiết khi chúng tôi cần chúng.
Bước 2: Chỉnh sửa thiết kế trang web của bạn với trình tùy chỉnh và trình chỉnh sửa trang web
Với chủ đề cơ sở đã được thiết lập, bước tiếp theo hợp lý là thực hiện các sửa đổi bạn muốn . Ở đây, bạn có hai lựa chọn cơ bản tùy thuộc vào loại chủ đề bạn đã chọn làm cơ sở của mình.
Đầu tiên, có WordPress Customizer (trong Appearance> Customize ).
Điều này có sẵn cho các chủ đề không phải khối. Tùy thuộc vào chủ đề của mình, bạn sẽ tìm thấy các tùy chọn để thay đổi cài đặt phông chữ, sửa đổi màu nền hoặc hình ảnh, thêm hình ảnh tiêu đề và hơn thế nữa. Tuy nhiên, để có những thay đổi cơ bản hơn đối với giao diện chủ đề, bạn cần biết cách sử dụng trình soạn thảo mã.
Mặt khác, nếu bạn đang sử dụng chủ đề khối chính thức, bạn có quyền truy cập vào Trình chỉnh sửa trang web (nằm trong Giao diện> Trình chỉnh sửa), nơi bạn có thể thực hiện các thay đổi gần như không giới hạn đối với thiết kế chủ đề của mình.
Đây là giao diện của chủ đề Blockbase:
Với sự trợ giúp của Trình chỉnh sửa trang web, chúng tôi có thể nhanh chóng thay đổi nó một cách đáng kể.
Làm việc với các biến thể kiểu
Một trong những cách cơ bản nhất để tạo một chủ đề WordPress hoàn toàn mới là sử dụng Global Styles . Đó là nơi bạn có thể kiểm soát các cài đặt cơ bản như màu sắc, bố cục và kiểu chữ. Bạn tìm thấy chúng trong menu Kiểu bên trong Trình chỉnh sửa trang web.
Một cách nhanh chóng để sửa đổi giao diện chủ đề của bạn là sử dụng các biến thể kiểu được định cấu hình trước mà rất nhiều chủ đề khối đi kèm. Bạn tìm thấy chúng trong phần Duyệt qua các kiểu trong menu Kiểu chung.
Một cú nhấp chuột vào bất kỳ tùy chọn nào có sẵn ở đây ngay lập tức áp dụng chúng vào bản xem trước trang web.
Đây là một cách tuyệt vời để tạo đường cơ sở cho chủ đề tùy chỉnh của bạn. Ví dụ: trong trường hợp này, chúng tôi sẽ gắn bó với biến thể Charcoal mà Blockbase cung cấp.
Tăng chiều rộng nội dung
Điều thứ hai chúng tôi muốn làm với chủ đề này là tăng chiều rộng nội dung. Ngay bây giờ nó hơi quá hẹp. Thêm vào đó, nó rất dễ thực hiện.
Bạn chỉ cần chuyển đến phần Bố cục và sửa đổi các giá trị cho Nội dung và Rộng . Một lần nữa, bản xem trước trang web sẽ điều chỉnh ngay lập tức, cho thấy bạn hiện có bao nhiêu dung lượng cho nội dung của mình.
Thay đổi phông chữ của bạn
Tiếp theo, chúng tôi muốn sửa đổi một số kiểu chữ trên trang. Không có gì ngạc nhiên khi bạn tìm thấy rất nhiều cài đặt cho điều đó trong một menu cùng tên.
Tại đây, bạn có tùy chọn để sửa đổi giao diện của văn bản trang web chung, các liên kết, tiêu đề và các nút. Hãy bắt đầu với Văn bản , nơi bạn tìm thấy các tùy chọn sau:
Điều đầu tiên chúng tôi muốn làm là thay đổi kiểu chữ. Các tùy chọn ở đây phụ thuộc vào chủ đề bạn đang sử dụng. Nếu bạn không hài lòng với phạm vi lựa chọn, bạn có thể sử dụng plugin Tạo khối chủ đề để thêm nhiều phông chữ hơn vào trang web của mình. Nó cung cấp các tùy chọn dễ dàng cho điều đó.
Trong trường hợp này, điều đó không cần thiết. Chủ đề Blockbase đã có sẵn một số lượng lớn phông chữ để lựa chọn, vì vậy không cần phải thêm nhiều phông chữ nữa. Chúng ta có thể chỉ cần sử dụng menu thả xuống để chọn các kiểu chữ mới cho cả văn bản trang web bình thường và các tiêu đề của chúng ta.
Cùng với những thay đổi về kích thước phông chữ, giao diện và chiều cao dòng, điều này đã có ảnh hưởng đáng chú ý đến thiết kế của chủ đề.
Sửa đổi màu chủ đề
Điểm cuối cùng mà chúng tôi muốn thực hiện thông qua Global Styles là chơi với màu sắc. Bạn có thể đoán ra các tùy chọn cho việc này trong menu Màu sắc .
Tại đây, bạn có thể sửa đổi màu sắc của một số phần tử khác nhau, từ nền đến tất cả các loại phần tử dựa trên văn bản.
Trong trường hợp này, chúng tôi chủ yếu muốn thay đổi màu sắc của các liên kết, bao gồm cả tiêu đề bài đăng trên blog. Các tùy chọn cho điều đó có trong menu Liên kết . Bạn có thể nhấp vào hình chữ nhật ở trên cùng để đặt màu tùy chỉnh.
Thực hiện tương tự trong Di chuột và chúng ta đã hoàn thành với Global Styles vào lúc này.
Thay đổi các phần của Mẫu
Sau đó, đã đến lúc thực hiện các thay đổi đối với các phần tử trên trang. Chiến thắng nhanh chóng ở đây là hoán đổi đầu trang và chân trang. Nó rất dễ làm. Chỉ cần nhấp vào chúng trong trình chỉnh sửa, sử dụng biểu tượng ba chấm trong thanh cài đặt xuất hiện, sau đó chọn tùy chọn Thay thế .
Thao tác này sẽ mở ra một menu mới với các tùy chọn đầu trang hoặc chân trang khác nhau mà chủ đề vận chuyển cùng hoặc hiện có trên trang web của bạn.
Cuộn hoặc sử dụng thanh tìm kiếm để tìm thứ gì đó bạn thích. Một cú nhấp chuột vào bất kỳ mục nào trong số chúng sẽ tự động thay thế tiêu đề mặc định trên trang.
Nếu có điều gì đó bạn muốn sửa đổi về lựa chọn của mình, bạn luôn có thể nhấn vào nút Chỉnh sửa và làm việc trên nó một cách riêng biệt.
Khi điều này được thực hiện, đã đến lúc xử lý nội dung chính trên trang.
Trao đổi khối vòng lặp truy vấn
Thay đổi cuối cùng mà chúng tôi muốn làm trên trang chủ là thay đổi giao diện của danh sách các bài viết trên đó. Để làm điều đó, hãy mở menu Mẫu ở bên trái và chọn Truy vấn từ các tùy chọn thả xuống.
Khi bạn tìm thấy nội dung mình thích, hãy nhập nội dung đó vào trang (nhớ xóa Khối truy vấn cũ ). Chúng tôi có thể sửa đổi thêm cho đến khi nó trông theo cách chúng tôi muốn.
Ngoài ra, chúng tôi đã thêm một số dải phân cách và khoảng cách ở trên cùng và dưới cùng để có biện pháp tốt. Đây là kết quả của mọi thứ chúng tôi đã làm cho đến nay:
Nó từ từ đến với nhau, bạn có nghĩ vậy không? Đừng quên lưu bất kỳ thay đổi nào bạn thực hiện!
Bước 3: Sửa đổi Mẫu Trang bằng Trình chỉnh sửa Trang web
Bây giờ là lúc chuyển sang các mẫu trang . Trong trường hợp bạn không quen thuộc với thuật ngữ này, đây là các bản thiết kế kiểm soát thiết kế các trang và nội dung khác của bạn, tương tự như các loại bài đăng tùy chỉnh . Về mặt kỹ thuật, khi làm việc trên trang chủ, bạn cũng đang sửa đổi một mẫu có tên là Index .
Bạn có thể truy cập các mẫu trang cho phần còn lại của trang web của mình bằng cách nhấp vào biểu trưng trong Trình chỉnh sửa trang web (góc trên bên trái), sau đó chọn Mẫu .
Khi làm như vậy, bạn sẽ thấy danh sách tất cả các mẫu có sẵn trên trang web của mình:
Với sự giúp đỡ của họ, chúng tôi có thể chi tiết hơn một chút trong nhiệm vụ tạo một chủ đề WordPress tùy chỉnh mà không cần mã.
Thiết kế lại các Mẫu Đơn và Trang
Ví dụ, trong trường hợp này, chúng tôi muốn thay đổi Mẫu đơn . Nó chịu trách nhiệm kiểm soát bố cục của các bài đăng trên blog đơn lẻ và hiện tại giống như sau:
Một cú nhấp chuột vào tên của nó trong danh sách các mẫu sẽ đưa chúng ta đến Trình chỉnh sửa Mẫu:
Ở đây, bên cạnh việc thường xuyên dọn dẹp bố cục và thêm đầu trang và chân trang giống như trang chủ để làm cho chủ đề gắn kết hơn, chúng tôi muốn làm một việc duy nhất: đặt hình ảnh nổi bật dưới dạng biểu ngữ lên trên cùng với tiêu đề bài đăng ở trên cùng nó.
Điều này cũng dễ dàng như thay thế khối Hình ảnh nổi bật bằng khối Bìa và cài đặt nó để sử dụng hình ảnh nổi bật.
Chúng tôi cũng có thể đặt một lớp phủ lên trang bìa để đảm bảo rằng bất kỳ văn bản nào trên đó vẫn dễ đọc và điều chỉnh độ cao của nó khi chúng tôi ở đó.
Bước tiếp theo là tạo khối Hàng bên trong khối Bìa và sau đó di chuyển khối Tiêu đề trang vào đó.
Tại sao không đặt tiêu đề trang web trực tiếp vào trang bìa? Bởi vì khối Row cho phép chúng ta căn giữa nó theo cả chiều ngang và chiều dọc.
Tất cả những gì còn lại sau đó là điều chỉnh thiết kế và căn chỉnh để mọi thứ trông ổn. Đây là kết quả cuối cùng:
Trong khi chúng tôi đang ở đó, chúng tôi có thể làm tương tự đối với mẫu Trang . Đừng quên lưu các thay đổi của bạn!
Điều chỉnh Mẫu Lưu trữ
Cuối cùng, chúng tôi muốn làm việc trên mẫu Lưu trữ , hiện có dạng như sau:
Ở đây, bên cạnh việc thay đổi đầu trang và chân trang, chúng tôi muốn thực hiện một thay đổi lớn, đó là hiển thị tất cả các bài đăng có sẵn trong kho lưu trữ dưới dạng lưới.
Điều này cũng không quá khó. Chọn khối Query Loop , khối này chịu trách nhiệm hiển thị các bài đăng. Sau đó, trong thanh cài đặt, hãy chuyển nó từ danh sách sang hiển thị dạng lưới.
Sau đó, mẫu có giao diện như chúng tôi mong muốn:
Một lần nữa, hãy nhớ lưu để thực hiện các thay đổi của bạn vĩnh viễn!
Bước 4: Xuất chủ đề của bạn
Sau khi hài lòng với giao diện của chủ đề, đã đến lúc xuất nó. Site Editor thực sự có một tùy chọn cho tính năng này được tích hợp sẵn. Nhấp vào biểu tượng dấu ba chấm ở góc trên bên phải để truy cập menu Tùy chọn , sau đó chọn Xuất .
Thao tác này sẽ tải xuống các tệp chủ đề đã sửa đổi của bạn với tất cả các thay đổi về kiểu và mẫu mà bạn đã thực hiện dưới dạng tệp zip.
Nếu bạn muốn có nhiều tùy chọn phức tạp hơn, hãy chuyển sang plugin Tạo khối chủ đề. Bạn tìm thấy tất cả các tùy chọn xuất được đề cập ngay từ đầu trong Giao diện> Tạo Chủ đề khối .
Để di chuyển chủ đề của bạn từ trang web này sang trang web khác, bạn có thể xuất thẳng chủ đề của mình hoặc sao chép chủ đề đó. Tùy chọn thứ hai cho phép bạn chọn tên chủ đề của riêng mình và cung cấp mô tả, tên tác giả và các thông tin khác sẽ hiển thị trong WP Admin. Lưu ý rằng chỉ tên chủ đề là bắt buộc.
Cả hai tùy chọn này đều cho phép bạn sử dụng những gì bạn đã tạo làm chủ đề độc lập ở nơi khác. Thực hiện lựa chọn của bạn, nhập bất kỳ thông tin nào mà plugin yêu cầu bạn và nhấp vào Tạo để bắt đầu tải xuống. Sau đó, chuyển sang bước cuối cùng.
Bước 5: Tải chủ đề mới lên trang web WordPress.com của bạn
Đương nhiên, khi bạn tạo chủ đề WordPress tùy chỉnh của riêng mình và muốn sử dụng nó trên một trang web khác, trước tiên bạn phải tải nó lên. Điều này dễ dàng như đi đến Giao diện> Chủ đề .
Tại đây, chọn Cài đặt chủ đề ở góc trên bên phải và sau đó Tải lên Chủ đề ở màn hình tiếp theo.
Làm như vậy sẽ mở ra một biểu mẫu tải lên nơi bạn có thể sử dụng nút Duyệt qua để tìm chủ đề đã tải xuống trên ổ cứng của bạn và sau đó nhấp vào Cài đặt ngay để tải lên. Như đã đề cập, bạn có thể thực hiện việc này trên bất kỳ gói Business nào hoặc cao hơn .
Nếu bạn chọn kích hoạt chủ đề của mình trong màn hình tiếp theo, trang web của bạn sẽ bắt đầu sử dụng nó ngay lập tức.
Xin chúc mừng, bạn vừa học được cách tạo một chủ đề WordPress tùy chỉnh và cài đặt nó trên một trang web khác mà không cần chạm vào một dòng mã nào!
Sử dụng chủ đề tùy chỉnh của bạn để xây dựng một trang web đơn giản
Với chủ đề mới của bạn hiện diện và hoạt động trên trang web của bạn, WordPress sẽ tự động sử dụng nó cho thiết kế. Điều đó có nghĩa là bạn có thể bắt đầu xây dựng một trang web với giao diện mong muốn của mình ngay lập tức.
Một trong những điều tốt nhất về phương pháp này là các kiểu chủ đề chung tự động áp dụng và hiển thị trong Trình chỉnh sửa trang. Vì vậy, khi bạn đang tạo nội dung bài đăng hoặc trang, bạn có thể thấy ngay nội dung sẽ trông như thế nào trên trang web của bạn.
Ngoài ra, nó cũng sẽ sử dụng các mẫu bạn đã tạo. Ví dụ: khi bạn xem trước một bài đăng mà bạn đang làm, bạn sẽ thấy hình ảnh nổi bật làm nền tiêu đề của nó với tiêu đề bên trong nó.
Tương tự nếu bạn bắt đầu tạo trang. Đây là những gì một trang cơ bản về trang trông như thế nào:
Điền vào nội dung của bạn nếu cần, tạo menu điều hướng , thêm tiện ích và làm bất cứ điều gì khác mà bạn cần để có được một trang web chính thức. Và nếu bạn không thích điều gì đó về giao diện của chủ đề trên trang web trực tiếp của mình, bạn đã có tất cả kiến thức cần thiết để thực hiện những thay đổi cần thiết.
Tạo chủ đề WordPress tùy chỉnh: Không có vấn đề gì, ngay cả đối với người mới bắt đầu
Học cách tạo một chủ đề WordPress tùy chỉnh có thể cảm thấy như một thứ gì đó ngoài tầm với đối với những người không có kỹ năng phát triển. Rốt cuộc, trước đây bạn cần một số kỹ thuật nghiêm túc để tùy chỉnh các trang web và thiết kế web . May mắn thay, WordPress cung cấp các công cụ mạnh mẽ để bạn không chỉ có thể tạo chủ đề tùy chỉnh của riêng mình mà còn có thể xuất nó và sử dụng lại ở nơi khác.
Ở trên chúng ta đã xem qua quá trình xây dựng một chủ đề phù hợp với nhu cầu của bạn với sự trợ giúp của Trình chỉnh sửa trang web và Trình chỉnh sửa mẫu. Bằng cách làm việc với Global Styles và sắp xếp các phần mẫu và phần tử trang, bạn có thể nhanh chóng thiết lập bố cục và thiết kế chủ đề tùy chỉnh. Sau khi xuất nhanh, bạn có thể sử dụng nó như một chủ đề độc lập ở bất cứ đâu bạn muốn.
