Hướng dẫn lập trình theme WordPress cơ bản dành cho người mới [NEW]

Trong bài viết này, chúng tôi sẽ thảo luận về cách lập trình chủ đề wordpress.

Mặc dù có vô số chủ đề WordPress có sẵn trên thị trường.

Nhưng để tìm được chủ đề phù hợp với mình sẽ vô cùng khó khăn đúng không?

Với lý do như vậy, nhiều người đã dành thời gian để lập trình giao diện theo ý muốn của họ.

Tuy nhiên, việc lập trình này sẽ quá khó đối với những người mới bắt đầu sử dụng WordPress.

Nhưng may mắn là Tạo chủ đề wordpress của riêng bạn hoàn toàn có thể làm được.

Hơn nữa, có thể bạn sẽ tìm thấy niềm đam mê của mình trong công việc này, và hãy theo đuổi nó

laptop-theme-wordpress

Giới thiệu về lập trình chủ đề (Nhà phát triển chủ đề WordPress)

Cùng với sự phát triển như vũ bão của WordPress, nghề lập trình theme không còn quá xa lạ.

WordPress quá linh hoạt, quá mạnh mẽ. Từ trang web bán hàng, đến giới thiệu sản phẩm, công ty đều có thể làm được.

Mọi doanh nghiệp hay cá nhân đều có thể sở hữu một trang web.

Hoặc đơn giản là bạn muốn chỉnh sửa theme đang sử dụng cho đẹp hơn.

Đây là lúc, bạn có thể sẽ nghĩ đến việc lập trình theme wordpress cho riêng mình.

Thậm chí để tùy chỉnh một chủ đề hiện có, bạn nên hiểu cấu trúc của một chủ đề WordPress.

Ngoài ra, đây cũng có thể là một Công việc để bạn theo đuổi Trình thiết kế trang web WordPress.

Trước khi xây dựng trang web: chúng tôi sẽ cần hai điều:

  • Nơi tốt nhất để thuê hosting – Những điều bạn cần biết
  • Nơi tốt nhất để mua tên miền, trong nước hay nước ngoài?

Ngoài ra, bạn cũng có thể tạo một trang web trên localhost để học cho tiết kiệm. Tìm hiểu thêm về CSS và PHP, những thứ này sẽ rất hữu ích sau này.

Cuối cùng, chúng tôi sẽ cần một công cụ quan trọng hơn sẽ giúp quá trình phát triển chủ đề dễ dàng hơn nhiều: Chủ đề người mới bắt đầu

Chủ đề Starter là gì? (Và tại sao chúng ta cần nó?)

genesis-framework

Khung Genesis rất nổi tiếng và phổ biến

Chủ đề Người mới bắt đầu là một chủ đề WordPress mà bạn sử dụng làm khung cho lập trình chủ đề của mình.

Sử dụng chủ đề dành cho người mới bắt đầu cho phép bạn có một khuôn khổ vững chắc và không phải lo lắng về việc viết mã giao diện từ đầu.

Chủ đề dành cho người mới bắt đầu cũng sẽ giúp bạn hiểu rõ hơn về cách hoạt động của WordPress.

Bằng cách hiển thị cấu trúc cơ bản của giao diện cũng như cách các bộ phận hoạt động với nhau.

Có rất nhiều chủ đề bắt đầu trên thị trường hiện nay, bao gồm Underscores, FoundationPress, UnderStrap và Bones…

Trong bài viết này tôi sẽ sử dụng Dấu gạch dưới để làm ví dụ.

Đây là một lựa chọn tốt cho người mới, vì công cụ này bao gồm các tính năng cơ bản và dễ sử dụng.

Bên cạnh đó, Underscores được phát triển bởi Automattic, bảo mật hơn, tương thích và hỗ trợ lâu dài.

Cách tạo chủ đề WordPress (5 bước)

Nếu bạn đã chuẩn bị đầy đủ, hãy bắt đầu lập trình chủ đề WordPress!

Như đã nói, tôi sẽ sử dụng Chủ đề Stater để làm cho hướng dẫn trực quan hơn.

Tuy nhiên, nếu bạn muốn tạo mọi thứ từ đầu, sẽ khó hơn nhiều nếu không có giao diện mẫu.

Nó đòi hỏi bạn phải có kỹ năng thành thạo và kinh nghiệm dày dặn trong việc viết mã cũng như kiến ​​thức về lập trình web.

Bước 1: Thiết lập Môi trường cục bộ

xampp

Đầu tiên bạn cần tạo môi trường phát triển địa phương (môi trường địa phương).

Có thể hiểu đơn giản là bạn tạo một môi trường giả lập trên chính máy tính của mình.

Để thuận tiện cho việc lập trình theme và đây cũng là cách mà nhiều Lập trình viên làm sau đó đối với Hosting.

LocalHost là một cách an toàn để lập trình chủ đề mà không ảnh hưởng đến trang web đang hoạt động.

