typecho1.3.0版本后自定义字段下面的相关样式做出了改变,这就导致以前的js代码无法正确获取相关数据,故而就无法正常使用。
解决方法也不是唯一性,当然还有更好的解决方法,不过本人技术有限,只能通过下面的方法进行解决。
//自定义字段扩展,把下面的代码添加到functions.php文件中
Typecho_Plugin::factory('admin/write-post.php')->bottom = array('tabField', 'tabs');
Typecho_Plugin::factory('admin/write-page.php')->bottom = array('tabField', 'tabs');
class tabField{
public static function tabs()
{
?>
<style>
.tabss {
margin: 10px;
clear: both;
display: block;
height: 30px;
padding: 0
}
;
.tabss a {
outline: none !important
}
;
</style>
<script>
$(function () {
// 1. 定义标签页HTML结构(保持原有4个标签:默认/图片/标题/位置)
var tabsHtml = `<ul class="typecho-option-tabs tabss" style="margin: 10px 0; padding: 0; list-style: none; border-bottom: 1px solid #eee;">
<li class="current" id="t-default" style="display: inline-block; margin-right: 10px; padding: 5px 15px; cursor: pointer; border-bottom: 2px solid #0088cc; color: #0088cc;">
<a href="javascript:;" style="text-decoration: none; color: inherit;">默认</a>
</li>
<li class="" id="t-img" style="display: inline-block; margin-right: 10px; padding: 5px 15px; cursor: pointer; color: #666;">
<a href="javascript:;" style="text-decoration: none; color: inherit;">图片</a>
</li>
<li class="" id="t-biaoti" style="display: inline-block; margin-right: 10px; padding: 5px 15px; cursor: pointer; color: #666;">
<a href="javascript:;" style="text-decoration: none; color: inherit;">标题</a>
</li>
<li class="" id="t-weizhi" style="display: inline-block; padding: 5px 15px; cursor: pointer; color: #666;">
<a href="javascript:;" style="text-decoration: none; color: inherit;">位置</a>
</li>
</ul>`;
// 把标签页插入到「自定义字段」summary后面、fields列表前面
$("#custom-field summary").after(tabsHtml);
// 2. 初始化:隐藏所有field行
$("#custom-field .fields .field").hide();
// 3. 初始化显示「默认」标签对应的字段(包含t-default-find类的元素所在的field行)
$("#custom-field .fields").find('.t-default-find').closest('.field').show();
// 4. 标签点击切换逻辑
$(".tabss li").click(function () {
// 获取当前点击标签的ID(如t-img、t-biaoti)
var tabId = this.id;
// 移除所有标签的选中样式
$(".tabss li").removeClass('current').css({
'border-bottom': 'none',
'color': '#666'
});
// 给当前点击标签添加选中样式
$(this).addClass('current').css({
'border-bottom': '2px solid #0088cc',
'color': '#0088cc'
});
// 先隐藏所有field行
$("#custom-field .fields .field").hide();
// 显示当前标签对应的field行(根据类名匹配:tabId + -find)
$("#custom-field .fields").find('.' + tabId + '-find').closest('.field').show();
});
});
</script>
<?php
}
}