WordPress主题制作

  2. 主页
  4. 文档
  6. WordPress主题制作
  8. 引入外部CSS样式文件和JS脚本文件

引入外部CSS样式文件和JS脚本文件

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’，勾住一个函数。

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

wp_enqueue_style

wp_style_add_data

wp_enqueue_script：用来在网站前台加载脚本

说明：

以上是用来在前台加载脚本和CSS

以下是后台添加脚本和CSS

admin_enqueue_scripts 用来在后台加载脚本和CSS

login_enqueue_scripts 用来在WP登录页面加载脚本和CSS

 

/**
* 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’ );
 

 

1、引入style.css

不增加任务代码，默认为添加style.css，如下所示：

<link rel=”stylesheet” href=”http://127.0.0.1/wordpress/wp-content/themes/jijianzhuti/style.css” type=”text/css” media=”screen” />
对应关系

<link rel=’stylesheet’ id=’twentynineteen-style-css’ href=’http://127.0.0.1/wordpress/wp-content/themes/jijianzhuti/style.css?ver=5.0.1′ type=’text/css’ media=’all’ />
<link rel=’stylesheet’ id=’twentynineteen-print-style-css’ href=’http://127.0.0.1/wordpress/wp-content/themes/jijianzhuti/print.css?ver=5.0.1′ type=’text/css’ media=’print’ />
注意路径的使用：

style.css

get_stylesheet_uri()

非style.css

get_template_directory_uri() . ‘/print.css’

JS:

get_template_directory_uri()

 

 

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’ />
wp_enqueue_script( ‘twentynineteen-skip-link-focus-fix’, get_template_directory_uri() . ‘/js/skip-link-focus-fix.js’, array(), ‘20151215’, true );
对应HTML

<script type=’text/javascript’ src=’http://127.0.0.1/wordpress/wp-content/themes/jijianzhuti/js/skip-link-focus-fix.js?ver=20151215′></script>
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 &#8211; 又一个WordPress站点</title>
<link rel=’dns-prefetch’ href=’//s.w.org’ />
<link rel=”alternate” type=”application/rss+xml” title=”wordpress &raquo; Feed” href=”http://127.0.0.1/wordpress/?feed=rss2″ />
<link rel=”alternate” type=”application/rss+xml” title=”wordpress &raquo; 评论Feed” href=”http://127.0.0.1/wordpress/?feed=comments-rss2″ />

<script type=”text/javascript”>
window._wpemojiSettings = {“baseUrl”:”https:\/\/s.w.org\/images\/core\/emoji\/11\/72×72\/”,”ext”:”.png”,”svgUrl”:”https:\/\/s.w.org\/images\/core\/emoji\/11\/svg\/”,”svgExt”:”.svg”,”source”:{“concatemoji”:”http:\/\/127.0.0.1\/wordpress\/wp-includes\/js\/wp-emoji-release.min.js?ver=5.0.1″}};
!function(a,b,c){function d(a,b){var c=String.fromCharCode;l.clearRect(0,0,k.width,k.height),l.fillText(c.apply(this,a),0,0);var d=k.toDataURL();l.clearRect(0,0,k.width,k.height),l.fillText(c.apply(this,b),0,0);var e=k.toDataURL();return d===e}function e(a){var b;if(!l||!l.fillText)return!1;switch(l.textBaseline=”top”,l.font=”600 32px Arial”,a){case”flag”:return!(b=d([55356,56826,55356,56819],[55356,56826,8203,55356,56819]))&&(b=d([55356,57332,56128,56423,56128,56418,56128,56421,56128,56430,56128,56423,56128,56447],[55356,57332,8203,56128,56423,8203,56128,56418,8203,56128,56421,8203,56128,56430,8203,56128,56423,8203,56128,56447]),!b);case”emoji”:return b=d([55358,56760,9792,65039],[55358,56760,8203,9792,65039]),!b}return!1}function f(a){var c=b.createElement(“script”);c.src=a,c.defer=c.type=”text/javascript”,b.getElementsByTagName(“head”)[0].appendChild(c)}var g,h,i,j,k=b.createElement(“canvas”),l=k.getContext&&k.getContext(“2d”);for(j=Array(“flag”,”emoji”),c.supports={everything:!0,everythingExceptFlag:!0},i=0;i<j.length;i++)c.supports[j[i]]=e(j[i]),c.supports.everything=c.supports.everything&&c.supports[j[i]],”flag”!==j[i]&&(c.supports.everythingExceptFlag=c.supports.everythingExceptFlag&&c.supports[j[i]]);c.supports.everythingExceptFlag=c.supports.everythingExceptFlag&&!c.supports.flag,c.DOMReady=!1,c.readyCallback=function(){c.DOMReady=!0},c.supports.everything||(h=function(){c.readyCallback()},b.addEventListener?(b.addEventListener(“DOMContentLoaded”,h,!1),a.addEventListener(“load”,h,!1)):(a.attachEvent(“onload”,h),b.attachEvent(“onreadystatechange”,function(){“complete”===b.readyState&&c.readyCallback()})),g=c.source||{},g.concatemoji?f(g.concatemoji):g.wpemoji&&g.twemoji&&(f(g.twemoji),f(g.wpemoji)))}(window,document,window._wpemojiSettings);
</script>

<style type=”text/css”>
img.wp-smiley,
img.emoji {
display: inline !important;
border: none !important;
box-shadow: none !important;
height: 1em !important;
width: 1em !important;
margin: 0 .07em !important;
vertical-align: -0.1em !important;
background: none !important;
padding: 0 !important;
}
</style>

<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’ />
<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’ />
<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’ />
<link rel=’https://api.w.org/’ href=’http://127.0.0.1/wordpress/index.php?rest_route=/’ />
<link rel=”EditURI” type=”application/rsd+xml” title=”RSD” href=”http://127.0.0.1/wordpress/xmlrpc.php?rsd” />
<link rel=”wlwmanifest” type=”application/wlwmanifest+xml” href=”http://127.0.0.1/wordpress/wp-includes/wlwmanifest.xml” />
<meta name=”generator” content=”WordPress 5.0.1″ />
<link rel=”canonical” href=”http://127.0.0.1/wordpress/” />
<link rel=’shortlink’ href=’http://127.0.0.1/wordpress/’ />
<link rel=”alternate” type=”application/json+oembed” href=”http://127.0.0.1/wordpress/index.php?rest_route=%2Foembed%2F1.0%2Fembed&#038;url=http%3A%2F%2F127.0.0.1%2Fwordpress%2F” />
<link rel=”alternate” type=”text/xml+oembed” href=”http://127.0.0.1/wordpress/index.php?rest_route=%2Foembed%2F1.0%2Fembed&#038;url=http%3A%2F%2F127.0.0.1%2Fwordpress%2F&#038;format=xml” />
<style type=”text/css”>.recentcomments a{display:inline !important;padding:0 !important;margin:0 !important;}</style>
<link rel=”icon” href=”http://127.0.0.1/wordpress/wp-content/uploads/2019/01/cropped-post_loading-32×32.gif” sizes=”32×32″ />
<link rel=”icon” href=”http://127.0.0.1/wordpress/wp-content/uploads/2019/01/cropped-post_loading-192×192.gif” sizes=”192×192″ />
<link rel=”apple-touch-icon-precomposed” href=”http://127.0.0.1/wordpress/wp-content/uploads/2019/01/cropped-post_loading-180×180.gif” />
<meta name=”msapplication-TileImage” content=”http://127.0.0.1/wordpress/wp-content/uploads/2019/01/cropped-post_loading-270×270.gif” />

通过<?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>
————————————————
版权声明：本文为CSDN博主「赵蔚冬」的原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接及本声明。
原文链接：https://blog.csdn.net/u012809520/article/details/89346156

文章

这篇文章对您有用吗？ 是 否

我们要如何帮助您？