|
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 vượt trội của nó. Theo các chuyên gia đánh giá thì Thesis không đơn giản là một framework mà nó còn được ví như một software với độ thông minh và thân thiện cho mọi bộ máy tìm kiếm. Đó là lý do mà nhiều blogger từ nhỏ đến lớn như Matt Cutts cũng chọn anh chàng Thesis xấu trai này.  Theme tốt nhất trên internet Blogviet cũng không phải là ngoại lệ khi chuyển từ One Theme V2.0 sang sử dụng Thesis và nhiều blogger khác của Việt Nam cũng đang mắc hội chứng Thesis như mình. Tuy nhiên, sau khi cài đặt, nhiều bạn thấy Thesis không như nhiều người nói. Nó quá đơn giản và không có gì đặc biệt nhưng các bạn đừng vì hình dạng bên ngoài của Thesis mà nhầm tưởng về “nội công” của nó nhé. Các bạn yêu thích Thesis hãy chung tay chia sẻ thủ thuật mà mình biết nhé! Thesis có cấu trúc là các hook hợp lại và bạn có thể thoải mái hiệu chỉnh nếu biết về cấu trúc và có kiến thức về code. Các bạn có thể tham khảo Thesis hook reference để biết có bao nhiêu hook tồn tại bên trong Thesis và xem hướng dẫn cách làm cho các hook đó hoạt động theo ý mình. Blogviet không biết nhiều về CNTT và code nên cách duy nhất vẫn làm “học lỏm” từ các blogger khác. Trước khi đi vào các thủ thuật mà mình chia sẻ, xin lưu ý các bạn là phiên bản mới nhất Thesis 1.6 đã có những thay đổi vượt trội, một bước cần thiết để tiến đến phiên bản V2.0 trong thời gian sắp tới. Dưới đây là các thủ thuật mà blogviet đang áp dụng, hy vọng sẽ giúp các bạn được ít nhiều. Các bạn có thể chọn các thủ thuật tương ứng nhé. 1. Tạo Header Banner Theo Ý bạn: Bình thường thì Thesis không có banner mà các bạn phải tự thiết kế và đưa nó lên. Tuy nhiên, để làm được việc này thì bạn nên sử dụng đúng thủ thuật và mình thích dùng CSS như dưới đây. Chèn đoạn code sau vào file custom.css trong thư mục Custom: | 1 | .custom #header #logo a { display: block; height: 165px; width: 1052px; background: url(http://blogviet.info/logo.jpg) no-repeat; outline: none; } |
| 2 | .custom #header #logo, .custom #header #tagline { text-indent: -9999px; } |
| 3 | .custom #header #tagline { height: 0; } |
| 4 | .custom #header {border-bottom:none; padding:0} |
| 5 | .custom #header { padding: 0; } |
Bạn thay link http://blogviet.info/logo.jpg tới banner của bạn và chỉnh kích thước 165px và 1052px theo kích thước mà bạn đặt cho blog của mình cho phù hợp nhé. 2. Tạo đường viền và thay background cho Thesis: Trong phiên bản Thesis 1.6, việc thay màu background đơn giản hơn nhiều khi bạn có thể tự thay màu các phần ngay trong Design Options. Tuy nhiên, để đáp ứng tất cả các bạn đang dùng Thesis từ 1.4 đến 1.6 thì thủ thuật này có thể tạo màu riêng và đường viền giống blogviet đang dùng. Chèn đoạn code sau vào file custom.css trong thư mục Custom: | 10 | border: 0.4em solid #dddddd; |
Để cho đường viền hiển thị đúng, các bạn vào Design Options -> Framework Options -> Page Framework là ok. 3. Tạo màu khác cho comment của tác giả: Để cho màu các comment của tác giả bài viết khác với màu của các commentators thông thường, bạn chỉ cần chèn đoạn code sau vào file custom.css | 1 | .custom dl#comment_list dd p.reply { margin: 1em 0 1.5em 0; } |
| 2 | .custom dl#comment_list dd p.reply a {background: #2f2c28; color: #FFF;font-size: 11px;font-weight: normal;padding: 4px 6px;text-transform: uppercase;} |
| 3 | .custom dl#comment_list dd p.reply a:hover {background:#46382d; border: 0;} |
| 5 | .custom dl#comment_list dt.bypostauthor, .custom dl#comment_list dd.bypostauthor>div {background: #E7F8FB none repeat scroll 0 0; padding-top:20px;} |
4. Tạo author box cho từng tác giả: Nếu bạn có nhiều hơn 1 tác giả hoặc chỉ là bạn thì việc hiển thị một box trong đó có chứa các thông tin như số bài viết của tác giả, tên, URL và nhiều hơn nữa sẽ làm cho blog của bạn Pro hơn. Blogviet cũng đang dùng tính năng này thay vì sử dụng đoạn text thông thường dưới mỗi bài viết. Bạn chèn đoạn code sau vào file custom.css: | 01 | .custom #comments { clear: both; } |
| 02 | .postauthor { background: #E6DB55; border-top: 1px solid #e1e1e0; border-bottom: 1px solid #e1e1e0; overflow: hidden; padding: 1.5em; } |
| 03 | .postauthor img { border: 5px solid #e2dede; float: left; margin-right: 1.5em; } |
| 04 | .postauthor h4 { color: #666; font-size: 2em; margin-bottom: 5px; } |
| 05 | .postauthor p { color: #515151; font-size: 13px; margin-bottom: 12px; } |
| 06 | .postauthor p.hlight { font-size: 11px; text-transform: uppercase; } |
| 07 | .postauthor p.hlight span { color: #CB3131; font-size: 13px; font-style: italic; font-weight: bold; letter-spacing: 0.8px; } |
| 09 | .socialmedia { background: #33CC99; border-top: 1px solid #E6DB55; border-bottom: 1px solid #e1e1e0; overflow: hidden; padding: 1em; text-align: center;} |
| 10 | .socialmedia p { color: #ffffff; font-size: 1.3em;} |
Tiếp đó bạn chèn tiếp đoạn mã sau vào file custom_funtions.php trong thư mục Custom: | 01 | function post_footer() { |
| 07 | <div class="postauthor"> |
| 08 | <?php echo get_avatar( get_the_author_id() , 120 ); ?> |
| 09 | <h4>Bài viết của tác giả <a href="/<?php the_author_url(); ?>"> |
| 10 | <?php the_author_firstname(); ?> <?php the_author_lastname(); ?></a></h4> |
| 17 | add_action('thesis_hook_after_post_box', 'post_footer'); |
Sau đó lưu lại là ok như trên blogviet đang hiển thị. 5. Làm cho bài viết của CommentLUV thêm nổi bật: Như các bạn đã thấy, để giúp các commentator giới thiệu các bài mới đăng của blog mình tới các bạn đọc khi comment trên blogviet, mình đã sử dụng plugin CommentLUV. Tuy nhiên, background mặc định không hấp dẫn lắm nên đành làm cho nó thêm phần mềm mại và nổi bật hơn. Để làm được điều đó, bạn chèn đoạn code sau vào custom.css nhé: | 1 | .cluv {display:block; padding:8px;border: 1px solid #E1E1E0; background: #F5F5F5; text-transform: none; font-style: normal; letter-spacing: 0; -moz-border-radius: 5px; -webkit-border-radius: 5px; margin-top: 15px;} |
| 2 | .custom #comments abbr {display:block; padding:8px;border: 1px solid #E1E1E0; background: #F5F5F5; text-transform: none; font-style: normal; letter-spacing: 0; -moz-border-radius: 5px; -webkit-border-radius: 5px; margin-top: 15px;} |
Các bạn có thể chỉnh màu #F5F5F5 thành màu mà mình yêu thích nhé. 6. Hiện gravatar của tác giả ngay bên cạnh tiêu đề bài viết: Nếu các bạn có nhiều hơn 1 tác giả như blogviet thì tính năng này cũng đáng sử dụng bởi bất kỳ khi nào người đọc vào xem đều nhận ra ngay ai là người viết. Tính năng này sẽ tự động lấy avatar từ tài khoản gravatar của bạn. Bạn nên có gravatar để sử dụng tính năng này, có thể xem thêm bài hướng dẫn đăng ký gravatar mà mình đã giới thiệu từ lâu. Chèn đoạn code sau vào file custom.css: | 1 | .custom .headline_area .avatar {float:left; border:3px solid #ddd; margin-right:1em;} |
Chèn đoạn code sau vào file custom_functions.php: | 1 | function author_avatar() { |
| 2 | echo get_avatar( get_the_author_id(), 40 ); |
| 4 | add_action('thesis_hook_before_headline', 'author_avatar'); |
7. Thêm nút gửi bài LinkHay vào Thesis: Đây là thủ thuật của blogviet nhé. Mình nghĩ chắc các bạn cũng quan tâm vì LinkHay hiện đang giữ vị trí #1 về bookmarking tại Việt Nam. Để triển khai thủ thuật này, bạn chỉ cần chèn đoạn code sau vào file custom_functions.php: | 01 | function linkhay_button () { |
| 03 | <div style="float:right; padding-left:3px;"> |
| 04 | <script type="text/javascript">var linkhay_title = '';</script> |
| 05 | <script type="text/javascript">var linkhay_url = '';</script> |
| 06 | <script type="text/javascript">var linkhay_desc = '';</script> |
| 07 | <script type="text/javascript">var linkhay_style = '1';</script> |
| 14 | add_action('thesis_hook_before_headline','linkhay_button'); |
Các bạn cũng có thể dùng thủ thuật đơn giản này để thêm các button của các mạng khác như TagVN, Vietkicks, Mottramdo…một cách dễ dàng. 8. Thêm mục Twitter ID vào form comment: Nếu bạn muốn giới thiệu tài khoản Twitter của mình tới bạn bè thì bạn sẽ muốn triển khai thủ thuật này. Trước khi thực hiện, bạn nên có plugin TwitterLink Comment và đã kích hoạt. Sau khi kích hoạt, bạn nên cài đặt plugin này theo hướng dẫn dưới hình sau: 
Sau khi đã hoàn thành các bước trên, bạn sẽ cần chèn đoạn code sau vào file custom.css: | 1 | .custom p.tweet_user {font-size: 12px; float: left;} |
Tiếp đó bạn chèn đoạn mã sau vào file custom_functions.php: | 01 | add_action('thesis_hook_after_comment_meta', 'comment_twitter_username'); |
| 03 | function comment_twitter_username() { |
| 06 | $query = $wpdb->prepare("SELECT twitid FROM {$wpdb->prefix}wptwitipid WHERE email = %s",get_comment_author_email()); |
| 07 | $twitid = $wpdb->get_var($query); |
| 08 | if($twitid && !$comment->twitlinkid){ |
| 09 | $comment->twitlinkid = $twitid; |
| 12 | if($comment->twitlinkid) { |
| 13 | $twitterusername = $comment->twitlinkid; |
| 15 | echo '<a href="/http://twitter.com/'.$twitterusername.'" title="Follow '.$twitterusername.' on Twitter" rel="nofollow" target="_blank"><b>@'.$twitterusername.'</b></a> on Twitter.</p><br><br>'; |
Bạn nên thay file hình ảnh này thành của bạn hoặc đổi hình ảnh nào mà bạn thích http://blogviet.info/wp-content/themes/thesis_16/custom/images/small_twitter3.gif Thêm một bước nữa là bạn cần chèn thêm 1 field vào file comments.php có dạng như sau ngay dưới field URL: | 1 | <p><input class="text_input" type="text" name="atf_twitter_id" id="twitterlinks" value="<?php echo $comment_author_atf_twitter_id; ?>" tabindex="4" /><label for="url"><?php _e('Twitter Username Của Bạn', 'thesis'); ?></label></p> |
Nếu bạn nào không thể tìm được chỗ chèn thì vó thể tham khao file comments.php của blogviet. 9. Thủ thuật chèn phép toán chống spam vào khung comment như blogviet: Một vấn đề mà các bạn cũng đã hỏi nhiều đó là làm thế nào để chèn box chống spam giống như trên blogviet. Bình thường thì bạn có thể dùng plugin để hạn chế các spam comment nhưng để làm cho nó tích hợp được vào khung comment như TwitterLink thì cần thêm một thủ thuật nữa. Để làm được điều này thì các bạn cần có plugin có tên Math Comment Spam Protection và thêm Thesis OpenHook plugin đã được kích hoạt. Sau đó bạn chèn đoạn code sau vào mục open_hook_comment_form trong ô Comment Field: | 2 | /****** Math Comment Spam Protection Plugin ******/ |
| 3 | if ( function_exists('math_comment_spam_protection') ) { |
| 4 | $mcsp_info = math_comment_spam_protection(); |
| 5 | ?> <p><input type="text" name="mcspvalue" id="mcspvalue" value="" size="22" tabindex="4" /> |
| 6 | <label for="mcspvalue"><small>Chống spam: Tổng của <?php echo $mcsp_info['operand1'] . ' + ' . $mcsp_info['operand2'] . ' ?' ?></small></label> |
| 7 | <input type="hidden" name="mcspinfo" value="<?php echo $mcsp_info['result']; ?>" /> |
Cũng xin lưu ý là khi hoàn thành xong, các bạn sẽ không nhìn thấy phép toán 4+5=? mà nên đợi một vài giờ để nó kịp cập nhật. 10. Tạo Thesis Footer theo phong cách riêng: Có nhiều cách tạo Thesis Footer nhưng mình thích cái mà mình đang dùng và nhiều bạn cũng tỏ ý muốn có thủ thuật này. Mình sẽ chia sẻ cách làm và hy vọng các bạn sẽ thích thủ thuật này. Đây cũng là thủ thuật cuối cùng của bài viết này. Bạn chèn đoạn code sau vào file custom.css: | 03 | border: 0.6em solid #212020; |
| 11 | #foot a { color: #DBEDF9; border-bottom: 1px dashed #DBEDF9; text-decoration: none; } |
| 13 | #foot a:hover { background: #DBEDF9; color: #3D3C3C; } |
| 15 | #foot span.cat, #foot h3 { /* controls all blue headings */ |
| 16 | color: #23A2D7; font-size: 16px; font-weight: bold; letter-spacing: 1px; text-transform: uppercase; } |
| 18 | #foot h5 { font-size: 23px; } |
| 20 | #foot ul li ul { list-style-type: square; margin-left: 10px; } |
| 22 | #foot ul.sidebar_list { padding: 1.8em 30px 0 0; } |
| 24 | #foot li.widget .widget_box { background: none; border: 0; } |
| 26 | #foot .textwidget p { line-height: 22px; margin-bottom: 11px; } |
| 28 | #foot .col { float: left; list-style: none; width: 33.3%; } |
| 32 | list-style-type: none; |
| 35 | padding: 10px 0 7px 20px; |
| 47 | border-top: 1px dashed #3D3C3C; |
| 50 | letter-spacing: 1.3px; |
| 57 | #<a title="copyright" href="/http://blogviet.info/about/copyright">copyright</a> ul.sidebar_list, #copyright .textwidget, #copyright li.widget .widget_box, #copyright li.widget { margin: 0; padding: 0; } |
Tiếp đó, bạn chèn đoạn code sau vào custom_functions.php: | 01 | function asnioFooter() { ?> |
| 04 | <h5>Blog Categories</h5> |
| 05 | <span class="cat">Information Covered on the Blog</span> |
| 07 | <?php wp_list_cats('sort_column=id&hide_empty=0&optioncount=0&hierarchical=0'); ?> |
| 10 | <div class="col Footer1"> |
| 11 | <ul class="sidebar_list"> |
| 12 | <?php if (!function_exists('dynamic_sidebar') || !dynamic_sidebar('Footer 1') ){ ?> |
| 14 | <div class="widget_box"> |
| 15 | <h3><?php _e('Footer Widget 1', 'thesis'); ?></h3> |
| 16 | <p>You can edit the content that appears here by visiting your Widgets panel and modifying the <em>current widgets</em> there.</p> |
| 23 | <div class="col Footer2"> |
| 24 | <ul class="sidebar_list"> |
| 25 | <?php if (!function_exists('dynamic_sidebar') || !dynamic_sidebar('Footer 2') ) { ?> |
| 27 | <div class="widget_box"> |
| 28 | <h3><?php _e('Footer Widget 2', 'thesis'); ?></h3> |
| 29 | <p>You can edit the content that appears here by visiting your Widgets panel and modifying the <em>current widgets</em> there.</p> |
| 36 | <div class="col Footer3"> |
| 37 | <ul class="sidebar_list"> |
| 38 | <?php if (!function_exists('dynamic_sidebar') || !dynamic_sidebar('Footer 3') ) { ?> |
| 40 | <div class="widget_box"> |
| 41 | <h3><?php _e('Footer Widget 3', 'thesis'); ?></h3> <p>You can edit the content that appears here by visiting your Widgets panel and modifying the <em>current widgets</em> there.</p> |
| 49 | <ul class="sidebar_list"> |
| 50 | <?php if (!function_exists('dynamic_sidebar') || !dynamic_sidebar('Footer Copyright') ) { ?> |
| 52 | <div class="widget_box"> |
| 53 | <h3><?php _e('Copyright', 'thesis'); ?></h3> |
| 54 | <p>You can edit the content that appears here by visiting your Widgets panel and modifying the <em>current widgets</em> there.</p> |
| 59 | <!-- Please do not remove these lines. If you have a developers license, you may remove the thesis copyright, but do not remove the Asnio copyright unless you have paid the $5 fee. Feel free to remove these comment lines however --> |
| 66 | add_action('thesis_hook_after_html', 'asnioFooter'); |
| 67 | remove_action('thesis_hook_footer', 'thesis_attribution'); |
| 68 | remove_action('thesis_hook_footer', 'thesis_admin_link'); |
| 70 | register_sidebar(array('name'=>'Footer 1', 'before_title'=>'<h3>', 'after_title'=>'</h3>')); |
| 71 | register_sidebar(array('name'=>'Footer 2', 'before_title'=>'<h3>', 'after_title'=>'</h3>')); |
| 72 | register_sidebar(array('name'=>'Footer 3', 'before_title'=>'<h3>', 'after_title'=>'</h3>')); |
| 73 | register_sidebar(array('name'=>'Footer Copyright', 'before_title'=>'<h3>', 'after_title'=>'</h3>')); |
Sau khi lưu lại, bạn truy cập vào trong Admin Panel của WordPress, chọn Appearance -> Widgets rồi kéo các phần mà bạn muốn vào Footer 1, Footer 2 hay Footer 3 theo ý muốn giống như bạn đã làm với sidebar. Lưu ý: Các bạn không nên bỏ backlink của tác giả trong code. Nếu muốn bỏ thì bạn phải trả $5 để làm việc đó. Xem tại đây để biết thêm nhé. Bonus: Nếu bạn muốn biết cách tạo Drop Cap cho cữ cái đầu tiên của bài viết hay tạo các thông báo nổi bật trong bài viết…thì các bạn nên tham khảo hướng dẫn tại DIYThemes. Rất đơn giản! Mình nghĩ như thế là đã đủ cho các bạn có một thesis hoàn toàn mới khác hẳn Thesis mặc định vốn rất xấu trai. Các phần còn lại trong thesis thì các bạn nên tự tìm hiểu trong Thesis Options nhé. Tuy Thesis có khả năng SEO vượt trội nhưng nếu nội dung không tốt thì SEO cũng bằng thừa. Đừng từ bỏ theme của mình chỉ vì Thesis có khả năng SEO tốt nhé! Nếu các bạn biết thủ thuật thesis nào hay và muốn chia sẻ hay bạn muốn làm một thủ thuật nào đó cho thesis của mình, hãy comment để cùng chia sẻ nhé. Nguồn Blogviet
|
