Một số thủ thuật tùy chỉnh child theme genesis

Thân gửi bạn đọc của Raynoblog . Mình là một tín đồ của Genesis. Hầu như website mình sử dụng Genesis nên việc tham khảo thủ thuật tiện ích của Genesis mình rất thích. Và Raynoblog là một nơi mình thường hay vào để đọc và chém gió khá nhiều.

Thời gian này mình có làm website về Cáp quang FPT sử dụng theme Genesis nên sưu tầm được một số tùy chỉnh nhỏ khi làm blog với Genesis. Hi vọng rằng với chút thủ thuật nhỏ này sẽ giúp blog bạn đẹp hơn. hữu dụng hơn

I) Thêm Box Author cuối mỗi bài viết

Khi bạn viết bài,việc thêm một hộp nhỏ để thông tin tác giả dưới mỗi bài viết là rất quan trọng. Điều này sẽ làm độc giả của blog bạn biết được ai viết,tên họ là gì. Tránh một số báo lá cải bây giờ thường lấy mỗi cái tên dưới mỗi bài viết rồi “nghĩ” ra thời sự 😀

Để làm được điều này,bạn cần kích hoạt chứ năng Author Box trong Genesis như sau :Dashboard -> Users -> Your Profile -> Genesis User Settings. Checkvào cái ô “Enable Author Box on this User’s Posts”.

Đến đây thì việ hiển thị thông tin tác giả coi như đã ok rồi. Nhưng vấn đề đặt ra là nếu một blog có nhiều tác giả thì chúng ta sẽ giải quyết vấn đề này thế nào. Cách đơn giản nhất đó là bạn thêm đoạn code sau vào file  functions.php. trong Childtheme bạn sử dụng

/** Add author box to end of posts **/
function abr_author_box () {
  $html = '<div>';
  $html .=  get_avatar(get_the_author_meta('user_email'), 75); 
  $html .= '<strong>About <a href="'.get_author_posts_url(get_the_author_meta( 'ID' )).'">'.get_the_author_meta('user_firstname').' '.get_the_author_meta('user_lastname').'</a></strong><br />';
  $html .= wpautop(get_the_author_meta('description'));
  $html .= '</div>';
  echo $html;
}
add_action ( 'genesis_before_comments', 'abr_author_box', 10, 1);

II) Thêm mạng xã hội vào phần tác giả

Hiện nay mạng xã hội là điều tất yếu với mọi người. nó nhắm đến một lượng khách hàng tiềm năng. và bỏ qua mạng xã hội dường như là điều không nên dù bạn có làm blog chơi chơi hay là blog về Marketing vậy chúng ta sẽ thêm mạng xã hội vào như thế nào bậy giờ đây

Để thêm mạng xã hội twitter ,facebook,Google plus vào thì bạn cần tạo một file author.php trong Childtheme và thêm đoạn code này vào

<?php
/**
 *
 * Author template.
 *
 */

add_action( 'genesis_before_loop', 'tw_custom_auth_info' );

