mTab联动wordpress onenav主题导航标签库，助力导航站提高用户体验

项目简介

mTab : 免费无广告的组件式浏览器主页，官网地址（https://www.mtab.cc/）

onenav主题导航网址:

问题现状

mTab标签库需要在后台手动配置，耗费时间长且繁琐，如果你本身拥有一个导航数据，是不是可以复用？
后端配置栏：

前端展示样式：

解决思路

启动mTab页，打开F12

可以看到调起后台接口如下：

• LinkStore/getFolder：获取栏目

  1. 请求方法： get
  2. 返回数据结构：

  	{
      "msg": "ok",
      "code": 1,
      "data": [
          {
              "id": 2,  // 栏目id
              "name": "ai-tab.cn",  // 栏目标题
              "sort": 14,      // 栏目排序
              "group_ids": [   // 栏目组
                  0
              ]
          }
      ]
  }
  

• LinkStore/list: 获取标签列表

  1. 请求方法： post
  2. 请求参数

3. 返回数据结构：

{
    "msg": "ok",
    "code": 1,
    "data": {
        "total": 88,  //数据总量
        "per_page": 60, // 当前页面数量
        "current_page": 1, // 当前页
        "last_page": 2, // 后一页
        "data": [
            {
                "id": 179,  // 标签id
                "name": "ai-tab.cn",  // 标签名称
                "src": "\/images\/2025\/02\/12\/ai-tab.png", // 标签图片地址
                "url": "https:\/\/siteproxy.ruqli.workers.dev:443\/https\/ai-tab.cn\/",  // 标签地址
                "type": "icon",
                "size": "1x1",
                "create_time": "2025-02-11 23:49:07",
                "hot": 10,
                "area": "23,2,5,3",
                "tips": "AI工具箱网", // 标签提示信息
                "domain": "ai-tab.cn", // 标签domain
                "app": 1,   // 是否网页
                "install_num": 10291,
                "bgColor": "rgba(0,0,0,0)",
                "custom": {
                    "immersion": 0,
                    "width": 1200,
                    "height": 700,
                    "controllerColor": "#ffffff",
                    "maximize": 1,
                    "minimization": 1,
                    "resize": 1,
                    "userEdit": 0
                },
                "vip": 0,
                "status": 1,
                "group_ids": [
                    0
                ]
            }
        ]
    }
}

分析wordpress表结构

• wp_commentmeta： 存储评论的元数据，包括评论的键值对数据，用于扩展评论的信息。
• wp_comments： 存储网站上的所有评论，包括评论的作者、内容、时间等信息。
• wp_links： 存储友情链接（Blogroll）的信息，包括链接的URL、标题、描述等。
• wp_options： 存储WordPress系统选项和插件、主题的配置信息。这是一个非常重要的表，用于存储全局配置数据。
• wp_postmeta： 存储文章、页面、上传文件和修订版本的元数据，允许您为这些内容添加自定义信息。
• wp_posts： 存储文章、页面、上传文件和修订版本的内容，包括标题、正文、作者等。
• wp_terms： 存储每个分类和标签的信息，用于组织和分类内容。
• wp_term_relationships： 存储文章、链接和对应分类的关系信息，将内容与分类关联起来。
• wp_term_taxonomy： 存储每个分类和标签所对应的分类方法，例如文章分类或链接分类。
• wp_usermeta： 存储用户的元数据，允许您为用户添加自定义信息，如社交媒体链接、个性化设置等。
• wp_users： 存储用户的基本信息，包括用户名、密码、电子邮件地址等。

修改 mTab php文件：

mTab采用thinkphp框架，目录结构可以查看，对php开发感兴趣也可以看看 ThinkPHP官方手册

app->model目录新增俩个模型文件
命名： LinkFolderType.php

<?php

namespace app\model;


class LinkFolderType
{
    public $id;
    public $name;

    public function __construct($id, $name){
        $this ->id = $id;
        $this -> name = $name;
    }

}

命名： LinkType.php

<?php

namespace app\model;

use Cassandra\Time;

class LinkType
{
    public $id;
    public $name;
    public $src;
    public $url;
    public $type = 'icon';
    public $size = "1x1";
    public $create_time;
    public $hot = 0;
    public $area = 0;
    public $tips;
    public $domain;
    public $app = 0;
    public $install_num;
    public $bgColor;
    public $vip = 0;
    public $custom;
    public $group_ids = array(0);

