Làm thế nào để Xây dựng một Genesis Child Theme

Nếu bạn muốn tùy chỉnh một Theme WordPress hiện có, đặc biệt là một theme framework như Genesis , tùy chọn tốt nhất đó là sử dụng child theme. Để hiểu về child theme và cách tạo child theme cơ bản xem tại Hướng dẫn tạo Child Theme WordPress căn bản. Như vậy, khi chủ đề mẹ update phiên bản mới, bạn sẽ không bị lo mất các thiết lập, các cấu hình và các chỉnh sửa trong các tập tin của theme.

Ở phạm vi bài viết mình, tôi sẽ cùng bạn nghiên cứu về Genesis Framework và cách tạo child theme cho nó.

Genesis Framework có những gì?

Để hiểu được Genesis Framework cung cấp cho ta những gì và vì sao ta cần chúng thì bạn cần phải hiểu được Hook là gì và cần phân biệt giữa Action Hook với Filter Hook vì bạn sẽ phải sử dụng nhiều đến Hook khi xây dựng Genesis child theme.

Ví dụ 1 với Action Hook: wp_footer là một hành động cho phép bạn thực thi mã ở dưới cùng của trang web. Nếu bạn muốn thêm mã Google Analytics để dưới cùng của mỗi trang và bạn muốn đặt điều này trong tập tin functions.php của bạn:

Ví dụ 2 với Filter Hook: excerpt_length là một bộ lọc cho phép bạn thay đổi độ dài văn bản được hiển thị khi bạn sử dụng the_excerpt() trong theme của bạn (mặc định nó sẽ trả về 55 ký tự). Nếu bạn muốn thay đổi điều đó với 150 ký tự, bạn chỉ cần đặt đoạn code sau trong tập tin functions.php của child theme:

Như bạn thấy, Action Hook và Filter Hook cho phép bạn chỉnh sửa mọi thứ mà không cần chỉnh sửa mã hiện tại. Và thực hiện điều này đối với child theme bạn sẽ an toàn với các cấu hình riêng mà không lo khi Genesis Framework nâng cấp.

Genesis Framework – Vì sao tôi thích nó?

Dưới đây là một vài lý do tại sao tôi thích Genesis hơn tất cả các theme khác:

  • Hooks for everything: Bất cứ điều gì mà bạn muốn tùy chỉnh đều có thể tùy chỉnh được. Tôi chưa tìm ra một cái gì đó tôi cần phải chỉnh sửa mà không thể được thực hiện dễ dàng với Action Hook hoặc Filter Hook.
  • Phát triển code tự do, không phụ thuộc vào settings page: Genesis có trang settings chung cho toàn bộ theme và child theme Genesis, tuy nhiên đó chỉ là những cấu hình cơ bản, phần lớn không liên quan đến các chuyển đổi lớn trong giao diện. Do đó, bạn không phải lo lắng rằng khách hàng sẽ có những thay đổi khiến giao diện web bị phá vỡ.
  • Cấu trúc tập tin dễ hiểu: Genesis Framework cho bạn một cấu trúc thư mục, tập tin thực sự đơn giản và hoàn toàn dễ hiểu. Ví dụ: Bạn muốn tìm hiểu làm thế nào để tùy chỉnh một cái gì đó trong tiêu đề? Bạn chỉ cần tìm nó trong genesis/lib/structure/header.php. Hay tùy biến các menu Genesis, nó nằm trong genesis/lib/structure/menu.php. Thật dễ dàng để khám phá code của Genesis để tìm ra tất cả các Action và các Filter mà bạn cần.
  • The Community (cộng đồng): Genesis có một đội ngũ nhà phát triển tuyệt vời, bên cạnh đó đội ngũ này còn thuê các nhà phát triển ra mã nguồn wordpress, bảo mật của wordpress và có cộng đồng sử dụng, hỗ trợ tuyệt vời khác đang chia sẻ code và chuyên môn. StudioPress lắng nghe người dùng của họ và cho biết thêm các tính năng mà họ yêu cầu.

