✅ 使用ChatGPT 3.5写了1个wordpress插件,生成插件很简单,就跟ChatGPT 3.5说需求一样,ChatGPT 3.5就几秒种就给出了对应的代码,然后还可以指导怎么使用。真的是太方便了。
👍 使用方法是在wordprss目录(wp-content/plugins/)下,创建1个custom-card-plugin文件夹。
👍 文件夹下面创建1个custom-plugin.php文件。然后在插件列表激活Custom Card Plugin插件。
👍 文章种使用简码:
[custom_card url="https://www.zhihu.com/question/20448124"]
✅ wordpress 网站卡片显示插件效果还行。
💥 效果:
[custom_card url="https://www.zhihu.com/question/20448124"]
❌ 不过使用过程中还是有很多问题的,比如网站没有标题和内容,会显示空白、网站乱码问题等。还是要自己去手动修改
👍 插件代码:
<?php
/*
Plugin Name: Custom Card Plugin
Description: 一个自定义卡片插件,根据输入的网址获取相关信息并以卡片形式显示。
Version: 1.0
Author: https://www.saiita.com.cn
*/
// 添加短代码
function custom_card_shortcode($atts) {
$atts = shortcode_atts(
array(
'url' => '',
),
$atts,
'custom_card'
);
$url_info = get_url_info($atts['url']);
$output = '<div class="custom-card" data-url="' . esc_url($url_info['url']) . '">';
$output .= '<img src="' . $url_info['favicon'] . '" alt="Favicon">';
$output .= '<h2>' . esc_html($url_info['title']) . '</h2>';
$output .= '<p>' . esc_html($url_info['description']) . '</p>';
$output .= '</div>';
return $output;
}
// 注册短代码
add_shortcode('custom_card', 'custom_card_shortcode');
// 添加样式和脚本
add_action('wp_footer', 'custom_card_styles');
function custom_card_styles() {
?>
<style>
.custom-card {
max-width: 100%;
border: 2px solid #ccc;
border-radius: 10px;
padding: 15px;
margin: 15px auto;
background-color: #f5f5f5;
box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
cursor: pointer;
}
.custom-card:hover {
background-color: #e6e6e6;
}
.custom-card img {
max-width: 50px;
border-radius: 5px;
margin-right: 10px;
}
.custom-card h2 {
color: #333;
font-size: 18px;
margin-bottom: 10px;
}
.custom-card p {
color: #666;
font-size: 14px;
margin-bottom: 10px;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
</style>
<script>
document.addEventListener('DOMContentLoaded', function() {
var customCards = document.querySelectorAll('.custom-card');
customCards.forEach(function(card) {
card.addEventListener('click', function() {
var link = card.getAttribute('data-url');
if (link) {
window.open(link, '_blank');
}
});
});
});
</script>
<?php
}
// 获取网址信息
function get_url_info($url) {
$url_info = array();
$html = file_get_contents($url);
$doc = new DOMDocument();
@$doc->loadHTML($html);
$title = $doc->getElementsByTagName("title")->item(0)->nodeValue;
$description = '';
$metas = $doc->getElementsByTagName('meta');
foreach ($metas as $meta) {
if ($meta->getAttribute('name') == 'description') {
$description = $meta->getAttribute('content');
break;
}
}
$host = parse_url($url, PHP_URL_HOST);
$favicon = 'https://www.google.com/s2/favicons?sz=64&domain=' . $host;
$url_info['url'] = $url;
$url_info['title'] = $title;
$url_info['description'] = $description;
$url_info['host'] = $host;
$url_info['favicon'] = $favicon;
return $url_info;
}
?>
本作品采用知识共享署名-相同方式共享 4.0 国际许可协议进行许可。
暂无评论
要发表评论,您必须先 登录