如何在Customizer自定义FontAwesome选择字段

最近博主喜欢上了WordPress customizer,wordpress自带的后台自定义框架,通过它,我们就能轻松的在后台为主题设计各种选项。但在这篇文章我不会介绍WordPress customizer的详细信息,您可以在https://codex.wordpress.org/Theme_Customization_API上详细的阅读它们。在这里,我们只展示如何创建自定义控件,在这种情况下,该控件是为选项列出了 FontAwesome提供的图标。

elements-envato 如何在Customizer自定义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 &#xf26e;",
        "fa-adjust" => "adjust &#xf042;",
        "fa-adn" => "adn &#xf170;",
        "fa-align-center" => "align-center &#xf037;",
        "fa-align-justify" => "align-justify &#xf039;",
        // ...
        "fa-yelp" => "yelp &#xf1e9;",
        "fa-yen" => "yen &#xf157;",
        "fa-youtube" => "youtube &#xf167;",
        "fa-youtube-play" => "youtube-play &#xf16a;",
        "fa-youtube-square" => "youtube-square &#xf166;",
      );
        return $icons;
    }
}

当然。上面的两段代码只是核心代码。至于如何在wordpress前端和后台引用FontAwesome图标请自行解决,您可以通过谷歌,百度等找到很多教程。在这里我们就不一一写教程了。

本文已在Ie主题99839发布

文章来源:https://ietheme.com/fontawesome-wordpress-customizer-field.html


发表评论

撰写评论

电子邮件地址不会被公开。 必填项已用*标注

加入我们

注册完成!

密码重置

请输入您的邮箱地址。 您将收到一个链接来创建新密码。

检查你的邮件中的确认链接。