一般：简码

[Jannah]

1. 简码简介

当一个短代码被插入到WordPress的文章或页面中时，它会被替换为其他内容。换句话说，我们指示WordPress找到方括号中的宏，并将其替换为由PHP函数生成的适当的动态内容。

2. 启用Jannah短代码

为了让快捷代码发挥作用，你应该免费安装主题附带的Jannah扩展插件。这是必需的。

IMG_20240424_081922.png

转到Jannah > Install Plugins > Jannah Extensions 插件，然后单击激活。

3. Jannah短代码

Jannah提供了各种各样的快捷代码，您在编辑过程中总是需要它们。
安装Jannah Extensions插件后，TieLabs的短代码图标将显示如下：

3.1 区块编辑器（Gutenberg）：

通过添加经典编辑器块，可以在新的块编辑器中使用Jannah-Shortcode

file-MrmQ4FJnXt.png

file-XXk3CY3Amt.png

3.2 经典编辑器

file-fhMNA78XXe.jpg

我们将详细介绍这些简码的作用。

4. 简码概述

4.1 Box框
单击短代码菜单中的框，将出现弹出窗口

IMG_20240424_082645.png

1. Style-框样式，从（阴影、信息、成功、警告、错误、下载和注释）中选择一个。
2. Alignment-框对齐左、右或居中。
3. Custom Class-如果你想通过CSS进行更多的自定义，你可以添加一个自定义类并在你的CSS文件中使用它。
4. Width-框的宽度，将单位添加到值中，例如500px或50%。
5. Content-框内容，您的文本将显示在此处。
6. 完成后，单击OK按钮将快捷代码添加到页面内容中。

Box预览：https://jannah.tielabs.com/demo/shortcodes#boxes-shortcodes

4.2 Button按钮
单击快捷代码菜单中的Button，弹出窗口将出现

IMG_20240424_083138.png

1. Color-按钮的颜色，从可用的颜色中选择一种。
2. Size-小、中或大。
3. Link-将指向它的按钮链接。
4. Text-按钮文本。
5. Icon (use full Font Awesome name)-如“fa fa home”，字体真棒Cheatsheet
6. 在新窗口/选项卡中打开链接，或在同一选项卡中打开。
7. Nofollow-“Nofollow”为网站管理员提供了一种告诉搜索引擎“不要关注这个特定的链接”的方式。这对不受信任的内容、付费链接和爬网优先级很重要。
8. 完成后，单击OK按钮将按钮快捷代码添加到页面内容中。

Button预览：https://jannah.tielabs.com/demo/shortcodes#buttons-shortcodes

4.3 Tab选项卡
单击快捷代码菜单中的Tab，弹出窗口将出现

IMG_20240424_083551.png

选择选项卡样式，水平或垂直，然后单击OK按钮添加快捷代码，选项卡快捷代码将如下所示：

IMG_20240424_083708.png

将Tab x Title替换为自定义标题，将Tab x | Your Content替换为选项卡内容。

Tab预览：https://jannah.tielabs.com/demo/shortcodes#tabs-shortcodes

4.4 Toggle Box切换框
单击快捷代码菜单中的Toggle Box，弹出窗口将出现

IMG_20240424_084816.png

1. Title-切换框标题。
2. State-默认的切换框状态（打开或关闭）。
3. Content-切换框内容。
4. 完成后，单击OK按钮。

IMG_20240424_085046.png

Toggle Box预览：https://jannah.tielabs.com/demo/shortcodes#toggle-shortcodes

4.5 Content Slideshow内容幻灯片
将光标指针定位在页面内容的任何位置，然后单击快捷方式菜单中的Content Slideshow

IMG_20240424_085218.png

内容幻灯片快捷代码将添加到光标指针的位置

IMG_20240424_085403.png

将内容放在每张幻灯片中，而不是Slide x | Your Content放在[tie_slide] Slide 1 | Your Content [/tie_slide].。

默认情况下，我们为您添加三张幻灯片，您可以通过复制并粘贴每张幻灯片下面的幻灯片代码 [tie_slide] Slide 1 | Your Content [/tie_slide]. 来添加更多幻灯片。此外，您可以放置任何您想要的内容，文本、图像或视频。

Content Slideshow预览：https://jannah.tielabs.com/demo/shortcodes#content-slideshow-shortcodes

4.6 Author Bio作者简介
单击简码菜单中的Author Box，将出现弹出窗口

IMG_20240424_090230.png

1. Title - 作者简介框标题（最常见的是作者姓名）。
2. Author Image URL作者图像 URL - 完整的作者图像 URL。
3. Content - 作者简介内容。
4. 完成后，单击OK按钮将作者简介简码添加到页面内容中。

Author Bio预览：https://jannah.tielabs.com/demo/shortcodes#author-bio-shortcodes

4.7 Flickr
单击短代码菜单中的 Flickr，将出现弹出窗口

IMG_20240424_090557.png

1. Account-ID - 帐户 ID，可以从 http//idgettr.com 获取。
2. Number of Photos - 要显示的照片数量。
3. Sorting - 按最近或随机对照片进行排序。
4. 完成后，单击OK按钮将Flickr短代码添加到页面内容中。

Flickr预览：https://jannah.tielabs.com/demo/shortcodes#flickr-shortcodes

4.8 Display Feeds
单击短代码菜单中的Display Feeds，将出现弹出窗口

IMG_20240424_090820.png

1. Feed地址。
2. 要显示的 Feed 数量。
3. 完成后，单击OK按钮将 Feeds 简码添加到页面内容中。

Display Feeds预览：https://jannah.tielabs.com/demo/shortcodes#feeds-shortcodes

4.9 Tooltip工具提示
单击短代码菜单中的Tooltip，将出现弹出窗口

IMG_20240424_091108.png

1. Title - 将鼠标悬停在其上以显示工具提示的文本。
2. Content - 将鼠标悬停在工具提示标题上时将显示在工具提示气泡中的文本。
3. Direction - 工具提示方向，显示在标题的顶部、底部、右侧或左侧。
4. 完成后，单击OK按钮将工具提示简码添加到页面内容中。

Tooltip预览：https://jannah.tielabs.com/demo/shortcodes#tooltip-shortcodes

4.10 Share Buttons分享按钮
单击短代码菜单中的共享按钮，将出现弹出窗口

IMG_20240425_080645.png

1. 选中要显示的按钮。
2. Twitter Follow Button - 显示/隐藏 Twitter 关注按钮。
3. Twitter Username - 由 Twitter 关注按钮使用。此外，将显示以下按钮。
4. 完成后，单击OK按钮将简码添加到页面内容中。

4.11 Dropcap首字下沉

IMG_20240425_081107.png

选择首字母下沉字符，然后从快捷方式菜单中单击Dropcap，Dropcap将按如下方式添加：

IMG_20240425_081620.png

Dropcap预览：https://jannah.tielabs.com/demo/shortcodes#dropcap-shortcodes

4.12 Tags Cloud标签云

IMG_20240425_081754.png

1. 找到光标指针。
2. 单击短代码菜单中的 Tags Cloud，将添加 Tags Cloud 短代码，如下所示

IMG_20240425_082915.png

Tags Cloud预览：https://jannah.tielabs.com/demo/shortcodes#tags-cloud-shortcodes

4.13 Highlight Text高亮显示文本
将光标指针定位在要添加高亮显示的文本的位置，然后单击快捷方式菜单中的Highlight Text，将出现弹出窗口

IMG_20240425_083204.png

1. Color-选择高亮显示的颜色。
2. Text-将采用高亮显示颜色的文本。
   完成后，单击OK按钮将快捷代码添加到页面内容中。

Highlight Text预览：https://jannah.tielabs.com/demo/shortcodes#highlight-text-shortcodes

4.14 Padding填充
如果你想对一些内容段落进行填充，你可以这样做。可以控制填充左/右值。
单击快捷代码菜单中的Padding，将出现弹出窗口

IMG_20240425_084358.png

1. 填充左边的量，你可以指定一个CSS测量单位的量。
2. 填充右边的量。
3. 完成后，单击OK按钮将快捷代码添加到页面内容中。

Padding预览：https://jannah.tielabs.com/demo/shortcodes#padding-shortcodes

4.15 Divider Line分割线
单击短代码菜单中的Divider Line，将出现弹出窗口

IMG_20240425_124620.png

