WordPress. Cách tạo mẫu trang. Tạo các chủ đề WordPress khác nhau theo cách thủ công và sử dụng các chương trình

Bài viết này sẽ hướng dẫn bạn cách tạo theme WordPress đơn giản nhất. Mặc dù Codex cung cấp tài liệu phong phú về chủ đề này nhưng tôi thấy nó hơi phức tạp đối với người mới. Do đó, trong “hướng dẫn” này, tôi sẽ cho bạn biết các nguyên tắc hoạt động của các chủ đề WordPress và chỉ cho bạn cách điều chỉnh mẫu HTML thô cho phù hợp với chúng. Đồng thời, bạn không bắt buộc phải biết PHP nhưng sẽ rất tốt nếu bạn biết Photoshop và CSS để tạo ra một thiết kế.

1. Giao diện blog

Trước khi bắt đầu, chúng ta hãy xem một chủ đề WordPress tiêu chuẩn và hiểu nó bao gồm những gì. Hãy đánh dấu các thành phần (tiêu đề, tiêu đề bài đăng, biểu mẫu tìm kiếm, điều hướng, chân trang, v.v.).

Trang đầu tiêu chuẩn ( chỉ mục.php)

Tiêu chuẩn đơn ( đơn.php)

2. Bố cục Photoshop

Dựa trên giao diện của chủ đề tiêu chuẩn, hãy thiết kế bố cục Photoshop cho blog của bạn. Ví dụ: tôi đang sử dụng GlossyBlue, một trong những chủ đề miễn phí của tôi. Tải demo.zip để xem file Photoshop đã hoàn thành.

3. HTML và CSS

Khi thiết kế PSD đã sẵn sàng, hãy tạo mẫu HTML+CSS cho mỗi trang. Bằng cách làm theo các bước trong hướng dẫn này, bạn có thể sử dụng các tệp HTML GlossyBlue của tôi từ demo.zip. Sau khi giải nén kho lưu trữ, bạn sẽ thấy chỉ mục.html, đơn.htmltrang.html. Tiếp theo tôi sẽ sử dụng chúng để biến chúng thành một mẫu.

Tại sao nên tạo HTML tĩnh trước?Điều này chủ yếu là vì nó sẽ đơn giản hóa rất nhiều quá trình phát triển. Thông thường tôi tạo một tệp HTML cho mỗi mẫu, kiểm tra tính hợp lệ của chúng (đánh dấu HTML và CSS) trong tất cả các trình duyệt. Sau đó, tất cả những gì còn lại là cắt và dán mã WordPress. Vì vậy bạn không còn phải lo lắng về lỗi trong HTML hay CSS nữa.

4. Chủ đề WordPress hoạt động như thế nào?

Nếu bạn vào thư mục chủ đề mặc định ( nội dung wp/chủ đề/mặc định), bạn sẽ thấy nhiều tệp php (được gọi là tệp mẫu) và một tệp phong cách.css. WordPress thường sử dụng một số tệp mẫu ( chỉ mục.php , header.php, sidebar.php,chân trang.php).

Thông tin chi tiết hơn trong Codex: “Kiến trúc trang web” và “Phân cấp mẫu”.

5. Tệp mẫu trùng lặp

Sao chép thư mục HTML từ GlossyBlue vào thư mục nội dung/chủ đề wp. Sau đó, vào thư mục chủ đề mặc định, sao chép bình luận.phpsearchform.php vào một thư mục màu xanh bóng loáng.

6. Style.css

Chuyển đến thư mục chủ đề mặc định, mở tệp phong cách.css. Sao chép văn bản nhận xét ở đầu tệp và dán nó vào phong cách.css Chủ đề GlossyBlue. Nếu muốn, bạn có thể thay đổi tiêu đề và thông tin tác giả.

7. Tách tập tin

Bây giờ chúng ta cần tìm ra nơi chia các tệp HTML thành các phần: header.php , sidebar.php và footer.php. Ảnh chụp màn hình bên dưới hiển thị phiên bản đơn giản hóa của tệp chỉ mục của tôi cũng như nguyên tắc phân chia của nó.

8.Header.php

Mở chỉ mục.html. Bạn cần cắt phần từ đầu đến cuối, dán vào tệp php mới và lưu dưới dạng tiêu đề.php.
Chuyển đến thư mục chủ đề mặc định, mở mới tiêu đề.php. Sao chép và thay thế các thẻ mà mã php yêu cầu: tiêu đề, liên kết, biểu định kiểu, h1 và div class=description.

Chức năng điều hướng (wp_list_pages) Thay thế thẻ V. ul id=điều hướng TRÊN ;

9. Thanh bên.php

Trở lại chỉ mục.html, cắt mã từ nơi nó bắt đầu biểu mẫu id=biểu mẫu tìm kiếm và cho đến khi thẻ đóng div id=thanh bên, đặt nó vào một tệp php mới và lưu dưới dạng thanh bên.php.

  • Thay thế biểu mẫu id=biểu mẫu tìm kiếm với tất cả nội dung trên .
  • Thay thế thẻ danh mục theo
  • Thay thế thẻ lưu trữ trên

