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

Làm sao để lập trình theme WordPress (5 bước)

Starter Theme là gì? ( & vì sao tất cả chúng ta cần nó?)

Trong nội dung này, tất cả chúng ta sẽ cùng bàn luận về cách làm cách nào để lập trình theme wordpress.

Dù rằng có vô vàn giao diện WordPress có sẵn trên thị trường.

Nhưng để tìm được theme theo đúng ý mình sẽ cực khó phải không các bạn?

Với nguyên nhân như thế, nhiều người đã dành thời gian để lập trình giao diện theo ý họ.

Bên cạnh đó, việc lập trình này sẽ quá khó với người mớ học sử dụng WordPress.

Nhưng may mắn là việc tự tạo giao diện wordpress tuyệt đối có thể làm được.

Hơn nữa biết đâu bạn sẽ tìm được niềm thích thú trong công việc này, & đi theo nó ?

Giới thiệu về lập trình theme (WordPress Theme Developer)

Cùng với sự lớn mạnh như vũ bão của WordPress thì ngành lập trình theme đã không còn xa lạ.

WordPress quá linh động, quá mạnh khỏe. Từ trang web bán hàng, đến giới thiệu sản phẩm, cty nó đều làm được

Mọi công ty hay cá nhân đều có thể sỡ hữu trang web.

Hoặc dễ dàng bạn chỉ mong muốn cân chỉnh theme đang sử dụng cho đẹp hơn.

Đây là lúc, bạn có thể sẽ nghĩ tới lập trình theme wordpress của riêng mình.

Kể cả để tùy biến một theme có sẵn, bạn cũng cần hiểu kết cấu của theme WordPress.

Không những thế thì đây cũng có thể là một Job để bạn theo đuổi WordPress Trang web Designer.

Trước khi xây dựng trang web: tất cả chúng ta sẽ cần phải có hai thứ sau:

Không những thế thì bạn cũng có thể tạo trang web trên localhost để học cho tiết kiệm. Hãy xem thêm về CSS & PHP, rất có lợi cho bạn sau này.

Cuối cùng, tất cả chúng ta sẽ cần thêm một dụng cụ trọng yếu nữa, nó sẽ làm cho quá trình lập trình theme trở nên đơn giản hơn nhiều: Starter Theme

Starter Theme là gì? ( & vì sao tất cả chúng ta cần nó?)

genesis-framework

Genesis framework rất nổi tiếng & thông dụng

Starter Theme (giao diện bắt đầu) là một giao diện WordPress mà bạn sử dụng làm khung sườn để lập trình theme.

Sử dụng starter theme phép bạn có một Framework bền vững & không phải lo ngại về việc phải coding một giao diện từ đầu.

Starter Theme cũng sẽ giúp bạn thấu hiểu hơn cách WordPress hoạt động.

Nhờ vào việc hiển thị kết cấu cơ bản của giao diện cũng như cách các phần hoạt động với nhau.

Có rất là nhiều starter theme trên thị trường hiện tại, bao gồm Underscores, FoundationPress, UnderStrap & Bones

Trong nội dung này mình sẽ sử dụng Underscores để làm chẳng hạn.

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

Không những thế, Underscores được lớn mạnh bởi Automattic, an toàn hơn, tương thích & được bổ trợ trong thời gian dài.

Xem Thêm  JavaScript JSON thành chuỗi - javascript json thành chuỗi

Làm sao để lập trình theme WordPress (5 bước)

Nếu đã chuẩn bị đầy đủ, hãy khởi đầu lập trình theme WordPress !

Như đã nói, mình sẽ sử dụng Stater Theme để hướng dẫn trở nên trực quan hơn.

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

Nó đòi hỏi bạn cần phải có tuyệt kỹ điêu luyện & kinh nghiệm dày dặn về coding cũng như tri thức về lập trình website.

Bước 1: Thiết lập Local Environment

xampp

Đầu tiên, bạn cần tạo nên local development environment (môi trường cục bộ).

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

Để tiện lập trình theme & đây cũng là cách mà nhiều Developer làm sau đó mới cho lên Host.

LocalHost là cách an toàn để lập trình một giao diện mà không tác động đến live trang web.

Có nhiều cách, mình thường dùng XAMPP. Quà trình setup rất dễ bổ trợ nhiều nền móng như Windows, Linus

Đây là hướng dẫn cụ thể setup LocalHost với XAMPP.

