Independent Development

Customized button CSS doesn’t take effect

Error

I used Tailwind CSS on my buttons in React plugin of WordPress. Most of them works well, but several of them cannot be changed. Normal, Hover, Pressed, all cannot be changed.

Solution

For some theme, the button (maybe something else too) style was predefined and hardly to be changed. The most likely reason is that the button is set for a form and has a param of type=submit.
Remove this, the styles will work fine.

New components’ short code didn’t work

Error

After a new page was developed (React plugin in WordPress), I created a new empty page in WordPress and wrote the short code like [my-new-component], but it didn’t work.

Solution

It is a quite simple mistake: I didn’t register the short code.

// PHP
function ShowNewComponent() {
    return '<div id="my_new_component"></div>';
}
add_shortcode( 'my-new-component', 'ShowNewComponent' );

A basic setting that I had totally forgotten.

Main Site(Under building)

Nonpareil Me

Related Platforms

(Github Issues) / (Notion) / (Blog)

Advertisement

(A website to optimize your resume and to boost your career: Nonpareil.me)

---

独立开发

自定义按钮样式不生效

问题

我在Wordpress中使用React定义插件，用Tailwind CSS定义按钮样式。多数按钮都是好的，不过有一两个，怎么设置都不成功。正常状态，鼠标悬停状态，按下状态，全都没效果。

解决方案

对于很多主题来说，按钮和其它的一些东西都有预定义的样式。对我的情况来说，是按钮上的type=submit属性，让主题的设置生效，无法自定义。
移除了就好了。

新编写的插件，无法通过短代码调用

问题

我用React Plugin的方式在Wordpress中编写了一个新的页面，然后在Wordpress中新建一个空白页面，写入短代码，不生效。

解决方案

根源很简单：我忘记注册短代码了。

// PHP
function ShowNewComponent() {
    return '<div id="my_new_component"></div>';
}
add_shortcode( 'my-new-component', 'ShowNewComponent' );

可以说是编写插件时最基本的流程之一，我完全忘记了。

主站（建设中）

[Nonpareil Me]{https://nonpareil.me}

相关平台

(Github Issues) / (Notion) / (Blog)

推广

(优化简历，助力职场：Nonpareil.me)