Hướng dẫn wordpress themes php - chủ đề wordpress php

Mở đầu

Bài viết này mình xin được hướng dẫn các bạn các bước cơ bản để tạo nên một theme WordPress của riêng mình .

Tạo một WordPress Theme "zin"

1. WordPress Theme Structure

Về cơ bản, bất cứ WordPress theme nào cũng cần có 5 file chính:

...

...

...

...

...

2. style.css & screenshot.png

Trong file

...

Ví dụ, ở đầu file

...

/*   
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 cho theme, chúng ta có thể thêm các options khác để mô tả theme 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 theme thông qua file

...

Kết quả:

3. header.php

Trước khi viết phần header cho theme, chúng ta cần tìm hiểu qua một số các template tags (hiểu là các functions được WordPress hỗ trợ cho đơn giản ):

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

  0: In ra thuộc tính ngôn ngữ cho thẻ

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

  1> của website sau khi được thiết lập trong General Settings:

...

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

  2: Trả về những thông tin cơ bản của website. 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

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

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

  4: Template tag này sẽ thêm các class cho thẻ

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

  5> tuỳ thuộc vào trang hiện tại được truy cập.

Ví dụ, khi ở một page:

Về cơ bản, một header của theme nên có những thành phần sau:

>

    
    
    
    
    

>
...

Chú ý: Trước khi đóng thẻ

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

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

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

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

4. footer.php

Tương tự như

...

    ...
    

Chú ý: Trước khi đóng thẻ

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

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

5. sidebar.php

Ở phần sidebar, chúng ta có thể đặt các quảng cáo hay menu cho website cũng được

Chú ý: sidebar.php không cần template tag như

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

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

6. index.php

Sau khi đã setup xong header, footer và sidebar, file

...

    
   ...

7. Loops

Trước khi tìm hiểu cách hiển thị các posts hoặc page trong

Cách 1: Loop mặc định của WordPress.

if (have_posts()) : while (have_posts()) : the_post();
// ...
endwhile;
else:
// ...
endif;

Cách 2: Sử dụng 5 để sửa lại cấu trúc mặc định của loop.

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

Cách 3: Sử dụng 6.

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

Cách 4: Sử dụng class 7.

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

Cách 5: Sử dụng 8.

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

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

8. Hiển thị các posts & page

Dựa vào các cách sử dụng loop để hiển thị posts và page, file

...

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

WordPress đã hỗ trợ cho chúng ta những template tags như

>

    
    
    
    
    

>
...

>

    
    
    
    
    

>
...

Ngoài ra, nếu người dùng muốn set "avatar" cho các posts, chúng ta có thể sử dụng template tag

>

    
    
    
    
    

>
...

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

Chú ý: Cần bật tính năng hiển thị thumbnail cho các posts bằng cách thêm đoạn code: Cần bật tính năng hiển thị thumbnail cho các posts bằng cách thêm đoạn code:

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

vào file

>

    
    
    
    
    

>
...

Kết quả: (Mình lười quá nên sử dụng theme Twenty Sixteen có sẵn của WordPress để test hihi )

=>

9. Hook, Action & Filter

Hook

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

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

Chúng ta dùng function

>

    
    
    
    
    

>
...

>

    
    
    
    
    

>
...

Action

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

>

    
    
    
    
    

>
...

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

Filter

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

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

Cụ thể thì hook

>

    
    
    
    
    

>
...

>

    
    
    
    
    

>
...

Sau khi được override lại bằng function

>

    
    
    
    
    

>
...

>

    
    
    
    
    

>
...

10. functions.php

>

    
    
    
    
    

>
...

>

    
    
    
    
    

>
...

Mình có 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: 
...
*/

Đôi khi,

>

    
    
    
    
    

>
...

    ...
    

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

    ...
    

>

    
    
    
    
    

>
...

...

Như vậy, chúng ta có thể sử dụng cú pháp

    ...
    

    ...
    

...

như mọi khi

Kết thúc

Trên đây mình đã hướng dẫn các bước cơ bản để tạo một core theme WordPress. Hi vọng bài viết giúp ích cho các bạn. Hẹn gặp lại mọi người trong các bài viết sau

Tham khảo

https://websitesetup.org/html-to-wordpress/