拾光

人生如梦,人生如茶。。。

导航

  • 首页
  • 分类
    • 闲言碎语
    • 聆听
    • 软件分享
    • 亿次元&COS
    • 精品文摘
    • 说一说
    • 相册
  • 页面
    • 听听
    • 朋友圈
    • 留言
    • 友链
  • 朋友圈
  • 友链
  • 登录

Typecho 主题开发 - 文章自定义字段和主题设置字段

admin 2021年 03月 02 日

阅读选项

在 Typecho 官方的主题开发文档中,很少有关于文章自定义字段和主题设置相关的开发说明。我也是查看了一些开源主题的代码才搞懂自定义字段和主题设置的开发。这里就简单写一下文章自定义字段和主题设置的定义和调用。

文章自定义字段
文章自定义字段定义后会显示在文章编辑界面的编辑框下方,用户可以使用定义好的选项来设置每篇文章的偏好,在输出文章的时候可以调用用户的设置,实现一些个性化功能。

文章自定义字段需要在主题目录下的 functions.php 文件中的 themeFields 函数中定义。

input 输入框
下面定义一个 input 输入框:

function themeFields($layout) {
$image = new Typecho_Widget_Helper_Form_Element_Text('image', null, null, _t('文章头图'), _t('文章头图会显示在文章的顶部。'));
$mmusic->input->setAttribute('class', 'w-100 setfb');
$layout->addItem($image);  //  注册
}

$mmusic->input->setAttribute('class', 'w-100 setfb');是设置输入框CSS长度的
Typecho_Widget_Helper_Form_Element_Text 的第一个参数是字段名。第二个参数目前暂时未知。第三个参数是默认值。第四个参数是提示信息,会显示在输入框关联的 label 标签中。第五个参数是更详细的提示信息,会显示在输入框下方。

在输出文章的时候可以通过 $this->fields->image() 输出自定义字段的内容,其中的 image 就是字段名称。如果要判断字段是否有内容可以直接用 if 来判断 $this->fields->image ,如果有内容就会返回 true ,否则就返回 false 。


自定义字段使用
调用字段

$field = $this->fields->fieldName;

输出字段

$this->fields->fieldName();

判断字段

if(isset($this->fields->fieldName)){
echo '字段存在,值为:'.$this->fields->fieldName;
}else{
echo '字段不存在';
}

--------官方文档地址 http://docs.typecho.org/help/custom-fields

select 下拉选择
下面定义一个 select 下拉选择:

function themeFields($layout) {
$articleCopyright = new Typecho_Widget_Helper_Form_Element_Select('articleCopyright', array(
    'show' => '显示',
    'hide' => '不显示'
), 'show', _t('显示原创声明'), _t('开启后会在本篇文章底部显示版权声明。'));
$layout->addItem($articleCopyright);  //  注册  
}

注意!只要是文章的自定义字段都需要写在 themeFields 函数内,多个字段也只需要写在一个 themeFields 函数内。

Typecho_Widget_Helper_Form_Element_Select 的第一个参数是字段名称。第二个参数是下拉选择的内容,需要传入一个数组。第三个参数是默认值,默认值的类型为字符串,需要传入一个数组的键名。第四个参数是 label 标签关联的提示信息。第五个参数是更详细的提示信息。

在输出文章的时候可以用 if 来判断 $this->fields->articleCopyright 的值,其中 articleCopyright 就是字段名。下面判断 $this->fields->articleCopyright 的值:

if ($this->fields->articleCopyright == 'show') {
//  如果是选中状态就返回 true
}

下面是 input 输入框和 select 下拉选择 在文章编辑页的效果:

45611-ltgnnspf8vm.png

主题设置字段
主题设置字段定义后会显示在主题的外观设置页,用户可以使用定义好的选项来设置主题的外观和功能。

主题设置的字段需要在主题目录下的 funcions.php 中的 themeConfig 函数中定义。

input 输入框
下面定义一个 input 输入框:

function themeConfig($cfg) {
$logoUrl = new Typecho_Widget_Helper_Form_Element_Text('logoUrl', null, null, _t('站点 Logo 地址'), _t('Logo 会显示在标签页的标题前面。'));
$cfg->addInput($logoUrl);  //  注册
}

主题设置字段的 Typecho_Widget_Helper_Form_Element_Text 参数和文章自定义字段的 Typecho_Widget_Helper_Form_Element_Text 的参数是一样的。

主题设置字段可以在任何一个页面使用 $this->options->logoUrl() 输出,其中的 logoUrl 就是字段名。如果要判断字段是否有内容也可以用 if 来判断 $this->options->logoUrl ,如果有内容就会返回 true ,否则返回 false 。

textarea 输入框
下面定义一个 textarea 输入框:

function themeConfig($cfg) {
$cssCode = new Typecho_Widget_Helper_Form_Element_Textarea('cssCode', null, null, _t('自定义 CSS'), _t('通过自定义 CSS 您可以很方便的设置页面样式,自定义 CSS 不会影响网站源代码。'));
$cfg->addInput($cssCode);  //  注册
}

注意!所有的主题设置字段都需要写在 themeConfig 函数中,多个字段也只需要写在一个 themeConfig 函数中。

Typecho_Widget_Helper_Form_Element_Textarea 的参数和 input 输入框的参数是一样的。

textarea 的输出和查询和上面的 input 是一样的。

checkbox 复选框
下面定义一组 checkbox 复选框:

