Skip to content
WONGCW 網誌
  • 首頁
  • 論壇
  • 微博
  • 壁紙下載
  • 免費圖床
  • 視頻下載
  • 聊天室
  • SEO工具
  • 支援中心
  • 表格製作
  • More
    • 在線名片
    • 網頁搜索
    • 天氣預報
    • 二維碼生成器
  • Search Icon

WONGCW 網誌

記錄生活經驗與點滴

WordPress 添加个性化的博客宠物

WordPress 添加个性化的博客宠物

2018-12-15 Comments 0 Comment

某日闲逛看到的某个博客上的一个博客宠物,准确来说不是宠物,人家可是萌妹纸啊!看看右侧这个图,就是这个萌妹纸了(后来用谷歌相似图片搜索才发现是死亡笔记的)。让我感到有点跌眼镜的是,那个博客主是个汉纸!看着喜欢,于是右键审查元素扒了代码。

看来下代码,发现代码是博客捣鼓笔记的博主木木的作品,不过这个博客现在已经挂了。给大家献上添加到这个萌妹纸到你的WordPress 主题的方法,但,建议汉纸慎用,下次再分享个适合汉纸的……

WordPress 添加个性化的博客妹纸相关文件
教程中要用到的文件有:一张图片、spig.js文件

下载地址:直链下载 百度网盘 华为网盘

WordPress 添加个性化的博客妹纸篇教程
一、CSS

将下载得到的spig.png放在主题的images文件夹里(应该都有吧?),当然所有代码都可以自定义路径,后面不再累赘。然后在主题的style.css 文件下加入以下代码:

  1. /* pets devework.com */
  2. .spig {display:block;width:150px;height:190px;position:absolute;top: -200px;left: 160px;z-index:9999;}
  3. #message{color :#191919;border: 1px solid #c4c4c4;background:#ddd;-moz-border-radius:5px;-webkit-border-radius:5px;border-radius:5px;min-height:1em;padding:5px;top:-30px;position:absolute;text-align:center;width:auto !important;z-index:10000;-moz-box-shadow:0 0 15px #eeeeee;-webkit-box-shadow:0 0 15px #eeeeee;border-color:#eeeeee;box-shadow:0 0 15px #eeeeee;outline:none;}
  4. .mumu{width:150px;height:190px;cursor: move;background:url(images/spig.gif) no-repeat;}

懂css 代码的话可以修改一下message这个id,使得更加适合你的主题。

二、加载jQuery库

请确定你的主题有没有加载加载jQuery库,如果没有,请按照《为你的WordPress 选择最佳的第三方jQuery 库》与《WordPress中的jQuery库不起作用的相关问题》自行配置。

三、HTML

在主题的footer.php 文件下(一般是前)加入以下代码:加载中……

四、JS

在添加js 文件前,需要对spig.js文件进行修改,打开该文件,用编辑器的”替换”工具将devework.com 为你的网址。

接着,同样是在主题的footer.php 文件下,接着第三步的代码下面,加入以下代码:

上面代码的spig.js 路径是在主题根目录下,你可以自定义路径。

一些效果图集合:

正常的话应该是可以显示宠物的啦,如果不行,先用开发者工具查看哪里出问题了(路径错误?js冲突?);如果再不行,留言请教~

羊毛党之家 WordPress 添加个性化的博客宠物  https://yangmaodang.org

分享此文:

  • 按一下即可分享至 X(在新視窗中開啟) X
  • 按一下以分享至 Facebook(在新視窗中開啟) Facebook
  • 分享到 WhatsApp(在新視窗中開啟) WhatsApp
  • 按一下以分享到 Telegram(在新視窗中開啟) Telegram
  • 分享到 Pinterest(在新視窗中開啟) Pinterest
  • 分享到 Reddit(在新視窗中開啟) Reddit
  • 按一下即可以電子郵件傳送連結給朋友(在新視窗中開啟) 電子郵件
  • 點這裡列印(在新視窗中開啟) 列印

相關


WordPress資訊

Post navigation

PREVIOUS
WordPress 后台载入速度优化:关闭和禁用更新
NEXT
WordPress对百度蜘蛛屏蔽广告避免影响落地页体验

發表迴響取消回覆

這個網站採用 Akismet 服務減少垃圾留言。進一步了解 Akismet 如何處理網站訪客的留言資料。

