WordPress / [Из песочницы] Plugin для WordPress — «sexybookmarks». Добавляем кнопки «ВКонтакте» и «Одноклассники»

Всем привет!

Сегодня речь пойдет о компоненте для WordPress – sexybookmarks версии 3.0, а именно, как добавить в этот плагин кнопки «ВКонтакте» и «Одноклассники»

Для тех, кто еще не знаком с этим плагином, поясню, этот плагин отображает «социальные кнопки» для публикации ваших статей в различные сервисы, такие как «Facebook», «закладки Google», «закладки Яндекс» и т.д.

Чем же примечателен именно этот плагин? Ведь для WordPress подобных плагинов довольно много… Помимо большого количества встроенных кнопок (87 штук), довольно таки удобной панели настроек и поддержкой русского языка, этот плагин обладает необычным дизайном, который может прийтись по душе ни только вам, но и вашим посетителям.

Скачать плагин sexybookmarks версии 3.0, можно по ссылке: sexybookmarks ^[1]. Версия 3.0. совместима с WordPress 3.3.1, проверено на собственном опыте.

Панель настроек sexybookmarks открывается в меню WordPress «Параметры» => «SexyBookmarks». В панели можно отметить интересующие вас кнопки, добавить атрибут «rel='nofollow'» к анкорам, настроить размещение панели кнопок и настроить внешний вид. Как выглядит страница настроек, можно увидеть на картинке ниже.

^[2].

На этом вводную часть завершаю и перехожу к главному – теме статьи.

Как и говорилось раннее, плагин включает в себя 87 встроенных кнопок, но среди них нет тех самых, наиболее популярных в наших краях кнопок «Одноклассники» и «ВКонтакте». Далее по тексту, я объясню как их добавить, ну а тем, кому нет необходимости вникать в процесс добавления кнопок, в конце статьи есть ссылка на скачивания плагина с уже встроенными кнопками.

Для редактирования файлов, вам понадобится текстовый редактор. Я рекомендую использовать – Notepad++, он удобен для редактирования и что самое главное, не создаст проблем с кодировкой после сохранения. Скачать редактор можно по ссылке: Notepad++ ^[3].

Для создания кнопок выполните следующие шаги:

Шаг 1

Скопируйте иконки sexy-vkontakte.png ^[4] и sexy-odnoklassniki.png ^[5] для наших будущих кнопок в папку sexybookmarksimagesicons

Внимание!
Сохраните файлы именно с названиями sexy-vkontakte.png и sexy-odnoklassniki.png. Это очень важно для корректной работы компонента.

Шаг 2

Откройте файл sexybookmarksincludesbookmarks-data.php и в конец массива $sexy_bookmarks_data добавьте следующие строки:

'sexy-vkontakte' => array(       	  'check'=>sprintf(__('Check this box to include %s in your bookmarking menu', 'sexybookmarks'), __('VKontakte', 'sexybookmarks')),	   	  'share'=>__('Share this on ', 'sexybookmarks').__('VKontakte', 'sexybookmarks'),          'baseUrl' => 'http://vk.com/share.php?url=PERMALINK&title=TITLE',     ),     'sexy-odnoklassniki' => array(       	  'check'=>sprintf(__('Check this box to include %s in your bookmarking menu', 'sexybookmarks'), __('Odnoklassniki', 'sexybookmarks')),	   	  'share'=>__('Share this on ', 'sexybookmarks').__('Odnoklassniki', 'sexybookmarks'),                 'baseUrl' => 'http://share.yandex.ru/go.xml?service=odnoklassniki&url=PERMALINK',	       ), 

Этот код добавит 2 кнопки в панель настроек компонента и на страницу которую увидит ваш посетитель.

Поясню некоторые моменты по коду:

Текст из параметра 'check' — отображается в тултипе кнопки в панели настроек для кнопки
Текст из параметра 'share' – отображается в тултипе кнопки на странице с компонентом
Параметр 'baseUrl' – это шаблон url для кнопки, где PERMALINK и TITLE – это метасимволы, которые будут заменены на url (PERMALINK) и заголовок (TITLE) страницы, на которой находится панель с кнопками. Для каждого сайта такой url свой, узнать его можно в справке используемого сервиса.

Название элементов 'sexy-vkontakte' и 'sexy-odnoklassniki' я переименовывать вам не рекомендую. Этот текст используется для названия файла иконки и в файле public.php, описанном ниже. Для css-стиля кнопки, также подставляется это же название.

Шаг 3

Откройте файл — sexybookmarksincludespublic.php. Найдите там функцию «function get_sexy()» (просто используя поиск по Ctrl+F). В этом методе найдите «switch ($name)», в конце этого switch перед текстом «default:» вставьте следующий код:

case 'sexy-vkontakte':                 $socials.=bookmark_list_item($name, array(                     'permalink'=>urlencode($perms),                     'title'=>$title,                 ));                 break;	 

Этот код преобразует наш url к более корректной форме для формирования ссылки сервиса vkontakte

