WordPress短代码的终极指南

WordPress短代码的终极指南

WordPress短代码是一项强大的功能,可以轻松完成很酷的事情。你几乎可以用它们做任何事情。使用短代码,嵌入交互式元素或创建复杂的页面布局就像插入一行代码一样简单。

如果要添加图库,只需输入以下代码:

【gallery ids=“47 ,86, 92, 64, 48, 75, 89, 80” columns=“4” size=“medium”
####【】替换为[]
【gallery ids=”47 ,86, 92, 64, 48, 75, 89, 80″ columns=”4″ size=”medium”】
####【】替换为[]
【gallery ids="47 ,86, 92, 64, 48, 75, 89, 80" columns="4" size="medium"】
####【】替换为[]

这将输出一个带有提到的图像ID的画廊。它将有4列,它们的最大大小将是“medium”(由WordPress定义)。

不需要任何丑陋的HTML代码。

WordPress短代码的终极指南

画廊简码示例

短代码消除了对复杂脚本的需要。即使您几乎没有编程技能,也可以在他们的帮助下轻松添加动态内容。

它们在WordPress开发人员中非常受欢迎,因为它们极大地帮助了自动化内容和设计创建。简码之于WordPress开发人员,就像宏之于数据分析师,或键盘快捷键之于专业图形设计师。

在本指南中,您将了解有关短代码的所有知识。您将通过创建自己的短代码了解如何使用Shortcode API。最后,我们将讨论短代码的未来以及它们在WordPress的新区块编辑器中的适用位置

  1. 什么是短代码?
  2. 默认的WordPress简码
  3. 如何在WordPress中创建自定义短代码(初学者级别)
  4. WordPress简码:优点与缺点
  5. 简码和古腾堡区块

什么是短代码?

简而言之,Shortcode = Shortcut + Code

通常,短代码使用方括号标签 [] 来定义它们的使用方式。每个短代码在站点中执行特定功能。它可以像格式化内容一样简单,也可以像定义整个网站的结构一样复杂。

例如,您可以使用简码嵌入滑块、表格或定价表。您甚至可以使用它们来创建可重复使用的页面设计模板。

简码简史

简码最初是由名为Ultimate Bulletin Board (UBB) 的在线论坛软件流行起来的。1998年,他们推出了BBCode(公告牌代码),这是一组易于使用的标签,供用户轻松设置帖子的格式。

WordPress短代码的终极指南

使用简单的BBCode轻松格式化

作为一种轻量级标记语言,BBCode的工作原理与HTML相同,但它更简单。

使用预定义标签也更安全,因为用户无法插入HTML代码并引入安全漏洞。例如,怀有恶意的用户可以使用<script>标签来执行JavaScript代码并破坏网站的功能。

不久之后,其他在线论坛软件,如phpBBXMB ForumvBulletin,在他们的留言板中添加了BBCode功能。

短代码使管理员能够更好地控制用户可以做什么和不能做什么。此外,它们允许用户通过简单的标签来格式化他们的内容。

由于相同的安全原因,WordPress会阻止PHP代码在站点内容中运行。为了克服这个限制,WordPress 2.5在2008年随着Shortcode API的发布引入了短代码功能。事实证明,它是许多WordPress插件和主题开发人员最常用的功能之一。

什么是WordPress简码?

WordPress短代码是方括号字符串 ( [ ] ),它神奇地转变为前端迷人的东西。它们为用户提供了一种创建和更改复杂内容的简便方法,而无需担心复杂的HTML或嵌入代码。

WordPress短代码的终极指南

WordPress简码简单易用

两种类型的短代码

WordPress中主要有两种类型的短代码。

WordPress短代码的终极指南

自闭合和封闭短代码可以在有或没有属性的情况下有效

自闭合短代码:这些不需要结束标记。

示例:图库简码不需要结束标记。我们用不同的属性添加它需要的一切。

封闭短代码:这些需要一个结束标签。封闭短代码通常操纵开始和结束标记之间的内容。

例如标题短码被用于环绕任何内容的标题。它主要用于为图像添加标题,但它适用于任何HTML元素。

一些短代码可以使用或不使用属性。这取决于它们是如何定义的。

默认的WordPress简码

WordPress带有6个默认短代码:

  • audio:在您的网站上嵌入音频文件。它包括简单的播放控件,如播放和暂停。
  • caption:用它在你的内容周围加上标题。它主要用于添加图像标题,但您可以将其用于任何HTML元素。
  • embed:扩展默认的oEmbed功能。此简码可让您为嵌入设置不同的属性,例如设置它们的最大尺寸。
  • gallery:在您的网站上插入一个简单的图片库。您可以使用属性来定义使用哪些图像并自定义图库的外观。
  • playlist:显示带有此自封闭短代码的音频或视频文件的集合。你可以用它的style属性给它一个很酷的“黑暗”模式。
  • video : 嵌入视频文件并使用简单的视频播放器播放。此短代码支持嵌入以下格式的视频:mp4、webm、m4v、webm、ogv、wmv、flv。

