Ícones do FontAwesome no Customizer do WordPress. Este projeto implementa uma funcionalidade no WordPress para permitir que os usuários escolham ícones da biblioteca FontAwesome diretamente no Customizer do tema. A funcionalidade oferece uma interface intuitiva, onde os ícones disponíveis são exibidos como miniaturas (thumbnails) para facilitar a seleção. Isso possibilita a personalização de elementos visuais no frontend, como botões, seções ou menus, diretamente pelo painel de administração.
O sistema é totalmente modular, permitindo a adição de novos ícones à lista conforme necessário. Além disso, os Ícones do FontAwesome no Customizer do WordPress são carregados a partir de uma pasta local dentro do tema, garantindo que os recursos sejam bem integrados ao projeto sem depender de bibliotecas externas carregadas via CDN.
Organize os arquivos: Crie as pastas no tema, como assets/library/font-awesome/ , inc/hooks/, etc. e adicione os arquivos. Por exemplo:
Theme/
├── assets/
│ └── library/
│ └── font-awesome/
│ ├── css/
│ │ └── font-awesome.min.css
│ └── fonts/
│ ├── fontawesome-webfont.eot
│ ├── fontawesome-webfont.svg
│ ├── fontawesome-webfont.ttf
│ ├── fontawesome-webfont.woff
│ └── fontawesome-webfont.woff2
├── inc/
│ ├── customizer/
│ │ └── customizer.php
│ │ ├── customizer-additional-panel-options.php
│ │ ├── customizer-panels.php
│ │ └── customizer-custom-classes.php
│ ├── hooks/
│ │ ├── header-hooks.php
│ │ ├── footer-hooks.php
│ │ └── custom-hooks.php
│ └── template-functions.php
├── functions.php
└── style.css
Índice
Aqui está um exemplo de como criar uma funcionalidade para permitir que o usuário escolha ícones do FontAwesome no Customizer do WordPress, com pré-visualização das thumbnails.
Passo 1: Adicione uma seção ao Customizer
Adicionaremos uma seção no Customizer para selecionar configurações adicionais no painel.
Ícones do FontAwesome no Customizer do WordPress. O código PHP apresentado é um trecho que configura e registra painéis personalizados no Customizer do WordPress para o tema New Theme (mude para o nome do seu tema). O objetivo é organizar as opções do tema em diferentes painéis para facilitar a personalização por parte do usuário. Crie o arquivo customizer-panels.php, cópie cole o código abaixo:
<?php
/**
* New Theme gerenciar os painéis do Customizer
*
* @package Wilson Themes
* @subpackage New Theme
* @since 1.0.0
*/
add_action( 'customize_register', 'new_theme_customize_panels_register' );
/**
* Adicionar painéis no personalizador de temas
*
*/
function new_theme_customize_panels_register( $wp_customize ) {
/**
* Painel de Recursos Adicionais
*/
$wp_customize->add_panel( 'new_theme_additional_panel',
array(
'priority' => 40,
'capability' => 'edit_theme_options',
'theme_supports' => '',
'title' => __( 'Recursos adicionais', 'new-theme' ),
)
);
Passo 2: Adiciona a seção Ícones Sociais ao Customizer
Esse trecho de código PHP adiciona uma nova seção ao painel adicional do Customizer do WordPress para configurar Ícones do FontAwesome no Customizer do WordPress no tema New Theme. Vamos detalhar:
Descrição Geral – Ícones do FontAwesome no Customizer do WordPress
Função new_theme_customize_additinal_panels_sections_register
Seção: Ícones sociais
add_section():- Adiciona a seção
new_theme_section_social_iconsao painel adicional (new_theme_additional_panel). - Propriedades:
title: Nome exibido no Customizer (“Ícones sociais”).panel: Vincula a seção ao painelnew_theme_additional_panel.priority: Define a ordem da seção (5).
Configuração: Campo repetidor para ícones sociais
add_setting():
- Define a configuração
new_theme_social_icons, que armazenará os dados dos ícones sociais em formato JSON. - Propriedades:
capability: Permissão para editar a configuração (edit_theme_options).default: Valor padrão:- Ícone do Twitter (
fa fa-twitter) com URL#. - Ícone do Pinterest (
fa fa-pinterest) com URL#. sanitize_callback: Usawp_kses_postpara limpar os dados salvos.
add_control():
- Adiciona um controle personalizado do tipo repetidor para permitir que o usuário adicione múltiplos ícones sociais.
- O controle é criado utilizando a classe
New_Theme_Control_Repeater. - Propriedades principais:
label: Rótulo exibido (“Mídias sociais”).section: Vincula o controle à seçãonew_theme_section_social_icons.settings: Define a configuração associada (new_theme_social_icons).new_theme_box_label_text: Rótulo para cada item repetidor (“Ícones de mídia social”).new_theme_box_add_control_text: Texto do botão para adicionar novos itens (“Add Icon”).
- Campos do repetidor:
- Define os campos individuais de cada item repetido:
social_icon:- Tipo:
social_icon(provavelmente baseado em uma lista de ícones como Font Awesome). - Rótulo: “Social Icon”.
- Descrição: “Escolha o ícone de mídia social”.
social_url:- Tipo:
url. - Rótulo: “Social Link URL”.
- Descrição: “Insira a URL da mídia social”.
Crie o arquivo customizer-additional-panel-options.php, cópie cole o código abaixo:
<?php
/**
* New Theme gerenciar as opções do Personalizador do painel adicional.
*
* @package Wilson Themes
* @subpackage New Theme
* @since 1.0.0
*/
add_action( 'customize_register', 'new_theme_customize_additinal_panels_sections_register' );
/**
* Adicionar painéis adicionais no tema personalizado
*
*/
function new_theme_customize_additinal_panels_sections_register( $wp_customize ) {
/*------------------------------------------------ Seção de ícones sociais ------------------------------------------------*/
/**
* Ícones sociais
*/
$wp_customize->add_section( 'new_theme_section_social_icons',
array(
'title' => esc_html__( 'Ícones sociais', 'new-theme' ),
'panel' => 'new_theme_additional_panel',
'capability' => 'edit_theme_options',
'priority' => 5,
'theme_supports' => '',
)
);
/**
* Campo repetidor para ícones sociais
*/
$wp_customize->add_setting(
'new_theme_social_icons',
array(
'capability' => 'edit_theme_options',
'default' => json_encode( array(
array(
'social_icon' => 'fa fa-twitter',
'social_url' => '#',
),
array(
'social_icon' => 'fa fa-pinterest',
'social_url' => '#',
)
)
),
'sanitize_callback' => 'wp_kses_post'
)
);
$wp_customize->add_control( new New_Theme_Control_Repeater(
$wp_customize,
'new_theme_social_icons',
array(
'label' => __( 'Mídias sociais', 'new-theme' ),
'section' => 'new_theme_section_social_icons',
'settings' => 'new_theme_social_icons',
'priority' => 5,
'new_theme_box_label_text' => __( 'Ícones de mídia social','new-theme' ),
'new_theme_box_add_control_text' => __( 'Add Icon','new-theme' )
),
array(
'social_icon' => array(
'type' => 'social_icon',
'label' => esc_html__( 'Social Icon', 'new-theme' ),
'description' => __( 'Escolha o ícone de mídia social.', 'new-theme' )
),
'social_url' => array(
'type' => 'url',
'label' => esc_html__( 'Social Link URL', 'new-theme' ),
'description' => __( 'Insira a URL da mídia social.', 'new-theme' )
),
)
)
);
}Passo 3: Adiciona as classes personalizadas de campos do Customizer
Ícones do FontAwesome no Customizer do WordPress. Esse trecho de código PHP adiciona as classes personalizadas do Customizer de campos do Customizer. Crie o arquivo customizer-custom-classes.php, cópie cole o código abaixo:
<?php
/**
* New Theme inclui as classes personalizadas do Customizer de campos do Customizer.
*
* @package Wilson Themes
* @subpackage New Theme
* @since 1.0.0
*/
if ( ! function_exists( 'new_theme_register_custom_controls' ) ) :
function new_theme_register_custom_controls( $wp_customize ) {
if ( ! class_exists( 'New_Theme_Control_Repeater' ) ) {
class New_Theme_Control_Repeater extends WP_Customize_Control {
/**
* The control type.
*
* @access public
* @var string
*/
public $type = 'mt-repeater';
public $new_theme_box_label = '';
public $new_theme_box_add_control = '';
/**
* Os campos que cada linha do contêiner conterá.
*
* @access public
* @var array
*/
public $fields = array();
/**
* Controlador de arrastar e soltar repetidor
*
* @since 1.0.0
*/
public function __construct( $manager, $id, $args = array(), $fields = array() ) {
$this->fields = $fields;
$this->new_theme_box_label = $args['new_theme_box_label_text'] ;
$this->new_theme_box_add_control = $args['new_theme_box_add_control_text'];
parent::__construct( $manager, $id, $args );
}
protected function render_content() {
$values = json_decode( $this->value() );
$repeater_id = $this->id;
$field_count = count( $values );
?>
<span class="customize-control-title"><?php echo esc_html( $this->label ); ?></span>
<?php if ( $this->description ) { ?>
<span class="description customize-control-description">
<?php echo wp_kses_post( $this->description ); ?>
</span>
<?php } ?>
<ul class="mt-repeater-field-control-wrap">
<?php $this->new_theme_get_fields(); ?>
</ul>
<input type="hidden" <?php $this->link(); ?> class="mt-repeater-collector" value="<?php echo esc_attr( $this->value() ); ?>" />
<input type="hidden" name="<?php echo esc_attr( $repeater_id ).'_count'; ?>" class="field-count" value="<?php echo absint( $field_count ); ?>">
<input type="hidden" name="field_limit" class="field-limit" value="6">
<button type="button" class="button mt-repeater-add-control-field"><?php echo esc_html( $this->new_theme_box_add_control ); ?></button>
<?php
}
private function new_theme_get_fields() {
$fields = $this->fields;
$values = json_decode( $this->value() );
if ( is_array( $values ) ) {
foreach( $values as $value ) {
?>
<li class="mt-repeater-field-control">
<h3 class="mt-repeater-field-title"><?php echo esc_html( $this->new_theme_box_label ); ?></h3>
<div class="mt-repeater-fields">
<?php
foreach ( $fields as $key => $field ) {
$class = isset( $field['class'] ) ? $field['class'] : '';
?>
<div class="mt-repeater-field mt-repeater-type-<?php echo esc_attr( $field['type'] ).' '.esc_attr( $class ); ?>">
<?php
$label = isset( $field['label'] ) ? $field['label'] : '';
$description = isset( $field['description'] ) ? $field['description'] : '';
if ( $field['type'] != 'checkbox' ) {
?>
<span class="customize-control-title"><?php echo esc_html( $label ); ?></span>
<span class="description customize-control-description"><?php echo esc_html( $description ); ?></span>
<?php
}
$new_value = isset( $value->$key ) ? $value->$key : '';
$default = isset( $field['default'] ) ? $field['default'] : '';
switch ( $field['type'] ) {
/**
* Campo de texto
*/
case 'text':
echo '<input data-default="'.esc_attr( $default ).'" data-name="'.esc_attr( $key ).'" type="text" value="'.esc_attr( $new_value ).'"/>';
break;
/**
* Campo Textarea
*/
case 'textarea':
echo '<textarea data-default="'.esc_attr( $default ).'" data-name="'.esc_attr( $key ).'">'.esc_attr( $new_value ).'</textarea>';
break;
/**
* Campo URL
*/
case 'url':
echo '<input data-default="'.esc_attr( $default ).'" data-name="'.esc_attr( $key ).'" type="text" value="'.esc_url( $new_value ).'"/>';
break;
/**
* Campo de ícone
*/
case 'icon':
$new_theme_font_awesome_icon_array = new_theme_font_awesome_icon_array();
echo '<div class="mt-repeater-selected-icon"><i class="'.esc_attr( $new_value ).'"></i><span><i class="fa fa-angle-down"></i></span></div><ul class="mt-repeater-icon-list mt-clearfix">';
foreach ( $new_theme_font_awesome_icon_array as $new_theme_font_awesome_icon ) {
$icon_class = $new_value == $new_theme_font_awesome_icon ? 'icon-active' : '';
echo '<li class='.esc_attr( $icon_class ).'><i class="'.esc_attr( $new_theme_font_awesome_icon ).'"></i></li>';
}
echo '</ul><input data-default="'.esc_attr( $default ).'" type="hidden" value="'.esc_attr( $new_value ).'" data-name="'.esc_attr( $key ).'"/>';
break;
/**
* Campo Ícone Social
*/
case 'social_icon':
$new_theme_font_awesome_social_icon_array = new_theme_font_awesome_social_icon_array();
echo '<div class="mt-repeater-selected-icon"><i class="'.esc_attr( $new_value ).'"></i><span><i class="fa fa-angle-down"></i></span></div><ul class="mt-repeater-icon-list mt-clearfix">';
foreach ( $new_theme_font_awesome_social_icon_array as $new_theme_font_awesome_icon ) {
$icon_class = $new_value == $new_theme_font_awesome_icon ? 'icon-active' : '';
echo '<li class='.esc_attr( $icon_class ).'><i class="'.esc_attr( $new_theme_font_awesome_icon ).'"></i></li>';
}
echo '</ul><input data-default="'.esc_attr( $default ).'" type="hidden" value="'.esc_attr( $new_value ).'" data-name="'.esc_attr( $key ).'"/>';
break;
/**
* Selecione o campo
*/
case 'select':
$options = $field['options'];
echo '<select data-default="'.esc_attr( $default ).'" data-name="'.esc_attr( $key ).'">';
foreach ( $options as $option => $val )
{
printf( '<option value="%1$s" %2$s>%3$s</option>', esc_attr( $option ), selected( $new_value, $option, false ), esc_html( $val ) );
}
echo '</select>';
break;
/**
* Campo suspenso
*/
case 'dropdown_pages':
$show_option_none = esc_html__( '— Select a page —', 'new-theme' );
$select_field ='data-default="'.esc_attr( $default ).'" data-name="'.esc_attr( $key ).'"';
$option_none_value = '';
$dropdown = wp_dropdown_pages(
array(
'name' => esc_attr( $key ),
'echo' => '',
'show_option_none' => esc_html( $show_option_none ),
'option_none_value' => esc_attr( $option_none_value ),
'selected' => esc_attr( $new_value )
)
);
if ( empty( $dropdown ) ) {
$dropdown = sprintf( '<select id="%1$s" name="%1$s">', esc_attr( $key ) );
$dropdown .= sprintf( '<option value="%1$s">%2$s</option>', esc_attr( $option_none_value ), esc_html( $show_option_none ) );
$dropdown .= '</select>';
}
// Adicione de forma hackeada o parâmetro de link de dados.
$dropdown = str_replace( '<select', '<select ' . $select_field, $dropdown );
echo $dropdown;
break;
/**
* Campo de upload
*/
case 'upload':
$image_class = "";
$upload_btn_label = esc_html__( 'Select Image', 'new-theme' );
$remove_btn_label = esc_html__( 'Remove', 'new-theme' );
if ( $new_value ) {
$image_class = ' hidden';
}
echo '<div class="mt-fields-wrap"><div class="attachment-media-view"><div class="placeholder'. esc_attr( $image_class ).'">';
esc_html_e( 'No image selected', 'new-theme' );
echo '</div><div class="thumbnail thumbnail-image"><img src="'.esc_url( $new_value ).'" style="max-width:100%;"/></div><div class="actions mt-clearfix"><button type="button" class="button mt-delete-button align-left">'. esc_html( $remove_btn_label ) .'</button><button type="button" class="button mt-upload-button alignright">'. esc_html( $upload_btn_label ) .'</button><input data-default="'.esc_attr( $default ).'" class="upload-id" data-name="'.esc_attr( $key ).'" type="hidden" value="'.esc_attr( $new_value ).'"/></div></div></div>';
break;
default:
break;
}
?>
</div>
<?php
}
?>
<div class="mt-clearfix mt-repeater-footer">
<div class="alignright">
<a class="mt-repeater-field-remove" href="#remove"><?php esc_html_e( 'Delete', 'new-theme' ) ?></a> |
<a class="mt-repeater-field-close" href="#close"><?php esc_html_e( 'Close', 'new-theme' ) ?></a>
</div>
</div><!-- .mt-repeater-footer -->
</div><!-- .mt-repeater-fields-->
</li>
<?php
}
}
}
}
}
}
add_action( 'customize_register', 'new_theme_register_custom_controls' );
endif;Passo 4: Enfileira os arquivos necessário
Ícones do FontAwesome no Customizer do WordPress. Esse trecho de código PHP Enfileira scripts/estilos necessários para o painel do personalizador. Crie o arquivo customizer.php, cópie cole o código abaixo:
<?php
/**
* New Theme Customizer
*
* @package Wilson Themes
* @subpackage New Theme
* @since 1.0.0
*/
/**
* Adicione suporte postMessage para título e descrição do site no Personalizador de Temas.
*
* @param WP_Customize_Manager $wp_customize Theme Customizer object.
*/
function new_theme_customize_register( $wp_customize ) {
$wp_customize->get_setting( 'blogname' )->transport = 'postMessage';
$wp_customize->get_setting( 'blogdescription' )->transport = 'postMessage';
$wp_customize->get_setting( 'header_textcolor' )->transport = 'postMessage';
$wp_customize->get_section( 'title_tagline' )->panel = 'new_theme_general_panel';
$wp_customize->get_section( 'title_tagline' )->priority = '5';
$wp_customize->get_section( 'colors' )->panel = 'new_theme_general_panel';
$wp_customize->get_section( 'colors' )->priority = '10';
$wp_customize->get_section( 'background_image' )->panel = 'new_theme_general_panel';
$wp_customize->get_section( 'background_image' )->priority = '15';
$wp_customize->get_section( 'static_front_page' )->panel = 'new_theme_general_panel';
$wp_customize->get_section( 'static_front_page' )->priority = '20';
$wp_customize->get_section( 'header_image' )->panel = 'new_theme_header_panel';
$wp_customize->get_section( 'header_image' )->priority = '5';
$wp_customize->get_section( 'header_image' )->description = __( 'Header Image for only Innerpages', 'new-theme' );
if ( isset( $wp_customize->selective_refresh ) ) {
$wp_customize->selective_refresh->add_partial( 'blogname', array(
'selector' => '.site-title a',
'render_callback' => 'new_theme_customize_partial_blogname',
) );
$wp_customize->selective_refresh->add_partial( 'blogdescription', array(
'selector' => '.site-description',
'render_callback' => 'new_theme_customize_partial_blogdescription',
) );
}
}
add_action( 'customize_register', 'new_theme_customize_register' );
/*----------------------------------------------------------------------------------------------------------------------------------------*/
/**
* Enfileirar scripts/estilos necessários para o painel do personalizador
*
* @since 1.0.0
*/
function new_theme_customize_backend_scripts() {
global $new_theme_theme_version;
wp_enqueue_style( 'color-blog--admin-customizer-style', get_template_directory_uri() . '/assets/css/mt-customizer-styles.css', array(), esc_attr( esc_attr( $new_theme_theme_version ) ) );
wp_enqueue_style( 'font-awesome-customize', get_template_directory_uri() . '/assets/library/font-awesome/css/font-awesome.min.css', array(), '4.7.0' );
wp_enqueue_script( 'color-blog--admin-customizer-script', get_template_directory_uri() . '/assets/js/customizer-controls.js', array( 'jquery', 'customize-controls' ), esc_attr( $new_theme_theme_version ), true );
}
add_action( 'customize_controls_enqueue_scripts', 'new_theme_customize_backend_scripts', 10 );
/**
* Adicionar arquivo Kirki obrigatório para campos personalizados
*/
require get_template_directory() . '/inc/customizer/customizer-custom-classes.php';
require get_template_directory() . '/inc/customizer/customizer-panels.php';
require get_template_directory() . '/inc/customizer/customizer-additional-panel-options.php';Passo 5: Template functions
Ícones do FontAwesome no Customizer do WordPress. O código apresentado implementa diversas funcionalidades relacionadas à integração e exibição de ícones sociais no tema New Theme.
- Carregamento de arquivos de hooks
- Enfileiramento de scripts e estilos
- Função para definir ícones sociais (Font Awesome)
- Exibição dos ícones sociais no tema
Caso seu tema já tenha o arquivo template-functions.php, copie e cole o código abaixo, caso contrário crie o arquivo dentro da pasta INC.
// Carregar arquivos de hooks
$hook_files = glob( get_template_directory() . '/inc/hooks/*.php' );
if ( ! empty( $hook_files ) ) {
foreach ( $hook_files as $file ) {
require_once $file;
}
}
/*----------------------------------------------------------------------------------------------------------------------------------------*/
/**
* Enfileirar scripts e estilos.
*/
function new_theme_scripts() {
global $new_theme_theme_version;
wp_enqueue_style( 'font-awesome', get_template_directory_uri() . '/assets/library/font-awesome/css/font-awesome.min.css', array(), '4.7.0', null, 'async' );
}
add_action( 'wp_enqueue_scripts', 'new_theme_scripts' );
if ( ! function_exists( 'new_theme_font_awesome_social_icon_array' ) ) :
/**
* Define ícones de mídia social incríveis do FonteAwesome
*
* @return array();
* @since 1.0.0
*/
function new_theme_font_awesome_social_icon_array() {
return array(
"fa fa-square-x-twitter","fa fa-x-twitter","fa fa-facebook-square","fa fa-facebook-f","fa fa-facebook","fa fa-facebook-official","fa fa-flickr","fa fa-google","fa fa-google-wallet","fa fa-google-plus-circle","fa fa-google-plus-official","fa fa-google-plus-square","fa fa-google-plus","fa fa-instagram","fa fa-linkedin-square","fa fa-linkedin","fa fa-pinterest-p","fa fa-pinterest","fa fa-pinterest-square","fa fa-qq","fa fa-reddit","fa fa-reddit-alien","fa fa-reddit-square","fa fa-snapchat","fa fa-snapchat-ghost","fa fa-snapchat-square","fa fa-telegram","fa fa-tumblr","fa fa-tumblr-square","fa fa-twitter-square","fa fa-twitter","fa fa-vimeo","fa fa-vimeo-square","fa fa-vk","fa fa-weixin","fa fa-yahoo","fa fa-youtube-square","fa fa-youtube","fa fa-youtube-play",
);
}
endif;
/*----------------------------------------------------------------------------------------------------------------------------------------*/
if ( ! function_exists( 'new_theme_social_media_content' ) ) :
/**
* Função para exibir os ícones sociais
*/
function new_theme_social_media_content() {
$defaults_icons = json_encode( array(
array(
'social_icon' => 'fa fa-twitter',
'social_url' => '#',
),
array(
'social_icon' => 'fa fa-pinterest',
'social_url' => '#',
)
)
);
$new_theme_social_icons = get_theme_mod( 'new_theme_social_icons', $defaults_icons );
$social_icons = json_decode( $new_theme_social_icons );
if ( ! empty( $social_icons ) ) {
?>
<ul class="mt-social-icon-wrap">
<?php
foreach ( $social_icons as $social_icon ) {
if ( ! empty( $social_icon->social_url ) ) {
?>
<li class="mt-social-icon">
<a href="<?php echo esc_url( $social_icon->social_url ); ?>" aria-label="Compartilhe nas redes sociais" target="_blank">
<i class="<?php echo esc_attr( $social_icon->social_icon ); ?>"></i>
</a>
</li>
<?php
}
}
?>
</ul>
<?php
}
}
endif;
Passo 5: Arquivo custon hooks
Ícones do FontAwesome no Customizer do WordPress. Gerencia as funções personalizadas e os ganchos para todo o tema. Caso seu tema já tenha a pasta hooks , salve o arquivo custon-hooks.php, em seguida copie e cole o código abaixo, caso contrário crie uma pasta hooks dentro da pasta inc.
<?php
/**
* Gerencia as funções personalizadas e os ganchos para todo o tema.
*
* @package Wilson Themes
* @subpackage New Theme
* @since 1.0.0
*/
/*----------------------------------------------------------------------------------------------------------------------------------*/
if ( ! function_exists( 'new_theme_menu_social_icons' ) ) :
/**
* Função para exibir ícones sociais na seção de menu
*/
function new_theme_menu_social_icons() {
$new_theme_enable_header_social_icons = get_theme_mod( 'new_theme_enable_header_social_icons', false );
if ( false === $new_theme_enable_header_social_icons ) {
return;
}
$new_theme_menu_social_icons_label = apply_filters( 'new_theme_menu_social_icons_label', __( 'Follow Us: ', 'color-blog' ) );
?>
<div class="mt-social-wrapper">
<span class="mt-follow-title"><?php echo esc_html( $new_theme_menu_social_icons_label ); ?></span>
<?php new_theme_social_media_content(); ?>
</div>
<?php
}
endif;
if ( ! function_exists( 'new_theme_header_author_box_content' ) ) :
/**
* Função para exibir informações do autor
*/
function new_theme_header_author_box_content() {
$new_theme_user_id = apply_filters( 'new_theme_header_user_id', 1 );
?>
<div itemscope itemtype="http://schema.org/Person" class="sticky-header-sidebar-author author-bio-wrap">
<div class="author-avatar"><?php echo get_avatar( $new_theme_user_id, '150' ); ?></div>
<h3 itemprop="name" class="author-name"><?php echo esc_html( get_the_author_meta( 'nicename', $new_theme_user_id ) ); ?></h3>
<div class="author-description"><?php echo wp_kses_post( wpautop( get_the_author_meta( 'description', $new_theme_user_id ) ) ); ?></div>
<div class="author-social">
<?php new_theme_social_media_content(); ?>
</div><!-- .author-social -->
</div><!-- .author-bio-wrap -->
<?php
}
endif;
add_action( 'new_theme_header_author_box', 'new_theme_header_author_box_content', 10 );Passo 6: Arquivo JS Customizer Controls
Ícones do FontAwesome no Customizer do WordPress. Esse código em JavaScript/jQuery é uma implementação detalhada para gerenciar campos repetidores no Customizer do WordPress. Ele define a lógica para adicionar, remover, atualizar e ordenar dinamicamente campos em uma interface interativa, incluindo suporte para upload de imagens, seleção de ícones e organização por arrastar e soltar.
Crie o arquivo customizer-controls.js, dentro de theme/assets/js/customizer-controls.js, em seguida cópie cole o código abaixo:
jQuery(document).ready(function($) {
"use strict";
/**
* Função para o campo repetidor
*/
function color_blog_refresh_repeater_values(){
$(".mt-repeater-field-control-wrap").each(function(){
var values = [];
var $this = $(this);
$this.find(".mt-repeater-field-control").each(function(){
var valueToPush = {};
$(this).find('[data-name]').each(function(){
var dataName = $(this).attr('data-name');
var dataValue = $(this).val();
valueToPush[dataName] = dataValue;
});
values.push(valueToPush);
});
$this.next('.mt-repeater-collector').val(JSON.stringify(values)).trigger('change');
});
}
$('#customize-theme-controls').on('click','.mt-repeater-field-title',function(){
$(this).next().slideToggle();
$(this).closest('.mt-repeater-field-control').toggleClass('expanded');
});
$('#customize-theme-controls').on('click', '.mt-repeater-field-close', function(){
$(this).closest('.mt-repeater-fields').slideUp();;
$(this).closest('.mt-repeater-field-control').toggleClass('expanded');
});
$("body").on("click",'.mt-repeater-add-control-field', function(){
var fLimit = $(this).parent().find('.field-limit').val();
var fCount = $(this).parent().find('.field-count').val();
if( fCount < fLimit ) {
fCount++;
$(this).parent().find('.field-count').val(fCount);
} else {
$(this).before('<span class="mt-limit-msg"><em>Only '+fLimit+' repeater field will be permitted.</em></span>');
return;
}
var $this = $(this).parent();
if(typeof $this != 'undefined') {
var field = $this.find(".mt-repeater-field-control:first").clone();
if(typeof field != 'undefined'){
field.find("input[type='text'][data-name]").each(function(){
var defaultValue = $(this).attr('data-default');
$(this).val(defaultValue);
});
field.find("textarea[data-name]").each(function(){
var defaultValue = $(this).attr('data-default');
$(this).val(defaultValue);
});
field.find("select[data-name]").each(function(){
var defaultValue = $(this).attr('data-default');
$(this).val(defaultValue);
});
field.find(".attachment-media-view").each(function(){
var defaultValue = $(this).find('input[data-name]').attr('data-default');
$(this).find('input[data-name]').val(defaultValue);
if(defaultValue){
$(this).find(".thumbnail-image").html('<img src="'+defaultValue+'"/>').prev('.placeholder').addClass('hidden');
}else{
$(this).find(".thumbnail-image").html('').prev('.placeholder').removeClass('hidden');
}
});
field.find(".mt-repeater-icon-list").each(function(){
var defaultValue = $(this).next('input[data-name]').attr('data-default');
$(this).next('input[data-name]').val(defaultValue);
$(this).prev('.mt-repeater-selected-icon').children('i').attr('class','').addClass(defaultValue);
$(this).find('li').each(function(){
var icon_class = $(this).find('i').attr('class');
if(defaultValue == icon_class ){
$(this).addClass('icon-active');
}else{
$(this).removeClass('icon-active');
}
});
});
field.find('.mt-repeater-fields').show();
$this.find('.mt-repeater-field-control-wrap').append(field);
field.addClass('expanded').find('.mt-repeater-fields').show();
$('.accordion-section-content').animate({ scrollTop: $this.height() }, 1000);
color_blog_refresh_repeater_values();
}
}
return false;
});
$("#customize-theme-controls").on("click", ".mt-repeater-field-remove",function(){
if( typeof $(this).parent() != 'undefined'){
$(this).closest('.mt-repeater-field-control').slideUp('normal', function(){
$(this).remove();
color_blog_refresh_repeater_values();
});
}
return false;
});
$("#customize-theme-controls").on('keyup change', '[data-name]',function(){
color_blog_refresh_repeater_values();
return false;
});
/**
* Arraste e solte para alterar a ordem
*/
$(".mt-repeater-field-control-wrap").sortable({
orientation: "vertical",
update: function( event, ui ) {
color_blog_refresh_repeater_values();
}
});
/**
* Upload de imagem
*/
var mtFrame;
//Add image
$('.customize-control-mt-repeater').on( 'click', '.mt-upload-button', function( event ){
event.preventDefault();
var imgContainer = $(this).closest('.mt-fields-wrap').find( '.thumbnail-image'),
placeholder = $(this).closest('.mt-fields-wrap').find( '.placeholder'),
imgIdInput = $(this).siblings('.upload-id');
mtFrame = wp.media({
title: 'Select or Upload Image',
button: {
text: 'Use Image'
},
multiple: false // Defina como verdadeiro para permitir que vários arquivos sejam selecionados
});
mtFrame.on( 'select', function() {
var attachment = frame.state().get('selection').first().toJSON();
imgContainer.html( '<img src="'+attachment.url+'" style="max-width:100%;"/>' );
placeholder.addClass('hidden');
imgIdInput.val( attachment.url ).trigger('change');
});
mtFrame.open();
});
// APAGAR LINK DA IMAGEM
$('.customize-control-mt-repeater').on( 'click', '.mt-delete-button', function( event ){
event.preventDefault();
var imgContainer = $(this).closest('.mt-fields-wrap').find( '.thumbnail-image'),
placeholder = $(this).closest('.mt-fields-wrap').find( '.placeholder'),
imgIdInput = $(this).siblings('.upload-id');
imgContainer.find('img').remove();
placeholder.removeClass('hidden');
imgIdInput.val( '' ).trigger('change');
});
/**
* Seletor de ícone do repetidor
*/
$('body').on('click', '.mt-repeater-icon-list li', function(){
var icon_class = $(this).find('i').attr('class');
$(this).addClass('icon-active').siblings().removeClass('icon-active');
$(this).parent('.mt-repeater-icon-list').prev('.mt-repeater-selected-icon').children('i').attr('class','').addClass(icon_class);
$(this).parent('.mt-repeater-icon-list').next('input').val(icon_class).trigger('change');
color_blog_refresh_repeater_values();
});
$('body').on('click', '.mt-repeater-selected-icon', function(){
$(this).next().slideToggle();
});
});Vou disponibilizar os arquivos css, js e fonts para Ícones do FontAwesome no Customizer do WordPress, download compactados em zip aqui, descompacte e salve-os desta forma:
- assets/css/mt-customizer-styles.css
- assets/library/font-awesome/css/fontawesome.css
- assets/library/font-awesome/fonts/coloque aqui os 6 arquivos de font
No arquivo functions.php do seu tema insira os seguintes códigos:
// Inclui o arquivo customizer.php require_once get_template_directory() . '/inc/customizer/customizer.php'; // Inclui o arquivo template-functions.php require_once get_template_directory() . '/inc/template-functions.php';
Para carregar os ícones no seu tema, basta colocar o seguinte código onde você queira mostrar os ícones:
<?php new_theme_social_media_content(); ?>
Então é isso aí, se tudo ocorreu como o esperado e tenha seguido os passos corretamente, terás no customizador os Ícones do FontAwesome no Customizer do WordPress disponivel para usar no seu tema.
Exemplo mostrando na header, dentro da class nav.
Conclusão
A funcionalidade de seleção de Ícones do FontAwesome no Customizer do WordPress melhora a experiência do usuário ao permitir personalização visual sem a necessidade de editar o código manualmente. Com a pré-visualização em tempo real dos ícones do FontAwesome, os administradores do site podem escolher rapidamente o estilo que melhor se adapta ao design.
Este recurso é especialmente útil para temas WordPress focados em flexibilidade e customização. Ele combina praticidade com controle estético, ajudando os desenvolvedores a entregar projetos mais acessíveis e visualmente atraentes para seus clientes.
Se você deseja expandir essa funcionalidade, é possível adicionar recursos como categorias de ícones, pesquisa por nome ou até mesmo a integração com outras bibliotecas de ícones!
- Visite wilson66
Deixe um comentário