Небольшое лирическое отступление относительно сервиса «Одноклассники»
Как показала практика, сервис публикации в «Одноклассники» довольно таки капризен и если url вашей страницы включает в себя буквы кириллицы, как например: my-site.com/привет-мир/ ^[6], то при публикации ссылки возникает ошибка «Нет доступа к ресурсу»

Так, что если у вас возникает такая ситуация, я рекомендую вам переименовать страницу либо не размещать кнопку «Одноклассники» в этой панели вообще.

Шаг 4

В принципе, трех предыдущих шагов уже вполне достаточно, что бы обеспечить работоспособность компонента. Ну а самые пытливые могут пойти дальше.

Итак, по результатам предыдущих трех шагов, мы уже разместили кнопки в админ-панели и они отображаются у вас в заметках. Но на панели настроек вместо значков «Одноклассники» и «ВКонтакте» отображается иконка показанная на рисунке ниже.

Для того, что бы исправить эту ситуацию, откройте файл со стилями для админ-панели: sexybookmarkscssadmin-style.css и вставьте туда стили:

label.sexy-vkontakte{ background: url('../images/icons/sexy-vkontakte.png') no-repeat;  background-repeat: no-repeat; cursor: move; float: left; height: 40px; margin: 12px 2px !important; text-align: center; width: 60px;}  label.sexy-odnoklassniki{ background: url('../images/icons/sexy-odnoklassniki.png') no-repeat;  background-repeat: no-repeat; cursor: move; float: left; height: 40px; margin: 12px 2px !important; text-align: center; width: 60px; } 

После этого в панели настроек sexybookmarks будут отображаться корректные иконки.

Шаг 5

В тултипе кнопки на странице и панели настроек отображается текст латинскими буквами — «Odnoklassniki» и «VKontakte». Если вас не устраивает эта ситуация, то эти кнопки можно локализовать для русского языка.

Для настройки локализации вам понадобится утилита Poedit. Скачать ее можно по ссылке: Poedit ^[7]. Далее я буду давать пояснения для OC Windows.

Файлы локализации, находятся в папке sexybookmarkslanguages. Это файлы с расширениями: «*.po», «*.mo» и «*.pot». В файле «*.po» — описываются переменные локализации, затем эти файлы при помощи утилиты poedit компилируются в «*.mo»-файлы. Программа Poedit синхронизирует файлы локализации с исходным кодом, также, при помощи нее можно скомпилировать «.mo»-файлы и в ней есть возможность автоматического перевода ресурсов, что очень удобно. В данной статье, автоматический перевод не описывается, но вы можете ознакомится с этой возможностью самостоятельно изучив документацию.

Редактирование «*.po»-файла

Запустите poedit.exe. Сделать это можно через «Пуск» => «Программы» => «Poedit» => «Poedit» или из папки установки «C:Program FilesPoeditbinpoedit.exe»
В меню, нажмите «Файл» => «Открыть…» или значок папки на тулбаре. В появившемся окне выберите файл по пути <каталог с плагином>sexybookmarkslanguagessexybookmarks-ru_RU.po

После того как вы открыли «*.po»-файл, надо настроить путь к каталогу с плагином. Для этого в меню нажмите «Каталог» => «Настройки…». В появившемся окне, установите вкладку «Пути». В поле «Путь к базе» введите путь к папке с исходным кодом плагина sexybookmarks у вас на компьютере и нажмите «Ок»

После этих действий вы можно сделать синхронизацию с исходными кодами. В меню выберите «Каталог» => «Обновить из исходного кода»

После обновления должно появиться окно, показанное на картинке ниже.

Жмите «ОК»

Теперь можно задать значение для перевода. В списке нажмите на строку «VKontakte». Эта строка будет выделена жирным темно-синим шрифтом, после этого внизу страницы автоматически заполнится верхнее текстовое поле строкой «VKontakte», впечатайте в поле ниже перевод – «ВКонтакте»

Тоже самое проделайте с «Одноклассниками». Все, можно сохранять, жмите «Файл» => «Сохранить»

Компиляция «*.mo»-файла

Теперь осталось сделать последнее – скомпилировать «*.po» — файл в «*.mo» — файл. Сделать это можно в командной строке. Так, что жмем «Пуск» и впечатываем имя программы «cmd».
В строку запроса вводим примерно следующее:

"C:Program FilesPoeditbinmsgfmt.exe" -o C:ВАША_ПАПКА_С_ПЛАГИНОМsexybookmarkslanguagessexybookmarks-ru_RU.mo C: ВАША_ПАПКА_С_ПЛАГИНОМ sexybookmarkslanguagessexybookmarks-ru_RU.po 

В ответ обычно, не пишется ничего, просто обновляется «*.mo»-файл. Проверить успешность генерации файла можно по дате-времени обновления файла

После всех этих действий, можно заливать папку плагина «sexybookmarks» на ваш хостинг ^[8] в папку wp-contentplugins

На этом все! Спасибо всем, кто осилил, надеюсь, что моя статья была вам полезна.

Ссылка на скачивание плагина sexybookmarks вместе с кнопками «ВКонтакте» и «Одноклассники»:
depositfiles: sexybookmarks ^[9]

Автор: Irrra