Tùy chỉnh Breadcrumb cho Genesis Framework

10/16/2017

Tùy chỉnh Breadcrumb cho Genesis Framework

Không thể phủ nhận lợi ích của breadcrumb wordpress, nó giúp người đọc biết được mình đang ở đâu trong trang web của bạn. Tuy nhiên, Breadcrumb mặc định của Genesis Framework lại không được đẹp cho lắm. Và một yêu cầu đặt ra, bạn cần phải chỉnh sửa nó. Nắm bắt được tình hình đó, hôm nay Chia sẻ WP sẽ hướng dẫn bạn làm điều này.

Yêu cầu, các bạn phải cài font awesome trước, nếu chưa cài các bạn có thể tham khảo:

Thêm font Awesome cho Genesis Framework

Bước đầu tiên, bạn kích hoạt breadcrumb của theme Genesis lên. Để làm điều này, trên thanh menu, các bạn chọn Genesis -> Theme Settings, tìm đến Breadcrumb  và kích hoạt nó. Theo mình, chỉ nên kích hoạt cho post và page thôi.

Như vậy đã hoàn thành được công đoạn đầu tiên, các bạn vào post hoặc page bất kì xem nó đã hiển thị chưa. Nếu rồi, chúng ta sang bước tiếp theo nhé.

Các bạn thêm đoạn code sau file functions.php của theme đang sử dụng

