ChatGpt

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

💥 效果：

Unable to fetch title (www.zhihu.com)

Unable to fetch description

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

👍 插件代码：

<?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;
}
?>

【更新】2024-12-08：解决卡片兼容性问题

解决的问题：

错误详情
============
错误类型 E_ERROR 发生在文件 /www/wwwroot/www.saiita.com.cn/wp-content/plugins/custom-card-plugin/custom-plugin.php 的 107 行。错误信息：Uncaught ValueError: DOMDocument::loadHTML(): Argument #1 ($source) must not be empty in /www/wwwroot/www.saiita.com.cn/wp-content/plugins/custom-card-plugin/custom-plugin.php:107
Stack trace:
#0 /www/wwwroot/www.saiita.com.cn/wp-content/plugins/custom-card-plugin/custom-plugin.php(107): DOMDocument->loadHTML()
#1 /www/wwwroot/www.saiita.com.cn/wp-content/plugins/custom-card-plugin/custom-plugin.php(19): get_url_info()
#2 /www/wwwroot/www.saiita.com.cn/wp-includes/shortcodes.php(434): custom_card_shortcode()
#3 [internal function]: do_shortcode_tag()
#4 /www/wwwroot/www.saiita.com.cn/wp-includes/shortcodes.php(273): preg_replace_callback()
#5 /www/wwwroot/www.saiita.com.cn/wp-content/plugins/rest-api-to-miniprogram/includes/ram-util.php(600): do_shortcode()
#6 /www/wwwroot/www.saiita.com.cn/wp-content/plugins/rest-api-to-miniprogram/includes/filter/ram-custom-post-fields.php(109): get_post_content_audio()
#7 /www/wwwroot/www.saiita.com.cn/wp-includes/class-wp-hook.php(324): custom_post_fields()
#8 /www/wwwroot/www.saiita.com.cn/wp-includes/plugin.php(205): WP_Hook->apply_filters()
#9 /www/wwwroot/www.saiita.com.cn/wp-includes/rest-api/endpoints/class-wp-rest-posts-controller.php(2108): apply_filters()
#10 /www/wwwroot/www.saiita.com.cn/wp-includes/rest-api/endpoints/class-wp-rest-posts-controller.php(635): WP_REST_Posts_Controller->prepare_item_for_response()
#11 /www/wwwroot/www.saiita.com.cn/wp-includes/rest-api/class-wp-rest-server.php(1292): WP_REST_Posts_Controller->get_item()
#12 /www/wwwroot/www.saiita.com.cn/wp-includes/rest-api/class-wp-rest-server.php(1125): WP_REST_Server->respond_to_request()
#13 /www/wwwroot/www.saiita.com.cn/wp-includes/rest-api.php(576): WP_REST_Server->dispatch()
#14 /www/wwwroot/www.saiita.com.cn/wp-includes/rest-api.php(2957): rest_do_request()
#15 [internal function]: rest_preload_api_request()
#16 /www/wwwroot/www.saiita.com.cn/wp-includes/block-editor.php(756): array_reduce()
#17 /www/wwwroot/www.saiita.com.cn/wp-admin/edit-form-blocks.php(77): block_editor_rest_api_preload()
#18 /www/wwwroot/www.saiita.com.cn/wp-admin/post.php(187): require('...')
#19 {main}
  thrown

更新的代码

<?php
/*
Plugin Name: Custom Card Plugin
Description: A plugin to display URL info as a styled card.
Version: 1.0
Author: Your Name
*/

// Shortcode to render the card
function custom_card_shortcode($atts) {
    $atts = shortcode_atts(array(
        'url' => '',
    ), $atts);

    $url = esc_url($atts['url']);

    if (!$url) {
        return '<div class="custom-card">Invalid URL provided.</div>';
    }

    $url_info = get_url_info($url);

    ob_start();
    ?>
    <div class="custom-card" onclick="window.open('<?php echo esc_url($url_info['url']); ?>', '_blank');">
        <div class="card-header">
            <span class="card-title"><?php echo esc_html($url_info['title']); ?></span>
            <span class="card-host">(<?php echo esc_html($url_info['host']); ?>)</span>
        </div>
        <p class="card-description"><?php echo esc_html($url_info['description']); ?></p>
    </div>
    <?php
    return ob_get_clean();
}
add_shortcode('custom_card', 'custom_card_shortcode');

// Fetch URL information
function get_url_info($url) {
    $url_info = array();

    $ch = curl_init();
    curl_setopt($ch, CURLOPT_URL, $url);
    curl_setopt($ch, CURLOPT_RETURNTRANSFER, true);
    curl_setopt($ch, CURLOPT_USERAGENT, 'Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/91.0.4472.124 Safari/537.36');
    curl_setopt($ch, CURLOPT_TIMEOUT, 10);
    $html = curl_exec($ch);
    $http_code = curl_getinfo($ch, CURLINFO_HTTP_CODE);
    curl_close($ch);

    if (!$html || $http_code !== 200) {
        return array(
            'url' => $url,
            'title' => 'Unable to fetch title',
            'description' => 'Unable to fetch description',
            'host' => parse_url($url, PHP_URL_HOST),
            'favicon' => 'https://www.google.com/s2/favicons?sz=64&domain=' . parse_url($url, PHP_URL_HOST),
        );
    }

    $doc = new DOMDocument();
    @$doc->loadHTML($html);

    $title = $doc->getElementsByTagName("title")->item(0)->nodeValue ?? 'No title found';
    $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 ?: 'No description found';
    $url_info['host'] = $host;
    $url_info['favicon'] = $favicon;

    return $url_info;
}

// Add custom styles
add_action('wp_footer', 'custom_card_styles');
function custom_card_styles() {
    ?>
    <style>
        .custom-card {
            border: 2px solid #ccc;
            border-radius: 10px;
            padding: 15px;
            margin: 15px 0;
            background-color: #f5f5f5;
            box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
            cursor: pointer;
            transition: background-color 0.2s ease-in-out;
        }

        .custom-card:hover {
            background-color: #e6e6e6;
        }

        .custom-card .card-header {
            display: flex;
            justify-content: space-between;
            align-items: center;
        }

        .custom-card .card-title {
            font-size: 18px;
            font-weight: bold;
            color: #333;
            white-space: nowrap;
            overflow: hidden;
            text-overflow: ellipsis;
        }

        .custom-card .card-host {
            font-size: 14px;
            color: #666;
        }

        .custom-card .card-description {
            font-size: 14px;
            color: #666;
            line-height: 1.5em;
            max-height: 3em; /* Limit to 2 lines */
            overflow: hidden;
            text-overflow: ellipsis;
        }
    </style>
    <?php
}

使用方法：

安装插件

  • 将代码保存为 custom-card-plugin.php。
  • 上传到 WordPress 的 wp-content/plugins/ 目录下。
  • 在后台启用插件。

在文章中使用短代码 使用 [ custom_card url="https://www.saiita.com.cn" ]，将 url 替换为目标网址。

效果描述

  • 短代码[简码]：
    SaiitaのBlog (www.saiita.com.cn)

    记录个人工作和生活中遇到的问题，并提供解决方法和总结。此外，也分享杭州周边旅行经验和见闻，希望能为您的旅行和生活带来灵感和启示。

  • 样式：标题和描述显示在卡片中，描述限制为两行，点击卡片会跳转到目标网址。
  • 问题解决：处理了乱码、file_get_contents 的错误，以及兼容性问题。


手机观看扫描下方微信小程序二维码


知识共享许可协议本作品采用知识共享署名-相同方式共享 4.0 国际许可协议进行许可。

标签： · · ·
生成海报 点赞 0

相关推荐

第一次体会到了ChatGPT厉害！
ChatGpt 2023-10-19

第一次体会到了ChatGPT厉害！

这个星期在Autumn Pro微信群里谈到了外链跳转页面，为了安全和SEO就下载了wpjam-external-links插件，并上传到了博客里。
设置还挺方便在wordpress后台的WPJAM的链接设置，就可以开启外链跳转页面。

暂无评论

尊敬的用户，您还未登录，登录之后更精彩！

→ 目录展开