Có nhiều cách, tôi thường sử dụng XAMPP. Quá trình cài đặt rất đơn giản và hỗ trợ nhiều nền tảng như Windows, Linus

cai-dat-localhost-xampp

Đây là hướng dẫn chi tiết để cài đặt LocalHost với XAMPP.

Bước 2: Tải xuống và cài đặt Chủ đề Starter

Giống như hầu hết các mẫu chủ đề khác, Underscores rất dễ tải xuống và cài đặt.

Trên thực tế, tất cả những gì bạn cần làm là truy cập trang web của bạn và đặt tên cho chủ đề của bạn.

Dấu gạch dưới-chủ đề

Nếu bạn muốn tùy chỉnh nhiều hơn, bạn có thể dễ dàng thực hiện việc này bằng cách nhấp vào Tùy chọn nâng cao.

Gạch dưới-tạo

Sẽ có một phần để bạn điền thêm thông tin, chẳng hạn như tác giả và mô tả.

Dấu gạch dưới-Nâng cao-Tùy chọn

Ngoài ra còn có một tùy chọn nâng cao hơn nữa là thêm tệp Bảng định kiểu tuyệt vời về mặt cú pháp (SASS) vào giao diện.

Nếu bạn không biết, SASS là ngôn ngữ tiền xử lý cho CSS, cho phép người dùng sử dụng các thuật toán từ cơ bản đến phức tạp, v.v.

Khi bạn đã thực hiện các lựa chọn và thiết lập của mình, hoặc nhấp vào Phát rađiều này sẽ tải xuống tệp .zip chủ đề mà bạn vừa thiết lập ở trên.

Đây là giao diện khung mà bạn sẽ sử dụng để lập trình giao diện của mình. Vì vậy, hãy cài đặt chủ đề này trên localhost.

Khi bạn đã cài đặt chủ đề, bạn có thể dễ dàng xem trước trang web của mình trông như thế nào.

Stater-theme-demo

Đây là một trong những bước “nền tảng” giúp bạn lập trình giao diện của mình lên một cấp độ chuyên nghiệp hơn.

Bước 3: Hiểu cách hoạt động của nền tảng WordPress

Trước khi tùy chỉnh chủ đề của riêng bạn, hãy tìm hiểu cách các tệp trong WordPress hoạt động.

Trước tiên hãy nói về các tệp mẫu, đây là những thành phần chính tạo nên giao diện WordPress.

Các tệp này xác định bố cục và giao diện của nội dung trên trang web.

Bạn có thể hiểu nôm na, WordPress này giống như một trò chơi lego, được ghép bởi nhiều mảnh ghép lại để tạo thành một trang web hoàn chỉnh. Các tệp mẫu này là các phần của câu đố.

Ví dụ: tệp header.php được sử dụng để tạo tiêu đề, trong khi comments.php cho phép bạn hiển thị các nhận xét.

WordPress xác định tệp mẫu nào được sử dụng trên mỗi trang bằng hệ thống phân cấp mẫu.

Đây là thứ tự mà WordPress tìm kiếm các tệp mẫu phù hợp trên mỗi lần tải trang.

Ví dụ: nếu bạn truy cập URL http://example.com/post/this-post, WordPress sẽ tìm kiếm các tệp mẫu sau theo thứ tự sau:

  • Tìm con đường đúng, (bài đăng này)
  • Tìm tệp phù hợp với ID bài viết
  • Một tệp bài đăng chung chung, chẳng hạn như single.php
  • Một tệp lưu trữ, chẳng hạn như archive.php
  • Tệp index.php

Vì tất cả các chủ đề đều yêu cầu tệp index.php, đây sẽ là tệp mặc định khi không tìm thấy tệp nào khác.

Dấu gạch dưới chứa các tệp mẫu cơ bản nhất, chúng luôn hoạt động hoàn hảo.

Tuy nhiên, bạn có thể dễ dàng chỉnh sửa các tệp mẫu này và xem chúng hoạt động như thế nào.

Một yếu tố quan trọng khác mà bạn cần biết là The Loop.

Đây là đoạn mã mà WordPress sử dụng để hiển thị nội dung nên chúng ta có thể hiểu đây là trái tim của WordPress.

Vòng lặp xuất hiện trong tất cả các tệp mẫu hiển thị nội dung bài đăng. Chẳng hạn như tệp index.php đẹp sidebar.php.

Nó khá phức tạp nên tôi khuyến khích bạn đọc thêm để hiểu rõ hơn về cách WordPress hiển thị nội dung bài đăng.

Rất may là The Loop sẽ được tích hợp vào giao diện nhờ tính năng Underscores nên bạn không cần quá lo lắng về vấn đề này.

Bước 4: Lập trình chủ đề wordpress của bạn

Nhiều người nghĩ rằng các giao diện chỉ nhằm mục đích thẩm mỹ.