10. Footer.php

Trở lại chỉ mục.html. Trích xuất mã từ đó div id=chân trang bao gồm thẻ div id=footer và cho đến hết /html sau đó đặt nó vào một cái mới chân trang.php.

Bài viết gần đâyỞ đây tôi sử dụng query_post để hiển thị 5 bài viết blog mới nhất.

"Bình luận mới nhất""Nhận xét mới nhất" do plugin tạo ra (có trong thư mục chủ đề)

11. Index.php

Bây giờ trong của bạn chỉ mục.html chỉ nên ở lại id id=nội dung. Lưu tập tin dưới dạng chỉ mục.php. Nhập các dòng: get_header, get_sidebar, Và get_footer theo thứ tự chúng xuất hiện trong mẫu.

12. Phân tích vòng lặp

Vòng lặp hiển thị các bài đăng trên blog một cách tuần tự dựa trên cài đặt của bạn. Ảnh chụp màn hình bên dưới minh họa cách hoạt động của nó. Ban đầu, vòng lặp kiểm tra sự hiện diện của các bản ghi và nếu không tìm thấy bản ghi nào, nó sẽ hiển thị một thông báo "Không tìm thấy".

13. Sao chép một chu kỳ

Chuyển đến thư mục chủ đề mặc định, mở chỉ mục.php. Sao chép chu trình từ chu trình tiêu chuẩn chỉ mục.php của riêng bạn - giữa div id=nội dung../div. Sau đó, thay thế văn bản tĩnh bằng thẻ mẫu WordPress: ngày đăng, tiêu đề, danh mục, nhận xét, liên kết tiếp theo và trước đó.

14. Xem trước chủ đề

Chúc mừng! Bạn đã tạo phần công khai (phần chính của mẫu). Bây giờ hãy vào bảng quản trị, chuyển đến tab Thiết kế, bạn sẽ thấy chủ đề GlossyBlue. Kích hoạt nó và đi đến phần công khai để xem kết quả hoạt động.

15. Single.php

Đã đến lúc tạo một mẫu đơn.php. Nếu muốn, bạn có thể lặp lại các bước bằng cách chuyển mã từ chủ đề tiêu chuẩn. Nhưng có vẻ dễ dàng hơn đối với tôi khi sử dụng cái tôi vừa tạo chỉ mục.php, lưu nó dưới dạng đơn.php. Mở đơn.php từ chủ đề tiêu chuẩn và sao chép thẻ mẫu vào những nơi cần thiết. Tiếp theo, kết nối bình luận_mẫu. Ảnh chụp màn hình sau đây cho thấy những thay đổi tôi đã thực hiện:

16.Page.php

Bây giờ mới đơn.php lưu với tên trang.php. Xóa ngày nhập, mẫu nhận xét, liên kết tiếp theo/trước. Thế thôi, thế thôi - mẫu của bạn trang.php sẵn sàng .

17. Xóa tệp HTML

Xóa tất cả các tệp HTML khỏi thư mục màu xanh bóng loáng(chúng tôi sẽ không cần chúng nữa). Về mặt kỹ thuật, điều này là đủ để tạo một chủ đề WordPress cơ bản. Bạn có thể nhận thấy rằng chủ đề tiêu chuẩn có nhiều tệp PHP hơn. Thực ra, bạn không thực sự cần chúng nếu muốn một chủ đề đơn giản. Ví dụ, nếu tìm kiếm.php hoặc 404.php sẽ không có trong thư mục chủ đề, WordPress sẽ tự động sử dụng chỉ mục.phpđể hiển thị trang. Đọc Phân cấp mẫu để biết thêm chi tiết.

18. Mẫu trang WordPress

Bây giờ là ví dụ cuối cùng, tôi sẽ chỉ cho bạn cách sử dụng Mẫu trang để tạo trang Lưu trữ chứa danh sách tất cả các bài đăng trên blog của bạn (hữu ích cho sơ đồ trang web). Sao chép archive.php từ thư mục chủ đề tiêu chuẩn. Xóa mã không cần thiết và nhận được một cái gì đó như thế này:

Bây giờ tôi sẽ giải thích cách tạo chủ đề WordPress từ một mẫu HTML đơn giản bằng cách sử dụng ví dụ thiết kế từ bài viết đó.

Bạn có thể cần điều chỉnh thiết kế cho WordPress vì nhiều lý do, chẳng hạn như bạn đang chuyển trang web tĩnh một thời của mình sang CMS hoặc bạn thích một thiết kế chưa có trong bộ sưu tập WordPress hoặc bạn chỉ muốn hiểu cách các chủ đề của CMS này hoạt động từ bên trong.

Vậy hãy bắt đầu.

