Картинка рядом со ссылкой как на WikiPedia

ссылка как на википедииВ данной статье рассказано, каким образом отображать автоматически рядом с ссылкой в статье любую картинку, как это сделано на WikiPedia.org (блоки в конце любой статьи).

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

Прежде всего покажу что примерно мы будем делать, если еще не поняли:

как сделать картинку рядом с ссылкой

В блоке Примечание стрелки в конце ссылки. Сделаем аналогичное.

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

Как сделать ссылки со стрелками

Для начала сделаем заготовку подобной стрелки-картинки и закидываем нужного размера на хостинг. Размер примерно 16*16px. Если лень искать - качайте эту картинка-ссылка.

Далее необходимо определиться: ставить подобную стрелку будем по всему сайту, т.е. на каждой ссылке, или только на определенном блоке статьи. В любом случае понадобится определиться с названием класса куда будем подставлять нужный параметр CSS (об этом ниже).

Теперь предлагаю посмотреть видео-подкаст, в котором рассказано как определить имя класс стилей. Видео записано для другой статьи, но принцип тот же:

Скачать FireBug для своего браузера можно на официальной странице getfirebug.com.

Определились с именем класса и делаем вставку в файл стилей, который имеет расширение .css

.postssylka p a {
background: url("images/external.png") no-repeat scroll right center transparent;
padding: 0 20px 0 0;}

Настройки CSS проведены так, что если в теле статьи идет ссылка, то со смещением направо проставляется картинка external.png. Атрибуту background задано соответственно: путь до картинки, нет повтора, прокрутка вместе с фоном, выравнивание направо по центру и с прозрачным фоном. Не обязательно выставлять все эти параметры и в такой последовательности. Все зависит от дизайна сайта и ваших пожеланий.

Подробнее об атрибуте background читайте в качественном справочнике http://htmlbook.ru/css/background. Обратите внимание, что слева в справочнике еть другие пункты по теме.

Параметр padding сделал нужный отступ стрелки-картинки от текста: верх справа снизу слева. Сделать это нужно обязательно, т.к. картинка у нас идет задним фоном.

Пробуйте. Экспериментируйте. Если сразу не получилось, то могли напутать с названием класса, либо иерархией. Долгое время на данном сайте стояла подобная картинка, поэтому все работает. Я снял, т.к. сайт меняет понемногу дизайн на кардинально новый.http://blogun.ru/taskbbhbacg.html

Привет. Меня зовут Виталик и я автор этого блога, а так же Магазина WordPress https://wp-r.ru/.

Отблагодарить Z888279575784 R109400923968 или ЯД 41001651742138

Оказываю услуги по созданию и настройке сайтов на WordPress (верстка, натяжка).

Мои Контакты. Я в Twitter @mojWP. Смотри на Youtube. Читай RSS блога.