Bước 2: Tải xuống & setup Starter Theme

Giống như chủ yếu các giao diện mẫu khác, Underscores rất đơn giản dàng để tải về & setup.

Thực tiễn, toàn bộ những gì bạn cần làm là vào trang web & đặt tên cho giao diện của mình.

Underscores-theme

Nếu mong muốn tuỳ biến hơn nữa, bạn cũng đơn giản làm việc này bằng cách bấm vào Advanced Options.

Underscores-generate

Tại đây sẽ có mục để bạn điền thêm thông tin, ví dụ như author & description.

Underscores-Advanced-Options

Không những thế còn tồn tại tuỳ chọn chuyên sâu hơn nữa này là thêm các file Syntactically Awesome StyleSheets (SASS) vào trong giao diện.

Nếu các bạn chưa biết, SASS là ngôn từ tiền giải quyết cho CSS, cho phép người dùng sử dụng các thuật toán từ cơ bản đến cầu kỳ, ?.?.

Khi đã lựa chọn & thiết lập xong, hay bấm vào Generate, thao tác này sẽ tải xuống tệp .zip theme mà bạn vừa thiết lập ở trên.

Đây là bộ giao diện khung mà bạn sẽ sử dụng nó để lập trình cho giao diện của mình. Vì thế hãy setup theme này trên localhost.

Sau khoảng thời gian đã setup giao diện, bạn đơn giản xem trước trang web sẽ trông như vậy nào.

Stater-theme-demo

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

Bước 3: Thấu hiểu cách nền móng WordPress hoạt động

Trước khi tuỳ chỉnh giao diện của riêng mình, hãy tham khảo các file trong WordPress hoạt động như nào.

Đầu tiên hãy nói về các template file, đây là các thành phần chính tạo ra giao diện WordPress.

Những file này xác nhận bố cục & giao diện của bài viết trên trang web.

Bạn có thể hiểu như này WordPress nó giống như trò chơi lego, được ghép bởi rất là nhiều mảnh ghép để tạo nên một trang web hoàn chỉnh. Các template file này chính là những mảnh ghép đó.

Xem Thêm  Viết hàm bằng Python - python viết một hàm

Chẳng hạn: file header.php được sử dụng để tạo tiêu đề, trong lúc comments.php cho phép bạn hiển thị các phản hồi.

WordPress sẽ xác nhận template file nào được sử dụng trên mỗi trang nhờ vào phân cấp (template hierarchy).

Đây là thứ tự để WordPress tìm kiếm các template file thích hợp trong mỗi lần tải trang.

Chẳng hạn: nếu bạn truy cập vào URL http://example.com/post/this-post, WordPress sẽ tìm các tệp mẫu sau theo thứ tự sau:

  • Tìm đúng đường dẫn, (this-post)
  • Tìm các file phù phù hợp với ID nội dung
  • Một file single bài viết chung, ví dụ như single.php
  • Một archive file, ví dụ như archive.php
  • File index.php

Vì toàn bộ các giao diện đều yêu cầu tệp index.php, nên đây sẽ là tệp mặc định khi không tìm ra các tệp khác.

Underscores chứa các template file cơ bản nhất, chúng luôn hoạt động một cách hoàn hảo.

Bên cạnh đó, bạn đơn giản cân chỉnh các tệp mẫu này & xem cách chúng hoạt động.

Một yếu tố trọng yếu khác bạn cần nắm được này là The Loop.

Đây là đoạn mã mà WordPress sử dụng để hiển thị bài viết, thành ra tất cả chúng ta có thể hiểu đây như là con tim của WordPress vậy.

The Loop hiện ra trong toàn bộ các template file hiển thị bài viết bài viết. Ví dụ như tệp index.php hay sidebar.php.

Nó khá cầu kỳ mà mình động viên các chúng ta nên tham khảo thêm để thấu hiểu hơn về cách WordPress hiển thị bài viết bài đăng.

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

Bước 4: Lập trình theme wordpress của các bạn

Nhiều người hay cho là các giao diện chỉ dành cho mục đích thẩm mỹ.

Nhưng chúng thực sự có ảnh hưởng rất lớn đến hiệu năng cũng như tính năng trong trang web của các bạn.

Đây là 1 vài cách cơ bản để thiết lập giao diện.

Thêm các tính năng với “Hook”

Trong quá trình lập trình theme bạn sẽ gặp được định nghĩa Hook.

Hook là các đoạn code được chèn vào template file, cho phép chạy các PHP action trên các khu vực khác nhau của trang web để: hiển thị các thông tin khác, chèn định dạng…

Chủ yếu các hook được triển khai trực tiếp vào lõi WordPress, nhưng một số hook cũng để mở & cho phép developer tuỳ chỉnh chúng.

Tất cả chúng ta hãy cùng tham khảo một số các hook & các tính năng thường gặp:

wp_head () – Dùng để thêm vào <headvàgt; trong header.php & kích hoạt style, script & thông tin khác chạy trong lúc website đang load.

wp_footer () – Để thêm vào tệp dưới cùng của trang.php ngay trước thẻ </bodyvàgt;. Hook này hay được dùng để chèn mã Google Analytics.

wp_meta () – Tất cả chúng ta sẽ hay thấy hook này hiện ra trong sidebar.php, phân phối các tập lệnh bổ sung (như đám mây thẻ – tag cloud).

Xem Thêm  Làm cách nào để lấy nội dung HTML của iFrame bằng JavaScript? - nhận văn bản từ iframe

comment_form () – Dùng để thêm trực tiếp vào comments.php trước đóng thẻ </divvàgt; nhằm hiển thị dữ liệu đánh giá.

Các hook này sẽ được đi kèm theo giao diện Underscores.

Bên cạnh đó, nếu như các bạn mong muốn xem thêm về nó hãy vào Hooks Database (giống kiểu wiki về Hook).

Để xem toàn bộ các hook có sẵn & xem thêm về chúng.

Căn chỉnh style với CSS

Cascading Style Sheets (CSS) là một ngôn từ lập trình gương mặt cho toàn bộ bài viết trên trang web của các bạn.

Trong WordPress, việc này được thực hiện bằng cách dùng file style.css.

Đây là file sẽ thường có trong mọi theme, nhưng đây chỉ là kiểu cơ bản chưa được tuỳ biến.

Nếu bạn mong muốn một chẳng hạn nhanh về cách CSS hoạt động, hãy chọn bất kỳ phần từ nào trên trang web & chuột phải + Inspect

css-starter-theme

Chẳng hạn: Tôi sẽ đổi màu chữ Dùng thử từ màu tím sang màu Cam ví dụ, hãy để mắt đến ô đỏ tôi khoanh tròn.

css-starter-theme-1

Việc hiện tại là sao chép đoạn code trong ô tôi khoanh tròn & dán vào file style.css.

Trên đoạn đường trở thành một Trang web Designer chắc cú bạn sẽ phải điêu luyện CSS.

Nó có nhiều công dụng như đổi màu, chỉnh sửa lề, đổ bóng…. rất rất là nhiều thứ.

Bước 5: Nén giao diện & tải lên Website

Khi bạn đã giải quyết việc lập trình theme trước tiên của mình.

Đây là lúc bạn cần chạy thực nghiệm để xem giao diện có hoạt động tốt không?

Để bảo đảm là giao diện sẽ hoạt động hoàn hảo trong mọi trường hợp, chúng ta nên sử dụng dữ liệu từ Theme Unit Check.

Đây là những file bài viết dùng thử dạng XML, phong phú với nhiều loại bài viết khác nhau.

Download tại đây.

Tải về & chọn Tool » Import » Run Importer. Chọn file themeunittestdata.wordpress.xml

Run-Importer

Hãy quay lại xem theme có hoạt động tốt với những bài viết dùng thử đấy không. Đương nhiên theme này mình cũng chưa phải là hoàn thành.

Cuối cùng hãy nén theme lại & setup trên bất kỳ trang nào bạn mong muốn. Nhớ là nén file zip nhé !

Tổng kết

Để lập trình theme WordPress từ đầu đến cuối không phải dễ dàng.

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

Nếu bạn đang định trở thành WordPressTheme Developer, sẽ là cả một đoạn đường dài.

Nhiều thứ phải học, nhưng nếu bạn thích thú & quyết tâm MỌI THỨ ĐỀU CÓ THỂ.

Đây cũng chỉ là những hướng dẫn căn bản. Tôi sẽ viết sâu hơn trong phần tới với seri này.

Mọi khúc mắc cứ phản hồi ở dưới nhé ! Hoặc chỉ dễ dàng mong muốn giao lưu mình rất sẵn sàng ?

Viết một bình luận