wordpress主题制作：引入外部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‘，勾住一个函数。

/**
 * 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 &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\/72x72\/","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&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&url=http%3A%2F%2F127.0.0.1%2Fwordpress%2F&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-32x32.gif" sizes="32x32" />
<link rel="icon" href="http://127.0.0.1/wordpress/wp-content/uploads/2019/01/cropped-post_loading-192x192.gif" sizes="192x192" />
<link rel="apple-touch-icon-precomposed" href="http://127.0.0.1/wordpress/wp-content/uploads/2019/01/cropped-post_loading-180x180.gif" />
<meta name="msapplication-TileImage" content="http://127.0.0.1/wordpress/wp-content/uploads/2019/01/cropped-post_loading-270x270.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>

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

时间： 2024-10-05 05:07:06

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

久未更 ~ 五之 —— 引入外部CSS样式表 小节

> > > > > 久未更 系列一:在html中引入外部css样式表 1 //引入外部css样式表 2 //<lilnk>要放在<head>标签的第一行,否则不起作用 3 //如下 4 <head> 5 <link rel="stylesheet" type="text/css" href="waibu.css"> 6 <meta charset="ut

wordpress主题制作：引入外部CSS样式文件和JS脚本文件（2）-要不要注册样式表（未完待续）

注册和排队样式表 添加动态内联样式:wp_add_inline_style() 检查样式表的排队状态:wp_style_is() 注销样式文件:wp_deregister_style() wp_dequeue_style() 三个动作钩子 wp_enqueue_scripts 用来在网站前台加载脚本和CSSadmin_enqueue_scripts 用来在后台加载脚本和CSSlogin_enqueue_scripts 用来在WP登录页面加载脚本和CSS 原文地址:https://www.cnbl

&lt;link&gt;和@import url()引入外部css文件的区别

<link>和@import url()引入外部css文件的区别:标题中的两种方式都可以引入外部css文件,关于它们的基本用法这里就不多介绍了,具体可以参阅相关阅读.相关阅读:(1).<link>标签可以参阅HTML的<link>标签一章节.(2)[email protected] url()可以参阅css的@import url用法简单介绍一章节.下面介绍一下这两者的比较明显的区别.(1).加载机制不同,link方式是首先加载完css文件,然后再加载页面,而@impo

Vue style里面使用@import引入外部css, 作用域是全局的解决方案

问题描述 使用@import引入外部css,作用域却是全局的 <template> </template> <script> export default { name: "user" }; </script> <!-- Add "scoped" attribute to limit CSS to this component only --> <style scoped> @import &q

WordPress主题制作教程5：循环

调用所有页面,post_type值:page对应页面,post对应文章 <?php $args=array( 'post_type'=>'page' ); $the_query = new WP_Query( $args ); // The Loop if ( $the_query->have_posts() ) { echo '<ul>'; while ( $the_query->have_posts() ) { $the_query->the_post();

使用 WordPress 主题制作的20个精美网页

WordPress 是一款个人博客系统,并逐步演化成一款内容管理系统软件,它是使用 PHP 语言和 MySQL 数据库开发的.用户可以在支持 PHP 和 MySQL 数据库的服务器上使用自己的博客.这里给大家分享使用 WordPress 主题制作的20个精美网页. 您可能感兴趣的相关文章 太赞了!超炫的页面切换动画效果[附源码下载] 创意无限!一组网页边栏过渡动画[附源码下载] 好东西!动感的页面加载动画效果[附源码下载] 使用 CSS3 实现3D图片滑块效果[附源码下载] 时尚设计!三种奇特网

动态调试JS脚本文件

动态调试JS脚本文件:(JS源映射 - sourceURL)与 debugge 问题描述: 当你以动态的方式加载 JS 文件的时候(就是动态加载JS脚本),你就会发现,调试这个加载后的动态JS太过于费劲了,很难调试,那么,以下方案帮你搞定! 解决方式1:sourceURL(源映射)—> //@ sourceURL=b.js //@ sourceURL=quarterEvaluation.js PS: @符号和 sourceURL间必须有空格,否则达不到效果.!!! @符号和 sourceURL间

网站引入了css样式文件能访问，就是没有效果

今天后端的同事遇到这么个问题,引入了外部css文件也能访问,就是页面上没有效果. 大概是下面这个样子: css引入如下: 我非常的纳闷,说真的我还没遇到过这种情况,UI是可以运行的,一点事都没有... 没办法只有对比检查了,发现了问题所在 ,link没有加 rel="stylesheet" 属性, (以前都是自动完成,没怎么在意,汗~~) 于是就加上这个属性,就可以了(>﹏<) 这个属性是必须的,说白了就是指明你链进来的对象是个什么东西的,(我们这里指名被链接的文档是一个样

WordPress主题制作教程1：主题基本文件

在最简单的情况下,一个WordPress主题由两个文件构成: index.php ------------------主模版 style.css  -------------------主样式表 以下不是必须的,但是有特殊意义的模版列表: 404.php 404模板  rtl.css  如果网站的阅读方向是自右向左的,会被自动包含进来 comments.php  评论模板 single.php 文章模板.显示单独的一篇文章时被调用,如果模板不存在会使用 index.php single-<pos