WordPress 以编程方式发布带有类别链接的侧边栏 - TypeScript

在 WordPress 上使用 TypeScript 编程可以使您更加高效和能够更快地构建出可维护的代码。在本篇文章中，我们将探讨如何使用 TypeScript 编写代码来发布带有类别链接的侧边栏。

1. 准备工作

在开始编写代码之前，我们需要确保我们已经安装了以下必要的软件和工具:

• Node.js
• TypeScript
• WordPress

2. 创建 WordPress 侧边栏

首先，我们需要在 WordPress 中创建一个自定义侧边栏。我们将在侧边栏中显示带有类别链接的列表。

打开 WordPress 后台管理界面，在左侧的导航栏中找到“外观”菜单，点击“小工具”。在小工具界面中，找到“自定义 HTML”小工具，将它拖入你想要添加的侧边栏中。

在“自定义 HTML”小工具的内容框中，输入以下 HTML 代码:

<ul>
  <?php
    $categories = get_categories();
    foreach ( $categories as $category ) {
      printf( '<li><a href="%1$s">%2$s</a></li>',
        get_category_link( $category->term_id ),
        $category->name
      );
    }
  ?>
</ul>

这段代码会输出一个链接列表，该列表包含了 WordPress 博客中的所有类别链接。

3. 编写 TypeScript 代码

现在，我们将使用 TypeScript 编写代码将这个链接列表添加到我们刚刚创建的自定义侧边栏中。

首先，我们需要使用 npm 来安装一些必要的依赖:

npm install @types/wordpress jquery

接下来，我们创建一个新的 TypeScript 文件:

import $ from 'jquery';

function createCategoryList(categories: any[]) {
  const list = $('<ul></ul>');
  categories.forEach(category => {
    const listItem = $('<li></li>');
    const link = $(`<a href="${category.link}">${category.name}</a>`);
    listItem.append(link);
    list.append(listItem);
  });
  return list;
}

function addCategoryListToSidebar(categories: any[]) {
  const sidebar = $('#sidebar');
  const categoryList = createCategoryList(categories);
  const widget = $('<div class="widget"></div>');
  const title = $('<h3 class="widget-title">Categories</h3>');
  widget.append(title);
  widget.append(categoryList);
  sidebar.append(widget);
}

$.getJSON('/wp-json/wp/v2/categories', categories => {
  addCategoryListToSidebar(categories);
});

在这段代码中，我们:

• 导入了 jquery，并使用它来构建我们的 HTML。
• 创建了 createCategoryList 函数，该函数接收一个包含类别对象的数组，并返回一个 ul 元素。
• 创建了 addCategoryListToSidebar 函数，该函数接收一个类别数组，并将其添加到 WordPress 侧边栏中。
• 通过使用 $.getJSON 函数获取 WordPress 中所有的类别，并调用 addCategoryListToSidebar 函数将类别列表加入到我们的自定义侧边栏中。

4. 结论

现在，我们已经成功地使用 TypeScript 编写了一个 WordPress 侧边栏，该侧边栏包含了带有类别链接的列表。我们可以通过阅读本文获取有关如何使用 TypeScript 构建 WordPress 网站的更多信息，让我们的 WordPress 开发更加便捷。