简码

[Jannah]

一、简码简介

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

二、启用Jannah短代码

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

IMG_20240424_081922.png (133.63 KiB) 查看 6645 次

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

三、Jannah短代码

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

1.区块编辑器（Gutenberg）：

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

file-MrmQ4FJnXt.png (145.05 KiB) 查看 6645 次

file-XXk3CY3Amt.png (75.51 KiB) 查看 6645 次

2.经典编辑器

file-fhMNA78XXe.jpg (116.68 KiB) 查看 6644 次

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

四、简码概述

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

IMG_20240424_082645.png (45.65 KiB) 查看 6644 次

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

Box预览：https://jannah.tielabs.com/demo/shortco ... shortcodes

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

IMG_20240424_083138.png (45.41 KiB) 查看 6643 次

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/shortco ... shortcodes

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

IMG_20240424_083551.png (25.93 KiB) 查看 6642 次

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

IMG_20240424_083708.png (126.38 KiB) 查看 6642 次

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

Tab预览：https://jannah.tielabs.com/demo/shortco ... shortcodes

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

IMG_20240424_084816.png (39.41 KiB) 查看 6640 次

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

IMG_20240424_085046.png (73.56 KiB) 查看 6640 次

Toggle Box预览：https://jannah.tielabs.com/demo/shortco ... shortcodes

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

IMG_20240424_085218.png (98.1 KiB) 查看 6640 次

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

IMG_20240424_085403.png (98.08 KiB) 查看 6640 次

将内容放在每张幻灯片中，而不是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/shortco ... shortcodes

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

IMG_20240424_090230.png (44.08 KiB) 查看 6639 次

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

Author Bio预览：https://jannah.tielabs.com/demo/shortco ... shortcodes

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

IMG_20240424_090557.png (52.38 KiB) 查看 6638 次

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

Flickr预览：https://jannah.tielabs.com/demo/shortco ... shortcodes

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

IMG_20240424_090820.png (35.15 KiB) 查看 6638 次

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

Display Feeds预览：https://jannah.tielabs.com/demo/shortco ... shortcodes

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

IMG_20240424_091108.png (42.84 KiB) 查看 6638 次

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

Tooltip预览：https://jannah.tielabs.com/demo/shortco ... shortcodes

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

IMG_20240425_080645.png (58.62 KiB) 查看 6636 次

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

Dropcap首字下沉

IMG_20240425_081107.png (134.18 KiB) 查看 6635 次

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

IMG_20240425_081620.png (23.08 KiB) 查看 6635 次

Dropcap预览：https://jannah.tielabs.com/demo/shortco ... shortcodes

Tags Cloud标签云

IMG_20240425_081754.png (97.27 KiB) 查看 6635 次

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

IMG_20240425_082915.png (18.43 KiB) 查看 6634 次

Tags Cloud：https://jannah.tielabs.com/demo/shortco ... ortcodes预览

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

IMG_20240425_083204.png (30.54 KiB) 查看 6633 次

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

Highlight Text预览：https://jannah.tielabs.com/demo/shortco ... shortcodes

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

IMG_20240425_084358.png (30.69 KiB) 查看 6632 次

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

Padding预览：https://jannah.tielabs.com/demo/shortco ... shortcodes

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

IMG_20240425_124620.png (34.28 KiB) 查看 6631 次

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

Divider Line预览：https://jannah.tielabs.com/demo/shortco ... shortcodes

Lists列表

IMG_20240425_124827.png (128.21 KiB) 查看 6631 次

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

IMG_20240425_124926.png (22.77 KiB) 查看 6631 次

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

IMG_20240425_125022.png (12.18 KiB) 查看 6631 次

然后单击项目符号列表

IMG_20240425_125106.png (51.45 KiB) 查看 6631 次

然后添加菜单项：

IMG_20240425_125134.png (9.89 KiB) 查看 6631 次

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

Restrict Content内容限制

IMG_20240425_125330.png (127 KiB) 查看 6630 次

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

IMG_20240425_125516.png (18.72 KiB) 查看 6630 次

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

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

IMG_20240425_125747.png (125.88 KiB) 查看 6630 次

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

IMG_20240425_125838.png (27.27 KiB) 查看 6630 次

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

Columns预览：https://jannah.tielabs.com/demo/shortco ... shortcodes

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

IMG_20240425_130043.png (29.63 KiB) 查看 6630 次

输入 Google 地图网址。

Google Maps预览：https://jannah.tielabs.com/demo/shortco ... shortcodes

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

IMG_20240425_130245.png (29.22 KiB) 查看 6629 次

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

Video预览：https://jannah.tielabs.com/demo/shortco ... shortcodes

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

IMG_20240425_130434.png (29.28 KiB) 查看 6628 次

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

Audio预览：https://jannah.tielabs.com/demo/shortco ... shortcodes

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

IMG_20240425_130723.png (48.86 KiB) 查看 6628 次

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

IMG_20240425_130946.jpg (209.96 KiB) 查看 6627 次

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

IMG_20240425_131109.png (44.02 KiB) 查看 6626 次

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

Quote预览：https://jannah.tielabs.com/demo/shortco ... shortcodes

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

IMG_20240425_131336.png (123.51 KiB) 查看 6626 次

Login Form预览：https://jannah.tielabs.com/demo/shortco ... shortcodes

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

IMG_20240425_131639.png (117.82 KiB) 查看 6625 次

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

IMG_20240425_131725.jpg (119.44 KiB) 查看 6625 次

Fullwidth Image预览：https://jannah.tielabs.com/demo/shortco ... shortcodes