文章最后更新时间：
自定义标题前缀，支持文字前缀、图像前缀。将代码放在主题functions.php中，图片链接地址改成自己的。
话不多说，先看效果图！
文字前缀
图像前缀
// 注册Meta Box
function my_custom_prefixes_meta_box() {
// 添加Meta Box
add_meta_box(
'custom-title-prefixes', // Meta Box ID
'自定义标题前缀', // Meta Box 标题
'my_custom_prefixes_meta_box_callback', // 显示内容的回调函数
'post', // 对哪种类型的内容生效
'side' // 在哪个位置显示（'normal','side', 'advanced'）
);
}
// 在WordPress添加Meta Box的钩子上注册我们的函数
add_action('add_meta_boxes','my_custom_prefixes_meta_box');
// 获取可用的文字前缀选项
function get_my_text_prefix_options() {
return array(
'突发' => array(
'label' => '突发',
'css_class' => 'ove-prefix'
),
'独家' => array(
'label' => '独家',
'css_class' => 'ove-prefix1'
),
'热门' => array(
'label' => '热门',
'css_class' => 'ove-prefix2'
),
'新品' => array(
'label' => '新品',
'css_class' => 'ove-prefix3'
),
'重磅' => array(
'label' => '重磅',
'css_class' => 'ove-prefix4'
),
'转载' => array(
'label' => '转载',
'css_class' => 'ove-prefix5'
),
'爆料' => array(
'label' => '爆料',
'css_class' => 'ove-prefix6'
)
);
}
// 获取可用的图片选项
function get_my_image_options() {
return array(
'实测' => '/厨艺.svg',
'推荐' => '/分类-星秀.svg',
'热门' => '/hot.svg',
'新品' => '/经营策略.svg',
'独家' => '/自频道.svg'
);
}
// Meta Box内容的回调函数
function my_custom_prefixes_meta_box_callback($post) {
// 生成并输出用于安全验证的Nonce字段
wp_nonce_field('custom_title_prefix_save', 'custom_title_prefix_nonce');
// 获取已保存的文字前缀
$saved_text_prefixes = get_post_meta($post->ID, '_selected_text_prefixes', true);
if (!is_array($saved_text_prefixes)) {
$saved_text_prefixes = [];
}
// 获取已保存的图片名称数组
$saved_image_names = get_post_meta($post->ID, '_selected_image_names', true);
if (!is_array($saved_image_names)) {
$saved_image_names = [];
}
// 文字前缀选择区
$text_options = get_my_text_prefix_options();
echo '<div id="text_prefixes_container">
<p>选择文字前缀：</p>';
foreach ($text_options as $value => $option) {
$checked = in_array($value, $saved_text_prefixes)? 'checked' : '';
echo "<label style='display: block; margin-bottom: 5px;'><input type='checkbox' name='text_prefix_selection[]' value='". esc_attr($value)."'$checked> ". esc_html($option['label'])."</label>";
}
echo '</div>';
// 图像选择区
$options = get_my_image_options();
echo '<div id="image_selection_container" style="margin-top: 20px;">
<p>选择图像前缀：</p>';
foreach ($options as $name => $url) {
// 判断当前图像名称是否已被选中
$checked = in_array($name, $saved_image_names)?'checked' : '';
echo "<label style='display: block; margin-bottom: 5px;'><input type='checkbox' name='image_name_selection[]' value='". esc_attr($name)."'$checked> ". esc_html($name)."</label>";
}
echo '</div>';
}
// 保存Meta Box中的数据
function save_custom_title_prefixes_data($post_id) {
// 进行安全验证
if (!isset($_POST['custom_title_prefix_nonce']) ||
!wp_verify_nonce($_POST['custom_title_prefix_nonce'], 'custom_title_prefix_save') ||
(defined('DOING_AUTOSAVE') && DOING_AUTOSAVE) ||
!current_user_can('edit_post', $post_id)) {
return;
}
// 保存选择的文字前缀
if (isset($_POST['text_prefix_selection'])) {
update_post_meta($post_id, '_selected_text_prefixes', $_POST['text_prefix_selection']);
} else {
delete_post_meta($post_id, '_selected_text_prefixes');
}
// 保存选择的图片名称
if (isset($_POST['image_name_selection'])) {
// 对传入的图片名称数组进行安全处理
$sanitized_image_names = array_map('sanitize_text_field', $_POST['image_name_selection']);
update_post_meta($post_id, '_selected_image_names', $sanitized_image_names);
} else {
delete_post_meta($post_id, '_selected_image_names');
}
}
// 在保存文章的钩子上注册保存数据的函数
add_action('save_post','save_custom_title_prefixes_data');
// 显示标题时应用前缀和自定义CSS
function apply_custom_prefixes_to_title($title, $id = null) {
// 判断当前是否在后台、是否为单篇文章页面且文章ID存在
if (!is_admin() &&!is_single() && $id) {
// 处理文字前缀
$selected_text_prefixes = get_post_meta($id, '_selected_text_prefixes', true);
if (!empty($selected_text_prefixes) && is_array($selected_text_prefixes)) {
$prefix_html = '';
$text_options = get_my_text_prefix_options();
foreach ($selected_text_prefixes as $prefix) {
if (isset($text_options[$prefix])) {
$css_class = $text_options[$prefix]['css_class'];
$prefix_html.= "<span class='". esc_attr($css_class). "'>" . esc_html($text_options[$prefix]['label']). "</span> ";
}
}
$title = $prefix_html. $title;
}
// 处理图片前缀
$selected_image_names = get_post_meta($id, '_selected_image_names', true);
if (!empty($selected_image_names) && is_array($selected_image_names)) {
$options = get_my_image_options();
foreach ($selected_image_names as $name) {
if (isset($options[$name])) {
$url = esc_url($options[$name]);
$title = "<img src='$url' alt='Prefix Image' style=' height: 20px; pointer-events: none;'/>" . $title;
}
}
}
}
return $title;
}
// 在文章标题的过滤器钩子上应用我们的函数
add_filter('the_title', 'apply_custom_prefixes_to_title', 10, 2);下面的css代码放在自定义css中
/*标题前缀*/
/* 定义动画关键帧，实现从左到右的扫过效果 */
@keyframes sweepTitle {
0% {
left: -100%; /* 初始位置在元素左侧外部 */
}
100% {
left: 100%; /* 结束位置在元素右侧外部 */
}
}
/* 通用的标题前缀样式 */
.ove-prefix,
.ove-prefix1,
.ove-prefix2,
.ove-prefix3,
.ove-prefix4,
.ove-prefix5,
.ove-prefix6 {
position: relative; /* 相对定位，作为伪元素的定位参考 */
overflow: hidden; /* 隐藏溢出部分，确保伪元素超出部分不可见 */
display: inline-flex; /* 行内弹性布局，方便内部元素对齐 */
align-items: center; /* 垂直居中对齐内部元素 */
padding: 5px 4px; /* 内边距 */
margin-right: 3px; /* 右侧外边距 */
height: 19px; /* 固定高度 */
font-size: 12px; /* 字体大小 */
top: -3px; /* 向上偏移3px */
text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.2); /* 添加文字阴影，增强立体感 */
}
/* 为每个标题前缀类单独设置文字颜色和背景形状 */
.ove-prefix {
color: #fff; /* 白色文字 */
background: linear-gradient(135deg, #FF5733 10%, #FF8C66 100%); /* 橙色系背景渐变 */
clip-path: polygon(7% 0, 99% 0, 93% 100%, 0 100%); /* 裁剪路径，形成倾斜的形状 */
}
.ove-prefix1 {
color: #fff; /* 白色文字 */
background: linear-gradient(135deg, #33FF57 10%, #66FF8C 100%); /* 绿色系背景渐变 */
clip-path: polygon(0 0, 100% 0, 90% 100%, 10% 100%); /* 不同的裁剪路径 */
}
.ove-prefix2 {
color: #fff; /* 白色文字 */
background: linear-gradient(135deg, #3357FF 10%, #668CFF 100%); /* 蓝色系背景渐变 */
clip-path: polygon(0 0, 90% 0, 100% 100%, 0 100%); /* 另一种裁剪路径 */
}
.ove-prefix3 {
color: #fff; /* 白色文字 */
background: linear-gradient(135deg, #FF33E8 10%, #FF66F2 100%); /* 粉色系背景渐变 */
clip-path: polygon(10% 0, 100% 0, 90% 100%, 0 100%); /* 又一种裁剪路径 */
}
.ove-prefix4 {
color: #fff; /* 白色文字 */
background: linear-gradient(135deg, #FFD700 10%, #FFE666 100%); /* 黄色系背景渐变 */
clip-path: polygon(0 0, 100% 0, 100% 100%, 20% 100%); /* 不同的裁剪路径 */
}
.ove-prefix5 {
color: #FFE4E1; /* 浅粉色文字 */
background: linear-gradient(135deg, #9400D3 10%, #BA55D3 100%); /* 紫色系背景渐变 */
clip-path: polygon(20% 0, 80% 0, 100% 100%, 0 100%); /* 新的裁剪路径 */
}
.ove-prefix6 {
color: #FFFAF0; /* 米白色文字 */
background: linear-gradient(135deg, #FF4500 10%, #FF6347 100%); /* 红色系背景渐变 */
clip-path: polygon(0 0, 100% 0, 70% 100%, 30% 100%); /* 新的裁剪路径 */
}
/* 为每个标题前缀类添加伪元素，实现扫光效果 */
.ove-prefix:after,
.ove-prefix1:after,
.ove-prefix2:after,
.ove-prefix3:after,
.ove-prefix4:after,
.ove-prefix5:after,
.ove-prefix6:after {
position: absolute; /* 绝对定位 */
content: " "; /* 伪元素内容为空 */
display: block; /* 块级显示 */
left: -100%; /* 初始位置在元素左侧外部 */
top: -5px; /* 向上偏移5px */
width: 15px; /* 伪元素宽度 */
height: 145%; /* 伪元素高度 */
background-image: linear-gradient(90deg, rgba(255, 255, 255, 0), rgba(255, 255, 255, 0.5), rgba(255, 255, 255, 0)); /* 线性渐变背景，实现扫光效果 */
animation: sweepTitle 3s ease-in-out infinite; /* 应用动画，持续3s，缓入缓出，无限循环 */
transform: rotate(28deg); /* 旋转28度，使扫光效果倾斜 */
}
/* 鼠标悬停效果，改变透明度和缩放 */
.ove-prefix:hover,
.ove-prefix1:hover,
.ove-prefix2:hover,
.ove-prefix3:hover,
.ove-prefix4:hover,
.ove-prefix5:hover,
.ove-prefix6:hover {
opacity: 0.8; /* 鼠标悬停时透明度变为0.8 */
transform: scale(1.05); /* 鼠标悬停时略微放大 */
transition: all 0.3s ease; /* 添加过渡效果 */
cursor: pointer; /* 鼠标悬停时显示指针样式 */
}
/* 响应式设计，当屏幕宽度小于600px时，调整字体大小和内边距 */
@media (max-width: 600px) {
.ove-prefix,
.ove-prefix1,
.ove-prefix2,
.ove-prefix3,
.ove-prefix4,
.ove-prefix5,
.ove-prefix6 {
font-size: 10px; /* 字体大小调整为10px */
padding: 3px 2px; /* 内边距调整为3px 2px */
}
}
© 版权声明
THE END
暂无评论内容