| Декабрь 2014 → | ||||||
|
1
|
2
|
3
|
4
|
5
|
6
|
7
|
|---|---|---|---|---|---|---|
|
8
|
9
|
10
|
11
|
12
|
13
|
14
|
|
16
|
17
|
18
|
19
|
21
|
||
|
22
|
23
|
24
|
25
|
26
|
27
|
|
|
29
|
30
|
31
|
||||
За последние 60 дней ни разу не выходила
Сайт рассылки:
http://blogorazvitie.ru
Открыта:
15-12-2014
Статистика
0 за неделю
Создание и продвижение блога на Wordpress! Социальные кнопки на вашем сайте!
Социальные кнопки для сайта!Всем привет! Решился я все таки поставить себе на блог социальные кнопки, сделать это не долго и не сложно, но все как то руки не доходили. Практически каждый пользователь интернета имеет свою страничку в социальных сетях, и если у вас на сайте будет такая кнопка, то он может сделать репост страницы в социальной сети, достаточно только нажать на ту кнопку, где зарегистрирован пользователь. Также, наличие таких кнопок эффективно влияет на продвижение вашего сайта в поисковых системах, а это увеличение доверия, посещаемости и индексации вашего сайта. В статье я расскажу, где взять социальные кнопки, куда и как поставить. На днях я установил кнопки на блог моей сестренки, смотрится неплохо и все отлично работает. Так как она захотела видеть свои кнопки не только под статьей, где обычно они ставятся, а еще и на всех страницах блога посередине шаблона, то пришлось немного повозиться. Тот, кто разбирается в HTML и CSS то не составит труда их поставить. Я конечно же расскажу как их поставить и под статьей, сайд-баре и в сам шаблон, читайте дальше. Есть сервисы, которые позволяют выбрать и настроить кнопки, скопировать полученный код и вставить его в нужное место на своем сайте. Давайте посмотрим как это сделать на сервисе Pluso.ru, от туда я и взял кнопки для блога сестры. На главной странице сервиса можно сразу начать выбирать свои кнопки. Отметьте тот ряд кнопок, стиль которых понравился и выберите, какие дополнительные социальные кнопки вы хотите чтобы у вас были.
Выбирайте кнопки, которые подходят под дизайн и оформление вашего сайта. Ниже есть предпросмотр и настройки. Сделайте нужные настройки и скопируйте код, который получился. Ставим социальные кнопки под статью!Для этого нам нужен файл single.php, находится он в директории сайта с вашей темой (/domains/ваш сайт.ru/wp-content/themes/ваша тема/single.php). Для работы с файлами своего сайта я использую файловый менеджер FilleZilla и текстовый редактор Notepad++ Перенесите файл на рабочий стол и откройте. Нужно найти место, где заканчивается пост. У себя я хочу видеть их сразу внизу поста, а категории и метки будут стоять после кнопок.
Найдите в файле single.php место где начинаются категории и метки, и перед ними вставьте скопированный код ваших социальных кнопок.
Вставили код, сохранили и перезаписали обратно на хостинг. Теперь обновите страницу своего сайта и посмотрите, что получилось.
У меня получились слишком маленькие кнопки, поставлю среднего размера. Для этого вернемся на сервис Pluso.ru и в настройках укажем другой размер, скопируйте код и замените его в файле single.php и проверьте еще раз как получилось.
Вот теперь, все просто отлично, меня устраивают такие кнопки. Уверен, что у вас тоже все получилось. У сестры на блоге я выравнивал кнопки по центру, если вам будет нужно, то сделайте следующее. Для выравнивания не только кнопок, а чего угодно, используйте такие свойства: Необходимое свойство добавьте в код кнопок, установив нужный размер пикселей. Пример выравнивания кнопок:
Выравнивайте кнопки как вам нужно, сохраняйте, перезаписывайте и смотрите результат. Рекомендую к просмотру по данной теме эту статью, думаю вы найдете что то полезное для своего сайта. Как добавить социальные кнопки в шаблон сайта!И снова приведу в пример блог Ани! Если вы откроете ее страницу, то увидите социальные кнопки установленные в самом шаблоне над статьями. Также пришлось выравнивать, чтобы смотрелось все аккуратно. Как и где взять код кнопок я писал выше, теперь расскажу куда я поставил код для отображения в шаблоне сайта. Для начала решите, где вы хотите видеть кнопки, в какое место их будете ставить. Нужно выдернуть на рабочий стол файл Header.php, находится он в той же папке, что и single.php, откройте его. Пример вставки кода у Ани:
После блока с навигацией поставил код с кнопками, и выровнял их по центру с помощью свойств. Чтобы найти в каком месте поставить код, кликните по этому месту правой кнопкой и выберите режим просмотра кода элемента. Откроется окошко с кодом, и необходимо определить куда будет правильно поставить код. Если водить мышкой по коду, на сайте будут подсвечены определенные элементы, вот и нужно правильно выбрать нужный элемент. Если не получится с одним, пробуем другой. И сделайте на всякий случай резервную копию файла, который изменяете. Принцип думаю вы поняли, дальше сами. Как поставить социальные кнопки в сайдбар сайта!Ну здесь вообще все просто, наверное вы и сами знаете как это сделать. В консоли вашего сайт перейдите: внешний вид — виджеты. Переместите виджет — текст в рабочую часть сайдбара.
Можете придумать название, которое также будет отображаться на сайте. И в большое окно виджета вставьте скопированный код ваших кнопок. Чтобы сделать по центру, перед кодом напишите <div align="center">ваш код</div> и сохраните.
Теперь пройдите на главную страницу вашего сайта и обновитесь (F5) Социальные кнопочки стоят в сайд баре. Если после
обновления, вы не увидели изменения, то возможно надо почистить кэш и попробовать еще раз. Установить кнопки можно в любое место сайта, если хоть немного разбираетесь в HTML и CSS. На некоторых сайтах видел соц. кнопки в подвале сайта, а за это отвечает файл footer.php. Но, имейте в виду, что если вы ставите кнопки на сайт — появляется дополнительная нагрузка на страницы сайта, что опять же не очень хорошо. Особенно влияет установка кнопок в шапку сайта, так как она загружается в начале, а потом уж остальное. Решайте сами, стоит ли ставить кнопки и куда ставить.
На этом я заканчиваю статью. Если она вам понравилась и была полезна, то можете подписаться на обновления и поделиться с друзьями
P.S. Если вы хотите изменить стиль и дизайн кнопок на свой, то попробуйте сервис Share42.com
Следующая статья: «Комментарии ВКонтакте на сайте WordPress!» Предыдущая статья: «Как сделать слайд шоу на сайте!» Всем желаю удачи! Автор блога, Денис Максимов |
| В избранное | ||
