WordPress 使用教程:如何在 WordPress 中使用组件库建立丰富、强大、好看的主页?

分类
使用教程
关键词
WordPress
WordPress 是一个以 PHP 和 MySQL 为平台的自由开源的博客软件和内容管理系统。WordPress 以其强大、好用的特性,吸引了大量个人用户、组织使用 WordPress 构建其主页。
WordPress 官方和社区已经提供了大量的主题模版,以满足不同类型用户的个性化需求。
除此之外,用户还可以使用小组件对 WordPress 页面进化美化和装扮。组件世界/Widget Store 提供的小组件动态图标动态背景可以满足用户这一需求。

组件世界/Widget Store 介绍

组件世界/Widget Store:一个丰富、强大的嵌入式小组件库,支持 Notion 类产品、双链笔记类产品、GitHub 等代码托管平台、WordPress 等博客系统以及为知笔记等编辑器
notion image
「组件世界 Widget Store」 提供的服务包括:基础组件、动态图标、动态背景、可视化图表、Notion 汉化。其中,前三者均可运用于 WordPress.
notion image

基础小组件

notion image

动态图标

notion image

动态背景图

notion image

组件·使用方法

打开「组件世界 Widget Store」官网,浏览并选择小组件,随后在右上角点击「创建小组件
notion image
进入小组件配置设置颜色、背景、文字显示等,为小组件命名
notion image
点击右上角的「复制嵌入链接」,选择复制选择专门针对于 WordPress 的链接格式。目前,针对 WordPress 支持 和 两种用法。二选一即可。
notion image
打开 WordPress 编辑器,在 HTML 状态下,直接粘贴小组件链接至编辑器。
notion image

组件·使用效果

预览效果如下。可以发现,动态图标显示过大
notion image
对此,可以修改尺寸。比如,我删除原先链接中的 style="min-width:100px;width:320px;min-height:100px;height:320px">,替换为 width="40px" />
正常显示效果如下:
notion image
注释:小组件也可以嵌入至标题之中。如上图中的「教、程」二字即小组件。
最终使用效果
notion image
以上是对 WordPress 中小组件使用简单介绍。具体示范,可以参看 「组件世界 Widget Store」的博客·效率时代中的「使用教程:如何在 WordPress 中使用小组件?」
用户可以使用小组件建立一些 WordPress 博客主页,辅助展示自己的工作、特长、兴趣爱好等内容。

示范代码

小组件

<iframe src="https://cn.widgetstore.net/view/index.html?q=be7662ce6345671300af04a84030f947.4e51c63663637bb9000732412f30a684" style="width: 100%; height: 300px"></iframe>

动态图标

动态文字
<img src="https://swg.notion.pet/s/76fd7bc163579f710028d3ae248fb4fc" width="40px" /> <img src="https://swg.notion.pet/s/0bf1d87463579fa60023846b0d697f9b" width="40px" />
动态日历 & 手办日历
<img src="https://swg.notion.pet/s/6842667962f70a9d0de545882501a7da" width="40px" /> <img src="https://swg.notion.pet/s/6d85a2b962cff9b110796b3c2db7a806" width="40px" />
工具合辑
<img src="https://swg.notion.pet/s/28ad1a7463575250002051f0769f5e0e" width="30px" ></code> Alfred/Raycast 效率启动工具、TimePage 日历应用、Agenda轻量级日程管理、SideNote 便签、Roam Research 笔记软件、Notion/FlowUs 在线协作文档、Downie4 视频下载工具、Eagle 图片管理.
想法
<img src="https://swg.notion.pet/s/bf0fecc563578f5200281f52221572e1" width="30px" /> 如果有一个能随时记录大脑中不断涌出思绪的工具就好了!
影音娱乐
<img src="https://swg.notion.pet/s/ab3f0baf63578e4c002c164c5cb54325" width="30px" /> 梶浦由记 <img src="https://swg.notion.pet/s/80516fb663578dd2002cbc135bfcf57b" width="30px" /> 攻壳机动队;星际牛仔

动态背景

卡片胶囊倒计时
<img src="https://swg.notion.pet/s/bg-76fd7bc163574e290025da68708cd056" style="min-width:100px;width:750px;min-height:100px;height:300px">
基础时间进度条
<img src="https://swg.notion.pet/s/bg-ac74c002635750890021d86953fabfd9" style="min-width:100px;width:750px;min-height:100px;height:300px">
除了 WordPress 以外,「组件世界 Widget Store」还支持 Notion 类产品、双链笔记类产品、GitHub、为知笔记等多个平台。如果你正在使用上述工具,也可以使用小组件建立你的个人仪表盘。

使用案例

以下是一些小组件·使用示范。图中是以 FlowUs 为例。由于 WordPress 也支持嵌入小组件、动态图标、动态背景图,因此这些示例多数也可运用于至 WordPress. 仅供参考。
notion image
notion image
notion image
notion image
notion image
notion image
notion image

官网

检索关键词:组件世界/ Widget Store/ NotionPet 即可
注释:「组件世界
/Widget Store
notion image

参考文献

Built with Potion.so