Thay đổi mẫu wordpress

Trong tệp

4, bên ngoài công việc căn cứ chỉnh sửa thuộc tính cho các thẻ HTML, chúng ta có thể khai báo các mô tả cho chủ đề

Ví dụ, ở đầu tập tin

4

/*   
Theme Name: Vuzic
Theme URI: http://www.vuzic.com
Description: I built this theme based on Nick Vuzic spirit.
Author: Hoang Viet An
Author URI: https://hoangvietan96.github.io
Version: 1.0
*/

Ngoài những mô tả chính như ở trên chủ đề, chúng ta có thể thêm các tùy chọn khác để mô tả chủ đề chi tiết hơn

Ví dụ

/*
Theme Name: 
Theme URI: 
Author: 
Author URI: 
Description: 
Version: 
License: 
License URI: 
Tags: 
Text Domain: 
...
*/

Ngoài ra, WordPress cho phép người dùng đặt ảnh đại diện cho chủ đề thông qua tệp

>

    
    
    
    
    

>
...

1

Kết quả.

3. tiêu đề. php

Trước khi viết phần header cho chủ đề, chúng ta cần tìm hiểu qua một số thẻ mẫu (hiểu là các chức năng được WordPress hỗ trợ đơn giản

).

• 
  >
  
      
      
      
      
      
  
  >
  ...
  

  2. Thuộc tính ngôn ngữ cho thẻ

  
  >
  
      
      
      
      
      
  
  >
  ...
  

  3> của trang web sau khi được thiết lập trong Cài đặt chung

Đầu ra sẽ là

...

• 
  >
  
      
      
      
      
      
  
  >
  ...
  

  4. Trả về những thông tin cơ bản của trang web. Ví dụ

bloginfo('charset')` => UTF-8
bloginfo('stylesheet_url') => http://localhost/test/wp-content/themes/theme_name/style.css

Chúng ta có thể tham khảo thêm các thuộc tính của

>

    
    
    
    
    

>
...

4 tại đây

• 
  >
  
      
      
      
      
      
  
  >
  ...
  

  6. Thẻ mẫu này sẽ bổ sung các lớp cho thẻ

  
  >
  
      
      
      
      
      
  
  >
  ...
  

  7> tùy thuộc vào trang hiện tại được truy cập

Ví dụ, khi ở một trang

Về cơ bản, một tiêu đề của chủ đề nên có những thành phần sau

>

    
    
    
    
    

>
...

Chú thích. Trước khi đóng thẻ

>

    
    
    
    
    

>
...

8, chúng ta cần thêm thẻ mẫu

>

    
    
    
    
    

>
...

9 để WordPress hiểu được chúng ta đang đặt phần tiêu đề cho chủ đề

4. cuối trang. php

Tương tự như

6

8

Chú thích. Trước khi đóng thẻ

81, chúng ta cần thêm template tag

82 để WordPress hiểu được chúng ta đang đặt phần footer cho theme

5. thanh bên. php

Ở phần thanh bên, chúng ta có thể đặt quảng cáo hay menu cho trang web cũng được

/*   
Theme Name: Vuzic
Theme URI: http://www.vuzic.com
Description: I built this theme based on Nick Vuzic spirit.
Author: Hoang Viet An
Author URI: https://hoangvietan96.github.io
Version: 1.0
*/

1

Chú thích. thanh bên. php không cần thẻ mẫu như

>

    
    
    
    
    

>
...

9 và

82 để hiển thị

6. mục lục. php

Sau khi thiết lập xong header, footer và sidebar, file

5 sẽ được viết như sau

/*   
Theme Name: Vuzic
Theme URI: http://www.vuzic.com
Description: I built this theme based on Nick Vuzic spirit.
Author: Hoang Viet An
Author URI: https://hoangvietan96.github.io
Version: 1.0
*/

5

7. vòng lặp

Trước khi tìm hiểu cách hiển thị các bài đăng hoặc trang trong

86, chúng ta cần tìm hiểu cách hiển thị các bài đăng thông qua vòng lặp của WordPress

Cách 1. Vòng lặp mặc định của WordPress

/*   
Theme Name: Vuzic
Theme URI: http://www.vuzic.com
Description: I built this theme based on Nick Vuzic spirit.
Author: Hoang Viet An
Author URI: https://hoangvietan96.github.io
Version: 1.0
*/

7

cách 2. Sử dụng 87 để sửa lại cấu trúc mặc định của vòng lặp

/*
Theme Name: 
Theme URI: 
Author: 
Author URI: 
Description: 
Version: 
License: 
License URI: 
Tags: 
Text Domain: 
...
*/

0

Cách 3. Sử dụng 88

/*
Theme Name: 
Theme URI: 
Author: 
Author URI: 
Description: 
Version: 
License: 
License URI: 
Tags: 
Text Domain: 
...
*/

1

Cách 4. Sử dụng lớp 89

/*
Theme Name: 
Theme URI: 
Author: 
Author URI: 
Description: 
Version: 
License: 
License URI: 
Tags: 
Text Domain: 
...
*/

2

Cách 5. Sử dụng /* Theme Name: Vuzic Theme URI: http://www.vuzic.com Description: I built this theme based on Nick Vuzic spirit. Author: Hoang Viet An Author URI: https://hoangvietan96.github.io Version: 1.0 */ 10

Cá nhân mình đánh giá thì đây là cách an toàn nhất để tạo một vòng lặp riêng biệt hay nhiều vòng lặp trên một trang

/*
Theme Name: 
Theme URI: 
Author: 
Author URI: 
Description: 
Version: 
License: 
License URI: 
Tags: 
Text Domain: 
...
*/

3

8. Show the posts & page

dựa vào cách sử dụng vòng lặp để hiển thị các bài đăng và trang, tệp

5 có thể được viết lại như thế này

/*
Theme Name: 
Theme URI: 
Author: 
Author URI: 
Description: 
Version: 
License: 
License URI: 
Tags: 
Text Domain: 
...
*/

4

WordPress đã hỗ trợ chúng ta những thẻ mẫu như

/*   
Theme Name: Vuzic
Theme URI: http://www.vuzic.com
Description: I built this theme based on Nick Vuzic spirit.
Author: Hoang Viet An
Author URI: https://hoangvietan96.github.io
Version: 1.0
*/

12,

/*   
Theme Name: Vuzic
Theme URI: http://www.vuzic.com
Description: I built this theme based on Nick Vuzic spirit.
Author: Hoang Viet An
Author URI: https://hoangvietan96.github.io
Version: 1.0
*/

13, v.v. to show content of a post

Ngoài ra, nếu người dùng muốn đặt "hình đại diện" cho các bài đăng, họ có thể sử dụng thẻ mẫu

/*   
Theme Name: Vuzic
Theme URI: http://www.vuzic.com
Description: I built this theme based on Nick Vuzic spirit.
Author: Hoang Viet An
Author URI: https://hoangvietan96.github.io
Version: 1.0
*/

14. Ví dụ

/*
Theme Name: 
Theme URI: 
Author: 
Author URI: 
Description: 
Version: 
License: 
License URI: 
Tags: 
Text Domain: 
...
*/

5

Chú thích. Cần bật tính năng hiển thị hình thu nhỏ cho các bài đăng bằng cách thêm đoạn mã

/*
Theme Name: 
Theme URI: 
Author: 
Author URI: 
Description: 
Version: 
License: 
License URI: 
Tags: 
Text Domain: 
...
*/

6

vào tệp

/*   
Theme Name: Vuzic
Theme URI: http://www.vuzic.com
Description: I built this theme based on Nick Vuzic spirit.
Author: Hoang Viet An
Author URI: https://hoangvietan96.github.io
Version: 1.0
*/

15 (sẽ nói ở dưới ạ ).

Kết quả. (Mình cũng vậy nên dùng theme Twenty Sixteen có sẵn của WordPress để test hihi

)

=>

9. Móc, Hành động & Bộ lọc

Cái móc

Hiểu đơn giản nhất thì Hook là tên gọi cho các chức năng mặc định của WordPress

Hook được chia ra làm 2 loại. Action (về mặt sự kiện) và Filter (về mặt nội dung)

Chúng ta sử dụng hàm

/*   
Theme Name: Vuzic
Theme URI: http://www.vuzic.com
Description: I built this theme based on Nick Vuzic spirit.
Author: Hoang Viet An
Author URI: https://hoangvietan96.github.io
Version: 1.0
*/

16 và

/*   
Theme Name: Vuzic
Theme URI: http://www.vuzic.com
Description: I built this theme based on Nick Vuzic spirit.
Author: Hoang Viet An
Author URI: https://hoangvietan96.github.io
Version: 1.0
*/

17 để ghi đè lại các hook của WordPress

Hoạt động

Ví dụ, nếu muốn tính năng thêm avatar cho các bài viết sau khi chủ đề được khởi động, chúng ta có thể móc thêm chức năng của mình vào hook

/*   
Theme Name: Vuzic
Theme URI: http://www.vuzic.com
Description: I built this theme based on Nick Vuzic spirit.
Author: Hoang Viet An
Author URI: https://hoangvietan96.github.io
Version: 1.0
*/

18

/*
Theme Name: 
Theme URI: 
Author: 
Author URI: 
Description: 
Version: 
License: 
License URI: 
Tags: 
Text Domain: 
...
*/

7

Lọc

Ví dụ thông qua mã cho dễ hiểu ạ

/*
Theme Name: 
Theme URI: 
Author: 
Author URI: 
Description: 
Version: 
License: 
License URI: 
Tags: 
Text Domain: 
...
*/

8

Cụ thể thì hook

/*   
Theme Name: Vuzic
Theme URI: http://www.vuzic.com
Description: I built this theme based on Nick Vuzic spirit.
Author: Hoang Viet An
Author URI: https://hoangvietan96.github.io
Version: 1.0
*/

19 có tác dụng làm cho đoạn văn nội dung được lấy ra từ cơ sở dữ liệu chỉ hiển thị ở chế độ xem tối đa 50 ký tự, sau đó

/*   
Theme Name: Vuzic
Theme URI: http://www.vuzic.com
Description: I built this theme based on Nick Vuzic spirit.
Author: Hoang Viet An
Author URI: https://hoangvietan96.github.io
Version: 1.0
*/

50

Sau khi được ghi đè lại bằng chức năng

/*   
Theme Name: Vuzic
Theme URI: http://www.vuzic.com
Description: I built this theme based on Nick Vuzic spirit.
Author: Hoang Viet An
Author URI: https://hoangvietan96.github.io
Version: 1.0
*/

51, đến ký tự thứ 40 sẽ

/*   
Theme Name: Vuzic
Theme URI: http://www.vuzic.com
Description: I built this theme based on Nick Vuzic spirit.
Author: Hoang Viet An
Author URI: https://hoangvietan96.github.io
Version: 1.0
*/

50 thay vì 50 như trước (trong cơ sở dữ liệu không thay đổi, chỉ thay đổi ở chế độ xem)

10. chức năng. php

/*   
Theme Name: Vuzic
Theme URI: http://www.vuzic.com
Description: I built this theme based on Nick Vuzic spirit.
Author: Hoang Viet An
Author URI: https://hoangvietan96.github.io
Version: 1.0
*/

15 là tệp quan trọng nhất khi viết một chủ đề WordPress. Bất kể khi nào tải trang, WordPress sẽ tìm đến tệp

/*   
Theme Name: Vuzic
Theme URI: http://www.vuzic.com
Description: I built this theme based on Nick Vuzic spirit.
Author: Hoang Viet An
Author URI: https://hoangvietan96.github.io
Version: 1.0
*/

15 đầu tiên, xử lý các tác vụ rồi mới xuất ra cho người dùng

Mình đã viết một file core functions. php cơ bản như sau

/*
Theme Name: 
Theme URI: 
Author: 
Author URI: 
Description: 
Version: 
License: 
License URI: 
Tags: 
Text Domain: 
...
*/

9

Đôi khi,

/*   
Theme Name: Vuzic
Theme URI: http://www.vuzic.com
Description: I built this theme based on Nick Vuzic spirit.
Author: Hoang Viet An
Author URI: https://hoangvietan96.github.io
Version: 1.0
*/

15 cũng có tác dụng như một

/*   
Theme Name: Vuzic
Theme URI: http://www.vuzic.com
Description: I built this theme based on Nick Vuzic spirit.
Author: Hoang Viet An
Author URI: https://hoangvietan96.github.io
Version: 1.0
*/

56

Ví dụ, chúng ta muốn tạo một hàm

/*   
Theme Name: Vuzic
Theme URI: http://www.vuzic.com
Description: I built this theme based on Nick Vuzic spirit.
Author: Hoang Viet An
Author URI: https://hoangvietan96.github.io
Version: 1.0
*/

57 giống như trong Laravel, bên trong

/*   
Theme Name: Vuzic
Theme URI: http://www.vuzic.com
Description: I built this theme based on Nick Vuzic spirit.
Author: Hoang Viet An
Author URI: https://hoangvietan96.github.io
Version: 1.0
*/

15, chúng ta viết như sau