Có một điều nữa tôi muốn nói đến, đó là nơi để đặt code của bạn. Bất cứ điều gì có liên quan đến giao diện của trang web thuộc về theme, đó là chức năng cốt lõi thuộc về một plugin. Dưới đây là một nguyên tắc nhỏ: nếu người dùng của bạn quyết định thay đổi theme, bất kỳ chức năng họ hy vọng giữ nguyên ở theme mới, nó phải được nằm trong một plugin.

Nó cũng là một ý tưởng tốt để biến những thứ bạn sử dụng thường xuyên hoặc khách hàng có thể muốn chọn tắt vào trong plugin. Và nếu có một mảnh của chức năng mà bạn không muốn họ tắt, bạn có thể đặt nó trong thư mục mu-plugins, viết tắt phải sử dụng và luôn luôn được kích hoạt.

Bắt đầu xây dựng Genesis Child Theme đầu tiên của bạn

Đây là quy trình cơ ban của tôi để xây dựng một child theme:

  1. Cài đặt WordPress và Genesis Framework;
  2. Tạo một thư mục ngang cấp với thư mục genesis (xem quy tắc đặt tên);
  3. Xây dựng tất cả các chức năng cho giao diện mới (child theme) này của trang web bên trong thư mục mới tạo;
  4. Sử dụng CSS để định dạng giao diện web phù hợp với thiết kế;
  5. Gửi cho khách hàng để xem xét.

Và trong hướng dẫn này sẽ chỉ tập trung vào việc xây dựng các chức năng mới của child theme. Tôi sẽ sử dụng một dự án là website của một cơ quan sáng tạo chuyên về thiết kế và duy trì trang web của thành phố ở Canada. Dự án này là cho Làng Barnwell. Dưới đây là hình ảnh giao diện cung cấp trông giống như:

Và giao diện khi mới bắt đầu như sau:

Ở đây tôi muốn nói đến là giao diện Genesis Child Theme hoàn toàn rỗng. Một khi bạn đã xây dựng một vài giao diện, bạn sẽ thấy viết code cho giao diện sử dụng tất cả thời gian của bạn và có thể bạn sẽ cần phát triển một child theme mẫu cho mình. Dưới đây là một mẫu child theme cho Genesis.

Tạo Genesis Child Theme

B1: Bạn vào thư mục wp-content/themes và tạo 1 thư mục mới ngang cấp với thư mục genesis. Tôi ví dụ thư mục của tôi là “barnwell”. Và bạn cần tạo 3 tập tin cho Child Theme là style.css, functions.php và screenshot.png. Bạn có thể viết một kiểu hoàn toàn mới cho trang web của bạn, ở đây tôi chỉ muốn thay đổi một vài mặc định của Genesis.

Tới wp-content/themes/genesis/style.css và sao chép nó vào /wp-content/themes/barnwell/style.css. Không sử dụng @import trong file CSS của bạn để kéo các chủ đề của cha mẹ, bởi vì khi các chủ đề cha mẹ làm thay đổi cho các kiểu nó sẽ ảnh hưởng xấu đến bố trí của bạn.

Ở phía trên của file css, thay đổi thông tin để mô tả theme của bạn. Hãy chắc chắn rằng bạn bao gồm Template: genesis, vì đó là những gì định nghĩa theme mới này là child theme của genesis và không phải là một theme tiêu chuẩn. Dưới đây là mẫu file style.css:

Bạn cần phải tải các tập tin trong lõi Genesis trước khi cài đặt các tùy chỉnh của bạn, bởi vì bạn sẽ không có thể tùy chỉnh Genesis cho đến khi nó đã được nạp. Nếu bạn nhìn vào các Child Theme thương mại của StudioPress, tất cả họ đều làm điều này bằng cách thêm đoạn code sau đây ở đầu functions.php:

Và dưới đây là nội dung đầu file functions.php mà child theme này được xây dựng:

Bây giờ bạn hãy vào Appearance>Themes, tiến hành kích hoạt child theme của bạn và xem thành quả.

Bài viết liên quan

Thông tin tác giả

Thêm bình luận