add_filter( 'genesis_breadcrumb_args', 'cswp_breadcrumb_args' );function cwsp_breadcrumb_args( $args ) {$args['home'] = 'Home';$args['sep'] = ' » ';$args['list_sep'] = ', '; // Genesis 1.5 and later$args['prefix'] = '<div class="breadcrumb">';$args['suffix'] = '</div>';$args['heirarchial_attachments'] = true; // Genesis 1.5 and later$args['heirarchial_categories'] = true; // Genesis 1.5 and later$args['display'] = true;$args['labels']['prefix'] = ' ';$args['labels']['author'] = 'Archives for ';$args['labels']['category'] = 'Archives for '; // Genesis 1.6 and later$args['labels']['tag'] = 'Archives for ';$args['labels']['date'] = 'Archives for ';$args['labels']['search'] = 'Search for ';$args['labels']['tax'] = 'Archives for ';$args['labels']['post_type'] = 'Archives for ';$args['labels']['404'] = 'Not found: '; // Genesis 1.5 and laterreturn $args;}

1

2

3

4

5

6

7

8

9

10

11

12

13

14

15

16

17

18

19

20

21

add_filter( 'genesis_breadcrumb_args', 'cswp_breadcrumb_args' );

function cwsp_breadcrumb_args( $args ) {

$args['home'] = 'Home';

$args['sep'] = ' » ';

$args['list_sep'] = ', '; // Genesis 1.5 and later

$args['prefix'] = '<div class="breadcrumb">';

$args['suffix'] = '</div>';

$args['heirarchial_attachments'] = true; // Genesis 1.5 and later

$args['heirarchial_categories'] = true; // Genesis 1.5 and later

$args['display'] = true;

$args['labels']['prefix'] = ' ';

$args['labels']['author'] = 'Archives for ';

$args['labels']['category'] = 'Archives for '; // Genesis 1.6 and later

$args['labels']['tag'] = 'Archives for ';

$args['labels']['date'] = 'Archives for ';

$args['labels']['search'] = 'Search for ';

$args['labels']['tax'] = 'Archives for ';

$args['labels']['post_type'] = 'Archives for ';

$args['labels']['404'] = 'Not found: '; // Genesis 1.5 and later

return $args;

}

Tiếp theo, để hiển thị được chính xác, các bạn vào file style.css, chỉnh sửa hoặc thêm đoạn code sau vào:

.breadcrumb:before { display: inline-block; font-size: 18px; font-family: 'FontAwesome'; content: "\f015"; color: #f96e5b;}

1

2

3

4

5

6

7

.breadcrumb:before {

    display: inline-block;

    font-size: 18px;

    font-family: 'FontAwesome';

    content: "\f015";

    color: #f96e5b;

}

Cơ bản là như thế là đã xong, nhưng các bạn vẫn có thể sửa thêm bất kì điều gì bạn muốn.

Nếu gặp bất kì khó khăn gì hãy cho mình biết ở phần bình luận nhé. Chúc các bạn thành công.

Nguồn: Việt Hùng admin https://chiasewp.com/

Chia Sẻ :

Tweet

Bài viết liên quan

Không thể phủ nhận lợi ích của breadcrumb wordpress, nó giúp người đọc biết được mình đang ở đâu trong trang web của bạn. Tuy nhiên, Breadcrumb mặc định của Genesis Framework lại không được đẹp cho lắm. Và một yêu cầu đặt ra, bạn cần phải chỉnh sửa nó. Nắm bắt được tình hình đó, hôm nay Chia sẻ WP sẽ hướng dẫn bạn làm điều này.

Yêu cầu, các bạn phải cài font awesome trước, nếu chưa cài các bạn có thể tham khảo:

Thêm font Awesome cho Genesis Framework

Bước đầu tiên, bạn kích hoạt breadcrumb của theme Genesis lên. Để làm điều này, trên thanh menu, các bạn chọn Genesis -> Theme Settings, tìm đến Breadcrumb  và kích hoạt nó. Theo mình, chỉ nên kích hoạt cho post và page thôi.

Như vậy đã hoàn thành được công đoạn đầu tiên, các bạn vào post hoặc page bất kì xem nó đã hiển thị chưa. Nếu rồi, chúng ta sang bước tiếp theo nhé.

Các bạn thêm đoạn code sau file functions.php của theme đang sử dụng

add_filter( 'genesis_breadcrumb_args', 'cswp_breadcrumb_args' );function cwsp_breadcrumb_args( $args ) {$args['home'] = 'Home';$args['sep'] = ' » ';$args['list_sep'] = ', '; // Genesis 1.5 and later$args['prefix'] = '<div class="breadcrumb">';$args['suffix'] = '</div>';$args['heirarchial_attachments'] = true; // Genesis 1.5 and later$args['heirarchial_categories'] = true; // Genesis 1.5 and later$args['display'] = true;$args['labels']['prefix'] = ' ';$args['labels']['author'] = 'Archives for ';$args['labels']['category'] = 'Archives for '; // Genesis 1.6 and later$args['labels']['tag'] = 'Archives for ';$args['labels']['date'] = 'Archives for ';$args['labels']['search'] = 'Search for ';$args['labels']['tax'] = 'Archives for ';$args['labels']['post_type'] = 'Archives for ';$args['labels']['404'] = 'Not found: '; // Genesis 1.5 and laterreturn $args;}

1

2

3

4

5

6

7

8

9

10

11

12

13

14

15

16

17

18

19

20

21

add_filter( 'genesis_breadcrumb_args', 'cswp_breadcrumb_args' );

function cwsp_breadcrumb_args( $args ) {

$args['home'] = 'Home';

$args['sep'] = ' » ';

$args['list_sep'] = ', '; // Genesis 1.5 and later

$args['prefix'] = '<div class="breadcrumb">';

$args['suffix'] = '</div>';

$args['heirarchial_attachments'] = true; // Genesis 1.5 and later

$args['heirarchial_categories'] = true; // Genesis 1.5 and later

$args['display'] = true;

$args['labels']['prefix'] = ' ';

$args['labels']['author'] = 'Archives for ';

$args['labels']['category'] = 'Archives for '; // Genesis 1.6 and later

$args['labels']['tag'] = 'Archives for ';

$args['labels']['date'] = 'Archives for ';

$args['labels']['search'] = 'Search for ';

$args['labels']['tax'] = 'Archives for ';

$args['labels']['post_type'] = 'Archives for ';

$args['labels']['404'] = 'Not found: '; // Genesis 1.5 and later

return $args;

}

Tiếp theo, để hiển thị được chính xác, các bạn vào file style.css, chỉnh sửa hoặc thêm đoạn code sau vào:

.breadcrumb:before { display: inline-block; font-size: 18px; font-family: 'FontAwesome'; content: "\f015"; color: #f96e5b;}

1

2

3

4

5

6

7

.breadcrumb:before {

    display: inline-block;

    font-size: 18px;

    font-family: 'FontAwesome';

    content: "\f015";

    color: #f96e5b;

}

Cơ bản là như thế là đã xong, nhưng các bạn vẫn có thể sửa thêm bất kì điều gì bạn muốn.

Nếu gặp bất kì khó khăn gì hãy cho mình biết ở phần bình luận nhé. Chúc các bạn thành công.

Nguồn: Việt Hùng admin https://chiasewp.com/

Thẻ : Wordpress