有关如何使用默认短代码以及它们支持哪些属性的更多详细信息,您可以参考链接的Codex文档。

如何使用WordPress简码

在WordPress中使用短代码是一个简单的过程。但这取决于您要将它们添加到站点的哪个位置。请务必阅读短代码文档以了解其工作原理。了解它支持的属性,这样您就可以准确地获得您想要的东西。

在页面和文章中使用WordPress简码

首先,转到要插入短代码的页面/文章编辑器。

如果您使用的是Gutenberg编辑器,则可以在独立的Shortcodes块中添加shortcode标签。我们可以在小工具部分找到它。

WordPress短代码的终极指南

在古腾堡中添加短代码区块

WordPress短代码的终极指南

古腾堡的专用短代码区块

还在使用经典编辑器(或插件)?您可以以经典方式输入短代码标签。一些短代码甚至可能在编辑器屏幕中有一个按钮可以轻松插入它们。

WordPress短代码的终极指南

在经典编辑器中添加短代码

在侧边栏小工具中使用WordPress简码

也可以在侧边栏小部件中插入简码。要添加它们,请转到外观»小工具并将文本小工具添加到要添加快捷方式的部分。

WordPress短代码的终极指南

使用文本小工具在侧边栏中添加短代码

将短代码粘贴到文本小工具中并保存。您可以访问您网站的前端并在侧边栏中查看短代码的输出。

WordPress短代码的终极指南

可以在侧边栏中看到简码输出(图库)

注意: WordPress 4.8及以下版本不支持侧边栏小工具中的短代码。阅读WordPress 4.9更新中的小工具改进以了解更多信息。

WordPress短代码通常用于页面、文章和小工具。但是您有一种简单的方法可以在站点的任何位置插入短代码。

假设您想在页脚或评论部分之前的所有帖子中添加号召性用语按钮。该do_shortcode()回调函数就派上用场了这里。

您需要将以下代码添加到主题的header.phpfooter.php或其任何模板文件中:

<?php echo do_shortcode(“[name_of_your_shortcode]”); ?>
<?php echo do_shortcode(“[name_of_your_shortcode]”); ?>
<?php echo do_shortcode("[name_of_your_shortcode]"); ?>

这将在您插入代码的位置输出短代码。

您需要在引号之间包含方括号以回应短代码。仅仅包括它的名字是行不通的。

同样,您可以使用do_shortcode()回调函数在WordPress中的任何位置启用短代码,例如在评论部分。

Shortcode API简介

WordPress的简码API定义了如何使用简码定制和扩展您的网站的功能。它使开发人员能够创建独特的内容(例如表单、轮播、滑块等),用户可以通过粘贴相关的短代码将这些内容添加到他们的网站中。

在短代码的帮助下,您几乎可以将您能想到的任何功能添加到您的网站。

API支持自闭合和封闭短代码。它处理所有棘手的解析,并包含用于设置和获取默认属性的辅助函数。

借助API,您可以直接深入开发和自定义短代码,而不是浪费宝贵的时间为您制作的每个短代码定义正则表达式。

了解短代码API的基础知识

每次您在WordPress中打开页面或发帖时,它都会在处理网站内容时查找已注册的短代码。

如果找到注册的简码,简码 API 将接管并返回简码的输出。返回的输出字符串替换它添加位置中的短代码标签。

您可以使用add_shortcode() 函数在WordPress中注册一个短代码。这是它的完成方式:

add_shortcode( ‘shortcode_name’, ‘shortcode_handler_function’ );
add_shortcode( ‘shortcode_name’, ‘shortcode_handler_function’ );
add_shortcode( 'shortcode_name', 'shortcode_handler_function' );
  • shortcode_name: WordPress 将在解析帖子内容时寻找的标签。Shortcode API 建议您仅使用小写字母、数字和下划线来定义其值(避免使用破折号)。
  • shortcode_handler_function:在 WordPress 确认存在已注册的短代码后将执行的回调函数。

短代码处理函数定义如下:

function shortcode_handler_function( $atts, $content, $tag ){ }
function shortcode_handler_function( $atts, $content, $tag ){ }
function shortcode_handler_function( $atts, $content, $tag ){ }
  • $atts:一个关联的属性数组(即键值对数组)。如果没有定义属性,则默认为空字符串。
  • $content:包含的内容,如果您要定义封闭的短代码。它是处理函数的责任,以确保$含量值返回到输出。
  • $tag:短代码的标签值(上例中的shortcode_name)。如果两个或多个短代码共享相同的回调函数(有效),$tag值将帮助您确定哪个短代码触发了处理函数。

API解析短代码的标签、属性和包含的内容(如果有),绕过这些值到处理程序函数,处理程序函数处理它们并返回输出字符串。

此输出字符串替换您网站前端的短代码宏。您最终在浏览器中看到的是此输出。