Nhưng chúng thực sự có tác động rất lớn đến hiệu suất và chức năng của trang web của bạn.

Dưới đây là một số cách cơ bản để thiết lập giao diện.

Thêm chức năng với “Hook”

Trong quá trình lập trình chủ đề, bạn sẽ gặp phải khái niệm về Hook.

Cái móc là mã được chèn vào tệp mẫu, cho phép chạy Hành động PHP trên các khu vực khác nhau của trang web để: hiển thị thông tin khác, chèn định dạng…

Hầu hết các hook đều được triển khai trực tiếp vào lõi WordPress, nhưng một số hook cũng mở và cho phép các nhà phát triển tùy chỉnh chúng.

Chúng ta hãy xem xét một số hook và chức năng phổ biến:

wp_head () – Dùng để thêm Trong header.php và cho phép các kiểu, tập lệnh và thông tin khác chạy trong khi web đang tải.

wp_footer () – Để thêm vào tệp footer.php ngay trước nhãn. Móc này thường được sử dụng để chèn mã Google Analytics.

wp_meta () – Chúng ta sẽ thường thấy cái móc này xuất hiện trong sidebar.phpcung cấp các tập lệnh bổ sung (như đám mây thẻ).

dạng bình luận() – Được sử dụng để thêm trực tiếp vào comments.php trước khi đóng

để hiển thị dữ liệu bình luận.

Các móc này sẽ được bao gồm trong giao diện Dấu gạch dưới.

Tuy nhiên, nếu bạn muốn tìm hiểu thêm về nó, hãy vào Cơ sở dữ liệu Hooks (giống như wiki về Hooks).

Để xem tất cả các móc có sẵn và tìm hiểu thêm về chúng.

Chỉnh sửa kiểu bằng CSS

Cascading Style Sheets (CSS) là một ngôn ngữ lập trình xem xét tất cả nội dung trên trang web của bạn.

Trong WordPress, điều này được thực hiện bằng cách sử dụng tệp style.css.

Đây là một tệp thường sẽ được tìm thấy trong mọi chủ đề, nhưng đây chỉ là kiểu cơ bản chưa được tùy chỉnh.

Nếu bạn muốn có một ví dụ nhanh về cách CSS hoạt động, hãy chọn bất kỳ phần nào từ trang web và nhấp chuột phải vào + Kiểm tra

css-starter-theme

Ví dụ: Tôi sẽ thay đổi màu chữ Demo từ màu tím sang màu Cam chẳng hạn, bạn để ý ô màu đỏ mà tôi đã khoanh tròn.

css-starter-theme-1

Bây giờ tất cả những gì tôi cần làm là sao chép mã trong ô mà tôi đã khoanh tròn và dán vào tệp style.css.

Trên con đường trở thành một Website Designer, bạn chắc chắn sẽ phải thành thạo CSS.

Nó có rất nhiều hiệu ứng như thay đổi màu sắc, căn lề, đổ bóng …. rất nhiều thứ.

Bước 5: Nén giao diện và tải nó lên Web

Khi bạn đã hoàn thành lập trình chủ đề đầu tiên của mình.

Đây là lúc bạn cần chạy các bài kiểm tra để xem giao diện có hoạt động bình thường hay không?

Để đảm bảo rằng chủ đề sẽ hoạt động hoàn hảo trong mọi trường hợp, bạn nên sử dụng dữ liệu từ Kiểm tra Đơn vị Chủ đề.

Đây là các tệp nội dung demo XML, đa dạng với nhiều dạng nội dung khác nhau.

Tải xuống ở đây.

Tải xuống và chọn Công cụ »Nhập» Chạy Trình nhập. Chọn tập tin themeunittestdata.wordpress.xml

Run-Importer

Chúng ta hãy quay lại để xem theme có hoạt động tốt với những nội dung demo đó không. Tất nhiên, chủ đề này không phải là hoàn hảo.

Cuối cùng, nén chủ đề và cài đặt nó trên bất kỳ trang web nào bạn muốn. Hãy nhớ nén tệp zip!

Sự kết luận

Để lập trình một chủ đề WordPress từ đầu đến cuối không hề đơn giản.

Nhưng với cách làm trên của mình sẽ rút ngắn được rất nhiều thời gian và giúp bạn hiểu rõ hơn về WordPress. Các tệp hoạt động như thế nào để tạo một trang web WordPress.

Nếu bạn đang có kế hoạch trở thành một Nhà phát triển WordPressTheme, đó sẽ là một con đường dài.

Còn nhiều điều để học nhưng nếu bạn đam mê và quyết tâm MỌI THỨ ĐỀU CÓ THỂ.

Đây chỉ là những hướng dẫn cơ bản. Tôi sẽ viết sâu hơn trong phần tiếp theo của loạt bài này.

Mọi thắc mắc vui lòng comment bên dưới! Hoặc đơn giản là muốn giao lưu, tôi sẵn sàng