Thiết kế giao diện full width cho genesis child theme

Quảng cáo
Ads_ngang
Website dinhthuanit.com có bài Thiết kế giao diện full width cho genesis child theme

Thiết kế giao diện full width cho genesis trong khi thiết kế layout. Giống như hình sau:

tạo gia diện full width cho genesis wrapped content

Thiết kế này coi là “full width”, phía dưới menu/logo bạn để slider hoặc hình ảnh truyền bá sản phẩm. Và có thể bên dưới viết vài lời mời chào giới thiệu. Như hình trên phần footer để các nút fanpage và email subscription.

Để thực hiện hóa ý tưởng này, cách dễ dàng nhất là tạo ra các sidebar và đính vào các địa thế trên page.

Đăng ký sidebar (hay gọi là vùng widget.)

Mở functions.php trong genesis child theme, đăng ký 3 sidebars.

   //Add in Wrap Content Widget Areas       function   genesischild_fullwrap_widgets  (    )     {   register_sidebar  (     array    (     'name'     =>    __  (     'TopWrap'    ,     'genesis'     )    ,     'topwrap'    ,     'description'     =>    __  (     'TopWrap'    ,     'genesis'     )    ,     'before_widget'     =>      ' 
'
, 'after_widget' => '

' , ) ) ; register_sidebar ( array ( 'name' => __ ( 'OptinWrap' , 'genesis' ) , 'optinwrap' , 'description' => __ ( 'OptinWrap' , 'genesis' ) , 'before_widget' => '

'

, 'after_widget' => '

' ,   ) ) ; register_sidebar ( array ( 'name' => __ ( 'BottomWrap' , 'genesis' ) , 'bottomwrap' , 'description' => __ ( 'BottomWrap' , 'genesis' ) , 'before_widget' => '

'

, 'after_widget' => '

' , ) ) ;   } add_action ( 'widgets_init' , 'genesischild_fullwrap_widgets' ) ;

Sử dụng widgets_init action trong wordpress để đăng ký sidebar. Mỗi vùng sidebar có ID riêng và classes chung. Dựa vào đặc điểm này chúng ta sẽ sử dụng css cho chuyện tùy chỉnh các vị trí phù hợp trên web.

wordpress dashboard widget areas
Quản lý các widgets cho sidebars trong wordpress admin.

Định địa thế cho vùng widget

Genesis cung cấp rất nhiều hook trong đấy có hooks thiết lập địa thế cho nội dung. Chúng ta có thể biết chính xác nội dung được đính ở địa làm sao bằng phương pháp sử dụng đúng Genesis hooks. Sử dụng Plugin giúp phát hiện genesis hooks như dưới đây.

xác định vị trí hooks genesis hook guide

Cách sử dụng: tên genesis hooks sẽ hiển thị ngay trên frontend, rất dễ hình dung. Ở đây chúng ta sẽ xem tên hooks hiển thị như thế nào.
genesis-hooks-on-page

Như bạn đã thấy trên hình, tên filter hooks hiển thị tương ứng với trị trí trên trang hiện tại, thật tuyệt cú mèo phải không. Vậy thế nào bạn thấy được hình trên, rất dễ dàng chỉ việc thêm tham số ?g_filters=show vào cuối URL frontend của website.

Ví dụ để sửa placeholder trong searchbox.

 add_filter  (    "genesis_search_text"    ,    "change_searchbox_placeholder"    )    ;     function   change_searchbox_placeholder  (    )    {     return     "new placeholder"    ;     }   

Tương tự để xem những actions hooks. Thêm tham số ?g_hooks=show .

Ngoài ra để hiểu các thẻ layout (ID và class).
genesis layout

Trở lại với bài này, chúng ta cần thiết kế các vị trí sau:
Thiết kế layout trong genesis

Như vậy ta sẽ sử dụng hook genesis_after_header cho phần thiết kế slider và phần bottom sử dụng genesis_before_footer .

Mở functions.php lên, thêm vào dòng sau:

    //* Add the top widgets in place     function   genesischild_top_wrap_widgets  (    )     {   genesis_widget_area   (    'topwrap'    ,     array    (     'before'     =>      ' 
'
, 'after' => '

' , ) ) ; genesis_widget_area ( 'optinwrap' , array ( 'before' => '

'

, 'after' => '

' , ) ) ; } add_action ( 'genesis_after_header' , 'genesischild_top_wrap_widgets' ) ;   //* Add the bottom widgets in place function genesischild_bottom_wrap_widgets ( ) { genesis_widget_area ( 'bottomwrap' , array ( 'before' => '

'

, 'after' => '

' , ) ) ; } add_action ( 'genesis_before_footer' , 'genesischild_bottom_wrap_widgets' ) ;

Giải thích: Hàm genesis_widget_area hiển thị nội dung widgets của sidebar. Nội dung này sẽ chèn vào kế tiếp các nội dung đã có.

Thiết kế CSS

Mỗi vùng có ID và class của thẻ HTML khác nhau, để tìm chúng bạn chuột phải vào trang chọn kiểm tra phần tử. Và Kết quả sau khi thêm CSS:

genesis-wraps-in-position-wth-css[1]

Hẹn bạn ở tutorial tiếp theo.

Hãy cho mình biết suy nghĩ của bạn trong phần bình luận bên dưới bài viết này. Hãy theo dấu kênh chia sẻ kiến thức WordPress của TopVn trên Twitter và Facebook

Bài viết Thiết kế giao diện full width cho 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