Продолжаем тему создания блога на WordPress. Сегодня мы разберемся, как редактировать картинку средствами редактора WordPress.
Картинку Вы в статью вставили, но посмотрев, как она выглядит в опубликованном виде, Вы поняли, что ее нужно редактировать. Как же это сделать?
Если Вы уже вышли из режима редактирования этой статьи, тогда заходите в админ панель, раздел «Записи» → «Все записи».
Находите там нужную статью и под ее названием при наведении курсора высвечивается меню, что можно с этой статьей делать. Нажимайте на редактирование.
Откроется статья в редакторе. Найдите ту картинку, которую нужно редактировать. Щелкните в ее левом верхнем углу. Появятся две кнопочки.
Если навести на них курсор, то появятся подсказки:
– первая кнопка – «Редактировать изображение»
– вторая кнопка – «Удалить изображение».
Щелкните по первой. Всплывет окно для редактирования изображения:
Вы видите две вкладки.
Во вкладке «Редактировать изображение» можно:
- уменьшить или увеличить изображение (в %)
- изменить расположение
- заполнить поля, если Вы их не заполняли, или решили что-то поменять.
Если больше ничего делать не нужно, то жмите кнопку «Обновление».
Но мы рассмотрим еще вторую вкладку «Расширенные настройки».
Что Вы здесь видите и можете сделать:
- адрес картинки, его поменять нельзя, да и незачем;
- изменить размеры в пикселях или установить оригинальный размер (учтите, что если Вы меняете один размер, то надо пропорционально изменить и второй, иначе нарушатся пропорции картинки);
- класс CSS – нужен для тех, кто будет писать код для оформления внешнего вида картинки в файле style.css (или в пользовательском файле стилей);
- стили (далее я покажу на примере, что это такое):
- рамка, чтобы фон изображения не сливался с фоном статьи. Нужно поставить толщину рамки в пикселях (только число). Я обычно ставлю 1, чтобы рамка была тоненькая. Если Вы хотите сделать ее потолще, то ставьте цифру побольше. Обратите внимание, что в строке стилей появились какие-то записи. Первая из них: border: 1px solid black; означает, что будет нарисована рамка толщиной 1 пиксел, одной сплошной линией и, по умолчанию, черным цветом. Чтобы поменять цвет, Вам нужно иметь его код (можно воспользоваться, например, программой Colormania).
- отступы (вертикальный и горизонтальный) нужны для того, чтобы между изображением и текстом было некоторое расстояние. Отступ задается в пикселях. Я ставлю обычно 10. В стилях отступы задаются кодом margin, а добавление к нему -top, -right, -bottom, -left означают, соответственно, отступ сверху, справа, снизу и слева. Вы видите, что в стилях прописались два отступа: сверху и снизу (всегда симметрично). Если Вам нужен только один из них, тогда второй можно спокойно удалить. 10рх означают величину отступа, думаю, Вы это и сами поняли.
- расширенные настройки ссылки можно задать (а можно и не задавать), если Вы картинку сделали ссылкой. Если же Вы выбрали «Нет», тогда эти поля заполнять не нужно.
После окончания редактирования нажимайте «Обновление» и Ваша картинка приобретет уже новый вид.
Если же редактировать Вы раздумали, тогда жмите «Отмена».
На этом урок «Как редактировать картинку в редакторе WordPress» заканчивается. Если он был Вам полезен, поделитесь ссылкой с друзьями, возможно, они тоже узнают из него что-то новенькое.
А Вам для развлечения и расслабления – видеоролик:
Комментарии
Большое спасибо за статью. Как всегда все понятно и очень доходчиво написано даже для таких “чайников”, как я. А будет ли статья, посвященная защите изображений? Какие плагины лучше загружать.? Для многих авторов это очень важно. Еще раз, большое спасибо.
Лена, извините, как-то Ваш комментарий сначала проскочил мимо моего внимания, а потом я решила написать об этом, а потом уже Вам ответить. Защитить на 100% ничего невозможно, всегда найдутся умельцы, которые обойдут любую защиту. Наложение водяного знака на картинку – хорошая защита от тех, кто любит халяву, но не любит препятствия на пути к ней. Вот про водяной знак как раз я и написала статью.
Дествительно понаблюдал. как в окне СТИЛИ появляется информация, но только после того, как курсор в другое окно поставишь, а иначе ничего не видно. Вы бы еще рассказали, как много фото в статье размещать. Я поначалу сильно мучился, а теперь принцип уловил и все отлично. Вот ещё вопрос-даже если не ставить вертикальный отступ, то в тексте он все равно есть где-то 5-10px получается автоматом-откуда он берется и как с этим бороться? Загляните ко мне и посмотрите любую фотку в любой статье, везде большой вертикальный отступ, а я его НИГДЕ не задавал. А горизонтальный задавал раньше 2, теперь 1 px-этого очень много получается. Правда я рамку нигде не задавл.
Андрей, фоток в статье надо размещать столько, сколько надо. Если у меня скриншоты, и я рассказываю все по шагам, то картинок получается много. Но читала, что одна картинка примерно на 500 знаков текста.
Отступ в 5-10 пикселей – это немного. Я ставлю 10 пикселей горизонтальный отступ, посмотрите, разве это много?
Я посмотрела Ваш сайт. Действительно, в Вашей теме уже заданы отступы, поэтому и получается больше, чем Вы задаете. Но я бы не сказала, что это очень портит впечатление. Мне кажется, даже и незаметно.
Кстати, рамки Вы не задаете, но Вы обратили внимание, что рамки-то у Вас вокруг картинок есть. Это тоже заложено в стилях темы, рамки в 4 пикселя толщиной.
Спасибо. Я просто люблю, когда всеми параметрами можно управлять. Если Вы обратили внимание, у меня отступ сврху почему-то намного меньше отступа снизу? А про рамки я только и узнал у Вас, раньше как-то не обращал внимания.
Я тоже люблю, чтобы всеми параметрами можно было управлять. Но не всегда это получается.
“…отступ сверху почему-то намного меньше отступа снизу” – потому что так задано в стилях Вашей темы.
Вашу проблему решить легко, для этого надо немножко знать HTML и CSS и уметь этими знаниями пользоваться.
Научусь!
Не сомневаюсь!
хорошие советы для таких начинающих блогеров,как я. Все думал, а как нормально редактировать картинку, пробовал методом тыка.
Спасибо на добром слове, Алекс.
Мне очень приятно, когда мои статьи нужны людям. Значит, не зря трачу время на их написание.
Замечательная статья, новичкам то, что нужно. Побольше бы таких статей для начинающих, а то я все методом тыка изучала, жаль в начале пути не нашла такую статью. А я вот сама научилась, а для других написать не додумалась. Все гениальное просто, и не нужно изобретать велосипед (это я о себе). Молодец, Нина, так все подробно и на доступном языке!
Спасибо, Ира! Я тоже многому училась и учусь методом тыка. И не всегда догадываюсь написать об этом статью, а потом иногда забываю, как и что делала. Так что некоторые мои статьи – это памятка и для себя тоже
Да, Нина, я тоже многое пишу для того, чтобы не забыть, что и как делать в случае смены темы например. Меняешь тему, и заново нужно устанавливать все скрипты и коды. А в памяти все не удержишь.
спасибо очень интересно ,но у меня проблема когда редактирую картинку нажимаю на кнопку редактировать картинку и высвечивается белый экран что делать а раньше получалось как у вас все открывалось