0

我正在学习开发 WordPress，并从头开始构建我的主题。我读到将 Google 字体包含在主题中的最佳方法是使用 WebFont Loader。此方法有助于提高 PageSpeed 测试中的分数。

我尝试从 function.php 和 wfloader.js 文件添加 WebFont Loader。不幸的是，字体没有加载到我的主题中。我究竟做错了什么？我无法弄清楚自己。

所以这是我在function.php文件中的代码：

add_action( 'wp_enqueue_scripts', 'wpb_scripts_styles' );

function wpb_scripts_styles() {
wp_register_script(
    'web-font-loader',
    '//ajax.googleapis.com/ajax/libs/webfont/1.6.26/webfont.js',
    array( '' ),
    ''
);

wp_enqueue_script(
    'fonts-to-load',
    esc_url( get_stylesheet_directory_uri() ) . '/assets/js/wfloader.js',
    array( 'web-font-loader' ),
    ''
); 
}

这是来自wfloader.js

function webfontload() {
    WebFont.load({
        google: {
            families: [
                'Playfair+Display:400,700,900&subset=latin-ext'
            ]
        }
    });
}

感谢您的任何建议！

4

2 回答 2

1

我修复了我的代码并且它有效:)

function custom_scripts_styles() {

    wp_register_script(
        'web-font-loader',
        '//ajax.googleapis.com/ajax/libs/webfont/1.6.26/webfont.js',
        array(),
        null );

    wp_enqueue_script(
        'fonts-to-load',
        get_template_directory_uri() . '/assets/js/wfloader.js',
        array( 'web-font-loader' ),
        null,
        true ); 
    }
于 2018-05-03T17:43:37.420 回答
0

仅 2 条评论不涉及主要问题。我不会使用 wpb_ 启动您的功能，因为一个著名的页面构建器插件会这样做，如果您使用您的主题激活该插件，您可能会遇到冲突。函数 get_stylesheet_directory_uri() 不需要 esc_url，您可以信任这个 WordPress 函数的结果。您是否检查过脚本 //ajax.googleapis.com/ajax/libs/webfont/1.6.26/webfont.js 是否真的加载了？我的意思是检查元素并在 HTML 中搜索 //ajax.googleapis.com/ajax/libs/webfont/1.6.26/webfont.js。如果是这样，请检查控制台中是否有错误，我的意思是 F12 -> 控制台

于 2018-04-30T23:15:18.353 回答