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