[Подключаемый модуль полностью не используется] Установить кнопку «Поделиться в социальных сетях» только с HTML и CSS [WordPress]

2019 год 7 месяц 30 день2019 год 8 месяц 3 день

Содержание

1. Курок
2. Особенности кнопки Поделиться по этому коду
3. Код кнопки Поделиться и способ установки
4. HTML
5. CSS
6. Пример дисплея

Курок

До сих пор кнопка «Поделиться в социальных сетях» была "Плагин WordPress Share Buttons - AddThisЯ полагался на плагин под названием ".

Этот плагин

Вы можете добавлять закладки Hatena, а также основные зарубежные социальные сети, такие как Facebook, Twitter, Line, pocket и Pinterest.
Сбоку находится тонкая маленькая кнопка «Поделиться».

В этом отношении он мне понравился, но это был довольно тяжелый плагин.

Если вы выполните поиск по запросу «без плагина, кнопка поделиться», вы найдете метод, использующий плагины PHP / CSS / HTML / социальных иконок.

На этот раз я попытался установить кнопку «Поделиться» в SNS только с помощью CSS и HTML, без использования PHP и значков социальных сетей.

Особенности кнопки Поделиться по этому коду

Создано только с помощью HTML и CSS
Не используйте PHP, социальные иконки
Выполнить javascript в теге
Автоматически получать URL-адрес и заголовок страницы, которой вы хотите поделиться
Быстрее плагинов (до 10 пунктов выше, чем AddThis)
Количество акций не счесть
Горизонтальный простой дизайн

Код кнопки Поделиться и способ установки

HTML

Куда писать:
«Внешний вид» -> «Настроить» -> «Виджет» -> Где вы хотите разместить кнопку «Поделиться» -> Добавить виджет -> «Пользовательский HTML»

Поделитесь этой статьей

CSS

Место для записи: «Внешний вид» -> «Настроить» -> «Дополнительные CSS»

/ * --- Кнопка публикации в соц.сетях --- * / / * Символы на кнопке * / .fa-twitter: before, .fa-hatena: before, .fa-line: before, .fa-pocket: перед {font -family: helvetica neue, helvetica, arial, sans-serif; font-weight: bold; font-size: 14px} .fa-facebook: before {content: "f"; font-family: Verdana; font-weight: bold } .fa-twitter: before {content: "twitter";} .fa-hatena: before {content: "B!"; font-family: Verdana;} .fa-line: before {content: "Line";} .fa-pocket: before {content: "pocket";} / * Регулировка положения отображения кнопки * / .button-area {text-align: center; margin-top: 15px;} / * Настройки отображения заголовка * /. button- area-title {text-align: center; padding: .7em;} / * Дизайн блока кнопок * / .button-area li a {padding: 2px; display: block; text-align: center; text-decoration: none; color: #fff; border-radius: 4px;} / * Цвет фона для каждого SNS * / .twitter a {background-color: # 55acee;} .facebook a {background-color: # 3b5998;} .hatena a {background -color: # 008fde;} .line a {background-color: # 1dcd00;} .pocket a {background-color: # ea5a6c;} / * Удалить список «・» * / .button-area ul {margin: 0; padding: 0; list-style: none;} / * Настройки ширины кнопки и полей * / .button-area li {float: left; width: 19%; margin: 0%;}. button-area ul: after {display: block; clear: both;} / * Настройки отображения при наведении курсора на кнопку * / .button-area li a: hover {-ms-transform: translateY (-3px); -webkit- transform: translateY (-2px); transform: translateY (-2px);}