分页: 1 / 1

简码

发表于 : 2024年 4月 24日 08:23
Jannah
一、简码简介

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

二、启用Jannah短代码

为了让快捷代码发挥作用,你应该免费安装主题附带的Jannah扩展插件。这是必需的。
IMG_20240424_081922.png
IMG_20240424_081922.png (133.63 KiB) 查看 6647 次
转到Jannah > Install Plugins > Jannah Extensions 插件,然后单击激活。

三、Jannah短代码

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

1.区块编辑器(Gutenberg):

通过添加经典编辑器块,可以在新的块编辑器中使用Jannah-Shortcode
file-MrmQ4FJnXt.png
file-MrmQ4FJnXt.png (145.05 KiB) 查看 6647 次
file-XXk3CY3Amt.png
file-XXk3CY3Amt.png (75.51 KiB) 查看 6647 次
2.经典编辑器
file-fhMNA78XXe.jpg
file-fhMNA78XXe.jpg (116.68 KiB) 查看 6646 次
我们将详细介绍这些简码的作用。

四、简码概述

Box框
单击短代码菜单中的框,将出现弹出窗口
IMG_20240424_082645.png
IMG_20240424_082645.png (45.65 KiB) 查看 6646 次
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
IMG_20240424_083138.png (45.41 KiB) 查看 6645 次
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
IMG_20240424_083551.png (25.93 KiB) 查看 6644 次
选择选项卡样式,水平或垂直,然后单击OK按钮添加快捷代码,选项卡快捷代码将如下所示:
IMG_20240424_083708.png
IMG_20240424_083708.png (126.38 KiB) 查看 6644 次
将Tab x Title替换为自定义标题,将Tab x | Your Content替换为选项卡内容。

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

Toggle Box切换框
单击快捷代码菜单中的Toggle Box,弹出窗口将出现
IMG_20240424_084816.png
IMG_20240424_084816.png (39.41 KiB) 查看 6642 次
1.Title-切换框标题。
2.State-默认的切换框状态(打开或关闭)。
3.Content-切换框内容。
4.完成后,单击OK按钮。
IMG_20240424_085046.png
IMG_20240424_085046.png (73.56 KiB) 查看 6642 次
Toggle Box预览:https://jannah.tielabs.com/demo/shortco ... shortcodes

Content Slideshow内容幻灯片
将光标指针定位在页面内容的任何位置,然后单击快捷方式菜单中的Content Slideshow
IMG_20240424_085218.png
IMG_20240424_085218.png (98.1 KiB) 查看 6642 次
内容幻灯片快捷代码将添加到光标指针的位置
IMG_20240424_085403.png
IMG_20240424_085403.png (98.08 KiB) 查看 6642 次
将内容放在每张幻灯片中,而不是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
IMG_20240424_090230.png (44.08 KiB) 查看 6641 次
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
IMG_20240424_090557.png (52.38 KiB) 查看 6640 次
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
IMG_20240424_090820.png (35.15 KiB) 查看 6640 次
1.Feed地址。
2.要显示的 Feed 数量。
3.完成后,单击OK按钮将 Feeds 简码添加到页面内容中。

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

Tooltip工具提示
单击短代码菜单中的Tooltip,将出现弹出窗口
IMG_20240424_091108.png
IMG_20240424_091108.png (42.84 KiB) 查看 6640 次
1.Title - 将鼠标悬停在其上以显示工具提示的文本。
2.Content - 将鼠标悬停在工具提示标题上时将显示在工具提示气泡中的文本。
3.Direction - 工具提示方向,显示在标题的顶部、底部、右侧或左侧。
4.完成后,单击OK按钮将工具提示简码添加到页面内容中。

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

Share Buttons分享按钮
单击短代码菜单中的共享按钮,将出现弹出窗口
IMG_20240425_080645.png
IMG_20240425_080645.png (58.62 KiB) 查看 6638 次
1.选中要显示的按钮。
2.Twitter Follow Button - 显示/隐藏 Twitter 关注按钮。
3.Twitter Username - 由 Twitter 关注按钮使用。此外,将显示以下按钮。
4.完成后,单击OK按钮将简码添加到页面内容中。

Dropcap首字下沉
IMG_20240425_081107.png
IMG_20240425_081107.png (134.18 KiB) 查看 6637 次
选择首字母下沉字符,然后从快捷方式菜单中单击Dropcap,Dropcap将按如下方式添加:
IMG_20240425_081620.png
IMG_20240425_081620.png (23.08 KiB) 查看 6637 次
Dropcap预览:https://jannah.tielabs.com/demo/shortco ... shortcodes

Tags Cloud标签云
IMG_20240425_081754.png
IMG_20240425_081754.png (97.27 KiB) 查看 6637 次
1.找到光标指针。
2.单击短代码菜单中的 Tags Cloud,将添加 Tags Cloud 短代码,如下所示

IMG_20240425_082915.png
IMG_20240425_082915.png (18.43 KiB) 查看 6636 次
Tags Cloud:https://jannah.tielabs.com/demo/shortco ... ortcodes预览

Highlight Text高亮显示文本
将光标指针定位在要添加高亮显示的文本的位置,然后单击快捷方式菜单中的Highlight Text,将出现弹出窗口
IMG_20240425_083204.png
IMG_20240425_083204.png (30.54 KiB) 查看 6635 次
1.Color-选择高亮显示的颜色。
2.Text-将采用高亮显示颜色的文本。
完成后,单击OK按钮将快捷代码添加到页面内容中。

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

