阅读视图
WordPress底部添加页面生成时间和数据库查询次数
前言
今天有个群友要在网站底部添加页面生成时间和数据库查询次数,虽然wpopt插件可以实现这个功能,但是仅能管理员查看
效果图
教程
1.首先在function.php
文件中添加如下代码,有子主题可以添加到子主题中
function display_query_count_with_timer() {
$query_count = get_num_queries();
$query_time = timer_stop(0, 3);
$output = "<p>本次数据库查询" . $query_count . "次,页面生成花费".$query_time."秒</p>";
return $output;
}
add_shortcode('query_timer', 'display_query_count_with_timer');
2.如果想添加在底部可以使用WordPress的小工具中的文本,只需要输入[query_timer]
即可。
WordPress侧边栏添加欢迎语
前言
今天逛博客看到一个好玩的东西,分享给大家
参考
原地址:https://blog.shiguang666.eu.org/2024/10/25/479d38b5fc12/
教程
1.首先去青桔API申请key,目前我们使用到的API是完全免费且无次数限制的。
2.访问api接口:https://api.76.al/api/ip/query?key=your_key
3.将如下代码添加到WordPress小工具中的自定义html内
<div id="announcement-widget">
<div class="card-widget card-ip-info">
<div class="announcement_content">
<div id="welcome-info" style="display: none;">
<div class="loading-spinner"></div>
</div>
</div>
</div>
</div>
<style>
#welcome-info {
display: flex;
justify-content: center;
align-items: center;
height: auto;
}
.loading-spinner {
width: 50px;
height: 50px;
border: 3px solid rgba(0, 0, 0, 0.1);
border-radius: 50%;
border-top: 3px solid #3498db;
animation: spin 1s linear infinite;
}
@keyframes spin {
0% { transform: rotate(0deg); }
100% { transform: rotate(360deg); }
}
</style>
<script>
const createAnnouncementComponent = () => {
const ipInfoElement = document.createElement('div');
ipInfoElement.className = "card-widget card-ip-info";
ipInfoElement.innerHTML = `
<div class="announcement_content">
<div id="welcome-info">
<div class="loading-spinner"></div>
</div>
</div>
`;
return ipInfoElement;
};
const fetchIpInfo = () => {
fetch('https://api.76.al/api/ip/query?key=your_key')
.then(response => response.ok ? response.json() : Promise.reject('Network response was not ok'))
.then(data => showWelcome(data))
.catch(() => showErrorMessage());
};
const getDistance = (e1, n1, e2, n2) => {
const R = 6371; // Earth radius
const toRadians = (degree) => degree * (Math.PI / 180);
const a = Math.sin(toRadians(n1)) * Math.sin(toRadians(n2)) +
Math.cos(toRadians(n1)) * Math.cos(toRadians(n2)) *
Math.cos(toRadians(e1 - e2));
return Math.round(R * Math.acos(a));
};
const showWelcome = (ipLocationData) => {
if (!ipLocationData || !ipLocationData.data) {
return showErrorMessage();
}
// 修改为你自己的经纬度
const myLng = 121.38206; //经度
const myLat = 31.11325; //维度
const { lng, lat, country, prov, city, district } = ipLocationData.data; // 获取区的信息
const dist = getDistance(myLng, myLat, lng, lat);
const pos = country === "中国" ? `${prov} ${city} ${district}` : `${city}, ${district}`; // 包含区的信息
const welcomeInfoElement = document.getElementById("welcome-info");
welcomeInfoElement.style.display = 'block';
welcomeInfoElement.innerHTML = `
💖 欢迎来自 <b><span style="color:#3390ff;">${pos}</span></b> 的朋友<br>
📏 您距博主约 <b><span style="color: #3390ff;">${dist}</span></b> 公里<br>
`;
};
const showErrorMessage = () => {
const welcomeInfoElement = document.getElementById("welcome-info");
welcomeInfoElement.style.display = 'block';
welcomeInfoElement.innerHTML = `<p>获取IP信息失败,请检查网络.</p>`;
};
const initialize = () => {
document.body.appendChild(createAnnouncementComponent());
fetchIpInfo();
};
window.onload = initialize;
</script>
4.将其中的your_key改为你自己申请的key
5.访问api接口,将其中的lat和lng替换代码中的经纬度
// 修改为你自己的经纬度
const myLng = 121.38206; //经度
const myLat = 31.11325; //维度
6.访问主页就可以看到了
新版本 Memos 说说页面部署代码分享
在柚子兄的帮助下,杜老师终于完成了 Memos 的版本升级。Memos 是真的糟糕,动不动 BREAKING CHANGE,前后对 API/S3 做了大量改动,严重影响了日常的使用,强烈建议在不影响使用的情况下升级版本。
特性
显示用户头像;
显示用户昵称与平台用户名;
支持大图显示;
可一键至说说广场进行评论。
代码
1 | <link href="https://npm.onmicrosoft.cn/penndu@13.0.0/memos/css/style.css" rel="stylesheet" type="text/css"> |
注意:如果不是 Volantis 主题需删除{% p center logo large, 点图片可放大! %}
所在行。
使用
请根据需求修改对应的内容:
参数 | 说明 |
---|---|
host | 域名 |
limit | 每页显示条数 |
creatorId | 用户的 ID |
domId | 显示位置 |
username | 广场的用户名 |
name | 昵称 |
使用function和php实现外链跳转
前言
之前外链跳转使用的是果核的插件,现在不想用插件了,于是自己弄了个代码
教程
首先在子主题的function.php中添加如下代码
//外链跳转
function convert_external_links_to_base64($content) {
// 使用正则表达式找到所有外部链接
$pattern = '/<as+href=["'](http[s]?://[^"']+)["']/i';
$content = preg_replace_callback($pattern, function($matches) {
$url = $matches[1];
// 对 URL 进行 Base64 编码
$base64_url = base64_encode($url);
// 返回新的链接,指向中间页
return str_replace($url, site_url('/redirect.php?url=' . $base64_url), $matches[0]);
}, $content);
return $content;
}
// 将函数应用于文章和页面内容
add_filter('the_content', 'convert_external_links_to_base64');
再在网站根目录新建一个php文件命名为redirect.php
,并且添加如下代码
<?php
if (isset($_GET['url'])) {
$link = base64_decode($_GET['url']);
}
?>
<!doctype html>
<html lang="zh">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<link rel="stylesheet" type="text/css" href="static/css/style.css">
<link rel="icon" href="https://www.xrbk.cn/favicon.png" type="image/x-icon"/><!--favicon图片地址-->
<title>新锐博客 - 安全中心</title><!--修改文字-->
</head>
<body>
<div class="go-wild-box">
<div class="go-wild-container">
<a href="https://www.xrbk.cn/">
<img alt="新锐博客" src="/wp-content/uploads/f4a9f982d722de858fd133baf4ff14b7.webp" class="logo-img" /><!--修改Logo地址-->
</a>
<div class="tips-title">您即将离开新锐博客,跳转到第三方链接</div><!--修改文字-->
<div class="address"><?php echo htmlspecialchars($link); ?></div>
<div class="tips-subtitle">请注意您的账号和财产安全</div>
<div class="btn-groups">
<button onclick="try { window.close(); } catch(e) { alert('请手动关闭此页面'); }" type="button" class="ant-btn ant-btn-default">取消访问</button>
<a href="<?php echo htmlspecialchars($link); ?>" rel="nofollow">
<button type="button" class="ant-btn ant-btn-primary">继续访问</button>
</a>
</div>
</div>
</div>
</body>
</html>
<style>
body {
margin: 0; font-family: 'PingFangSC', sans-serif; background-color: #EFF4FA; }
.go-wild-box { display: flex; justify-content: center; align-items: center; height: 100vh; }
.go-wild-container { width: 770px; height: 330px; max-width: 90%; padding: 90px 15px; background-color: #fff; border-radius: 12px; box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1); text-align: center; }
.logo-img { width: 120px; height: auto; }
.tips-title { margin: 20px 0; font-size: 22px; color: #2a3c59; font-weight: 500; }
.address { margin-bottom: 20px; padding: 15px; background-color: #EFF4FA; border-radius: 8px; color: #2a3c59; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; width: 80%; max-width: 600px; margin: 0 auto; }
.tips-subtitle { font-size: 14px; color: #2a3c59; margin-bottom: 30px;margin-top: 20px; }
.btn-groups { display: flex; justify-content: center; gap: 10px; margin-top: 60px; }
.ant-btn { width: 152px; height: 44px; line-height: 44px; border-radius: 20px; border: none; cursor: pointer; font-size: 14px; transition: all 0.3s ease; }
.ant-btn-primary { background: linear-gradient(152deg, #07C160 0%, #07c183 100%); color: #fff; }
.ant-btn-default { background-color: #fff; color: #2a3c59; border: 1px solid #ccc; }
.ant-btn-default:hover { background-color: #fff; border-color: #07C160; color: #07C160; }
</style>
结语
这样访问文章和页面中的外部链接就可以跳转到中间页了
记一次数据库查询操作
前言
前两天有群友找到我想让我给他把一个美化插件改一下,插件本来只显示注册用户,浏览量,运行天数等信息。
他想给插件添加一个vip用户数量的信息,所以让我看看能不能搞。
过程
首先我想到的是用数据库来查询,但是需要一个关键词。
我在WordPress后台查看的时候发现虽然会员被区分为黄金会员和钻石会员,但是它们共同的点是都是永久的。
于是我打算从永久这一点来入手,而子比赋予永久会员的值为Permanent
,我就去数据库查找这个词。
在wp_usermeta
这个数据表中有一个vip_exp_date
的参数的值就是Permanent
。
我就用AI帮我写了一个php代码,查询到Permanent
的数量一共为73个,而WordPress后台显示的黄金会员和钻石会员的总数为70个。
经过查询发现有三个普通会员也被赋予了永久会员这一身份,所以得出结论,无论是普通会员还是黄金会员亦或者钻石会员都可以被赋予永久会员这一身份。
看来只能找其他的值来区别这一点了,最后让我发现vip_level
这一参数的值要么没有要么就是1或2,于是我就认为1代表黄金会员2则代表钻石会员。
想做就做,我就用AI帮我写了一段PHP代码,贴在下面了。
<?php
global $wpdb;
// 查询用户数量
$vipusers = $wpdb->get_var(
$wpdb->prepare(
"SELECT COUNT(*) FROM {$wpdb->usermeta} WHERE meta_key = %s AND meta_value IN (%d, %d)",
'vip_level', 1, 2
)
);
可以看到是在wp_usermeta
这个表中查询了关于vip_level
为1或2的数量,最后显示的结果是70。
结语
搭建网站的时候不可避免的需要用到数据库,所以我们得学习好怎么操作数据库才行。
WordPress侧边栏添加信息统计
前言
刚刚写了一篇统计文章字数的文章,现在就教大家如何在侧边栏添加信息统计
教程
在子主题的function.php中添加如下代码
function display_site_stats() {
// 获取统计数据
$total_posts = wp_count_posts()->publish;
$site_uptime = get_site_uptime();
$last_update = get_last_update_time();
$total_word_count = get_total_word_count();
// 输出HTML
$stats = [
'文章数目' => ['value' => $total_posts, 'class' => 'purple'],
'存活天数' => ['value' => $site_uptime, 'class' => 'violet'],
'上次更新' => ['value' => $last_update, 'class' => 'red'],
'文章字数' => ['value' => $total_word_count . ' 万', 'class' => 'red']
];
$output = '<div style="background: #fff; padding: 10px; border-radius: 5px; box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);">';
foreach ($stats as $text => $data) {
$output .= sprintf(
'<div style="display: flex; align-items: center; margin-bottom: 10px;">
<span style="flex: 1;">%s</span>
<span style="background: %s; color: #fff; padding: 2px 8px; border-radius: 12px; font-size: 0.9em;">%s</span>
</div>',
esc_html($text),
esc_attr(get_badge_color($data['class'])),
esc_html($data['value'])
);
}
$output .= '</div>';
return $output; // 返回输出的HTML
}
function get_badge_color($class) {
switch ($class) {
case 'purple':
return '#9c27b0';
case 'violet':
return '#7e57c2';
case 'red':
return '#e53935';
default:
return '#e0e0e0';
}
}
function get_site_uptime() {
$start_date = new DateTime('2023-04-05'); // 替换为你的网站创建日期
$interval = $start_date->diff(new DateTime());
return $interval->days . '天'; // 直接返回存活的天数
}
function get_last_update_time() {
$last_post = wp_get_recent_posts(['numberposts' => 1])[0];
$time_difference = time() - strtotime($last_post['post_date']);
if ($time_difference < 60) return '刚刚';
if ($time_difference < 3600) return floor($time_difference / 60) . '分钟前';
if ($time_difference < 86400) return floor($time_difference / 3600) . '小时前';
return floor($time_difference / 86400) . '天前';
}
function get_total_word_count() {
$posts = get_posts(['numberposts' => -1]);
$total_word_count = array_sum(array_map(function($post) {
return str_word_count(strip_tags($post->post_content));
}, $posts));
return round($total_word_count / 10000, 2); // 返回万字数
}
// 注册短代码
add_shortcode('xrbk-cbls', 'display_site_stats');
然后在WordPress小工具中添加文本,里面输入[xrbk-cbls]
截图
WordPress添加所有文章内容字数统计
前言
突发奇想,想要知道自己更新了多少字数的内容,于是就有了下面的教程。
教程
如果有子主题,请将如下代码添加到子主题的function.php中
//获取所有文章字数
function count_all_posts_word_count() {
// 获取所有文章
$args = array(
'post_type' => 'post',
'posts_per_page' => -1, // 获取所有文章
);
$query = new WP_Query($args);
$total_word_count = 0;
// 循环遍历每篇文章
if ($query->have_posts()) {
while ($query->have_posts()) {
$query->the_post();
// 获取文章内容
$content = get_the_content();
// 计算字数
$word_count = str_word_count(strip_tags($content));
$total_word_count += $word_count;
}
// 重置查询
wp_reset_postdata();
}
return $total_word_count;
}
// 将字数转换为以千为单位的格式
function format_word_count($count) {
if ($count >= 1000) {
return round($count / 1000, 1) . 'k'; // 保留一位小数
}
return $count; // 小于1000的直接返回
}
// 使用短代码显示字数
function display_total_word_count() {
$total_words = count_all_posts_word_count();
$formatted_words = format_word_count($total_words);
return "所有文章的总字数: " . $formatted_words;
}
add_shortcode('total_word_counts', 'display_total_word_count');
?>
然后去想要显示的地方添加[total_word_counts]
结语
如果想要添加到侧边栏的话可以使用文本小工具。
利用飞书每天定时推送网站当天以及本月访问量
前言
飞书真是个好东西,可以利用它给我们推送各种各样的消息。
今天教大家如何推送网站当天以及本月的访问量。
教程
1.首先网站统计需要用umami搭建,不懂的自己网站搜索umami,有教程
2.网站目录下新建一个php文件,并将如下代码添加到其中
<?php
// 设置飞书 Webhook URL
$feishuWebhookUrl = '飞书地址'; // 替换为你的飞书 Webhook URL
// 获取访问数据的函数
function getVisitData($umiToken, $umiId) {
$umiTime = time() * 1000; // 当前时间(毫秒)
$todayStart = strtotime('today') * 1000; // 今日开始时间(毫秒)
$monthStart = strtotime('first day of this month') * 1000; // 本月开始时间(毫秒)
// 获取今日访问量和访问人数
$todayUrl = "https://你的域名/api/websites/{$umiId}/stats?startAt={$todayStart}&endAt={$umiTime}";
$todayData = file_get_contents($todayUrl, false, stream_context_create([
'http' => [
'header' => "Authorization: Bearer {$umiToken}rn" .
"Content-Type: application/jsonrn"
]
]));
$todayData = json_decode($todayData, true);
// 获取本月访问量
$monthUrl = "https://你的域名/api/websites/{$umiId}/stats?startAt={$monthStart}&endAt={$umiTime}";
$monthData = file_get_contents($monthUrl, false, stream_context_create([
'http' => [
'header' => "Authorization: Bearer {$umiToken}rn" .
"Content-Type: application/jsonrn"
]
]));
$monthData = json_decode($monthData, true);
// 返回数据
return [
'todayUv' => $todayData['visitors']['value'] ?? 0,
'todayPv' => $todayData['pageviews']['value'] ?? 0,
'monthPv' => $monthData['pageviews']['value'] ?? 0
];
}
// 设置 UMI Token 和 ID
$umiToken = "你的token"; // 获取到的 token
$umiId = "你的websiteid"; // 获取到的 websiteId
// 获取访问数据
$visitData = getVisitData($umiToken, $umiId);
// 获取当前时间
$currentDateTime = date('Y年m月d日 H:i:s');
// 构建消息内容
$messageContent = sprintf(
"现在是 %s,今天的访问人数为 %d,今天的访问量为 %d,本月的访问量为 %d。",
$currentDateTime,
$visitData['todayUv'],
$visitData['todayPv'],
$visitData['monthPv']
);
// 构建请求参数
$requestData = [
"msg_type" => "text",
"content" => [
"text" => $messageContent
]
];
// 将请求参数转换为 JSON 格式
$jsonData = json_encode($requestData);
// 初始化 cURL
$ch = curl_init($feishuWebhookUrl);
curl_setopt($ch, CURLOPT_CUSTOMREQUEST, "POST");
curl_setopt($ch, CURLOPT_POSTFIELDS, $jsonData);
curl_setopt($ch, CURLOPT_RETURNTRANSFER, true);
curl_setopt($ch, CURLOPT_HTTPHEADER, [
'Content-Type: application/json',
'Content-Length: ' . strlen($jsonData)
]);
// 执行请求
$response = curl_exec($ch);
curl_close($ch);
// 输出响应
echo $response;
?>
3.访问飞书官网
4.新建一个机器人,添加流程
5.选择触发器为webhook触发
6.参数填写:{"msg_type":"text","content":{"text":"request example"}}
7.选择操作为发送飞书消息
8.消息内容点击加号,然后选择webhook触发里的content.text
9.宝塔面板计划执行添加定时访问url。
截图
利用飞书和php代码推送最新地震
前言
最近安徽合肥几十次小地震,搞得人心惶惶,在地震带的朋友可能都无法第一时间获得消息,于是写了个php来推送消息
教程
此次教程分为两个接口如下
因无法测试,所以不知道是不是实时的,所以不要依赖于此,使用手机自带的地震预警
中国地震网:https://www.ceic.ac.cn/ajax/speedsearch?num=1
不知名地震API:https://api.wolfx.jp/cenc_eqlist.json
在网站目录下新建一个php文件,并且添加如下代码
其中https://www.feishu.cn/flow/api/trigger-webhook/xxxx
改为自己的飞书webhook
<?php
// 提取数据并发送飞书消息的函数
function extractDataAndSendFeishuMessage($jsonUrl, $feishuWebhookUrl) {
// 初始化cURL会话
$ch = curl_init($jsonUrl);
// 设置cURL选项
curl_setopt($ch, CURLOPT_RETURNTRANSFER, true);
curl_setopt($ch, CURLOPT_SSL_VERIFYPEER, false); // 忽略SSL证书验证
curl_setopt($ch, CURLOPT_FOLLOWLOCATION, true);
curl_setopt($ch, CURLOPT_CONNECTTIMEOUT, 2); // 设置连接超时时间
curl_setopt($ch, CURLOPT_TIMEOUT, 2); // 设置执行超时时间
// 执行cURL请求
$jsonData = curl_exec($ch);
// 关闭cURL会话
curl_close($ch);
// 解析JSON数据
$substr_start = "(";
$substr_end = ")";
$start_pos = strpos($jsonData, $substr_start);
$end_pos = strpos($jsonData, $substr_end);
if ($start_pos !== false && $end_pos !== false) {
$start_pos = $start_pos + mb_strlen($substr_start);
$end_pos = $end_pos;
$middle_text = mb_substr($jsonData, $start_pos, $end_pos - $start_pos);
$jsonData1 = $middle_text;
} else {
return "无法获取内容"; // 如果没有获取到内容,直接返回
}
$data = json_decode($jsonData1, true);
// 获取No1
if (isset($data['shuju'][0])) {
$no1 = $data['shuju'][0];
// 提取各项数据
$eventTime = $no1['O_TIME'];
$location = $no1['LOCATION_C'];
$magnitude = $no1['M_MS'];
// 将 $eventTime 转换为时间戳
$eventTimestamp = strtotime($eventTime);
// 获取当前时间戳
$currentTimestamp = time();
// 判断事件时间与当前时间的差异(是否在一天内)
if (($currentTimestamp - $eventTimestamp) <= 86400 && ($currentTimestamp - $eventTimestamp) >= 0) { // 86400秒 = 1天
// 发送信息到飞书
$data = json_encode(array(
'msg_type' => 'text',
'content' => array(
'text' => "$eventTime 在 $location 发生了 $magnitude 震级地震 。"
)
));
$ch = curl_init($feishuWebhookUrl);
curl_setopt($ch, CURLOPT_CONNECTTIMEOUT, 1); // 设置连接超时时间为1秒
curl_setopt($ch, CURLOPT_SSL_VERIFYPEER, false);
curl_setopt($ch, CURLOPT_TIMEOUT, 1); // 设置执行超时时间为1秒
curl_setopt($ch, CURLOPT_CUSTOMREQUEST, "POST");
curl_setopt($ch, CURLOPT_POSTFIELDS, $data);
curl_setopt($ch, CURLOPT_HTTPHEADER, array(
'Content-Type: application/json'
));
curl_setopt($ch, CURLOPT_RETURNTRANSFER, true);
$result = curl_exec($ch);
// 关闭cURL会话
curl_close($ch);
echo $result;
} else {
echo "短期内无事发生";
}
} else {
echo "jsonData:".$jsonData;
}
}
// JSON数据URL和飞书Webhook地址
$jsonUrl = 'https://www.ceic.ac.cn/ajax/speedsearch?num=1';
$feishuWebhookUrl = 'https://www.feishu.cn/flow/api/trigger-webhook/xxxx';
// 调用函数提取数据并发送飞书消息
extractDataAndSendFeishuMessage($jsonUrl, $feishuWebhookUrl);
?>
这个接口是中国地震网的,实测访问过多会被拉黑(测试时我是按秒执行的),但是第二个接口是托管于cloudflare的,我的服务器不能很好的访问。
如果你的服务器可以访问第二个接口就使用第二个接口,它的限制是每秒不能超过两次访问,足够使用了。
<?php
// 提取数据并发送飞书消息的函数
function extractDataAndSendFeishuMessage($jsonUrl, $feishuWebhookUrl) {
// 初始化cURL会话
$ch = curl_init($jsonUrl);
// 设置cURL选项
curl_setopt($ch, CURLOPT_RETURNTRANSFER, true);
curl_setopt($ch, CURLOPT_SSL_VERIFYPEER, false); // 忽略SSL证书验证
curl_setopt($ch, CURLOPT_FOLLOWLOCATION, true);
curl_setopt($ch, CURLOPT_CONNECTTIMEOUT, 2); // 设置连接超时时间
curl_setopt($ch, CURLOPT_TIMEOUT, 2); // 设置执行超时时间
// 执行cURL请求
$jsonData = curl_exec($ch);
// 关闭cURL会话
curl_close($ch);
$data = json_decode($jsonData, true);
// 获取No1
if (isset($data['No1'])) {
$no1 = $data['No1'];
// 提取各项数据
$eventTime = $no1['time'];
$location = $no1['location'];
$magnitude = $no1['magnitude'];
// 将 $eventTime 转换为时间戳
$eventTimestamp = strtotime($eventTime);
// 获取当前时间戳
$currentTimestamp = time();
// 判断事件时间与当前时间的差异(是否在一天内)
if (($currentTimestamp - $eventTimestamp) <= 86400 && ($currentTimestamp - $eventTimestamp) >= 0) { // 86400秒 = 1天
// 发送信息到飞书
$data = json_encode(array(
'msg_type' => 'text',
'content' => array(
'text' => "$eventTime 在 $location 发生了 $magnitude 震级地震 。"
)
));
$ch = curl_init($feishuWebhookUrl);
curl_setopt($ch, CURLOPT_CONNECTTIMEOUT, 1); // 设置连接超时时间为1秒
curl_setopt($ch, CURLOPT_SSL_VERIFYPEER, false);
curl_setopt($ch, CURLOPT_TIMEOUT, 1); // 设置执行超时时间为1秒
curl_setopt($ch, CURLOPT_CUSTOMREQUEST, "POST");
curl_setopt($ch, CURLOPT_POSTFIELDS, $data);
curl_setopt($ch, CURLOPT_HTTPHEADER, array(
'Content-Type: application/json'
));
curl_setopt($ch, CURLOPT_RETURNTRANSFER, true);
$result = curl_exec($ch);
// 关闭cURL会话
curl_close($ch);
echo $result;
} else {
echo "短期内无事发生";
}
} else {
echo "jsonData:".$jsonData;
}
}
// JSON数据URL和飞书Webhook地址
$jsonUrl = 'https://api.wolfx.jp/cenc_eqlist.json';
$feishuWebhookUrl = 'https://www.feishu.cn/flow/api/trigger-webhook/xxxx';
// 调用函数提取数据并发送飞书消息
extractDataAndSendFeishuMessage($jsonUrl, $feishuWebhookUrl);
?>
飞书教程
1.访问飞书官网
2.找到创建的机器人
3.点击左边的流程设计
4.创建流程
5.选择触发器为触发webhook
6.参数填写{"msg_type":"text","content":{"text":"request example"}}
并点击完成
7.选择操作为发送飞书消息
8.发送对象看你情况选择,我选择的是群
9.消息标题为地震预警
10.消息内容点击加号然后找到webhook触发选择content.text
11.点击完成就算部署完成了。
结语
天灾无法预料,希望各位保护好自己和家人,平安度过。
一小段代码让你的网站变灰
前言
在特殊的日子里,我们可以使用一小段代码使整个页面变灰
教程
WordPress在主题的css文件中添加如下代码即可
body {
filter: grayscale(100%);
}
其他html源码在里面添加
<style>
body {
filter: grayscale(100%);
}
</style>
ThinkPHP项目提示未定义变量的解决方法
前言
在我们部署ThinkPHP项目的时候会遇到提示未定义变量:xxxxx。
教程
1.使用宝塔的搜索功能搜索这个变量,这次提示的事cdnpublic,搜索这个变量名称就行
2.找到以后根据它的内容更改一下地址就行。(一定要根据它的内容更改,而不是瞎改)
3.重新运行安装程序即可。
结语
此方法对于新手来说不是很友好,但是也未尝不是一种方法。
网站使用umami api制作数据挂件
前言
因为51统计最近一直出现问题,并且有传言称51统计的js文件会出现劫持跳转的问题,于是就想更换统计方式,Umami因此成为我的主要选择。
51统计好的地方在于能够显示出统计挂件,但是有大佬用umami的api也制作出了数据挂件。
参考
张洪HEO:https://blog.zhheo.com/p/61e9.html
木木木木木:https://immmmm.com/hi-umami-api/
教程
1.首先搭建属于自己的umami,具体可以访问
2.token可以到搭建好的umami站点,然后打开开发者工具,找到网络中的https://你的域名/api/auth/verify
里的请求头中的authorization
中Bearer
后面的内容
3.网站ID就是后台网站中的比如https://你的域名/websites/0ba3d4b8-95ec-4e33-a727-32b013d6cfa7
,其中0ba3d4b8-95ec-4e33-a727-32b013d6cfa7
就是网站ID
3.更改如下代码,并且添加到WordPress的自定义html中
<div class="tongji">
今日访问人数 <span id="todayUv">0</span> | 今日访问量 <span id="todayPv">0</span> | 本月访问量 <span id="monthPv">0</span> | 总访问量 <span id="totalPv">0</span>
</div>
<script>
document.addEventListener('DOMContentLoaded', () => {
umiTongji();
});
function umiTongji() {
var umiToken = "你的token"; //获取到的 token
var umiId = "网站ID"; //获取到的 websiteId
var umiTime = Date.parse(new Date());
var todayStart = new Date().setHours(0, 0, 0, 0);
var monthStart = new Date(new Date().getFullYear(), new Date().getMonth(), 1).getTime();
var umiUrl = "https://你的域名/api/websites/" + umiId + "/stats?startAt=" + todayStart + "&endAt=" + umiTime;
fetch(umiUrl, {
method: 'GET',
mode: 'cors',
cache: 'default',
headers: {
'Authorization': 'Bearer ' + umiToken,
'Content-Type': 'application/json'
}
})
.then(res => res.json())
.then(resdata => {
document.querySelector('#todayPv').innerHTML = resdata.pageviews.value;
document.querySelector('#todayUv').innerHTML = resdata.visitors.value;
});
umiUrl = "https://你的域名/api/websites/" + umiId + "/stats?startAt=" + monthStart + "&endAt=" + umiTime;
fetch(umiUrl, {
method: 'GET',
mode: 'cors',
cache: 'default',
headers: {
'Authorization': 'Bearer ' + umiToken,
'Content-Type': 'application/json'
}
})
.then(res => res.json())
.then(resdata => {
document.querySelector('#monthPv').innerHTML = resdata.pageviews.value;
});
umiUrl = "https://你的域名/api/websites/" + umiId + "/stats?startAt=0&endAt=" + umiTime;
fetch(umiUrl, {
method: 'GET',
mode: 'cors',
cache: 'default',
headers: {
'Authorization': 'Bearer ' + umiToken,
'Content-Type': 'application/json'
}
})
.then(res => res.json())
.then(resdata => {
document.querySelector('#totalPv').innerHTML = resdata.pageviews.value;
});
}
</script>
<style>
#todayUv, #todayPv, #monthPv, #totalPv {
color: #00a0ff;
}
</style>
WordPress文章页侧边栏添加文章目录
前言
不少主题都支持文章页的侧边栏添加文章目录的小工具
教程
将如下代码放到子主题的function.php中
class Article_TOC_Widget extends WP_Widget {
public function __construct() {
parent::__construct(
'article_toc_widget',
'文章目录小工具',
array( 'description' => '在文章或页面的侧边栏中显示文章目录' )
);
}
public function widget( $args, $instance ) {
global $post;
if ( is_singular() && ! empty( $post->post_content ) ) {
$toc = $this->get_toc( $post->post_content );
if ( ! empty( $toc ) ) {
echo $args['before_widget'];
echo $args['before_title'] . '文章目录' . $args['after_title'];
echo '<ul>' . $toc . '</ul>';
echo $args['after_widget'];
}
}
}
public function get_toc( $content ) {
$toc = '';
$dom = new DOMDocument();
@$dom->loadHTML( mb_convert_encoding( $content, 'HTML-ENTITIES', 'UTF-8' ) );
$xpath = new DOMXPath( $dom );
$headers = $xpath->query( '//h2|//h3|//h4|//h5|//h6' );
if ( $headers->length > 0 ) {
foreach ( $headers as $header ) {
$id = $header->getAttribute( 'id' );
if ( empty( $id ) ) {
$id = sanitize_title( $header->nodeValue );
$header->setAttribute( 'id', $id );
}
$toc .= '<li><a href="#' . $id . '">' . $header->nodeValue . '</a></li>';
}
}
return $toc;
}
}
function register_article_toc_widget() {
register_widget( 'Article_TOC_Widget' );
}
add_action( 'widgets_init', 'register_article_toc_widget' );
结语
功能不是很完善,但是可以显示了,需要其他功能自己添加
WordPress添加彩色文本渐变框
前言
CoreNext主题自带的编辑器增强内有标星面板,但是颜色有点少,所以找了个教程给WordPress添加彩色文本渐变框。
教程
1.首先将如下代码添加到CoreNext子主题的function.php
中,如果其他主题也有子主题一样操作。
add_action('after_wp_tiny_mce', 'bolo_after_wp_tiny_mce');
function bolo_after_wp_tiny_mce($mce_settings) {
?>
<script type="text/javascript">
QTags.addButton( 'z_mhz', '迷幻紫', '<div id="zm_mhz">迷幻紫</div>n', "" );
QTags.addButton( 'z_xgh', '西瓜红', '<div id="zm_xgh">西瓜红</div>n', "" );
QTags.addButton( 'z_tkzj', '天空之境', '<div id="zm_tkzj">天空之境</div>n', "" );
QTags.addButton( 'z_xyz', '小宇宙', '<div id="zm_xyz">小宇宙</div>n', "" );
QTags.addButton( 'z_gll', '橄榄绿', '<div id="zm_gll">橄榄绿</div>n', "" );
QTags.addButton( 'z_xty', '小太阳', '<div id="zm_xty">小太阳</div>n', "" );
QTags.addButton( 'z_yyz', '优雅紫', '<div id="zm_yyz">优雅紫</div>n', "" );
QTags.addButton( 'z_szh', '深邃黑', '<div id="zm_szh">深邃黑</div>n', "" );
QTags.addButton( 'z_wbk', '无边框', '<div id="zm_wbk">无边框</div>n', "" );
function bolo_QTnextpage_arg1() {
}
</script>
<?php
}
2.将如下CSS代码添加到CoreNext子主题的CSS文件夹中的main.css中
/*渐变框区块*/
#zm_mhz,#zm_xgh,#zm_tkzj,#zm_xyz,#zm_gll ,#zm_xty,#zm_yyz,#zm_szh,#zm_wbk{
/*圆角值,在此定义*/
border-radius: 8px;
}
/*迷幻紫*/
#zm_mhz{
color: #555555;
overflow: hidden;
margin: 10px 0;
padding: 15px 15px 15px 35px;
/*border-radius: 10px;*/
box-shadow: 6px 0 12px -5px rgb(190, 196, 252), -6px 0 12px -5px rgb(189, 196, 252);
background-color: #8EC5FC;
background-image: linear-gradient(62deg,#8EC5FC 0%,#E0C3FC 100%);
background-image: -webkit-linear-gradient(62deg,#8EC5FC 0%,#E0C3FC 100%);
}
/*西瓜红*/
#zm_xgh{
color: #555555;
overflow: hidden;
margin: 10px 0;
padding: 15px 15px 15px 35px;
/*border-radius: 10px;*/
box-shadow: 6px 0 12px -5px rgb(255, 176, 172), -6px 0 12px -5px rgb(255, 161, 174);
background-color: #ff9a8b66;
background-image: linear-gradient(220deg,#FF9A8B 0%,#ff6a8838 55%,#FF99AC 100%);
background-image: -webkit-linear-gradient(220deg,#ff9a8b7a 0%,#ff6a88ab 55%,#ff99ac82 100%);
}
/*华为P30 天空之境*/
#zm_tkzj {
color: #555555;
overflow: hidden;
margin: 10px 0;
padding: 15px 15px 15px 35px;
/*border-radius: 10px;*/
box-shadow: 6px 0 12px -5px rgb(253, 223, 234), -6px 0 12px -5px rgb(215, 240, 243);
background-color: #FFDEE9;
background-image: linear-gradient(0deg,#ffdee9c4 0%,#b5fffc8f 100%);
background-image: -webkit-linear-gradient(0deg,#ffdee9c4 0%,#b5fffc8f 100%);
}
/*小宇宙*/
#zm_xyz {
color: #eeeeee;
overflow: hidden;
margin: 10px 0;
padding: 15px 15px 15px 35px;
/*border-radius: 10px;*/
box-shadow: 6px 0 12px -5px rgb(12, 85, 141), -6px 0 12px -5px rgba(10, 58, 93, 0);
background-image: radial-gradient( circle 263px at 100.2% 3%, rgba(12,85,141,1) 31.1%, rgba(205,181,93,1) 36.4%, rgba(244,102,90,1) 50.9%, rgba(199,206,187,1) 60.7%, rgba(249,140,69,1) 72.5%, rgba(12,73,116,1) 72.6% );
}
/*橄榄绿*/
#zm_gll {
color: #eeeeee;
overflow: hidden;
margin: 10px 0;
padding: 15px 15px 15px 35px;
/*border-radius: 10px;*/
box-shadow: 6px 0 12px -5px rgb(68, 110, 92), -6px 0 12px -5px rgb(204, 212, 163);
background-image: linear-gradient( 102deg, rgba(68,110,92,1) 17.4%, rgba(107,156,120,1) 49.3%, rgba(154,183,130,1) 83.4%, rgba(247,237,191,1) 110.3% );
}
/*小太阳*/
#zm_xty {
color: #ffffff;
overflow: hidden;
margin: 10px 0;
padding: 15px 15px 15px 35px;
/*border-radius: 10px; */
box-shadow: 6px 0 12px -5px rgb(253, 223, 234), -6px 0 12px -5px rgb(215, 240, 243);
background-image: radial-gradient( circle farthest-corner at -8.9% 51.2%, rgba(255,124,0,1) 0%, rgba(255,124,0,1) 15.9%, rgba(255,163,77,1) 15.9%, rgba(255,163,77,1) 24.4%, rgba(19,30,37,1) 24.5%, rgba(19,30,37,1) 66% );
}
/*优雅紫*/
#zm_yyz {
color: #ffffff;
overflow: hidden;
margin: 10px 0;
padding: 15px 15px 15px 35px;
/*border-radius: 10px;*/
box-shadow: 6px 0 12px -5px rgb(175, 160, 208), -6px 0 12px -5px rgba(177, 161, 207, 0);
background-image: radial-gradient( circle farthest-corner at 10% 20%, rgba(95,117,227,1) 0%, rgba(188,167,205,1) 90% );
}
/*深邃黑*/
#zm_szh {
color: #c7c7c7;
overflow: hidden;
margin: 10px 0;
padding: 15px 15px 15px 35px;
/*border-radius: 5px;*/
box-shadow: 6px 0 12px -5px rgb(155, 170, 185), -6px 0 12px -5px rgba(177, 161, 207, 0);
background-image: radial-gradient( circle farthest-corner at 10% 20%, rgba(0,0,0,1) 0%, rgba(64,64,64,1) 90.2% );
}
/*无边框*/
#zm_wbk {
color: #000000;
overflow: hidden;
margin: 10px 0;
padding: 15px 15px 15px 35px;
}
#zm_xyz a , #zm_gll a{
color: #eeeeee;
}
#zm_szh a{
color: #c7c7c7;
}
#zm_xty a, #zm_yyz a{
color: #ffffff;
}
3.现在就可以在编辑器内添加如下代码使用效果了。
<div id="zm_mhz">迷幻紫</div>
<div id="zm_xgh">西瓜红</div>
<div id="zm_tkzj">天空之境</div>
<div id="zm_xyz">小宇宙</div>
<div id="zm_gll">橄榄绿</div>
<div id="zm_xty">小太阳</div>
<div id="zm_yyz">优雅紫</div>
<div id="zm_szh">深邃黑</div>
<div id="zm_wbk">无边框</div>
演示
参考
使用PHP代码批量更新文章内容
前言
之前文章提到网站去除登录/评论的短代码,那如何批量去除呢?其实有不少办法,这篇文章教大家如何用php实现。
教程
在此之前请备份好数据库,以免误操作造成数据的丢失。
在网站根目录下新建一个php文件,并将如下代码放到其中
<?php
require('wp-load.php');
// 替换的关键词和对应的替换词
$replacements = array(
'关键词1' => '替换词1',
'关键词2' => '替换词2',
// 继续添加需要替换的关键词和对应的替换词
);
// 获取所有文章
$args = array(
'post_type' => 'post', // 文章类型可以根据实际情况调整
'posts_per_page' => -1, // 获取所有文章
);
$query = new WP_Query($args);
if ($query->have_posts()) {
while ($query->have_posts()) {
$query->the_post();
$post_id = get_the_ID();
$post_content = get_post_field('post_content', $post_id);
// 执行替换操作
$updated_content = str_replace(array_keys($replacements), array_values($replacements), $post_content);
// 更新文章内容
$post_data = array(
'ID' => $post_id,
'post_content' => $updated_content,
);
wp_update_post($post_data);
}
wp_reset_postdata();
} else {
echo '没有找到文章。';
}
?>
最后访问就可以了,一定要放到网站根目录,因为需要用到WordPress的函数。
分享一个好看的404html页面
前言
网站新建的时候都会有默认的404页面,但是感觉那个不好看于是就自己找了个并且修改了一下代码
截图
代码
在网站根目录新建一个404.html文件,将如下代码放进去
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>404</title>
<style>
html,body{height:100vh}
html:before,html:after,body:before,body:after{content:'';background:linear-gradient(#203075,#233581);border-radius:50%;position:absolute;top:50%;left:50%;transform:translate(-50%,-50%)}
html:before,body:before{background:linear-gradient(#233581,#203075)}
html{background:linear-gradient(#203075,#233581);overflow:hidden}
html:before{height:105vmax;width:105vmax;z-index:-4}
html:after{height:80vmax;width:80vmax;z-index:-3}
body{display:flex;justify-content:center;align-items:center;color:#FFF;font-family:'Varela Round',Sans-serif;text-shadow:0 30px 10px rgba(0,0,0,0.15)}
body:before{height:60vmax;width:60vmax;z-index:-2}
body:after{height:40vmax;width:40vmax;z-index:-1}
.main{text-align:center;z-index:5}
p{font-size:18px;margin-top:0}
h1{font-size:145px;margin:0}
.countdown{font-size:24px;margin-top:20px}
.bubble{background:linear-gradient(#EC5DC1,#D61A6F);border-radius:50%;box-shadow:0 30px 15px rgba(0,0,0,0.15);position:absolute}
.bubble:before,.bubble:after{content:'';background:linear-gradient(#EC5DC1,#D61A6F);border-radius:50%;box-shadow:0 30px 15px rgba(0,0,0,0.15);position:absolute}
.bubble:nth-child(1){top:15vh;left:15vw;height:22vmin;width:22vmin}
.bubble:nth-child(1):before{width:13vmin;height:13vmin;bottom:-25vh;right:-10vmin}
.bubble:nth-child(2){top:20vh;left:38vw;height:10vmin;width:10vmin}
.bubble:nth-child(2):before{width:5vmin;height:5vmin;bottom:-10vh;left:-8vmin}
.bubble:nth-child(3){top:12vh;right:30vw;height:13vmin;width:13vmin}
.bubble:nth-child(3):before{width:3vmin;height:3vmin;bottom:-15vh;left:-18vmin;z-index:6}
.bubble:nth-child(4){top:25vh;right:18vw;height:18vmin;width:18vmin}
.bubble:nth-child(4):before{width:7vmin;height:7vmin;bottom:-10vmin;left:-15vmin}
.bubble:nth-child(5){top:60vh;right:18vw;height:28vmin;width:28vmin}
.bubble:nth-child(5):before{width:10vmin;height:10vmin;bottom:5vmin;left:-25vmin}
</style>
</head>
<body>
<div class="bubble"></div>
<div class="bubble"></div>
<div class="bubble"></div>
<div class="bubble"></div>
<div class="bubble"></div>
<div class="main">
<h1>404</h1>
<h2>您访问的页面不存在</h2>
<p class="countdown">页面将在 <span id="countdown">3</span> 秒后自动跳转到首页</p>
</div>
<script>
// 倒计时3秒后跳转到首页
let countdown = 3;
let countdownElement = document.getElementById('countdown');
let countdownInterval = setInterval(function() {
countdown--;
countdownElement.textContent = countdown;
if (countdown <= 0) {
clearInterval(countdownInterval);
window.location.replace("/");
}
}, 1000); // 每秒更新一次
</script>
</body>
</html>
用php代码检测友链是否存在
前言
随着友链的增多,有些网站可能会不经意间就把你网站的友链去除掉了,所以就写了个php代码来检测友链是否存在
教程
1.首先在网站目录中新建一个urls.txt的文本。
2.根据友链网站的友链地址,比如有些网站首页并没有友链模块而是在某个页面中。我们就需要把完整的页面地址比如:https://xxxx.com/links.html填写到urls.txt文本中。
3.新建一个php文件,把如下代码放到里面。
<?php
// 定义要搜索的关键词
$keyword = "新锐博客";
// 读取包含 URL 地址的文本文件
$urls = file("urls.txt", FILE_IGNORE_NEW_LINES | FILE_SKIP_EMPTY_LINES);
// 初始化结果数组
$result = array();
// 初始化 cURL 处理器
$ch = curl_init();
// 设置 cURL 选项
curl_setopt($ch, CURLOPT_RETURNTRANSFER, true); // 返回获取的输出而不是直接输出到页面
curl_setopt($ch, CURLOPT_FOLLOWLOCATION, true); // 允许 cURL 追踪重定向
curl_setopt($ch, CURLOPT_CONNECTTIMEOUT, 10); // 设置超时时间为 10 秒
// 循环处理每个 URL
foreach ($urls as $url) {
// 设置要访问的 URL
curl_setopt($ch, CURLOPT_URL, $url);
// 执行 cURL 请求并获取页面内容
$sourceCode = curl_exec($ch);
// 检查是否有错误发生
if (curl_errno($ch)) {
continue; // 如果发生错误,跳过当前 URL
}
// 检查页面内容中是否包含关键词
if ($sourceCode !== false && strpos($sourceCode, $keyword) === false) {
// 如果页面中不包含关键词,将 URL 添加到结果数组
$result['data'][] = $url;
}
}
// 关闭 cURL 处理器
curl_close($ch);
// 设置返回的 JSON 数据
if (empty($result['data'])) {
$result['code'] = 404;
$result['msg'] = 'No URLs found containing the keyword.';
$result['data'] = []; // 确保即使没有数据,也能输出空数组
} else {
$result['code'] = 200;
$result['msg'] = 'Success';
}
// 调整顺序,先输出code和msg,再输出data
$output = array(
'code' => $result['code'],
'msg' => $result['msg'],
'data' => $result['data']
);
// 将结果数组转换为 JSON 格式
$jsonResult = json_encode($output, JSON_UNESCAPED_UNICODE | JSON_PRETTY_PRINT);
// 设置 HTTP 头部
header('Content-Type: application/json');
// 输出 JSON 数据
echo $jsonResult;
?>
WordPress添加实时新闻文字版页面
前言
不久之前知乎的每日60秒读懂世界停止了更新,图片不能复制新闻内容很麻烦,所以今天教大家弄一个WordPress实时新闻文字版页面。
教程
1.首先下载文件到网站任意目录
2.在主题目录的function.php文件添加如下代码
function display_external_content() {
$image_url= '域名/xinwen/data/60s_'.date('D').'.png';
$url = '域名/xinwen';
$response = wp_remote_get( $url );
$image_html = '<div style="text-align: center;"><img src="' . $image_url . '" alt="Image" width="450" height="250" /></div>';
$body = wp_remote_retrieve_body( $response );
$text_html = '<p style="text-align: left;">' . $body. '</p>';
$content_html = $image_html . $text_html;
return $content_html;
}
add_shortcode( 'baidu_hot_new', 'display_external_content' );
3.在想要展示的页面中添加[baidu_hot_new]
短代码。
下载地址
Lsky-Pro - 一款多用户轻量级图床程序
前言
兰空图床可以帮您保管大量无处安放的图片,数据可以自由选择储存驱动,支持主流第三方储存。
作为一个助手,它不仅可以将您把图片以指定规则存放在指定位置,还有更多强大的功能来帮助您处理这些图片。
教程
1.首先PHP版本要≥8.0.2
2.安装好如下扩展和函数
- BCMath PHP 扩展
- Ctype PHP 扩展
- DOM PHP 拓展
- Fileinfo PHP 扩展
- JSON PHP 扩展
- Mbstring PHP 扩展
- OpenSSL PHP 扩展
- PDO PHP 扩展
- Tokenizer PHP 扩展
- XML PHP 扩展
- Imagick 拓展
- exec、shell_exec 函数
- readlink、symlink 函数
- putenv、getenv 函数
2.下载并且上传源码到根目录,设置网站运行目录为/public
,设置以下伪静态
location / {
try_files $uri $uri/ /index.php?$query_string;
}
3.访问域名然后等待环境检测,点击下一步根据提示进行安装。
4.安装好后访问域名就可以使用了。
下载地址
Github:https://github.com/lsky-org/lsky-pro/releases
镜像站:https://hub.yzuu.cf/lsky-org/lsky-pro/releases
千万不要下载Source code
文件。
截图
前台
后台
几行PHP代码设置所有文章的访问量
前言
之前就说过需要清空网站的文章浏览量,那该如何做到呢?
教程
在网站根目录新建一个php文本,可以命名为postview.php
,将如下代码放入进去并且访问一次即可。当然我用的统计插件为wpopt,wp-postview也可以这么设置。
<?php
// Load WordPress environment
require( dirname(__FILE__) . '/wp-load.php' );
// Set the minimum and maximum views
$min_views = 0;
$max_views = 0;
// Get all published posts
$args = array(
'post_type' => 'post',
'post_status' => 'publish',
'posts_per_page' => -1
);
$posts = get_posts( $args );
// Loop through each post and set a random view count
foreach ( $posts as $post ) {
$views = rand( $min_views, $max_views );
update_post_meta( $post->ID, 'views', $views );
}
其中的$min_views
和$max_views
就是你需要设置的文章浏览量之间的值。
WordPress添加追剧页面
前言
最近看了几部电视剧,个人感觉还不错,于是想要推荐给大家,但是找了半天也没找到合适的插件或者代码,于是就自己写一个,接下来就交给大家!
效果图
教程
网站拥有子主题的朋友可以将如下代码添加到function.php中,网站没有子主题的朋友请谨慎操作!
function custom_zhuiju_shortcode($atts) {
$atts = shortcode_atts(
array(
'url' => '',
'juming' => '',
),
$atts,
'zhuiju'
);
// 获取图片URL和剧名
$image_url = esc_url($atts['url']);
$juming = esc_html($atts['juming']);
// 输出容器的HTML
$output = '<style>
@media (min-width: 768px) {
.zhuiju-container {
width: 12.5%;
display: inline-block;
text-align: center;
margin-bottom: 20px;
border: 1px solid #ccc;
border-radius: 10px;
overflow: hidden;
}
}
@media (max-width: 767px) {
.zhuiju-container {
width: 100%;
text-align: center;
margin-bottom: 20px;
border: 1px solid #ccc;
border-radius: 10px;
overflow: hidden;
}
}
</style>';
$output .= '<div class="zhuiju-container">';
$output .= '<img src="' . $image_url . '" class="fixed-size-image" style="width: 100%; height: 189px; display: block; pointer-events: none;" />';
$output .= '<p style="margin:5px 0; font-size:14px;">' . $juming . '</p>';
$output .= '</div>';
return $output;
}
add_shortcode('zhuiju', 'custom_zhuiju_shortcode');
最后新建一个页面,再填入[zhuiju url="" juming=""]
短代码即可实现影视剧分享,以上代码能够自适应电脑端和手机端
浅谈搭建网站中遇到的各种问题
前言
此次记录不仅是本站遇到的问题也有群友遇到的问题,所以在此记录一下以便不时之需。
记录
1.虽不是正儿八经的IT圈子里的人,但是对于某些代码还是能看得懂的,所以知道有句话很重要,那就是任何一个标点符号或者代码顺序错误都会导致程序出现BUG。例如我就遇到个问题,在弄CoreNext美化的时候,有些代码可能需要!important
这个代码,此代码的意思是将这一行代码作为最优先级执行,意思就是说如果有其他代码和此代码相冲突的话优先执行该代码,但是初看代码,一不小心没注意就将此代码放在了;之后,然后就刷新网页想要看看网页中的效果,结果就发现代码并没有执行,这才注意到了宝塔编辑器已经报错了,更改了;符号的位置代码就执行下去了。
2.有些时候真能被自己的愚蠢给气笑,因为corenext到目前1.5.3.2版本为止,主题并没有像PRO版本一样的投稿页面,所以就想自己搞一个,然后就把pro的投稿页面复制粘贴到next主题的page目录下,理所当然的就报错了,于是就想自己改改,到最后发现哪怕依靠AI编程也无法改好,当然肯定是因为我对代码很不熟悉的原因。所以啊,没有两把刷子,哪怕是依照着老代码去改也是改不明白的。
3.接下来这个就是至少两个群友遇到的问题了,一个是用本机Windows环境运行宝塔面板,当我远程看他电脑的时候我就差不多知道问题所在了,首先他用的是win11,其次他使用的用户名也不是默认的Administrator而是他自定义的用户名,这就导致某些软件对于文件夹是没有操作权限的。因为他网站一导入数据库就提示需要重新安装,所以我就给他创建了新的数据库,打算把旧数据库删除,但是问题就出现了,面板一直转圈,哪怕等了一段时间也不见有结果,于是我就从任务管理器把宝塔的所有进程都关闭了,然后找到数据库对应的文件夹,我想把这个文件夹删掉,结果就提示了没有Administrator权限,所以搭建网站最好还是用linux系统以免造成权限不足的情况。第二个就是另一个群友遇到的问题了,他在使用corenext主题的时候网站打开就白屏,哪怕切换到pro版本也是这样,直到切换到WordPress自带的主题就没有报错了,所以我认为是因为php版本的问题导致的,因为他使用的是8.1版本的PHP,所以我就让他切换到7.4,最后在他的操作之下网站也是恢复了正常。
总结
- 代码无小事,任何一个字符都可能让你的代码报错不运行。
- 当没有技术的时候不要妄动任何代码,否则就会像我一样白白浪费时间。
- 搭建网站最好不要用Windows版的宝塔,也不要用最新的环境,最好用稳定的环境运行网站。
- 以上都是本人的一些浅薄想法,大佬勿喷!
给你的网站添加一个Ctrl+D收藏引导
前言
现在很多网站都有以下截图的Ctrl+D收藏的引导图片,这次就教大家如何用代码实现。
截图
教程
在 wp 后台打开外观 - 小工具,然后将下面代码用自定义 HTML 添加至底部小工具即可,如果是想在每一个页面都加上这个,就在主题根目录下的footer.php
文件里的末尾添加以下代码即可。
- 默认是黑色的底色,如果不喜欢黑色底色可以替换 #18222b 颜色代码
- 文本内容也可自己根据自己的需求来适当修改
代码
<style type="text/css">
#go-fav {
width: 100%;
height: 60px;
line-height: 60px;
text-align: center;
background: #18222b;
font-size: 14px;
font-weight: 400;
color: rgba(255, 255, 255, 1)
}
#go-fav span {
padding: 5px 10px;
background: rgba(255, 197, 0, 1);
border-radius: 5px;
color: #202020;
margin: 0 5px
}
#go-fav a {color: #aeaeae}
#go-fav a:hover {color: var(--focus-color)
}
</style>
<div id="go-fav"> 按 <span>Ctrl</span>+<span>D</span> 收藏本站 或 <a class="find-more" href="/" rel="nofollow noopener" target="_blank"> 发现更多 </a></div>
利用短代码给文章内链接添加标题
前言
今天闲来无事逛一逛各个网站看看优质内容的时候发现很多网站在给链接的时候会加上链接的网站标题,比如新锐博客 - 专注于it技术和资源分享,类似这种可以点击跳转的文字标题。
因为这个需要去网页的源代码找到title后的网站标题,我就寻思每次加这个都很麻烦 有没有什么简单的方法呢?于是就想到了短代码,接下来就是教程。
教程
有子主题并且带有function.php
的朋友可以尝试一下,如果没有的话就不要为了这么一个小功能去修改主题代码了。
有子主题的可以将如下代码加入到function.php
中
function my_shortcode($atts) {
$url = $atts['url'];
$html = file_get_contents($url);
preg_match("/<title>(.*)</title>/i", $html, $matches);
$title = $matches[1];
$link = '<a href="' . $url . '">' . $title . '</a>';
return $link;
}
add_shortcode('mylink', 'my_shortcode');
之后只需要在WordPress的编辑器内填入[mylink url="你想要添加的url链接"]
即可。
结语
这次分享没什么大用,主要是闲来无事随意整整,不喜勿喷。
网站侧边栏添加公众号翻滚模块
前言
有些网站都有很好看的翻滚公众号图片,刚好看到六月是只猫有相关的教程,就抄一下,以下是教程
教程
首先在侧边栏自定义html添加如下代码
<div class="textwidget custom-html-widget"><div class="qqg-card-widget" id="qqg-card-wechat" onclick="window.open('https://www.xrbk.cn');">
<div id="qqg-flip-wrapper">
<div id="qqg-flip-content">
<div class="qqg-face"></div>
<div class="qqg-back qqg-face"></div>
</div></div></div></div>
CoreNext主题添加如下CSS代码到子主题中
/* wxgzh-card-shadow */
.wx-card-widget {
box-shadow: 0 8px 16px -4px #2c2d300c;
background: #fff;
border: 1px solid #e3e8f7;
transition: 0.3s;
border-radius: 12px;
transition: 0.3s;
position: relative;
overflow: hidden;
margin-top: 1rem;
padding: 1rem 1.2rem;
}
/* wxgzh-fanzhuan */
#wx-flip-wrapper {
position: relative;
width: 235px;
height: 110px;
z-index: 1;
}
#wx-flip-content {
width: 100%;
height: 100%;
-webkit-transform-style: preserve-3d;
transform-style: preserve-3d;
transition: cubic-bezier(0, 0, 0, 1.29) 0.3s;
}
#wx-flip-wrapper:hover #wx-flip-content {
-webkit-transform: rotateY(180deg);
transform: rotateY(180deg);
}
.wx-face {
position: absolute;
width: 100%;
height: 100%;
-webkit-backface-visibility: hidden;
backface-visibility: hidden;
background: url(/wx_face.png) center center no-repeat;
background-size: 100%;
}
.wx-back.wx-face {
display: block;
-webkit-transform: rotateY(180deg);
transform: rotateY(180deg);
box-sizing: border-box;
background: url(wx_code.png) center center no-repeat;
background-size: 100%;
}
/* wxgzh-background */
.wx-card-widget#wx-card-wechat::before {
position: absolute;
width: 100%;
height: 100%;
left: 0;
top: 0;
background: url(gzh_cover.png) center center no-repeat;
content: '';
}
.wx-card-widget#wx-card-wechat {
background: #57bd6a;
display: flex;
justify-content: center;
align-content: center;
padding: 0;
cursor: pointer;
border: none;
height: 110px;
}
.wx-card-widget#wx-card-wechat img {
max-height: 110px;
object-fit: cover;
}
/* QQG-card-shadow */
.qqg-card-widget {
box-shadow: 0 8px 16px -4px #2c2d300c;
background: #fff;
border: 1px solid #e3e8f7;
transition: 0.3s;
border-radius: 12px;
transition: 0.3s;
position: relative;
overflow: hidden;
margin-top: 1rem;
padding: 1rem 1.2rem;
}
/* QQG-fanzhuan */
#qqg-flip-wrapper {
position: relative;
width: 235px;
height: 110px;
z-index: 1;
}
#qqg-flip-content {
width: 100%;
height: 100%;
-webkit-transform-style: preserve-3d;
transform-style: preserve-3d;
transition: cubic-bezier(0, 0, 0, 1.29) 0.3s;
}
#qqg-flip-wrapper:hover #qqg-flip-content {
-webkit-transform: rotateY(180deg);
transform: rotateY(180deg);
}
.qqg-face {
position: absolute;
width: 100%;
height: 100%;
-webkit-backface-visibility: hidden;
backface-visibility: hidden;
background: url(/qqg_face.png) center center no-repeat;
background-size: 100%;
}
.qqg-back.qqg-face {
display: block;
-webkit-transform: rotateY(180deg);
transform: rotateY(180deg);
box-sizing: border-box;
background: url(/qqg_code.png) center center no-repeat;
background-size: 100%;
}
/* QQG-background */
.qqg-card-widget#qqg-card-wechat::before {
position: absolute;
width: 100%;
height: 100%;
left: 0;
top: 0;
background: url(/qq_cover.png) center center no-repeat;
content: '';
}
.qqg-card-widget#qqg-card-wechat {
background: #00aef8;
display: flex;
justify-content: center;
align-content: center;
padding: 0;
cursor: pointer;
border: none;
height: 110px;
}
.qqg-card-widget#qqg-card-wechat img {
max-height: 110px;
object-fit: cover;
}
下载附件图片素材上传到服务器,并修改css里面的url就行了,F5刷新就可以看到效果了。
记一次WordPress编辑器尝试和插件使用
前言
因为每日新闻图片版的有点问题,有时候文字不能显示,所以就想直接做个页面的文字版,接下来就是尝试中出错的过程。
过程
如上所说,我先去把图片里获取每日新闻的数据的代码搞出来,然后就想直接粘贴到WordPress的编辑器里。但是访问页面就发现显示的是代码不是效果。
然后一查才发现WordPress编辑器里不能执行PHP代码只能执行HTML代码。然后就开始钻牛角尖了,各种尝试,通过其他AI编程或者百度等方式查询到php可以在html里执行。
我就开始了html和php结合的方法,但是发现代码一放到宝塔面板的网站目录下的html中就报错,放到WordPress编辑器里也一样,所以我就去查了下,发现html执行php代码需要php环境还有文件格式是php,那就回到了起点,这就让我很纠结,怎么让php代码在WordPress编辑器里运行?
突然想到了调用,比如在function.php里加调用或者插件,于是就倒腾了一下写了个获取当天星期几的图片和热榜数据的接口,然后再搞了个插件的php文件放到WordPress的插件目录下,最后到页面中调用就行了,经过AI编程和自己的理解最终成就了新的每日新闻界面。
这样每天访问这个界面就是不同的新闻信息了。
结语
最终虽然实现了效果但是倒腾了很久,不过还是有点成就感的。以后有时间的话还是多学习学习还是很重要的。
检测网站友链是否可以访问
前言
在建设网站的过程中避免不了和其他网站交换友链,但是时间一长有些网站就停止运营了导致友链失效,有些网站的友链很多一个个查看太费时间。
于是我就想通过PHP来确定网站是否可以访问。此教程仅适合CoreNext
主题,其他主题
请慎重修改!
教程
请将其中的https://www.xrbk.cn
换成自己的网站
代码如下
<?php
$url = 'https://www.xrbk.cn/';
$html = file_get_contents($url);
$doc = new DOMDocument();
@$doc->loadHTML($html);
$xpath = new DOMXPath($doc);
$friend_items = $xpath->query('//div[@class="friend-item"]');
if ($friend_items->length == 0) {
$result = ['code' => 404, 'msg' => '暂无友链'];
} else {
$result = ['code' => 200, 'msg' => 'success', 'total' => $friend_items->length];
$data = [];
foreach ($friend_items as $item) {
$name = $xpath->query('.//img[@alt]', $item)->item(0)->getAttribute('alt');
$url = $xpath->query('.//a[@href]', $item)->item(0)->getAttribute('href');
if (!empty($url)) {
$status = check_url($url);
$data[] = ['name' => $name, 'url' => $url, 'status' => $status ? 'run' : 'error'];
}
}
$result['data'] = $data;
}
echo json_encode($result, JSON_UNESCAPED_UNICODE);
function check_url($url) {
$ch = curl_init();
curl_setopt($ch, CURLOPT_URL, $url);
curl_setopt($ch, CURLOPT_RETURNTRANSFER, true);
curl_setopt($ch, CURLOPT_HEADER, true);
curl_setopt($ch, CURLOPT_NOBODY, true);
curl_setopt($ch, CURLOPT_TIMEOUT, 5);
$response = curl_exec($ch);
$http_code = curl_getinfo($ch, CURLINFO_HTTP_CODE);
curl_close($ch);
return $http_code == 200;
}
WordPress侧边栏添加节日倒计时
前言
临近春节,所以突发奇想想要给网站加一个节日倒计时,看看距离春节还有多久
代码
WordPress侧边栏添加自定义Html并且加入以下代码
<span id="ActivityDate">2024-02-10 00:00:00</span>
<script>
// 获取id
var ActivityDate = document.getElementById("ActivityDate");
function timepiece(key){
var datatime = /^[d]{4}-[d]{1,2}-[d]{1,2}( [d]{1,2}:[d]{1,2}(:[d]{1,2})?)?$/ig,str='',s;
// 正则验证日期格式是否正确
if(!key.match(datatime)){
console.log('日期参数错误,请按格式填写,如 1996-10-22 24:00:00');
return
}
// 当前日期减去活动日期,判断是否超出
var sec = (new Date(key.replace(/-/ig,'/')).getTime() - new Date().getTime())/1000;
if(sec < 0){
ActivityDate.innerHTML = "<span style=" + "color:red;" + ">" + "新的一年开始啦,祝大家新年快乐!" + "</span>";
return
}
s = {
'天':sec/24/3600,
'时':sec/3600%24,
'分':sec/60%60,
'秒':sec%60
}
for(i in s){
if(Math.floor(s[i]) > 0) str += Math.floor(s[i]) + i;
}
if(Math.floor(sec) == 0){
str='0秒';
}
// 距离活动结束时间显示到页面
ActivityDate.innerHTML = "距离2024年春节还有:"+"<span style=" + "color:#4ad564;" + ">" + str + "</span>";
// 每隔1秒更新一次
setTimeout(function(){
timepiece(key)
},1000)
}
timepiece(ActivityDate.innerHTML);
</script>