Hướng dẫn chèn tab comment google và facebook vào wordpress

Thảo luận trong 'HTML & CSS' bắt đầu bởi manumstore, 29/12/16.

  1. manumstore

    manumstore Administrator Thành viên BQT

    Bước 1: Chèn đoạn js của Facebook và Google+ và file footer.php đằng trước thẻ </body>
    Mã:
    <div id="fb-root"></div>
    <script>(function(d, s, id) {
    var js, fjs = d.getElementsByTagName(s)[0];
    if (d.getElementById(id)) return;
    js = d.createElement(s); js.id = id;
    js.src = "//connect.facebook.net/vi_VN/all.js#xfbml=1";
    fjs.parentNode.insertBefore(js, fjs);
    }(document, 'script', 'facebook-jssdk'));</script>
    <script type="text/javascript">
    window.___gcfg = {lang: 'vi'};(function() {
    var po = document.createElement('script'); po.type = 'text/javascript'; po.async = true;
    po.src = 'https://apis.google.com/js/platform.js';
    var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(po, s);
    })();
    </script>


    Bước hai tìm đến file single.php và tìm dòng
    PHP:
    <?php comments_template(); ?> 


    Và thay thế nó bằng code

    HTML:
    <div class="tabs <?php comments_template(); ?> comment">
    <input id="tab-1" type="radio" name="radio-set" class="tab-selector-1" checked="checked" />
    <label for="tab-1" class="tab-label-1"><i class="fa fa-facebook-square"></i>Facebook</label>
    <input id="tab-2" type="radio" name="radio-set" class="tab-selector-2" />
    <label for="tab-2" class="tab-label-2"><i class="fa fa-google-plus-square"></i>Google +</label>
    <div class="clear-shadow"></div>
    <div class="content-tab">
    <div class="tab-1">
    <div class="fb-comments" data-href="<?php the_permalink(); ?>" data-width="650" data-numposts="15" data-colorscheme="light"></div>
    </div>
    <div class="tab-2">
    <script src="https://apis.google.com/js/plusone.js"></script>
    <div class="g-comments"data-href="<?php the_permalink(); ?>"data-width="650" data-first_party_property="BLOGGER" data-view_type="FILTERED_POSTMOD"></div>
    </div>
    </div>
    </div>
    bước ở trên là hướng dẫn bạn thay thế comment mặc định của wordpress bằng cmt facebook và google còn trường hợp bạn muốn giữ lại cmt wordpress thì giữ lại đoạn
    PHP:
    <?php comments_template(); ?>


    nó chính là cmt wordpress

    Bước 3: bạn mở file style.css và đoạn mã sau ở phía cuối

    Mã:
    /* Tabs comment */[/B][/SIZE][/B]
    [B][SIZE=5][B].tabs{
    max-width:650px;
    margin:0 auto;
    position:relative;
    clear: both;
    padding-top:20px;
    }
    .tabs h3 {font-size:15px;background: #C0392B;color: #fff;padding: 0 20px;margin: 0 -24px;}
    .tabs input{
    position:absolute;
    top:0;
    left:0;
    display:none;
    }
    .tabs label{
    display:block;
    float:left;
    position:relative;
    padding:10px 20px;
    line-height:1.5em;
    min-width:55px;
    text-align:center;
    color: #222;
    font-size:13px;
    font-weight:bold;
    letter-spacing:1px;
    cursor:pointer;
    }
    .tabs label:after{
    content:"";
    display:block;
    position:absolute;
    width:100%;
    height:5px;
    background:#fff;
    left:0;
    bottom:-5px;
    }
    .clear-shadow{
    clear:both;
    }
    .content-tab{
    position:relative;
    width:100%;
    border-top: 1px solid #DDD;
    padding-top: 10px;
    margin-top:-1px;
    }
    .content-tab>div{
    overflow:hidden;
    top:0;
    left:0px;
    opacity:0;
    display:none;
    transition:eek:pacity .4s;
    -moz-transition:eek:pacity .4s;
    -webkit-transition:eek:pacity .4s;
    -ms-transition:eek:pacity .4s;
    -o-transition:eek:pacity .4s;
    }
    /***** Xu Ly An Hien*****/
    .tabs input:checked + label{background: url(https://fbstatic-a.akamaihd.net/rsrc.php/v2/yf/r/PfBgtiydy5U.gif) no-repeat bottom center;z-index:1}
    .tabs input.tab-selector-1:checked ~ .content-tab .tab-1,
    .tabs input.tab-selector-2:checked ~ .content-tab .tab-2{
    opacity:1;display:block;
    }


    bạn lưu và kiểm tra thành quả của mình trường hợp sảy ra lỗi bạn hãy vào đây để tôi hướng dẫn thêm
     

Chia sẻ trang này