Padding填充
如果你想对一些内容段落进行填充,你可以这样做。可以控制填充左/右值。
单击快捷代码菜单中的Padding,将出现弹出窗口
IMG_20240425_084358.png
IMG_20240425_084358.png (30.69 KiB) 查看 6634 次
1.填充左边的量,你可以指定一个CSS测量单位的量。
2.填充右边的量。
3.完成后,单击OK按钮将快捷代码添加到页面内容中。

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

Divider Line分割线
单击短代码菜单中的Divider Line,将出现弹出窗口
IMG_20240425_124620.png
IMG_20240425_124620.png (34.28 KiB) 查看 6633 次
1.Style - 选择分隔线的样式、实线、虚线、正常、双精度或虚线。
2.Margin Top/Bottom - 线上方/下方的边距空间。
完成后,单击OK按钮将简码添加到页面内容中。

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

Lists列表
IMG_20240425_124827.png
IMG_20240425_124827.png (128.21 KiB) 查看 6633 次
将光标指针定位在要添加列表的位置,从短代码菜单中选择Lists→选择列表类型,列表短代码将添加如下:
IMG_20240425_124926.png
IMG_20240425_124926.png (22.77 KiB) 查看 6633 次
在开始和结束简码标记之间留出更多空间,如下所示:
IMG_20240425_125022.png
IMG_20240425_125022.png (12.18 KiB) 查看 6633 次
然后单击项目符号列表
IMG_20240425_125106.png
IMG_20240425_125106.png (51.45 KiB) 查看 6633 次
然后添加菜单项:
IMG_20240425_125134.png
IMG_20240425_125134.png (9.89 KiB) 查看 6633 次
Lists预览:https://jannah.tielabs.com/demo/shortco ... shortcodes

Restrict Content内容限制
IMG_20240425_125330.png
IMG_20240425_125330.png (127 KiB) 查看 6632 次
选择要限制已注册或仅供访客使用的内容,从短代码菜单中选择Restrict Content→选择Registered已注册或Gusts访客,短代码将添加到您选择的内容周围,如下所示:
IMG_20240425_125516.png
IMG_20240425_125516.png (18.72 KiB) 查看 6632 次
现在,Register on our site to get our new updates这一行文字将仅显示给游客。此外,您可以仅对注册用户限制某些内容。

Columns
单击短代码菜单中的Columns并选择所需的布局,Jannah 提供 9 列布局。
IMG_20240425_125747.png
IMG_20240425_125747.png (125.88 KiB) 查看 6632 次
单击所需的布局后,简码将添加到光标指针引用的位置,如下所示:
IMG_20240425_125838.png
IMG_20240425_125838.png (27.27 KiB) 查看 6632 次
然后在每列中添加您的内容,而不是在此处添加内容语句。

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

Google Maps谷歌地图
将光标指针定位在要添加地图的位置,单击短代码菜单中的Google Maps,将出现弹出窗口
IMG_20240425_130043.png
IMG_20240425_130043.png (29.63 KiB) 查看 6632 次
输入 Google 地图网址。

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

Video视频
单击短代码菜单中的Video,将出现弹出窗口
IMG_20240425_130245.png
IMG_20240425_130245.png (29.22 KiB) 查看 6631 次
1.Video URL - 完整的视频网址。
2.Video width - 视频宽度。
3.Video height - 视频高度。
完成后,单击OK按钮将简码添加到页面内容中。

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

Audio音频
单击短代码菜单中的Audio,将出现弹出窗口
IMG_20240425_130434.png
IMG_20240425_130434.png (29.28 KiB) 查看 6630 次
在光标指针所指的位置输入 MP3 或 M4A 或 OGG 文件。

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

Lightbox灯箱
单击短代码菜单中的Lightbox,将出现弹出窗口
IMG_20240425_130723.png
IMG_20240425_130723.png (48.86 KiB) 查看 6630 次
1.Full Image or Youtube/Vimeo Video URL - 完整图片或 Youtube/Vimeo 视频 URL。
2.Title - 将出现在打开的灯箱模型的底部。
3.Content - 链接文本,单击它时将打开灯箱。
4.完成后,单击OK按钮将简码添加到页面内容中。
IMG_20240425_130946.jpg
IMG_20240425_130946.jpg (209.96 KiB) 查看 6629 次
Quote引用
单击短代码菜单中的Quote,将出现弹出窗口
IMG_20240425_131109.png
IMG_20240425_131109.png (44.02 KiB) 查看 6628 次
1.Content - 引用内容。
2.Alignment - 引号对齐方式,左对齐、右对齐或居中对齐。
3.Author - 引文作者,将出现在引文的底部。
4.Style - 引用样式,深色、浅色或简单。

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

Login Form登录表单
单击短代码菜单中的Login Form,登录简码将添加如下图所示
IMG_20240425_131336.png
IMG_20240425_131336.png (123.51 KiB) 查看 6628 次
Login Form预览:https://jannah.tielabs.com/demo/shortco ... shortcodes

Fullwidth Image全宽图像
单击短代码菜单中的Fullwidth Image,全宽图像简码将添加如下内容
IMG_20240425_131639.png
IMG_20240425_131639.png (117.82 KiB) 查看 6627 次
然后将光标指针放在开始标记 [tie_full_img] 之后,然后单击“添加媒体”按钮上传图像,上传新图像或从现有图像中选择一个。
IMG_20240425_131725.jpg
IMG_20240425_131725.jpg (119.44 KiB) 查看 6627 次
Fullwidth Image预览:https://jannah.tielabs.com/demo/shortco ... shortcodes