«

»

Мар 06 2013

Распечатать Запись

Добавляем социальные иконки Share42 в тему Graphene без плагинов

Установка социальных кнопок Share24 на WordPress тему Graphene без использования плагиновПосле очередного обновления темы я вдруг вспомнил, что я делал на этом блоге социальные кнопки от Share42, но они куда-то когда-то пропали. Я уж подумал, что мне показалось, но в дополнительных настройках темы среди дополнительных стилей я увидел соответствующие стили. Да в папочке с WordPress’ом скрипт от Share42 тоже валяется. Как, когда и почему пропали социальные кнопки я так и не вспомнил, поэтому решил поставить заново, но уже по нормальному. Теперь перейду от слов к делу.

Установка кнопок Share24 на тему Graphene

  1. Переходим на сайт share42.com. И формируем свои кнопочки – выбираем размер кнопок, формируем набор нужных социальных сервисов и делаем прочие настройки. На всякий случай просматриваем что получилось и скачиваем наш скрипт.
  2. Скрипт кладем в папочку на хостинге и запоминаем путь к нему относительно корня сайта.
  3. Далее идем редактировать functions.php. Вставляем в него следующий код: 

    Здесь вам надо изменить значения data-top1 (отступ от верхнего края окна браузера при начальном отображении), data-top2 ( максимально возможный отступ от верхнего края браузера при прокрутке), data-margin (смещение относительного начального положения), путь к скрипту, который вы скачивали и затем заливали к себе на хостинг (кстати, как вариант – можно залит скрипт не к себе на хостинг, а на code.google.com).

  4. Идем в “Внешний вид – Параметры Graphene – Параметры отображения” и в поле “Специальные CSS” добавляем правила для стилизации нашего блока кнопок. В моем случае их немного: 

    Можно было бы сделать код еще более кросбраузерным добавив специфичные для разных браузеров правила прозрачности, но я не стал – и так работает :-)

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

Решение также легко адаптировать под любую другую тему WordPress, изменив название хука на используемое в данной теме.

4 комментария

Перейти полю для комментария

  1. Aleksey

    Добрый день, у меня вопрос.
    Сделал все по инструкции, панелька появилась, счетчики работают, но самих иконок нет, хотя через путь в адресной строке я их вижу…
    Сайт: хттп://frmoi.eu/
    Вчем может быть загвоздка?
    Заранее благодарен за отыет.
    Алексей

    1. Stonekeeper

      Изначально я подумал, что вы что-то пропустили, потому как не нашел в исходном коде страницы подгрузки скрипта share42.js. Но потом докопался – у Вас, видимо, стоит плагин, который оптимизирует JS-скрипты. В данном случае он коряво оптимизировал скрипт share42.js и в итоге он отрабатывает, но не так как задумано изначально =) Следовательно, надо в настройках используемого Вами плагина для оптимизации JS добавить скрипт share42.js в исключения, чтобы он его не трогал и не менял.
      Если я не прав – пишите, какие плагины на WordPress у вас установлены. Попробую разобраться…

  2. Aleksey

    Благодарю за оперативный отвеь!
    Нашел я плагин который конфликтует, это W3 Total Cache пока я без понятия как в нем исключить share42.js буду гуглить, если есть идеи =)) с удовольствием выслушу…
    Алексей

    1. Stonekeeper

      Стоит у меня такой, но оптимизирует страницу у меня CloudFlare. Если же говорить о W3 Total Cache, то я вижу в его настройках два пути решения проблемы:

      1. Идем в Perfomance – Minify и ищем на странице блок настроек Advanced. В нем в поле Never minify the following JS files: добавляем share42.js. По идее должно работать, только не забудьте перед проверкой кеш очистить:) Если вдруг не заработало, то пробуем вариант 2.
      2. Идем в Perfomance – Minify и ищем на странице блок настроек JS. Там пробуем поставить Combine only. Если после этого не заработало, то пробуем снять галочку вообще на JS minify settings:Enable. Если уж после этого не заработает, то надо искать причину где-то еще. Но скорее всего всего обойдется первым вариантом решения.

      Удачи в настройке W3 Total Cache.

Добавить комментарий для Aleksey Отменить ответ

Ваш e-mail не будет опубликован. Обязательные поля помечены *