Плагин category and page icons. Как вывести стандартные Dashicons-иконки на WordPress? Плагин Category & Page Icons

Так как я разрабатываю под заказ шаблоны (темы) на WordPress, я открыл для себя новую возможность – набор иконок «Dashicons» , которые стоят по умолчанию на wordpress , начиная с версии 3.8. Эти иконки можно увидеть в админ-панеле WordPress.

Примерное число иконок около 200 шт.
Преимущество иконок «Dashicons» в том, что они остаются в хорошем качестве, независимо от размера, который вы укажите в CSS-стилях.
Для админ-панели иконки «Dashicons» можно использовать сразу без подключения, а вот если вы хотите использовать иконки в шаблоне (теме), то нужно их подключить.

Как подключить иконки «Dashicons» к шаблону (темы)

Для того, чтобы использовать иконок «Dashicons» не только в админ-панеле, но и на блоге или сайте, вам нужно подключить css-файл «/wp-includes/css/dashicons.min.css »:

Делается это двумя способами.
1 способ.
Подключение иконок «Dashicons» можно осуществить через файл шаблона «header.php». Добавьте между тегами вот этот код:

2 способ.
Подключение иконок «Dashicons» можно осуществить через файл «functions.php» . Вставьте вот этот код перед знаком «?> »:

Function my_dashicons() { wp_enqueue_style("dashicons"); } add_action("wp_enqueue_scripts", "my_dashicons");

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

Как вывести иконки «Dashicons»

○ Для HTM:

Вставляете специальный класс «dashicons » и «dashicons-* », где «* » - название иконки (название иконки см. в таблице ниже ):

Можно и так:

Результат:

Если нужно увеличить иконку и поменять цвет, сделайте вот так:

font-size – размер иконки
color – цвет

○ Для CSS :

Добавьте:

Сайт-myicon1:before { content: "\f303"; display: inline-block; -webkit-font-smoothing: antialiased; font: normal 22px/1 "dashicons"; vertical-align: top; }

сайт-myicon1 – это класс. Замените на свой
:before – иконка будет добавляться перед элементом (:after – иконка будет добавляться после элемента )
\f303 – код иконки (смотрите таблицу ниже )
font – размер и название шрифта. Обязательно укажите «dashicons »

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

Таблица иконок «Dashicons»

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

Время на чтение: 5 мин

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

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

Category and Page Icons позволяет установить свои иконки для рубрик, что отображаются в Вашем сайбдаре (боковой панели сайта) при помощи виджета. Аналогично и со страницами (не путать со статьями), которые Вы создаете через админку своего блога. Смотрите скриншот:

На скриншоте представлены три рубрики и напротив каждой стоит своя иконка. Именно это и делает рассматриваемый плагин.

Какого то специального вмешательства в код сайта, чтобы подключить плагин, ненужно. Он автоматически начинает работать, если в коде сайта используются функции wp_list_pages и wp_list_categories .

Все, установили и активировали. Теперь в консоли админки сайта появился новый блок, под названием Icons . В этом блоке 2 подраздела:

• Icons - в этом разделе мы: закачиваем иконки; назначаем иконки для конкретных рубрик и страниц; удаляем иконки.
• Settings (Настройки) - здесь: назначаем папку, в которой будут лежать иконки; устанавливаем ширину и высоту иконок.

Начнем (Settings) с настроек именно этого пункта (так надо:)))

В настройках по порядку идет:

• Место расположение папки с иконками на Вашем хотстинге. По умолчанию это wp-content/uploads/icons . Если у Вас есть острая необходимость, то можете изменить этот путь, предварительно создав папку и выставив права на нее 777.
• Ширина и высота - тут все понятно: задаем размеры Вашей иконки. Отметив галочку - Вы обрежете картинку большего размера, с сохранением пропорций.
• Delete icons data - при удалении данного плагина Вы можете удалить и настройки иконок для рубрик и страниц, но сами иконки останутся физически у Вас на хостинге.
• Copyright notice - когда галочка будет стоять на этом пункте - у Вас в подвале (футере) сайта будет стоять сквозной линк на разработчиков плагина. Решайте сами.

Теперь очередь закачать иконки (пункт Icons) и начать их размещать.

• Add / Delete icons - нам сразу предлагают закачать иконки на хостинг. Это можно сделать из админки (Choose Icons to upload - Выбрать файл), либо через ftp (вот почему я начал с настроек плагина, где указана папка, куда будем помещать картинки). В этом же пункте мы можем удалить ненужные.
• Пункты меню Assign icons to Pages и 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");

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

Здравствуйте, друзья!

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

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

Пример иконок в рубриках

Яркий пример вы можете видеть на моем сайте в боковой колонке в списке всех рубрик.

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

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

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

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

• Iconfinder - англоязычный сервис;
• Iconsearch - русскоязычный, но выбор иконок меньше, чем в предыдущем.

Иконки для рубрик без плагина

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

• Зеленая рамка - общий класс для ссылок в виджете категорий;
• Красная рамка - индивидуальный класс с числовым значением для конкретной ссылки.

