Tạo theme child cho Genesis Theme

Bởi theme Genesis có cấu hình, cấu trúc tương đối khác so với những theme khác của WordPress. Do đó, mình dành riêng bài viết này hướng dẫn tổng quan bạn tạo theme child cho Genesis Theme.

Ở đây là bài viết cài theme child chung cho WordPress. Đừng bỏ lỡ nếu bạn đang dùng theme khác nhé.

Tại sao lại dùng theme Genesis này? Bạn có nhớ lý do không? Check nó nhé.

Okay, Let’s Start tạo theme child cho Genesis Theme

Trước hết bạn cần tải bản mới nhất từ của theme Genesis về: https://www.genesisforwp.com/free-download-genesis-framework/ – Đây là bản Free bạn nhé.

Sau khi tải về bạn cũng hãy ném nó vào thư mục themes – giải nén nó nhé.

Bước chính nè

Tạo folder theme child – “tạo theme child”

Tương tự như các theme khác: bạn hãy tạo file functions.php và style.css nhé

Styles có code mẫu như sau:

Cái này chắc không cần giải thích rồi nhỉ, easy quá mà: Điều kiện chỉ cần có “Theme Name” & “Template” thui.

Functions: cứ copy code vào, mình sẽ giải thích ngay nhé

Đối với phần Init mà mình note bên trên: đó chính là phần bắt buộc trong file function.

Phần Enqueue Asset File: Bạn hãy tùy chỉnh cho phù hợp với bạn nhé. Trong đó thì kế thừa style của theme cha Genesis là cần thiết đó. (Nếu bạn không muốn code lại hết)

Oke? Đơn giản là thế đó? Hãy tìm hiểu thêm một chút lý thuyết nhé

Theme Child hoạt động thế nào?

Nếu bạn thử kích hoạt theme child, bạn sẽ thấy không giống các khác, bởi ảnh của nó trống rỗng. Đừng lo lắng. Hãy tạo một hình ảnh với kích thước 300px x 225px lưu nó với tên screenshot.png trong folder theme child, bạn sẽ thấy nó hoạt động với ảnh đó.

Để theme child hoạt động, bạn cần cài theme cha của nó trước (Cái này bạn chắc cài rồi nhỉ). Đây là bước thiết yếu. Một khi bạn cài xong bạn có thể kích hoạt theme child của bạn.

Thêm vào Genesis

Để thêm những function – chức năng, bạn sẽ thêm vào file functions.php vừa tạo trong thư mục theme child đó. Trong đó, 2 phần functions quan trọng của WordPress là hookfilter.

Hooks & Filters

Hook là đoạn code mà chúng ta dùng để gọi đến functions. Đó cũng là một đoạn mã được xây dựng trong Genesis mà chúng ta ‘hook’ vào, đó là tên của nó.

Hãy lấy một ví dụ phổ thông nhé, đó là độ dài trích đoạn của trang blog. Tôi không muốn số lượng từ mặc định là 55. Tôi nghĩ nó quá dài. Bạn sẽ cần phải hook vào chiều dài đoạn trích và thay đổi nó, và thêm nó vào theme child của bạn như một filter. Mã sẽ trông giống như thế này.

Đoạn code trên tạo ra một hàm gọi là “the_excerpt_length” và giá trị trong ngoặc đơn được đặt thành số bạn chỉ định. Code này được yêu cầu trả lại điều đó làm độ dài từ của trích đoạn của bạn. Bây giờ, khi bạn đang làm việc trên một trang, chẳng hạn như index.php hoặc archive.php, thay vì the_content, bạn có thể thay thế nó cho the_excerpt, cắt giảm tối đa 25 từ. Đây là một ví dụ hữu ích, nhưng có nhiều thứ khác mà chúng tôi có thể làm.

Kết

Thiết lập theme child Genesis của riêng bạn nghe có vẻ đáng sợ, nhưng thực hiện nó có vẻ đơn giản hơn. Bạn có thể tạo theme child tùy chỉnh của riêng mình một cách nhanh chóng chỉ với hai tệp cần thiết. Với Hook và Filter, bạn có thể tùy chỉnh chức năng của theme mà không phải lo lắng về việc mất các thay đổi khi cập nhật chủ đề gốc.

Bài viết liên quan

  • Tại sao Genesis Theme lại đặc biệt với WordPress?

    Ngoài kia có vô vàn lựa chọn theme cho Wordpress, đó vừa là ưu điểm và cũng là khuyết điểm, sẽ thật khó khăn để chọn một cái phù hợp với bạn….

  • Lấy menu trong WordPress với cấu trúc Bootstrap

    Việc Lấy menu trong Wordpress khá quan trọng, bởi nó cho phép các developer tùy biến cấu trúc, class hay vị trí xuất hiện của menu. Vậy trong bài viết này, mình sẽ chia sẻ với cách bạn cách Lấy menu trong Wordpress với cấu trúc Bootstrap.

  • Hướng dẫn cài đặt theme child WordPress, hook file style, js.

    Nối tiếp bài trước. Trong bài viết này mình sẽ hướng dẫn các bạn về việc cài đặt theme child Wordpress. Cũng như việc hook file style, js. Đây là công việc chắc chắn phải làm để phát triển theme Wordpress.

  • Ghi đè file WooCommerce với theme child

    Để bạn có thể thoải mái tùy chỉnh khi sử dụng WooCommerce, tùy biến giao diện. Chúng ta thường tùy chỉnh các file của WooCommerce. Tuy nhiên khi update, các…

Bài viết cùng chuyên mục

2
Leave a Reply

avatar
2 Comment threads
0 Thread replies
0 Followers
 
Most reacted comment
Hottest comment thread
1 Comment authors
dovandung Recent comment authors
  Subscribe  
newest oldest most voted
Notify of
trackback

[…] trường tùy chọn trong Tùy Biến theme WordPress khá tương tự với phần tạo vùng tùy chọn widget cho theme WordPress. Tuy nhiên trường trong phần Tùy Biến có thể gọi là nâng nao hơn. Bởi nó hạn […]

dovandung
Guest
dovandung

Chào bác ạ. bác cho em hỏi là em muốn hiển thị Widget chỉ ở dưới header thì thay ” top_header” thành ” bottom_header” ạ. Muốn hiển thị ở trên trang chủ thôi thì viết đoạn code như này ” TRANG CHỦ ” đúng không ạ

Thuê Tôi