WordPress网站欢迎语弹框、显示天气及地理位置 – WordPress美化

王小优
王小优
王小优
231
文章
0
评论
2015年9月8日 评论 4,245 1424字阅读4分44秒

WordPress网站欢迎语弹框、显示天气及地理位置 – WordPress美化

代码部署

1、编辑functions.php文件

将以下代码添加到主题目录下的functions.php文件(编辑前请备份):

  1. function show_addr(){
  2.     $ip = $_SERVER["HTTP_X_FORWARDED_FOR"]; //获取当前位置的ip
  3.     $res0 = file_get_contents("http://ip.taobao.com/service/getIpInfo.php?ip=$ip"); //淘宝的一个接口
  4.     $res0 = json_decode($res0,true);//json转换数组
  5.     var_dump($res0);
  6.     $host  =  $res0['data']['region'].$res0['data']['city'];//城市地区拼接
  7.     echo "<div id=\"welcome\">欢迎来自 <span class=\"from-url\">".$host."</span> 的网友!<br><center>今日:<iframe width=\"150\"scrolling=\"no\" height=\"18\" frameborder=\"0\" allowtransparency=\"true\" src=\"https://i.tianqi.com/index.php?c=code&id=1&icon=1&wind=0&num=1\">
  8. </iframe></center><div class=\"closebox\"><a href=\"javascript:void(0)\"onclick=\"$('#welcome'). slideUp('slow');$('.closebox').css('display','none');\" title=\"关闭\">关闭</a></div></div>";  //输出欢迎语及关闭
  9. }

2、编辑style.css文件

将以下代码添加到主题目录下的style.css文件(编辑前请备份):

  1. #welcome {background:#ffffff;border:0px solid #ffffff;color:#000000;font-size:14px;opacity:0.7;filter:alpha(opacity=70);padding:10px 20px;position:fixed;rightright:15px;bottombottom:20px;z-index:99999;border-top-left-radius: 15px;border-bottom-rightright-radius: 15px;border-top-rightright-radius: 15px;border-bottom-left-radius: 15px;}
  2. .from-url{color:#dd8d8d;}
  3. .closebox{float:center;text-align:center;font-size:16px;margin-top:10px;}

3、调用代码

将以下代码添加到主题目录下的header.php文件的</head>上面添加即可(编辑前请备份):

  1. <?php
  2. if(!wp_is_mobile()){?>
  3. <?php show_addr();?>
  4. <?php }?>

效果图

WordPress网站欢迎语弹框、显示天气及地理位置 – WordPress美化

若文章图片、下载链接等信息出错,请在评论区留言反馈,博主将第一时间更新!如果喜欢,请打赏支持本站,谢谢大家!
  • 我的微信
  • 微信扫一扫
  • weinxin
  • 我的微博
  • 微博扫一扫
  • weinxin
王小优
为WordPress最新文章增加NEW最新提示标志 WordPress美化

为WordPress最新文章增加NEW最新提示标志

纯代码给WordPress文章列表中新发布的文章增加NEW新文章提示,让你的博客更加饱满、人性化,一起跟王小优折腾起来。 看到不少网站的新文章后面都会有一个提示最新文章的文字或者图片,感觉比较人性化,...
匿名

发表评论

匿名网友 填写信息

:?: :razz: :sad: :evil: :!: :smile: :oops: :grin: :eek: :shock: :???: :cool: :lol: :mad: :twisted: :roll: :wink: :idea: :arrow: :neutral: :cry: :mrgreen: