Привет. Каждый человек, который ведет свой и использует публичный шаблон, хочет внести в него немного уникальности. Иногда такая самодеятельность нарушает юзабилити сайта, поэтому прочитайте мои статьи в двух частях: первая и вторая.
Сегодня я покажу вам, как задать иконки для меню в 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». Вы увидите таблицу, в которой будут названия рубрик, а напротив каждой рубрики будет выпадающий список с названиями загруженных иконок. Выбирайте нужную иконку для каждой рубрики. Выбранная иконка будет видна, как на скриншоте.
Так как я разрабатываю под заказ шаблоны (темы) на 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 |
Выбрал самые ходовые иконки, а остальные вы можете посмотреть на официальном сайте.
Время на чтение: 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? Прочитав эту статью, Вы узнаете, как это сделать.
Таксономии – это способ группирования разных вещей в 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. Опытные пользователи могут найти примеры кода на странице плагина.
Loading...