function themeConfig($cfg) {
$sidebarBlock = new Typecho_Widget_Helper_Form_Element_Checkbox('sidebarBlock',
    array(
        'ShowRecentPosts' => _t('显示最新文章'),
        'ShowRecentComments' => _t('显示最近回复'),
        'ShowCategory' => _t('显示分类'),
        'ShowTag' => _t('显示标签云'),
        'ShowArchive' => _t('显示归档'),
        'ShowOther' => _t('显示其它杂项'),
        'HideLoginLink' => _t('隐藏登录入口')
    ),
    array(
        'ShowRecentPosts',
        'ShowRecentComments',
        'ShowCategory'
    ), _t('侧边栏显示')
);
$cfg->addInput($sidebarBlock->multiMode());  //  注册
}

Typecho_Widget_Helper_Form_Element_Checkbox 的第一个参数是字段名。第二个参数是复选框的内容,需要传入一个数组。第三个参数是复选框的选中状态,需要传入一个数组,数组的内容就是第二个参数中数组的键名。第四个参数是复选框组的标题,会显示在复选框的上方。

注意!在注册的时候需要传入 Typecho_Widget_Helper_Form_Element_Checkbox 的 multiMode() 方法。

如果需要判断复选框的选中状态可以使用 in_array 函数来查找 $this->options->sidebarBlock 的选项。

下面判断 显示最新回复 是否选中 :

if (is_array($this->options->sidebarBlock) && in_array('ShowRecentComments', $this->options->sidebarBlock)) {
//  返回 true
}

如果一组复选框中没有一个被选中,$this->options->sidebarBlock 的值就是 null 。只使用 in_array() 查找的话可能会报错,需要先用 is_array() 判断是否是数组。

复选框的效果如下:

90786-k8fpceqhmwq.png

radio 单选框
下面定义一组 radio 单选框:

function themeConfig($cfg) {
$navbarColor = new Typecho_Widget_Helper_Form_Element_Radio('navbarColor', array(
    'white' => '白色',
    'black' => '黑色'
), 'black', _t('导航栏颜色'));
$cfg->addInput($navbarColor);
}

Typecho_Widget_Helper_Form_Element_Radio 的第一个参数是字段名。第二个参数是单选框的内容,需要传入一个数组。第三个参数是单选框的选中状态,需要传入第二个参数数组的键名。第四个参数是单选框组的标题,会显示在单选框的上方。

如果要判断单选框的选中状态可以用 if 来判断 $this->options->navbarColor 的值,其中的 navbarColor 是字段名。

下面判断单选框的选中状态:

if ($this->options->navbarColor == 'black') {
//  如果黑色选中就返回 true
}

下面是单选框的效果:

69039-1luzsho6c0j.png

这就是Typecho 主题开发 - 文章自定义字段和主题设置字段

Typecho 主题开发 - 文章自定义字段和主题设置字段
admin 2021-03-02 软件分享

那年今日
03月
02日
  • 2022年03月02日墨尔本的翡翠-车厘子的车车
  • 2025年03月02日逃走无果 - 楚怡姐姐
罗大佑 - 皇后大道东 穗盐路限货时间

微信分享二维码

赞 (0)
打赏
微信打赏
支付宝打赏

猜您想看

生涯有苦有甜,才叫完整;恋爱有闹有和,才叫情趣

有些人是一直会...
2022年01月23日

有些事,你真别看清,看清心痛,有些人,你真别看懂,看懂伤情

不得不认可,时...
2022年01月22日

八个字,就是短短一生

一辈子说长不长...
2022年01月21日

只为你着迷 - 李秉成

最近我常在半夜...
2025年02月14日

我不傻,只是不想计较

图文 | 网络...
2022年01月23日

你以为我刀枪不入,我以为你百毒不侵,但我们却都红了眼眶

有些事情是不能...
2022年01月23日

评论区(暂无评论)

这里空空如也,快来评论吧~

取消回复

我要评论

拾光
如果你错过五点的日出,也许你可以等待六点的夕阳!
99+
文章
99+
评论
7
分类
4
页面
文章分类
  • 闲言碎语 (582)
  • 聆听 (1324)
  • 软件分享 (1048)
  • 亿次元&COS (200)
  • 精品文摘 (4544)
  • 说一说 (119)
  • 相册 (9)
最近文章
  • 一个人的冬 (你出现又离开) - 田园
    2025/05/02 · 暂无评论
  • 连吃醋都要把握分寸 - 田园
    2025/05/02 · 暂无评论
  • 爱过爱错 - 周文凯
    2025/05/02 · 暂无评论
  • 追求 - 卓依婷
    2025/04/21 · 暂无评论
  • 哎呀呀 - 小爱与花儿乐队
    2025/04/21 · 暂无评论
最新评论
  • 灰常记忆
    你这个主题蛮好看的,可以分享下吗?

    2025-03-27
  • admin
    《骆驼祥子》里有一段话: “这世间的真话…

    2024-09-23
  • admin
    谢谢提醒 还记得是2023

    2024-01-24
  • 幻焕
    hey 已经是2024年啦

    2024-01-19
  • admin
    div.s…

    2024-01-16
文章标签
  • 歌曲
  • 一言
  • 原文
  • 分享
  • 照片
  • 二次元
  • typecho
  • 小姐姐
  • 软件
  • 插件
  • wordpress升级
  • 美女
  • wordpress技巧
  • 情感
  • 房子
  • 建筑
  • 别墅
  • WordPress插件
  • Wordpress
  • 视频
友情链接:
拾光
规则之树
幻焕博客
旧时光

© 2025 拾光
Powered by Typecho & BearSimple
湘ICP备18006110号
× 微信二维码

微信扫码联系我

× QQ二维码

QQ扫码联系我