Главная » Управление сайтом » Управление Wordpress » Как сделать кликабельной картинку в визуальном редакторе

Как сделать кликабельной картинку в визуальном редакторе

как сделать кликабельную картинку

В своей мини-книге «HTML за 30 минут» я, в числе прочего, даю формулу, по которой можно сделать картинку, размещаемую в статье (посте), кликабельной. То есть, картинка становится ссылкой, и при нажатии на нее посетитель попадает на другую страницу (другой сайт).

Это бывает нужно, если вы размещаете какую-либо рекламу, а у вас ссылка отдельно, картинка отдельно, то есть, нет готового партнерского кода. Или вы хотите скучные ссылки (например, «скачать», «получить» и т.д.) заменить красивыми кнопками. Или.. Причин сделать картинку ссылкой может быть сколько угодно. А вот можно ли сделать кликабельной картинку в визуальном редакторе WordPress?

Да, запросто!



Для этого есть целых 2 способа.

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

как сделать кликабельную картинку1

Для того, чтобы лучше смотрелось, располагаю ее по центру (это не обязательно, и зависит от того, в каком виде вы подаете материал).

выравнивание текста по центру

Затем, обычным путем загружаете картинку. А вот, в ее настройках есть графа «Ссылка»:

вставить ссылку

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

кликабельная кнопка

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

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

способы сделать картинку кликабельной

Если нажать на значок, прошу прощения за тавтологию, с изображением картинки, то откроется окно с настройками, где вы сможете вставить ссылку так же, как описано выше (не забыть сохранить изменения). Но можно сделать и по-другому.

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

вставить ссылку2

Сюда вводите свою ссылку, если нужно – описание, и нажимаете «Обновить».

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







Управление Wordpress
Понравился материал? Поделитесь с друзьями в социальных сетях, нажимайте на кнопочки!

10 комментариев

  • Алексей

    О, про это я ещё не читал и не знал как сделать картинку кликабельной. Спасибо. Действительно очень просто…

    Ответить
  • Алексей

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

    Ответить
  • Надия

    Здравствуйте, Светлана! Я как то читала на вашем сайте, как переименовать ссылки на страницы или записи. То есть, чтобы не циферки красовались, а было название записи, но латинскими буквами. Не могу найти эту статью, вроде бы уже все пересмотрела, где нужно было…

    Ответить
    • Светлана Канаева

      Эта статья называется «Установка плагинов». Находится она в разделе «Управление WordPress». Там идет речь об установке плагина транслитерации Rus-To-Lat. Только эта информация хоть и не устаревшая, но… Дело в том, что Rus-To-Lat давно не обновляется (и обновляться не будет), поэтому есть риск, что в один прекрасный момент он перестанет работать с новой версией Ворпдресс.
      Мой Вам добрый совет: просто установите и активируйте плагин Cyr-To-Lat. Все тоже самое, но за состоянием плагина следят, и при необходимости выпускают для него обновления. А буковки сами после активации плагина станут латинскими.

      Ответить
  • Надия

    Светлана, а что вы скажете насчет таких плагинов как 1.WordPress DataBase Baskup — для восстановления сайта, 2.Pade Navi — переход на страницы, 3.Post View — следить за просмотрами. Стоит ли их устанавливать?

    Ответить
    • Светлана Канаева

      1. WordPress DataBase я пробовала устанавливать на своем сайте, мне не понравилось. Фигова куча настроек, причем, не очевидно, что нужно сделать. Резервные копии я делаю в ручную, это занимает от силы пару минут. О том, что еще, кроме резервной копии нужно сохранить, я рассказывала в статье «Переустановка WordPress» (раздел «Установка WordPress»). И в этом плагин не поможет.
      2. Постраничная навигация очень важна, спорить не буду. Но сейчас большинство тем (шаблонов) поддерживают ее и так. В крайнем случае это можно реализовать и без плагина.
      3. Плагин WP-PostViews стоит на всех моих блогах. На мой взгляд он очень полезен тем, что сразу показывает, какие темы пользуются наибольшей популярностью, а это помогает понять, в каком направлении лучше двигаться дальше.
      Кстати, давно хотела сказать: не очень хорошо, что некоторые тексты на Вашем сайте целиком выделены жирным шрифтом. Поисковики этого очень не любят.

      Ответить
      • Надия

        Светлана, спасибо за подробный ответ, а также за нужный совет, об этом я не знала, буду исправлять. А цвет, и размер шрифта не влияют на поисковики?

        Ответить
        • Светлана Канаева

          Тексты — это то, на основе чего поисковые машины определяют релевантность той или иной темы поисковому запросу. Поэтому все, что касается текстов, на поисковики очень даже влияет. И любое выделение, будь то цвет, размер, полужирное, курсивное, подчеркнутое (перечеркнутое) начертание — учитывается. Очень крупный шрифт использовать не стоит. По моим наблюдениям 15-и пунктов вполне достаточно. А все средства выделения желательно использовать только для действительно важных частей текста, на которые хотите обратить внимание пользователей. Еще, говорят, очень хорошо выделить ключевую фразу точного вхождения в начале текста. В идеале — заключить в теги strong, но если используете только визуальный редактор, можно просто жирным.

          Ответить
  • Надия

    Спасибо, Светлана! С вашей помощью учусь элементарным, но важным вещам.

    Ответить
  • Андрей

    Спасибо! Пригодится, хоть и не чато использую WordPress. В заметки однозначно.

    Ответить

Ваш email не будет опубликован. Обязательные поля отмечены *
Имя *
Email *
Сайт
Ваш комментарий
;-) :| :x :twisted: :smile: :shock: :sad: :roll: :razz: :oops: :o :mrgreen: :lol: :idea: :grin: :evil: :cry: :cool: :arrow: :???: :?: :!: