写一个typecho后台设置页之文本框

厄长的前言

尝试在wordpress默认主题twentyten的基础上修改了一个主题,也就是这个博客《虾比比》现在所用的主题了。在尝试的过程中,对于一些html以及css知识有了更进一步的了解,这种感觉就象新开了一个网游账号,经历了一系列的打怪升级,终于走出了新手村,很有成就感的同时,也更敬畏于网页背后所涉及的知识体系。

等站点初具雏形之后,发现了几个比较严重的问题,一是前期没有好的分类与规划,导致后期一个php文件实现了太多的功能,页面自由度不高;二是命令混乱,随着css语句的逐渐增加,其结构混乱到自己也找不到去哪修改一个显示上的错误;三是主题缺少一个后台设置的页面,站点内容的改动完全靠手动修改或添加主题php文件实现,这样的主题显然是只能用于自用,没法分享给他人的。

挺莫名其妙的就是很喜欢用typecho,最初也是想尝试用typecho写一个自用主题,奈何相关文档实在太少,所以选择了wordpress作为入门,毕竟无论是走过的路,还是沿路的坑,都有无数前辈的足迹。遇到问题,百度搜索下,就能遇到好多同样掉坑的难友。因为wp主题修改过程中发现后台设置是必不可少的,于是想先熟悉一下typecho的后台设置页的编写。

typecho默认主题中的输入框实现

在typecho的主题functions.php文件中,用了这么一段程序来实现一个文本框,如果在文本框中输入一个图片地址,主题会在站点名称之前显示这张图片;

function themeConfig($form) {
    $logoUrl = new Typecho_Widget_Helper_Form_Element_Text('logoUrl', NULL, NULL,_t('我是一个标题'), _t('我是一个简单的说明'));
    $form->addInput($logoUrl);
} 

可以看到Typecho_Widget_Helper_Form_Element_Text这个类支持5个参数:

  • $name 表单输入项名称
  • $options 选择项
  • $value 表单默认值
  • $label 表单标题
  • $description 表单描述

由于typecho为后台设置页面提供了多种表单,这些表单都是对Typecho_Widget_Helper_Form_Element这个类的继承,而上述的这些参数,都是在Typecho_Widget_Helper_Form_Element类中预订义的,不同的表单元素需要不同的参数,对于输入框这个元素,选择项与表单默认值得是不需要提供的,所以这里直接填写为"NULL"就好;

以下是Typecho_Widget_Helper_Form_Element的部分代码:

/*=================
构造函数
@access public
@param string $name 表单输入项名称
@param array $options 选择项
@param mixed $value 表单默认值
@param string $label 表单标题
@param string $description 表单描述
@return void
=================*/
public function __construct($name = NULL, array $options = NULL, $value = NULL, $label = NULL, $description = NULL)
{
    / 创建html元素,并设置class /
    parent::__construct('ul', array('class' => 'typecho-option', 'id' => 'typecho-option-item-' . $name . '-' . self::$uniqueId));
    $this->name = $name;
    self::$uniqueId ++;

    / 运行自定义初始函数 /
    $this->init();

    / 初始化表单标题 /
    if (NULL !== $label) {
        $this->label($label);
    }

    / 初始化表单项 /
    $this->input = $this->input($name, $options);

    / 初始化表单值 /
    if (NULL !== $value) {
        $this->value($value);
    }

    / 初始化表单描述 /
    if (NULL !== $description) {
        $this->description($description);
    }
}

下图Typecho_Widget_Helper_Form_Element的继承者们,他们都继承自Typecho_Widget_Helper_Form_Element这个类,也可以被用于后台设置页面的组建工作中:

写一个typecho后台设置页之文本框

这些文件所处的文件夹如下,有需要查询的亲,可以下载一个typecho的安装包,解压后自行查找:

\var\Typecho\Widget\Helper\Form\Element

跑题跑地有点远了,在functions.php文件中包含下面的语句之后(同前文,为查看方便复制于此):

function themeConfig($form) {
    $logoUrl = new Typecho_Widget_Helper_Form_Element_Text('logoUrl', NULL, NULL,_t('我是一个标题'), _t('我是一个简单的说明'));
    $form->addInput($logoUrl);
} 

此时点击主题的设置外观按钮,设置页面呈现的表单应当如下所示;

写一个typecho后台设置页之文本框

这个输入框的值如何调用呢,在typecho的header.php文件中找到了如下语句,typecho会判断logoUrl的值是否为空,不为空则输出地址为logoUrl值的图片,为空则输出站点名称以及站点的说明,利用"logoUrl()"语句可以提取这个输入框的值,这个函数名怎么来的呢,其实就是前文中5个参数的第一个;

    <?php if ($this->options->logoUrl): ?>
    <a id="logo" href="<?php $this->options->siteUrl(); ?>">
        <img src="<?php $this->options->logoUrl() ?>" alt="<?php $this->options->title() ?>" />
    </a>
    <?php else: ?>
    <a id="logo" href="<?php $this->options->siteUrl(); ?>"><?php $this->options->title() ?></a>
    <p class="description"><?php $this->options->description() ?></p>
<?php endif; ?>

在输入框中填入虾比比站点logo看一下效果:

https://www.biib.top/wp-content/themes/twentyten/icons/logo.png

在默认主题中,图片显示如下。

写一个typecho后台设置页之文本框

标签: typecho

移动端可扫我直达哦~

推荐阅读

thumbnail 2025-06-08

typecho前台ajax登录与错误处理

尝试了在主题前台做一个登录框,登陆的功能是实现了,有一个小小的不便,就是如果输错了密码,因为页面又跳回了首页,所以弹出式登录框又被隐藏了,登录成功与否不够明显,二次登录的场合操作也较繁琐,所以想实现前台以ajax的方式登录。实现aja...

建站相关 typecho

thumbnail 2025-06-08

聊聊html里的head部分

HTML文档的<head>部分是一个容器,用于包含文档的元数据(metadata)和链接到外部资源的信息,这些内容不会直接显示在网页上,但对网页的功能和表现至关重要。主要元素和功能1. 基础元素<title>:...

建站相关 typecho

thumbnail 2025-06-04

typecho前端实现站点语言的切换

前端修改的数据能及时反馈到后端,那当然需要一个前后端都可以无障碍读取的东西,所以最初是想要用localstorage,但发现php无法直接读取其值,所以就换成了cookie。前端通过js来设置参数值:document.cookie='...

建站相关 typecho

thumbnail 2025-06-02

typecho 主题中的模板与模块的概念

模板是 typecho 主题中一个重要的概念,我们说过typecho的极简主题可以只存在 index.php 这一个文件,但需要展现分类页的时候,typecho事实上会先去寻找名为 category.php 的分类页模板,文章页当然也...

建站相关 typecho

thumbnail 2025-06-02

typecho的几种常见的文章列表调用

处理好了header与面包屑,接下来就按照自己的需求自由发挥了,先放一个分类列表,再挑出一个喜欢的标签,自定义一个该标签下内容展示模块。Typecho 提供了多种文章循环方式,以下是常用的几种方法:标准文章循环<?php whi...

建站相关 typecho

thumbnail 2025-06-02

在typecho里实现面包屑导航

什么是面包屑导航面包屑导航是一种网站导航方式,通常在网站顶部显示,大多会放在站点header的下方,用于显示用户当前位置。 面包屑导航由导航元素构成,每个元素代表一个网站导航项,各个元素通常包含对应链接,供用户跳转。面包屑导航示例首页...

建站相关 typecho

thumbnail 2025-05-29

关于typecho中的路由知识

路由(Routing)是博客系统中将URL地址映射到具体处理逻辑的机制,它决定了当用户访问某个网址时,系统应该执行什么操作、显示什么内容。typecho站点一般都会开启伪静态,伪静态通过URL重写将"漂亮"的URL映射到实际的文件路径...

建站相关 typecho

thumbnail 2025-05-29

Typecho 模板中的翻译函数 _t 与 _e

在 Typecho 模板开发中,_t 和 _e 是用于国际化处理的函数,核心区别在于输出方式:"_t" 函数‌‌功能‌:获取翻译后的字符串但不直接输出,需结合 echo 使用。‌示例‌:<?php echo _t('欢迎语');...

建站相关 typecho

thumbnail 2025-05-26

typecho文章自定义字段的删除与修改

涉及数据库的操作,务必请提前做好备份!提前做好备份!!做好备份!!!小鸟数据的当前主题的缩略图字段命名为augPostThumb,这几天在尝试完善一下原有主题,下载了原站的数据库导入了测试站用于测试页面效果,测试主题的缩略图相关字段拟...

建站相关 typecho

thumbnail 2025-05-26

typecho的文章自定义字段的知识笔记

在typecho中,除了可以自定义设置项之外,我们也可以给文章自定义一些额外的字段,比如给文章编辑界面添加一个缩略图选项,或者增加一个keywords输入框,用来修改编辑当前内容页的关键词信息。// 主题设置 function th...

建站相关 typecho