Как вывести стандартные Dashicons-иконки на WordPress? Меняем стандартные пути к папкам в WordPress Как изменить стандартный путь к медиафайлам в WordPress
Нашел 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 меню с картинками (иконками). Во-первых, это отличный способ сэкономить место, заменив название главной страницы на «домик». Во-вторых, некоторые символы говорят намного больше нежели текстовые значения — кнопки 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
=
" |
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 = "
Преимущество метода в том, что вы можете и не использовать символьный шрифт (если в теме он не подключен), а просто добавить вывод картинки домика.
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
=
" |
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? Делимся опытом и приемами ниже.
Время на чтение: 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 – это красиво и удобно. Улучшает юзабилити, поведенческие факторы, которые не останутся незамеченными поисковиками, вследствие чего улучшится ранжирование и посещаемость. Вот такая логика.
Category & Page Icons
Как видно из названия плагина,он может сделать картинку не только к рубрикам WordPress, но и к страницам. Но мы расскажем на примере рубрик, и эта инструкция подойдёт и к страницам тоже.
Итак, сначала как обычно, скачиваем из панели администратора или с сайта разработчика нужный плагин, устанавливаем его и активируем. После активации у нас в консоли появляются настройки в пункте Icons.
В настройках можно выбрать, в какой папке будут храниться иконки для рубрик WordPress. По умолчанию они закачиваются в wp-content/upload/icons/. При необходимости можно изменить папку. Также в настройках можно выбрать, какого размера будут иконки у категорий. Определять их размер следует из внешнего вида сайта, нужно выбрать такие, которые лучше всего будут смотреться.
Затем можно приступать к загрузке иконок к рубрикам WordPress, сделать это можно через пункт Add/Delete icons. Иконки следует также подобрать соответственно дизайну сайта. И теперь можно переходить к установке картинок для каждой из рубрик. Это нужно делать в пункте Assign icons to Categories. Объяснять, как это происходит, не станем, так как там всё интуитивно понятно.