function tw_custom_auth_info() {

    if (is_author()) {
        $curauth = (get_query_var('author_name')) ? get_user_by('slug', get_query_var('author_name')) : get_userdata(get_query_var('author'));?>
        <div><?php echo get_avatar( $curauth->ID, $size = '76');?>
        <h1><?php echo $curauth->display_name;?></h1>
        <p>
        <?php
         if($curauth->user_description<>''): echo $curauth->user_description;
         else: _e("This user hasn't shared any biographical information","nomadic");
         endif;
        ?>
        </p>
        <br />
        <?php
          if(($curauth->user_url<>'http://') && ($curauth->user_url<>'')) echo '<p>'.__('Homepage:','nomadic').' <a href="'.$curauth->user_url.'">'.$curauth->user_url.'</a></p>';
          if($curauth->yim<>'') echo '<p>'.__('Yahoo Messenger:','nomadic').' <a href="ymsgr:sendIM?'.$curauth->yim.'">'.$curauth->yim.'</a></p>';
          if($curauth->jabber<>'') echo '<p>'.__('Jabber/GTalk:','nomadic').' <a href="gtalk:chat?jid='.$curauth->jabber.'">'.$curauth->jabber.'</a></p>';
          if($curauth->aim<>'') echo '<p>'.__('AIM:','nomadic').' <a href="aim:goIM?screenname='.$curauth->aim.'">'.$curauth->aim.'</a></p>';
        ?>

        <ul><?php

        $google_profile = get_the_author_meta( 'google_profile', $curauth->ID );
        $facebook_id = get_the_author_meta( 'facebook_id', $curauth->ID );
        $twitter_id = get_the_author_meta( 'twitter_id', $curauth->ID );
        $linkedin_id = get_the_author_meta( 'linkedin_id', $curauth->ID );

        /* Create Google Profile and Other Links */

        if ( $google_profile || $facebook_id || $twitter_id || $linkedin_id) {
            ?><br /><p>Find me on:</p><?php
        }

        if ( $google_profile ) {
            ?><li><?php echo '<a href="' . $google_profile . '">Google Profile';?></li><?php
        }
        if ( $facebook_id ) {
            ?><li><?php echo '<a href=http://www.facebook.com/' . $facebook_id . '>Facebook';?></li><?php
        }
        if ( $twitter_id ) {
            ?><li><?php echo '<a href=http://twitter.com/intent/user?screen_name=' . $twitter_id . '>Twitter';?></li><?php
        }
        if ( $linkedin_id ) {
            ?><li><?php echo '<a href=http://www.linkedin.com/in/' . $linkedin_id . '>LinkedIn';?></li><?php
        }
        ?></ul></div><h2 style="margin: 0 0 40px; overflow: hidden; padding: 10px 0;"><?php printf(__('Posts by %s', 'nomadic'), $curauth->display_name); ?></h2><?php
    }
}

genesis(); // <- everything important: make sure to include this.
?>

Sau khi thêm được đoạn code đó vào ,bước tiếp theo ta sẽ thêm đoạn code thứ 2 vào file functions.php với nội dung

/** Add Custom Contact Profile Fields **/
function add_custom_contact_profilefields( $contactmethods ) {
$contactmethods['google_profile'] = 'Google Profile URL';
$contactmethods['facebook_id'] = 'Facebook ID';
$contactmethods['twitter_id'] = 'Twitter UserName';
$contactmethods['linkedin_id'] = 'LinkedIn UserName';
return $contactmethods;
}
add_filter('user_contactmethods','add_custom_contact_profilefields',10,1);

Vậy là ok rồi đó. Có gì phải lắn tăn

III) Thêm nội quy comment

Với đặc thù của mỗi trang wordpress thì có một nội quy riêng. Nhưng bạn nên nhắc nhở độc giả bình luận như thế nào. nếu có lỡ mồm mà chửi nhau thì còn có cái mà răn đe.

Người ta gọi là Polyci box còn em thì hay đọc cảnh sát(police) là mấy … pô lít .Để thêm phần này,bạn hãy mở file function.php và thêm đoạn code này vào

/** Add a comment policy box */
add_action( 'genesis_before_comment_form', 'single_post_comment_policy' );
function single_post_comment_policy() {
    if ( is_single() && !is_user_logged_in() && comments_open() ) {
    ?>
    <div>
        <p><small><h4>Comment Policy:</h4> Your words are your own, so be nice and helpful if you can. Please, only use your <strong>real name</strong>, not your business name or keywords. Using business name or keywords instead of your real name will lead to the comment being deleted. Anonymous commenting is not allowed either. Limit the amount of links submitted in your comment. We accept clean XHTML in comments, but don't overdo it please.</small></p>
    </div>
    <?php
    }
}

Bảng nội quy khi bình luận

Bảng nội quy khi bình luận

IV ) Thêm bài trước/bài sau vào dưới phần Coment

Khi độc giả bình luận về một bài viết nào đó,có thêm gợi ý cho phần tiếp theo cũng là một điều tuyệt vời,tăng tỉ lệ chuyển trang trong website của bạn. Nói chung càng giữ độc giả lâu trên blog mình càng tốt. vậy việc thêm một vài gợi ý nho nhỏ sẽ giúp được độc giả để ý hơn

