在使用的过程中，很多时候我们想在网站的头部加上微信图标，当鼠标放到微信图标上以后显示微信二维码图片。效果如下图：
这篇wordpress教程里我们就向大家介绍一下实现的方法，原理是通过使用JS来控制DIV显示或隐藏。
1. 切换到主题目录，打开header.PHP文件，在标签之前加入以下代码：
Crayon-5c891d03330b1300037810" class="
Crayon-
Syntax Crayon-theme-classic
Crayon-font-monaco
Crayon-os-pc print-yes notranslate" data-settings=" minimize scroll-mou
SEOver" style=" margin-top: 12px; margin-bottom: 12px; font-size: 12px !important; line-height: 15px !important;">
Crayon-toolbar" data-settings=" mou
SEOver overlay hide delay" style="font-size: 12px !important;height: 18px !important; line-height: 18px !important;">
Crayon-title">header.PHPCrayon-tools" style="font-size: 12px !important;height: 18px !important; line-height: 18px !important;">
Crayon-mixed-highlight" title="Contains Mixed Languages">Crayon-button
Crayon-nums-button" title="Toggle Line Numbers">
Crayon-button-icon">
Crayon-button
Crayon-plain-button" title="Toggle Plain Code">
Crayon-button-icon">
Crayon-button
Crayon-wrap-button" title="Toggle Line Wrap">
Crayon-button-icon">
Crayon-button
Crayon-expand-button" title="Expand Code">
Crayon-button-icon">
Crayon-button
Crayon-copy-button" title="Copy">
Crayon-button-icon">
Crayon-button
Crayon-popup-button" title="Open Code In New Window">
Crayon-button-icon">
Crayon-info" style="min-height: 16.8px !important; line-height: 16.8px !important;">
Crayon-plain-wrap">
Crayon-main" style="">
Crayon-table">Crayon-row">Crayon-nums " data-settings="show">Crayon-nums-content" style="font-size: 12px !important; line-height: 15px !important;"> Crayon-num" data-line=" Crayon-5c891d03330b1300037810-1">1 Crayon-num Crayon-striped-num" data-line=" Crayon-5c891d03330b1300037810-2">2 Crayon-num" data-line=" Crayon-5c891d03330b1300037810-3">3 Crayon-num Crayon-striped-num" data-line=" Crayon-5c891d03330b1300037810-4">4 Crayon-num" data-line=" Crayon-5c891d03330b1300037810-5">5 Crayon-num Crayon-striped-num" data-line=" Crayon-5c891d03330b1300037810-6">6 Crayon-num" data-line=" Crayon-5c891d03330b1300037810-7">7 Crayon-num Crayon-striped-num" data-line=" Crayon-5c891d03330b1300037810-8">8 Crayon-pre" style="font-size: 12px !important; line-height: 15px !important; -moz-tab-size:4; -o-tab-size:4; -webkit-tab-size:4; tab-size:4;"> Crayon-line" id=" Crayon-5c891d03330b1300037810-1"> Crayon-ta">注：wechat-image是二维码图片所在DIV的ID。 2. 在想要显示二维码的地方加入以下HTML代码： Crayon-5c891d03330ba815755690" class=" Crayon- Syntax Crayon-theme-classic Crayon-font-monaco Crayon-os-pc print-yes notranslate" data-settings=" minimize scroll-mou SEOver" style=" margin-top: 12px; margin-bottom: 12px; font-size: 12px !important; line-height: 15px !important;"> Crayon-toolbar" data-settings=" mou SEOver overlay hide delay" style="font-size: 12px !important;height: 18px !important; line-height: 18px !important;"> Crayon-title">Crayon-tools" style="font-size: 12px !important;height: 18px !important; line-height: 18px !important;"> Crayon-button Crayon-nums-button" title="Toggle Line Numbers"> Crayon-button-icon"> Crayon-button Crayon-plain-button" title="Toggle Plain Code"> Crayon-button-icon"> Crayon-button Crayon-wrap-button" title="Toggle Line Wrap"> Crayon-button-icon"> Crayon-button Crayon-expand-button" title="Expand Code"> Crayon-button-icon"> Crayon-button Crayon-copy-button" title="Copy"> Crayon-button-icon"> Crayon-button Crayon-popup-button" title="Open Code In New Window"> Crayon-button-icon"> Crayon-info" style="min-height: 16.8px !important; line-height: 16.8px !important;"> Crayon-plain-wrap"> Crayon-main" style=""> Crayon-table">Crayon-row">Crayon-nums " data-settings="show">Crayon-nums-content" style="font-size: 12px !important; line-height: 15px !important;"> Crayon-num" data-line=" Crayon-5c891d03330ba815755690-1">1 Crayon-num Crayon-striped-num" data-line=" Crayon-5c891d03330ba815755690-2">2 Crayon-num" data-line=" Crayon-5c891d03330ba815755690-3">3 Crayon-num Crayon-striped-num" data-line=" Crayon-5c891d03330ba815755690-4">4 Crayon-num" data-line=" Crayon-5c891d03330ba815755690-5">5 Crayon-num Crayon-striped-num" data-line=" Crayon-5c891d03330ba815755690-6">6 Crayon-num" data-line=" Crayon-5c891d03330ba815755690-7">7 Crayon-num Crayon-striped-num" data-line=" Crayon-5c891d03330ba815755690-8">8 Crayon-num" data-line=" Crayon-5c891d03330ba815755690-9">9 Crayon-pre" style="font-size: 12px !important; line-height: 15px !important; -moz-tab-size:4; -o-tab-size:4; -webkit-tab-size:4; tab-size:4;"> Crayon-line" id=" Crayon-5c891d03330ba815755690-1"> Crayon-r ">Crayon-e ">idCrayon-o">=Crayon-s ">"wechat" Crayon-line Crayon-striped-line" id=" Crayon-5c891d03330ba815755690-2"> Crayon-i "> Crayon-r ">
Crayon-line" id=" Crayon-5c891d03330ba815755690-5"> Crayon-r ">Crayon-line Crayon-striped-line" id=" Crayon-5c891d03330ba815755690-6"> Crayon-line" id=" Crayon-5c891d03330ba815755690-7"> Crayon-r ">Crayon-e ">idCrayon-o">=Crayon-s ">"wechat-image"Crayon-h"> Crayon-e ">styleCrayon-o">=Crayon-s ">"display: none;" Crayon-line Crayon-striped-line" id=" Crayon-5c891d03330ba815755690-8"> Crayon-i "> Crayon-r ">![]() Crayon-e ">srcCrayon-o">=Crayon-s ">"https://cdn.91wordpress.com/wp-content/uploads/2015/07/code.jpg"Crayon-h"> Crayon-e ">altCrayon-o">=Crayon-s ">"wechat"Crayon-line" id=" Crayon-5c891d03330ba815755690-9"> Crayon-r ">3. 加入以下CSS代码美化外观 Crayon-5c891d03330bc701236950" class=" Crayon- Syntax Crayon-theme-classic Crayon-font-monaco Crayon-os-pc print-yes notranslate" data-settings=" minimize scroll-mou SEOver" style=" margin-top: 12px; margin-bottom: 12px; font-size: 12px !important; line-height: 15px !important;"> Crayon-toolbar" data-settings=" mou SEOver overlay hide delay" style="font-size: 12px !important;height: 18px !important; line-height: 18px !important;"> Crayon-title">styles.cssCrayon-tools" style="font-size: 12px !important;height: 18px !important; line-height: 18px !important;"> Crayon-button Crayon-nums-button" title="Toggle Line Numbers"> Crayon-button-icon"> Crayon-button Crayon-plain-button" title="Toggle Plain Code"> Crayon-button-icon"> Crayon-button Crayon-wrap-button" title="Toggle Line Wrap"> Crayon-button-icon"> Crayon-button Crayon-expand-button" title="Expand Code"> Crayon-button-icon"> Crayon-button Crayon-copy-button" title="Copy"> Crayon-button-icon"> Crayon-button Crayon-popup-button" title="Open Code In New Window"> Crayon-button-icon"> Crayon-info" style="min-height: 16.8px !important; line-height: 16.8px !important;"> Crayon-plain-wrap"> Crayon-main" style=""> Crayon-table">Crayon-row">Crayon-nums " data-settings="show">Crayon-nums-content" style="font-size: 12px !important; line-height: 15px !important;"> Crayon-num" data-line=" Crayon-5c891d03330bc701236950-1">1 Crayon-num Crayon-striped-num" data-line=" Crayon-5c891d03330bc701236950-2">2 Crayon-num" data-line=" Crayon-5c891d03330bc701236950-3">3 Crayon-num Crayon-striped-num" data-line=" Crayon-5c891d03330bc701236950-4">4 Crayon-num" data-line=" Crayon-5c891d03330bc701236950-5">5 Crayon-num Crayon-striped-num" data-line=" Crayon-5c891d03330bc701236950-6">6 Crayon-num" data-line=" Crayon-5c891d03330bc701236950-7">7 Crayon-num Crayon-striped-num" data-line=" Crayon-5c891d03330bc701236950-8">8 Crayon-num" data-line=" Crayon-5c891d03330bc701236950-9">9 Crayon-num Crayon-striped-num" data-line=" Crayon-5c891d03330bc701236950-10">10 Crayon-num" data-line=" Crayon-5c891d03330bc701236950-11">11 Crayon-num Crayon-striped-num" data-line=" Crayon-5c891d03330bc701236950-12">12 Crayon-num" data-line=" Crayon-5c891d03330bc701236950-13">13 Crayon-num Crayon-striped-num" data-line=" Crayon-5c891d03330bc701236950-14">14 Crayon-num" data-line=" Crayon-5c891d03330bc701236950-15">15 Crayon-num Crayon-striped-num" data-line=" Crayon-5c891d03330bc701236950-16">16 Crayon-num" data-line=" Crayon-5c891d03330bc701236950-17">17 Crayon-num Crayon-striped-num" data-line=" Crayon-5c891d03330bc701236950-18">18 Crayon-num" data-line=" Crayon-5c891d03330bc701236950-19">19 Crayon-pre" style="font-size: 12px !important; line-height: 15px !important; -moz-tab-size:4; -o-tab-size:4; -webkit-tab-size:4; tab-size:4;"> Crayon-line" id=" Crayon-5c891d03330bc701236950-1"> Crayon-k ">#header #wechatCrayon-sy">{Crayon-line Crayon-striped-line" id=" Crayon-5c891d03330bc701236950-2"> Crayon-h"> Crayon-e ">positionCrayon-sy">:Crayon-h"> Crayon-i ">absoluteCrayon-sy">;Crayon-line" id=" Crayon-5c891d03330bc701236950-3"> Crayon-h"> Crayon-e ">z-indexCrayon-sy">:Crayon-h"> Crayon-i ">111Crayon-sy">;Crayon-line Crayon-striped-line" id=" Crayon-5c891d03330bc701236950-4"> Crayon-h"> Crayon-e ">heightCrayon-sy">:Crayon-h"> Crayon-i ">50pxCrayon-sy">;Crayon-line" id=" Crayon-5c891d03330bc701236950-5"> Crayon-h"> Crayon-e ">widthCrayon-sy">:Crayon-h"> Crayon-i ">50pxCrayon-sy">;Crayon-line Crayon-striped-line" id=" Crayon-5c891d03330bc701236950-6"> Crayon-h"> Crayon-e ">rightCrayon-sy">:Crayon-i ">280pxCrayon-sy">;Crayon-line" id=" Crayon-5c891d03330bc701236950-7"> Crayon-h"> Crayon-e ">topCrayon-sy">:Crayon-i ">5pxCrayon-sy">;Crayon-line Crayon-striped-line" id=" Crayon-5c891d03330bc701236950-8"> Crayon-sy">}Crayon-line" id=" Crayon-5c891d03330bc701236950-9"> Crayon-k ">#header #wechat imgCrayon-sy">{Crayon-line Crayon-striped-line" id=" Crayon-5c891d03330bc701236950-10"> Crayon-h"> Crayon-e ">widthCrayon-sy">:Crayon-h"> Crayon-i ">50pxCrayon-sy">;Crayon-line" id=" Crayon-5c891d03330bc701236950-11"> Crayon-h"> Crayon-e ">heightCrayon-sy">:Crayon-h"> Crayon-i ">50pxCrayon-sy">;Crayon-line Crayon-striped-line" id=" Crayon-5c891d03330bc701236950-12"> Crayon-sy">}Crayon-line" id=" Crayon-5c891d03330bc701236950-13"> Crayon-k ">#header #wechat-imageCrayon-sy">{Crayon-line Crayon-striped-line" id=" Crayon-5c891d03330bc701236950-14"> Crayon-h"> Crayon-e ">displayCrayon-sy">:Crayon-h"> Crayon-i ">noneCrayon-sy">;Crayon-line" id=" Crayon-5c891d03330bc701236950-15"> Crayon-h"> Crayon-e ">positionCrayon-sy">:Crayon-h"> Crayon-i ">absoluteCrayon-sy">;Crayon-line Crayon-striped-line" id=" Crayon-5c891d03330bc701236950-16"> Crayon-h"> Crayon-e ">z-indexCrayon-sy">:Crayon-h"> Crayon-i ">115Crayon-sy">;Crayon-line" id=" Crayon-5c891d03330bc701236950-17"> Crayon-h"> Crayon-e ">topCrayon-sy">:Crayon-i ">60pxCrayon-sy">;Crayon-line Crayon-striped-line" id=" Crayon-5c891d03330bc701236950-18"> Crayon-h"> Crayon-e ">rightCrayon-sy">:Crayon-i ">280pxCrayon-sy">;Crayon-line" id=" Crayon-5c891d03330bc701236950-19"> Crayon-sy">}nofollow">点击此处查看完整效果
| | |