Так как рубрики у нас выводятся списком ul li в боковой колонке, то стоит к данным элементах дописать класс с числовым значением и задать им картинку определенного размера. Например, в моем случае это выглядит следующим образом:

Top_comm_wid > ul li .cat-item-16{ background: url("images/analitia.jpg") no-repeat;; } .top_comm_wid > ul li .cat-item-12{ background: url("images/ps.jpg") no-repeat;; } .top_comm_wid > ul li .cat-item-7{ background: url("images/tech.jpg") no-repeat;; }

Это 3 стиля к разным рубрикам. Как видим, то в каждом стиле сначала идет класс для тегов списка в боковой колонке (.top_comm_wid > ul li).

• .top_comm_wid - класс, с помощью которого прописаны стили для виджета в боковой колонке;
• ul li - тег списка (ненумерованного).

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

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

• Google chrome - просмотр кода элемента;
• Mozilla Firefox - исследовать элемент;
• Opera - проинспектировать элемент.

Просто кликните правой кнопкой мыши на необходимую ссылку и выберете данную функцию в своем браузере. Инструмент исследования элемента даст вам панель с исходным кодом, где сразу выделит нужную строку, в которой и сможете узнать класс стилей, который в дальнейшем прописываем в файле стилей. В моем случае это класс "cat-item-ID рубрики" (см. скриншот выше).

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

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

Top_comm_wid > ul li .cat-item-16{ background: url("images/analitia.jpg") no-repeat;; }

Сначала идет общий класс списка ul li в боковой колонке (.top_comm_wid > ul li), затем индивидуальный класс с идентификатором рубрики (.cat-item-16). Внутри стилей прописываем путь к изображению. В моих стилях путь к картинке прописан с учетом того, что внутри шаблона имеется папка images, в которую я все и загружал. Если папка у вас называется по другому, то придется изменить путь к ней.

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

Таким же образом можно добавить картинки и к пунктам меню, которые также имеют свои идентификаторы.

Принцип аналогичен:

1. Узнаем общий класс для списка в меню;
2. Узнаем индивидуальный класс с ID каждому пункту;
3. Задаем стили для рубрики со свойством background, где указываем путь к иконочному файлу.

Чем мне данный способ не нравится, так это тем, что иконки не кликабельны. Это связано с самой версткой большинства шаблонов, где кликабельна только ссылка на рубрику. Остальная же область, где находится ссылка - не кликабельна.

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

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

Плагин Category & Page Icons

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

Скачиваем плагин с официальной страницы.

Устанавливаете его, активируете и сразу переходим к настройкам.

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

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

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

Как видим, имеется выбор, как оригинального размера, так и уменьшенного. Параметр уменьшения мы ставили в настройках ранее.

1. Назначить иконки для пунктов меню;
2. Назначить иконки для категорий.

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

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

После выбора обязательно сохраните настройки, нажав на кнопку "Сохранить изменения" в самом низу страницы их выбора.

Управление плагином Category & Page Icons не вызывает никаких сложностей и я бы с радостью его оставил у себя на сайте, так как все делается в 2 клика. Но пришлось сделать все руками, так как при активном плагине не работает . Какой-то конфликт скриптов.

На этом все, ребята. Надеюсь, что вы со всем справились и мои материалы помогли вам. Если что, обращайтесь в комментариях. Чем смогу, помогу.

Кстати, а какой способ вы выбрали? Напишите, пожалуйста, в комментах ниже.

Спасибо все за внимание. Жду вас в других материалах. До встречи.

С уважением, Константин Хмелев!

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

Сегодня я покажу вам, как задать иконки для меню в WordPress . Реализовывать будем при помощи плагина Category & Page Icons . Плагин бесплатный, но есть и Pro версия. Он устанавливается прямиком из дистрибутива WordPress в консоли.

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

Настройка плагина Category & Page Icons

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

Далее перейдите в «Settings». Как я и говорил никаких специфических настроек нет. Все, что вам нужно указать по желанию другое место хранения загружаемых иконок. Необходимо указать только сам размер иконок и загружать иконки того же размера, который вы указали, иначе иконки будет уменьшаться/увеличивать и будет утеряна детализация.

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

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

• Cicons-40-Outline-Icons
• Simple_line_icons_by_Mirko_Monti
• Divi-icons
• E-commerce-icons
• Line-icons
• синдром патау осложнения

Когда вы скачали и подготовили иконки, перейдите к их загрузке на сервер. Для этого перейдите в раздел «Icons» и выберите все иконки, которые нужно загрузить. Плагин позволяет загружать иконки массово, а не по одному.

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

Теперь после того, как иконки загружены, давайте зададим их рубрикам. Я покажу пример только для рубрик, так как для страниц процесс ничем не отличается. Перейдите во вкладку «Assign icons to Categories». Вы увидите таблицу, в которой будут названия рубрик, а напротив каждой рубрики будет выпадающий список с названиями загруженных иконок. Выбирайте нужную иконку для каждой рубрики. Выбранная иконка будет видна, как на скриншоте.