Как вставить картинку на сайт WordPress

Как вставить картинку на сайт WordPressВ сегодняшнем уроке по созданию сайта мы рассмотрим, как вставить картинку на сайт WordPress, а именно – в запись на блоге.

Мы уже изучили 2 части редактора WordPress: визуальный редактор и HTML редактор. Этой статьей я продолжаю тему оформления записей блога.

В админ панели нажимаем на пункт меню «Записи», затем «Добавить запись». Приходим на страницу добавления записи.

вставить картинку на сайт

Отмеченная на скриншоте кнопка – это кнопка добавления медиафайла (им может быть изображение, видео или аудио-файл, а также любой другой файл).

Я обычно поступаю так: нахожу в тексте место, где нужно вставить картинку и нажимаю на эту кнопку. Открывается окно вставки файла, в котором мы видим изначально 3 варианта вставки: с компьютера, с адреса (URL) и из медиа библиотеки.

Рассмотрим каждый из них.

Как вставить картинку на сайт с компьютера:

вставить картинку на сайт

Жмем на «Выберите файлы» (или их можно перетащить из папки) и в этом же окне, ниже, появятся поля для работы с выбранным файлом. Если нажать «Спрятать», то эти поля пропадут, нажав «Показать» мы вызовем их снова.

вставить картину

Выбранное изображение можно отредактировать. Я не буду рассказывать, какие тут возможности редактирования, в этом разберетесь сами. После редактирования не забываем сохранить. Если ничего не хотим редактировать, то жмем «Отмена».

вставить картинку на сайт

Идем по окошку ниже. Здесь нам нужно заполнить данные этого изображения:

Как вставить картинку на сайт WordPress

Заголовок: вписываем ключевое слово или фразу. Некоторые сеошники советуют ключевое слово написать в 2-хвариантах: латиницей и кириллицей, разделенных знаком подчеркивания (например: redactor_редактор). Заголовок – это то, что будет помещено в атрибут  title.

Альтернативный текст: этот текст увидит читатель, у которого в браузере отключен показ картинок. Здесь тоже рекомендуется использовать ключевое слово, можно употребить его во фразе (например: редактор текста). То, что мы напишем здесь, попадет в атрибут alt.

Подпись заполняем, если хотим, чтобы под картинкой стояла подпись.

Описание: коротко, с ключевыми словами, описание картинки (не надо описывать картинку подробно, напишем одну фразу с использованием ключевиков).

URL ссылки: здесь по умолчанию стоит адрес папки на хостинге, в которой хранится это изображение. Не вижу в этом никакой пользы, поэтому я щелкаю на «Нет» под этим полем, и адрес удаляется.

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

Выравнивание: выбираем, где должно стоять изображение относительно текста.

Размер: выбираем размер изображения.

Нажимаем «Вставить в запись». Если нажать на «Сохранить все изменения», то файл уйдет в медиа библиотеку.

Редактор WordPress предоставляет возможность загрузить сразу несколько файлов, тогда с ними по очереди нужно проделать все описанное, а чтобы открылись все нужные поля, нажимать около названия кнопку «Показать». И в этом случае, после заполнения всех полей, нужно нажимать на «Сохранить все изменения». Тогда все файлы запомнятся в медиа библиотеке, и добавлять их мы будем оттуда. Но об этом чуть позже.

Как вставить картинку на сайт с адреса URL

Как вставить картинку на сайт WordPress

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

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

Как вставить картинку на сайт WordPress

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

Как вставить картинку из галереи или вставить галерею

Как вставить картинку на сайт WordPress

В процессе работы над статьей, в меню появился еще один пункт «Галерея». Сюда помещены те медиафайлы, которые мы добавляли для этой статьи. Можно из них выбирать по одному, заполнять поля, если они не заполнены, и вставлять в отведенное место в статье. А можно вставить их все сразу в виде галереи. Но над этой галереей придется еще хорошо поработать, чтобы она приняла приличный вид. Думаю, что это нам не пригодится, тем более что есть много других возможностей для вставки галереи на сайт.

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

Сегодня мы познакомились с тем, как вставить картинку на сайт WordPress. А в заключение статьи забавный ролик на английском, где все понятно без перевода:

