DESKTOP-GBA0BK8\Admin
888 lines
27 KiB
PHP
888 lines
27 KiB
PHP
<?php
|
|
/**
|
|
* Typography Customizer Options
|
|
*
|
|
* @package OceanWP WordPress theme
|
|
*/
|
|
|
|
if ( ! defined( 'ABSPATH' ) ) {
|
|
exit;
|
|
}
|
|
|
|
if ( ! class_exists( 'OceanWP_Typography_Customizer' ) ) :
|
|
|
|
class OceanWP_Typography_Customizer {
|
|
|
|
/**
|
|
* Setup class.
|
|
*
|
|
* @since 1.0
|
|
*/
|
|
public function __construct() {
|
|
|
|
add_action( 'customize_register', array( $this, 'customizer_options' ) );
|
|
add_action( 'wp_enqueue_scripts', array( $this, 'load_fonts' ) );
|
|
|
|
// CSS output
|
|
if ( is_customize_preview() ) {
|
|
add_action( 'customize_preview_init', array( $this, 'customize_preview_init' ) );
|
|
add_action( 'wp_head', array( $this, 'live_preview_styles' ), 999 );
|
|
} else {
|
|
add_filter( 'ocean_head_css', array( $this, 'head_css' ), 99 );
|
|
}
|
|
|
|
}
|
|
|
|
/**
|
|
* Array of Typography settings to add to the customizer
|
|
*
|
|
* @since 1.0.0
|
|
*/
|
|
public function elements() {
|
|
|
|
// Return settings
|
|
return apply_filters( 'ocean_typography_settings', array(
|
|
'body' => array(
|
|
'label' => esc_html__( 'Body', 'oceanwp' ),
|
|
'target' => 'body',
|
|
'defaults' => array(
|
|
'font-size' => '14px',
|
|
'color' => '#929292',
|
|
'line-height' => '1.8',
|
|
),
|
|
),
|
|
'headings' => array(
|
|
'label' => esc_html__( 'All Headings', 'oceanwp' ),
|
|
'target' => 'h1,h2,h3,h4,h5,h6,.theme-heading,.widget-title,.oceanwp-widget-recent-posts-title,.comment-reply-title,.entry-title,.sidebar-box .widget-title',
|
|
'exclude' => array( 'font-size' ),
|
|
'defaults' => array(
|
|
'color' => '#333333',
|
|
'line-height' => '1.4',
|
|
),
|
|
),
|
|
'heading_h1' => array(
|
|
'label' => esc_html__( 'Heading 1 (H1)', 'oceanwp' ),
|
|
'target' => 'h1',
|
|
'defaults' => array(
|
|
'font-size' => '23px',
|
|
'color' => '#333333',
|
|
'line-height' => '1.4',
|
|
),
|
|
),
|
|
'heading_h2' => array(
|
|
'label' => esc_html__( 'Heading 2 (H2)', 'oceanwp' ),
|
|
'target' => 'h2',
|
|
'defaults' => array(
|
|
'font-size' => '20px',
|
|
'color' => '#333333',
|
|
'line-height' => '1.4',
|
|
),
|
|
),
|
|
'heading_h3' => array(
|
|
'label' => esc_html__( 'Heading 3 (H3)', 'oceanwp' ),
|
|
'target' => 'h3',
|
|
'defaults' => array(
|
|
'font-size' => '18px',
|
|
'color' => '#333333',
|
|
'line-height' => '1.4',
|
|
),
|
|
),
|
|
'heading_h4' => array(
|
|
'label' => esc_html__( 'Heading 4 (H4)', 'oceanwp' ),
|
|
'target' => 'h4',
|
|
'defaults' => array(
|
|
'font-size' => '17px',
|
|
'color' => '#333333',
|
|
'line-height' => '1.4',
|
|
),
|
|
),
|
|
'logo' => array(
|
|
'label' => esc_html__( 'Logo', 'oceanwp' ),
|
|
'target' => '#site-logo a.site-logo-text',
|
|
'exclude' => array( 'font-color' ),
|
|
'defaults' => array(
|
|
'font-size' => '24px',
|
|
'line-height' => '1.8',
|
|
),
|
|
),
|
|
'top_menu' => array(
|
|
'label' => esc_html__( 'Top Bar', 'oceanwp' ),
|
|
'target' => '#top-bar-content,#top-bar-social-alt',
|
|
'exclude' => array( 'font-color' ),
|
|
'defaults' => array(
|
|
'font-size' => '12px',
|
|
'line-height' => '1.8',
|
|
),
|
|
'active_callback' => 'oceanwp_cac_has_topbar',
|
|
),
|
|
'menu' => array(
|
|
'label' => esc_html__( 'Main Menu', 'oceanwp' ),
|
|
'target' => '#site-navigation-wrap .dropdown-menu > li > a,#site-header.full_screen-header .fs-dropdown-menu > li > a,#site-header.top-header #site-navigation-wrap .dropdown-menu > li > a,#site-header.center-header #site-navigation-wrap .dropdown-menu > li > a,#site-header.medium-header #site-navigation-wrap .dropdown-menu > li > a,.oceanwp-mobile-menu-icon a',
|
|
'exclude' => array( 'font-color', 'line-height' ),
|
|
'defaults' => array(
|
|
'font-size' => '13px',
|
|
'letter-spacing' => '0.6',
|
|
),
|
|
),
|
|
'menu_dropdown' => array(
|
|
'label' => esc_html__( 'Main Menu: Dropdowns', 'oceanwp' ),
|
|
'target' => '.dropdown-menu ul li a.menu-link,#site-header.full_screen-header .fs-dropdown-menu ul.sub-menu li a',
|
|
'exclude' => array( 'font-color' ),
|
|
'defaults' => array(
|
|
'font-size' => '12px',
|
|
'line-height' => '1.2',
|
|
'letter-spacing' => '0.6',
|
|
),
|
|
),
|
|
'mobile_menu_dropdown' => array(
|
|
'label' => esc_html__( 'Mobile Menu', 'oceanwp' ),
|
|
'target' => '.sidr-class-dropdown-menu li a, a.sidr-class-toggle-sidr-close, #mobile-dropdown ul li a, body #mobile-fullscreen ul li a',
|
|
'exclude' => array( 'font-color' ),
|
|
'defaults' => array(
|
|
'font-size' => '15px',
|
|
'line-height' => '1.8',
|
|
),
|
|
),
|
|
'page_title' => array(
|
|
'label' => esc_html__( 'Page Title', 'oceanwp' ),
|
|
'target' => '.page-header .page-header-title, .page-header.background-image-page-header .page-header-title',
|
|
'exclude' => array( 'font-color' ),
|
|
'defaults' => array(
|
|
'font-size' => '32px',
|
|
'line-height' => '1.4',
|
|
),
|
|
'active_callback' => 'oceanwp_cac_has_page_header',
|
|
),
|
|
'page_subheading' => array(
|
|
'label' => esc_html__( 'Page Title Subheading', 'oceanwp' ),
|
|
'target' => '.page-header .page-subheading',
|
|
'defaults' => array(
|
|
'font-size' => '15px',
|
|
'color' => '#929292',
|
|
'line-height' => '1.8',
|
|
),
|
|
'active_callback' => 'oceanwp_cac_has_page_header',
|
|
),
|
|
'breadcrumbs' => array(
|
|
'label' => esc_html__( 'Breadcrumbs', 'oceanwp' ),
|
|
'target' => '.site-breadcrumbs',
|
|
'exclude' => array( 'font-color', 'line-height' ),
|
|
'defaults' => array(
|
|
'font-size' => '13px',
|
|
),
|
|
'active_callback' => 'oceanwp_cac_has_breadcrumbs',
|
|
),
|
|
'blog_entry_title' => array(
|
|
'label' => esc_html__( 'Blog Entry Title', 'oceanwp' ),
|
|
'target' => '.blog-entry.post .blog-entry-header .entry-title a',
|
|
'defaults' => array(
|
|
'font-size' => '24px',
|
|
'color' => '#333333',
|
|
'line-height' => '1.4',
|
|
),
|
|
),
|
|
'blog_post_title' => array(
|
|
'label' => esc_html__( 'Blog Post Title', 'oceanwp' ),
|
|
'target' => '.single-post .entry-title',
|
|
'defaults' => array(
|
|
'font-size' => '34px',
|
|
'color' => '#333333',
|
|
'line-height' => '1.4',
|
|
'letter-spacing' => '0.6',
|
|
),
|
|
),
|
|
'sidebar_widget_title' => array(
|
|
'label' => esc_html__( 'Sidebar Widget Heading', 'oceanwp' ),
|
|
'target' => '.sidebar-box .widget-title',
|
|
'defaults' => array(
|
|
'font-size' => '13px',
|
|
'color' => '#333333',
|
|
'line-height' => '1',
|
|
'letter-spacing' => '1',
|
|
),
|
|
),
|
|
'widgets' => array(
|
|
'label' => esc_html__( 'Widgets', 'oceanwp' ),
|
|
'target' => '.sidebar-box, .footer-box',
|
|
),
|
|
'footer_widget_title' => array(
|
|
'label' => esc_html__( 'Footer Widget Heading', 'oceanwp' ),
|
|
'target' => '#footer-widgets .footer-box .widget-title',
|
|
'defaults' => array(
|
|
'font-size' => '13px',
|
|
'color' => '#ffffff',
|
|
'line-height' => '1',
|
|
'letter-spacing' => '1',
|
|
),
|
|
'active_callback' => 'oceanwp_cac_has_footer_widgets',
|
|
),
|
|
'copyright' => array(
|
|
'label' => esc_html__( 'Footer Copyright', 'oceanwp' ),
|
|
'target' => '#footer-bottom #copyright',
|
|
'exclude' => array( 'font-color' ),
|
|
'defaults' => array(
|
|
'font-size' => '12px',
|
|
'line-height' => '1',
|
|
),
|
|
'active_callback' => 'oceanwp_cac_has_footer_bottom',
|
|
),
|
|
'footer_menu' => array(
|
|
'label' => esc_html__( 'Footer Menu', 'oceanwp' ),
|
|
'target' => '#footer-bottom #footer-bottom-menu',
|
|
'exclude' => array( 'font-color' ),
|
|
'defaults' => array(
|
|
'font-size' => '12px',
|
|
'line-height' => '1',
|
|
),
|
|
'active_callback' => 'oceanwp_cac_has_footer_bottom',
|
|
),
|
|
) );
|
|
|
|
}
|
|
|
|
/**
|
|
* Customizer options
|
|
*
|
|
* @since 1.0.0
|
|
*/
|
|
public function customizer_options( $wp_customize ) {
|
|
|
|
// Get elements
|
|
$elements = self::elements();
|
|
|
|
// Return if elements are empty
|
|
if ( empty( $elements ) ) {
|
|
return;
|
|
}
|
|
|
|
// Panel
|
|
$wp_customize->add_panel( 'ocean_typography_panel' , array(
|
|
'title' => esc_html__( 'Typography', 'oceanwp' ),
|
|
'priority' => 210,
|
|
) );
|
|
|
|
/**
|
|
* Section
|
|
*/
|
|
$wp_customize->add_section( 'ocean_typography_general' , array(
|
|
'title' => esc_html__( 'General', 'oceanwp' ),
|
|
'priority' => 1,
|
|
'panel' => 'ocean_typography_panel',
|
|
) );
|
|
|
|
/**
|
|
* Disable Google Fonts
|
|
*/
|
|
$wp_customize->add_setting( 'ocean_disable_google_font', array(
|
|
'transport' => 'postMessage',
|
|
'default' => false,
|
|
'sanitize_callback' => 'oceanwp_sanitize_checkbox',
|
|
) );
|
|
|
|
$wp_customize->add_control( new WP_Customize_Control( $wp_customize, 'ocean_disable_google_font', array(
|
|
'label' => esc_html__( 'Disable Google Fonts', 'oceanwp' ),
|
|
'type' => 'checkbox',
|
|
'section' => 'ocean_typography_general',
|
|
'settings' => 'ocean_disable_google_font',
|
|
'priority' => 10,
|
|
) ) );
|
|
|
|
/**
|
|
* Font Subsets
|
|
*/
|
|
$wp_customize->add_setting( 'ocean_google_font_subsets' , array(
|
|
'default' => array( 'latin' ),
|
|
'sanitize_callback' => 'oceanwp_sanitize_multicheck',
|
|
) );
|
|
|
|
$wp_customize->add_control( new OceanWP_Customize_Multicheck_Control( $wp_customize, 'ocean_google_font_subsets', array(
|
|
'label' => esc_html__( 'Font Subsets', 'oceanwp' ),
|
|
'section' => 'ocean_typography_general',
|
|
'settings' => 'ocean_google_font_subsets',
|
|
'priority' => 10,
|
|
'choices' => array(
|
|
'latin' => 'latin',
|
|
'latin-ext' => 'latin-ext',
|
|
'cyrillic' => 'cyrillic',
|
|
'cyrillic-ext' => 'cyrillic-ext',
|
|
'greek' => 'greek',
|
|
'greek-ext' => 'greek-ext',
|
|
'vietnamese' => 'vietnamese',
|
|
),
|
|
) ) );
|
|
|
|
// Lopp through elements
|
|
$count = '1';
|
|
foreach( $elements as $element => $array ) {
|
|
$count++;
|
|
|
|
// Get label
|
|
$label = ! empty( $array['label'] ) ? $array['label'] : null;
|
|
$exclude_attributes = ! empty( $array['exclude'] ) ? $array['exclude'] : false;
|
|
$active_callback = isset( $array['active_callback'] ) ? $array['active_callback'] : null;
|
|
$transport = 'postMessage';
|
|
|
|
// Get attributes
|
|
if ( ! empty ( $array['attributes'] ) ) {
|
|
$attributes = $array['attributes'];
|
|
} else {
|
|
$attributes = array(
|
|
'font-family',
|
|
'font-weight',
|
|
'font-style',
|
|
'text-transform',
|
|
'font-size',
|
|
'line-height',
|
|
'letter-spacing',
|
|
'font-color',
|
|
);
|
|
}
|
|
|
|
// Set keys equal to vals
|
|
$attributes = array_combine( $attributes, $attributes );
|
|
|
|
// Exclude attributes for specific options
|
|
if ( $exclude_attributes ) {
|
|
foreach ( $exclude_attributes as $key => $val ) {
|
|
unset( $attributes[ $val ] );
|
|
}
|
|
}
|
|
|
|
// Register new setting if label isn't empty
|
|
if ( $label ) {
|
|
|
|
/**
|
|
* Section
|
|
*/
|
|
$wp_customize->add_section( 'ocean_typography_'. $element , array(
|
|
'title' => $label,
|
|
'priority' => $count,
|
|
'panel' => 'ocean_typography_panel',
|
|
) );
|
|
|
|
/**
|
|
* Font Family
|
|
*/
|
|
if ( in_array( 'font-family', $attributes ) ) {
|
|
|
|
$wp_customize->add_setting( $element .'_typography[font-family]', array(
|
|
'type' => 'theme_mod',
|
|
'transport' => $transport,
|
|
'sanitize_callback' => 'sanitize_text_field',
|
|
) );
|
|
|
|
$wp_customize->add_control( new OceanWP_Customizer_Typography_Control( $wp_customize, $element .'_typography[font-family]', array(
|
|
'label' => esc_html__( 'Font Family', 'oceanwp' ),
|
|
'section' => 'ocean_typography_'. $element,
|
|
'settings' => $element .'_typography[font-family]',
|
|
'priority' => 10,
|
|
'type' => 'select',
|
|
'active_callback' => $active_callback,
|
|
) ) );
|
|
|
|
}
|
|
|
|
/**
|
|
* Font Weight
|
|
*/
|
|
if ( in_array( 'font-weight', $attributes ) ) {
|
|
|
|
$wp_customize->add_setting( $element .'_typography[font-weight]', array(
|
|
'type' => 'theme_mod',
|
|
'sanitize_callback' => 'oceanwp_sanitize_select',
|
|
'transport' => $transport,
|
|
) );
|
|
|
|
$wp_customize->add_control( $element .'_typography[font-weight]', array(
|
|
'label' => esc_html__( 'Font Weight', 'oceanwp' ),
|
|
'description' => esc_html__( 'Important: Not all fonts support every font-weight.', 'oceanwp' ),
|
|
'section' => 'ocean_typography_'. $element,
|
|
'settings' => $element .'_typography[font-weight]',
|
|
'priority' => 10,
|
|
'type' => 'select',
|
|
'active_callback' => $active_callback,
|
|
'choices' => array(
|
|
'' => esc_html__( 'Default', 'oceanwp' ),
|
|
'100' => esc_html__( 'Thin: 100', 'oceanwp' ),
|
|
'200' => esc_html__( 'Light: 200', 'oceanwp' ),
|
|
'300' => esc_html__( 'Book: 300', 'oceanwp' ),
|
|
'400' => esc_html__( 'Normal: 400', 'oceanwp' ),
|
|
'500' => esc_html__( 'Medium: 500', 'oceanwp' ),
|
|
'600' => esc_html__( 'Semibold: 600', 'oceanwp' ),
|
|
'700' => esc_html__( 'Bold: 700', 'oceanwp' ),
|
|
'800' => esc_html__( 'Extra Bold: 800', 'oceanwp' ),
|
|
'900' => esc_html__( 'Black: 900', 'oceanwp' ),
|
|
),
|
|
) );
|
|
}
|
|
|
|
/**
|
|
* Font Style
|
|
*/
|
|
if ( in_array( 'font-style', $attributes ) ) {
|
|
|
|
$wp_customize->add_setting( $element .'_typography[font-style]', array(
|
|
'type' => 'theme_mod',
|
|
'sanitize_callback' => 'oceanwp_sanitize_select',
|
|
'transport' => $transport,
|
|
) );
|
|
|
|
$wp_customize->add_control( $element .'_typography[font-style]', array(
|
|
'label' => esc_html__( 'Font Style', 'oceanwp' ),
|
|
'section' => 'ocean_typography_'. $element,
|
|
'settings' => $element .'_typography[font-style]',
|
|
'priority' => 10,
|
|
'type' => 'select',
|
|
'active_callback' => $active_callback,
|
|
'choices' => array(
|
|
'' => esc_html__( 'Default', 'oceanwp' ),
|
|
'normal' => esc_html__( 'Normal', 'oceanwp' ),
|
|
'italic' => esc_html__( 'Italic', 'oceanwp' ),
|
|
),
|
|
) );
|
|
|
|
}
|
|
|
|
/**
|
|
* Text Transform
|
|
*/
|
|
if ( in_array( 'text-transform', $attributes ) ) {
|
|
|
|
$wp_customize->add_setting( $element .'_typography[text-transform]', array(
|
|
'type' => 'theme_mod',
|
|
'sanitize_callback' => 'oceanwp_sanitize_select',
|
|
'transport' => $transport,
|
|
) );
|
|
|
|
$wp_customize->add_control( $element .'_typography[text-transform]', array(
|
|
'label' => esc_html__( 'Text Transform', 'oceanwp' ),
|
|
'section' => 'ocean_typography_'. $element,
|
|
'settings' => $element .'_typography[text-transform]',
|
|
'priority' => 10,
|
|
'type' => 'select',
|
|
'active_callback' => $active_callback,
|
|
'choices' => array(
|
|
'' => esc_html__( 'Default', 'oceanwp' ),
|
|
'capitalize' => esc_html__( 'Capitalize', 'oceanwp' ),
|
|
'lowercase' => esc_html__( 'Lowercase', 'oceanwp' ),
|
|
'uppercase' => esc_html__( 'Uppercase', 'oceanwp' ),
|
|
'none' => esc_html__( 'None', 'oceanwp' ),
|
|
),
|
|
) );
|
|
|
|
}
|
|
|
|
/**
|
|
* Font Size
|
|
*/
|
|
if ( in_array( 'font-size', $attributes ) ) {
|
|
|
|
// Get default
|
|
$default = ! empty( $array['defaults']['font-size'] ) ? $array['defaults']['font-size'] : NULL;
|
|
|
|
$wp_customize->add_setting( $element .'_typography[font-size]', array(
|
|
'type' => 'theme_mod',
|
|
'sanitize_callback' => 'sanitize_text_field',
|
|
'transport' => $transport,
|
|
'default' => $default,
|
|
) );
|
|
|
|
$wp_customize->add_setting( $element .'_tablet_typography[font-size]', array(
|
|
'transport' => $transport,
|
|
'sanitize_callback' => 'sanitize_text_field',
|
|
) );
|
|
|
|
$wp_customize->add_setting( $element .'_mobile_typography[font-size]', array(
|
|
'transport' => $transport,
|
|
'sanitize_callback' => 'sanitize_text_field',
|
|
) );
|
|
|
|
$wp_customize->add_control( new OceanWP_Customizer_Text_Control( $wp_customize, $element .'_typography[font-size]', array(
|
|
'label' => esc_html__( 'Font Size', 'oceanwp' ),
|
|
'description' => esc_html__( 'You can add: px-em-%', 'oceanwp' ),
|
|
'section' => 'ocean_typography_'. $element,
|
|
'settings' => array(
|
|
'desktop' => $element .'_typography[font-size]',
|
|
'tablet' => $element .'_tablet_typography[font-size]',
|
|
'mobile' => $element .'_mobile_typography[font-size]',
|
|
),
|
|
'priority' => 10,
|
|
'active_callback' => $active_callback,
|
|
) ) );
|
|
|
|
}
|
|
|
|
/**
|
|
* Line Height
|
|
*/
|
|
if ( in_array( 'line-height', $attributes ) ) {
|
|
|
|
// Get default
|
|
$default = ! empty( $array['defaults']['line-height'] ) ? $array['defaults']['line-height'] : NULL;
|
|
|
|
$wp_customize->add_setting( $element .'_typography[line-height]', array(
|
|
'type' => 'theme_mod',
|
|
'sanitize_callback' => 'oceanwp_sanitize_number',
|
|
'transport' => $transport,
|
|
'default' => $default,
|
|
) );
|
|
|
|
$wp_customize->add_setting( $element .'_tablet_typography[line-height]', array(
|
|
'transport' => $transport,
|
|
'sanitize_callback' => 'oceanwp_sanitize_number_blank',
|
|
) );
|
|
|
|
$wp_customize->add_setting( $element .'_mobile_typography[line-height]', array(
|
|
'transport' => $transport,
|
|
'sanitize_callback' => 'oceanwp_sanitize_number_blank',
|
|
) );
|
|
|
|
$wp_customize->add_control( new OceanWP_Customizer_Slider_Control( $wp_customize, $element .'_typography[line-height]', array(
|
|
'label' => esc_html__( 'Line Height', 'oceanwp' ),
|
|
'section' => 'ocean_typography_'. $element,
|
|
'settings' => array(
|
|
'desktop' => $element .'_typography[line-height]',
|
|
'tablet' => $element .'_tablet_typography[line-height]',
|
|
'mobile' => $element .'_mobile_typography[line-height]',
|
|
),
|
|
'priority' => 10,
|
|
'active_callback' => $active_callback,
|
|
'input_attrs' => array(
|
|
'min' => 0,
|
|
'max' => 4,
|
|
'step' => 0.1,
|
|
),
|
|
) ) );
|
|
|
|
}
|
|
|
|
/**
|
|
* Letter Spacing
|
|
*/
|
|
if ( in_array( 'letter-spacing', $attributes ) ) {
|
|
|
|
// Get default
|
|
$default = ! empty( $array['defaults']['letter-spacing'] ) ? $array['defaults']['letter-spacing'] : NULL;
|
|
|
|
$wp_customize->add_setting( $element .'_typography[letter-spacing]', array(
|
|
'type' => 'theme_mod',
|
|
'sanitize_callback' => 'oceanwp_sanitize_number',
|
|
'transport' => $transport,
|
|
'default' => $default,
|
|
) );
|
|
|
|
$wp_customize->add_setting( $element .'_tablet_typography[letter-spacing]', array(
|
|
'transport' => $transport,
|
|
'sanitize_callback' => 'oceanwp_sanitize_number_blank',
|
|
) );
|
|
|
|
$wp_customize->add_setting( $element .'_mobile_typography[letter-spacing]', array(
|
|
'transport' => $transport,
|
|
'sanitize_callback' => 'oceanwp_sanitize_number_blank',
|
|
) );
|
|
|
|
$wp_customize->add_control( new OceanWP_Customizer_Slider_Control( $wp_customize, $element .'_typography[letter-spacing]', array(
|
|
'label' => esc_html__( 'Letter Spacing (px)', 'oceanwp' ),
|
|
'section' => 'ocean_typography_'. $element,
|
|
'settings' => array(
|
|
'desktop' => $element .'_typography[letter-spacing]',
|
|
'tablet' => $element .'_tablet_typography[letter-spacing]',
|
|
'mobile' => $element .'_mobile_typography[letter-spacing]',
|
|
),
|
|
'priority' => 10,
|
|
'active_callback' => $active_callback,
|
|
'input_attrs' => array(
|
|
'min' => 0,
|
|
'max' => 10,
|
|
'step' => 0.1,
|
|
),
|
|
) ) );
|
|
|
|
}
|
|
|
|
/**
|
|
* Font Color
|
|
*/
|
|
if ( in_array( 'font-color', $attributes ) ) {
|
|
|
|
// Get default
|
|
$default = ! empty( $array['defaults']['color'] ) ? $array['defaults']['color'] : NULL;
|
|
|
|
$wp_customize->add_setting( $element .'_typography[color]', array(
|
|
'type' => 'theme_mod',
|
|
'default' => '',
|
|
'sanitize_callback' => 'oceanwp_sanitize_color',
|
|
'transport' => $transport,
|
|
'default' => $default,
|
|
) );
|
|
$wp_customize->add_control( new OceanWP_Customizer_Color_Control( $wp_customize, $element .'_typography[color]', array(
|
|
'label' => esc_html__( 'Font Color', 'oceanwp' ),
|
|
'section' => 'ocean_typography_'. $element,
|
|
'settings' => $element .'_typography[color]',
|
|
'priority' => 10,
|
|
'active_callback' => $active_callback,
|
|
) ) );
|
|
|
|
}
|
|
|
|
}
|
|
}
|
|
}
|
|
|
|
/**
|
|
* Loads js file for customizer preview
|
|
*
|
|
* @since 1.0.0
|
|
*/
|
|
public function customize_preview_init() {
|
|
wp_enqueue_script( 'oceanwp-typography-customize-preview', OCEANWP_INC_DIR_URI . 'customizer/assets/js/typography-customize-preview.min.js', array( 'customize-preview' ), OCEANWP_THEME_VERSION, true );
|
|
wp_localize_script( 'oceanwp-typography-customize-preview', 'oceanwp', array(
|
|
'googleFontsUrl' => '//fonts.googleapis.com',
|
|
'googleFontsWeight' => '100,100i,200,200i,300,300i,400,400i,500,500i,600,600i,700,700i,800,800i,900,900i',
|
|
) );
|
|
}
|
|
|
|
/**
|
|
* Loop through settings
|
|
*
|
|
* @since 1.0.0
|
|
*/
|
|
public function loop( $return = 'css' ) {
|
|
|
|
// Define Vars
|
|
$css = '';
|
|
$fonts = array();
|
|
$elements = self::elements();
|
|
$preview_styles = array();
|
|
|
|
// Loop through each elements that need typography styling applied to them
|
|
foreach( $elements as $element => $array ) {
|
|
|
|
// Add empty css var
|
|
$add_css = '';
|
|
$tablet_css = '';
|
|
$mobile_css = '';
|
|
|
|
// Get target and current mod
|
|
$target = isset( $array['target'] ) ? $array['target'] : '';
|
|
$get_mod = get_theme_mod( $element .'_typography' );
|
|
$tablet_get_mod = get_theme_mod( $element .'_tablet_typography' );
|
|
$mobile_get_mod = get_theme_mod( $element .'_mobile_typography' );
|
|
|
|
// Attributes to loop through
|
|
if ( ! empty( $array['attributes'] ) ) {
|
|
$attributes = $array['attributes'];
|
|
} else {
|
|
$attributes = array(
|
|
'font-family',
|
|
'font-weight',
|
|
'font-style',
|
|
'font-size',
|
|
'color',
|
|
'line-height',
|
|
'letter-spacing',
|
|
'text-transform',
|
|
);
|
|
}
|
|
|
|
// Loop through attributes
|
|
foreach ( $attributes as $attribute ) {
|
|
|
|
// Define val
|
|
$default = isset( $array['defaults'][$attribute] ) ? $array['defaults'][$attribute] : NULL;
|
|
$val = isset( $get_mod[$attribute] ) ? $get_mod[$attribute] : $default;
|
|
$tablet_val = isset( $tablet_get_mod[$attribute] ) ? $tablet_get_mod[$attribute] : '';
|
|
$mobile_val = isset( $mobile_get_mod[$attribute] ) ? $mobile_get_mod[$attribute] : '';
|
|
|
|
// If there is a value lets do something
|
|
if ( $val && $default != $val ) {
|
|
|
|
// Sanitize
|
|
$val = str_replace( '"', '', $val );
|
|
|
|
// Add px if font size or letter spacing
|
|
$px = '';
|
|
if ( ( 'font-size' == $attribute
|
|
&& is_numeric( $val ) )
|
|
|| 'letter-spacing' == $attribute ) {
|
|
$px = 'px';
|
|
}
|
|
|
|
// Add quotes around font-family && font family to scripts array
|
|
if ( 'font-family' == $attribute ) {
|
|
$fonts[] = $val;
|
|
|
|
// No brackets can be added as it cause issue with sans serif fonts
|
|
$val = $val;
|
|
}
|
|
|
|
// Add to inline CSS
|
|
if ( 'css' == $return ) {
|
|
$add_css .= $attribute .':'. $val . $px .';';
|
|
}
|
|
|
|
// Customizer styles need to be added for each attribute
|
|
elseif ( 'preview_styles' == $return ) {
|
|
$preview_styles['customizer-typography-'. $element .'-'. $attribute] = $target .'{'. $attribute .':'. $val . $px .';}';
|
|
}
|
|
|
|
}
|
|
|
|
// If there is a value lets do something
|
|
if ( $tablet_val
|
|
&& ( 'font-size' == $attribute
|
|
|| 'line-height' == $attribute
|
|
|| 'letter-spacing' == $attribute ) ) {
|
|
|
|
// Sanitize
|
|
$tablet_val = str_replace( '"', '', $tablet_val );
|
|
|
|
// Add px if font size or letter spacing
|
|
$px = '';
|
|
if ( ( 'font-size' == $attribute
|
|
&& is_numeric( $tablet_val ) )
|
|
|| 'letter-spacing' == $attribute ) {
|
|
$px = 'px';
|
|
}
|
|
|
|
// Add to inline CSS
|
|
if ( 'css' == $return ) {
|
|
$tablet_css .= $attribute .':'. $tablet_val . $px .';';
|
|
}
|
|
|
|
// Customizer styles need to be added for each attribute
|
|
elseif ( 'preview_styles' == $return ) {
|
|
$preview_styles['customizer-typography-'. $element .'-tablet-'. $attribute] = '@media (max-width: 768px){'. $target .'{'. $attribute .':'. $tablet_val . $px .';}}';
|
|
}
|
|
|
|
}
|
|
|
|
// If there is a value lets do something
|
|
if ( $mobile_val
|
|
&& ( 'font-size' == $attribute
|
|
|| 'line-height' == $attribute
|
|
|| 'letter-spacing' == $attribute ) ) {
|
|
|
|
// Sanitize
|
|
$mobile_val = str_replace( '"', '', $mobile_val );
|
|
|
|
// Add px if font size or letter spacing
|
|
$px = '';
|
|
if ( ( 'font-size' == $attribute
|
|
&& is_numeric( $mobile_val ) )
|
|
|| 'letter-spacing' == $attribute ) {
|
|
$px = 'px';
|
|
}
|
|
|
|
// Add to inline CSS
|
|
if ( 'css' == $return ) {
|
|
$mobile_css .= $attribute .':'. $mobile_val . $px .';';
|
|
}
|
|
|
|
// Customizer styles need to be added for each attribute
|
|
elseif ( 'preview_styles' == $return ) {
|
|
$preview_styles['customizer-typography-'. $element .'-mobile-'. $attribute] = '@media (max-width: 480px){'. $target .'{'. $attribute .':'. $mobile_val . $px .';}}';
|
|
}
|
|
|
|
}
|
|
|
|
}
|
|
|
|
// Front-end inline CSS
|
|
if ( $add_css && 'css' == $return ) {
|
|
$css .= $target .'{'. $add_css .'}';
|
|
}
|
|
|
|
// Front-end inline tablet CSS
|
|
if ( $tablet_css && 'css' == $return ) {
|
|
$css .= '@media (max-width: 768px){'. $target .'{'. $tablet_css .'}}';
|
|
}
|
|
|
|
// Front-end inline mobile CSS
|
|
if ( $mobile_css && 'css' == $return ) {
|
|
$css .= '@media (max-width: 480px){'. $target .'{'. $mobile_css .'}}';
|
|
}
|
|
|
|
}
|
|
|
|
// Return CSS
|
|
if ( 'css' == $return && ! empty( $css ) ) {
|
|
$css = '/* Typography CSS */'. $css;
|
|
return $css;
|
|
}
|
|
|
|
// Return styles
|
|
if ( 'preview_styles' == $return && ! empty( $preview_styles ) ) {
|
|
return $preview_styles;
|
|
}
|
|
|
|
// Return Fonts Array
|
|
if ( 'fonts' == $return && ! empty( $fonts ) ) {
|
|
return array_unique( $fonts );
|
|
}
|
|
|
|
}
|
|
|
|
/**
|
|
* Get CSS
|
|
*
|
|
* @since 1.0.0
|
|
*/
|
|
public function head_css( $output ) {
|
|
|
|
// Get CSS
|
|
$typography_css = self::loop( 'css' );
|
|
|
|
// Loop css
|
|
if ( $typography_css ) {
|
|
$output .= $typography_css;
|
|
}
|
|
|
|
// Return output css
|
|
return $output;
|
|
|
|
}
|
|
|
|
/**
|
|
* Returns correct CSS to output to wp_head
|
|
*
|
|
* @since 1.0.0
|
|
*/
|
|
public function live_preview_styles() {
|
|
|
|
$live_preview_styles = self::loop( 'preview_styles' );
|
|
|
|
if ( $live_preview_styles ) {
|
|
foreach ( $live_preview_styles as $key => $val ) {
|
|
if ( ! empty( $val ) ) {
|
|
echo '<style class="'. $key .'"> '. $val .'</style>';
|
|
}
|
|
}
|
|
}
|
|
|
|
}
|
|
|
|
/**
|
|
* Loads Google fonts
|
|
*
|
|
* @since 1.0.0
|
|
*/
|
|
public function load_fonts() {
|
|
|
|
// Get fonts
|
|
$fonts = self::loop( 'fonts' );
|
|
|
|
// Loop through and enqueue fonts
|
|
if ( ! empty( $fonts ) && is_array( $fonts ) ) {
|
|
foreach ( $fonts as $font ) {
|
|
oceanwp_enqueue_google_font( $font );
|
|
}
|
|
}
|
|
|
|
}
|
|
|
|
}
|
|
|
|
endif;
|
|
|
|
return new OceanWP_Typography_Customizer(); |