Как разместить кнопку-картинку в sidebar.

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

Тут на самом деле все просто. Вы же знаете. Не люблю усложнять себе жизнь)) 

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

Что ж с картинкой делать? Несколько вариантов. Если позволяют навыки, то можете нарисовать в каком либо графическом редакторе. Если с этим туговато, то можно поискать в интернете. А можно не просто картинки искать, а кнопки. Тут можно посмотреть, какие бывают.

В общем, надеюсь, с изображением Вы определились. Теперь дело за малым: разместить нашу кнопку-картинку на сайте. Для этого загружаем изображение в библиотеку медиафайлов.

Если не знаете, как это делать, то читаем, если знаете, то можете пропустить этот пункт.

Заходим в админ-панель сайта – Медиафайлы — Добавить новый – Выберите файлы.

knopka-1

Выбираем, загружаем и переходим в Библиотеку файлов, находим нашу картинку и нажимаем Перейти.

knopka-2

Открывается наша картинка.

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

Нас интересует ссылка нашего изображения. Копируем ее. (Либо можете сделать это чуть позже)

knopka-3

Затем используем следующий код:

<a title=»Тут пишем название кнопки» type=»application/rss+xml» href=»Тут пишем адрес статьи» rel=»nofollow»> <img style=»border: 0pt none;» src=»Тут пишем ссылку изображения» alt=»Тут напишите адрес сайта» height=»99″ /></a>

У меня получилось следующее

<a title=»Книга отзывов и предложений» type=»application/rss+xml» href=»http://orangefamily.ru/obo-mne/kniga-zamechaniy-i-predlozheniy.html/» rel=»nofollow»> <img style=»border: 0pt none;» src=»http://orangefamily.ru/wp-content/uploads/2013/03/gostevaya_kniga.jpg» alt=»orangefamily.ru» height=»99″ /></a>

Идем дальше. Заходим в админ-панель – Внешний вид-Виджеты

Берем виджет «Текст» и переносим его в нужный Вам сайдбар. В открывшемся окошке вставляем наш код. Нажимаем Сохранить , а потом Закрыть.

knopka-4

(По желанию можно озаглавить Вашу картинку, внеся название кнопки/изображения в поле Заголовок)

Все, теперь идем и проверяем 😉 Надеюсь, все понятно объяснила!

Хорошего и удачного Вам дня!

Тоже интересно почитать!

Плагины для WordPress: мои помощники.
Хотелось бы поделиться, а также обсудить такой вопрос, какие плагины лучше использовать у себя на ...
Как вставить картинку-смайл в сообщение и комментарий.
Я обычно стараюсь использовать изображения в статьях. Мне кажется, что так запись выглядит «живее». Иногда ...
Как выслать письмо своим подписчикам (smartresponder).
Вот как оказалось… Не все в курсе…Что ж быстренько  расскажу)) Итак, когда в школе Start Up ...
Как сделать, чтобы при нажатии на картинку в статье, открывалась определенная страница (WordPress)
Это сделать несложно, но я догадалась не сразу. Пришлось чуть-чуть поломать голову. Ответ оказался таким простым, что мне стало ...
Как запретить/разрешить древовидные комментарии (WordPress)
На одном из блогов, посвященных созданию  и SEO-продвижению сайтов, встретила информацию о том, что древовидные ...
Если статья понравилась, то расскажи о ней друзьям! Пост!