在哪里添加您的自定义短代码脚本?

您可以将自定义短代码脚本添加到主题的functions.php文件或将它们包含在插件中。

如果要将其添加到主题文件,则可以按原样运行add_shortcode()函数。

但是,如果您要将其添加到插件中,我建议您仅在WordPress完全加载后才对其进行初始化。您可以通过将add_shortcode()函数包装在另一个函数中来确保这一点。这称为包装函数:

function shortcodes_init(){
add_shortcode( ‘shortcode_name’, ‘shortcode_handler_function’ );
}
add_action(‘init’, ‘shortcodes_init’);
function shortcodes_init(){
add_shortcode( ‘shortcode_name’, ‘shortcode_handler_function’ );
}
add_action(‘init’, ‘shortcodes_init’);
function shortcodes_init(){
add_shortcode( 'shortcode_name', 'shortcode_handler_function' );
}
add_action('init', 'shortcodes_init');

add_action()函数将shortcodes_init函数挂钩,使其仅在WordPress完成加载后启动(称为‘init’钩子)。

如何在WordPress中创建自定义短代码(初学者级别)

现在我们已经介绍了基础知识,是时候创建自定义短代码了。

要按照下面给出的步骤进行操作,您需要熟悉使用PHP代码和编辑WordPress主题文件。当您完成本教程时,您将准备好启动您的第一个自定义WordPress短代码!

我们将从最简单的短代码开始,然后转向更复杂的短代码。在掌握短代码的过程中享受您的短暂里程碑!

示例 1:使用 [current_year] 的简码

让我们创建一个名为 [current_year] 的短代码,用于在您的网站上输出当前年份。

如果您要向网站添加需要每年更新的内容,此短代码会很有帮助。例如,在您网站的页脚中添加版权声明。

我将使用准系统插件来添加我的短代码功能。您可以将其添加到主题的functions.php文件中并获得相同的结果,但我不建议这样做。不过可以测试和学习!

让我们从创建一个插件开始。在/wp-content/plugins/目录中创建一个新文件夹。

WordPress短代码的终极指南

注意插件目录的位置

我将我的插件命名为“salcodes”,但您可以随意命名它。

salcodes插件目录中,创建一个同名的PHP文件(salcodes.php)。完成后,将以下标题添加到您的插件文件中:

<?php
/*
Plugin Name: Salcodes
Version: 1.0
Description: Output the current year in your WordPress site.
Author: Salman Ravoof
Author URI: https://www.salmanravoof.com/
License: GPLv2 or later
License URI: https://www.gnu.org/licenses/gpl-2.0.html
Text Domain: salcodes
*/
<?php
/*
Plugin Name: Salcodes
Version: 1.0
Description: Output the current year in your WordPress site.
Author: Salman Ravoof
Author URI: https://www.salmanravoof.com/
License: GPLv2 or later
License URI: https://www.gnu.org/licenses/gpl-2.0.html
Text Domain: salcodes
*/
<?php
/*
Plugin Name:  Salcodes
Version: 1.0
Description: Output the current year in your WordPress site.
Author: Salman Ravoof
Author URI: https://www.salmanravoof.com/
License: GPLv2 or later
License URI: https://www.gnu.org/licenses/gpl-2.0.html
Text Domain: salcodes
*/

这个简单的插件头文件足以满足我们的目的。您可以在WordPress Codex中了解有关插件标头要求的更多信息。保存此文件,然后转到您的WordPress仪表板以激活插件。

现在,让我们注册短代码及其处理函数。为此,请将以下代码添加到您的插件文件中:

/**
* [current_year] returns the Current Year as a 4-digit string.
* @return string Current Year
*/
add_shortcode( ‘current_year’, ‘salcodes_year’ );
function salcodes_init(){
function salcodes_year() {
return getdate()[‘year’];
}
}
add_action(‘init’, ‘salcodes_init’);
/** Always end your PHP files with this closing tag */
?>
/**
* [current_year] returns the Current Year as a 4-digit string.
* @return string Current Year
*/
add_shortcode( ‘current_year’, ‘salcodes_year’ );
function salcodes_init(){
fu
重要声明

本网站的文章部分内容可能来源于网络,如有侵犯你的权益请联系邮箱:wxzn8@outlook.com
站内资源为网友个人学习或测试研究使用,未经原版权作者许可,禁止用于任何商业途径!请在下载24小时内删除!本站资源大多存储在云盘,如发现链接失效请反馈,我们会及时更新。

给TA打赏
共{{data.count}}人
人已打赏
WordPress基础学习

如何使用代码和插件创建WordPress活动事件

2023-1-13 19:13:15

WordPress基础学习

WordPress媒体库完整指南及小技巧

2023-1-13 19:14:22

0 条回复 A文章作者 M管理员
    暂无讨论,说说你的看法吧
个人中心
今日签到
有新私信 私信列表
搜索