Меняем стандартные пути к папкам в WordPress. Как вывести стандартные Dashicons-иконки на WordPress? Важный нюанс с адаптивностью

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

Таксономии – это способ группирования разных вещей в WordPress. Рубрики и метки – базовые таксономии, которые встроены в WordPress. В данной статье мы покажем вам, как добавить иконки не только к рубрикам, но и любым другим таксономиям в WordPress.

Зачем добавлять иконки к рубрикам?

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

Также вы можете создавать ваши собственные произвольные таксономии и связывать их с любым типом записей на вашем WordPress-сайте. Это поможет пользователям получить контент, находящийся в данных таксономиях.

Изображения для таксономий – это миниатюры или иконки, которые применяются к термам в каждой таксономии.

Давайте посмотрим, как добавить изображения к таксономиям в WordPress.

Добавление изображений к таксономиям в WordPress

Первое, что нам понадобится – это установить плагин Taxonomy Images . После его активации вам нужно будет посетить страницу Settings » Taxonomy Images, чтобы задать настройки плагина.

Вы увидите список таксономий, доступных для WordPress-сайта. Выбираем таксономии, которые нам нужны, после чего щелкаем по кнопке Save Changes.

На скриншоте выше мы включили изображения для рубрик.

Чтобы добавить изображения к каждой рубрике, вам нужно перейти на страницу Posts » Categories (Записи – Рубрики). Если вы включили изображения для других таксономий, вам нужно будет посетить соответствующую страницу таксономии в панели администратора WordPress.

На странице рубрик вы увидите новый столбец, который назван Image в вашем списке рубрик. Поскольку пока нет добавленных изображений, вы увидите стандартное изображение-заполнитель с кнопкой добавления для каждой рубрики.

Щелкаем по кнопке добавления, которая находится сразу под изображением-заполнителем. Появится базовое всплывающее окно для загрузки медиа в WordPress.

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

Удалить изображение вы можете в любое время, просто щелкнув по специальной кнопке под изображением.

Вывод изображений для таксономий на сайте WordPress

Чтобы вывести на экран изображения для таксономий на WordPress-сайте, необходимо отредактировать вашу тему (или дочернюю тему).

Во-первых, вам нужно будет подключиться к своему сайту по FTP.

После соединения с сайтом вам нужно будет найти шаблон, отвечающий за вывод архивов ваших таксономий. Это может быть файл archives.php, category.php, tag.php или taxonomy.php.

Вам необходимо загрузить файл на свой компьютер и открыть его в текстовом редакторе, таком как Notepad++ или TextEdit.

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

Обычно этот код добавляется перед заголовком таксономии или тегом the_archive_title().

print apply_filters("taxonomy-images-queried-term-image" , "" );

После добавления кода сохраните файл и загрузите его обратно на сайт по FTP.

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

Для стилизации изображения можно прибегнуть к CSS. Опытные пользователи могут найти примеры кода на странице плагина.

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

  1. Установка плагина Easy Category Icons.
  2. Как установить иконки к рубрикам WordPress и где их скачать?
  3. Плагин иконок для меню WordPress.

Установка плагина Easy Category Icons

Давайте теперь приступим к установке самого плагина. Для этого в консоли wordPress нажимаем плагины, добавить новый. Далее в строку поиска вписываем название.

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


Плагин имеет 5 звезд что говорит о его популярности и хорошей работоспособности.

С установкой разобрались. Теперь перейдем к самому интересному. Это украшение рубрик иконками.

Как установить иконки для рубрик WordPress и где их скачать?

Прежде чем перейти к установке иконок к рубрикам нам нужно их скачать. У вас должен быть готовый набор картинок для дальнейшей работы. Скачать иконки для вордпресс можно на сайте по адресу http://iconbird.com/. Внимание ссылка не кликабельная. Можете скопировать адрес и вставить в браузер. Там вы найдете множество разных иконок под темы своих категорий. Отлично, теперь у нас есть иконки загруженные на компьютер. Теперь переходим к украшению рубрик.

На самом деле нет ничего сложного. Переходим в своей консоли в раздел рубрики. Выбираем нужную нам категорию и кликаем по ней. Прокручиваем страницу в низ. Ставим галочку на против upload image.


  • Загрузить файлы.
  • Выберите файлы.
  • Находим нужные нам иконки на компе.
  • Кликаем на нужную иконку 1 раз.
  • Выбираем открыть.
  • После загрузки жмем применить.

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

Аналогично похожим способом можно добавить иконки к меню блога или сайта. Для этого существует другой плагин под названием Menu Icons.

Плагин иконок для меню WordPress

Для установки плагина в консоли выбираем плагины=> добавить новый. Пишем в поиске Menu Icons, готово плагин найден. Теперь жмем установить, после активируем плагин.


