标签: 短代码

  • 如何在WordPress中添加短代码

    短代码是一种将动态内容添加到WordPress文章、页面和侧边栏的简单方法。

    许多WordPress插件和主题使用短代码来添加专门的内容,如联系表格、图片库、滑块等。

    在本教程中,我们将向您展示如何在WordPress中轻松添加短代码。我们还将向您展示如何在WordPress中创建您自己的自定义短代码。

    如何在WordPress中添加短代码

    什么是短代码?

    WordPress中的简码是代码快捷方式,可帮助您在WordPress文章、页面和侧边栏小部件中添加动态内容。它们显示在方括号内,如下所示:

    [myshortcode]
    [myshortcode]
    [myshortcode]

    为了更好地理解短代码,让我们先来看看为什么添加它们的背景。

    WordPress过滤所有内容以确保没有人使用文章和页面内容在数据库中插入恶意代码。这意味着您可以在文章中编写基本的HTML,但不能编写PHP代码。

    但是,如果您想在文章中运行一些自定义代码来显示相关文章、横幅广告、联系表单、画廊等,该怎么办?

    这就是Shortcode API的用武之地。

    基本上,它允许开发人员将他们的代码添加到一个函数中,然后将该函数作为短代码注册到WordPress,因此用户无需任何编码知识即可轻松使用它。

    当WordPress找到短代码时,它会自动运行与之关联的代码。

    让我们看看如何在您的WordPress文章和页面中轻松添加短代码。

    在WordPress文章和页面中添加短代码

    首先,您需要编辑要添加短代码的文章和页面。之后,您需要单击添加块按钮以插入短代码区块。

    插入短代码区块

    添加短代码区块后,您只需在区块设置中输入您的短代码即可。短码将通过各种WordPress插件来提供,你可能如使用是WPForms的联系表单,OptinMonster的电子邮件营销表单,WP Call button插入一个拨打电话按钮,等等。

    插入不同插件的短代码

    要了解有关使用区块的更多信息,请参阅我们的古腾堡教程以获取更多详细信息。

    您现在可以保存您的文章或页面并预览您的更改以查看正在运行的短代码。

    在WordPress侧边栏小工具中添加短代码

    您还可以在WordPress侧边栏小工具中使用短代码。只需访问外观»小工具页面并将“文本”小部件添加到侧边栏。

    现在您可以将您的短代码粘贴到小工具的文本区域内。

    添加短代码至小工具

    不要忘记单击“Save”按钮来存储您的小工具设置。

    之后,您可以访问您的WordPress网站,在侧边栏小部件中查看短代码的实时预览。

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

    如果您仍在WordPress中使用旧的经典编辑器,那么您可以通过以下方式向WordPress文章和页面添加短代码。

    只需编辑要添加短代码的文章和页面。您可以将短代码粘贴到内容编辑器中要显示的任何位置。只要确保短代码在它自己的行中。

    经典编辑器插入短代码

    不要忘记保存您的更改。之后,您可以预览您的帖子和页面以查看正在运行的短代码。

    如何在WordPress主题文件中添加短代码

    短代码旨在用于WordPress文章、页面和小部件。但是,有时您可能希望在WordPress主题文件中使用短代码。

    WordPress可以轻松做到这一点,但您需要编辑WordPress主题文件。

    基本上,您只需添加以下代码即可向任何WordPress主题模板添加短代码。

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

    WordPress现在将查找短代码并在您的主题模板中显示其输出。

    如何在WordPress中创建自己的自定义短代码

    当您想在WordPress文章和页面中添加动态内容或自定义代码时,简码非常有用。但是,如果您想创建自定义短代码,则需要一些编码经验。

    如果您对编写PHP代码感到满意,那么这里有一个示例代码,您可以将其用作模板。

    // function that runs when shortcode is called
    function wpb_demo_shortcode() {
    // Things that you want to do.
    $message = ‘Hello world!’;
    // Output needs to be return
    return $message;
    }
    // register shortcode
    add_shortcode(‘greeting’, ‘wpb_demo_shortcode’);
    // function that runs when shortcode is called
    function wpb_demo_shortcode() {
    // Things that you want to do.
    $message = ‘Hello world!’;
    // Output needs to be return
    return $message;
    }
    // register shortcode
    add_shortcode(‘greeting’, ‘wpb_demo_shortcode’);
    // function that runs when shortcode is called
    function wpb_demo_shortcode() { 
    // Things that you want to do. 
    $message = 'Hello world!'; 
    // Output needs to be return
    return $message;
    } 
    // register shortcode
    add_shortcode('greeting', 'wpb_demo_shortcode');

    在这段代码中,我们首先创建了一个运行一些代码并返回输出的函数。之后,我们创建了一个名为“greeting”的新短代码,并告诉WordPress运行我们创建的函数。

    您现在可以使用以下代码将此短代码添加到您的文章、页面和小部件中:

    [greeting]
    [greeting]
    [greeting]
    

    它将运行您创建的函数并显示所需的输出。

    现在让我们来看看短代码的更实际用法。在此示例中,我们将在短代码中显示Google AdSense广告banner。

    // The shortcode function
    function wpb_demo_shortcode_2() {
    // Advertisement code pasted inside a variable
    $string .= ‘<script async src=”//pagead2.googlesyndication.com/pagead/js/adsbygoogle.js”></script>
    <ins class=”adsbygoogle”
    style=”display:block; text-align:center;”
    data-ad-format=”fluid”
    data-ad-layout=”in-article”
    data-ad-client=”ca-pub-0123456789101112″
    data-ad-slot=”9876543210″></ins>
    <script>
    (adsbygoogle = window.adsbygoogle || []).push({});
    </script>’;
    // Ad code returned
    return $string;
    }
    // Register shortcode
    add_shortcode(‘my_ad_code’, ‘wpb_demo_shortcode_2’);
    // The shortcode function
    function wpb_demo_shortcode_2() {
    // Advertisement code pasted inside a variable
    $string .= ‘<script async src=”//pagead2.googlesyndication.com/pagead/js/adsbygoogle.js”></script>
    <ins class=”adsbygoogle”
    style=”display:block; text-align:center;”
    data-ad-format=”fluid”
    data-ad-layout=”in-article”
    data-ad-client=”ca-pub-0123456789101112″
    data-ad-slot=”9876543210″></ins>
    <script>
    (adsbygoogle = window.adsbygoogle || []).push({});
    </script>’;
    // Ad code returned
    return $string;
    }
    // Register shortcode
    add_shortcode(‘my_ad_code’, ‘wpb_demo_shortcode_2’);
    // The shortcode function
    function wpb_demo_shortcode_2() { 
    // Advertisement code pasted inside a variable
    $string .= '<script async src="//pagead2.googlesyndication.com/pagead/js/adsbygoogle.js"></script>
    <ins class="adsbygoogle"
    style="display:block; text-align:center;"
    data-ad-format="fluid"
    data-ad-layout="in-article"
    data-ad-client="ca-pub-0123456789101112"
    data-ad-slot="9876543210"></ins>
    <script>
    (adsbygoogle = window.adsbygoogle || []).push({});
    </script>';
    // Ad code returned
    return $string; 
    }
    // Register shortcode
    add_shortcode('my_ad_code', 'wpb_demo_shortcode_2');

    不要忘记用您自己的广告代码替换广告代码。

    您现在可以在WordPress文章、页面和侧边栏小部件中使用 [my_ad_code] 短代码。WordPress将自动运行与短代码关联的功能并显示广告代码。

    简码与古腾堡区块

    用户经常问我们简码与新古腾堡块之间的区别。

    基本上,如果您发现短代码有用,那么您会喜欢WordPress编辑器区块。块允许您以更用户友好的方式做同样的事情。

    与要求用户添加用于显示动态内容的短代码不同,区块允许用户使用更直观的用户界面在文章/页面中添加动态内容。许多流行的WordPress插件都改用Gutenberg区块而不是短代码,因为它们对初学者更友好。

    最后,希望本教程能帮助您了解如何在WordPress中添加短代码。

  • 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开发人员,就像宏之于数据分析师,或键盘快捷键之于专业图形设计师。

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

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

    什么是短代码?

    简而言之,Shortcode = Shortcut + Code

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

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

    简码简史

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

    使用简单的BBCode轻松格式化

    使用简单的BBCode轻松格式化

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

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

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

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

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

    什么是WordPress简码?

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

    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 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/目录中创建一个新文件夹。

    注意插件目录的位置

    注意插件目录的位置

    我将我的插件命名为“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