• 1Style - 选择分隔线的样式、实线、虚线、正常、双精度或虚线。
• Margin Top/Bottom - 线上方/下方的边距空间。
• 完成后，单击OK按钮将简码添加到页面内容中。

Divider Line预览：https://jannah.tielabs.com/demo/shortcodes#divider-line-shortcodes

4.16 Lists列表

IMG_20240425_124827.png

将光标指针定位在要添加列表的位置，从短代码菜单中选择Lists→选择列表类型，列表短代码将添加如下：

IMG_20240425_124926.png

在开始和结束简码标记之间留出更多空间，如下所示：

IMG_20240425_125022.png

然后单击项目符号列表

IMG_20240425_125106.png

然后添加菜单项：

IMG_20240425_125134.png

Lists预览：https://jannah.tielabs.com/demo/shortcodes#Lists-shortcodes

4.17 Restrict Content内容限制

IMG_20240425_125330.png

选择要限制已注册或仅供访客使用的内容，从短代码菜单中选择Restrict Content→选择Registered已注册或Gusts访客，短代码将添加到您选择的内容周围，如下所示：

IMG_20240425_125516.png

现在，Register on our site to get our new updates这一行文字将仅显示给游客。此外，您可以仅对注册用户限制某些内容。

4.18 Columns
单击短代码菜单中的Columns并选择所需的布局，Jannah 提供 9 列布局。

IMG_20240425_125747.png

单击所需的布局后，简码将添加到光标指针引用的位置，如下所示：

IMG_20240425_125838.png

然后在每列中添加您的内容，而不是在此处添加内容语句。

Columns预览：https://jannah.tielabs.com/demo/shortcodes#columns-shortcodes

4.19 Google Maps谷歌地图
将光标指针定位在要添加地图的位置，单击短代码菜单中的Google Maps，将出现弹出窗口

IMG_20240425_130043.png

输入 Google 地图网址。

Google Maps预览：https://jannah.tielabs.com/demo/shortcodes#google-maps-shortcodes

4.20 Video视频
单击短代码菜单中的Video，将出现弹出窗口

IMG_20240425_130245.png

1. Video URL - 完整的视频网址。
2. Video width - 视频宽度。
3. Video height - 视频高度。
4. 完成后，单击OK按钮将简码添加到页面内容中。

Video预览：https://jannah.tielabs.com/demo/shortcodes#video-shortcodes

4.21 Audio音频
单击短代码菜单中的Audio，将出现弹出窗口

IMG_20240425_130434.png

在光标指针所指的位置输入 MP3 或 M4A 或 OGG 文件。

Audio预览：https://jannah.tielabs.com/demo/shortcodes#audio-shortcodes

4.22 Lightbox灯箱
单击短代码菜单中的Lightbox，将出现弹出窗口

IMG_20240425_130723.png

1. Full Image or Youtube/Vimeo Video URL - 完整图片或 Youtube/Vimeo 视频 URL。
2. Title - 将出现在打开的灯箱模型的底部。
3. Content - 链接文本，单击它时将打开灯箱。
   完成后，单击OK按钮将简码添加到页面内容中。

IMG_20240425_130946.jpg

4.23 Quote引用
单击短代码菜单中的Quote，将出现弹出窗口

IMG_20240425_131109.png

• Content - 引用内容。
• Alignment - 引号对齐方式，左对齐、右对齐或居中对齐。
• Author - 引文作者，将出现在引文的底部。
• Style - 引用样式，深色、浅色或简单。

Quote预览：https://jannah.tielabs.com/demo/shortcodes#quote-shortcodes

4.24 Login Form登录表单
单击短代码菜单中的Login Form，登录简码将添加如下图所示

IMG_20240425_131336.png

Login Form预览：https://jannah.tielabs.com/demo/shortcodes#login-form-shortcodes

4.25 Fullwidth Image全宽图像
单击短代码菜单中的Fullwidth Image，全宽图像简码将添加如下内容

IMG_20240425_131639.png

然后将光标指针放在开始标记 [tie_full_img] 之后，然后单击“添加媒体”按钮上传图像，上传新图像或从现有图像中选择一个。

IMG_20240425_131725.jpg

Fullwidth Image预览：https://jannah.tielabs.com/demo/shortcodes#fullwidth-image-shortcodes

4.26 内容索引

内容索引可在论坛查看相关主题