Làm nút mạng xã hội trôi dọc ngoài trang chủ [NEW]

Khi sử dụng plugin Digg Digg (giống như blog Thachpham.com đang sử dụng để tạo nút like), có rất nhiều yêu cầu muốn nó hiển thị trên mọi trang, đặc biệt là trang chủ, trong khi plugin này chỉ hỗ trợ hiển thị. chỉ trong Bài đăng / Trang.

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

1. Tải xuống các tệp cần thiết

Đầu tiên bạn cần tải các tệp cần thiết của plugin jQuery này tại đây và giải nén, sau đó tải tất cả các tệp trong đó lên thư mục theme mà bạn đang sử dụng.

2. Chỉnh sửa tệp script

Để có hiệu suất tốt nhất, hãy mở tệp fshare-script.js lên, nội dung của 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, hãy thay đổi sai Pháo đài thật và ngược lại để ẩn nó.

Thông số upperLimitElementId có nghĩa là ID của vị trí mà bạn muốn nút này bắt đầu xuất hiện, hãy xem nguồn của trang web và tìm ID (

).

Thông số lowLimitElementId nghĩa là ID của vị trí mà bạn muốn dừng trượt khi chạm vào, thường là phần Chân trang của trang web.

Cách tìm ID: Mở trình duyệt (Google Chrome / Firefox), nhấp chuột phải vào vị trí bạn muốn xem ID, chọn Kiểm tra phần tử rồi tìm đoạn chứa id = “abcxyz” chính là nó. Trong hồ sơ, tôi đã điền ID của chủ đề Twenty Fourteen.

3. Chèn tập lệnh và tệp CSS vào chủ đề

Bây giờ, hãy mở tệp functions.php và chèn toàn bộ mã bên dưới 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’ );

Tiết kiệm. Tiếp tục mở tệp header.php và chèn đoạn này vào cuối tệp:

[html]

[/html]

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

Nếu bạn muốn khung nút mạng xã hội thẩm mỹ hơn, hãy thêm phần sau vào tệp phong cách.css.


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

Làm nút mạng xã hội trôi dọc ngoài trang chủ [NEW]

Trong trường hợp bạn muốn thanh trượt chạy nhanh hơn, hãy mở tệp fshare-script.js tìm ra và tìm thấy:

theme: ‘default’,

Sau đó, thêm đoạn này lên trên nó:

speed: 200,

Số càng nhỏ, nó chạy càng nhanh. : D

Chúc may mắn!

Đánh giá nội dung này