Thay đổi cấu trúc tùy biến layout trong genesis child theme

Quảng cáo
Ads_ngang
Website dinhthuanit.com có bài Thay đổi cấu trúc tùy biến layout trong genesis child theme

Trong bài viết này, mình chỉ dẫn các bạn tùy biến layout trong genesis và thay đổi lại ví trí các phần tử của genesis child theme.

Lựa chọn layout trong Genesis.

Để xác định một layout mặc định cho toàn bộ website thì bạn vào Genesis – Theme Settting – Chọn layout bạn muốn.
layout options genesis - tùy biến layout trong genesis
Hoặc bạn có thể dùng đoạn code sau dán vào functions.php để thiết lập layout mặc định.

    <?php       // Register default site layout option   genesis_set_default_layout  (     'full-width-content'     )    ;   

Trong trường hợp bạn muốn xóa một layout nào đó khỏi Genesis Framework thì bạn dùng đoạn code tương ứng với mỗi layout như sau:

    <?php       // Unregister other site layouts   genesis_unregister_layout  (     'content-sidebar'     )    ;   genesis_unregister_layout  (     'sidebar-content'     )    ;   genesis_unregister_layout  (     'content-sidebar-sidebar'     )    ;   genesis_unregister_layout  (     'sidebar-sidebar-content'     )    ;   genesis_unregister_layout  (     'sidebar-content-sidebar'     )    ;   

Giờ vào lại phần thiết lập layout của genesis child theme, bạn sẽ thấy các layout đã được loại bỏ.
tùy biến genesis layout

Layout mặc định genesis

Bạn dùng inspect Element của chrome hoặc sử dụng Firebug browser plugin (Hỗ trợ cả Firefox, Chrome, và Safari) sẽ nhìn thấy rõ cấu trúc HTML của genesis có dạng:
Cấu trúc layout genesis child theme
Tùy từng genesis child theme mã sẽ khác nhau, nhưng nói chung layout gồm có main wrap (>

Trong ví dụ này, mình sẽ chỉ cho bạn cách tạo full width bằng cách di chuyển phần header và footer ra ngoài main wrap.

Di chuyển header ngoài wrap

Nguyên tắc chung để di chuyển hay sửa lại bất kỳ thành một phần trong thiết kế genesis action hook. Có 2 bước , xóa hook mặc định và chuyển phần tử sang hook khác. Thêm các dòng sau vào functions.php genesis child theme.

   /** Reposition header outside main wrap */   remove_action  (     'genesis_header'    ,     'genesis_header_markup_open'    ,     5     )    ;   remove_action  (     'genesis_header'    ,     'genesis_do_header'     )    ;   remove_action  (     'genesis_header'    ,     'genesis_header_markup_close'    ,     15     )     ;     add_action  (     'genesis_before'    ,     'genesis_header_markup_open'    ,     5     )    ;   add_action  (     'genesis_before'    ,     'genesis_do_header'     )    ;   add_action  (     'genesis_before'    ,     'genesis_header_markup_close'    ,     15     )    ;   

Nếu bạn đang sử dụng studiopress Prose theme thì truy cập vào Genesis > Custom Code > Custom Functions box. Chèn đoạn mã trên vào box, đối với các theme không bổ trợ custom code như Prose thì bạn phải chèn vào functions.php.

Giải thích: 3 dòng trước mắt sẽ xóa toàn bộ các thành phần khởi tạo nên header sử dụng hàm remove_action() của wordpress.

 remove_action  (     'genesis_header'    ,     'genesis_header_markup_open'    ,     5     )    ;   remove_action  (     'genesis_header'    ,     'genesis_do_header'     )    ;   remove_action  (     'genesis_header'    ,     'genesis_header_markup_close'    ,     15     )     ;   

3 dòng cuối cùng sẽ tạo lại nội dung header vào sinh sống địa thế trước khi bắt đầu layout ra đời bởi genesis (mính muốn nói là main wrap) tức header sẽ nằm ngoài wrap.

   /** Add in Genesis header structural markup and header code */   add_action  (     'genesis_before'    ,     'genesis_header_markup_open'    ,     5     )    ;   add_action  (     'genesis_before'    ,     'genesis_do_header'     )    ;   add_action  (     'genesis_before'    ,     'genesis_header_markup_close'    ,     15     )    ;   

Như bạn nhìn thấy ở trên thành phần cấu tạo header gồm có:

  • genesis_header_markup_open: mở header
  • genesis_do_header: nội dung header, chứa title, description và wigget.
  • genesis_header_markup_close: đóng header.

Các thành phần này phải để theo thứ tự như trên giao diện, nếu chẳng những định priority cho add_action thì mặc định giá trị này là 10. Nghĩa là sao, thứ tự đúng là: genesis_header_markup_open, genesis_do_header, genesis_header_markup_close thiết lập vị trí tương ứng này như ở trên là 5, 10, 15. Các bạn chú trọng nhé, nếu không sẽ đảo lộn lại cấu trúc làm hỏng layout đấy.

Di chuyển footer ngoài wrap

Kể từ khi Prose theme đặt footer ra ngoải wrap, nên bạn không cần di chuyển phần tử footer nữa. Nếu bạn làm việc với genesis child theme mà phần footer nằm ở phía trong wrap thì chèn vào functions.php để di chuyển ra ngoài giống việc làm header ở trên.

   /** Reposition footer outside main wrap */   remove_action  (     'genesis_footer'    ,     'genesis_footer_markup_open'    ,     5     )    ;   remove_action  (     'genesis_footer'    ,     'genesis_do_footer'     )    ;   remove_action  (     'genesis_footer'    ,     'genesis_footer_markup_close'    ,     15     )     ;     add_action  (     'genesis_after'    ,     'genesis_footer_markup_open'    ,     5     )    ;   add_action  (     'genesis_after'    ,     'genesis_do_footer'     )    ;   add_action  (     'genesis_after'    ,     'genesis_footer_markup_close'    ,     15     )    ;   

Nếu bạn thích bài viết này, hãy cỗ vũ chúng tôi bằng phương pháp đăng ký nhận bài viết mới ở bên dưới và đừng quên chia sẻ kiến thức này với bạn bè của bạn nhé. Bạn cũng cũng đều có thể theo dấu blog này trên Twitter và Facebook

Bài viết Thay đổi cấu trúc tùy biến layout trong genesis child theme được tổng hợp và biên tập bởi: dinhthuanit.com. Mọi ý kiến đóng góp và phản hồi vui lòng gửi Liên Hệ cho dinhthuanit.com để điều chỉnh. dinhthuanit.com xin cảm ơn.

Bài Viết Liên Quan


Bài Viết Khác


Quảng cáo
Ads_ngang