最近博主喜欢上了WordPress customizer，wordpress自带的后台自定义框架，通过它，我们就能轻松的在后台为主题设计各种选项。但在这篇文章我不会介绍WordPress customizer的详细信息，您可以在https://codex.wordpress.org/Theme_Customization_API上详细的阅读它们。在这里，我们只展示如何创建自定义控件，在这种情况下，该控件是为选项列出了 FontAwesome提供的图标。
首先创建一个选项
$wp_customize->add_setting( 'your_fontawesome_icon_title',
array(
'default' => 'default' ',
'type' => 'type' option',
'capability' => 'capability edit_theme_options',
'transport' => 'transport' refresh',
)
);
$wp_customize->add_control( new FontAwesome_Dropdown_Custom_Control( $wp_customize, 'your_fontawesome_icon_title',
array(
'label' => __( 'Your fontawesome icon title', 'your-text-domain' ),
'section' => 'your section',
'settings' => 'your_fontawesome_icon_title',
'priority' => 30,
) )
);然后我们创建一个图标控件
if ( ! class_exists( 'WP_Customize_Control' ) )
return null;
/** A class to add a fontawesome icons selector */class FontAwesome_Dropdown_Custom_Control extends WP_Customize_Control
{
private $icons = false;
public function __construct( $manager, $id, $args = array(), $options = array() ) {
$this->icons = $this->get_icons();
parent::__construct( $manager, $id, $args );
}
/**
* Render the content of the dropdown
*
* Adding the font-family styling to the select so that the font renders
* @return HTML
*/ public function render_content() {
if ( ! empty( $this->icons ) ) { ?>
<label>
<span class="customize-category-select-control"><?php echo esc_html( $this->label ); ?></span>
<select <?php $this->link(); ?> style="font-family: 'FontAwesome', Arial;">
<?php
foreach ( $this->icons as $k=>$v ) {
printf('<option value="%s" %s>%s</option>', $k, selected($this->value(), $k, false), $v);
}
?>
</select>
</label>
<?php }
}
/**
* Get the list of Icons
*
* @return string
*/ function get_icons() {
/* populate with a list of icons you want to show */ $icons = array(
"fa-500px" => "500px ",
"fa-adjust" => "adjust ",
"fa-adn" => "adn ",
"fa-align-center" => "align-center ",
"fa-align-justify" => "align-justify ",
// ...
"fa-yelp" => "yelp ",
"fa-yen" => "yen ",
"fa-youtube" => "youtube ",
"fa-youtube-play" => "youtube-play ",
"fa-youtube-square" => "youtube-square ",
);
return $icons;
}
}当然。上面的两段代码只是核心代码。至于如何在wordpress前端和后台引用FontAwesome图标请自行解决，您可以通过谷歌，百度等找到很多教程。在这里我们就不一一写教程了。
本文已在Ie主题由99839发布
文章来源：https://ietheme.com/fontawesome-wordpress-customizer-field.html