Thêm bài viết trước-sau dưới khung bình luận

Thêm bài viết trước-sau dưới khung bình luận

Để làm được điều này,bạn chỉ cần thêm vào file fucntions.php

/** Previous and Next Links **/
add_action('genesis_after_comment_form', 'custom_post_nav');
function custom_post_nav(){?>
    <div style="font-size:13px; padding:2px;">
           <?php previous_post_link('<b>Previous Post: %link') ?><br />
           <?php next_post_link('<b>Next Post: %link') ?>
     </div>
<?php }

V ) thêm hoặc xóa một Menu

Theo mặc định child theme mình sử dụng cũng đã có 2 menu. Nhưng cơ bản là nó liền nhau rất là cá sấu. Nên tùy chỉnh đưa lên trên header sẽ đẹp hơn

Việc có Menu sẽ định hướng được khi độc giả vào Blog bạn dễ hơn. Đặc biệt là những blog có nhiều chủ đề. nhiều khi đang xem hướng dẫn làm web mà tự nhiên thấy có moenu JAV thì thể nào mà các bác chả click để giải trí tí. Nên có nhiều menu đôii khi cũng là cái lợi đó

Ví dụ minh họa cho monu ở phía trên Header

Ví dụ minh họa cho monu ở phía trên Header

bạn mở file functions.php ở child thêm thêm 1 trong 3 code nhé.

Nếu muốn menu phụ ở dưới phần header thì dùng code này

/** Moving Your Primary Navigation after Header **/
add_action('genesis_after_header', 'genesis_do_nav');
remove_action('genesis_before_header', 'genesis_do_nav');

Nếu muốn menu phụ ở trước phần header thì dùng code này

/** Moving Your Primary Navigation before Header **/
remove_action( 'genesis_after_header', 'genesis_do_nav' );
add_action( 'genesis_before_header', 'genesis_do_nav' );

VI ) Đổi chữ Readmore

Đôi khi chữ readmore (khi bạn ngắt bài) nó trở nên nhàm chán quá. bạn có thể đổi thành một chữ khác. Nếu cách thủ công và thô sơ nhất mình hay làm thì mình vào edit ngay trong bài viết.

sau khi bạn thay vào nó sẽ như thế này

Đổi chữ ReadMore

Đổi chữ ReadMore

Nhưng với cách đó thì bạn sẽ mất nhiều thời gian hơn. Vậy có cách nào làm hàng loạt luôn và ngay không. Câu trả lời bạn hãy thêm code vào file functions.php

/** Read More changed to Continue Reading... **/
add_filter( 'excerpt_more', 'child_read_more_link' );
add_filter( 'get_the_content_more_link', 'child_read_more_link' );
add_filter( 'the_content_more_link', 'child_read_more_link' );
function child_read_more_link() {
 return '… <a href="' . get_permalink() . '" rel="nofollow">Continue Reading …</a>';}

Và thêm cái này vào cuối file style.css

/** Customization for Read More Link... **/
.more-link {
  font-size: 12px;
  font-weight: bold;
  float: right;
  margin: 4px 0;
  padding: 1px 6px;
  text-transform: none;
  border-radius:4px;
  background-color:#DDDDDD;
  border:0;font-family:Arial, sans-serif;
  -webkit-border-radius:4px;
  -moz-border-radius:4px;
  -moz-box-shadow:0 1px 1px #AAAAAA;
  -webkit-box-shadow:0 1px 1px #AAAAAA;
}

.entry-content a {
   text-decoration: none;
}

.entry-content a:hover {
   text-decoration: underline;
}

ok/ vậy là nó đã thành Continue Reading rồi nhé. đương nhiên bạn có thể đổi Continue Reading thành bất kỳ chữ gì cũng được. kể cả là “xxx tiếp”

VII) thêm tùy chọn background

