Меняем стандартные пути к папкам в WordPress. Меняем стандартные пути к папкам в WordPress Плагин Category & Page Icons
WordPress позволяет легко и оперативно работать с рубриками. Можно создавать сложную иерархию, включать каждую статью в одну или несколько рубрик, делать к ним описания, и много другого полезного. Но вот разработчики не предусмотрели установку изображения к рубрикам – иконок.
В данной статье мы вас научим, как на украсить иконками и какую пользу это принесёт вашему сайту.
Чем полезны иконки на рубриках
Мы знаем, что поисковые системы учитывают поведенческие факторы на сайте, которые зависят от юзабилити – удобства использования (более подробно о юзабилити почитайте ). Также мы знаем, что большую роль в удобстве играет красота. И картинки на рубриках WordPress дадут нужную эстетику.
Кроме того и удобство эти иконки улучшат. Ведь если в меню используются рубрики WordPress с картинками, то сразу становится понятно, что кроется под каждой из категорий даже без прочтения названия.
Изображения у рубрик WordPress – это красиво и удобно. Улучшает юзабилити, поведенческие факторы, которые не останутся незамеченными поисковиками, вследствие чего улучшится ранжирование и посещаемость. Вот такая логика.
Category & Page Icons
Как видно из названия плагина,он может сделать картинку не только к рубрикам WordPress, но и к страницам. Но мы расскажем на примере рубрик, и эта инструкция подойдёт и к страницам тоже.
Итак, сначала как обычно, скачиваем из панели администратора или с сайта разработчика нужный плагин, устанавливаем его и активируем. После активации у нас в консоли появляются настройки в пункте Icons.
В настройках можно выбрать, в какой папке будут храниться иконки для рубрик WordPress. По умолчанию они закачиваются в wp-content/upload/icons/. При необходимости можно изменить папку. Также в настройках можно выбрать, какого размера будут иконки у категорий. Определять их размер следует из внешнего вида сайта, нужно выбрать такие, которые лучше всего будут смотреться.
Затем можно приступать к загрузке иконок к рубрикам WordPress, сделать это можно через пункт Add/Delete icons. Иконки следует также подобрать соответственно дизайну сайта. И теперь можно переходить к установке картинок для каждой из рубрик. Это нужно делать в пункте Assign icons to Categories. Объяснять, как это происходит, не станем, так как там всё интуитивно понятно.
Время на чтение: 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 - выбрать иконку для страниц и рубрик, соответственно. Здесь все очень просто: напротив каждой рубрики (страницы) поле выбора иконки из списка тех, что Вы закачали. Все что остается - это указать иконку и нажать Сохранить.
Нашел 2 интересных плагина для оформления меню и рубрик (категорий). Плагины предназначены для установки иконок к меню блога и к рубрикам wordPress. Согласитесь, куда лучше будет выглядеть ваш сайт с украшенными рубриками и меню иконками. Статья написана для людей кто предпочитает легко и быстро к тому же качественно украсить свой блог.
- Установка плагина Easy Category Icons.
- Как установить иконки к рубрикам WordPress и где их скачать?
- Плагин иконок для меню WordPress.
Установка плагина Easy Category Icons
Давайте теперь приступим к установке самого плагина. Для этого в консоли wordPress нажимаем плагины, добавить новый. Далее в строку поиска вписываем название.
Плагин находится на первом месте. Жмете зеленую кнопку установить. После установки активируйте плагин. В дальнейшем с плагином для установки иконок к рубрикам ничего не нужно настраивать.
Плагин имеет 5 звезд что говорит о его популярности и хорошей работоспособности.
С установкой разобрались. Теперь перейдем к самому интересному. Это украшение рубрик иконками.
Как установить иконки для рубрик WordPress и где их скачать?
Прежде чем перейти к установке иконок к рубрикам нам нужно их скачать. У вас должен быть готовый набор картинок для дальнейшей работы. Скачать иконки для вордпресс можно на сайте по адресу http://iconbird.com/. Внимание ссылка не кликабельная. Можете скопировать адрес и вставить в браузер. Там вы найдете множество разных иконок под темы своих категорий. Отлично, теперь у нас есть иконки загруженные на компьютер. Теперь переходим к украшению рубрик.
На самом деле нет ничего сложного. Переходим в своей консоли в раздел рубрики. Выбираем нужную нам категорию и кликаем по ней. Прокручиваем страницу в низ. Ставим галочку на против upload image.
- Загрузить файлы.
- Выберите файлы.
- Находим нужные нам иконки на компе.
- Кликаем на нужную иконку 1 раз.
- Выбираем открыть.
- После загрузки жмем применить.
Вот и все иконка к рубрике установилась. Прокручиваем страницу в самый низ и обновляем рубрику. Можете теперь посмотреть как изменилась рубрика на вашем блоге. Пример оформленных рубрик с помощью плагина можете посмотреть на моем блоге в верху.
Аналогично похожим способом можно добавить иконки к меню блога или сайта. Для этого существует другой плагин под названием Menu Icons.
Плагин иконок для меню WordPress
Для установки плагина в консоли выбираем плагины=> добавить новый. Пишем в поиске Menu Icons, готово плагин найден. Теперь жмем установить, после активируем плагин.
Теперь для установки иконки нужно переместиться в меню. Делаем следующее выбираем в консоли внешний вид=> меню. Установим для примера иконку для главной страницы.
Клацаем выбрать. Скажу что плагин содержит 212 бесплатных иконок. Есть что выбрать. Я выбрал домик для главной страницы блога. Все теперь щелкаем кнопку выбрать.
Получаем вот такой результат. Можете менять иконки когда вам вздумается. Они легко и быстро удаляются, также моментально добавляются.
Для наглядности можете взглянуть на мое оформленное меню с помощью данного плагина. Такое меню с иконками может быть и у вас. Удачи вам с оформлением своего блога.
Не знаете как добавить изображения к своим рубрикам, меткам и другим таксономиям в 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. Опытные пользователи могут найти примеры кода на странице плагина.
Так как я разрабатываю под заказ шаблоны (темы) на 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»
| Вид иконки | НТМL код | CSS код |
| dashicons-menu | \f333 | |
| dashicons-admin-site | \f319 | |
| dashicons-dashboard | \f226 | |
| dashicons-admin-post | \f109 | |
| dashicons-admin-media | \f104 | |
| dashicons-admin-links | \f103 | |
| dashicons-admin-page | \f105 | |
| dashicons-admin-comments | \f101 | |
| dashicons-admin-appearance | \f100 | |
| dashicons-admin-plugins | \f106 | |
| dashicons-admin-users | \f110 | |
| dashicons-admin-tools | \f107 | |
| dashicons-admin-settings | \f108 | |
| dashicons-admin-network | \f112 | |
| dashicons-admin-home | \f102 | |
| dashicons-admin-generic | \f111 | |
| dashicons-admin-collapse | \f148 | |
| dashicons-welcome-write-blog | \f119 | |
| dashicons-welcome-add-page | \f133 | |
| dashicons-format-aside | \f123 | |
| dashicons-format-image | \f128 | |
| dashicons-format-gallery | \f161 | |
| dashicons-format-video | \f126 | |
| dashicons-format-status | \f130 | |
| dashicons-format-quote | \f122 | |
| dashicons-format-chat | \f125 | |
| dashicons-format-audio | \f127 | |
| dashicons-camera | \f306 | |
| dashicons-images-alt2 | \f233 | |
| dashicons-video-alt | \f234 | |
| dashicons-video-alt2 | \f235 | |
| dashicons-video-alt3 | \f236 | |
| dashicons-media-archive | \f501 | |
| dashicons-media-audio | \f500 | |
| dashicons-media-code | \f499 | |
| dashicons-media-default | \f498 | |
| dashicons-media-document | \f497 | |
| dashicons-media-text | \f491 | |
| dashicons-media-video | \f490 | |
| dashicons-playlist-audio | \f492 | |
| dashicons-playlist-video | \f493 | |
| dashicons-controls-volumeon | \f521 | |
| dashicons-controls-volumeoff | \f520 | |
| dashicons-editor-video | \f219 | |
| dashicons-lock | \f160 | |
| dashicons-calendar | \f145 | |
| dashicons-calendar-alt | \f508 | |
| dashicons-visibility | \f177 | |
| dashicons-post-status | \f173 | |
| dashicons-edit | \f464 | |
| dashicons-trash | \f182 | |
| dashicons-list-view | \f163 | |
| dashicons-twitter | \f301 | |
| dashicons-rss | \f303 | |
| dashicons-email | \f465 | |
| dashicons-email-alt | \f466 | |
| dashicons-facebook | \f304 | |
| dashicons-googleplus | \f462 | |
| dashicons-networking | \f325 | |
| dashicons-hammer | \f308 | |
| dashicons-universal-access | \f483 | |
| dashicons-universal-access-alt | \f507 | |
| dashicons-tickets | \f486 | |
| dashicons-nametag | \f484 | |
| dashicons-clipboard | \f481 | |
| dashicons-heart | \f487 | |
| dashicons-megaphone | \f488 | |
| dashicons-wordpress | \f120 | |
| dashicons-wordpress-alt | \f324 | |
| dashicons-update | \f463 | |
| dashicons-info | \f348 | |
| dashicons-cart | \f174 | |
| dashicons-cloud | \f176 | |
| dashicons-translation | \f326 | |
| dashicons-tag | \f323 | |
| dashicons-location | \f230 | |
| dashicons-shield | \f332 | |
| dashicons-search | \f179 | |
| dashicons-chart-pie | \f184 | |
| dashicons-chart-bar | \f185 | |
| dashicons-groups | \f307 | |
| dashicons-businessman | \f338 | |
| dashicons-testimonial | \f473 | |
| dashicons-portfolio | \f322 | |
| dashicons-book | \f330 | |
| dashicons-book-alt | \f331 | |
| dashicons-download | \f316 | |
| dashicons-upload | \f317 | |
| dashicons-clock | \f469 | |
| dashicons-lightbulb | \f339 | |
| dashicons-microphone | \f482 | |
| dashicons-desktop | \f472 | |
| dashicons-smartphone | \f470 | |
| dashicons-phone | \f525 | |
| dashicons-carrot | \f511 | |
| dashicons-store | \f513 | |
| dashicons-palmtree | \f527 | |
| dashicons-album | \f514 | |
| dashicons-smiley | \f328 |
Выбрал самые ходовые иконки, а остальные вы можете посмотреть на официальном сайте.
