Thủ Thuật Thesis: Thêm Menu Đẹp Dưới Mỗi Bài Viết

Hôm nay, blogviet xin chia sẻ một thử thuật của George – một trong những blogger chuyên có các thủ thuật Thesis mà mình rất thích. Thủ thuật này khá đặc biệt và chắc chắn nhiều bạn đang sử dụng Thesis theme sẽ thích. Để cho các bạn dễ hiểu thì mình xin chia sẻ hình sau để các bạn biết thực sự thủ thuật này như thế nào, hình thù của nó ra sao:

Image credit: serradinho.com

Như vậy các bạn biết điều mà mình muốn chia sẻ là gì rồi đúng không? Xin đi ngay vào thủ thuật này.

Vì thủ thuật này tác động đến teaser post nên để nó hiện tốt thì bạn cần vào trong Thesis Options và chọn Home Page Display, bạn chọn số bài viết hiển thị là 0. Sau đó, bạn vào Design Options, vào mục Teaser, sau đó chọn Teaser Display Options, bạn sẽ thấy nút “link to full article” đã được chọn. Các bạn không chọn rồi lưu lại.

Bây giờ bạn chèn đoạn code sau vào file custom.css:

.custom .teaser {width: 100%; margin-top: 0.25em; padding-top: 0.25em; text-align: justify;}
.custom .teasers_box {padding-top: 0; padding-bottom:0; border-top: 0;}
.custom #teaserlinkscontainer {margin-top:0px;}
.custom #teasermenu {height: 30px;}
.custom #teasermenu , .teasermenu ul {padding: 0; margin: 0; list-style: none; line-height: 1; border-width: 0.5em 0.5em 0.5em 0.5em;}
.custom #teasermenu ul {float: left; list-style: none; margin: 0px 0px 0px 0px; padding: 0px;}
.custom #teasermenu li {float: left; list-style: none; margin: 0px; padding: 0px;}
.custom #teasermenu ul li {list-style: none; margin: 0px; padding: 0px;}
.custom #teasermenu a, .custom #teasermenu li ul {border-color: #FFFFFF;}
.custom #teasermenu li a, .custom #teasermenu  li a:link {color: #FFFFFF; background: #444343; display: block; font-weight: bold; margin: 5px 5px 5px 5px; padding: 5px 5px 5px 5px; text-decoration: none;  font-size: 13px; font-family: Arial, Helvetica, sans-serif; -moz-border-radius-bottomleft:4px; -moz-border-radius-bottomright:4px; -moz-border-radius-topleft:4px; -moz-border-radius-topright:4px; -webkit-border-top-left-radius:4px; -webkit-border-top-right-radius:4px; -webkit-border-bottom-left-radius:4px; -webkit-border-bottom-right-radius:4px;}
.custom #teasermenu li a:hover, {color: #FFFFFF; background: #7BAAD9; display: block; margin: 5px 5px 5px 5px; padding: 5px 5px 5px 5px; text-decoration: none; -moz-border-radius-bottomleft:4px; -moz-border-radius-bottomright:4px; -moz-border-radius-topleft:4px; -moz-border-radius-topright:4px; -webkit-border-top-left-radius:4px; -webkit-border-top-right-radius:4px; -webkit-border-bottom-left-radius:4px; -webkit-border-bottom-right-radius:4px;}
.custom #teaserempty {width: 100%; margin-top: 0.5em; margin-bottom: 0.5em;}
.custom #teaserline {width: 100%; margin-top: 0.5em; margin-bottom: 0.5em; border-top: 1px solid #D0D0D0;}
.custom #teasermenu li p,{color: #000000; background: #D0D0D0; display: block; width: 100%}

Tiếp đó bạn chèn 2 đoạn code sau vào file custom_functions.php:

Code 1: Code này giúp thay đổi độ dài đoạn tóm tắt sẽ hiển thị trên trang chủ (75), bạn có thể tăng hoặc giảm theo ý muốn:

add_filter('excerpt_length', 'my_excerpt_length');
add_filter('the_excerpt', 'no_ellipsis');

function my_excerpt_length($length) { return 75; }
function no_ellipsis($text) { return str_replace('[...]', '.....', $text); }

Code 2: Code này giúp các bạn thêm các nút như hình minh họa ở trên:

add_action('thesis_hook_after_teaser','teaser_post_menu_links');

function teaser_post_menu_links() {
if (!is_single() && !is_page()){ ?>
<div id="">
<div id="teaserempty"></div>
<div id="teaserlinkscontainer">
    <ul id="teasermenu">
    <li><a href="<?php the_permalink(); ?>#comments" title="<?php comments_number(__('0 Góp ý','thesis'), __('1 Góp ý','thesis'), __('% Góp ý','thesis')); ?> on <?php the_title(); ?>" rel="nofollow"><?php comments_number(__('0 Góp ý','thesis'), __('1 Comment','thesis'), __('% Góp ý','thesis')); ?></a></li>
    <li><a href="<?php the_permalink(); ?>#respond" title="Add your opinion on <?php the_title(); ?>" rel="nofollow">Đăng góp ý của bạn</a></li>
    <li><a href="<?php the_permalink(); ?>" title="Đọc tiếp: <?php the_title(); ?>" rel="bookmark">Continue Reading</a></li>
    <li><p></p></li>
    </ul>
</div>
<div id="teaserline"></div>
</div>
<?php } }

Hy vọng thủ thuật này sẽ giúp cho các bạn ít nhiều. Chúc thành công!

Các bài liên quan:

1. Tạo Floating Icons Trên Thesis Nếu các bạn để ý thì trên blogviet có một thanh công cụ bên trái có các icon nhỏ như Twitter, Facebook, FriendFeed, Blogger….giúp bạn...
2. Thesis 1.6 Beta Và Những Thay Đổi Vượt Trội Nếu các bạn yêu thích Thesis thì hẳn đã biết phiên bản mới nhất 1.6 Beta mới vừa ra mắt được ít ngày và đã...
3. Từ khóa đắt và từ khóa sinh lợi trong Google Adsense– Cái nào tốt hơn “Từ khóa đắt” ( hay tiếng Anh gọi là high CPC) cũng không bằng “từ khóa sinh lợi” (profitable keyword – high earnings) do...
4. Tạo Rotating Banner Trên Thesis Mà Không Cần Plugin Với các bạn yêu thích và đang sử dụng Thesis cho blog của mình, thì hẳn rất muốn trang trí giao diện mang đậm tính...
5. 10 Thủ Thuật Hay Cho Thesis WordPress Theme Thesis hiện đang được coi là WordPress Theme khủng nhất trên internet nếu xét về độ linh hoạt và đặc biệt là khả năng SEO...