Статьи

Добавьте ленивые кнопки загрузки в социальные сети в свой блог WordPress

Январь 6, 2019

Одна из наиболее распространенных и важных частей каждого блога — это набор кнопок социальных сетей, таких как кнопка «Нравится» в Facebook, кнопка «Твиттер» в Twitter, кнопка «+1» от Google и т. Д. Каждая социальная платформа добавляет файл JavaScript со своими кнопками, это означает, что когда страница блога загружает, это должно ждать 300 КБ социальных медиа. Это приводит к зависанию визуализации страницы, что приводит к увеличению времени загрузки страницы. Чтобы решить эту проблему, некоторые из действительно больших блогов разработали определенные методы, с помощью которых кнопки социальных сетей могут загружаться асинхронно. В этом уроке вы узнаете, как добавить кнопки «отложенной загрузки» социальных сетей в ваш блог WordPress.

Вступление:

Эти значки будут использовать библиотеку JavaScript, . Журнал .Net опубликовал Большой вопрос: должны ли мы отбросить кнопки социальных сетей? с мнениями и анекдотами от разных профессионалов. Это вдохновило его ответить на них красивым фрагментом кода.

Социальные виджеты огромны . Они представляют собой дополнительные веб-сайты, помещенные в крошечные рамки, и большинство из них плохо оптимизированы. Кнопка «Мне нравится» на Facebook ужасна. Эта проблема не может быть преуменьшена, и я разработал Socialite.js именно по этой причине. Socialite откладывает загрузку и работает очень хорошо. Это не уменьшает количество отправляемых байтов, но позволяет сначала загрузить ваш сайт, прежде чем поток будет насыщен социальными дополнениями.
— Дэвид

Несколько слов о светской жизни

Socialite предоставляет очень простой способ реализовать и активировать множество кнопок обмена в социальных сетях — в любое время. При загрузке документа, при наведении на статью, на любое событие!

Если вы продаете свою душу, вы можете делать это асинхронно.
— Дэвид

Характеристики и преимущества

  • Нет зависимостей для использования.
  • Загружает внешние ресурсы только при необходимости.
  • Менее 5 КБ при минимизации и сжатии.
  • Более доступные и стилизованные настройки по умолчанию.
  • Поддержка Twitter, Google+, Facebook, LinkedIn, Pinterest и Spotify.
  • Расширяется с другими социальными сетями.
  • Имитирует нативную реализацию при активации.
  • Поддерживается во всех браузерах (с предоставлением кнопок).

Шаг 1 Загрузка JavaScript

Давай покатимся. Первый шаг — загрузить файл socialite.min.js , который я рекомендую загрузить в нижний колонтитул. Загрузите пакет с socialitejs.com , откройте его и загрузите файл socialite.min.js в папку wp-content / themes / your-theme-folder / js / (если папка js не существует, сначала создайте ее) ).

Шаг 2 Добавление сценария в нижний колонтитул

Добавить Socialite

После загрузки файла JS в папку вашей темы добавьте следующий код в файл functions.php вашей темы.

1
2
3
4
5
6
7
8
9
function wptuts_load_socialite() {
 
    // Register Socialite
    wp_register_script( ‘socialite’, get_template_directory_uri() . ‘/js/socialite.min.js’, array(), », true );
 
    // Now enqueue Socialite
    wp_enqueue_script( ‘socialite’ );
}
add_action( ‘wp_enqueue_scripts’, ‘wptuts_load_socialite’ );

Инициализировать светский

Теперь создайте новый файл JS в папке wp-content / themes / your-theme-folder / js / с именем wptuts-social.js и поместите в него следующий код.

1
2
3
4
5
jQuery(document).ready(function($) {
    $(‘.social-buttons’).one(‘mouseenter’, function() {
        Socialite.load($(this)[0]);
    });
});

Теперь у нас есть второй файл JS, нам нужно изменить код PHP, который мы добавили в наш файл functions.php , поэтому теперь он должен выглядеть следующим образом.

01
02
03
04
05
06
07
08
09
10
11
function wptuts_load_socialite() {
 
    // Register Socialite
    wp_register_script( ‘socialite’, get_template_directory_uri() . ‘/js/socialite.min.js’, array(), », true );
    // Register social initialiser script
    wp_register_script( ‘wptuts-social’, get_template_directory_uri() . ‘/js/wptuts-social.js’, array(‘jquery’, ‘socialite’), », true );
 
    // Now enqueue Socialite
    wp_enqueue_script( ‘wptuts-social’ );
}
add_action( ‘wp_enqueue_scripts’, ‘wptuts_load_socialite’ );

Что это за код?

