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">
    &lt;li&gt;&lt;a href=&quot;&lt;?php the_permalink(); ?&gt;#comments&quot; title=&quot;&lt;?php comments_number(__('0 Góp ý','<a href="http://eblogviet.com/tag/thesis-floating" style="color:#0000FF;text-decoration:underline;" target="_blank" rel="nofollow" onmouseover="self.status='http://eblogviet.com/tag/thesis-floating';return true;" onmouseout="self.status=''">thesis</a>'), __('1 Góp ý','<a href="http://eblogviet.com/tag/thesis-tips/feed" style="color:#0000FF;text-decoration:underline;" target="_blank" rel="nofollow" onmouseover="self.status='http://eblogviet.com/tag/thesis-tips/feed';return true;" onmouseout="self.status=''">thesis</a>'), __('% Góp ý','<a href="http://eblogviet.com/tag/thesis-author" style="color:#0000FF;text-decoration:underline;" target="_blank" rel="nofollow" onmouseover="self.status='http://eblogviet.com/tag/thesis-author';return true;" onmouseout="self.status=''">thesis</a>')); ?&gt; on &lt;?php the_title(); ?&gt;&quot; rel=&quot;nofollow&quot;&gt;&lt;?php comments_number(__('0 Góp ý','<a href="http://eblogviet.com/tag/thesis-floating"" style="color:#0000FF;text-decoration:underline;" target="_blank" rel="nofollow" onmouseover="self.status='http://eblogviet.com/tag/thesis-floating"';return true;" onmouseout="self.status=''">thesis</a>'), __('1 Comment','<a href="http://eblogviet.com/tag/thesis-tutorial"" style="color:#0000FF;text-decoration:underline;" target="_blank" rel="nofollow" onmouseover="self.status='http://eblogviet.com/tag/thesis-tutorial"';return true;" onmouseout="self.status=''">thesis</a>'), __('% Góp ý','<a href="http://eblogviet.com/tag/thesis" style="color:#0000FF;text-decoration:underline;" target="_blank" rel="nofollow" onmouseover="self.status='http://eblogviet.com/tag/thesis';return true;" onmouseout="self.status=''">thesis</a>')); ?&gt;&lt;/a&gt;&lt;/li&gt;
    &lt;li&gt;&lt;a href=&quot;&lt;?php the_permalink(); ?&gt;#respond&quot; title=&quot;Add your opinion on &lt;?php the_title(); ?&gt;&quot; rel=&quot;nofollow&quot;&gt;Đăng góp ý của bạn&lt;/a&gt;&lt;/li&gt;
    &lt;li&gt;&lt;a href=&quot;&lt;?php the_permalink(); ?&gt;&quot; title=&quot;Đọc tiếp: &lt;?php the_title(); ?&gt;&quot; rel=&quot;bookmark&quot;&gt;Continue Reading&lt;/a&gt;&lt;/li&gt;
    &lt;li&gt;&lt;p&gt;&lt;/p&gt;&lt;/li&gt;
    &lt;/ul&gt;
&lt;/div&gt;
&lt;div id=&quot;teaserline&quot;&gt;&lt;/div&gt;
&lt;/div&gt;
&lt;?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!