Как быстро загрузить и вставить изображение на сайт через админку WordPress. И о чудесах обработки изображений
Доброго времени суток, уважаемые читатели. В детстве мы ненавидели книжки без картинок, теперь мы готовы смотреть картинки без книг. В основном я говорю про кино, но рисунки также являются немаловажной частью сайта. Не верите? Давайте проведем небольшой эксперимент.
Посмотрите на картинку. Какая осень вам нравится? Какая часть изображения вызывает у вас положительные эмоции, на какой из них вы заострили свое внимание? И последний вопрос, захотите ли вы проводить много времени на сайте, на котором добавлены преимущественно тусклые фотографии, как слева, или предпочтете правый вариант?
Несмотря на то, что в левой части изображен жизнерадостный положительный ребенок, 99% населения не уделят ему внимания.
Наверняка вы даже не сразу поймете, что это одно и то же фото, вот только правая его часть обработана при помощи Photoshop, а левая нет.
Иллюстрации помогают удерживать внимание аудитории на сайте, заставляют людей проводить в блоге больше времени и возвращаться снова. Сегодня мы поговорим о том, как добавить картинку на сайт, какие фото использовать, а также о всяких интересных штуковинах.
Для начала о главном: чудеса обработки изображений
Прежде чем перейти к технической стороне вопроса, мы немного затронем вопрос самих иллюстраций. Сейчас даже существует целое понятие – рекламная фотография. Имеется в виду та, которая заставляет купить товар. Если вы собираетесь работать в области продажи сайтов или просто хотите создать хороший блог, который будет популярен среди читателей, то вам придется изучить этот вопрос хотя бы поверхностно.
Влезать в дебри познания графических приемов мы с вами сейчас не будем. Там рассматриваются такие вещи как: с какой стороны должен располагаться тот или иной объект, какой цвет должен преобладать на изображении, что такое динамичное фото и как добиться этого эффекта. Возможно, когда-нибудь я напишу об этом отдельную статью. Поверьте, она будет немаленькая. Сейчас пробежимся по основным моментам.
Фото, которое вы загружаете на сайт должно быть ярким. Посмотрите насколько привлекательна девочка на этой иллюстрации.
А теперь смотрите как яркость позволила мальчику затмить свою подругу.
Обратите внимание на то, как выглядела фотография изначально.
Кстати, на все изменения у меня ушло около трех минут! Яркость, сочность, насыщенность привлекают, создают хорошее настроение и заставляют задерживать внимание читателей вашего сайта.
Где брать качественные картинки
Если не хотите заморачиваться с изучением Photoshop, то можете приобретать картинки с сайта https://ru.depositphotos.com/ . Здесь не только большой выбор рисунков, но, что более важно, их не придется обрабатывать. Да и никаких проблем с юристами из-за использования чужой интеллектуальной собственности не будет. Можете спать спокойно. Никто не придет и не выставит счет за то, что вы использовали плод его труда и сделали на этом миллиарды!
Что по ценам. Можно купить подписку на месяц, в течение которого вам будет разрешено скачать 50 фото. В любой день и время. Это обойдется в 4727 рубля. Столько же будет стоить право забирать себе по 5 фотографий в сутки в течении 30 дней. Если вы решаетесь работать с депозитом, я рекомендую именно этот способ. Забирайте все подряд «до лучших времен», пусть лежит! За те же 4727 рублей вы получаете уже не 50 фото, а 150 картинок!
Третий вариант мне не нравится. Он предполагает «кредит», но один рисунок может стоить несколько «кредитов», поэтому, получается невыгодно.
Я настоятельно рекомендую зарегистрироваться на данном сервисе, тогда вы сможете еженедельно получать на свою почту ссылки для скачивания бесплатных изображений.
Конечно, есть и другой вариант – фотографировать все самостоятельно и обрабатывать в Фотошопе, либо рисовать в нем. Смотрите, какие рисунки можно выполнить в этой программе.
Вообще, работа с фотошопом – это полезный навык и если вы хотите научиться, то я рекомендую вам курсы Зинаиды Лукьяновой: https://photoshop-master.org/education.php . На этой страничке вы можете найти уроки для любой цели и уровня знаний.
Почему именно курсы? Вы никогда не сможете постичь всю полноту фотошопа, пользуясь лишь статьями из интернета. Начнете с чего-то простого и запала на интересное не хватит, а так вы быстренько овладеете азами и перейдете к важному ничего не упустив. В вашей голове не будут витать вопросы: «С чего начать? Куда бежать? Где искать». Все очень четко, ясно и основательно.
Перейдем к технической стороне вопроса, а именно как же все-таки вставить изображение в свой блог?
Практическая часть
Открываем административную панель wordpress. Находим слева Запись – Добавить новую.
Теперь нужно Добавить медиафайл.
Перед нами появилось новое окно Вставить медиафайл. В этой библиотеке будут храниться все фотографии, которые вы используете на сайте. Одни и те же изображения вы можете использовать в нескольких статей. Просто загружаете их в общую папку и отсюда выбираете фото к статье. Ни в коем случае потом ничего не удаляйте, иначе рисунок исчезнет со всех страниц блога.
Если вам вдруг приспичило посмотреть какие фотки, видео и аудио хранятся в библиотеке, то в панели слева можно отыскать Медиафайлы. Здесь же есть множественная загрузка. Если вы делаете интернет магазин на огромное количество товаров, а потом раскидываете их по статьям, всю базу можно загрузить сюда, а потом уже добавлять в текст.
Сейчас же мы много загружать не будет, поэтому работаем через записи в админке.
Выбираем и перетаскиваем изображения.
Щелкните по рисунку и обратите внимание на панель в левой части. Что тут есть интересного?
Тут нас интересует атрибут alt. Поисковые роботы анализируют этот атрибут, что способствует продвижению блога в интернете.
Кроме того, если картинка вдруг перестанет отображаться, то читатель увидит текст и сможет примерно догадаться что вы хотели ему показать. О том, что полезнее здесь писать узнайте из будущих статей моего блога.
Здесь же, при загрузке, вы можете поменять размер изображения. Поисковики не любят тяжелые странички, да и нагрузка на сервер дело не очень хорошее. Закончится у вас выделенный объем и придется менять тариф. На хостинге Timeweb цены, конечно, приемлемые, но зачем нам тратить даже два рубля лишних, когда можно воспользоваться парой кнопок.
Выбираем Размер. Средний, я полагаю, вполне подойдет.
Теперь картинку надо вставить в запись.
Один клик по изображению в тексте статьи и у вас появится вот такое меню. Первые четыре кнопки позволяют подвинуть фото влево, вправо, выровнять по середине или не использовать выравнивание. Крест – удаление картинки. Значок карандаш означает ее редактирование.
Подпись – интересный элемент, вы можете добавить описание к изображению. Это смотрится довольно эффектно. Здесь же вы можете поменять расположение и размер. В этом случае изменения коснутся только рисунка для данной статьи. То есть, в библиотеку вы загружаете большое фото и в некоторых публикациях делаете его меньше.
В админке изменения отображаются вот так.
А на сайте совсем иначе.
Смотрите как это ваше изображение будет выглядеть в html. Так бы его написали в блокноте профессионалы. Откройте эту вкладку.
Представляете, это сделали вы, совершенно не зная код!
Вы молодцы! На этом я с вами прощаюсь. До новых встреч. Если вам понравилась эта статья – подписывайтесь на рассылку и получайте больше полезных статей!
Как поменять картинку в WordPress
Здравствуйте! Сегодня довольно простая тема, правильной замены картинки на сайте WordPress с сохранением всех ссылок на эту картинку.
Как поменять картинку в WordPress
Техника замены картинок на сайте WordPress важна в контексте сохранения ссылок на картинку в материалах сайта.
По умолчанию, в общих настройках «Медиабиблиотека», размещение медиафайлов задано в папках по году и месяцу (об этом читать в статье Настройки WordPress после установки). Если вы не меняли эти настройки, то вы не можете удалить из библиотеки файл и заменить его другим с таким же названием. У нового файла будет другая ссылка по папке размещения.
Например, был файл wp-content/uploads/12/2018/foto-1.jpg , а станет wp-content/uploads/02/2019/foto-1.jpg . Как результат картинка пропадет из-за всех материалов сайта. Более того вы даже НЕ можете загрузить по FTP с заменой новые одноименные файлы, они не прикрепятся к материалам размещения.
Почему? Потому что система при загрузке фото из оригинала делает несколько копий в разных размерах, которые вы задаете в общих настройках медиабиблиотеки. Так, где же выход, и как правильно поменять картинку в WordPress?
Как правильно поменять картинку на WordPress
Без использования плагинов, корректно поменять картинку в WordPress сайте, можно только из материала, в который вы картинку (медиафайл) добавили.
Для замены картинки в статье (странице) вам нужно открыть материал в редакторе (ссылка «Редактировать на сайте» или «Изменить» на вкладке «Материалы»).
Далее, нажать на сменяемую картинку, и выбрать появившийся значок редактора – Удалить. В этом случае картина удалиться из статьи, но не удалиться из библиотеки. После удаления картинки из статьи, нужно заменить её новой, стандартной вставкой картинки в статью.
Если вы из редактора хотите удалить картинку не только из статьи, но и из библиотеки, вам нужно:
- Для удобства, поместить курсор над сменяемой картинкой, в новом параграфе;
- Нажать на кнопку «Добавить Медиафайл». Открыть библиотеку;
- Фильтром выбрать «Фото этой статьи»;
- Найти сменяемую картинку и в правой части экрана, нажать красную ссылку «Удалить навсегда»;
- После этого, сразу вставить в статью новую картинку.
Удалить картинку навсегда из библиотеки
Повторюсь, удалить картинку из медиабиблиотеки вы можете, но заменить картинку одноименной из библиотеки у вас не получиться.
Более простой вариант
Если вы используете плагин WooCommrece (электронная торговля), то кнопка «Заменить» для фото появится в обоих редакторах (старом TinyMCE и новом Gutenberg). Её легко найти, если вызвать картинку в материалы для редактирования.
Чтобы заменить картинку в материалах сайта, нажмите на кнопку «Заменить», она переведет вас в библиотеку. Там выберете новую картинку из библиотеки или загрузите новую картинку. И нажав кнопку «Заменить», поменяйте картинку в статье (на странице).
Плагин авто подмены картинок
Описанный вариант замены картинок может кому-то показаться долгим, особенно если менять придётся массу картинок.
Работать из библиотеки удобнее, чем открывать каждую статью. Для таких целей есть специальный плагин, позволяющий менять картинку в материалах из библиотеки. Называется этот плагин: Enable Media Replace. Вот это страница в архиве: https://ru.wordpress.org/plugins/enable-media-replace/ .
Это бесплатный, очень простой в использовании плагин. Он позволит вам заменить изображение или файл медибиблиотеки, загрузив на его место новый файл. Вам больше не нужно заходить в статью для удаления, переименования и повторной загрузки файлов.
После установки плагина появится кнопка «Заменить», как в редакторе материалов, так и в списке медиафайлов в Медиабиблиотеки. Фото выше, как и на WooCommerce.
Вывод
Теперь вы знаете, как поменять картинку в WordPress. Обычно менять картинки в статьях приходится крайне редко. Сделать это вручную, без плагина нес ложно. Однако актуальность массовой замены картинок возникает при переносе сайта на другой домен. В этом случае плагин вам поможет.
Пользовательские роли в WooCommerce
От урока к уроку вы будете постепенно понимать, насколько мощная у WooCommerce интеграция с вашим сайтом. В этом же уроке я покажу вам, какие новые роли пользователей и права он добавляет, а также опишу подробно, что они сами из себя представляют .
Также рекомендую мой видеокурс по созданию интернет-магазина на WooCommerce на основе готовой вёрстки ��
Если вы пока не представляете себе, что такое роли, возможности (права), то очень рекомендую глянуть всеохватывающий урок, касающийся ролей WordPress, он доступен по этой ссылке.
Роль клиента — customer
При попытке перейди в админку /wp-admin их редиректит на страницу аккаунта на самом сайте. При оплате заказа / регистрации пользователю автоматически присваивается эта роль клиента customer .
Роль менеджера магазина — shop_manager
Админка менеджера выглядит следующим образом:
Менеджер магазина по сути имеет:
- все права Редактора,
- list_users — просмотр пользователей
- edit_users — редактирование пользователей
- import — возможность воспользоваться функционалом импорта сайта
- export — и экспорта
- Все права, которые добавляет сам WooCommerce, а их нереальный список внизу
Полный список прав от WooCommerce
На самом деле WooCommerce имеет отличнейший набор прав, которые можно как угодно настроить для пользователей, работающих с магазином при помощи функций add_cap() и remove_cap(), а может как-то иначе. Например один человек будет иметь возможность редактировать и добавлять товары и ничего больше, другой получит доступ к отчетам, а третий — к заказам пользователей ������
Настройки и отчеты
- view_woocommerce_reports — возможность смотреть отчеты о продажах.
На скриншотах выше, и не только я игрался со стандартной ролью Редактора, добавляя ему по одной роли WooCommerce и наблюдая, что из этого получается, делалось это при помощи:
Товары
- edit_products — тут у вас будто появляется роль Участник, но только для магазина, вы можете создавать свои товары и редактировать их, однако не можете опубликовать, только отправить на утверждение.
- delete_products — теперь вы можете удалять свои товары, которые отправляете на утверждение, сама по себе это роль не имеет значения, так как у вас просто не появится страница Товары в админке
- publish_products — а это роль наделит вас властью, теперь вы можете публиковать товары!
- edit_others_products — не останавливаемся на достигнутом — теперь можете редактировать товары, созданные другими пользователями, но прикол в том, что это не распространяется на опубликованные товары,
- edit_published_products — всё, теперь распространяется
- delete_published_products — это наделяет вас правом удалять уже опубликованные товары
- delete_others_products — возможность удаления чужих товаров,
- read_private_products , edit_private_products ,
delete_private_products — всё то же самое, только для товаров, отмеченных как Личное.
Категории товаров, метки и атрибуты
- manage_product_terms — под Товары появятся пункты меню с Категориями, метками и атрибутами товара,
но вы ничего с ними сделать не сможете. - edit_product_terms — теперь вы можете управлять таксономиями товаров, редактировать текущие и добавлять новые, но без manage_product_terms юслес.
- delete_product_terms — теперь и удалять их можете
- assign_product_terms — и последнее немаловажное право — присваивать категории и метки к товарам и изменять их, то, для каких товаров вы сможете это делать, зависит от установленных возможностей из прошлого раздела продукта.
Заказы, Купоны и… Вебзацепы
Тут, чтобы мне не писать одно и то же по нескольку раз — возможности для заказов, купонов и вебзацепов �� (блин, мне это очень напоминает историю с переименованием хашбрауна в макдаке в картофельный оладушек) очень похожи на возможности для товаров, поэтому я не буду сейчас дублировать одно и то же.
Всё, что вам нужно, это подставить в один из шаблоноа нужный тип поста, например а этот edit_ <тип поста>, тогда:
- для товаров оно у нас выглядит edit_products ,
- для Заказов shop_orders оно будет edit_shop_orders ,
- для Купонов shop_coupons — edit_shop_coupons ,
- и соответственно для Зацепов shop_webhooks — edit_shop_webhooks
Новые возможности (права) для администратора
Продолжаем с WooCommerce
Впервые познакомился с WordPress в 2009 году. Организатор и спикер на конференциях WordCamp. Преподаватель в школе Нетология.