меню wordpress картинки в меню
Иконки в меню WordPress — добавляем вручную и с плагином
Существует несколько причин для создания в WordPress меню с картинками (иконками). Во-первых, это отличный способ сэкономить место, заменив название главной страницы на «домик». Во-вторых, некоторые символы говорят намного больше нежели текстовые значения — кнопки Facebook, Twitter и т.п. И наконец, в-третьих, графические элементы могут сделать навигацию еще нагляднее за счет добавления изображений, например, в списке категорий. Все три варианта вы можете видеть с превьюшке поста слева. А ниже я расскажу как их можно реализовать.
Итак, по сути, есть три принципиально разных метода вставки иконок в меню WordPress:
В первом случае придется немного «покодить», что не всем новичкам под силу. Третий ориентирован больше на полноценные изображения, а не символьные шрифты. Последний — вообще универсален.
Иконки в WP меню с помощью Font Awesome
Ранее я уже писал детальную статью про использование Font Awesome в WordPress. В ней найдете примеры кода для добавления символов в заголовки виджета, контент и навигацию. Хотя, последний вариант реализовывался там несколько иным образом нежели в текущем посте. Можете посмотреть, если интересно.
1. Итак, дабы вставить картинку в меню Вордпресс первым делом заходим внутри админки в раздел «Внешний вид» — «Меню». Создать новый элемент в навигацию сайта вы можете через «Страницы» или «Произвольный ссылки».
Какой бы способ вы не выбрали, главное в поле «Текст ссылки» добавить код символа Font Awesome, например, для главной:
После этого кликаете по кнопке сохранения (про создание меню читаем тут). Проверяете результат на сайте.
2. Если вы используете современную тему, вполне возможно, необходимые скрипты уже подключены к ней, и больше ничего делать не нужно. В противном случае придется самостоятельно подключить данный символьный шрифт на сайт. Для этого добавляем в functions.php следующий код:
Скачивать скрипт не нужно, он грузится прямо с официального сайта сервиса. Там же в разделе Icons сможете посмотреть коды других иконок для WordPress меню (выбирайте бесплатные варианты).
Конечно, при этом для соответствующих пунктов меню надо будет задать шрифт иконок:
#menu-item-121 a, #menu-item-122 a
Здесь двум элементам с ID с номерами 121 и 122 (смотрите в HTML коде) указывается использование символьного шрифта. Возможно, в некоторых макетах данная фишка уже подключена по умолчанию, например, в моем случае никаких дополнительных действий не требовалось. Тем не менее, на всякий случай все равно приведу эти стили.
Важный нюанс с адаптивностью
Поскольку заголовок в пункте меню из примера выше отсутствует, то в мобильной версии текст «Главная» не отобразится. Существует несколько вариантов решения этой задачи:
Иконка домика перед меню (хак)
Преимущество метода в том, что вам не придется создавать новый пункт через WP-админку, ссылка добавляется с помощью php-сниппета, что надо будет разместить в файле функций functions.php:
Преимущество метода в том, что вы можете и не использовать символьный шрифт (если в теме он не подключен), а просто добавить вывод картинки домика.
Обратите также внимание на условный оператор проверки главной страницы, т.к. нам нужно вставить класс активного пункта меню, если что.
Тут есть парочка нюансов. Фильтр будет применен для меню, привязанного к локации (месту в шаблоне) под названием main_menu, поэтому иконка домика появится только там. Кроме того автоматически считывается заголовок главной страницы (учтите это, если у вас он какой-то специфический). Ну, и как вы сами понимаете, «проблемы» с поддержкой адаптивности, озвученные чуть выше, здесь также надо решать.
WordPress плагин для меню с картинками
Модуль Menu Image позволяет легко добавлять картинки в меню Вордпресс без каких-либо кодов. Изображения вставляются внутрь тега ссылки через админку. Решение достаточно популярное — 50к активных пользователей, рейтинг 4.9.
После установки все настройки найдете в разделе «Внешний вид» — «Меню». Если быть точным, то они отобразятся в самих элементах меню. Владельцам плагина WPML придется дополнительно зайти в «WPML» — «WP Menus Sync» и кликнуть по ссылке синхронизации. Если у вас его нет, ничего делать не нужно.
Menu Image добавляет несколько дополнительных опций:
В разделе FAQ модуля на wordpress.org есть парочка интересных хаков и вопросов. В частности можете удалить/добавить размеры создаваемых картинок в меню.
Данный код удалит стандартный размер 48×48 и подключит вариант с мини иконками 16×16. Остальные сниппеты ищите в описании Menu Image.
Теоретически, вы также можете использовать модуль Max Mega Menu в WordPress дабы не просто добавлять мини-изображения в пункты навигации, но и создавать их исключительно из иконок (кнопки без текста).
Вариант с CSS стилями
Эта возможность подойдет тем, кто плюс-минус нормально ориентируется в верстке.
1. В разделе админки «Внешний вид» — «Меню» в правом верхнем углу открываем «Настройки экрана» и активируем пункт «Классы CSS».
2. Этот прием добавляет в пункты Wodpress меню новый элемент — класс стилей. Указываем в желаемом объекте название, например, my—menu.
3. Затем переходите в раздел «Медиафайлы» и загружаете необходимое для показа изображение.
4. После этого открываете файл стилей шаблона (style.css) и вставляете туда следующий код:
Сохраняете и смотрите результат.
В принципе, как я уже говорил выше, тут есть разные нюансы. Во-первых, можно было бы вообще не создавать новый класс, а просто посмотреть HTML код сайта и прописать стили, например, для #menu-item-121 и т.п. — система автоматически добавляет ID каждому пункту навигации.
Во-вторых, данный пример использования CSS свойства background можно заменить на тот же Font Awesome:
Все зависит от того какую именно задачу вы хотите решить. WordPress плагин для меню с картинками значительно облегчает работу начинающим пользователям, хотя, возможно, он немного избыточен. Вариант с Font Awesome идеально подойдет, если у вас на сайте уже используется данный скрипт. Подключать его через WP админку проще простого. И наконец четвертый способ требует от вас небольших знаний верстки либо внимательного применения кода из статьи.
А что вы делаете для вставки картинки или иконки в меню WordPress? Делимся опытом и приемами ниже.
WordPress.org
Русский
Рубрики
Внешний вид — меню
Раздел меню позволяет пользователю создать собственное меню (также известное как панель навигации, меню навигации или главное меню). Это раздел сайта, который помогает посетителям перемещаться по сайту. В зависимости от используемой темы обычно на сайте будет одно меню навигации, а некоторые темы могут включать дополнительные меню или меню подвала сайта. Важно иметь аккуратное и упрощенное меню навигации, чтобы не сбивать с толку посетителей.
По умолчанию WordPress автоматически добавляет все опубликованные страницы в меню. Однако возможна настройка меню, например добавление ссылки на категорию или на внешний сайт, изменение порядка ссылки меню или создание подменю.
Раздел меню доступен через Внешний вид > Меню консоли.
Настройки экрана # Настройки экрана
Настройки экрана позволяют вам выбрать, какие элементы будут отображаться или не отображаться в соответствующем разделе. При нажатии на вкладку «Настройки экрана» отображается список возможных элементов и параметров с флажком рядом с каждым. Установите флажок для каждого элемента или параметра, который вы хотите отобразить, или снимите флажок, чтобы этот модуль не отображался. Нажмите на вкладку Настройки экрана еще раз, чтобы закрыть ее.
Некоторые элементы, например записи, по умолчанию скрыты.
Создание меню # Создание меню
Добавление пунктов в меню # Добавление пунктов в меню
Вы можете добавлять в меню различные типы элементов, такие как страницы, рубрики или даже произвольные ссылки. Они разделены между панелями слева от меню, которое вы редактируете. Пример того, как добавить ссылку на страницу:
Ваше пользовательское меню теперь сохранено.
Примечание. Настройки экрана позволяют вам выбирать, какие элементы вы можете использовать для добавления в меню. Некоторые элементы, например метки, по умолчанию скрыты.
Удаление пункта меню # Удаление пункта меню
Создание многоуровневых меню # Создание многоуровневых меню
При планировании структуры вашего меню полезно думать о каждом пункте меню как о заголовке в формальном отчетном документе. В формальном отчете заголовки основных разделов (заголовки уровня 1) расположены ближе всего к левому краю страницы; заголовки подразделов (заголовки уровня 2) смещены немного дальше вправо; любые другие подчиненные заголовки (уровень 3, 4 и т. д.) в том же разделе имеют еще больший отступ вправо.
Редактор меню WordPress позволяет создавать многоуровневые меню с помощью простого «перетаскивания». Перетащите элементы меню вверх или вниз, чтобы изменить порядок их отображения в меню. Перетаскивайте элементы меню влево или вправо, чтобы создать подуровни в вашем меню.
Чтобы сделать один пункт меню подчиненным по отношению к другому, вам нужно расположить «дочерний элемент» под его «родителем», а затем перетащить его немного вправо.
Добавление меню на ваш сайт # Добавление меню на ваш сайт
Если ваша текущая тема поддерживает настраиваемые меню, вы сможете добавить новое меню в одну из Область отображения.
Если ваша текущая тема не поддерживает настраиваемые меню, вам нужно будет добавить новое меню через виджет «Пользовательское меню» в разделе виджетов.
Перестановка, настройка пунктов меню # Перестановка, настройка пунктов меню
После того, как элемент добавлен в меню, эти элементы меню можно изменить. Поместив курсор мыши на заголовок пункта меню, когда курсор мыши изменится на 4 стрелки, удерживайте левую кнопку мыши нажатой, перетащите модуль в то место, где вы хотите его разместить, затем отпустите кнопку мыши (это называется перетаскиванием). Помните, что вы можете перетащить элемент меню немного вправо от элемента меню над ним, чтобы создать иерархические отношения (родительский/дочерний) в меню.
У каждого пункта меню есть стрелка конфигурации справа от заголовка пункта меню, при нажатии на которую открывается окно конфигурации. Кликните на стрелку второй раз, чтобы закрыть окно конфигурации. Если вы не видите «Цель ссылки», «Классы CSS», «Отношение к ссылке (XFN))» и «Описание», то в разделе Настройки экрана убедитесь, что эти флажки установлены, чтобы их можно было здесь увидеть.
Затем выбор конфигурации:
Текст ссылки
Текст для этого конкретного пункта меню
Атрибут, используемый при отображении метки
Открывать в новой вкладке
Отметте флажком, если вы хотите, что бы страница открывалась в новом окне.
Классы CSS (необязательно)
Классы CSS для этого пункта меню
Отношение к ссылке (XFN)
Позволяет автоматически создавать атрибуты XFN, чтобы вы могли показать, как вы связаны с авторами/владельцами сайта, на который вы ссылаетесь.
Описание
Описание будет отображаться в меню, если текущая тема его поддерживает.
Как вставить картинку в меню WordPress
Sharing is caring
Понравилось это:
Похожее
Меня зовут Артем Абрамович и я являюсь фрилансером-вордпресером. Занимаюсь настройкой и редактированием сайтов созданных на CMS WordPress. Это основная моя специализация, есть еще несколько работ, которыми я занимаюсь, но обо этом вы можете более подробно узнать из моего портфолио.
52 комментария к “Как вставить картинку в меню WordPress”
вопросов нет) спасибо! лайк!
как-то не задумывался об этом, спасибо за новодку)
Наверное, потому что многим такая фича и не нужна))) Пожалуйста
Артём, как вы пришли к теме Divi? Как нашли её среди стольких тем, что-то заставило вас её купить? Ведь хороший маркетинг есть у многих.
Эмипирическим путем) Я перепробовал, наверное сотни тем, от десятка разных разрабов.
1. Маркетинг у многих есть хороший, те же MyThemeShop делают отличные темы, но при этом у них лицензия разработчика стоит 200 долларов да еще надо платить ежемесячно 15, меня это совсем не устраивает. Тогда как у ElegantThemes есть возможность выбора — купиль лицензию на год или пожизненную, разработчика или пользователя (хотя там разница небольшая). Да у них там не все так гладко и безоблачно, но в массе своей гораздо лучше многих.
2. Да и само то, как создана тема, какие приемы используются, говорит о многом. Если для внесения небольших изменений не требуется проделывать танцы с бубном, то это для меня большой плюс
3. По этой теме в буржунете много информации и довольно большое комьюнити, так что можно многое порешать без проблем
А на покупку меня как раз их маркетинг сподвиг, перед релизом третьей версии у ElegantThemes проходил 100 дневный марафон, на котором они рассказывали как можно использовать тему DIVI выкладывали готовые макеты и решения, ну я и повелся, и не жалею
Благодарю за подробный ответ. Это информация для многих важна. У меня куплена тема the7 (самая новая, со всеми обновлёнными платными плагинами), могу дать попользоваться. Как понял по скорости загрузки сайта Divi тоже даёт хорошие результаты? И вы написали о проблемах в Divi, можете выделить основные? Думаю многим это интересно.
Спасибо. у меня есть эта тема, все ж популярная тема.
Да, со скоростью загрузки, тоже получше чем на VC, по крайней мере, есть варианты разогнать.
Ну не совсем проблемы, тут скорее подход к бизнесу разный…
Лучше видео отдельное запишу, там проще и нагляднее будет)))
Артем, вопрос: если меню в виде плиток, то указанные вами плагины будут работать? Здесь никак не получается добавить картинки в меню – gosprogramma.kz. Или нужно идти каким-то другим путем? Заранее благодарю.
Не совсем понял вопроса. Но на вашем сайте – белые плитки – это не меню, это, судя по всему, рубрики на главной выводятся или скорее всего статьи, а к ним такой способ не применим, там по другому надо. Если просто статьи, то скорее всего достаточно к ним будет миниатюры прикрепить
Спасибо, понял. По-другому как – через CSS?
Смотреть что там у вас выводится. Как и говорил, если записи, то достаточно будет миниатюры к ним добавить, если рубрики то тут придется кодить и дополнительный плагин использовать
Меню wordpress картинки в меню
Представляем вашему вниманию подробный обзор возможностей Вордпресс, касающихся добавления и редактирования картинок. Из статьи вы узнаете, как вставить картинку в wordpress в любой элемент сайта (шапка, фон, «подложка» заголовка, запись, подвал, боковая панель), как отредактировать и хранить, как поставить ссылку на изображение. Мы рассмотрим все возможности, предоставляемые популярным движком Вордпресс (в его обновленной версии – WordPress 5.3.2).
Меню статьи
Изображения можно вставлять в статьи, загрузив из компьютера, из встроенной библиотеки или с другого сайта
Прописываем alt, меняем размер, выравниваем, добавляем ссылку. Создаем галерею. С помощью встроенного редактора отобразим, обрежим, изменим пропорции объекта
Превью статьи частов создают в информационных блогах и новостных разделах. В Вордпресс создать миниатюру легко
В Вордпрессе есть такая возможность. Рассмотрим основные способы
В WordPress графические объекты сохраняются, как прикрепленные к определенным статьям (если их вставлять в CMS через текстовый редактор), либо сохраняются, как не относящиеся ни к одной записи
При загрузке файлов в WordPress иногда возникают ошибки разного рода: ошибка HTTP, ошибка «Невозможно создать каталог» и другие. Как их устранить?
Для сайта со множеством медиафайлов лучше присмотреть сторонний сервис, чтобы не перегружать сервер и не переплачивать за него. Но есть исключения.
В Вордпресс есть способы создать разное оформление страниц (с помощью плагинов, либо с помощью кода)
Специальные шаблоны для Вордпресс идут со встроенными функциями, иногда с их помощью можно добавлять фоновую картинку. Также есть возможность (с помощью плагинов, с помощью кода) вставить в любой элемент: в шабку, сайдбар, футер.
Вся информация о медиа сохраняется в базе данных (добавляется автоматически). Как информация влияет на продвижение в поисковиках, как её можно удалить?
Как вставить картинку в имеющуюся или новую запись
А затем выбрать блок формата «изображение» (или «галерея», если нужно выложить сразу несколько картинок). Так вы можете добавлять иллюстрации в любое место в статье.
Как только нажмете, увидите в окне, которое открылось, несколько способов «залить» файл, выбор делаем нажатием на желаемую кнопку. В окне можно загрузить файл с компьютера, либо из встроенной медиабиблиотеки WordPress, либо с другого сайта.
С компьютера
Загрузить с компьютера можно простым перетаскиванием, либо с помощью первой кнопки.
Из библиотеки файлов
Все загруженные с компьютера фотографии сохраняются в библиотеке. Их можно вставить тем же способом: выбрав формат блока «изображение», а затем нажав кнопку «добавить из библиотеки».
Если при создании сайта вы выбрали определенный шаблон, то библиотека не будет пустой, даже если вы в неё ещё ничего не загружали. В ней окажутся файлы, предназначенные для оформления по шаблону. Если шаблон бесплатный, эти иллюстрации стоит заменить на другие (чтобы сделать свой сайт уникальным).
Если в WP не оказалось подходящего фото, необязательно выходить из медиатеки и возвращаться к блоку, в запись. Перейдите в первую вкладку – «Загрузить файлы», перетащите или найдите на компьютере через проводник (можно выбрать сразу несколько).
С другого сайта
Если требуется фото с чужого ресурса, выберите третью кнопку: «Вставить с сайта» (недоступна в блоке «галерея»). И в появившееся поле введите url изображения.
Нажмите значок рядом с заполненным полем, изображение появится в статье.
Уменьшим его до необходимого размера и разместим по центру. Напишем пояснение под фото (подпись).
Настройка добавленных фото
Как видим, вставка изображений в WordPress производится легко. Но на этом работа с медийной составляющей сайта не заканчивается. Необходимо приступить к редактированию. Что мы уже частично сделали, выполняя первые шаги (вставляя с чужого ресурса).
Помимо позиции и размера, внутри записи можно произвести и другие манипуляции с добавленным фото: изменить размеры, дать описание для поисковых систем (с ключевыми словами). Эти настройки вы найдете в поле справа от текста.
Но лучше редактировать медийную часть в самой библиотеке.
Что нужно прописать к каждой картинке
Как мы уже отметили, в библиотеке хранятся все загруженные медиафайлы.
Перейдите в библиотеку и выберите тот, который необходимо отредактировать, и увидите инструменты:
Управление размером: рекомендуемый размер для WordPress, сжатие, создание миниатюры
Сразу после вставки фото в статью, можно настроить его размер. Первый способ – с помощью мыши (подтянуть за синие кружочки, уменьшая или увеличивая пропорционально). Второй – задать параметры в колонке справа.
Здесь можно выбрать либо полный размер фото, либо средний, либо размер миниатюры. Согласно параметрам, выставленным в WP по умолчанию (см. раздел консоли «Настройки», подраздел «Медиафайлы»),
Важно всегда соблюдать рекомендуемый размер, чтобы ресурс быстро прогружался и соответствовал требованиям современного посетителя. Не спроста максимальный предел в WP установлен на уровне 100 Mb. Если вы попытаетесь загрузить слишком большой файл, система выдаст ошибку. Если много, сайт будет долго открываться.
Рекомендуем предварительно сжимать каждый до подходящих нормативов (норматив для веб-ресурсов, сниженного качества и размера, с меньшим количеством цветов). Сделать это можно с помощью графического редактора, онлайн-сервиса или использовать специальный плагин. Например, бесплатный плагин Smush, который автоматически сжимает все изображения (его можно установить через раздел консоли WP «Плагины», как показано на скриншоте ниже).
Выравнивание и обтекание текстом
Теперь мы знаем, как вставить картинку в текст в WordPress. Знаем, как изменить размеры, что вписать в поля alt, подпись и пр. Следует также научиться выравнивать изображение.
После добавления иллюстрации к тексту вы получаете возможность управлять блоком: верхние кнопки блока, появляются, если навести курсор на блок с картинкой. Фотографию можно выровнять по левому, правому краю, по центру, растянуть по ширине содержимого, во всю ширину экрана. Однако иллюстрация сразу не встанет рядом с текстом. Чтобы добиться обтекания текстом, «схватите» блок с левого края и дотяните до нужного места. Например, отпустите рядом с абзацем и фотография идеально встанет.
Можно выстроить объекты (картинки, видео, аудио, текст) в три столбца. Добавьте сначала блок формата «Колонки».
Наведите курсор на блок с колонками, и в правом поле выберите количество колонок (например, 3). В каждую колонку вставьте объекты. Для этого наведите на плюсик в правом верхнем углу каждой колонки и выберите блок.
Как сделать галерею или слайдер из нескольких фото
Тем же способом можно создать галерею. Просто выберите соответствующий блок. Загрузите несколько фото, отметив галочкой. Разместите в нужном порядке.
Как галерея будет отображена (сеткой или слайдером), зависит от темы оформления (шаблона). В нашем шаблоне галерея отображается сеткой.
Благодаря же теме на некоторых фото появились надписи (только под теми, для которых мы заполнили поле «Подпись»). Если шаблон не дает возможности пролистывать изображения, как в слайдере, то добиться такого способа подачи можно с помощью специальных плагинов (Meta Slider, Smart Slider 3, Jetpack и пр.).
Как вставить ссылку в картинку или ее подпись
Мы уже неоднократно обращались к колонке справа от текста. Обратимся к ней снова, чтобы поставить ссылку на картинку или на её подпись.
Найдите подпункт «Настройки ссылок». Выберите в ниспадающем списке, куда должна вести ссылка: на медиафайл, произвольный url или на страницу вложения (отдельная, под картинку).
Вставьте ссылку. При необходимости включите опцию «Открывать в новой вкладке» (в новом окне браузера).
Теперь при нажатии на фотографию пользователь будет переходить на определенную веб-страницу в интернете.
Поставить ту же ссылку можно и на подпись под картинкой: наведите на неё курсор, появятся кнопки, среди которых вы узнаете значок, обозначающий добавление ссылки.
Изменение изображения в визуальном редакторе
Также в WordPress имеется встроенный графический редактор. С его помощью можно в любой момент изменить размер загруженной картинки, сжать её, обрезать, перевернуть, создать миниатюру с иными (чем по умолчанию) параметрами.
Зайти в редактор можно двумя способами.
Попадая в редактор, мы получаем доступ к нескольким простейшим инструментам. В редакторе, открытом первым способом, мы видим возможность масштабировать объект, обрезать, задать пропорции, тоже самое можно сделать и для миниатюры.
Спустите полосу прокрутки вниз и выберите миниатюру, чтобы произвести манипуляции с ней.
В редакторе, открытом вторым способом, больше инструментов.
Картинку можно обрезать, повернуть, перевернуть (кнопками над фотографией). Здесь же можно изменить размер, масштаб, создать и изменить миниатюру (не обязательно, размер для миниатюры настраивается автоматически, в зависимости от примененного шаблона). После всех манипуляций не забудьте сохранить изменения.
Как добавить миниатюру записи и для чего она нужна
Если у вас информационный ресурс, недостаточно вставить фото в Вордпресс, у каждой статьи должна быть миниатюру. Как её создать?
Откройте запись. В правой колонке найдите пункт «Изображение записи» и воспользуйтесь кнопкой «Добавить». Теперь пост будет опубликован в блоге (в новостной ленте) с картинкой, а не просто с заголовком и описанием.
Как сделать картинку фоном заголовка
В нашем примере использован шаблон BuildX. Эта тема позволяет легко поменять цвета текста, заголовков, поставить фоновое изображение и настроить его, а также изменить оформление отдельных элементов сайта. Если вы немного знакомы с языком css, ищите в настройках темы раздел «Дополнительные стили».
Затем в новой вкладке браузера откройте свой сайт, наведите на любой пост и откройте кодировку (в разных браузерах открывается по-разному, в Яндекс Браузере достаточно кликнуть правой кнопкой мыши и нажать «Исследовать элемент»). Найдите опции (блок, описывающий характеристики заголовка), которые хотите изменить, скопируйте (например, ширина и высота header img).
Вернитесь во вкладку с «Дополнительными стилями» и вставьте скопированный css-код в соответствующее поле. Поменяйте код: в нашем примере, мы увеличили ширину (до 110%). Не забудьте обновить (кнопка в верху слева, до обновления справа на сайте все изменения будут видны). Если, что-то сделаете не так, система выдаст ошибку и порекомендует перед обновлением устранить её.
Подробнее о css-стилях можно прочесть здесь: каскадные таблицы стилей.
Чтобы не производить сложных изменений, выбирайте сразу подходящий шаблон. Например, если вам нужна картинка под заголовком поста, выбирайте тему BuildX и ей подобные.
Прикрепленные и неприкрепленные картинки в медиабиблиотеке
Некоторым изображениям стоит присвоить статус «прикрепленные». Для чего это нужно и как это сделать?
Прикрепление медиафайлов к определенным статьям позволяет грамотно организовать их хранение и сортировку в Вордпресс. Определение графического объекта как вложения конкретного поста позволяет навсегда связать эти два элемента (графику и текст), а значит в случае сбоев один из них не потеряется (воспринимаются базой данных практически как единое целое). Эта функция позволяет в критических ситуациях избежать необходимости восстанавливать оформление всех записей вручную.
Отвязывать (откреплять) иллюстрации от поста стоит тогда, когда вы запланировали замену фотографий или решили загрузить какое-то заново (после некоторого редактирования).
Откроем библиотеку. Отобразим содержимое не в формате сетки, а списком. В таблице напротив названий мы увидим автора, комментарии, дату загрузки и для какой записи предназначен. Если напрямую в библиотеку (не в статью), файл не будет «прикрепленным». Но его можно в любой момент прикрепить, нажав на соответствующую надпись, а прикрепленные – отвязать.
Прикрепленными также оказываются фотографии, загруженные в качестве изображений записи (но не во всех темах). Неприкрепленными оказываются не только загруженные через медиабиблиотеку, но и загруженные в качестве логотипа или фонового изображения.
С какими ошибками часто сталкиваются вебмастера
При работе с изображениями можно столкнуться с ошибками, способы устранения которых хорошо известны вебмастерам.
Ошибка HTTP
Возникает по ряду причин, при загрузке файла в WP. Ошибка может быть временной (из-за превышения ресурсов сервера). Выждите пару минут и попробуйте снова. Попробуйте найти меньшего размера или в ином формате. Если ошибка осталась, значит сбой не временный, необходимо выяснить причину.
Попробуйте увеличить предел памяти: откройте wp-config.php на сервере и введите код: define( ‘WP_MEMORY_LIMIT’, ‘256M’ );
Смените редактора изображений. Медиабиблиотека WP использует для обработки графических объектов два: GD Library и Imagick. Второй печально известен сбоями, смените в настройках по умолчанию этот модуль на первый (на GD Library). Вставьте следующий код в тему WP, в functions.php:
Ошибка «Невозможно создать каталог»
Нередко при загрузке медиа появляется ошибка «Невозможно создать каталог wp-content». Такой сбой возникает, как правило, после глобальных изменений на сайте или переезда.
Первый способ решения проблемы мы найдем в меню «Настройки медиафайлов». Напротив надписи «Помещать загружаемые картинки в папке по году и месяцу» должна стоять галочка. Если здесь не прописано, куда сохранять, нажмите кнопку сохранить и проверьте, возобновилась ли работа загрузчика.
Иной способ устранить проблему – изменить права доступа к каталогу wp-content. Зайдите на хостинг (сервер), в файловый менеджер, найдите в папке с вашим сайтом папку wp-content, правой кнопкой вызовите меню, через которое можно задать права доступа. Задайте значение 755 (не стоит указывать 777 – это полный доступ, «развязывающий руки» взломщикам). Сохраните изменения.
В крайних случаях вебмастера вносят изменения в wp-config.php на хостинге (сервере), предварительно сохранив его копию. Перед надписью require_once(ABSPATH.’wp-settings.php’); надо вставить define(‘UPLOADS’, ‘wp-content/uploads’);
Так мы принудительно указываем системе WP нужный путь к каталогу.
Проблема «Картинка на отдельном url»
Ещё одна частая ошибка, возникающая при добавлении иллюстрации в запись WP. Такой способ загрузки приводит к созданию страницы вложения (url с новым фото).
Чтобы не возникало проблем, вебмастера, разбирающиеся в кодировке, настраивают переадресацию (ввести специальный код в function.php) или запрещают поисковикам индексировать эти url (с помощью другого кода). Мы же попробуем запретить индексацию, внеся изменения в robots.txt, добавив строку Disallow: /*/?attachment_id=* 3. Переадресацию мы можем запустить через параметр Redirect attachment URLs to parent post URL (функция доступна в плагине Yoast SEO).
Как лучше хранить картинки: на сервере или на сторонних сервисах
Известно, что до 70% веса страницы приходится именно на графические объекты. Чтобы не тормозить открытие сайта, необходимо сжимать изображения, и чем меньше их будет на сервере (до нескольких сотен), тем будет выше скорость.
Если для проекта просто необходимо добавление огромного количества (тысячи тысяч) качественных («увесистых») фотографий, стоит задуматься о хранении их на сторонних сервисах (Яндекс.Диск, Google Диск, Amazon S3, Tumblr, социальные сети). Их услуги обойдутся дешевле, чем оплата дополнительного места хостинг-провайдеру. Чтобы не перегружать ресурс, вебмастера советуют размещать на сервере только миниатюры, а полномасштабный вариант «заливать» на облачный сервис. Быстрее всего открываются фотографии из Вконтакте: среднеразмерная прогружается за 0,7 секунд; с Pinterest – 0,9 с, с Яндекса – 1,8 с, из Tumblr – 1,9 с (с хостинга такая будет грузиться около 3 с).
Но нужно помнить о единственном минусе облачных ресурсов – в любой момент ссылка на вашу картинку может измениться (бывали случаи полного удаления).
Если вы решили ради безопасности работать с сервером, проработайте древовидную структуру папок (каталогов) для хранения. Это позволит оптимизировать работу, избежать переполнения папок. По возможности загружайте фото с других сайтов (они не попадают в библиотеку, в базу данных, а прогружаются прямо со стороннего ресурса).
Как сделать картинку фоном страницы
Вставить картинку в Вордпресс на задний план отдельной страницы проблематично. Визуально наглядного способа нет.
Плагины
Существует несколько бесплатных плагинов WordPress, позволяющих поменять фон, вставить видео, анимацию и даже изменить вид каждого элемента сайта. Наиболее функциональным из них является SiteOrigin CSS. Рассмотрим, как с его помощью вставить фоновую картинку.
Установим плагин и перейдем к редактору CSS
В открывшемся окне нажмите на значок просмотра.
Мы перейдем к редактору CSS. Он представляет собой несколько окон, в самом большом мы увидим наш сайт. Чтобы выбрать элемент для редактирования, достаточно навести на него курсор и нажать. После чего можно приступить к настройкам (левая колонка). Выделим задний план, во вкладке Decoration загрузим медиафайл. А затем нажмем на галочку над вкладками.
В редакторе CSS появится новый код, сохраним изменения с помощью кнопки. И проверим результат.
Отметим, что на других страницах фон не изменился (таким образом можно задать разное оформление). Так же меняется задний план и в шапке, и в подвале, и в боковой панели (сайдбаре).
С помощью кода
Ещё один способ установки фона на страницу и весь сайт – изменение кода css. Откроем таблицу стилей (style.css) в редакторе тем. Найдем селектор body и настройку background, если требуется изменить задний план всего сайта. Добавим картинку. Например, пропишем название нашего фонового изображения: background: url(bug.png).
Чтобы установить фон отдельной страницы, пропишем настройку background для пункта меню с определенным id. Вместо цвета укажим путь к медиа. Ещё проще установить картинку на задний план, если в теме предусмотрена возможность добавлять собственные стили css (в настройках сайта есть «Дополнительные стили»). Просто впишем в соответствующее поле код:
Как добавить картинку в тему WordPress
Как добавить картинку в WordPress в качестве фона? Можно тремя способами, визуальный самый простой, но не всегда доступен.
Через визуальные настройки
В некоторых шаблонах встроены дополнительные возможности, которые позволяют добавить картинку в тему, заменить логотип, картинку в шапке, поменять оформление подвала и сайдбара. В некоторых можно добавить иконки в меню. Как производить эти манипуляции, разберем на примере добавления фоновой картинки.
Нажмем «Фоновое изображение» и загрузим.
Далее можно выбрать позицию (разместить по центру, по верхнему краю или по нижнему), размер или сразу назначить одну из предустановок. Можно выбрать «повторять» и «прокручивать со страницей».
Также в Вордпресс предусмотрена возможность публиковать страницы с фоновым изображением заголовка.
Смотрится эффектно, настраивается легко. Откройте нужную, в правой колонке найдите пункт «Изображение страницы», вставьте его из библиотеки.
С помощью плагина
Если в теме WP не предусмотрена возможность добавлять фоновое изображение, можно воспользоваться специальным плагином. Наиболее популярные варианты выдаст нам поиск.
Установим простой плагин – Simple Full Screen Background Image.
Выберем изображение и сохраним.
Для вставки иконок в пункты меню воспользуйтесь одним из двух самых удобных плагинов: Menu Image или Menu Icons. Первый имеет дополнительную опцию – «всплывание» иллюстрации при наведении на пункт меню. Во втором есть готовые иконки (весьма ограниченное количество). Сделайте выбор и установите через консоль WP.
Рассмотрим совместную работу этих плагинов (установим оба). Перейдём в настройки меню. В настройках каждого пункта меню появились новые опции:
С помощью кода
Если возможностей шаблона недостаточно, изменить оформление сайта или отдельного элемента (шапки, футера) можно с помощью кода. Найдите таблицу стилей в редакторе тем (style.css), а в ней необходимый селектор (например, footer) и поменяйте код (пропишите путь к изображению).
Через файловый менеджер (на хостинге)
Код можно изменить и прямо в footer.php на сервере (находится в папке с названием вашей темы). Таким образом можно не только добавить картинку в качестве фона в футер уже привычным кодом (background: url(«novyi-god-winter2.jpg»), но и удалить лишнюю информацию об авторе шаблона.
Для добавления иллюстрации в шапку перейдите в папку images (также находится в папке с названием темы) и замените шаблонное изображение на своё (но вставьте с тем же названием). Этот способ доступен, если шаблонное изображение предусмотрено темой.
Как вставить фото в базу данных Вордпресс
По-умолчанию WordPress хранит медиафайлы в папке «загруженное» (на сервере, в каталоге wp-content, uploads). Внутри папки uploads автоматически создаются папки с цифрами, обозначающими год и месяц (соответствуют дате загрузки). Такая система позволяет организовать оптимальное хранение данных и не перегружать одну папку.
Также информация о загруженных медиа добавляется в базу данных, в формате текста (attachment), в таблице под названием posts. О миниатюре создается иная запись – в формате мета (thumbnail_id), которая появляется в таблице postmeta. Записи о графических объектах остаются в базе, даже если вы убрали объект из WP и с хостинга. Такую запись называют «битой», они вредят продвижению (особенно, если их довольно много). Их стоит удалить из базы. Добавлять фото в базу данных сайта нет необходимости, система WordPress автоматически производит все необходимые записи.