wordpress主题制作：引入外部CSS样式文件和JS脚本文件

时间：2019-01-19 00:50:12 阅读：304 评论：0 收藏：0 [点我收藏+]

标签：upload cat action header 外部模板文件 ack x270 textarea

wordpress不建议修改模板文件header.php引入样式文件和JS文件，建议通过wp_head()和wp_footer()函数引入相关的内容。

一、显示标题

二、通过‘wp_enqueue_scripts‘引入scripts and styles

三、通过add_action()的“wp_head”钩子

以2019主题为例，在functons.php中相关的代码：

一、显示标题

在twentynineteen_setup()中，

add_theme_support( ‘title-tag‘ );

说明：

WordPress 4.4 弃用了 wp_title 函数，通过add_theme_support( ‘title-tag‘ )实现对网站页面的优化（页面标题）。

参考《add_theme_support 主题支持》相关文章。

二、通过‘wp_enqueue_scripts‘引入scripts and styles

通过add_action()，使用钩子‘wp_enqueue_scripts‘，勾住一个函数。

/**
 * Enqueue scripts and styles.
 */
function twentynineteen_scripts() {
    wp_enqueue_style( ‘twentynineteen-style‘, get_stylesheet_uri(), array(), wp_get_theme()->get( ‘Version‘ ) );

    wp_style_add_data( ‘twentynineteen-style‘, ‘rtl‘, ‘replace‘ );

    wp_enqueue_script( ‘twentynineteen-skip-link-focus-fix‘, get_template_directory_uri() . ‘/js/skip-link-focus-fix.js‘, array(), ‘20151215‘, true );

    if ( has_nav_menu( ‘menu-1‘ ) ) {
        wp_enqueue_script( ‘twentynineteen-priority-menu‘, get_theme_file_uri( ‘/js/priority-menu.js‘ ), array(), ‘1.0‘, true );
        wp_enqueue_script( ‘twentynineteen-touch-navigation‘, get_theme_file_uri( ‘/js/touch-keyboard-navigation.js‘ ), array(), ‘1.0‘, true );
    }

    wp_enqueue_style( ‘twentynineteen-print-style‘, get_template_directory_uri() . ‘/print.css‘, array(), wp_get_theme()->get( ‘Version‘ ), ‘print‘ );

    if ( is_singular() && comments_open() && get_option( ‘thread_comments‘ ) ) {
        wp_enqueue_script( ‘comment-reply‘ );
    }
}
add_action( ‘wp_enqueue_scripts‘, ‘twentynineteen_scripts‘ );

在2019主题中，用到了三个函数：

wp_enqueue_style

wp_style_add_data

wp_enqueue_script

说明：

enqueue:入队（入列）
dequeue：出队（出列）

1、引入style.css

wp_enqueue_style( ‘twentynineteen-style‘, get_stylesheet_uri(), array(), wp_get_theme()->get( ‘Version‘ ) );

对应：

<link rel=‘stylesheet‘ id=‘twentynineteen-style-css‘  href=‘http://127.0.0.1/wordpress/wp-content/themes/twentynineteen/style.css?ver=1.1‘ type=‘text/css‘ media=‘all‘ />

说明：路径后空代表是style.css

2、非style.css引入：

wp_enqueue_style( ‘twentynineteen-print-style‘, get_template_directory_uri() . ‘/print.css‘, array(), wp_get_theme()->get( ‘Version‘ ), ‘print‘ );

对应：

<link rel=‘stylesheet‘ id=‘twentynineteen-print-style-css‘  href=‘http://127.0.0.1/wordpress/wp-content/themes/twentynineteen/print.css?ver=1.1‘ type=‘text/css‘ media=‘print‘ />

3、如下两条wp_enqueue_script对应情况：

wp_enqueue_script( ‘twentynineteen-priority-menu‘, get_theme_file_uri( ‘/js/priority-menu.js‘ ), array(), ‘1.0‘, true );
wp_enqueue_script( ‘twentynineteen-touch-navigation‘, get_theme_file_uri( ‘/js/touch-keyboard-navigation.js‘ ), array(), ‘1.0‘, true );

对应

<script type=‘text/javascript‘ src=‘http://127.0.0.1/wordpress/wp-content/themes/twentynineteen/js/priority-menu.js?ver=1.0‘></script>
<script type=‘text/javascript‘ src=‘http://127.0.0.1/wordpress/wp-content/themes/twentynineteen/js/touch-keyboard-navigation.js?ver=1.0‘></script>

其他；

wp_script_add_data

三、通过add_action()的“wp_head”钩子

/**
 * Display custom color CSS in customizer and on frontend.
 */
function twentynineteen_colors_css_wrap() {

    // Only include custom colors in customizer or frontend.
    if ( ( ! is_customize_preview() && ‘default‘ === get_theme_mod( ‘primary_color‘, ‘default‘ ) ) || is_admin() ) {
        return;
    }

    require_once get_parent_theme_file_path( ‘/inc/color-patterns.php‘ );

    if ( ‘default‘ === get_theme_mod( ‘primary_color‘, ‘default‘ ) ) {
        $primary_color = 199;
    } else {
        $primary_color = absint( get_theme_mod( ‘primary_color_hue‘, 199 ) );
    }
    ?>

    <style type="text/css" id="custom-theme-colors" <?php echo is_customize_preview() ? ‘data-hue="‘ . $primary_color . ‘"‘ : ‘‘; ?>>
        <?php echo twentynineteen_custom_colors_css(); ?>
    </style>
    <?php
}
add_action( ‘wp_head‘, ‘twentynineteen_colors_css_wrap‘ );

对应下面的：

引入快编辑样式文件（block editor styles）

/**
 * Enqueue supplemental block editor styles.
 */
function twentynineteen_editor_customizer_styles() {

    wp_enqueue_style( ‘twentynineteen-editor-customizer-styles‘, get_theme_file_uri( ‘/style-editor-customizer.css‘ ), false, ‘1.0‘, ‘all‘ );

    if ( ‘custom‘ === get_theme_mod( ‘primary_color‘ ) ) {
        // Include color patterns.
        require_once get_parent_theme_file_path( ‘/inc/color-patterns.php‘ );
        wp_add_inline_style( ‘twentynineteen-editor-customizer-styles‘, twentynineteen_custom_colors_css() );
    }
}
add_action( ‘enqueue_block_editor_assets‘, ‘twentynineteen_editor_customizer_styles‘ );

对应

<link rel=‘stylesheet‘ id=‘wp-block-library-css‘ href=‘http://127.0.0.1/wordpress/wp-includes/css/dist/block-library/style.min.css?ver=5.0.1‘ type=‘text/css‘ media=‘all‘ />
<link rel=‘stylesheet‘ id=‘wp-block-library-theme-css‘ href=‘http://127.0.0.1/wordpress/wp-includes/css/dist/block-library/theme.min.css?ver=5.0.1‘ type=‘text/css‘ media=‘all‘ />

显示定制器中的颜色定制

add_action( ‘wp_head‘, ‘twentynineteen_colors_css_wrap‘ );

如下内容是以2019主题为例。

通过<?php wp_head(); ?>加进去的：

<title>wordpress – 又一个WordPress站点</title>
<link rel=‘dns-prefetch‘ href=‘//s.w.org‘ />
<link rel="alternate" type="application/rss+xml" title="wordpress » Feed" href="http://127.0.0.1/wordpress/?feed=rss2" />
<link rel="alternate" type="application/rss+xml" title="wordpress » 评论Feed" href="http://127.0.0.1/wordpress/?feed=comments-rss2" />

通过<?php wp_footer(); ?>加进去的：

<script type=‘text/javascript‘ src=‘http://127.0.0.1/wordpress/wp-content/themes/twentynineteen/js/priority-menu.js?ver=1.0‘></script>
<script type=‘text/javascript‘ src=‘http://127.0.0.1/wordpress/wp-content/themes/twentynineteen/js/touch-keyboard-navigation.js?ver=1.0‘></script>
<script type=‘text/javascript‘ src=‘http://127.0.0.1/wordpress/wp-includes/js/wp-embed.min.js?ver=5.0.1‘></script>
    <script>
    /(trident|msie)/i.test(navigator.userAgent)&&document.getElementById&&window.addEventListener&&window.addEventListener("hashchange",function(){var t,e=location.hash.substring(1);/^[A-z0-9_-]+$/.test(e)&&(t=document.getElementById(e))&&(/^(?:a|select|input|button|textarea)$/i.test(t.tagName)||(t.tabIndex=-1),t.focus())},!1);
    </script>

wordpress主题制作：引入外部CSS样式文件和JS脚本文件

标签：upload cat action header 外部模板文件 ack x270 textarea

原文地址：https://www.cnblogs.com/zhaoweidong/p/10290241.html

踩

(0)

评论一句话评论（0）

分享档案

更多>

2021年07月29日 (22)
2021年07月28日 (40)
2021年07月27日 (32)
2021年07月26日 (79)
2021年07月23日 (29)
2021年07月22日 (30)
2021年07月21日 (42)
2021年07月20日 (16)
2021年07月19日 (90)
2021年07月16日 (35)

周排行