WordPress添加追剧页面

前言

最近看了几部电视剧,个人感觉还不错,于是想要推荐给大家,但是找了半天也没找到合适的插件或者代码,于是就自己写一个,接下来就交给大家!

效果图

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

© 版权声明
THE END
喜欢就支持一下吧
点赞0 分享
评论 抢沙发
头像
欢迎您留下宝贵的见解!
提交
头像

昵称

取消
昵称表情

    暂无评论内容