More results...

Generic filters
Exact matches only
Search in title
Search in content
Search in excerpt
Filter by 分類
網站公告
Featured
赫思醫美
限時免費
Windows 軟件下載
系統軟件
辦公軟件
圖像處理
影音媒體
網絡軟件
應用軟件
Mac 軟件下載
安卓軟件下載
網絡資訊
Mac資訊
Linux資訊
VPS資訊
NASA資訊
WordPress資訊
WeChat資訊
PHP資訊
教學資源
開源程序
網頁工具
SEO工具
醫療健康
其他資訊
Content from
Content to
2018 年 12 月
一 二 三 四 五 六 日
 12
3456789
10111213141516
17181920212223
24252627282930
31  
« 11 月   1 月 »

分類

  • 網站公告
  • 赫思醫美
  • 限時免費
  • Windows 軟件下載
  • 系統軟件
  • 辦公軟件
  • 圖像處理
  • 影音媒體
  • 網絡軟件
  • 應用軟件
  • Mac 軟件下載
  • 安卓軟件下載
  • 網絡資訊
  • Mac資訊
  • Linux資訊
  • VPS資訊
  • NASA資訊
  • WordPress資訊
  • WeChat資訊
  • PHP資訊
  • 教學資源
  • 開源程序
  • 網頁工具
  • SEO工具
  • 醫療健康
  • 其他資訊

彙整

近期文章

  • IGN評歷代超人演員:里夫登頂亨超僅排第五 2025-07-11
  • 足協佈局國足大模型:限價1068萬招標取名為“前進計劃” 2025-07-11
  • RTX 5090原價購買成真NVIDIA發放新一輪優先資格 2025-07-11
  • 服務型遊戲吸走玩家時間分析師稱其威脅大於Game Pass 2025-07-11
  • 科學問答AI哪家強? OpenAI o3奪冠DeepSeek-R1緊跟在後 2025-07-11
  • 曝國行版iPhone 17 Pro新增供應商:京東方供貨 2025-07-11
  • 中科大首次實現小鼠全身「高清全景成像」 單根神經纖維清晰可見 2025-07-11
  • 理想i8上市倒數7月17日預定月底開賣預計35萬起 2025-07-11
  • 本田一代神車思域Type R終極紀念版登場 2025-07-11
  • AI終結傳統軟體產業如同網路終結傳統媒體 2025-07-11

熱門文章與頁面︰

  • 無3C行動電源禁止登機一文看懂到底什麼是3C認證、如何分辨真偽
  • 您可以在Windows 11 24H2 中找回WordPad
  • Photon Matrix:針對蚊子的“防空系統”
  • TIM for Windows v2.3.0.20979 正式版发布
  • 曝鈴木汽車因中國稀土管制全面停產主力車型雨燕
  • 百度地圖新增攤位上傳綠色通道用戶使用地圖可直接導航至地攤前
  • CorelDRAW Graphics Suite 2020 v22.1.0.517
  • 一鍵GHOST v2020.07.20 正式版-硬盤版/光盤版/優盤版/軟盤版
  • 完整驅動程序解決方案Treexy Driver Fusion v8.1.0 + v1.7.0 Premium
  • ABC/CBS/Fox/NBC紛紛向免費電視流媒體應用Locast發起訴訟

投遞稿件

歡迎各界人士投遞稿件到admin@wongcw.com

請提供以下資料:

1.你的名字

2.你的電郵

3.分類目錄

4.文章標題

5.文章摘要

6.文章內容

7.文章來源

 

聯繫我們

查詢,投稿,商務合作:
​admin@wongcw.com
​技術支援:
​support@wongcw.com
​客户服務:
​cs@wongcw.com

QQ群:833641851

赫思醫美

快帆

MALUS

極度掃描

DMCA.com Protection Status

WONGCW 網誌

  • 免責聲明
  • 捐助我們
  • ThemeNcode PDF Viewer
  • ThemeNcode PDF Viewer SC
  • Events

服務器提供

本站使用之服務器由ikoula提供。

聯繫我們

查詢,投稿,商務合作:
​admin@wongcw.com
​技術支援:
​support@wongcw.com
​客户服務:
​cs@wongcw.com

QQ群:833641851

© 2025   All Rights Reserved.