Как редактировать картинку в редакторе WordPress

Продолжаем тему создания блога на WordPress. Сегодня мы разберемся, как редактировать картинку средствами редактора WordPress.

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

Если Вы уже вышли из режима редактирования этой статьи, тогда заходите в админ панель, раздел «Записи» → «Все записи».

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

Откроется статья в редакторе. Найдите ту картинку, которую нужно редактировать. Щелкните в ее левом верхнем углу. Появятся две кнопочки.

Редактировать какртинку

Если навести на них курсор, то появятся подсказки:

— первая кнопка — «Редактировать изображение»

— вторая кнопка — «Удалить изображение».

Щелкните по первой. Всплывет окно для редактирования изображения:

редактировать картинку

Вы видите две вкладки.

Во вкладке «Редактировать изображение» можно:

  • уменьшить или увеличить  изображение (в %)
  • изменить расположение
  • заполнить поля, если Вы их не заполняли, или решили что-то поменять.

Если больше ничего делать не нужно, то жмите кнопку «Обновление».

Но мы рассмотрим еще вторую вкладку «Расширенные настройки».

редактирование картинки

Что Вы здесь видите и можете сделать:

  • адрес картинки, его поменять нельзя, да и незачем;
  • изменить размеры в пикселях или установить оригинальный размер (учтите, что если Вы меняете один размер, то надо пропорционально изменить и второй, иначе нарушатся пропорции картинки);
  • класс CSS  — нужен для тех, кто будет писать код для оформления внешнего вида картинки в файле style.css (или в пользовательском файле стилей);
  • стили (далее я покажу на примере, что это такое):

как отредактировать изображение

  • рамка, чтобы фон изображения не сливался с фоном статьи. Нужно поставить толщину рамки в пикселях (только число). Я обычно ставлю 1, чтобы рамка была тоненькая. Если Вы хотите сделать ее потолще, то ставьте цифру побольше. Обратите внимание, что в строке стилей появились какие-то записи. Первая из них: border: 1px solid black; означает, что будет нарисована рамка толщиной 1 пиксел, одной сплошной линией и, по умолчанию, черным цветом. Чтобы поменять цвет, Вам нужно иметь его код (можно воспользоваться, например, программой Colormania).
  • отступы (вертикальный и горизонтальный) нужны для того, чтобы между изображением и текстом было некоторое расстояние. Отступ задается в пикселях. Я ставлю обычно 10. В стилях отступы задаются кодом margin, а добавление к нему -top, -right, -bottom, -left означают, соответственно, отступ сверху, справа, снизу и слева. Вы видите, что в стилях прописались два отступа: сверху и снизу (всегда симметрично). Если Вам нужен только один из них, тогда второй можно спокойно удалить. 10рх означают величину отступа, думаю, Вы это и сами поняли.
  • расширенные настройки ссылки можно задать (а можно и не задавать), если Вы картинку сделали ссылкой. Если же Вы выбрали «Нет», тогда эти поля заполнять не нужно.

После окончания редактирования нажимайте «Обновление» и Ваша картинка приобретет уже новый вид.

Если же редактировать Вы раздумали, тогда жмите «Отмена».

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

А Вам для развлечения и расслабления  — видеоролик:

 

Как редактировать картинку в редакторе WordPress: 14 комментариев

  • 20 июня 2013 в 23:27
    Permalink

    Большое спасибо за статью. Как всегда все понятно и очень доходчиво написано даже для таких «чайников», как я. А будет ли статья, посвященная защите изображений? Какие плагины лучше загружать.? Для многих авторов это очень важно. Еще раз, большое спасибо.

    • 2 июля 2013 в 17:44
      Permalink

      Лена, извините, как-то Ваш комментарий сначала проскочил мимо моего внимания, а потом я решила написать об этом, а потом уже Вам ответить. Защитить на 100% ничего невозможно, всегда найдутся умельцы, которые обойдут любую защиту. Наложение водяного знака на картинку — хорошая защита от тех, кто любит халяву, но не любит препятствия на пути к ней. Вот про водяной знак как раз я и написала статью.

  • 30 июня 2013 в 17:13
    Permalink

    Дествительно понаблюдал. как в окне СТИЛИ появляется информация, но только после того, как курсор в другое окно поставишь, а иначе ничего не видно. Вы бы еще рассказали, как много фото в статье размещать. Я поначалу сильно мучился, а теперь принцип уловил и все отлично. Вот ещё вопрос-даже если не ставить вертикальный отступ, то в тексте он все равно есть где-то 5-10px получается автоматом-откуда он берется и как с этим бороться? Загляните ко мне и посмотрите любую фотку в любой статье, везде большой вертикальный отступ, а я его НИГДЕ не задавал. А горизонтальный задавал раньше 2, теперь 1 px-этого очень много получается. Правда я рамку нигде не задавл.

    • 30 июня 2013 в 18:12
      Permalink

      Андрей, фоток в статье надо размещать столько, сколько надо. Если у меня скриншоты, и я рассказываю все по шагам, то картинок получается много. Но читала, что одна картинка примерно на 500 знаков текста.
      Отступ в 5-10 пикселей — это немного. Я ставлю 10 пикселей горизонтальный отступ, посмотрите, разве это много?
      Я посмотрела Ваш сайт. Действительно, в Вашей теме уже заданы отступы, поэтому и получается больше, чем Вы задаете. Но я бы не сказала, что это очень портит впечатление. Мне кажется, даже и незаметно.
      Кстати, рамки Вы не задаете, но Вы обратили внимание, что рамки-то у Вас вокруг картинок есть. Это тоже заложено в стилях темы, рамки в 4 пикселя толщиной.

  • 1 июля 2013 в 0:29
    Permalink

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

    • 1 июля 2013 в 9:36
      Permalink

      Я тоже люблю, чтобы всеми параметрами можно было управлять. Но не всегда это получается.
      «…отступ сверху почему-то намного меньше отступа снизу» — потому что так задано в стилях Вашей темы.
      Вашу проблему решить легко, для этого надо немножко знать HTML и CSS и уметь этими знаниями пользоваться.

  • 7 июля 2013 в 16:36
    Permalink

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

    • 7 июля 2013 в 17:50
      Permalink

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

  • 19 июля 2013 в 16:51
    Permalink

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

    • 19 июля 2013 в 17:59
      Permalink

      Спасибо, Ира! Я тоже многому училась и учусь методом тыка. И не всегда догадываюсь написать об этом статью, а потом иногда забываю, как и что делала. Так что некоторые мои статьи — это памятка и для себя тоже 🙂

      • 20 июля 2013 в 10:25
        Permalink

        Да, Нина, я тоже многое пишу для того, чтобы не забыть, что и как делать в случае смены темы например. Меняешь тему, и заново нужно устанавливать все скрипты и коды. А в памяти все не удержишь.

  • 15 ноября 2013 в 22:16
    Permalink

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

Обсуждение закрыто.