Теперь для установки иконки нужно переместиться в меню. Делаем следующее выбираем в консоли внешний вид=> меню. Установим для примера иконку для главной страницы.


Клацаем выбрать. Скажу что плагин содержит 212 бесплатных иконок. Есть что выбрать. Я выбрал домик для главной страницы блога. Все теперь щелкаем кнопку выбрать.


Получаем вот такой результат. Можете менять иконки когда вам вздумается. Они легко и быстро удаляются, также моментально добавляются.


Для наглядности можете взглянуть на мое оформленное меню с помощью данного плагина. Такое меню с иконками может быть и у вас. Удачи вам с оформлением своего блога.

Существует несколько причин для создания в WordPress меню с картинками (иконками). Во-первых, это отличный способ сэкономить место, заменив название главной страницы на «домик». Во-вторых, некоторые символы говорят намного больше нежели текстовые значения — кнопки Facebook, Twitter и т.п. И наконец, в-третьих, графические элементы могут сделать навигацию еще нагляднее за счет добавления изображений, например, в списке категорий. Все три варианта вы можете видеть с превьюшке поста слева. А ниже я расскажу как их можно реализовать.

Итак, по сути, есть три принципиально разных метода вставки иконок в меню WordPress:

В первом случае придется немного «покодить», что не всем новичкам под силу. Третий ориентирован больше на полноценные изображения, а не символьные шрифты. Последний — вообще универсален.

Иконки в WP меню с помощью Font Awesome

Ранее я уже писал детальную статью про использование . В ней найдете примеры кода для добавления символов в заголовки виджета, контент и навигацию. Хотя, последний вариант реализовывался там несколько иным образом нежели в текущем посте. Можете посмотреть, если интересно.

1. Итак, дабы вставить картинку в меню Вордпресс первым делом заходим внутри админки в раздел «Внешний вид» — «Меню». Создать новый элемент в навигацию сайта вы можете через «Страницы» или «Произвольный ссылки».

Какой бы способ вы не выбрали, главное в поле «Текст ссылки» добавить код символа Font Awesome, например, для главной:

add_action("wp_enqueue_scripts", "enqueue_font_awesome"); function enqueue_font_awesome() { wp_enqueue_style("font-awesome", "//maxcdn.bootstrapcdn.com/font-awesome/latest/css/font-awesome.min.css"); }

Скачивать скрипт не нужно, он грузится прямо с официального сайта сервиса . Там же в разделе Icons сможете посмотреть коды других иконок для WordPress меню (выбирайте бесплатные варианты).

Конечно, при этом для соответствующих пунктов меню надо будет задать шрифт иконок:

#menu-item-121 a, #menu-item-122 a {font-family: FontAwesome;}

#menu-item-121 a, #menu-item-122 a {font-family: FontAwesome;}

Здесь двум элементам с ID с номерами 121 и 122 (смотрите в HTML коде) указывается использование символьного шрифта. Возможно, в некоторых макетах данная фишка уже подключена по умолчанию, например, в моем случае никаких дополнительных действий не требовалось. Тем не менее, на всякий случай все равно приведу эти стили.

Важный нюанс с адаптивностью

Поскольку заголовок в пункте меню из примера выше отсутствует, то в мобильной версии текст «Главная» не отобразится. Существует несколько вариантов решения этой задачи:

  • Если у вас на сайте предусмотрены то тут все логично — в одном из них будет иконка, в другом пишете текст.
  • Можно добавить 2 ссылки для главной (текст/иконка) в одном элементе навигации, и в зависимости от размера экрана показывать/скрывать один из них (через опцию display). Принцип такой же, как и в ходе реализации адаптивности макета.
  • Есть еще вариант из , в котором тексту в CSS ставите свойство text-indent: -99999px, а отображение иконки задаете в псевдоэлементе before.

Иконка домика перед меню (хак)

Преимущество метода в том, что вам не придется создавать новый пункт через WP-админку, ссылка добавляется с помощью php-сниппета, что надо будет разместить в файле функций functions.php:

