Tổng hợp code tùy chỉnh Read more trong Genesis Framework

10/16/2017

Tổng hợp code tùy chỉnh Read more trong Genesis Framework

Read More là một liên kết hiển thị dưới phần excerpt ngoài trang chủ cho phép người đọc xem toàn bộ nội dung chi tiết của bài viết. Chính vì vậy chúng ta cần phải tạo cho nó một tạo phong cách độc đáo thay vì một dòng chữ khô khan như mặc định. Trong bài viết này tôi sẽ chia sẻ tới các bạn cách tùy chỉnh và Việt hóa Read more trong Genesis Framework.

Loại bỏ Read More

Các bạn mở file functions.php vào thêm đoạn code sau:

//* Remove read more linkadd_filter( 'get_the_content_more_link', 'cswp_child_read_more_link' );function cswp_child_read_more_link() { return '';}

1

2

3

4

5

//* Remove read more link

add_filter( 'get_the_content_more_link', 'cswp_child_read_more_link' );

function cswp_child_read_more_link() {

return '';

}

Việt hóa từ Read More

Thay vì hiển thị cụm từ Read More thì bạn có thể Việt hóa nó thành “Đọc thêm”, “Xem tiếp” tùy theo sở thích của mình.

//* Customize Read More Textfunction cswp_child_read_more_link($more_link) {return '<a href="' . get_permalink() . '" class="more-link"> Đọc tiếp</a>';}add_filter( 'excerpt_more', 'cswp_child_read_more_link' );add_filter( 'get_the_content_more_link', 'cswp_child_read_more_link' );add_filter( 'the_content_more_link', 'cswp_child_read_more_link' );

1

2

3

4

5

6

7

//* Customize Read More Text

function cswp_child_read_more_link($more_link) {

return '<a href="' . get_permalink() . '" class="more-link"> Đọc tiếp</a>';

}

add_filter( 'excerpt_more', 'cswp_child_read_more_link' );

add_filter( 'get_the_content_more_link', 'cswp_child_read_more_link' );

add_filter( 'the_content_more_link', 'cswp_child_read_more_link' );

Tạo style CSS more link

/*Custom More link Bottom---------------------------------------------------------- */a.more-link { padding:5px 20px; color:#fff; background-color:#ff0000; border-radius:4px; display:inline-block; transition-property: opacity; transition-delay: 0.3s; transition-duration: .5s;}a.more-link:hover { color:#fff; opacity:.3;}

1

2

3

4

5

6

7

8

9

10

11

12

13

14

15

16

17

/*

Custom More link Bottom

---------------------------------------------------------- */

a.more-link {

        padding:5px 20px;

        color:#fff;

        background-color:#ff0000;

        border-radius:4px;

        display:inline-block;

        transition-property: opacity;

        transition-delay: 0.3s;

        transition-duration: .5s;

}

a.more-link:hover {

        color:#fff;

        opacity:.3;

}

Ngoài ra bạn cũng có thể thêm các icon vào more link bằng cách sử dụng font Awesome.

Nếu thích blog của mình thì hãy ủng hộ bằng cách Subscribe để nhận thêm nhiều bài viết mới. Nếu bạn có bất cứ khó khăn nào thì 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

Read More là một liên kết hiển thị dưới phần excerpt ngoài trang chủ cho phép người đọc xem toàn bộ nội dung chi tiết của bài viết. Chính vì vậy chúng ta cần phải tạo cho nó một tạo phong cách độc đáo thay vì một dòng chữ khô khan như mặc định. Trong bài viết này tôi sẽ chia sẻ tới các bạn cách tùy chỉnh và Việt hóa Read more trong Genesis Framework.

Loại bỏ Read More

Các bạn mở file functions.php vào thêm đoạn code sau:

//* Remove read more linkadd_filter( 'get_the_content_more_link', 'cswp_child_read_more_link' );function cswp_child_read_more_link() { return '';}

1

2

3

4

5

//* Remove read more link

add_filter( 'get_the_content_more_link', 'cswp_child_read_more_link' );

function cswp_child_read_more_link() {

return '';

}

Việt hóa từ Read More

Thay vì hiển thị cụm từ Read More thì bạn có thể Việt hóa nó thành “Đọc thêm”, “Xem tiếp” tùy theo sở thích của mình.

//* Customize Read More Textfunction cswp_child_read_more_link($more_link) {return '<a href="' . get_permalink() . '" class="more-link"> Đọc tiếp</a>';}add_filter( 'excerpt_more', 'cswp_child_read_more_link' );add_filter( 'get_the_content_more_link', 'cswp_child_read_more_link' );add_filter( 'the_content_more_link', 'cswp_child_read_more_link' );

1

2

3

4

5

6

7

//* Customize Read More Text

function cswp_child_read_more_link($more_link) {

return '<a href="' . get_permalink() . '" class="more-link"> Đọc tiếp</a>';

}

add_filter( 'excerpt_more', 'cswp_child_read_more_link' );

add_filter( 'get_the_content_more_link', 'cswp_child_read_more_link' );

add_filter( 'the_content_more_link', 'cswp_child_read_more_link' );

Tạo style CSS more link

/*Custom More link Bottom---------------------------------------------------------- */a.more-link { padding:5px 20px; color:#fff; background-color:#ff0000; border-radius:4px; display:inline-block; transition-property: opacity; transition-delay: 0.3s; transition-duration: .5s;}a.more-link:hover { color:#fff; opacity:.3;}

1

2

3

4

5

6

7

8

9

10

11

12

13

14

15

16

17

/*

Custom More link Bottom

---------------------------------------------------------- */

a.more-link {

        padding:5px 20px;

        color:#fff;

        background-color:#ff0000;

        border-radius:4px;

        display:inline-block;

        transition-property: opacity;

        transition-delay: 0.3s;

        transition-duration: .5s;

}

a.more-link:hover {

        color:#fff;

        opacity:.3;

}

Ngoài ra bạn cũng có thể thêm các icon vào more link bằng cách sử dụng font Awesome.

Nếu thích blog của mình thì hãy ủng hộ bằng cách Subscribe để nhận thêm nhiều bài viết mới. Nếu bạn có bất cứ khó khăn nào thì 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