Как вставить картинки в запись на CMS WordPress?

Серега - Понедельник, 6 Май 2013 06:57

Для начала на компьютере Вам необходимо создать папку, в которую вы будите сохранять картинки или фото. Картинки по смыслу текста можно найти в Яндексе  и в Google.  После их нужно будет обработать любым графическим редактором, например: ACDSee Pro 5ACDSee Pro 5.0 Rus — профессиональная программа для работы с цифровыми фотографиями, которая обладает расширенным набором функций, рассчитанных на профессиональных фотографов. Поддерживает более 100 форматов графических файлов, позволяет работать с RAW-изображениями..  Один из моих любимых и простых графических редакторов. Подходит для быстрой коррекции изображения и придаче ему уникальности, а это тоже важно, что бы ваша картинка или фотка была уникальна, хотя бы немножко.

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

Добавить картинку в запись

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

Выбор фото для текста

Попадаем с вами уже в окно корректировки изображения, перед тем как вставить его в запись. Тут можно выбрать размер изображения —  3 варианта (Стандарт, среднее и миниатюра) лучше выбирать стандарт и уже в записи его настраивать. Так же здесь можно прописать теги и выбрать позиция изображения в тексте, но лучше после загрузки сразу нажимать на кнопку в правом нижнем углу «Вставить в запись» и уже в записи с помощью текстового редактора размещать и изменять размер отображаемого изображения в тексте. (см. на фото)

Выставляем предварительные параметры изображения

После того как Вы нажали на кнопку «Вставить в запись» изображение появиться в том месте записи где Вы оставили мигающий курсор.  Для изменения размера изображения и смены его позиции относительно текста нужно правой клавишей мыши нажать  на изображение, тем самым выделив его , потом нажать на иконку текстового редактора в виде зеленого дерева «Вставить/Изменить изображение”. После нажатия появляется окно   в котором Вы  прописываете описание и заголовок изображения, как правило, текст одинаковый, и в разделе «положение»  задаете размер отображаемого изображения в тексте и его позицию, так же можно задать горизонтальный и вертикальный отступ от текста, добавить класс стилей – но это не обязательно. После этих настроек вы нажимаете на кнопку «Обновить» и уже исправленное изображение в тексте,  подобную операцию проделываем и с другими изображениями. (см. на фото)

Начало коррекции изображения
Окно корректировки изображениея "Общее" Окно настроек расположения изображения

После того как Вы разместили все картинки в тексте и Вас все устраивает, лучше всего для Вашей записи добавить миниатюру, а ее можно добавить в произвольных полях расположенных внизу, т.е. под текстом.  Для этого нужно выбрать имя «thumb» и в поле «Значение» вставить адрес загруженного изображения без домена, начиная с wp-…. (на некоторых хостингах необходимо прописывать весь путь изображения, включая доменное имя). (см. на фото)

Добавление миниатюры

Адрес изображения Вы найдете в строке ссылка над кнопкой «Вставить в запись» как указано на этом фото.  

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

Что получилось в итоге, Вы можете просмотреть  непосредственно на сайте в статье «Чем нужно улучшать своё сообщество ВКонтакте?».


Комментарии (15)

  1. CommentsTraveler   |  Вторник, 07 Май 2013 at 15:05

    За обзор спасибо. Очень толково все написано. Конечно, на первый взгляд вставить картинку просто, но для многих новичков, да и для блоггеров со стажем, это иногда вызывает затруднения. Но с такой инструкцией трудностей не возникнет, так как скрины объясняют что и как сделать, чтобы правильно разместить картинку на сайте WP.

  2. CommentsИскандер   |  Среда, 08 Май 2013 at 22:33

    Очень подробный и понятный мануал. Даже новичок после прочтения поймет, как правильно вставлять картинки и при желании их корректировать.

  3. CommentsМихаил   |  Пятница, 10 Май 2013 at 15:29

    Удивительно, но редактор прям один в один, как на Joomla, как раз сейчас пишу статью «Оптимизация изображений», но только на примере своей любимой CMS Joomla. Для ВП мануал подробнейший, благодарю!

  4. CommentsСерега   |  Пятница, 10 Май 2013 at 16:00

    Этот редактор так же называется как и на Joomla — TinyMCE Advanced

  5. CommentsМихаил   |  Суббота, 11 Май 2013 at 17:00

    Без картинок сайт выглядит как газета. Я очень люблю когда статьи с изображениями — и красиво и информация усваивается лучше.

  6. Commentsastersolar   |  Суббота, 11 Май 2013 at 17:03

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

  7. CommentsСерега   |  Суббота, 11 Май 2013 at 17:30

    Это точно, когда есть описание с картинками информация проще усваивается.

  8. Commentsalex_zir   |  Суббота, 11 Май 2013 at 22:34

    Картинки — это всегда полезно, но меня их публикация, если честно, напрягает. Делаю лишь для приличия и юзабилити. Обожаю сухие текстовые информационные сайты. Каждому своё..)

  9. Commentsalex_zir   |  Воскресенье, 23 Июнь 2013 at 21:27

    Интересно, а публикация скриншота картинки считается уникальной?

  10. CommentsСерега   |  Понедельник, 24 Июнь 2013 at 10:09

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

  11. CommentsАлександр   |  Вторник, 01 Октябрь 2013 at 16:23

    Полезная информация для начинающих. Я лично делаю все загрузки в вордпресс через Лив райтер так проще

  12. CommentsСерега   |  Вторник, 01 Октябрь 2013 at 17:50

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

  13. CommentsВладимир   |  Суббота, 02 Январь 2016 at 12:08

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

  14. CommentsВладимир   |  Суббота, 02 Январь 2016 at 13:18

    Чтобы выйти из положения при неработающей кнопке «Запись/вставка» пришлось вставить рисунок в галерею, посмотреть его расположение в WP, а затем написать текст вручную и так далее.

  15. CommentsСерега   |  Вторник, 02 Февраль 2016 at 08:50

    Владимир — установите плагин TinyMCE Advanced, сделайте нужные вам настройки и вставляйте картинки без всяких хлопот. А вообще вставка картинок как на страницы так и в записи сайта но CMS WordPress реализована довольно хорошо и ни каких проблем не должно возникать. Естественно, что с начало нужные картинки надо залить в корневую папку сайта нажав на кнопку «Добавить медиафайл» эта кнопка расположена в верхней части над полем когда вы создаете страницу или запись.

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






Подписаться

Рекомендую