add_filter("wp_nav_menu_items" , "add_new_menu_item" , 10 , 2 ) ; function add_new_menu_item( $nav , $args ) { if ( $args -> theme_location == "main_menu" ) $newmenuitem = "
  • . home_url() . "">" . get_the_title(get_option("page_on_front" ) ) . "
    • " ; $nav = $newmenuitem . $nav ; return $nav ; }

    add_filter("wp_nav_menu_items","add_new_menu_item", 10, 2); function add_new_menu_item($nav, $args) { if($args->theme_location == "main_menu") $newmenuitem = "

  • ".get_the_title(get_option("page_on_front"))."
    • "; $nav = $newmenuitem.$nav; return $nav; }

    Преимущество метода в том, что вы можете и не использовать символьный шрифт (если в теме он не подключен), а просто добавить вывод картинки домика.

    add_filter("wp_nav_menu_items" , "add_new_menu_item" , 10 , 2 ) ; function add_new_menu_item( $nav , $args ) { if ( $args -> theme_location == "primary" ) { if (is_front_page() ) { $my_link_class = "home-link current-menu-item" ; } else { $my_link_class = "home-link" ; } $newmenuitem = "
  • "/img/home-white25.png">
    • " ; $nav = $newmenuitem . $nav ; } return $nav ; }

    add_filter("wp_nav_menu_items","add_new_menu_item", 10, 2); function add_new_menu_item($nav, $args) { if($args->theme_location == "primary") { if (is_front_page()) { $my_link_class = "home-link current-menu-item"; } else { $my_link_class = "home-link"; } $newmenuitem = "

    • "; $nav = $newmenuitem.$nav; } return $nav; }

    Обратите также внимание на условный оператор проверки главной страницы, т.к. нам нужно вставить класс активного пункта меню, если что.

    Тут есть парочка нюансов. Фильтр будет применен для меню, привязанного к локации (месту в шаблоне) под названием main_menu, поэтому иконка домика появится только там. Кроме того автоматически считывается заголовок главной страницы (учтите это, если у вас он какой-то специфический). Ну, и как вы сами понимаете, «проблемы» с поддержкой адаптивности, озвученные чуть выше, здесь также надо решать.

    WordPress плагин для меню с картинками

    2. Этот прием добавляет в пункты новый элемент — класс стилей. Указываем в желаемом объекте название, например, my — menu .

    3. Затем переходите в раздел «Медиафайлы» и загружаете необходимое для показа изображение.

    4. После этого открываете файл стилей шаблона (style.css) и вставляете туда следующий код:

    .my-menu { background-image : url ("http://ваш_сайт/wp-content/uploads/menuimg.png" ) ; background-repeat : no-repeat ; background-position : left ; padding-left : 20px ; }

    My-menu { background-image: url("http://ваш_сайт/wp-content/uploads/menuimg.png"); background-repeat: no-repeat; background-position: left; padding-left: 20px; }

    Сохраняете и смотрите результат.

    В принципе, как я уже говорил выше, тут есть разные нюансы. Во-первых, можно было бы вообще не создавать новый класс, а просто посмотреть HTML код сайта и прописать стили, например, для #menu-item-121 и т.п. — система автоматически добавляет ID каждому пункту навигации.

    Во-вторых, данный пример использования CSS свойства background можно заменить на тот же Font Awesome:

    li#menu-item-2996 a: before { content : "\f015 " ; font-family : FontAwesome; padding-right : 7px ; }

    li#menu-item-2996 a:before { content: "\f015"; font-family: FontAwesome; padding-right: 7px; }

    Все зависит от того какую именно задачу вы хотите решить. WordPress плагин для меню с картинками значительно облегчает работу начинающим пользователям, хотя, возможно, он немного избыточен. Вариант с Font Awesome идеально подойдет, если у вас на сайте уже используется данный скрипт. Подключать его через WP админку проще простого. И наконец четвертый способ требует от вас небольших знаний верстки либо внимательного применения кода из статьи.

    А что вы делаете для вставки картинки или иконки в меню WordPress? Делимся опытом и приемами ниже.

    WordPress позволяет легко и оперативно работать с рубриками. Можно создавать сложную иерархию, включать каждую статью в одну или несколько рубрик, делать к ним описания, и много другого полезного. Но вот разработчики не предусмотрели установку изображения к рубрикам – иконок.

    В данной статье мы вас научим, как на украсить иконками и какую пользу это принесёт вашему сайту.

    Чем полезны иконки на рубриках

    Мы знаем, что поисковые системы учитывают поведенческие факторы на сайте, которые зависят от юзабилити – удобства использования (более подробно о юзабилити почитайте ). Также мы знаем, что большую роль в удобстве играет красота. И картинки на рубриках WordPress дадут нужную эстетику.

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

    Изображения у рубрик WordPress – это красиво и удобно. Улучшает юзабилити, поведенческие факторы, которые не останутся незамеченными поисковиками, вследствие чего улучшится ранжирование и посещаемость. Вот такая логика.

    Category & Page Icons

    Как видно из названия плагина,он может сделать картинку не только к рубрикам WordPress, но и к страницам. Но мы расскажем на примере рубрик, и эта инструкция подойдёт и к страницам тоже.

    Итак, сначала как обычно, скачиваем из панели администратора или с сайта разработчика нужный плагин, устанавливаем его и активируем. После активации у нас в консоли появляются настройки в пункте Icons.

    В настройках можно выбрать, в какой папке будут храниться иконки для рубрик WordPress. По умолчанию они закачиваются в wp-content/upload/icons/. При необходимости можно изменить папку. Также в настройках можно выбрать, какого размера будут иконки у категорий. Определять их размер следует из внешнего вида сайта, нужно выбрать такие, которые лучше всего будут смотреться.

    Затем можно приступать к загрузке иконок к рубрикам WordPress, сделать это можно через пункт Add/Delete icons. Иконки следует также подобрать соответственно дизайну сайта. И теперь можно переходить к установке картинок для каждой из рубрик. Это нужно делать в пункте Assign icons to Categories. Объяснять, как это происходит, не станем, так как там всё интуитивно понятно.

    Если вы уже работали с WordPress, то наверняка видели, что все полезное содержимое в виде изображений, таблиц стилей, тем и плагинов в WordPress по-умолчанию хранится в папке wp-content . Но, вероятно, вы не догадывались, что название этой папки можно изменить на что-либо другое, и движок все равно будет работать!

    Одним из преимуществ переименования «wp-content/» является то, что ваш сайт будет выглядеть менее WordPress-ным, в то время как это свойство может также добавить некоего рода безопасности что-ли..

    Сейчас мы покажем как это всё можно проделать.

    Создаем новую папку

    В нашем примере мы переименуем папку wp-content в assets . Обратите внимание, что после переименования этой папки все активированные плагины или темы будут деактивированы и не будут отображаться на назначенных им страницах, так как WordPress не сможет найти их в дефолтном расположении — папке wp-content.

    Модификация конфига

    Теперь нужно проделать несколько изменений в файле wp-config.php , но, всё же лучше сделать резервную копию этого файла перед внесением в него правок. И тогда, в случае чего-то непредвиденного, мы всегда сможем вернуть его из бекапа.

    Для начала добавим следующую строку перед require_once(ABSPATH . ‘wp-settings.php’); (обычно расположена в самом низу) для того, чтобы сообщить WordPress, что путь wp-content был изменен на assets .

    Define ("WP_CONTENT_FOLDERNAME", "assets");

    Затем добавим следующую строку сразу под предыдущей, чтобы указать WordPress на новый путь к папке.

    Define ("WP_CONTENT_DIR", ABSPATH . WP_CONTENT_FOLDERNAME) ;

    После добавления строки выше WordPress снова обнаружит и отобразит список установленных тем и плагинов.

    Для того, чтобы это исправить, добавьте эту строку для указания новой ссылки на папку.

    Define("WP_SITEURL", "http://" . $_SERVER["HTTP_HOST"] . "/"); define("WP_CONTENT_URL", WP_SITEURL . WP_CONTENT_FOLDERNAME);

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

    Следует отметить!

    Существуют некоторые плагины и темы, которые не особо следуют стандартам разработки. Они указывают “wp-content” в качестве пути и ссылки «жестко», зашивая путь в файл, нежедли определяя их налету. В таки случаях плагины и темы могут работать не полностью, либо вообще не работать.
    Более того, это также ломает ссылки к изображениями, которые уже прикреплены к записям и были залиты в папку wp-content .

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

    Как изменить стандартный путь к медиафайлам в WordPress

    Новый загрузчик медиа файлов, появившийся в версии 3.5 — наверное одно из самых значительных изменений в той версии. Другим важным изменением, но менее обсуждаемым, было исчезновение настройки в админ.панели для изменения директории для загрузок из меню Параметры . Причиной данного удаления из интерфейса было то, что она не так часто использовалась, нежели другие опции. Также ее изменение могло привести к плачевным последствиям для сайта, если пользователь сделал это случайно. Удаление настройки упростило интерфейс, и оставили только возможность организации папок по месяцам/годам. Ниже мы расскажем, как изменить стандартный путь к медиа файлам в WordPress 3.5+.

    Примечание: Производите нижеуказанные действия, если вы НЕ новичок в WordPress. Или же если вы понимаете, что делаете.

    Для изменения стандартного пути к медиа файлам вам необходимо отредактировать файл wp-config.php , расположенный в корневой директории установленного у вас WordPress. Если вы хотите, чтобы папка для загрузок у вас выглядела так wp-content/files , то необходимо поместить следующий код в wp-config.php :

    Define("UPLOADS", "wp-content/"."files");

    Если же вы хотите, чтобы ваша папка для загрузок находилась вне директории wp-content, например http://www.example.com/files/ , то вам нужно установить путь для загрузок в wp-config.php вот так:

    Define("UPLOADS", ""."files");

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

    Примерка © 2024 Все о чистоте и порядке