Hầu như childtheme mình gặp thì nó cho đổi hình nền. Nhưng đôi khi đời không như mơ có sự bất ngờ nên việc tùy chỉnh này không có. vậy để tùy chỉnh background thì bạn hãy làm theo cách này ,Mở file fucntions.php lên và thêm vào đoạn code sau

/** Add support for Custom Background **/
add_custom_background();

IIIV) Xóa Title và Description

Để xóa Title and Description bạn thêm code này vào file fucntion.php

/** Remove Title and Description **/
remove_action( 'genesis_site_title', 'genesis_seo_site_title' );
remove_action( 'genesis_site_description', 'genesis_seo_site_description' );

để thay đổi Title and Description bạn thêm code này vào file fucntions.php

/** Remove default site title and add custom site title **/
remove_action( 'genesis_site_title', 'genesis_seo_site_title' );
function custom_site_title() { 
     echo '<h1 id="title">Tips and Tricks</h1>';
}
add_action( 'genesis_site_title', 'custom_site_title' );

IX) Xóa tiêu đề bài viết

Nói thực mình cũng chả biết cái này để làm gì,vì theo mình biết thì tiêu đề bài viết là vô cùng quan trọng. không những với người đọc mà còn cả với Google. Họ lấy tiêu chuẩn tiêu đề để hiểu điều bnj muốn viết. vậy xóa đi thì hỉ hại chứ không có lợi./ Tuy nhiên ai có nhu cầu thì cứ sử dụng. Mỗi cây mỗi hoa mỗi nhà mỗi cảnh nhỉ

/** Remove post titles **/
remove_action( 'genesis_post_title','genesis_do_post_title' );

X) Sửa Footer của genesis

mặc đinh genesis không cho sửa Footer. Điều đó chắc hẳn cũng là nỗi ức chế với nhiều người. mình thì không hihi. Để xóa Footer mực định bạn thêm đoạn code này và file Fucntions.php

/** Customize the entire footer */
remove_action( 'genesis_footer', 'genesis_do_footer' );
add_action( 'genesis_footer', 'child_do_footer' );
function child_do_footer() {
    ?>
    <p><!-- Your Custom Text OR Code --></p>
    <?php
}

Hi vọng răng với chút thủ thuật mình nhặt nhạnh được sẽ giúp ích cho một số bạn có thể hoàn thiện blog của mình hơn. Mọi ý kiến thắc mắc bạn vui lòng coment ở dưới nhé.

Một số thủ thuật tùy chỉnh child theme genesis
5 (100%) 2 votes

Tìm trên Google
  • khong cho tuy chinh child theme

Chú ý - WordPress Hosting 1$/tháng - miễn phí tên miền

Bạn có biết GoDaddy đang có khuyến mãi WordPress hosting chỉ còn 1$/tháng kèm theo một tên miền .COM .NET .ORG miễn phí. Hãy đăng ký ngay để tiết kiệm chi phí nhất nhé.
Xem ngay

ĐĂNG KÝ NHẬN TIN QUA EMAIL

Nếu thấy bài viết trên blog có ích cho bạn, hãy đăng ký nhận tin qua email để cập nhật bài viết mới nhanh nhất và thỉnh thoảng nhận quà bất ngờ!

About Lap mang fpt

Tôi là Phạm Đức Ngọc. Một thành viên yêu thích RaynoBlog, Đã được Rayno Blog giúp đỡ rất nhiều trong quá trình tìm hiểu về Genesis.
Hiện tại Tôi đang làm nhân viên kinh doanh của FPT telecom
Nếu bạn muốn lắp mạng Internet FPT và truyền Hình FPT vui lòng gọi cho tôi : 0943.286.326 hoặc website : ADSLVietNam.com

