WordPress本身已经集成全套的jQuery库与其他子库，所以在写前端程序时可以考虑调用WordPress自带的jQuery库，这样jQuery版本就能够随着WordPress升级一起更新，找了很久的教程，才找到怎么调用jQuery的方法，同时还要解决jQuery不能选择伪元素的问题。

我们的技术分享 06 Skywen天问学习 作者 Mogmail 2021.02.24

需求

需要在skywen官网底部添加微信图标，以及鼠标悬浮微信图标时，展示二维码的弹框。

思路

因为底部是由三个footer小工具集合而成的，“联系我们”这本身只是一个以标题形式展现的，所以很难在它后面单独添加一个图形标签，所以我就想到用伪元素的方法去添加，并调用WordPress本身自带的jQuery库去编写方法。
2021.02.24-调用WordPress5.5自带jQuery库的方法，附带避坑指南-Skywen天问信息

步骤

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

注意：wp_enqueue_script(“jquery”); 务必加在 wp_head(); 的前面，我是加在头部的，如下：

<head>
    <meta charset="<?php bloginfo('charset'); ?>">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">

    <link rel="profile" href="https://gmpg.org/xfn/11">
    <link rel="stylesheet" href="<?php echo get_template_directory_uri(); ?>/sass/style.scss">
    <?php wp_enqueue_script("jquery"); ?>
    <?php wp_head(); ?>
</head>

jQuery的用法要像下面的一样，要不然识别不了

WordPress 的 jQuery 和原版唯一的不同, 就是在最后一行加了 jQuery.noConflict()；这个noConflict() 就是为了与其它的library 兼容性, 如:Prototype, MooTools, 或 YUI. 

jQuery(document).ready(function($) {

// "$"符号在这里才能被识别

});

还有一个点就是，jQuery不能操作伪元素，也就是说我们无法通过jQuery获取到元素中的伪元素进行事件绑定，所以需要利用pointer-events属性屏蔽元素操作事件，将事件绑定到伪元素上。

.skywen-sidebar2-footer-img .widget-title{
    position: relative;
    pointer-events: none;/*重点1在这里*/
}
.skywen-sidebar2-footer-img .widget-title::after{
    content: '';
    position: absolute;
    top: 0;
    left: 90px;
    width: 32px;
    height: 32px;
    background-image: url("./assets/images/weixin@2x.png");
    background-repeat: no-repeat;
    background-size: 2.143rem;
    background-position: center;
    pointer-events:auto; /*重点2在这里*/
}

2021.02.24-调用WordPress5.5自带jQuery库的方法，附带避坑指南-Skywen天问信息