web-dev-qa-db-ja.com

プログラムでFont-Awesomeアイコンをカテゴリーに追加する

サイドバーのカテゴリウィジェットを使用していて、ウィジェットに表示されている各カテゴリの横に Font Awesomeアイコン を表示したいです。現時点では、アイコンはすべてのカテゴリで同じですが、将来的には各カテゴリに固有のアイコンを付けたいと思います。

My functions.php ファイルのコードを使用してCategoriesウィジェットを変更し、カテゴリのlink/anchor要素afterにカテゴリのタイトルに_ <i class="fa fa-chevron-right"></i>のようなマークアップを挿入してアイコンを追加します。私はCSSでこれを達成することができましたが、そうすることで私は表示するアイコンをプログラム的に決定する能力を失い、将来私が望むかもしれない他の改良/変更に対する柔軟性も失います。


基本的に、私はこの効果を達成したいと思います：

カタログ1> 
 
カタログ2> 
 
カタログ3>

（大なり記号 '>'はカテゴリのタイトルに対するアイコンの配置を表します）


以下のようにwp_enqueue_scriptsフックを使用してfunctions.phpファイルにFont Awesomeをエンキューしました。そしてアイコンを完全にロードして表示します。私はWordPress用に構築されたFont Awesomeプラグインを一切使用していません。

/* Enqueue Scripts
-----------------------------------------------------------------*/
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'); 
}

私の最善の研究努力にもかかわらず、私はカテゴリウィジェットを修正するための解決策を見つけることができませんでした。

functionswidgetsfiltersicon
1
MrJustin

仮定：

Font Awesomeパッケージをどのようにインストールしたいのかは説明していませんので、とりあえず Font Awesome Icons というプラグインを使っていると思います。

あなたが書いた：

誰かが背景画像を使うと言う前に、私はそれをしたくありません。私はそれが身体的であることを望みます。

それで、私はあなたが<i>タグを直接使いたいと思います、例えば：

<i class="fa icon-caret-right"></i>

ウィジェットカテゴリリストの各カテゴリリンクの後に 。

アイディア：

ウィジェットカテゴリリストの出力を変更するには、wp_list_categoriesフィルタを使用できます。

例：

これはwp_list_categoriesフィルタを通してカテゴリリストにそれを注入する方法の簡単な例です：

/**
 * Inject Font Awesome <i> tag after each widget category link
 *
 * @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' );
 });

これにより、次のような出力が得られます。

catlist

5
birgire

この答え には、かなり単純なCSSソリューションが含まれています。

基本的に、あなたはあなたのスタイルシートに以下を追加するでしょう：

.cat-item cat-item-7 {
     list-style-image: url('my-epic-news-icon');
}


cat-item cat-item-11 {
     list-style-image: url('my-epic-jquery-icon');
}

等

はい、それは非常に動的な解決策ではありませんが、あなたのカテゴリは変更される可能性が低いと思います。

5
JMB

fa-chevron-rightアイコン を使用したいと仮定すると、単にCSSを介してリスト項目をターゲットにする必要があります。 :after擬似クラスを使用してください。

.list-item:after {
    font-family: FontAwesome; // or whatever the font awesome family is registered as
    content: '\f054';
}

編集する

そこで、コールバックを介して動的CSS（カスタムPluginオプションに簡単に適応させることができる）を渡す方法についての考えを与えるために、これは例です：

（注：「プラグイン」と「テーマ」は以下で交換可能です。）

まず、CSSを修正して、特にウィジェット内のリスト項目をターゲットにします。 WordPressはWidgetコンテナにクラス.widgetを追加します。だからあなたはそれをターゲットにすることができます：

.widget .list-item:after {}

あるいは、これがすべてカスタムウィジェットを登録するプラグインにまとめられている場合は、$widget_ops配列を介してカスタムウィジェットで定義したCSSクラスをターゲットにすることができます。

$widget_ops = array( 
    'classname' => 'custom-widget-classname', 
    'description' => __( 'Custom Widget Description', 'namespace' ) 
);

だから、あなたはそのカスタムクラス名をターゲットにすることができます：

.custom-widget-classname .list-item:after {}

あるいは、コアの「カテゴリ」ウィジェットをターゲットにしたい場合は、.widget_categoriesクラスを使用できます。その方法を例に取ります。

wp_headにフックされたコールバックの中に入れますが、wp_print_stylesも同じように簡単に使えます。

function pluginslug_fontawesome_styles() {
    // Code will go here
}
add_action( 'wp_head', 'pluginslug_fontawesome_styles' );

内部では、上の規則に従ってスタイルシートを出力します。

function pluginslug_fontawesome_styles() {
    ?>
<script type="text/css">
.widget_categories .list-item:after {
    font-family: FontAwesome; // or whatever the font awesome family is registered as
    content: '\f054';
}
</script>
    <?php
}
add_action( 'wp_head', 'pluginslug_fontawesome_styles' );

これで完了です。簡単です。しかし、あなたはすでにPHP関数の中にいるので、変数を使うことで、このスタイルシート dynamic を簡単に作ることができます。

function pluginslug_fontawesome_styles() {

    // Define list-style icon variable
    $list_item_icon = '\f054';

    // ...snip:
    content: <?php echo $list_item_icon; ?>;

そのため、カスタムPluginオプションの値を変数に渡すだけで簡単に使用できます。

function pluginslug_fontawesome_styles() {

    // Get Plugin options, assumed to be an array
    $plugin_options = get_option( 'pluginslug_plugin_options' );

    // Define list-style icon variable
    $list_item_icon = $plugin_options['list_item_icon'];

    // Output stylesheet
    ?>
<script type="text/css">
.widget_categories .list-item:after {
    font-family: FontAwesome; // or whatever the font awesome family is registered as
    content: <?php echo $list_item_icon; ?>;
}
</script>
    <?php
}
add_action( 'wp_head', 'pluginslug_fontawesome_styles' );

だからそれはそれだ！動的CSSは、実際のアイコン（背景画像ではありません）を出力し、Pluginオプションから引き出します。

そしてそれは単なるCSSなので、あなたが想像できるほとんどすべてのセレクターに容易に拡張できます - ただウィジェットの中のリスト項目に限定されません。

4
Chip Bennett

私はこのようにするでしょう：

// If you're using the widget only on specific pages,
// you might want to use some appropriate conditions here
add_action('wp_enqueue_scripts', function() {
    wp_enqueue_style('font-awesome',
        '//netdna.bootstrapcdn.com/font-awesome/4.0.3/css/font-awesome.css');
});

function wpse_128247_font_awesome_categories($cat_name) {
    // Define your desired icon here
    $icon = ' <i class="fa fa-smile-o"></i>';

    return $cat_name.$icon;
} // function wpse_128247_font_awesome_categories

function wpse_128247_add_filter($cat_args) {
    add_filter('list_cats', 'wpse_128247_font_awesome_categories');

    // Since we're hijacking this filter, we just pass through its data
    return $cat_args;
} // function wpse_128247_add_filter
add_filter('widget_categories_args', 'wpse_128247_add_filter');

function wpse_128247_remove_filter($output) {
    remove_filter('list_cats', 'wpse_128247_font_awesome_categories');

    // Since we're hijacking this filter, we just pass through its data
    return $output;
} // function wpse_128247_remove_filter
add_filter('wp_list_categories', 'wpse_128247_remove_filter');

まず、素晴らしいスタイルのフォントをエンキューします。次に、私たちはいくつかのフィルターをハイジャックしてカテゴリーリストのために私たち自身のフィルターを追加/削除します。それでおしまい。

//編集：
コメントがない場合は、すでにFont Awesomeにエンキューしてクロージャを使用し、フィルタを自分自身で削除しているという事実に合わせて、コードは次のようになります。

function wpse_128247_font_awesome_categories($cat_name) {
    remove_filter(current_filter(), __FUNCTION__);
    return $cat_name.' <i class="fa fa-smile-o"></i>';
} // function wpse_128247_font_awesome_categories

function wpse_128247_add_filter($cat_args) {
    add_filter('list_cats', 'wpse_128247_font_awesome_categories');
    return $cat_args;
} // function wpse_128247_add_filter
add_filter('widget_categories_args', 'wpse_128247_add_filter');

overkill とは言いません。しかし、はい、私のコードはbirgireの現在のソリューションよりも多くの行で構成されています。

2
tfrommen