На первом шаге вы загрузили socialite.min.js в папку вашей темы, после чего на втором шаге вы включили этот скрипт в нижний колонтитул вашей темы. Затем вы добавили небольшой код для запуска социальной кнопки на свойстве mouseenter для определенного класса, то есть класс наших социальных кнопок — это social-buttons , когда мышь входит в этот класс, или вы можете сказать, когда кто-то наводит указатель мыши на social-buttons class, кнопки социального обмена будут загружаться прямо в этот момент.

В приведенном выше коде эта строка отвечает за активацию социальных кнопок, вы можете изменить ее класс (т.е. social-buttons ) на любой другой, какой захотите.

1
$(‘.social-buttons’).one(‘mouseenter’, function() {

Шаг 3 Добавление CSS

Мы обсудим, где добавить HTML позже, давайте сначала добавим CSS. Итак, мы собираемся добавить CSS, который скроет текст кнопки и покажет изображение вместо них, когда они не загружены. Вы можете изменять CSS в соответствии с вашей темой, чтобы он выделялся среди других. Дэвид закодировал следующий CSS.

Создайте новый файл CSS с именем wptuts-social.css в папке wp-content / themes / your-theme-folder / css / (если папка css не существует, сначала создайте ее).

Затем добавьте следующий код в файл.

01
02
03
04
05
06
07
08
09
10
11
12
13
14
15
/*
 * Socialite Look-a-like defaults
 */
 
.social-buttons { display: block;
.social-buttons > li { display: block;
.social-buttons .socialite { display: block;
.social-buttons .socialite-loaded { background: none !important;
 
.social-buttons .twitter-share { width: 55px;
.social-buttons .googleplus-one { width: 50px;
.social-buttons .facebook-like { width: 50px;
.social-buttons .linkedin-share { width: 60px;
 
.vhidden { border: 0;

Теперь давайте вернемся и изменим код PHP, который мы снова поместили в наш файл functions.php, чтобы загрузить новый файл CSS следующим образом.

01
02
03
04
05
06
07
08
09
10
11
12
13
14
15
16
17
function wptuts_load_socialite() {
 
    // Register Socialite
    wp_register_script( ‘socialite’, get_template_directory_uri() . ‘/js/socialite.min.js’, array(), », true );
    // Register social initialiser script
    wp_register_script( ‘wptuts-social’, get_template_directory_uri() . ‘/js/wptuts-social.js’, array(‘jquery’, ‘socialite’), », true );
 
    // Now enqueue Socialite
    wp_enqueue_script( ‘wptuts-social’ );
 
    // Register social CSS
    wp_register_style( ‘wptuts-social’, get_template_directory_uri() . ‘/css/wptuts-social.css’);
 
    // Now enqueue social
    wp_enqueue_style( ‘wptuts-social’ );
}
add_action( ‘wp_enqueue_scripts’, ‘wptuts_load_socialite’ );

Укажите на размышление

Убедитесь, что вы изменили путь изображения спрайта на свой собственный сервер. Вы можете скачать изображение ниже и загрузить его в свой блог, а затем поменять его месторасположение в строке № 7 в приведенном выше коде CSS.

Шаг 4 HTML-разметка

Давайте посмотрим код HTML для этих кнопок

1
2
3
4
5
6
<ul class=»social-buttons cf»>
    <li><a class=»socialite twitter-share» href=»http://twitter.com/share» rel=»nofollow» target=»_blank» data-text=»<?php the_title() ?>» data-url=»<?php the_permalink() ?>» data-count=»vertical» data-via=»twitter-username-here»><span class=»vhidden»>Share on Twitter
    <li><a class=»socialite googleplus-one» href=»https://plus.google.com/share?url=http://socialitejs.com» rel=»nofollow» target=»_blank» data-size=»tall» data-href=»<?php the_permalink() ?>»><span class=»vhidden»>Share on Google+
    <li><a class=»socialite facebook-like» href=»https://www.facebook.com/sharer.php?u=https://www.socialitejs.com&t=Socialite.js» rel=»nofollow» target=»_blank» data-href=»<?php the_permalink() ?>» data-send=»false» data-layout=»box_count» data-width=»60″ data-show-faces=»false»><span class=»vhidden»>Share on Facebook
    <li><a class=»socialite linkedin-share» href=»http://www.linkedin.com/shareArticle?mini=true&url=<?php the_permalink() ?>&title=<?php the_title() ?>» rel=»nofollow» target=»_blank» data-url=»<?php the_permalink() ?>» data-counter=»top»><span class=»vhidden»>Share on LinkedIn
</ul>

Что делать здесь:

  • Измените twitter-username-here со своим собственным именем пользователя в коде выше.

Где добавить этот код?

Этот код может быть добавлен во многие места множеством способов. Позвольте привести несколько примеров.

Вы можете добавить этот код:

  1. Ниже мета поста в вашем single.php
  2. Ниже содержание в вашем single.php
  3. В вашем index.php внутри цикла и т. Д.

Шаг 5 Добавление HTML в WordPress

Ручной метод

Перейдите в папку wp-content / themes / your-theme-folder / и откройте файл single.php . Затем найдите the_content , и вы найдете такой код <?php the_content() ?> . Добавьте код HTML, показанный ниже под ним или над ним.

Добавление перед публикацией

Перейдите в папку wp-content / themes / your-theme-folder / folder и откройте файл functions.php . Добавьте следующий код в конце:

01
02
03
04
05
06
07
08
09
10
11
12
13
function social_before_the_content( $content ) {
    $custom_content = ‘
<ul class=»social-buttons cf»>
    <li><a class=»socialite twitter-share» href=»http://twitter.com/share» rel=»nofollow» target=»_blank» data-text=»<?php the_title() ?>» data-url=»<?php the_permalink() ?>» data-count=»vertical» data-via=»twitter-username-here»><span class=»vhidden»>Share on Twitter
    <li><a class=»socialite googleplus-one» href=»https://plus.google.com/share?url=http://socialitejs.com» rel=»nofollow» target=»_blank» data-size=»tall» data-href=»<?php the_permalink() ?>»><span class=»vhidden»>Share on Google+
    <li><a class=»socialite facebook-like» href=»https://www.facebook.com/sharer.php?u=https://www.socialitejs.com&t=Socialite.js» rel=»nofollow» target=»_blank» data-href=»<?php the_permalink() ?>» data-send=»false» data-layout=»box_count» data-width=»60″ data-show-faces=»false»><span class=»vhidden»>Share on Facebook
    <li><a class=»socialite linkedin-share» href=»http://www.linkedin.com/shareArticle?mini=true&url=<?php the_permalink() ?>&title=<?php the_title() ?>» rel=»nofollow» target=»_blank» data-url=»<?php the_permalink() ?>» data-counter=»top»><span class=»vhidden»>Share on LinkedIn
</ul>
‘;
    $custom_content .= $content;
    return $custom_content;
}
add_filter( ‘the_content’, ‘social_before_the_content’ );

Добавление после поста

Снова перейдите в папку wp-content / themes / your-theme-folder / и откройте файл functions.php . Добавьте следующий код в конце:

01
02
03
04
05
06
07
08
09
10
11
12
13
14
function social_after_the_content( $content ) {
    $custom_content .= $content;
    $custom_content .= ‘
<ul class=»social-buttons cf»>
    <li><a class=»socialite twitter-share» href=»http://twitter.com/share» rel=»nofollow» target=»_blank» data-text=»<?php the_title() ?>» data-url=»<?php the_permalink() ?>» data-count=»vertical» data-via=»twitter-username-here»><span class=»vhidden»>Share on Twitter
    <li><a class=»socialite googleplus-one» href=»https://plus.google.com/share?url=http://socialitejs.com» rel=»nofollow» target=»_blank» data-size=»tall» data-href=»<?php the_permalink() ?>»><span class=»vhidden»>Share on Google+
    <li><a class=»socialite facebook-like» href=»https://www.facebook.com/sharer.php?u=https://www.socialitejs.com&t=Socialite.js» rel=»nofollow» target=»_blank» data-href=»<?php the_permalink() ?>» data-send=»false» data-layout=»box_count» data-width=»60″ data-show-faces=»false»><span class=»vhidden»>Share on Facebook
    <li><a class=»socialite linkedin-share» href=»http://www.linkedin.com/shareArticle?mini=true&url=<?php the_permalink() ?>&title=<?php the_title() ?>» rel=»nofollow» target=»_blank» data-url=»<?php the_permalink() ?>» data-counter=»top»><span class=»vhidden»>Share on LinkedIn
</ul>
‘;
 
    return $custom_content;
}
add_filter( ‘the_content’, ‘social_after_the_content’ );

Скриншоты

Давайте посмотрим на эти ленивые кнопки загрузки социальных сетей:

Перед наведением

Так выглядят иконки социальных сетей при первой загрузке страницы.

перед зависанием

После наведения

Когда вы наводите на них курсор, кнопки загружают свои файлы так, как показано ниже

после зависания

Заключительные слова

Совет: проявите творческий подход, не просто скопируйте / вставьте приведенный выше код и разместите его в своем блоге, постарайтесь придать ему новый вид. Пусть творческие соки текут!

Несколько примеров

Как я могу их использовать?

Вы можете увидеть изображение ниже из моего блога, как я их использую. (Вдохновлено Mashable) ( Live View )

Freakify.com | Learn How to Blog Like a Pro
36
Share: