Как использовать блок социальных иконок WordPress?
Доброго здравия, друзья и любители WordPress!
Сегодня я вам расскажу как использовать блок социальных иконок WordPress на своих страницах и постах.
Блок социальных иконок WordPress позволяет размещать ссылки на свои социальные сети в любом месте вашего контента.
![]()
Ссылки представляют собой простые значки со стандартными логотипами социальных сетей, которые отлично смотрятся в любой настройке контента.
Знание того, как использовать блок социальных иконок, повысит осведомленность о вашем социальном присутствии и увеличит количество подписчиков в социальных сетях.
В этой статье мы рассмотрим, что делает блок социальных иконок, а также его настройки и параметры.
Мы также увидим некоторые передовые методы его использования и увидим часто задаваемые вопросы.
Как добавить блок социальных иконок в сообщение или страницу
![]()
Чтобы добавить блок социальных иконок на свои страницы и сообщения, откройте инструмент «Вставка блоков», щелкнув значок блока в своем контенте или в верхнем левом углу страницы, введите имя блока или прокрутите страницу, пока не найдете его, а затем выберите его.
![]()
Вы также можете ввести «/social» и нажать Enter или выбрать блок, когда он появится в списке.
![]()
После этого у вас будет блок социальных иконок в вашем контенте.
Он покажет график, показывающий, что это за блок.
Теперь вы можете добавить социальные сети, которые хотите отображать.
![]()
Затем вам нужно добавить значки социальных сетей.
Сначала выберите значок «Плюс», чтобы добавить социальные сети.
Откроется поле поиска, в котором вы можете ввести название социальной сети.
Вы также можете выбрать из тех, которые отображаются, или нажать «Просмотреть все», чтобы увидеть все доступные варианты.
У него есть 42 сети на выбор.
![]()
Затем щелкните значок сети, чтобы открыть поле URL-адреса. Введите URL-адрес в поле.
![]()
Продолжайте этот процесс, пока не добавите все свои сети.
Те, у кого есть ссылки, будут отображаться в обычном цвете.
Те, у кого нет ссылок, будут блеклыми.
В этом примере у Facebook есть ссылка, а у других — нет.
Блок социальных иконок: настройки и параметры
![]()
Блок социальных иконок имеет три области с настройками и параметрами.
Первый — это панель инструментов со значками социальных сетей.
Вторая — это панель инструментов для самих иконок.
Третий — это параметры блока социальных иконок на правой боковой панели.
На боковой панели есть два набора настроек. Один для блока и один для иконок.
Панель инструментов блока социальных иконок
![]()
Щелчок в любом месте блока социальных иконок открывает его панель инструментов.
Изменение типа или стиля блока социальных иконок
![]()
Первый параметр выбирает группу, изменяет количество столбцов и выбирает стили.
Стили включают «Только логотипы», «Форма таблетки» и «Темно-серые».
Я обычно выбираю «По умолчанию».
![]()
Если выбрать «Только логотипы», то это удаляем круг вокруг значка.
![]()
«Форма таблетки» удлиняет круги, придавая им форму вытянутой таблетки.
![]()
«Темно-серый» удаляет круги и делает значки серыми.
Перетаскивание или перемещение
![]()
Инструменты перетаскивания и перемещения позволяют легко перемещать блок в любом месте вашего содержимого.
Возьмите инструмент перетаскивания (6 точек), чтобы перетащить его.
Выберите стрелки инструмента «Перемещение», чтобы переместить блок или текст в содержимом.
Выравнивание
![]()
Варианты выравнивания включают в себя левое, центральное и правое.
Левая и правая опции заключают блок с абзацем под ним, как я сделал в этом примере.
Выравнивание элементов
![]()
Это выравнивает значки внутри блока.
Выровняйте их по левому краю, по центру, справа или добавьте пространство между ними.
![]()
В этом примере между значками добавляется пробел.
Размер
![]()
Это обеспечивает параметры размера значков.
Выбирайте между маленьким, нормальным, большим и огромным.
Эти размеры подходят для большинства типов контента.
В этом примере я установил для них значение «Огромный».
Параметры
![]()
Дополнительные настройки открывает список параметров для блока.
Варианты включают:
- Скрыть дополнительные настройки — закрывает правую боковую панель;
- Копировать — копирует блок, чтобы его можно было вставить;
- Дублировать — создает дубликат блока под оригиналом;
- Вставить перед — добавляет пространство над блоком;
- Вставить после — добавляет пространство под блоком;
- Переместить в — перемещает блок, перемещая синюю линию вверх или вниз с помощью клавиш со стрелками и нажимая Enter;
- Редактировать как HTML — преобразовывает блок в представление HTML, чтобы вы могли скорректировать код. Все остальные блоки отображаются как обычно;
- Добавить в блоки многократного использования — добавляет блок значков социальных сетей в список блоков многократного использования;
- Группа — добавляет блок в группу, чтобы вы могли настроить их как один блок;
- Удалить блок — удаляет блок.
Панель инструментов со значками социальных сетей
![]()
Выбор значков открывает другую панель инструментов, которая применяется только к значкам.
Слева находится значок социальной сети, закрывающий эту панель инструментов и открывающий основную панель инструментов для блока.
Панель инструментов «Значок социальной сети»
![]()
Этот значок указывает, какой значок социальной сети вы выбрали.
Все параметры будут применяться к этой социальной сети.
Панель инструментов «Перетаскивание и перемещение значков»
![]()
Параметры перетаскивания и перемещения позволяют изменять положение значка в блоке.
Перетащите значок, захватив шесть точек, или щелкните стрелку влево или вправо, чтобы переместить значок влево или вправо на одну позицию.
Панель инструментов «Значок параметров»
![]()
Параметры работают так же, как параметры основной панели инструментов, но применяются к выбранному значку.
Они включают:
- Скрыть дополнительные настройки;
- Копировать;
- Дублировать;
- Перейти к;
- Удалить блок.
Настройки блока социальных иконок
![]()
Настройки блока размещены на правой боковой панели.
Щелкните блок или шестеренку, чтобы отобразить боковую панель.
Если вы выберете блок в содержимом блока социальных иконок, отобразятся его настройки боковой панели.
Нажмите шестеренку в правом верхнем углу, если боковая панель закрыта.
Стили блока
![]()
Стили такие же, как и в настройках преобразования для блока.
Выберите один из вариантов по умолчанию, «Только логотипы», «Форма таблетки» и «Темно-серые».
Вы также можете установить стиль по умолчанию в раскрывающемся списке.
Я настроил его на «Форму таблетки».
Настройки ссылки
![]()
Это позволяет вам решить, будут ли ссылки открываться на той же вкладке или в новой вкладке.
Цвет
![]()
Это позволяет вам настроить цвета значка и круга, используемого для фона значка.
Выберите один из готовых цветов или выберите собственный цвет из палитры цветов, введите шестнадцатеричный код, код RBG или код HSL.
Дополнительно
![]()
Раздел «Дополнительно» включает два поля.
Якорь HTML — это специальный веб-адрес только для блока социальных иконок.
Дополнительные классы CSS позволяют добавлять собственный CSS для стилизации вашего блока.
Выбранный вами стиль появится в этом поле.
Блок «Социальные иконки: настройки значка»
![]()
Щелчок по значку в блоке социальных значков открывает настройки боковой панели только для этого значка.
В настройках есть поле метки, где вы можете ввести текст, который будет описывать ссылку для читателей.
Дополнительно добавляет поле для классов CSS только для этого значка.
Советы и рекомендации по эффективному использованию блока социальных иконок
После того, как вы добавили свои ссылки, сохраните блок в повторно используемых блоках, чтобы вам не приходилось добавлять их каждый раз.
Используйте их в своем контенте и на боковых панелях.
Используйте только несколько социальных сетей, в которых вы наиболее активны.
Добавление слишком большого количества может выглядеть загроможденным и запутать аудиторию, потому что они не будут знать, где следовать за вами за лучшим контентом.
Если вы используете значок ссылки, добавьте к нему блок абзаца, чтобы создать заголовок и описание.
Используйте их параметры цвета, чтобы они соответствовали значкам вашего веб-сайта, но выделяли их среди остального контента.
Добавьте класс CSS к каждому значку отдельно для максимального уровня настройки.
Преобразуйте блок в группу, чтобы настроить цвет фона или добавить границу.
Часто задаваемые вопросы о блоке социальных иконок
Что такое блок социальных иконок?
Этот блок размещает значки социальных сетей в любом месте вашего контента, чтобы привлечь внимание пользователей.
В каких социальных сетях он может отображаться?
Включено 42 социальные сети.
Один из них — это значок ссылки, который может быть связан с любым веб-сайтом или социальной сетью, поэтому вы можете ссылаться на неограниченное количество сетей.
Можно ли его трансформировать в другие блоки?
Его можно преобразовать в группу или столбцы.
Группа отлично подходит для настройки фона.
Столбцы позволяют размещать их рядом с другими типами контента.
Для чего это можно использовать?
Он может ссылаться на ваши социальные сети, на сети членов команды, на сети людей или компаний, которые вы обсуждаете в своих статьях, и т. д.
Его также можно использовать для предоставления любого количества ссылок на услуги, продукты, страницы и т. д., используя значок ссылки.
Заключение
Это мой взгляд на блок социальных иконок WordPress.
Иконки социальных сетей — отличный способ привлечь внимание пользователей в соцсетях, и этот блок позволяет легко добавлять их в ваш контент.
Добавьте более 40 различных сетей или добавьте ссылки на любой веб-сайт.
Легко настроить.
У вас есть несколько вариантов, включая размер и цвет, поэтому вы можете сделать его подходящим для вашего веб-сайта.
Расскажите нам о своем опыте в комментариях ниже.
Ждем вашего ответа.
А я на этом буду прощаться — до скорых встреч, заходите чаще и не болейте!
"Как использовать блок социальных иконок WordPress?"
- Создание сайта на WordPress (31)
- WordPress для начинающих (22)
- Блог на WordPress (19)
- CMS Wordpress (16)
- Плагины Wordpress (16)
- WordPress SEO (15)
- Безопасность WordPress (12)
- Услуги More WP (1)
- Пожалуйста. Фигмой тоже можно, отличный графический редактор, но сервисы подойдут для все, так как не все смогут задизайнить картинку а редакторе. В общем главное чтоб было удобно и результативно :)
- Еще можно пользоваться Figma для того чтобы сделать нужные размеры. Спасибо вам за сервис по генерации иконок, не знал что пачкой можно сразу для всего сделать.
- Всегда пожалуйста, очень рад, что вам помогло :)
- Спасибо за материал! Даже такой полный чайник, коим я себя считаю, нашла ответы на свои проблемы с сайтом.
- Sitemap.xml сейчас в WP автоматически делается, правда работает не всегда. А для html карты использую обычно WP Sitemap Page, как по мне самый лучший он. И стараюсь как то оживить если можно так выразиться, https://sverchokcorm.ru/sitemap/ тут например пару картинок добавил)
- Спасибо, мне действительно помогло. Написано подробно и понятно, для непрограммистов идеально.


(Пока оценок нет)





всё это круто но за вконтакте они забывают и не добавляют в список сетей.