Giới thiệu về giải phẫu của một chủ đề WordPress

  1. 1. Hướng dẫn WordPress: Cách tạo Theme WordPress từ HTML (Phần 1)
  2. 2. Hướng dẫn WordPress: Cách tạo chủ đề WordPress từ HTML (Phần 2)
  3. 3. Hiện đang đọc: Giới thiệu về giải phẫu của một chủ đề WordPress

Cách đây một thời gian, chúng tôi đã giới thiệu với bạn khái niệm tạo chủ đề WordPress từ HTML. Chúng tôi chia hướng dẫn thành hai phần và hôm nay tất cả chúng tôi đều nói về hai hướng dẫn, vì vậy hãy coi bài đăng này là phần thứ ba trong loạt bài. Mục tiêu của tôi là tách rời chủ đề WordPress để cung cấp cho bạn một bức tranh rõ ràng về cách thức hoạt động của nó (chủ đề).


Bài đăng này giả định rằng bạn có kiến ​​thức làm việc về HTML và CSS. Tôi sẽ tiếp tục và tuyên bố rằng có các kỹ năng HTML và CSS là điều kiện tiên quyết trong việc thiết kế các chủ đề WordPress. Một điều nữa, bài đăng này sẽ tránh xa các từ lớn và các khái niệm khó – nó sẽ dễ hiểu, vì vậy hãy sẵn sàng để vui chơi và học hỏi.

Một chút mồi HTML

Mỗi trang web HTML được chia thành các phần khác nhau bằng cách sử dụng

nhãn. Ví dụ, bạn có thể phá vỡ cơ thể () của trang web của bạn thành một số phần như điều hướng, tiêu đề, nội dung chính, thanh bên và chân trang trong số các phần khác.

Khi bạn có trang web của mình trong các phần, bạn có thể đặt hàng (hoặc sắp xếp) các phần theo ý muốn bằng CSS. Quá trình này được gọi là kiểu dáng, và nó bao gồm thêm các yếu tố phong cách khác như màu sắc, kích thước, đường viền, hiệu ứng đặc biệt, v.v. Đó là sức mạnh của CSS, mà – nhân tiện – là viết tắt của Cascading Style Sheets. Khi bạn đặt các tệp HTMl và CSS của bạn lại với nhau và tạo ra một vài hình ảnh, bạn sẽ có một trang web hoàn chỉnh.

Mọi thứ không khác lắm với các chủ đề WordPress. Như chúng ta đã thấy trong phần 1 của Cách tạo chủ đề WordPress từ HTML, các chủ đề WordPress được chia thành các tệp khác nhau. Nếu bạn không thể phát hiện ra một số điểm tương đồng tại thời điểm này, cho phép tôi giải thích.

Các trang web HTML tĩnh được chia thành các bộ phận (cái mà chúng tôi gọi là các phần trước đó) bằng cách sử dụng

thẻ (hoặc bảng nếu bạn thực sự cũ trường). Mặt khác, các chủ đề WordPress được chia thành các tệp php khác nhau, sau đó được đặt lại với nhau bằng các thẻ mẫu.

Do đó, thay vì có tất cả các thành phần cơ thể (tiêu đề, nội dung chính, thanh bên, chân trang, v.v.) sống trong một tệp duy nhất (như trường hợp với HTML tĩnh), mỗi thành phần cơ thể (trong chủ đề WordPress) sống trong một tệp riêng biệt.

Vì vậy, tiêu đề sẽ nằm trong tiêu đề.php, thanh bên sẽ tìm thấy trang chủ trong sidebar.php, nội dung chính sẽ nằm trong tệp index.php hoặc single.php (nếu là bài đăng) hoặc page.php (nếu đó là trang ). Phần chân trang sẽ sống trong footer.php và cứ thế.

Bạn đang theo dõi? Kiểm tra hình minh họa dưới đây:

html-wordpress = cấu trúc

Từ hình minh họa của chúng tôi ở trên, , được gọi là thẻ mẫu. Công việc của họ là tìm nạp tiêu đề.php, sidebar.php và footer.php theo thứ tự đó từ thư mục chủ đề của bạn và hiển thị nội dung trong tệp index.php của bạn, do đó hoàn tất trang web.

Don hà hãy để .php tiện ích mở rộng làm bạn sợ, nội dung bên trong các tệp php chỉ là mã HTML mà bạn đã quen thuộc. Chẳng hạn, header.php của bạn có thể chứa điều hướng danh sách HTML điển hình. Tương tự, bạn có thể đặt mã HTML điển hình trong footer.php, sidebar.php và index.php.

Bạn cũng có thể đặt loop.php hoạt động trong tệp index.php của bạn (hoặc bất cứ nơi nào bạn thích) để hiển thị các bài đăng trên blog của bạn, nhưng tôi nên làm chậm và quay lại giải phẫu các chủ đề WordPress. Tôi đã đề cập một hoặc hai điều về vòng lặp trong phần 2 về cách tạo chủ đề WordPress từ HTML. và chúng ta sẽ nói về nó (vòng lặp) và các chức năng khác trong tương lai.

Di chuyển trên thị trường

Một chủ đề WordPress cơ bản bao gồm ít nhất bốn tệp mẫu cụ thể là:

  1. index.php
  2. tiêu đề.php
  3. sidebar.php
  4. chân trang.php

Hãy cùng xem những gì diễn ra trong mỗi huyền diệu các tập tin:

Tệp mẫu Index.php

Đây là tập tin chính mà bạn không có chủ đề WordPress hoạt động. Đây là tệp đầu tiên (hoặc mặc định) tải khi bạn truy cập trang web WordPress. Coi nó là tương đương với index.html.

Một index.php điển hình trong các chủ đề WordPress sẽ trông như thế này:





Bạn có thể thêm vòng lặp giữa để hiển thị các bài đăng trên blog trên trang chủ (index.php) như dưới đây:




Tệp mẫu Header.php

Tệp mẫu này chứa mã tiêu đề, điều hướng và mã đầu HTML của bạn. Về cơ bản, header.php lưu trữ mọi thứ bạn muốn hiển thị ở đầu trang web của bạn. Bạn biết đấy, những thứ như tiêu đề của trang web của bạn và những thứ như thế.

Bạn cũng liên kết đến biểu định kiểu CSS của bạn trong tiêu đề.php. Đây là một ví dụ cơ bản của header.php:





<?php wp_title( '|', true, 'right' ); ?>







Đây là phần tiêu đề. Đặt logo của bạn và các chi tiết khác ở đây.

Tệp mẫu Sidebar.php

Sidebar.php chứa mọi thứ bạn cần xuất hiện trên (các) thanh bên. Thanh bên chứa các menu, widget, danh mục, biểu tượng phương tiện truyền thông xã hội, nội dung tùy chỉnh, mã HTML như quảng cáo, v.v..

Sidebar.php có thể chứa các cuộc gọi đánh dấu HTML thuần túy hoặc các hàm gọi php tùy theo nhu cầu của bạn. Như vậy, một sidebar.php cơ bản có thể trông như sau:

Tệp mẫu Footer.php

Bạn nghĩ gì đi vào footer.php? Bạn có thể đặt thông tin bản quyền của mình ở đây, menu bổ sung, liên kết, biểu tượng phương tiện truyền thông xã hội – bất cứ điều gì bạn muốn! Bạn có muốn xem một footer.php cơ bản trông như thế nào không? Đây:

Đặt nội dung chân trang của bạn ở đây bao gồm các lệnh gọi hàm php (để tìm nạp các tệp mẫu khác nhau, ví dụ: search.php) nếu cần.

Lưu ý và đóng thẻ trong footer.php? Bạn có thể đoán tại sao chúng phải được đưa vào footer.php không? Tương tự, bạn có thể đoán tại sao và thẻ mở được bao gồm trong tiêu đề.php? Hãy cho chúng tôi biết dự đoán của bạn trong phần bình luận ở cuối bài này

Bốn tệp mẫu mà chúng tôi vừa trình bày ở trên tạo nên một chủ đề WordPress rất cơ bản. Có nhiều tệp mẫu khác; có một tệp mẫu cho mọi yếu tố bạn thấy trên một chủ đề WordPress, đó là nhận xét, kết quả tìm kiếm và các trang lỗi 404 chỉ đề cập đến một vài.

Để hiểu đầy đủ về giải phẫu của một chủ đề WordPress, bạn cần làm quen với các tệp mẫu khác nhau. Bạn có thể duyệt tất cả mẫu gạch có thể sử dụng tại WordPress.

Sau đó, chúng tôi có các thẻ mẫu mà WordPress sử dụng để tìm nạp các tệp mẫu từ thư mục chủ đề. Bạn có thể tìm hiểu thêm về thẻ mẫu và vai trò của chúng tại WordPress.

Tóm lược

Một chủ đề WordPress bao gồm các yếu tố giải phẫu sau:

  • Các tệp mẫu như index.php, header.php, search.php, category.php, v.v.
  • Thẻ mẫu như , Vân vân
  • CSS
  • Hình ảnh và các tập tin phương tiện khác
  • Tệp JavaScript

Và đây là một minh họa tóm tắt giải phẫu của một chủ đề WordPress:

Tìm cách tiếp tục học? Kiểm tra chi tiết hướng dẫn giải phẫu chủ đề trong Codex WordPress.

Phần kết luận

Mọi chủ đề WordPress bạn thấy trên web đều sử dụng cùng một cấu trúc giải phẫu (thậm chí cả Theme WordPress phổ biến của chúng tôi), mà bạn có thể tùy chỉnh để đáp ứng nhu cầu của mình. Khi bạn tập trung vào những điều cơ bản về phát triển chủ đề WordPress, sẽ không có giới hạn đối với những gì bạn có thể làm với / đối với các chủ đề WordPress.

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