使用ChatGPT 3.5 写了1个wordpress网站卡片插件

✅ 使用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 网站卡片显示插件效果还行。

💥 效果：

❌ 不过使用过程中还是有很多问题的，比如网站没有标题和内容，会显示空白、网站乱码问题等。还是要自己去手动修改

👍 插件代码：

<?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 国际许可协议进行许可。