Italiano
Español
RomânăПрограммное добавление иконок Font-Awesome к виджету категорий
Я использую виджет "Категории" в сайдбаре(ах) и хотел бы отображать иконку Font Awesome рядом с каждой категорией в виджете. Пока иконка будет одинаковой для всех категорий, но в будущем я хочу назначить каждой категории свою уникальную иконку.
Я хочу модифицировать виджет "Категории" с помощью кода в файле functions.php, добавив иконку путем вставки разметки типа <i class="fa fa-chevron-right"></i> в элемент ссылки/якоря категории после названия категории. Я мог бы сделать это через CSS, но тогда потеряю возможность программно определять, какую иконку отображать, а также гибкость для других улучшений/изменений, которые я могу захотеть сделать в будущем.
По сути, я хочу добиться такого эффекта:
Кат 1 > Кат 2 > Кат 3 >
(Символ '>' обозначает расположение иконки относительно названия категории)
Я подключил Font Awesome в файле functions.php с помощью хука wp_enqueue_scripts следующим образом, и он загружается и отображает иконки идеально. Обратите внимание, что я не использую никаких плагинов Font Awesome для WordPress.
/* Подключение скриптов
-----------------------------------------------------------------*/
add_action( 'wp_enqueue_scripts', 'essentials_enqueue_scripts' );
function essentials_enqueue_scripts() {
/* jQuery */
wp_enqueue_script('jquery');
wp_enqueue_script( 'jquery_ui', "http" . ($_SERVER['SERVER_PORT'] == 443 ? "s" : "") . "://ajax.googleapis.com/ajax/libs/jqueryui/2.0.3/jquery-ui.min.js", false, null);
wp_enqueue_script( 'waypoints', get_template_directory_uri() . '/js/waypoints.min.js');
wp_enqueue_script( 'essentials_main', get_template_directory_uri() . '/js/essentials_main.js', array(), '1.0.0', true );
wp_enqueue_script( 'essentials_show_stuff', get_template_directory_uri() . '/js/essentials_show_stuff.js', array(), '1.0.0', true );
/* Google Fonts */
wp_register_style('GoogleFonts','http://fonts.googleapis.com/css?family=Open+Sans:300,400,600,700,800|Bad+Script');
wp_enqueue_style( 'GoogleFonts');
/* Font Awesome Fonts */
wp_register_style('Font Awesome','//netdna.bootstrapcdn.com/font-awesome/4.0.3/css/font-awesome.css');
wp_enqueue_style( 'Font Awesome');
}
Несмотря на все мои усилия в поисках решения, мне не удалось найти способ модификации виджета категорий.
Предположения:
Вы не объясняете, как именно хотите установить пакет Font Awesome, поэтому я предполагаю, что вы используете плагин Font Awesome Icons.
Вы написали:
Прежде чем кто-то предложит использовать фоновое изображение, я не хочу этого делать. Мне нужно физическое отображение.
поэтому я предполагаю, что вы хотите использовать тег <i> напрямую, например:
<i class="fa icon-caret-right"></i>
после каждой ссылки на категорию в виджете списка категорий.
Идея:
Вы можете использовать фильтр wp_list_categories для изменения вывода виджета списка категорий.
Пример:
Вот простой пример, как вставить его в список категорий через фильтр wp_list_categories:
/**
* Добавляет тег Font Awesome <i> после каждой ссылки в виджете категорий
*
* @param string $output
* @return string $output
*/
function custom_wp_list_categories( $output )
{
remove_filter( current_filter(), __FUNCTION__ );
return str_ireplace( '</li>', '<i class="fa icon-caret-right"></i></li>', $output);
}
add_action( 'widgets_init', function(){
add_filter( 'wp_list_categories', 'custom_wp_list_categories' );
});
Это даст вам вывод, похожий на этот:
Отличный фрагмент кода, я проверю его, когда вернусь чуть позже. Я опубликую результаты.
MrJustin
Просто не забудьте изменить имя класса в соответствии с вашими потребностями ;-) Я использовал icon-caret-right, потому что это правило именования классов согласно плагину. В других случаях это может быть fa-caret-right.
birgire
return str_ireplace( '</li>', '<i class="fa fa-chevron-right"></i></li>', $output); сработало, а return str_ireplace( '</a></li>', '<i class="fa fa-chevron-right"></i></a></li>', $output); — нет.
MrJustin
хорошо, вы хотите добавить это внутри тега <a></a>, тогда попробуйте это: return preg_replace( '/<\/a>\s*<\/li>/i', ' <i class="fa fa-chevron-right"></i></a></li>', $output );
birgire
Хорошо, теперь я запутался в новой части... как именно это работает? Я понимаю последнюю часть, но не первую.
MrJustin
То, что ответ предполагает использование чистого CSS, говорит о том, что исходный вопрос не соответствует тематике WPSE. Тем не менее: я думаю, что в ваших CSS-селекторах неправильный синтаксис. Вам следует использовать .cat-item.cat-item-7 — или, поскольку предполагается использование одного и того же иконки-шрифта для всех элементов списка, просто .cat-item. Кроме того: иконка-шрифт использует атрибут content и применяется к псевдоклассу :after, например: .cat-item:after { content: '\f18d'; }.
Chip Bennett
Справедливые замечания. Да, я допустил ошибку в синтаксисе. Мы уверены, что автор вопроса хочет одну и ту же иконку, а не разные для каждой категории? (Я понял вопрос именно так). Я просто хотел предложить самое простое решение, хотя это действительно выводит вопрос/ответ за рамки тематики.
JMB
Это не то решение, которое я искал, так как я уже говорил, что не хочу использовать background и что мне нужно, чтобы иконка была после текста. Хотя это может и не быть background, но это всё равно изображение, а не Font Awesome. Хорошее решение, но не подходящее для меня.
MrJustin
Очень хороший вариант, но мне нужна была функция. :)
MrJustin
Вы знаете, что можно обернуть CSS-правила в колбэк и добавить их через wp_head или wp_print_styles, верно? Но эта часть реализации — отдельный вопрос и выходит за рамки заданного.
Chip Bennett
Да, я знаю, как добавлять стили. Однако я не хочу использовать CSS. Я понимаю, что это быстрый и эффективный способ, и я действительно ценю ваш подход... но, возможно, мне следовало сказать «мне нужна» вместо «хотелось бы», когда речь идет о функции.
MrJustin
Пожалуйста, ознакомьтесь с отредактированным вопросом. Я добавил пример, чтобы показать, как всю эту задачу действительно можно решить с помощью CSS — динамично, расширяемо и с учетом пользовательских настроек плагина.
Chip Bennett
Хорошо, но что, если я хочу, чтобы иконка всплывала справа? В моем обычном CSS я прикрепил ее к li a:after {content} и попробовал: text-align: right, но это не сработало. Чтобы уточнить, я имею в виду, что если я хочу, чтобы все иконки были справа от LI, а текст — слева. Допустим, ul/li установлен на 250px, текст всегда является ссылкой, но я задал ему display: block. Затем я добавил 'иконку' и хочу, чтобы она располагалась справа от li. С помощью <i...></i> я могу легко сделать это через float.
MrJustin
Ваше решение было неплохим, но избыточным по сравнению с вариантом birgire. У меня уже подключен Font-Awesome, извините, что не уточнил.
MrJustin
Да, этот код нельзя назвать избыточным, я согласен. Возможно, он просто выглядел объемнее из-за 4 функций вместо 2 и количества комментариев. Я ценю комментарии, я не против них. Просто визуально казалось, что кода больше :).
MrJustin
Поскольку вы используете remove_filter для функции, добавляющей иконку, она выполнится только один раз. Это означает, что иконка будет добавлена только к первому элементу в списке widget_categories.
WPExplorer