Комментарии

  • Татьяна пишет:

    Эта информация очень полезна для новичков!

  • ирина пишет:

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

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

  • Татьяна пишет:

    Здравствуйте, Нина. Прочитала, все правильно. Но у меня уже крыша едет…))) У меня стоит плагин Broken Link Checker, и он постоянно показывает битые ссылки, если я делаю картинку. А если это неправильные ссылки, то на это ведь поисковики очень сердятся… По всякому уже ссылки там ставила – и каждый раз одно и то же…. может подскажете в чем дело? Конкретно – все кнопки опробовала, и поле ссылки оставляла пустым…

    • Татьяна, я вообще ссылки на картинки не ставлю. Но если иногда бывает нужно… Я не могу подсказать, пока не вижу. Сделайте какую-нибудь ссылку, которую плагин посчитает битой, и тогда напишите мне конкретно.
      Но бывает, что плагины работают некорректно: либо друг с другом конфликтуют, либо с темой. Я не ставлю лишних плагинов, а на битые ссылки проверяю в онлайн-сервисах.

  • Татьяна пишет:

    Ой, вставила ссылку в поисковик, так вообще запрещено написал хост. И сайт перестал показываться. То ли совпадение, то ли ссылка такая… Пришлось туда обращаться, чтобы помогли. Помогли, но наверно лучше отключить плагин. Ведь вы живете без него же, да? И ничего? Спасибо вам за исчерпывающую информацию. Вообще, у вас очень полезная информация на сайте. А ссылку не пришлю, вдруг у вас проблема? Покусаете же? ))) Заходите, у меня тоже такой плагин внизу комменариев для ссылок. Можете проверить, работает ли?

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

  • Татьяна пишет:

    Все, получилось исправить проблему! Перестали битые ссылки появляться!

    Я файлы для библиотеки подписываю теперь по английски и все ОК! … А ларчик просто открывался! )))

    • Татьяна, давать названия картинкам на латинице – это и для оптимизации хорошо. Так что, решение Вы приняли верное со всех точек зрения

    • Ольга пишет:

      Я тоже раньше называла изображения по-русски. И Broken Link Checker постоянно ругался, пока его не отключила. А виноват был не он.

      • Ольга, а кто был виноват? Вы бы озвучили для других. У меня нет этого плагина, поэтому никто не ругался на русские названия :)
        Правда, сейчас я даю названия на латинице.

  • Ольга пишет:

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

    • Оля, да я поняла, что Вы имели в виду. Но все-таки плагин был виноват: он ведь работал неправильно, раз интерпретировал русские названия как битые ссылки.

      • Ольга пишет:

        Я читала, что Яндекс и Гугл также не индексируют картинки с русскими буквами в названии. Весь интернет, плагины, сервисы – все настроено под латиницу.

  • Я картинки стала недавно подписывать. И то только на русском. Всего столько надо делать. что голова кругом идет. загружаю фотографии с компьютера . а если картинки из интернета. едавно узнала про Пикаса, как загружать на этот сервис, прописывать название на латинице, а потом вставлять ссылку на блог.

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

  • Оля, это не дубли, это просто лишний занятый объем памяти на сервере. Пока сайт небольшой или если картинок мало, это некритично. Есть плагины, удаляющие неиспользуемые картинки. Но у них один большой недостаток: они не учитывают миниатюры, которые выводятся плагином для похожих постов, и их тоже удаляют. Я как-то воспользовалась одним таким плагином. Он хоть и дает перечень неиспользуемых, на его взгляд, картинок и можно отметить те, которые удалять не надо. Но очень легко что-то пропустить или перепутать. В общем, после его работы некоторые миниатюры пришлось восстанавливать, причем это всплывало довольно долго еще. Поэтому лучше удалять ручками или не удалять совсем :)

Оставить комментарий

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

Вы можете использовать это HTMLтеги и атрибуты: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code class="" title="" data-url=""> <del datetime=""> <em> <i> <q cite=""> <strike> <strong> <pre class="" title="" data-url=""> <span class="" title="" data-url="">