Phân phối mã vào các tập tin

1. Tải xuống mẫu và giải nén nó vào thư mục chủ đề WordPress của bạn (địa chỉ như blog_address_wordpress/wp-content/themes/). Nếu muốn, hãy đổi tên thư mục chủ đề theo ý thích của bạn. Ví dụ: mẫu của tôi nằm ở blog_address_wordpress/wp-content/themes/MyTheme/.

2. Đổi tên tập tin style.css V. phong cách.css.

3. Mở phong cách.css trong trình soạn thảo mã (chẳng hạn như Notepad++) và ngay từ đầu, hãy dán các dòng sau:

/* Tên chủ đề: URI chủ đề MyTheme: http://test1.ru Tác giả: NoName URI tác giả: http://test1.ru Mô tả: Ví dụ về Phiên bản thử nghiệm: 1.0.0 Giấy phép: Giấy phép Công cộng GNU v2 trở lên URI Giấy phép : http://www.gnu.org/licenses/gpl-2.0.html */

Như bạn có thể đoán, đây là thông tin dịch vụ về chủ đề thiết kế: tiêu đề, tác giả, mô tả, giấy phép, phiên bản, v.v. Bạn có thể thay thế các phần bên phải của dòng bằng phần của riêng bạn, nghĩa là đặt quyền tác giả, phiên bản, mô tả của bạn và các dữ liệu khác.

4. Tạo tập tin tiêu đề.php, chỉ mục.php, thanh bên.php, chân trang.php và phân phối mã từ họ cho họ chỉ mục.html.

4.1. TRONG tiêu đề.php sao chép từng dòng mã , vì tệp này chịu trách nhiệm về phần đầu của trang web. style.css thay thế mã bằng phong cách.css- tên tập tin chính xác mới.

4.2. TRONG chỉ mục.php dán mã của khối chính (từ dòng từng dòng một ).

4.3. TRONG thanh bên.php sao chép mã menu bên (từ Qua ).

4.4. TRONG chân trang.php dán các dòng còn lại (với cho đến hết tài liệu chỉ mục.html).

5. Xóa chỉ mục.html.

6. Đi tới bảng quản trị và đảm bảo rằng mẫu MyTheme xuất hiện trong phần Ngoại hình -> Chủ đề. Bạn thậm chí có thể thử xem hoặc kích hoạt nó, nhưng vẫn chưa có gì tốt đẹp vì chúng tôi chưa tích hợp mẫu với WordPress.

Tiêu đề thích ứng

Bây giờ chúng ta sẽ bắt đầu tạo một chủ đề động từ một mẫu tĩnh để tải dữ liệu và cài đặt WordPress vào đó.

Mẫu sẽ chứa các phần chèn PHP. Mã này bắt đầu bằng. Giữa chúng là mã PHP thường gọi các hàm CMS

1. Mở tệp header.php và thay thế mã chứa trong đó thành khối

sang cái tiếp theo:

> "> "> " type="text/css" media="screen" /> <?php bloginfo("name"); ?>

Chúng tôi đã làm cho khối động

Mã gọi một hàm trả về các thuộc tính ngôn ngữ cho vùng chứa.

">

Thay vì chỉ định mã hóa là một hằng số, chúng tôi đã gọi một hàm lấy giá trị từ cài đặt CMS và tự động chèn nó vào mã, tức là để thay đổi mã hóa, bạn không còn phải chỉnh sửa tệp chủ đề nữa.

Một chức năng quan trọng đảm bảo rằng các kiểu, plugin và tập lệnh hoạt động trên trang.

2. Tiến hành chỉnh sửa file index.php. Lúc đầu hãy viết ra

,

Các dòng này gọi các tập tin đầu trang, thanh bên và chân trang của trang web.

Bây giờ bạn có thể xem hoặc thậm chí kích hoạt MyTheme. Kết quả là trình duyệt sẽ hiển thị một mẫu quen thuộc với menu tĩnh và một trang duy nhất. Để menu trở nên năng động và có thể tùy chỉnh, đồng thời thay vì một trang hiển thị tất cả tài liệu được đặt trên trang web, bạn cần phải chuyển đổi mẫu thêm.

Làm cho menu trên cùng trở nên năng động

Hiện tại, chúng tôi có một chủ đề thiết kế hoàn toàn tĩnh, bao gồm một chủ đề có menu ngang trên cùng không thay đổi. Mặc dù không thể định cấu hình nó từ bảng quản trị và nếu bạn để mã ở dạng hiện tại, thì để chèn/xóa/di chuyển các mục, bạn sẽ phải chỉnh sửa tệp mỗi lần tiêu đề.php, điều này cực kỳ bất tiện.

Để không triết lý và không lao vào vực thẳm của thế giới lập trình hấp dẫn, chúng tôi sẽ đặt tên tĩnh cho menu động. Thay vì bảng menu ngang, hãy dán mã

để nó trông như thế này: