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=""] 短代码即可实现影视剧分享，以上代码能够自适应电脑端和手机端