需求

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

思路

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

Wordpress中基本已经集成了全套的jQuery库与其他子库，所以在写前端程序时可以考虑调用Wordpress自带的jQuery库，这样jQuery版本就能够随着Wordpress升级一起更新。

image.png

步骤

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

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

  1. <head>
  2.     <meta charset="<?php bloginfo('charset'); ?>">
  3.     <meta name="viewport" content="width=device-width, initial-scale=1.0">
  5.     <link rel="profile" href="https://gmpg.org/xfn/11">
  6.     <link rel="stylesheet" href="<?php echo get_template_directory_uri(); ?>/sass/style.scss">
  7.     <?php wp_enqueue_script("jquery"); ?>
  8.     <?php wp_head(); ?>
  9. </head>

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

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

  1. jQuery(document).ready(function($) {
  3. // "$"符号在这里才能被识别
  5. });

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

  1. .skywen-sidebar2-footer-img .widget-title{
  2.     position: relative;
  3.     pointer-events: none;/*重点1在这里*/
  4. }
  5. .skywen-sidebar2-footer-img .widget-title::after{
  6.     content: '';
  7.     position: absolute;
  8.     top: 0;
  9.     left: 90px;
  10.     width: 32px;
  11.     height: 32px;
  12.     background-image: url("./assets/images/weixin@2x.png");
  13.     background-repeat: no-repeat;
  14.     background-size: 2.143rem;
  15.     background-position: center;
  16.     pointer-events:auto; /*重点2在这里*/
  17. }
  1. <script type="text/javascript">
  2. jQuery(document).ready( function($) {
  3.     jQuery('.skywen-sidebar2-footer-img').find('.widget-title').on('mouseover', function() {
  4.         jQuery('.skywen-sidebar2-footer-code').fadeIn()
  5.     }).on('mouseout', function() {
  6.         jQuery('.skywen-sidebar2-footer-code').fadeOut()
  7.     })
  8. });
  9. </script>