    public function __construct($id, $name, $src, $url, $tips)
    {
        $this->id = $id;
        $this->name = $name;
        $this->src = $src;
        $this->url = $url;
        $this->tips = $tips;
    }
}

调整 app-> controller->LinkStore.php
更改list方法

public function list(): \think\response\Json
    {

        $limit = $this->request->post('limit', 12);
        $name = $this->request->post('name', false);
        $area = $this->request->post('area', false);
        if ($area == 0) {
            $area = 601;
        }
        $list= null;
        if ($name) {
            $list = Db::query("select a.id,a.post_title,
                           MAX(CASE WHEN b.meta_key = '_thumbnail' THEN b.meta_value END)      AS thumbnail_url, -- _thumbnail对应的图片URL
                           MAX(CASE WHEN b.meta_key = '_sites_link' THEN b.meta_value END)     AS sites_link,
                           MAX(CASE WHEN b.meta_key = '_sites_sescribe' THEN b.meta_value END) AS sites_sescribe
                      from wp_posts a
                      LEFT JOIN
                           wp_postmeta b ON a.id = b.post_id -- 关联文章ID
                            AND b.meta_key IN ('_thumbnail', '_sites_link', '_sites_sescribe')
                                            where a.post_type = 'sites'
                            and a.post_status = 'publish'
                            and a.post_title like '%$name%'
                GROUP BY a.id");
        } else {
            $query_sql = "select a.id,a.post_title,
                           MAX(CASE WHEN b.meta_key = '_thumbnail' THEN b.meta_value END)      AS thumbnail_url, -- _thumbnail对应的图片URL
                           MAX(CASE WHEN b.meta_key = '_sites_link' THEN b.meta_value END)     AS sites_link,
                           MAX(CASE WHEN b.meta_key = '_sites_sescribe' THEN b.meta_value END) AS sites_sescribe
                      from wp_posts a
                      LEFT JOIN
                           wp_postmeta b ON a.id = b.post_id -- 关联文章ID
                            AND b.meta_key IN ('_thumbnail', '_sites_link', '_sites_sescribe')
                                            where a.post_type = 'sites'
                            and a.post_status = 'publish'
                            and a.id in (select object_id
                                   from wp_term_relationships
                                   where term_taxonomy_id = :area)
                GROUP BY a.id";
            $list = Db::query($query_sql, [
                'area' => $area
            ]);
        }

        $array = [];
        //  public function __construct($id, $name, $src, $url, $tips)
        foreach ($list as $item) {
            array_push($array, new LinkType($item['id'], $item['post_title'], $item['thumbnail_url'], $item['sites_link'], $item['sites_sescribe']));
        }

        $paginateData = [
            'current_page' => 1,
            'last_page' => 50,
            'per_page' => 60,
            'total' => 30,
            'data' => $array
        ];
        return $this->success('ok', $paginateData);
    }

更改getFolder方法

 function getFolder(): \think\response\Json
    {
        $query = Db::query("select *
            from wp_terms
            where term_id in (select term_taxonomy_id from wp_term_taxonomy where taxonomy = 'favorites'  and count > 0 ) order by term_id
            ");

        $array = [];
        foreach ($query as $item) {
            array_push($array, new LinkFolderType($item['term_id'], $item['name']));
        }
        return $this->success('ok', $array);
    }

效果如下：

在线添加库为自身导航站数据

支持搜索筛选

主页搜索框优先展示用户已添加的标签按钮

问题汇总

1. 预防共存数据库，导致数据混乱

• 采用mysql主从分库，可以参考 centos下配置mysql主从同步
• 可将wordpress “wp_posts” ，“wp_term_taxonomy”，“wp_terms”，“wp_postmeta”，“wp_term_relationships” 表数据导出到mTab数据库下， 此处wordpress表前缀为“wp”,需要更改为你自己的表前缀

2. 直接读取数据库，如果用户访问多，需调整，待后续更新

3. sql查询未使用thinkPHP格式，为原始查询语句，待后续更新

4. 标签库查询未分页，待后续更新

更多AI相关资讯，产品，请访问AI工具箱网 , 可申请友链