Title: DisplayKit &#8211; Page, Post &amp; Product Display Block
Author: Upluggit
Published: <strong>2026 年 4 月 26 日</strong>
Last modified: 2026 年 5 月 21 日

---

搜索插件

![](https://ps.w.org/displaykit/assets/banner-772x250.png?rev=3515830)

![](https://ps.w.org/displaykit/assets/icon.svg?rev=3527093)

# DisplayKit – Page, Post & Product Display Block

 作者：[Upluggit](https://profiles.wordpress.org/upluggit/)

[下载](https://downloads.wordpress.org/plugin/displaykit.1.1.0.zip)

 * [详情](https://cn.wordpress.org/plugins/displaykit/#description)
 * [评价](https://cn.wordpress.org/plugins/displaykit/#reviews)
 *  [安装](https://cn.wordpress.org/plugins/displaykit/#installation)
 * [开发进展](https://cn.wordpress.org/plugins/displaykit/#developers)

 [支持](https://wordpress.org/support/plugin/displaykit/)

## 描述

DisplayKit allows WordPress users to display content from any post type — including
pages, posts, and WooCommerce products — with powerful layout and styling options,
all without writing a single line of code.

#### Key Features

 * **Any Content Type** — Display Posts, Pages, WooCommerce Products, or any registered
   Custom Post Type.
 * **Specific Item Selection** — Hand-pick individual posts or products to showcase
   by searching and selecting them in the editor.
 * **Multiple Layouts** — Grid (1–6 columns) and List layouts with customizable 
   card dimensions, alignment, and responsive breakpoints.
 * **WooCommerce Integration** — Product price, sale badges, star ratings, stock
   status, and Add to Cart buttons are displayed automatically when showcasing products.
 * **Post Card Customization** — Toggle featured images, titles, excerpts, author/
   date meta, and read-more buttons. Control image aspect ratios, typography, colors,
   spacing, and border radius.
 * **Open in New Tab** — Optionally open all card links in a new browser tab.
 * **Performance Optimized** — Skeleton loading states, lazy-loaded images, and 
   smooth CSS transitions ensure great Core Web Vitals scores.
 * **Mobile-First Design** — Layouts adapt beautifully to any screen size with responsive
   breakpoints.
 * **Security** — All inputs are sanitized and outputs are properly escaped.

#### Editor Experience

Settings are organized into intuitive panels in the block sidebar:

 * **Query Panel** — Post type, taxonomy, terms, author, order, count, specific 
   posts/products selection
 * **Layout Panel** — Grid/List, columns, gaps, card dimensions, alignment
 * **Display Panel** — Toggle post card elements, open in new tab, image aspect 
   ratio
 * **WooCommerce Panel** — Price, rating, sale badge, add to cart controls (appears
   when product post type is selected)
 * **Style Panel** — Colors, typography, spacing, border radius

#### Third-Party Services

This plugin does not connect to any third-party or external services. All data is
queried and rendered locally from your WordPress installation using the WordPress
REST API.

## 屏幕截图

 * [[
 * DisplayKit block in the Gutenberg Block editor.
 * [[
 * Grid layout with customizable card dimensions and alignment.
 * [[
 * List layout with customizable card dimensions and alignment.

## 区块

该插件提供了 1 个区块.

 *   DisplayKit – Page, Post & Product Display Block A flexible block for displaying
   pages, posts, and WooCommerce products with multiple layouts, rich customization,
   and dynamic querying.

## 安装

 1. Upload the plugin files to the `/wp-content/plugins/displaykit` directory, or install
    the plugin through the WordPress plugins screen directly.
 2. Activate the plugin through the ‘Plugins’ screen in WordPress.
 3. In the block editor, search for “DisplayKit” and add it to your page.

## 常见问题

### Does it work with Custom Post Types?

Yes! The block dynamically fetches all public post types registered on your site.

### Does it work with WooCommerce?

Yes! Select the “Products” post type and DisplayKit will automatically show product-
specific information like price, ratings, sale badges, and an Add to Cart button.
WooCommerce must be installed and activated separately.

### Can I sort products by price, popularity, or rating?

Yes! When the Products post type is selected with WooCommerce active, additional“
Order By” options appear: Price, Popularity, Rating, etc.

### Can I display specific posts or products?

Yes! Use the “Specific Posts/Products” control in the Query panel to search and 
hand-pick individual items to display.

### What are the minimum requirements?

WordPress 6.2 or higher and PHP 7.4 or higher. For WooCommerce product features,
WooCommerce must be installed and active.

## 评价

此插件暂无评价。

## 贡献者及开发者

「DisplayKit – Page, Post & Product Display Block」是开源软件。 以下人员对此插件
做出了贡献。

贡献者

 *   [ Upluggit ](https://profiles.wordpress.org/upluggit/)

[帮助将「DisplayKit – Page, Post & Product Display Block」翻译成简体中文。](https://translate.wordpress.org/projects/wp-plugins/displaykit)

### 对开发感兴趣吗?

您可以[浏览代码](https://plugins.trac.wordpress.org/browser/displaykit/)，查看[SVN仓库](https://plugins.svn.wordpress.org/displaykit/)，
或通过[RSS](https://plugins.trac.wordpress.org/log/displaykit/?limit=100&mode=stop_on_copy&format=rss)
订阅[开发日志](https://plugins.trac.wordpress.org/log/displaykit/)。

## 更新日志

#### 1.0.0

 * Initial release with page/post/product display, multiple layouts, WooCommerce
   integration, and rich customization.

## 额外信息

 *  版本 **1.1.0**
 *  最后更新：**1 周前**
 *  活跃安装数量 **不到10**
 *  WordPress 版本 ** 6.2 或更高版本 **
 *  已测试的最高版本为 **7.0**
 *  PHP 版本 ** 7.4 或更高版本 **
 *  语言
 * [English (US)](https://wordpress.org/plugins/displaykit/)
 * 标签
 * [Gutenberg block](https://cn.wordpress.org/plugins/tags/gutenberg-block/)[post grid](https://cn.wordpress.org/plugins/tags/post-grid/)
   [post list](https://cn.wordpress.org/plugins/tags/post-list/)[product display](https://cn.wordpress.org/plugins/tags/product-display/)
   [woocommerce](https://cn.wordpress.org/plugins/tags/woocommerce/)
 *  [高级视图](https://cn.wordpress.org/plugins/displaykit/advanced/)

## 评级

尚未提交反馈。

[Your review](https://wordpress.org/support/plugin/displaykit/reviews/#new-post)

[查看全部评论](https://wordpress.org/support/plugin/displaykit/reviews/)

## 贡献者

 *   [ Upluggit ](https://profiles.wordpress.org/upluggit/)

## 支持

有话要说吗？是否需要帮助？

 [查看支持论坛](https://wordpress.org/support/plugin/displaykit/)

## 捐助

您愿意支持这个插件的发展吗?

 [ 捐助此插件 ](https://upluggit.com/)