Как разместить кнопку-картинку в sidebar.: 39 комментариев

  1. Идея очень хорошая. Тоже себе хочу такой сундучок. Только не знаю, получится ли, я совсем «чайник».

    1. Надежда, Вы попробуйте. Если что-то будет не получаться, то не стесняйтесь, пишите. Постараюсь помочь))

  2. Замечательная подсказка! Благодарю! Обязательно попробую. Все очень понятно.

  3. Марина, ты еще и успеваешь сайт украшать?! И швец и жнец и на дуде игрец! Ты просто молодец! Каждый день думаю, надо выкроить пару часиков и по твоим статьям у себя порядок навести! 🙂

    1. нет, пока не успеваю))
      это я давно уже сделала))
      но на днях нужно что-нить еще с ним сделать)))

  4. Марина,признайтесь честно — сколько времени занимаетесь компьютерами? Или такой ум тщательно скрывался под прекрасной внешностью?

    1. В смысле компьютерами? Я вообще гуманитарий)) Вот разбираюсь тут на ходу прямо)) Разобралась — написала, со всеми поделилась))

  5. Марин, я тоже хочу что-то подобное, чтобы люди хотябы писали, что они хотят видеть на моем сайте. А вот эту самую картинку книги, ты где брала, если не секрет…

    1. Лена, я просто в поисковике ввела книга отзывов картинки, потом сидела выбирала картинку. А когда выбрала, то немного в фотошопе обновила, сделала надпись.
      Если нужна будет помощь, то пиши (сюда, на почту, в ЛС в контакте)

  6. Марина, ты не просто отличница, ты золотая медалистка! Попозже буду разбираться с этими премудростями. Спасибо!

    1. Лина, спасибо)) На самом деле, таких уроков в интернете можно найти уйму. Но надеюсь, что и мои труды пригодятся)))

    1. Хотя у меня иногда все-таки не получается на основном что-то сделать так, как на поддомене. В чем причина, я еще не разобралась… Есть к чему стремиться))

  7. Надо будет себе такую кнопку сделать и установить вверху, пока конкурс идет, а то его за статьями будет не видно потом. Приду к вам еще почитаю повнимательнее.

  8. Марина, прекрасный урок, подумайте над видеоуроками, мне кажется у вас неплохо получится.

    1. Спасибо, Алсу. Боюсь, что на видео-уроки у меня не хватит времени)) Тем более, что вроде не все так сложно)))
      Хотя… Подумаю над этим)) Только тема должна быть посерьезнее)

  9. Идея очень хорошая, такие кнопки могут где угодно пригодиться, и объясняете все понятно! Большое спасибо за помощь!

  10. Марина! Прошу помощи, сама разобраться не могу. Затупила окончательно, уже несколько человек мне пытались объяснить, но я не понимаю, как закрыть для индексации внешние ссылки с партнерки. Вот что я получила от тех.поддержки.
    «В задании Второй недели пункт 6 есть формула для закрытия ссылок в рекламных баннерах от индексации.

    Вот пример, «.
    Ничего не понимаю. Отсюда что-то надо убрать? или вставить? Караул!!!!!!

  11. Уже столько сделала на своем сайте с вашими подсказками, наверное пришла очередь и до такой кнопочки. Спасибо за помощь.

    1. Ирина, я очень рада, что помогла Вам))
      Вы мне тоже много всяких секретиков рассказываете))) За что Вам отдельное спасибо!!!

  12. Марина, случайно наткнулась на рубрику «чайник чайнику» — как много интересного тут 🙂 пошла дальше бродить по статьям 🙂

  13. Мариночка, а я не прошла мимо Машиного твита и вот я здесь — хочу как-нибудь разнообразить интерьер — ищу идеи. Спасибо!

  14. Я не смогла поставить картинку в сайтбар (: хотя все делала, как написано в статье — не знаю, где ошибочка вышла. А так хочется, чтоб была картинка в сайтбаре, которая ссылалась бы на статью

  15. Марина, картинка не загружается, но в сайдбаре стоит. А когда я нажимаю на нее, то мне пишут, что извините, по вашему запросу ничего не найдено… что делать?

    1. если еще актуально, пришли мне адрес картинки и адрес статьи, попробую понять в чем дело

  16. ура, наконец-то добралась и сделала. Правда у меня немного иначе получилось, но смысл этот. Спасибо большущее!!!

  17. Итак, наша задача вывести на странице сайта изображения иконок соц.сетей и сделать их активными ссылками на одноименные аккаунты. Желательно, чтобы эти ссылки не уводили посетителей с нашего блога, то есть открывались в новой вкладке. Как открыть ссылку в новой вкладке и как сделать картинку ссылкой, читаем в  этом посте .

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

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

↓