Comments

  1. Bạn ơi cho mình hỏi là mình đang dùng Genesis nhưng khi click vào Category như này: http://taxinoibai.info/tin-tuc/ thì ở các bài viết có [Read more…] & LEAVE A COMMENT mình muốn bỏ thì phải làm như thế nào? Thanks!

    • Để xóa read more bạn thử đoạn code này xem:

      function be_more_link($more_link) {
          return sprintf('<p><a href="%s" class="more-link" rel="nofollow">%s</a></span></p>', 
                  get_permalink(), '');
      }
      add_filter( 'excerpt_more', 'be_more_link' );
      add_filter( 'get_the_content_more_link', 'be_more_link' );
      add_filter( 'the_content_more_link', 'be_more_link' );

      Để xóa leave a comment bạn tìm trong file functions.php biến $post_info rồi xóa cái shortcode [ post_comments ] trong biến này đi.

  2. Nếu mình muốn tất cả External links kể cả link của nút MXH có sẵn trong theme đều Nofollow thì phải làm thế nào hả bác.

    • Bạn sử dụng Plugin này nhá. WP External Links. Mình không biết nó có nofollow liên kết ngoài không. Nhưng thấy nó bảo là nofollow hết. Cứ thử đi bạn nhé

  3. Chà chà, nhiều thủ thuật với Genesis quá.
    Chắc chủ nhà thuộc dạng cao thủ của Genesis roài đây. Cảm ơn bạn nhiều. Chúc Blog luôn phát triển!

  4. Để mình thử chỉnh web của mình xem sao! Cảm ơn bạn đã chia sẽ

  5. Rất hay, phải áp dụng liền. Thank’s

  6. cmình chưa hiểu cái Sửa Footer của genesis cho lắm hichic

  7. cái hình ảnh của phần quy điịnh comment thật tuyệt 😉 {c20}

  8. Mình sử dụng Genesis Child Theme. Mình đang muốn đưa sản phẩm ra trang chủ như trang http://www.chevrolethcm.com mà chưa tìm ra cách. Xin hỏi bạn có cách nào để làm?

  9. Sao mình sử dụng :
    /** Customize the entire footer */
    remove_action( ‘genesis_footer’, ‘genesis_do_footer’ );
    add_action( ‘genesis_footer’, ‘child_do_footer’ );
    function child_do_footer() {
    ?>

    <?php
    }
    mà nó vẫn không xoá dòng footer mặc định :Copyright © 2015 · Agency Pro Theme on Genesis Framework · WordPress · Log out

    • Nếu bạn sử dụng genesis, mình khuyên bạn nên cài genesis simple hook và insert code trực tiếp vào , KHông phải lo lỗi hay không hoạt động bạn nhé
      Thân

  10. bạn cho mình hỏi, cách thay đổi bố cục của cho genesis framework như thế nào, mình thay đổi không được, nó không như hình mình muốn. ví dụ: . Bạn có thể chỉ có mình được không, cảm ơn bạn nhiều.

  11. đây là link hình mình cần chỉnh sửa theo bố cục post nó như này: http://i.imgur.com/dNy1glo.png

  12. Nhờ code này mình đã sửa được mấy thứ mình cần rồi. Anh rayno nếu đọc được comment này xin hãy vào nhận xét giúp em trang này với: http://ezboy.net .,Xin cảm ơn

  13. Bạn ơi cho mình hỏi với . Mình cài Genesis mà ở trang chủ các bài post được hiển thị có dấu […] . Bạn chỉ mình cách xoá ở đâu với.

    • Bạn thử dùng code này xem sao:

      function be_more_link($more_link) {
          return sprintf('<p><a href="%s" class="more-link" rel="nofollow">%s</a></span></p>', 
                  get_permalink(), '');
      }
      add_filter( 'excerpt_more', 'be_more_link' );
      add_filter( 'get_the_content_more_link', 'be_more_link' );
      add_filter( 'the_content_more_link', 'be_more_link' );
  14. mình dùng magazine, lúc đầu ko sao, vì sau chỉnh sửa tung tóe cái gì mất luôn next page hoặc số trang 1,2,3…
    làm sao để nó hiện ra vậy bạn? mình để ở trang chủ 10 bài nó hiện đúng 10 bài,ko có next trang. với lại bị mất luôn tên bài viết nữa @@

Gửi bình luận

Lưu ý: Không sử dụng keyword để thay cho tên của bạn, hãy sử dụng tên thật. Cảm ơn bạn đã tham gia bình luận trên blog!