Title: Material Design for WordPress
Author: XWP
Published: <strong>2021 年 2 月 11 日</strong>
Last modified: 2022 年 12 月 12 日

---

搜尋外掛

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

這個外掛**並未在最新的 3 個 WordPress 主要版本上進行測試**。開發者可能不再對這個
外掛進行維護或提供技術支援，並可能會與更新版本的 WordPress 產生使用上的相容性問題。

![](https://ps.w.org/material-design/assets/icon-256x256.png?rev=2516506)

# Material Design for WordPress

 由 [XWP](https://profiles.wordpress.org/xwp/) 開發

[下載](https://downloads.wordpress.org/plugin/material-design.0.7.0.zip)

 * [詳細資料](https://tw.wordpress.org/plugins/material-design/#description)
 * [使用者評論](https://tw.wordpress.org/plugins/material-design/#reviews)
 *  [安裝方式](https://tw.wordpress.org/plugins/material-design/#installation)
 * [開發資訊](https://tw.wordpress.org/plugins/material-design/#developers)

 [技術支援](https://wordpress.org/support/plugin/material-design/)

## 外掛說明

The official Material Design plugin for WordPress. Customize your site’s navigation,
colors, typography, and shapes, use Material Components, and choose from over 1,000
Google Fonts and Material Design icons. From the team behind Google’s open-source
design system.

It’s easy to get up and running with Material Design for WordPress:

### Install Material Theme & examples

The theme applies Material Design principles and Material Theming to your site, 
so you can customize its style. Example layouts include pages for home, about, projects,
blog, and contact.

### Customize your Theme

Set up and preview your global theme styles within the customizer. Choose colors,
typography, shapes, and icons to express your unique style.

### Build with Material Blocks

Add Material Components like buttons and cards, and create layouts for things like
image-heavy pages or styled contact forms. Customize the look of your blocks by 
adjusting global theme styles, or setting the style of a single component in the
block editor.

### Apply your Theme

Implement your colors, shapes, and typography for built-in WordPress elements like
your site’s header and footer.

### Contributors

Material Design is a design system created by Google and backed by open-source code
that helps teams build high-quality digital experiences.

 * [Google](https://profiles.wordpress.org/google/)
 * [Material Design](https://profiles.wordpress.org/materialdesign/)
 * [XWP](https://profiles.wordpress.org/xwp/)

## 螢幕擷圖

[⌊Start from our existing styles and use Material Theming to create a custom look
and feel. (Baseline)⌉⌊Start from our existing styles and use Material Theming to
create a custom look and feel. (Baseline)⌉[

Start from our existing styles and use Material Theming to create a custom look 
and feel. (Baseline)

[⌊Start from our existing styles and use Material Theming to create a custom look
and feel. (Crane)⌉⌊Start from our existing styles and use Material Theming to create
a custom look and feel. (Crane)⌉[

Start from our existing styles and use Material Theming to create a custom look 
and feel. (Crane)

[⌊Start from our existing styles and use Material Theming to create a custom look
and feel. (Fortnightly)⌉⌊Start from our existing styles and use Material Theming
to create a custom look and feel. (Fortnightly)⌉[

Start from our existing styles and use Material Theming to create a custom look 
and feel. (Fortnightly)

[⌊Start from our existing styles and use Material Theming to create a custom look
and feel. (Blossom)⌉⌊Start from our existing styles and use Material Theming to 
create a custom look and feel. (Blossom)⌉[

Start from our existing styles and use Material Theming to create a custom look 
and feel. (Blossom)

[⌊Choose from more than 1,000 typefaces in Google Fonts to set your headline and
body styles.⌉⌊Choose from more than 1,000 typefaces in Google Fonts to set your 
headline and body styles.⌉[

Choose from more than 1,000 typefaces in Google Fonts to set your headline and body
styles.

[⌊Material Icons are included with this plugin. Choose from Filled, Sharp, Rounded,
Outlined, or Two-Tone styles.⌉⌊Material Icons are included with this plugin. Choose
from Filled, Sharp, Rounded, Outlined, or Two-Tone styles.⌉[

Material Icons are included with this plugin. Choose from Filled, Sharp, Rounded,
Outlined, or Two-Tone styles.

[⌊Add Material Components like buttons and cards, and create layouts for things 
like image-heavy pages or styled contact forms.⌉⌊Add Material Components like buttons
and cards, and create layouts for things like image-heavy pages or styled contact
forms.⌉[

Add Material Components like buttons and cards, and create layouts for things like
image-heavy pages or styled contact forms.

[⌊Choose colors, typography, shapes, and icons to express your unique style.⌉⌊Choose
colors, typography, shapes, and icons to express your unique style.⌉[

Choose colors, typography, shapes, and icons to express your unique style.

## 適用於區塊編輯器

這個外掛提供 8 個可供區塊編輯器使用的區塊。

 *   Material Image Card for Query loop Material image card for query loop block
 *   Material Card for Query loop Material card for query loop block
 *   Material Design for WordPress
 *   Next Page Displays the next posts page link.
 *   Last Page Displays the last posts page link.
 *   Previous Page Displays the previous posts page link.
 *   Material Pagination Displays a paginated navigation to next/previous set of
   posts, when applicable.
 *   First Page Displays the first posts page link.

## 安裝方式

 1. Upload the folder to the `/wp-content/plugins/` directory.
 2. Activate the plugin through the ‘Plugins’ menu in WordPress.

## 常見問題集

Don’t see an answer to your question? Please search the support forum to see if 
it has already been discussed. Otherwise, please open a new support topic.

## 使用者評論

![](https://secure.gravatar.com/avatar/26d517fbda7ea3bf8197903646c7a87ae6a7258b94745ae4ddfde27470586a35?
s=60&d=retro&r=g)

### 󠀁[Buggy Disappointment](https://wordpress.org/support/topic/buggy-disappointment/)󠁿

 [Jupitercow](https://profiles.wordpress.org/jcow/) 2023 年 6 月 23 日

Using the buttons in the Gutenberg editor caused problems. The preview keeps breaking.
The cards are basically unusable, because they only allow very basic text without
any formatting. They show the markup for any html you try to use to add an image
or headline or bold… Cards look ok in the editor, but not on the front end. I tried
the theme as well, but not any better. I gave up there. I was really excited to 
use these, but had to uninstall.

![](https://secure.gravatar.com/avatar/9ace5a4e6a1fae98c8c2d5b4891d907911d1f0b72c289ab690bc43b7fdb0dc0b?
s=60&d=retro&r=g)

### 󠀁[Material design template and google stories](https://wordpress.org/support/topic/material-design-template-and-google-stories/)󠁿

 [materialmeme](https://profiles.wordpress.org/materialmeme/) 2022 年 8 月 17 日

If you want to design a website that looks and functions like an APP this is it.
BONUS > > Google Stories is programmed perfectly if you add the plug in. Material
properly creates professional looking PREVIEWS for facebook twitter pinterest etc.
Thanks to people like Steve Jobs that founded the concept of LIMITED options and
simple clean design, you can't lose with this template. The navigation is intuitive
and clean. Also it's fast which is the best thing for search…

![](https://secure.gravatar.com/avatar/e9b323bc5d7eef3b6b358e382f36aa4b01f196c7b2e7be7bf62a1b127a155560?
s=60&d=retro&r=g)

### 󠀁[what is Review look like?](https://wordpress.org/support/topic/what-is-review-look-like/)󠁿

 [F](https://profiles.wordpress.org/lifengquan52/) 2021 年 7 月 16 日

what is Review look like? I use that, but it don't have any different style in there
website, just look the rounded in there.don't have shaow apperance in there.

![](https://secure.gravatar.com/avatar/e9e4c1eb653b4dfc5ed17e9cce8ee170d0530e63c66c6503161f725cbc23257c?
s=60&d=retro&r=g)

### 󠀁[amazing !](https://wordpress.org/support/topic/amazing-3145/)󠁿

 [mahi7783](https://profiles.wordpress.org/mahi7783/) 2021 年 6 月 15 日

i was waiting for this long time. i love material design . thanks please bring new
features as soon as possible

![](https://secure.gravatar.com/avatar/0d42c017868478843922d89a97808ddb453f40d1adf873ca677d66fd117282d8?
s=60&d=retro&r=g)

### 󠀁[Incorporates Materials Design WELL!](https://wordpress.org/support/topic/incorporates-materials-design-well/)󠁿

 [l33b072](https://profiles.wordpress.org/l33b072/) 2021 年 6 月 1 日

This plugin is great! Thanks for making it available. Makes utilizing MDC super 
easy! I think the low marks are reflective of people that don't know or understand
the Material Design concept. Great work!

![](https://secure.gravatar.com/avatar/81fe5dd798a72299647d7123181416b9d70f79428549488c875e7be8f6629e4c?
s=60&d=retro&r=g)

### 󠀁[The world needed this](https://wordpress.org/support/topic/the-world-needed-this-2/)󠁿

 [Taig Mac Carthy](https://profiles.wordpress.org/taigmc/) 2021 年 2 月 22 日

Like so many SaaS businessess, my company markets a web application that has been
developed in ReactJS with Material-UI. However, our marketing-oriented website is
a WordPress site where the marketing people are capable of editing content and posting
stuff. The problem is: how do you maintain a coherent user experience across both
channels? Now, thanks to this template, it's not just possible, but also easy. I'm
working with the beta release and it's already awesome – I'm really looking forward
to future versions.

 [ 閱讀全部 7 則使用者評論 ](https://wordpress.org/support/plugin/material-design/reviews/)

## 參與者及開發者

以下人員參與了開源軟體〈Material Design for WordPress〉的開發相關工作。

參與者

 *   [ XWP ](https://profiles.wordpress.org/xwp/)
 *   [ Google ](https://profiles.wordpress.org/google/)
 *   [ Material Design ](https://profiles.wordpress.org/materialdesign/)

〈Material Design for WordPress〉外掛目前已有 1 個本地化語言版本。 感謝[全部譯者](https://translate.wordpress.org/projects/wp-plugins/material-design/contributors)
為這個外掛做出的貢獻。

[將〈Material Design for WordPress〉外掛本地化為台灣繁體中文版](https://translate.wordpress.org/projects/wp-plugins/material-design)

### 對開發相關資訊感興趣？

任何人均可[瀏覽程式碼](https://plugins.trac.wordpress.org/browser/material-design/)、
查看 [SVN 存放庫](https://plugins.svn.wordpress.org/material-design/)，或透過 [RSS](https://plugins.trac.wordpress.org/log/material-design/?limit=100&mode=stop_on_copy&format=rss)
訂閱[開發記錄](https://plugins.trac.wordpress.org/log/material-design/)。

## 變更記錄

For the plugin’s changelog, please see [the Releases page on GitHub](https://github.com/material-components/material-design-for-wordpress/releases).

## 中繼資料

 *  版本 **0.7.0**
 *  最後更新 **4 年前**
 *  啟用安裝數 **700+**
 *  WordPress 版本需求 ** 5.9 或更新版本 **
 *  已測試相容的 WordPress 版本 **6.0.15**
 *  語言
 * [English (US)](https://wordpress.org/plugins/material-design/) 及 [French (France)](https://fr.wordpress.org/plugins/material-design/).
 *  [將這個外掛本地化為你的母語版本](https://translate.wordpress.org/projects/wp-plugins/material-design)
 * 標籤:
 * [blocks](https://tw.wordpress.org/plugins/tags/blocks/)[google](https://tw.wordpress.org/plugins/tags/google/)
   [gutenberg](https://tw.wordpress.org/plugins/tags/gutenberg/)[material design](https://tw.wordpress.org/plugins/tags/material-design/)
 *  [進階檢視](https://tw.wordpress.org/plugins/material-design/advanced/)

## 評分

 4.1 星，滿分為 5 星

 *  [  5 個 5 星使用者評論     ](https://wordpress.org/support/plugin/material-design/reviews/?filter=5)
 *  [  0 個 4 星使用者評論     ](https://wordpress.org/support/plugin/material-design/reviews/?filter=4)
 *  [  2 個 3 星使用者評論     ](https://wordpress.org/support/plugin/material-design/reviews/?filter=3)
 *  [  1 個 2 星使用者評論     ](https://wordpress.org/support/plugin/material-design/reviews/?filter=2)
 *  [  0 個 1 星使用者評論     ](https://wordpress.org/support/plugin/material-design/reviews/?filter=1)

[撰寫評分](https://wordpress.org/support/plugin/material-design/reviews/#new-post)

[查看全部使用者評論](https://wordpress.org/support/plugin/material-design/reviews/)

## 參與者

 *   [ XWP ](https://profiles.wordpress.org/xwp/)
 *   [ Google ](https://profiles.wordpress.org/google/)
 *   [ Material Design ](https://profiles.wordpress.org/materialdesign/)

## 技術支援

使用者可在技術支援論壇提出意見反應或使用問題。

 [檢視技術支援論壇](https://wordpress.org/support/plugin/material-design/)