Рубрики
Развернуть | Свернуть

Сидите в интернете? Получайте за это деньги прямо сейчас.

Как вставить фото на сайт

(посмотрите статью «Как войти в WordPress» и «Как разместить текст на сайте», возможно вам это пригодится)

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

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

(См. рис 1)

Как вставить фото на сайт

В открывшемся окне «Вставить медиафайл» нажмите ссылку «Загрузить файлы» (см. рис 2)

(рис 2)

Как вставить фото на сайт

В следующем окне нажмите кнопку «Выберите файлы» (см. рис. 3)

(см. рис. 3)

Как вставить фото на сайт

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

После этого нажмите кнопку «Открыть», которая располагается в правом нижнем углу дополнительного окна (см. рис. 4)

(см. рис. 4)

Как вставить фото на сайт

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

— в «Заголовок» и  «В атрибут alt «— введите название вашей статьи.

— в «Описание» — напечатайте одним предложением о чем ваша статья. В тексте предложения должен присутствовать заголовок статьи (см. рис. 5).

Затем нажмите кнопку «Вставить в страницу». Если вы пишите текст не в «Страницу», а в «Запись», то у вас будет кнопка «Вставить в запись» — нажмите eё.

(рис. 5)

Как вставить фото на сайт

Фотография появится в том месте куда вы перед этим поставили курсор. Изначально фотография загрузится не в том размере, который будет оптимально смотреться на станице сайта (см. рис 6). Но это легко исправимо.

(рис. 6)

Как вставить фото на сайт

Чтобы редактировать изображение, наведите на него курсор и нажмите левой кнопкой мыши 1 раз. Изображение покроется синим фоном, затем нажмите на изображение в верхнем левом углу (см. рис.7)

(рис. 7) 

Как вставить фото на сайт

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

— в строку «Заголовок» введите заголовок вашей статьи;

— в строку «Атрибут alt» — также введите заголовок вашей статьи;

Затем выберите расположение вашей картинки на сайте: «Слева», «Справа», «По центру» или «Нет».

После того, как введете всю необходимую информацию нажмите вкладку «Дополнительно» в верхней строке дополнительного окна»

(рис 8)

Как вставить фото на сайт

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

В активном квадратике «Открывать в новой вкладке» поставьте галочку. Если нажать на фото непосредственно на сайте, то оно откроется в новом окне (см. рис. 9).

(рис 9)

Как вставить фото на сайт

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

(рис 10)

Как вставить фото на сайт

Фото вставлено в статью и корректно выглядит на сайте (см. рис 11)

(рис 11)

Как вставить фото на сайт

Если фотографию необходимо резместить не по середине, а справа или слева, (см. рис 12) то действуйте следующим порядком.

(рис 12)

Как вставить фото на сайт

Кликните на фотографию и войдите  панель редактирования. Здесь выберите «Выравнивание» «Слева» (см. рис 13)

(рис 13)

Как вставить фото на сайт

Заполните все необходимые данные аналогичным порядком и нажмите кнопку «Обновить» (см. рис 14)

(рис 14)

Как вставить фото на сайт

После того как опубликуете статью, фото на сайте будет выглядеть как показано на рисунке 15.

(рис 15)

Как вставить фото на сайт

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

Читайте статью на этом сайте

«ЗДЕСЬ ТОЖЕ ИНТЕРЕСНО»

6 комментариев на “Как вставить фото на сайт”

  • Мне необходимо разместить фото слева на право: в режиме редактирования они выстраиваются, в режиме просмотра — они остаются на своем месте, но стоит мне нажать ОБНОВЛЕНИЕ — все фото выстраиваются слева, с верху вниз, оставляя пустоту с права… Посоветуйте, что я не так делаю(((

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

  • Anna:

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

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

  • Наталья:

    Прекрасная статья

  • Огромная благодарность Андрею, автору статьи, за хорошее изложение материала! Подробно, просто и грамотно. Буду рекомендовать.

Введи свой email и получай новые статьи на почту:

Свежие записи