Опубликовано 30 комментариев
  1. Надежда (3 комм.) says:
    http://ydacha20011.ru

    Случайно попала к вам на сайт и открыла для себя просто клад знаний, буду изучать и учиться, если что-то не пойму, вас можно спрашивать? Чему-то я уже научилась (за 1,5 года-то), а что-то еще за пределами. Вот, например, не могу найти материал о том, как сделать текст в статьях крупнее, у меня очень мелкий. Может, у вас найду?

    • Виталий (1675 комм.) says:

      при помощи firebug найдите где поменять font-size для класса тела статьи

  2. Надежда (3 комм.) says:
    http://ydacha20011.ru

    Виталий, спасибо за ответ, но если честно, не поняла - мне бы попроще объяснить.

    • Виталий (1675 комм.) says:
      • 1. открываете у себя файл стилей style.css (он лежит на ftp) при помощи программы Notepad++.
      • 2. ищите строку 110 (она будет начинаться .PostContent p)
      • 3. меняете значение для font-size: 13px; (подставляете нужную цифру)
      • 4. сохраняете файл, закачиваете назад на фтп и смотрите в браузере (предварительно почистив его кеш)

      Сейчас все вопросы должны быть сняты)))

      • Надежда (3 комм.) says:
        http://ydacha20011.ru

        Спасибо, теперь понятнее, попробую сделать, если получится, отчитаюсь.

  3. Vel (6 комм.) says:
    http://www/2ristic.com/

    "Если лень искать - качайте эту картинка-ссылка" - че то не качается эта картинка...

    • Виталий (1675 комм.) says:

      правую клавишу мыши на картинке и "Сохранить Url"

  4. Vel (6 комм.) says:
    http://www/2ristic.com/

    Картинку нашел, все сделал, но ничего не отобразилось...кэш почистил...странно..

  5. Vel (6 комм.) says:
    http://www/2ristic.com/

    Все получилось, только к картинкам тоже почему то эта штучка добавляется, подскажите Виталий пожалуйста, как у фото убрать эти значки?

  6. Vel (6 комм.) says:
    http://www/2ristic.com/

    А также если в списках ссылки, то картинка не отображается.. Как добавить в ul и li такие картинки?

  7. Vel (6 комм.) says:
    http://www/2ristic.com/

    Сорри за много сообщений. Отчитуюсь. Чтобы были в списках ul и li такие же значки в ссылках, нужно вставить в CSS следующее:
    .entry p a {
    background: url("images/external.png") no-repeat scroll right center transparent;
    padding: 0 20px 0 0;}

    .entry ul a{
    background: url("images/external.png") no-repeat scroll right center transparent;
    padding: 0 20px 0 0;}

    .entry li a{
    background: url("images/external.png") no-repeat scroll right center transparent;
    padding: 0 20px 0 0;}

    Только, все же не получается с картинок и фото убрать значки. Кто знает, подскажите)))

    • Виталий (1675 комм.) says:

      ну, вот: сообщений много, но проблема решена)))

      относительно картинок. выставьте для

      .class a img {background:none;}

      и с параметрами нужными (это подсказка куда рыть под свой шаблон)

  8. Алексей (3 комм.) says:
    http://prostoguitar.ru/

    Виталий, здравствуйте! Помогите пожалуйста. Сайт перестал индексироваться полностью. В Г.Аналите и Я.Метрике висит такая вот ошибка: HTTP-статус: Внутренняя ошибка сервера (500) . И из-за нее как раз таки ни одна страница не может проиндексироваться. Писал платонам, отправили меня к хостеру. Хостер сказал, что помочь ни чем не может, т.к. ошибка 100% у меня. Менял шаблоны - не помогает. Грешу на какой то плагин, но вроде и с ними всегда все было нормально. Подскажите пожалуйста, как решить эту проблему?(( А то уже 3 недели сайта в индексе нету вообще(((

    • Виталий (1675 комм.) says:

      не имея возможности глянуть сайт изнутри, могу посоветовать глянуть файл .htaccess, т.к. 500 ошибка чаще всего из-за неправильно оформленного содержимого в нем

      • Алексей (3 комм.) says:
        http://prostoguitar.ru/

        Виталий, а если я Вам скину .htaccess сможете посмотреть пожалуйста?

  9. Александр Крылов (11 комм.) says:
    http://aleksandr-krylov.ru/

    Виталий, доброго времени!) Подскажите, пожалуйста, а увеличивается ли количество переходов по ссылкам, если добавлены вот эти картинки сбоку? По идее, должно, а как на практике?

    Повышается ли кликабельность ссылок?

    • Виталий (1675 комм.) says:
      http://mojWP.ru/

      Данные не приведу. Если знаете как сделать объективный подсчет, давайте попробуем провести исследование.
      Вы правы: "по идее должно". На практике все зависит что ждет человека по этой ссылке, и какой текст вокруг этой ссылки. А при помощи картинки мы лишь дополнительно акцентируем внимание.

      • Александр Крылов (11 комм.) says:
        http://aleksandr-krylov.ru/

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

        • Александр Крылов (11 комм.) says:
          http://aleksandr-krylov.ru/

          Поставил только что на одном проекте переливающуюся ссылку. Теперь можно смотреть на кликабельность.

          • Александр Крылов (11 комм.) says:
            http://aleksandr-krylov.ru/

            По результатам двух недель можно сказать, что кликабельность повысилась. Примерно с двух до четырёх процентов.

  10. Art_gud (6 комм.) says:
    http://therumdiary.ru

    Драсте. Решил добавить картинки в ссылки, но вот как-то не получается их убрать из под изображений в статьях. Не подскажите как это можно решить. .class a img {background:none;} - вот с этим немного не понятно. Спасибо)

    • Виталий (1675 комм.) says:
      http://mojWP.ru/

      правильно определите какому классу задать background:none и все получится.

      • Art_gud (6 комм.) says:
        http://therumdiary.ru

        Дело в том, что у меня получается, что на картинки в статьях идет тот же класс, что и на ссылки. И что мне с этим сделать, совершенно не понятно(

      • Art_gud (6 комм.) says:
        http://therumdiary.ru

        По логике вещей, мне нужно просто задать другой класс для ссылок-картинок или для самих ссылок, но как это сделать? Это ж наверное нужно лезть в ВП-файлы, а я там совсем не шарю, только в темовских.

        • Виталий (1675 комм.) says:
          http://mojWP.ru/

          все делается только в шаблоне. Движок тут не причем.

          • Art_gud (6 комм.) says:
            http://therumdiary.ru

            Не уверен. Ведь статьи выводятся через функцию самого ВП, которая просто вставляется в single.php. Класс у ссылок в статьях и у ссылок картинки один и тот же. Как его изменить или найти другой способ я пока не нашел. Была мысль сделать картинки совсем не кликабельными, но в ручную это делать не охота (статей уже не мало), а по другому как это сделать снова-таки не нашел. В общем пока оставил так. Если все же есть у вас решение, буду примного благодарен. Блог указан графе сайта. Спасибо!

          • Виталий (1675 комм.) says:
            http://mojWP.ru/

            Контакты указаны на сайте. Спасибо.

  11. Максим (2 комм.) says:
    http://keisideas.ru/

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

    • Виталий (1675 комм.) says:
      http://mojWP.ru/

      Добрый.
      На сайте есть страница Контакты и страница Услуги. Комментарии не лучший способ связи для решения рабочих вопросов.

  12. Владимир (3 комм.) says:
    http://viaestvita.org

    Можно как-то отделить ссылки внутренние и внешние?

Не держи в себе. Выскажись.

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

© 2011-2016 | mojwp.ru | Копирование материала разрешено только с письменного согласия
WordPress: 14.25MB | MySQL:101 | 0,574sec
Премиальные плагины для CMS WordPress
Магазин WordPress WP-R.ru
Спасибо, не показывайте мне эту штуку больше!
Смотри мои обучающие видео на YouTube
Иван только что купил плагин ELT
https://wp-r.ru/plaginy/elt.html