Code tạo nút like, share mạng xã hội chạy 2 bên website wordpress

Code tạo nút like, share mạng xã hội chạy 2 bên website wordpress là vấn đề được nhiều lập trình viên quan tâm, bởi những kiến thức trên trường lớp là không đủ, vì vậy bài Code tạo nút like, share mạng xã hội chạy 2 bên website wordpress sẽ chia sẻ tới bạn nhiều thông tin hữu ích

Mọi người vẫn hỏi tôi về việc học lập trình nói chung và Wordpress nói riêng có cần năng khiếu hay quá khó để tiếp cận hay không. Thì tôi có thể trả lời rằng, học lập trình cũng như việc bạn học tiếng Anh hay bất kỳ một ngôn ngữ khác, bởi lập trình...là ngôn ngữ của máy tính, để máy tính đọc và máy tính thực hiện theo yêu cầu của mình, bạn thích là học được.

Khi sử dụng plugin Digg Digg (giống blog hoidapcode.com đang sử dụng để làm các nút like) thì có nhiều yêu cầu là muốn cho nó hiển thị ra mọi trang, nhất là trang chủ, trong khi plugin này chỉ hỗ trợ hiển thị trong Post/Page mà thôi.

Nếu những ai muốn làm các nút này để nó hiển thị ra trang chủ hay mọi trang thì có thể tham khảo hướng dẫn này để tự làm các nút mạng xã hội trượt theo trình duyệt hoàn toàn thủ công, sử dụng một plugin của jQuery.

1. Tải file cần thiết

Đầu tiên bạn cần tải các file cần thiết của plugin jQuery này tại đây và giải nén ra, sau đó upload toàn bộ các file trong đó vào thư mục theme mà bạn đang dùng.

2. Sửa file script

Để hoạt động tốt nhất theo ý bạn, hãy mở file fshare-script.js lên, nội dung nó như sau:

$(document).ready(function () {
    $('#floating-bar').fshare({
        theme: 'default',
        facebook: true,
        twitter:  false,
        stumbleupon: false,
        linkedin: false,
        googleplus: true,
        upperLimitElementId: 'content',
        lowerLimitElementId: 'colophon'
    });
});   

Trong đó, bạn muốn hiển thị nút nào thì đổi false thành true và ngược lại để ẩn nó đi.

Tham số upperLimitElementId nghĩa là ID của vị trí mà bạn muốn cho nút này bắt đầu xuất hiện, hãy view source của website và tìm ID (<div id=”abcxyz”>).

Tham số lowerLimitElementId nghĩa là ID của vị trí mà bạn muốn không cho nó tiếp tục trượt nữa khi chạm đến, thường là phần Footer của website.

Cách tìm ID: Mở trình duyệt (Google Chrome/Firefox), ấn chuột phải vào vị trí mà bạn muốn xem ID, chọn Inspect Element rồi tìm đoạn nào chứa id=”abcxyz” chính là nó. Ở trong file mình đã điền sẵn ID của theme Twenty Fourteen.

3. Chèn các file script và CSS vào theme

Bây giờ hãy mở file functions.php lên và chèn toàn bộ đoạn code dưới đây vào đó:

/Making jQuery Google API
function modify_jquery() {
        if (!is_admin()) {
                // comment out the next two lines to load the local copy of jQuery
                wp_deregister_script('jquery');
                wp_register_script('jquery', 'http://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js', false, '1.8.1');
                wp_enqueue_script('jquery');
        }
}
add_action('init', 'modify_jquery');
 
// Float Social Share scripts
function float_social_share() {
    wp_enqueue_script('float-social', get_template_directory_uri(). '/fshare.js', array('jquery'), true);
    wp_enqueue_style('float-social-style', get_template_directory_uri(). '/fshare.css', array(), null);
    wp_enqueue_script('float-social-script', get_template_directory_uri(). '/fshare-script.js', array('jquery'), true);
}
add_action( 'wp_enqueue_scripts', 'float_social_share' ); 

Lưu lại. Tiếp tục mở file header.php và chèn đoạn này vào cuối file:

<div id="floating-bar"></div> 

Ok, lưu lại và ra trang chủ xem kết quả.

Nếu bạn muốn cái khung nút mạng xã hội có thẩm mỹ hơn thì chèn thêm đoạn sau vào file style.css.

.fshare-default {
     background: #F1F1F1;
     margin-top: 10px;
     border: 1px solid #e8e8e8;
} 

Code tạo nút like, share mạng xã hội chạy 2 bên website wordpress

Trường hợp bạn muốn cho cái khung trượt nó chạy nhanh hơn thì hãy mở file fshare-script.js ra và tìm:

  theme: 'default',     

Sau đó thêm đoạn này vào bên trên nó:

  speed: 200,     

Số càng nhỏ nó chạy càng nhanh nhé. ????

Chúc các bạn thành công!

Hy vọng với bài viết về Code tạo nút like, share mạng xã hội chạy 2 bên website wordpress đã giải đáp giúp bạn phần nào về kiến thức lập trình Wordpress. Như tôi đã nói, ngôn ngữ lập trình không quan trọng bằng tư duy giải thuật, tư duy logic để giải quyết vấn đề.

Với những năm trước đây, lập trình viên là một cái nghề khó và kén chọn người học, đồng nghĩa với việc thu nhập hàng tháng của các lập trình viên luôn cao. Còn những năm gần đây, thì lập trình là môn học phổ thông, và ai cũng nên học một ngôn ngữ lập trình nào đó.

Nếu bạn còn bất kỳ câu hỏi nào trong việc học lập trình online, hãy gửi yêu cầu cho tôi qua email hoidapcode.com@gmail.com hoặc để lại comment bên dưới, tôi sẽ giải đáp trong vòng 24 giờ!

Blog hoidapcode.com là blog được tổng hợp tự động các bài học, thông tin về lập trình trên mạng internet. Nếu bạn có ý kiến hoặc đóng góp về bài viết này, hãy liên hệ với tôi!