4.4. Вставляем картинку в текст заметки в WordPress


Для того, чтобы вставить картинку в текст, нам нужно открыть «Записи» --> «Редактировать», если у Вас текст Вашей статьи (записи) уже закрыт.

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

В открывшемся окне с визуальном редактором в «Настройках экрана» в строке «Количестве колонок» выбираете «1». Далее лучше всего перейти в полноэкранный режим:

Вид экрана монитора изменится и станет гораздо удобнее вставлять картинки:

Предположим, что нам надо вставить картинку туда, куда показывает стрелка. Кликнем на нужное место курсором (это обязательно).

Нам понадобится блок кнопок «Загрузить / Вставить» (выделен прямоугольником). Посмотрите на предыдущем скриншоте, где он располагается при обычном экране монитора.

Нам потребуется самая левая кнопка «Вставить картинку» (такая подпись появляется при наведении на нее курсора). (напоминаю, что здесь описаны кнопки и Ваши действия при работе с WP 2.9.2. У других версий WordPress 3.x.x. внешний вид кнопок бругой, но действия все те же самые)

Нажимаем на нее и на фоне темного экрана появляется новое окно:

Вверху расположены вкладки «С компьютера», «С адреса (URL)», «Медиа библиотека». Они указывают  на источник картинок. Из Интернета мы брать не будем, в медиабиблиотеке у нас пока ничего нет, остается наш компьютер в качестве источника медиафайлов (картинок).

Нажимаете «Обзор», открывается окно «Выбор файла для загрузки» с папкой (Мои рисунки), где мы храним наши файлы с картинками.

Кликаем по изображению выбранной картинки и сразу же в окошке с выбранным файлом появляется его исходный адрес:

Чтобы проверить, надо кликнуть в окошке и, перемещая курсор клавишами клавиатуры «<--» и "-->», прочитать весь текст. После чего нажать кнопку «Загрузить файл».

Теперь опуститесь вниз окна «Добавить медиафайлы…» и нажимаете «Вставить в запись»:

Во-первых, обратите внимание на URL ссылки. Нас интересует, где у нас будет располагаться картинка – в директории wp-content в папке uploads. В ней автоматически создаются вложенные папки – по названию года и месяца. Откройте Total Commander и посмотрите.

И еще. Обратите еще раз самое пристальное внимание на URL ссылки. Если у Вас будет URL ссылки что-нибудь вроде такого: http://www.novichkoff.ru/ustanavlivaem-tulbar-google-i-knopku-wikipedia.html/pic-16-4, то это будет означать, что это еще одна страница и выглядеть она будет вот так:

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

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

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

Теперь переходим к разделу админки «Опубликовать». Нажимаем там кнопку «Обновить». Переходим на сайт и смотрим, что у нас получилось:

Прямо скажем, получилась чистая похабщина. Причина? Мы промахнулись с размерами картинки и она залезла на правый сайдбар. Надо будет это устранить.

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

Перейти к следующему уроку.

...Сообщите об этой статье своим друзьям:
Благодарю Вас!
А еще Вы можете подписаться на рассылку и первым получать самые свежие статьи.

Удачи!

Автор: Сергей Ваулин

Похожие записи по этой теме:

41 thoughts on “4.4. Вставляем картинку в текст заметки в WordPress

  1. Виктор

    Доброго времени суток! Такой вопрос, как им образом можно вставить и документа word информацию вместе с картинками и формулами, коих в этом документе много и нецелесообразно вставлять по одному через загрузку?

    Reply
  2. Андрей

    Добрый день! Устанавливал себе плагин wppage и возникла необходимость установить несколько сопутствующих плагинов.

    Теперь возникла проблема — при нажатии на кнопку вставить изображение нет возможности выбрать «загрузка с компьютера», загрузка с сайта, настроить изображение.

    Отключал все плагины — не помогает :(

    Могу сбросить скриншоты, если непонятно написал

    Reply
    1. admin Post author

      Андрей, а какая версия WordPress установлена? Такая проблеме есть у версий 3.5.х

      Reply
  3. Татьяна

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

    Reply
    1. admin Post author

      Татьяна, по плагину Broken Link Checker ничего полезного подсказать не могу

      Reply
      1. Татьяна

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

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

        Reply
  4. Тамара

    Здравствуйте, прочитала вашу статью и нашла у вас обозначение своей проблемы с картинками. У меня картинки образуют новую запись без текста. То есть есть запись с url и есть отдельная ссылка на картинку в этой записи без текста с другим url. Прошу Вас дать ссылку на публикацию, как от этого избавиться. Благодарю!

    Reply
    1. admin Post author

      Тамара, не знаю как это сделать. Поищите в Интернете

      Reply
  5. Irina

    Подскажите, пожалуйста. Когда вставляю картинку в формате png с с прозрачным фоном иногда она встает как есть, а иногда появляется белый фон. Пробовала делать по разному выравнивание и обтекание — мне кажется, ту дело в этом, но так и не поняла, когда фон подкладывается, а когда картинка встает как есть. На разных страницах так и есть — где-то с подложенным белым фоном, а где-то фона нет, а только изображение...

    Reply
    1. admin Post author

      Irina, нет идей :( Никогда с таким не сталкивался

      Reply
  6. Ф

    «Владимир, если Вы пишите о сайте, который указали, то, скорее всего, дело в сам...»

    Ага, вы нас слышыŭте, бандерлоги?

    Reply
  7. Сергей

    У меня вообще не устанавливается картинка, появляется значок, что картинка повреждена и всё...

    Reply
    1. admin Post author

      Дождитесь следующей версии WordPress или вставляйте картинку с URL, а не с компьютера

      Reply
  8. Владимир

    При установке картинки, не могу зафиксировать её. Т.е. после набора текста картинка уходит вниз. Картинку фиксировал в разных местах, результата нет.

    Reply
    1. admin Post author

      Владимир, если Вы пишите о сайте, который указали, то, скорее всего, дело в самом WP 3.5 -работает с картинками он просто безобразно. Надо ждать новой версии или сразу перейти на WP 3.4.2.

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

      Возможно, дело в шаблоне (теме), попробуйте на дефолтном шаблоне.

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

      Reply
        1. admin Post author

          Не с удаления, а с дезактивации плагина

          Reply
  9. Вкусная дырка от бублика

    admin, это не мой сайт. У Вас в строке указано заполнить почту и сайт, вот я и написала первый из любимых сайтов. Да... Я такая... Туповатая немного )))

    Reply
    1. admin Post author

      Вкусная дырка от бублика, спасибо и Вам. Кстати, у Вас прекрасный сайт. И может быть полезен вот этот плагин для увеличения размера картинок на сайте — www.novichkoff.ru/kak-uve... -lightbox-2.html

      Reply
  10. Елена

    Здравствуйте, Сергей!

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

    Reply
    1. admin Post author

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

      Reply
  11. Анна

    Здравствуйте.

    Подскажите пожалуйста: у меня картинки вроде как вставляются в редакторе, но потом нажимаю «Обновить», картинка исчезает и на сайте остается пустое место:(

    Reply
    1. admin Post author

      Анна, я не понял: зачем Вы нажимаете на «Обновить»?

      Reply
      1. Anna

        Нажимаем кнопку «Обновить» в разделе «Опубликовать». Смотрим на сайте, что у нас получилось

        Reply
        1. admin Post author

          Алла, спасибо за подсказку. Действительно получилось как-то корявенько. Сейчас исправлю.

          Reply
  12. Nina

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

    Reply
    1. admin Post author

      Нина, способ один: редактировать файл CSS

      Reply
  13. Nina

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

    Reply
    1. admin Post author

      Нина, для того, чтобы картинка установилась, например, по центру, надо после установки курсора в нужной строке задать ему положение «по центру», это задается в визуальном редакторе кнопкой «По Центру» — выглядит так же, как и Word'е, или сочетанием клавиш Alt+Shift+C. И только после этого надо определять местоположение картинки в окне редактирования (установки) медиафайлов. Почему в некоторых темах так происходит, я не знаю.

      Reply
  14. Андрей

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

    Reply
    1. admin Post author

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

      Напишите подробно мне на e-mail (адрес в «Контактах»)

      Reply
  15. Oleg

    А вот pic.16 выдала возможность загрузить картинки не с компьютера и не из стандартной медиабиблиотеки, а из Галереи (которых ажно 9ть) :-)

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

    Reply
    1. admin Post author

      Олег, залить картинки по FTP Вы можете в любую папку. Создайте, например, папку images и там храните.Вам только надо будет указывать путь к каждой картинке. Кстати, эту папку не обязательно держать там же где и Ваш сайт, можете и на другом хостинге. Некоторые так делают. Можете держать картинки на сервисах типа Flikr, так тоже делают. А вообще по галереям я не специалист — никогда их не делал. Может, Вам лучше обратиться к тем вебмастерам, которые занимаются этим?

      Reply
      1. Слава

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

        Reply

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

Your email address will not be published. Required fields are marked *