WP-THEME.EU

Темы для WordPress европейского качества

Создаём кнопку «retweet it»

Предыстория

Так как роль твиттера в жизни современного сайта или блога стала фактически неотъемлемой его частью, не мог не затронуть данную тему.

Речь пойдёт, как Вы, полагаю, уже догадались, о кнопках в конце или начале статей «затвитить в твитере». У кого-то эти кнопки выглядят так у других иначе, но, согласитесь, стандартной версии не всегда хочется.

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

Пробуйте лучше работать с кодом, тем более, что это не сложно.

Потому сегодня мы создадим кнопку «retweet it», с двумя особенностями:

  1. Нажав на кнопку, посетитель напрямую с Вашей статьи в WordPress, перенесётся на свой Twitter. Сообщение с обратной ссылкой на статью сразу же отобразится в окошке сообщений.
  2. Вторая особенность, это замещение одного изображение кнопки, другим. При наведении на него (изображение) мыши.

В принципе, как это работает, Вы можете посмотреть в конце данной статьи. 😉

Создание

  1. Создаем всего 2 графика: основной и замещающий
  2. Помешаем их в папку images и загружаем на сервер
  3. Прописываем следующий код в файл single.php Вашей темы (шаблона) на WordPress:
<a href=»http://twitter.com/home?status=Currently reading <?php the_permalink(); ?>» onmouseout=»MM_swapImgRestore()» onmouseover=»MM_swapImage(‘twitter’,»,’http://ВАШ-САЙТ.ру/wp-content/themes/НАЗВАНИЕ ВАШЕЙ ТЕМЫ/images/twitter-hover.png’,1)» title=»Нажми, чтобы отправить статью на Twitter!» target=»_blank»><img src=»http:// ВАШ-САЙТ.ру /wp-content/themes/ НАЗВАНИЕ ВАШЕЙ ТЕМЫ /images/retweet.jpg» alt=»tweet me» name=»twitter» width=»100″ height=»25″ border=»0″ id=»twitter» /></a>

В каком месте код будет находиться – решать именно Вам. Путь для графиков, лучше прописывать прямой – дабы не загружать список стилей, т.е. то, что помечено красным – это Ваш сайт.

Готово!

Будут вопросы – добро пожаловать в комментарии.

Я благодарю Вас за внимание к моему творчеству и надеюсь увидеть Вас на страницах WP-Theme.eu
снова и вновь

3 комментария: Создаём кнопку «retweet it»

  • Кстати, Дмитрий Медведев теперь тоже есть на твиттере.
    Я уже успел к нему присоединиться 😉 и Вам рекомендую.

  • Для новичков ещё неплохо бы указать, что «twitter-hover.png» это пикча при наведении курсора, а «retweet.jpg» — до. Или наоборот, точно не знаю 🙂

    • Угу, верно, ценное замечание для тех, кто не совсем разбирается.
      Twitter-hover.png — файл, который отображается при наведении.

Добавить комментарий

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