当前位置:
  1. 首页 »
  2. 笔记 »
  3. 正文

WordPress 主题\插件\后台,引入css/js

零分 2,032

wordpress 主题\插件\后台引入CSS/JS,其实归根结底就2种方式,怎么方便怎么来。

1、直接引入。

直接在需要的地方引入,比如主题模板,直接在header.php中引入。

2、使用官方函数导入wp_enqueue_scripts/wp_enqueue_style加载文件,从函数就可以看出wp_enqueue_scripts是加载JS文件,wp_enqueue_style是加载CSS文件。

第一种方法就很简单了,知道一点html都知道,直接引入JS/CSS文件的代码。

引入JS,你可以这样写:

<script type='text/javascript' src='js.js'></script>

引入CSS,你可以这样写:

<link rel="stylesheet" type="text/css" href="css.css">

大多情况都是直接这样写,在wordpress中,主题目录的函数是:bloginfo(‘template_url’)、bloginfo(‘template_directory’),或者get_template_directory_uri(),都是主题目录,比如你的JS/CSS放在了主题目录img文件夹下,就可以这样写。

JS:
<script type='text/javascript' src='<?php echo bloginfo('template_directory')?>/img/js.js'></script>
CSS:
<link rel="stylesheet" type="text/css" href="<?php echo bloginfo('template_directory')?>/img/css.css">

一般wordpress主题的样式文件是:style.css,放在主题目录下。所以是这样的

<link rel="stylesheet" type="text/css" href="<?php echo get_template_directory_uri();?>style.css">

主题CSS如果想要放在function里,首先需要主题放上钩子wp_head()。

然后在function.php中添加action,wordpress会添加上设置文件,其实还是第一种方式。

function addcss(){
  echo '<link rel="stylesheet" type="text/css" href="css.css">';
  echo '';
  //.....可以设置多个
}
add_action( 'wp_head', 'addcss' );

​这种,只要有钩子,就会添加,不会去判断是否已经存在什么的。有可能会出现重复加载这种情况..

接下来就是第二种,WordPress提供的函数加载文件。

1、注册函数wp_register_style(),

wp_register_style( string $handle, string|bool $src, array $deps = array(),string|bool|null $ver = false, string $media = 'all' )

$handle:字符串(必填)。样式名称,必须是唯一值。

$src:字符串或布尔值(必填)。完整的样式文件路径或基于WordPress根目录的相对路径。如果资源为false,则样式为基于其他样式的别名。

$deps:数组(可选)。样式将在该数组所包含的其他样式之后引入。

$ver:字符串、布尔值或空值(可选)。指定样式版本号,将其作为查询字符串添加到 URL 中以清除缓存。 如果设置为 false ,则自动设置当前安装的 WordPress 版本为版本号。 如果设置为 null ,则不添加任何版本。

$media:布尔值(可选)。该样式表针对何种媒体设备使用,支持“all”、’print’ 以及 ‘screen’ ,或者 ‘(orientation: portrait)’ 与 ‘(max-width: 640px)’等。

该函数返回布尔值( true 或 false),用以判定样式是否注册。

如​:

function addcss(){
  wp_register_style('mycss','css.css','1.0.0','all');
}
add_action('wp_enqueue_scripts', 'addcss');

注释:

wp_enqueue_scripts:前台加载JS/CSS

admin_enqueue_scripts:后台加载JS/CSS

login_enqueue_scripts​:登录页加载JS/CSS

加载JS和加载CSS一样,用wp_enqueue_script();

另外​:JQ可以直接用wordpress自带的JQ库。​引入方法:

<?php wp_enqueue_script("jquery");?>

​JQ写法:

jQuery(document).ready(function($) {
//这里就可以直接用$符号了。
});
标签:

wordpress禁用REST API导致古腾堡编辑器发布文章出错问题

wordpress禁用REST API,在function.php中加入以下代码: add_filter("json_enabled", "__return_false"); add_filter("json_jsonp_enabled", "__return_false"); add_filter("rest_enabled", "__return_false"); add_filter("rest_jsonp_enabled", "__return_false"); remove_action("init", "rest_api_init"); remove_action("rest_ap
笔记 1,380

wordpress 后台主题设置选项按钮(button、input submit)点击屏蔽提交事件禁止刷新

wordpress 后台主题设置选项按钮(button、input submit)点击屏蔽提交事件禁止刷新 如果在设计主题或者插件后台设置选项时,wordpress后台的按钮(button、input submit)默认是提交操作,如只是响应JS事件,需要屏蔽提交,防止页面刷新。e.preventDefault(); 完整示例: $("button.copy").on("click",function(e){ e.preventDefault(); JS操作 });
笔记 1,262

wordpress 过滤垃圾评论有效方法

wordpress不管站是什么样的,只要开启了评论,就会有垃圾评论来光顾。这些垃圾评论,都有一个共同点,那就是全英文。 既然是全英文,对于国人,那就暴力一点,直接过滤点不含中文的评论。 在主题functions.php中添加: function my_comment_spam_filter($comment_id) { $comment = get_comment($comment_id); if (!preg_match('/[\x{4e00}-\x{9fa5}]/u',$comment->comment_content)) { wp_delete_com
笔记 2,419

wordpress评论模块,好久没写过了,大概是忘记了

不知道什么时候开始,或许是因为备案要求不能有交互式内容吧,自用模板都没有写评论模块 或许还有一个原因,就是垃圾评论太多了 很多网站都设置了登录才能评论,也别说评论了,现在估计也很少写文字了​。 今天要写一个留言板,需要评论模块,感觉都忘记了,查了下wordpress的评论模块函数 comment_form()​:评论表单 wp_list_comments()​:帖子列表 刚开始放上去,没有输出,依稀记得,wordpress是有内置表单的,不可能不会有输出的问题​。 这个评论是放在页面上的,理论上和文章模块都是一样的。原本以为是不支持页面,放文章页,也是不显示,​到后台看了下,原来是关闭了评论。
随笔 2,768

wordpress 分类页获取分类名称及该分类信息并显示文章数量

有一个这样的需求,要在分类页显示该分类下的所有文章数量,网上的写法大致都是用循环去叠加该分类下子分类的文章数量。 但是,其实最简单的写法是自己调用内置函数获取文章数量,包括在首页显示全站的所有文章数量。 $wp_query->found_posts 为了验证这个函数,我特意建立了一个空白的主题,在每个页面上都打印出 $wp_query 这个函数。 wordpresss主题主要的几个文件: header:页头 footer:页脚 index:主页 category:分类页 single:文章模板 page:页面模板 search:搜索模板 tag:标签模板 functions:函数文件 head
笔记 1,886