README

描述

为 WordPress 主题自定义器添加 Google 字体自定义组件。

安装

手动安装

1. 上传插件（如有必要，请解压）到 "/wp-content/plugins/" 目录。
2. 通过 WordPress 的 "插件" 菜单激活插件。
3. 导航到设置页面并添加对 Google API Key 的访问权限，以使用 字体 API

Composer 安装

从项目根目录运行

composer require loganstellway/wp-customize-google-fonts

使用

从主题的 functions.php 文件中创建自定义组件实例

<?php

// Add Section
$wp_customize->add_section('typography', array(
    'title' => __( 'Typography' ),
    'priority' => 37,
));

// Add Google Font Customize Components
if ( class_exists( '\LoganStellway\GoogleFonts\Customize\Control' ) ) {
    // Content Font
    $wp_customize->add_setting('google_fonts_content', array());
    $wp_customize->add_control(new \LoganStellway\GoogleFonts\Customize\Control($wp_customize, 'google_fonts_content', array(
        'label' => __( 'Content Font', 'sage' ),
        'section' => 'typography',
    )));

    // Heading Font
    $wp_customize->add_setting('google_fonts_heading', array());
    $wp_customize->add_control(new \LoganStellway\GoogleFonts\Customize\Control($wp_customize, 'google_fonts_heading', array(
        'label' => __( 'Heading Font', 'sage' ),
        'section' => 'typography',
    )));
}

在 wp_enqueue_scripts 钩子中添加 Google 字体样式表

<?php

add_action('wp_enqueue_scripts', function () {
    if ( class_exists( '\LoganStellway\GoogleFonts\Customize\Control' ) ) {
        $fonts = array_filter( array (
            get_theme_mod('google_fonts_content'),
            get_theme_mod('google_fonts_heading'),
        ) );

        if ( count( $fonts ) ) {
            $url = \LoganStellway\GoogleFonts\Helpers\getBaseUrl() . implode( '|', $fonts );
            wp_enqueue_style('theme/google-fonts', $url);
        }
    }
}, 100);

在 wp_head 钩子中实现字体

<?php

add_action('wp_head', function() {
    if ( class_exists( '\LoganStellway\GoogleFonts\Customize\Control' ) ) {
        if ( $content_font = get_theme_mod('google_fonts_content', null ) ) {
            $content_font = \LoganStellway\GoogleFonts\Helpers\getFontParts( $content_font );
            ?>
            <style type="text/css">
            html,body {
                font-family: "<?php echo $content_font['family'] ?>";
                font-weight: <?php echo $content_font['weight'] ?>;
                font-style: <?php echo $content_font['style'] ?>;
            }
            </style>
            <?php
        }

        if ( $heading_font = get_theme_mod('google_fonts_content', null ) ) {
            $heading_font = \LoganStellway\GoogleFonts\Helpers\getFontParts( $heading_font );
            ?>
            <style type="text/css">
            h1,.h1,h2,.h2,h3,.h3,h4,.h4,h5,.h5,h6,.h6 {
                font-family: "<?php echo $heading_font['family'] ?>";
                font-weight: <?php echo $heading_font['weight'] ?>;
                font-style: <?php echo $heading_font['style'] ?>;
            }
            </style>
            <?php
        }
    }
});