去年我们分享过一个左下角通知弹窗的代码，大家想必都挺喜欢的。今年，我们决定给这个小功能来个大升级——加入天气提醒！ 这次，我们将使用高德地图的API，不仅能获取实时天气，还能精准定位到用户的位置。想知道怎么把这个简洁又实用的天气提醒添加到你的页面上吗？开搞！！！
2023的版本
2025版本
使用方法
1.使用前面需要注册 高德地图开放平台
登陆账号 – 控制台 – 应用管理 – 我的应用-创建新应用
应用名称（自定义）
应用类型（效率）
刚刚创建的 名称 （增加）
2.把代码上传到子主题的footer.php位置即可，B2主题大概260行填写即可
javascriot文件
</div>
<style>
.site-footer{
background-color:<?php echo b2_get_option('template_footer','footer_color'); ?>
}
.site-footer-nav{
/*background-color:<?php echo b2_get_option('template_footer','footer_nav_color'); ?>;*/
background: #ffe4e1;
box-shadow: 0px 0px 8px rgba(255, 112, 173, 0.35);
border-radius: 10px;
padding-bottom: 25px;
margin: 0px 5px 0;
}
#bigTriangleColor{
background-color:<?php echo b2_get_option('template_footer','footer_color'); ?>
}
.dmy-footer{
padding: 30px 30px 15px;
}
.dmy-footer-body{
margin-bottom: 15px;
}
</style>
<!-- <svg id="bigTriangleColor" width="100%" height="40" viewBox="0 0 100 102" preserveAspectRatio="none"><path d="M0 0 L50 100 L100 0 Z"></path></svg> -->
<footer id="colophon" class="footer wrapper dmy-footer-body">
<?php do_action('b2_footer_before'); ?>
<?php if(is_active_sidebar( 'sidebar-2' )){ ?>
<div class="site-footer">
<div class="wrapper">
<div class="site-footer-widget-in">
<?php dynamic_sidebar( 'sidebar-2' ); ?>
</div>
</div>
<?php do_action('footer-column-1'); ?>
</div>
<?php } ?>
<div class="site-footer-nav">
<div class="wrapper">
<div class="dmy-footer">
<div class="title" style=" color: #7d97f9;">合作伙伴</div>
<div class="partner-first">
<a href="https://yuesekaer.com/"> <img src="https://dmyblog.cn/wp-content/uploads/2022/11/yuesekaerLOGO-1_1_cover_bukoQ37232.png" alt=""></a>
<a href="https://www.tqlen.com/"> <img src="https://dmyblog.cn/wp-content/uploads/2024/07/2024071414215825.webp" alt=""></a>
<a href="https://jyblog.cn/"> <img src="https://dmyblog.cn/wp-content/uploads/2023/07/2023071711594589.png" alt=""></a>
<a href="https://bilibili.com/"> <img src="https://dmyblog.cn/wp-content/uploads/2023/07/2023071712073875.svg" alt=""></a>
<!-- <a href=""> <img src="https://dmyblog.cn/wp-content/uploads/2023/07/2023071712073875.svg" alt=""></a> -->
</div>
</div>
<!-- 友情链接 -->
<?php
$link_cats = b2_get_option('template_footer','link_cat');
$beian = b2_get_option('template_footer','footer_beian');
$gongan = b2_get_option('template_footer','footer_gongan');
$gongan_code = (int) filter_var($gongan, FILTER_SANITIZE_NUMBER_INT);
$mobile_show_link = b2_get_option('template_footer','footer_mobile_show_links');
$ids = array();
$bookmarks = array();
if($link_cats){
foreach($link_cats as $v){
$links = get_term_by('slug', $v, 'link_category');
if($links){
$ids[] = $links->term_id;
}
}
}
$ids = implode(",", $ids);
if($ids){
$bookmarks = get_bookmarks(array(
'category'=>$ids,
'orderby'=>'link_rating',
'order'=>'DESC'
));
}
?>
<div class="footer-bottom">
<!-- 版权 -->
<div class="copyright dmy-colour-mauve dmy-colour-margins"><?php echo 'Copyright © '.wp_date('Y').'<a href="'.B2_HOME_URI.'" rel="home"> '.B2_BLOG_NAME.'</a>'; ?> All Rights Reserved.</div>
<div class="footer-bottom-left ">
<div class="beian">
<?php if($beian){
echo '<a rel="nofollow" target="__blank" href="https://beian.miit.gov.cn">'.$beian.'</a>';
} ?>
<?php if($gongan){
echo '<a rel="nofollow" style="display:flex;align-items: center;" target="__blank" href="https://www.beian.gov.cn/portal/registerSystemInfo?recordcode='.$gongan_code.'"><img src="'.B2_THEME_URI.'/Assets/fontend/images/beian-ico.png">'.b2_get_option('template_footer','footer_gongan').'</a>';
}?>
<!-- 萌备 -->
<!-- <span class="b2-dot">・</span> -->
<a rel="nofollow" target="__blank" href="https://icp.gov.moe/?keyword=dmyblog.cn">萌ICP备20229033号</a>
<!-- <span class="b2-dot">・</span> -->
<a rel="nofollow" target="__blank" href="https://996.icu">996.icu</a>
<a rel="nofollow" id="dmyallobstacles">世间万般阻碍</a>
</div>
</div>
<div>
</div>
<!-- 运行时间 -->
<div class="dmy-bottomwarning">
<span class="dmy-colour-pink dmy-colour-margins" id="dmy-website-operating-hours"></span>
<span class="dmy-colour-pink dmy-colour-margins">保留资源解释权，如有侵权，请联系我及时处理</span>
<span class="dmy-colour-pink dmy-colour-margins"><?php echo sprintf(__('查询 %s 次，','b2'),get_num_queries());echo sprintf(__('耗时 %s 秒','b2'),timer_stop(0,4));?></span>
</div>
</div>
<?php if((is_home() || is_front_page()) && !empty($link_cats) && !empty($bookmarks)){ ?>
<div class="footer-links dmy-colour-mauve-2 <?php echo (int)$mobile_show_link === 0 ? 'mobile-hidden' : ''; ?>">
<span class="dmy-friendship-link">友情链接：</span>
<?php
echo '<ul class="dmy-linksatthebottom">';
foreach ($bookmarks as $bookmark) {
echo '<li><a target="_blank" href="' . $bookmark->link_url . '">' . $bookmark->link_name . '</a></li>';
}
echo '</ul>';
?>
</div>
<?php } ?>
<div class="footer-image">
<img src="https://dmyblog.cn/wp-content/uploads/2024/10/66ec311f094f7.png" alt="Footer Image">
</div>
</div>
<?php do_action('footer-column-2'); ?>
</div>
</footer>
<?php if(!is_audit_mode()) { ?>
<div id="mobile-footer-menu" class="mobile-footer-menu mobile-show footer-fixed" ref="footerMenu" v-show="show">
<?php
if(apply_filters('b2_is_page', 'links')){
echo '<div class="link-join-button mobile-show"><a href="'.b2_get_custom_page_url('link-register').'" target="_blank">'.__('申请入驻','b2').'</a></div>';
}
?>
<div class="mobile-footer-left">
<?php echo B2\Modules\Templates\Footer::footer_menu_left(); ?>
</div>
<div class="mobile-footer-center">
<button @click="postPoBox.show = true"><span><?php echo b2_get_icon('b2-add-line b2-radius'); ?></span></button>
</div>
<div class="mobile-footer-right">
<?php echo B2\Modules\Templates\Footer::footer_menu_right(); ?>
</div>
</div>
<?php } ?>
<?php
$allow_newsflashes = b2_get_option('newsflashes_main','newsflashes_open');
$allow_document = b2_get_option('document_main','document_open');
$allow_circle = b2_get_option('circle_main','circle_open');
$allow_infomation = b2_get_option('infomation_main','infomation_open');
$allow_ask = b2_get_option('ask_main','ask_open');
$link_open = b2_get_option('links_main','link_open');
$circle_sulg = b2_get_option('normal_custom','custom_circle_link');
$circle_name = b2_get_option('normal_custom','custom_circle_name');
$newsflashes_name = b2_get_option('normal_custom','custom_newsflashes_name');
$infomation_name = b2_get_option('normal_custom','custom_infomation_name');
$ask_name = b2_get_option('normal_custom','custom_ask_name');
$link_name = b2_get_option('normal_custom','custom_links_name');
$infomation_slug = b2_get_option('normal_custom','custom_infomation_link');
$ask_slug = b2_get_option('normal_custom','custom_ask_link');
$link_slug = b2_get_option('normal_custom','custom_links_link');
$open_write = b2_get_option('normal_write','write_allow');
?>
<div id="post-po-box" class="post-po-box">
<div :class="['post-box-content',{'show':show}]" @click="show = false">
<div class="po-post-in b2-radius" v-cloak>
<div class="po-post-icons">
<?php if($open_write){ ?>
<div>
<button @click.stop="go('<?php echo b2_get_custom_page_url('write'); ?>','write')">
<span class="po-post-icon"><?php echo b2_get_icon('b2-quill-pen-line'); ?></span>
<span class="po-post-title"><?php echo __('发布文章','b2'); ?></span>
</button>
</div>
<?php } ?>
<?php if($allow_newsflashes){ ?>
<div>
<button @click.stop="go('<?php echo get_post_type_archive_link('newsflashes'); ?>?action=showbox','newsflashes')">
<span class="po-post-icon"><?php echo b2_get_icon('b2-flashlight-line'); ?></span>
<span class="po-post-title"><?php echo sprintf(__('发布%s','b2'),$newsflashes_name); ?></span>
</button>
</div>
<?php } ?>
<?php if($allow_circle){ ?>
<div>
<button @click.stop="go('<?php echo b2_get_custom_page_url('create-circle'); ?>','create_circle')">
<span class="po-post-icon"><?php echo b2_get_icon('b2-donut-chart-fill'); ?></span>
<span class="po-post-title"><?php echo sprintf(__('创建%s','b2'),$circle_name); ?></span>
</button>
</div>
<div>
<button @click.stop="go('<?php echo B2_HOME_URI.'/'.$circle_sulg; ?>','create_topic')">
<span class="po-post-icon"><?php echo b2_get_icon('b2-chat-smile-3-line'); ?></span>
<span class="po-post-title"><?php echo __('发表话题','b2'); ?></span>
</button>
</div>
<?php } ?>
<?php if($allow_infomation){ ?>
<div>
<button @click.stop="go('<?php echo B2_HOME_URI.'/po-'.$infomation_slug; ?>','infomation')">
<span class="po-post-icon"><?php echo b2_get_icon('b2-document1196064easyiconnet'); ?></span>
<span class="po-post-title"><?php echo sprintf(__('发布%s','b2'),$infomation_name); ?></span>
</button>
</div>
<?php } ?>
<?php if($allow_ask){ ?>
<div>
<button @click.stop="go('<?php echo B2_HOME_URI.'/po-'.$ask_slug; ?>','ask')">
<span class="po-post-icon"><?php echo b2_get_icon('b2-ask'); ?></span>
<span class="po-post-title"><?php echo sprintf(__('发布%s','b2'),$ask_name); ?></span>
</button>
</div>
<?php } ?>
<?php if($link_open){ ?>
<div>
<button @click.stop="go('<?php echo B2_HOME_URI.'/link-register'; ?>','link')">
<span class="po-post-icon"><?php echo b2_get_icon('b2-xitongdaohang'); ?></span>
<span class="po-post-title"><?php echo sprintf(__('发布%s','b2'),$link_name); ?></span>
</button>
</div>
<?php } ?>
<?php if($allow_document){ ?>
<div class="po-verify">
<button @click.stop="go('<?php echo b2_get_custom_page_url('requests'); ?>','request')">
<?php echo b2_get_icon('b2-clipboard-line'); ?><span><?php echo __('提交工单','b2'); ?></span>
</button>
</div>
<?php } ?>
</div>
<div class="po-close-button">
<button @click.stop="show = false"><?php echo b2_get_icon('b2-close-line'); ?></button>
</div>
</div>
</div>
</div>
<form id="wechataction" name="wechataction" action="" method="post">
<input type="submit" value="ok" style="display:none;">
</form>
</div>
<?php wp_footer(); ?>
<!-- <script>
</script> -->
<!--大绵羊右下角提示框-->
<style>
.dmy-card-weather {
width: 373px;
height: 197px;
position: relative;
padding: 25px;
background: radial-gradient(178.94% 106.41% at 26.42% 106.41%, #FFF7B1 0%, rgba(255, 255, 255, 0) 71.88%), #FFFFFF;
box-shadow: 0px 155px 62px rgba(0, 0, 0, 0.01), 0px 87px 52px rgba(0, 0, 0, 0.05), 0px 39px 39px rgba(0, 0, 0, 0.09), 0px 10px 21px rgba(0, 0, 0, 0.1), 0px 0px 0px rgba(0, 0, 0, 0.1);
border-radius: 23px;
transition: all 0.8s cubic-bezier(0.15, 0.83, 0.66, 1);
cursor: pointer;
position: fixed;
bottom: 30px;
right: 15px;
z-index: 10;
}
/* .card:hover {
transform: scale(1.05);
} */
.dmy-card-temp {
position: absolute;
left: 25px;
bottom: 12px;
font-weight: 700;
font-size: 50px;
line-height: 77px;
color: rgba(87, 77, 51, 1);
}
.dmy-card-temp-information {
width: 80px;
height: 36px;
position: absolute;
right: 25px;
bottom: 25px;
display: flex;
align-items: center;
justify-content: center;
background: rgba(0, 0, 0, 0.06);
border-radius: 9px;
}
.dmy-card-temp-information span {
font-weight: 700;
font-size: 13px;
line-height: 134.49%;
color: rgba(87, 77, 51, 0.66);
}
.dmy-card-header {
display: flex;
flex-direction: column;
gap: 10px;
}
.dmy-card-header span {
word-break: break-all;
font-weight: 800;
font-size: 15px;
line-height: 135%;
color: rgba(87, 77, 51, 0.66);
}
.dmy-card-header-son {
word-break: break-all;
font-weight: 800;
font-size: 15px;
line-height: 135%;
color: rgba(87, 77, 51, 0.66);
}
.dmyblog-notify-close {
position: absolute;
top: 15px;
right: 15px;
cursor: pointer;
}
svg.dmyblog-notify-ic-close {
width: 20px;
height: 20px;
}
.dmyblog-notify-close {
cursor: pointer;
}
.dmy-card-temp-animation {
animation: dmy-card-dmyanimation 0.5s linear forwards;
}
@keyframes dmy-card-dmyanimation {
from {
transform: rotate(0deg);
}
to {
transform: rotate(360deg);
}
}
</style>
</head>
<body>
<!-- 天气卡片 -->
<div class="dmy-card-weather">
<div class="dmy-card-header">
<div>
<span class="dmy-card-header-son"> 你好哇来自</span>
<span class="dmy-card-header-son" id="location">获取城市天气中...</span>
<span class="dmy-card-header-son">的小伙伴！</span>
</div>
<span id="date">今天是星期x</span>
<span id="district">县级区域：获取中...</span>
</div>
<span class="dmy-card-temp" id="temperature">获取白天温度</span>
<div class="dmy-card-temp-information">
<span>摄氏度</span>
</div>
<div class="dmyblog-notify-close">
<svg class="dmyblog-notify-ic-close" viewBox="0 0 1024 1024">
<path
d="M573.44 512.128l237.888 237.696a43.328 43.328 0 0 1 0 59.712 43.392 43.392 0 0 1-59.712 0L513.728 571.84 265.856 819.712a44.672 44.672 0 0 1-61.568 0 44.672 44.672 0 0 1 0-61.568L452.16 510.272 214.208 272.448a43.328 43.328 0 0 1 0-59.648 43.392 43.392 0 0 1 59.712 0l237.952 237.76 246.272-246.272a44.672 44.672 0 0 1 61.568 0 44.672 44.672 0 0 1 0 61.568L573.44 512.128z">
</path>
</svg>
</div>
</div>
<script>
async function fetchWeather() {
try {
// 修改php文件路径
const response = await fetch('/wp-content/themes/主题文件名/你的文件.php');
const data = await response.json();
if (data.error) {
throw new Error(data.error);
}
document.getElementById('location').textContent = data.location;
document.getElementById('date').textContent = data.date;
document.getElementById('district').textContent = `县级区域：${data.district}`;
document.getElementById('temperature').textContent = `${data.daytemp}℃`;
} catch (error) {
console.error('Error fetching weather data:', error);
document.getElementById('location').textContent = '获取失败';
document.getElementById('date').textContent = '获取失败';
document.getElementById('district').textContent = '获取失败';
document.getElementById('temperature').textContent = '获取失败';
}
}
const closeButtons = document.getElementsByClassName("dmyblog-notify-close");
Array.from(closeButtons).forEach((button) => {
const svgIcon = button.querySelector('.dmyblog-notify-ic-close');
button.addEventListener("click", function () {
svgIcon.classList.add('dmy-card-temp-animation');
setTimeout(() => {
const card = this.closest(".dmy-card-weather");
card.style.transition = "opacity 0.3s ease";
card.style.opacity = "0";
setTimeout(() => {
card.remove();
}, 300);
}, 500);
});
});
window.onload = fetchWeather;
</script>
</body>
</html>
</body>
</html><strong>javascriot</strong>文件这里一定要修改395的路径 （一定修改一定修改一定修改）重要的事说三遍const response = await fetch(‘/wp-content/themes/主题文件/你的php文件’);。
php文件
<?php
// 高德地图开发者Key
$key = '你的api填写位置'; // 替换为你的高德地图API Key
// 获取用户IP地址
function getUserIP()
{
if (isset($_SERVER['HTTP_CLIENT_IP'])) {
return $_SERVER['HTTP_CLIENT_IP'];
} elseif (isset($_SERVER['HTTP_X_FORWARDED_FOR'])) {
return $_SERVER['HTTP_X_FORWARDED_FOR'];
} else {
return $_SERVER['REMOTE_ADDR'];
}
}
// 获取用户所在城市信息
function getCityInfo($key, $ip)
{
$url = "http://restapi.amap.com/v3/ip?key={$key}&ip={$ip}";
$curl = curl_init();
curl_setopt($curl, CURLOPT_URL, $url);
curl_setopt($curl, CURLOPT_HEADER, 0);
curl_setopt($curl, CURLOPT_RETURNTRANSFER, 1);
curl_setopt($curl, CURLOPT_SSL_VERIFYPEER, false);
curl_setopt($curl, CURLOPT_SSL_VERIFYHOST, false);
$response = curl_exec($curl);
curl_close($curl);
return json_decode($response, true);
}
// 获取天气信息
function getWeather($key, $adcode)
{
$url = "http://restapi.amap.com/v3/weather/weatherInfo?key={$key}&city={$adcode}&extensions=all";
$curl = curl_init();
curl_setopt($curl, CURLOPT_URL, $url);
curl_setopt($curl, CURLOPT_HEADER, 0);
curl_setopt($curl, CURLOPT_RETURNTRANSFER, 1);
curl_setopt($curl, CURLOPT_SSL_VERIFYPEER, false);
curl_setopt($curl, CURLOPT_SSL_VERIFYHOST, false);
$response = curl_exec($curl);
curl_close($curl);
return json_decode($response, true);
}
// 获取用户IP
$userIP = getUserIP();
// 获取城市信息
$cityInfo = getCityInfo($key, $userIP);
if ($cityInfo['status'] == '1' && $cityInfo['info'] == 'OK') {
$adcode = $cityInfo['adcode']; // 获取城市代码
$province = $cityInfo['province'];
$city = $cityInfo['city'];
$district = $cityInfo['district'];
// 获取天气信息
$weatherData = getWeather($key, $adcode);
if ($weatherData['status'] == '1' && $weatherData['info'] == 'OK') {
$weather = $weatherData['forecasts'][0]['casts'][0]; // 当天天气
// 将星期转换为大写
$weekArray = ["日", "一", "二", "三", "四", "五", "六"];
$week = $weekArray[date("w")];
$result = [
"location" => $city,
"date" => date("Y年m月d日") . " 星期" . $week,
"district" => $district,
"province" => $province,
"dayweather" => $weather['dayweather'],
"daytemp" => $weather['daytemp'],
"nightweather" => $weather['nightweather'],
"nighttemp" => $weather['nighttemp'],
"daywind" => $weather['daywind'],
"nightwind" => $weather['nightwind'],
"daypower" => $weather['daypower'],
"nightpower" => $weather['nightpower'],
];
echo json_encode($result);
} else {
echo json_encode(["error" => "Failed to get weather data"]);
}
} else {
echo json_encode(["error" => "Failed to get location data"]);
}
?>这里填写 $key = ‘你的api填写位置’; // 替换为你的高德地图API Key
大功告成
有能力的大佬可以自行开发二次开发（（ 后端代码写的稀烂((