Статические кнопки «Поделиться» для более быстрого веб-сайта

В настоящее время веб-сайт не может быть достаточно быстрым. В частности, поскольку скорость загрузки теперь является фактором ранжирования для Google, оптимизация производительности является главной задачей. Есть ряд проблем с производительностью. Одним из самых больших является часто популярная кнопка «Поделиться» в крупных социальных сетях. Обычно они загружают значительный объем JavaScript со своих домашних серверов, что приводит к ненужному раздуванию веб-сайта. Чаще, чем хотелось бы, кнопки «зависают», потому что требуемый код не может быть загружен с сервера так быстро, как это необходимо. Это может значительно задержать загрузку всей страницы. Однако есть альтернативы. В этой статье мы покажем вам, как интегрировать WordPress и социальные сети. Мы создадим кнопки «Поделиться» для наиболее важных социальных сетей в виде статических элементов и добавим их на ваш веб-сайт на базе WordPress без использования JavaScript.

Статические кнопки «Поделиться» в двух вариантах

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

Необходимый CSS

Пожалуйста, добавьте следующий CSS, необходимый для кнопок, в style.css файл вашей темы (wp-content/themes/your theme).

.share-buttons { border-top: 1px dashed #ddd; border-bottom: 1px dashed #ddd; margin: 10px 0; padding: 20px 0; position: relative; line-height: 1;}
.share-buttons a { text-decoration: none; margin-right: 20px; border-radius: 3px; text-align: center; color: #fff; padding: 5px 15px 5px 15px;}
.share-buttons a:hover { text-decoration: none; }
.share-buttons a.twitter {background: #5DB5DE;} 
.share-buttons a.facebook {background: #3D62B3;} 
.share-buttons a.googleplus {background: #D34836;} 
.share-buttons a.googleplus:hover {background: #f75b44}
.share-buttons a.facebook:hover {background: #4273c8} 
.share-buttons a.twitter:hover {background: #32bbf5}

Необходимый код для счетчика

Чтобы файлы темы были чистыми и упорядоченными, нам нужны две простые PHP-функции, которые можно разместить с помощью однострочного PHP-кода за желаемой позицией в теме.

Открой functions.php вашей темы WordPress и включите в конец файла следующий код:

/**
* Static Share Buttons without Counter
*
*/
function ah_share_buttons() {
?>

/**
* Static Share Buttons with Counter
*
*/
function ah_share_buttons_zaehler() {
?>

The Result: This is How the Static Share Buttons Look Like
 
The Buttons without Counter
 
The Buttons with Counter
 
 
Приведенный выше код с форматированием CCS приводит к красивым, заметным кнопкам, которые быстро загружаются и отлично выполняют свою работу. По сравнению с оригинальными кнопками их реже пропускают и, следовательно, с большей вероятностью используют. Внешний вид можно легко изменить, конечно. Если вы предпочитаете дизайн оригинальных кнопок социальных сетей, вы также можете прикрепить сюда графику (которую нужно создать или получить), чтобы не было визуальной разницы с официальными кнопками. Однако это работает только для кнопок без счетчика.
 
Естественно, вы можете отказаться от форматирования CSS и использовать кнопки как простые текстовые ссылки, но это лишает вас преимущества визуальной заметности. Читатели могут кликать только на то, что видят.
 
Использование в теме WordPress
 
Наконец, кнопки «Поделиться» должны быть размещены в нужном месте вашей темы WordPress. Для этого мы создаем два небольших PHP-тега, из которых нужно только скопировать предпочитаемый тег в соответствующее место.
 
Есть и другие способы интегрировать кнопки в тему, чтобы изменения сохранялись даже после обновления темы. Один будет писать плагин, другой создавать дочернюю тему. Однако рассмотрение обоих этих вариантов выходит за рамки этой статьи, поэтому я представляю интеграцию только через тег php непосредственно в теме. Подход к дочерней теме будет таким же, как только дочерняя тема будет создана, т.е.
 
Интеграция через тег PHP
 
Открой single.php файл вашей темы WordPress и найдите следующий отрывок:
 
 
Теперь добавьте ниже или выше отмеченного отрывка следующий тег для отображения кнопок без счетчика:
 
 
Для отображения кнопок «Поделиться» со счетчиком вам понадобится следующий PHP-тег:
 
 
Над the_content() кнопки отображаются над содержимым, под тегом содержимого отображение будет под содержимым. the_content()- вызов не всегда находится непосредственно в файле single.php. Вполне возможно, что в вашей теме есть другой файл, который загружается в single.php и содержит Контент().
 
Ссылки по теме
 
Заключение
 
Статические кнопки привлекают внимание, привлекательны и отлично работают. Пользователь будет благодарен за сокращение времени загрузки из-за количества пропущенного JavaScript. Разницу можно измерить с помощью инструмента для проверки скорости, такого как Pingdom, если вы уже убрали все дополнительные перетаскивания по пути.
 
(дпе)