{"id":1257,"date":"2025-06-10T04:34:26","date_gmt":"2025-06-09T20:34:26","guid":{"rendered":"https:\/\/www.zhaozhao123.cn\/wpcms\/wpdt\/1257.html"},"modified":"2025-06-10T04:34:26","modified_gmt":"2025-06-09T20:34:26","slug":"7%e4%b8%aa%e5%bf%85%e5%a4%87%e6%8a%80%e5%b7%a7%ef%bc%9a%e5%9c%a8wordpress%e4%b8%ad%e4%bd%bf%e7%94%a8%e7%9f%ad%e4%bb%a3%e7%a0%81","status":"publish","type":"post","link":"https:\/\/www.zhaozhao123.cn\/wpcms\/post\/1257.html","title":{"rendered":"7\u4e2a\u5fc5\u5907\u6280\u5de7\uff1a\u5728WordPress\u4e2d\u4f7f\u7528\u77ed\u4ee3\u7801"},"content":{"rendered":"
\r\n
\r\n
\r\n
\r\n
\r\n

写 Bug工程师：<\/h2>\r\n<\/div>\r\n<\/div>\r\n<\/div>\r\n\r\n\r\n\r\n
\r\n
\r\n

在WordPress网站开发和维护过程中，短代码（Shortcodes）是一种非常强大的工具，它允许开发者嵌入各种自定义功能，如视频播放、表单提交等。以下是七个常用的WordPress短代码及其应用实例。<\/p>\n

1. 使用[contact-form-7]<\/code><\/h3>\n

这个短代码用于创建一个简单的联系表单。只需将其插入到文章或页面的任何位置即可。<\/p>\n

示例代码:<\/strong><\/p>\n

<!-- Contact Form -->\n<form id=\"my-contact-form\" action=\"\/submit.php\" method=\"post\">\n    <label for=\"name\">Name:<\/label><br>\n    <input type=\"text\" name=\"name\"><br>\n\n    <label for=\"email\">Email:<\/label><br>\n    <input type=\"email\" name=\"email\"><br>\n\n    <label for=\"message\">Message:<\/label><br>\n    <textarea name=\"message\"><\/textarea><br>\n\n    <button type=\"submit\">Submit<\/button>\n<\/form><\/code><\/pre>\n
效果:<\/strong> 当用户点击“Submit”按钮时，会向服务器发送一个POST请求，其中包含了他们的姓名、电子邮件和留言信息。<\/p>\n
2. 使用<\/code><\/h3>\n
此短代码用于显示图片集。只需指定图片文件夹路径即可。<\/p>\n
示例代码:<\/strong><\/p>\n
<!-- Gallery Shortcode -->\n<img src=\"\"><\/code><\/pre>\n
效果:<\/strong> 这段代码会在当前页面上展示位于\/images\/gallery<\/code>目录中的所有图片。<\/p>\n
3. 使用<\/code><\/h3>\n
这是一个专门用于嵌入YouTube视频的短代码。<\/p>\n
示例代码:<\/strong><\/p>\n
<!-- Embed YouTube Video -->\n<iframe width=\"560\" height=\"315\" src=\"\" frameborder=\"0\" allow=\"accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture\" allowfullscreen><\/iframe><\/code><\/pre>\n
效果:<\/strong> 用户可以点击该标签后，在新窗口打开YouTube视频。<\/p>\n
4. 使用[author-box]<\/code><\/h3>\n
此短代码用于显示作者信息，包括其头像和简介。<\/p>\n
示例代码:<\/strong><\/p>\n
<!-- Author Box Shortcode -->\n<div class=\"author-box\">\n    <div class=\"author-img\">\n        [author avatar=\"true\"]\n        <\/author-avatar>\n    <\/div>\n    <h2>[author name]<\/h2>\n    <p>[author bio]<\/p>\n<\/div><\/code><\/pre>\n
效果:<\/strong> 页面上会出现一个带有作者头像和个人简介的小部件。<\/p>\n
5. 使用[date]<\/code><\/h3>\n
此短代码用于插入当前日期。<\/p>\n
示例代码:<\/strong><\/p>\n
<!-- Current Date -->\n<h2>The current date is:[date]<\/h2><\/code><\/pre>\n
效果:<\/strong> 文章顶部会显示今天的日期。<\/p>\n
6. 使用[comments]<\/code><\/h3>\n
此短代码用于显示评论列表。<\/p>\n
示例代码:<\/strong><\/p>\n
<!-- Comments Shortcode -->\n<?php comments_template(); ?><\/code><\/pre>\n
效果:<\/strong> 在文章底部会显示相关的评论。<\/p>\n
7. 使用[social-share-buttons]<\/code><\/h3>\n
此短代码用于显示社交媒体分享按钮。<\/p>\n
示例代码:<\/strong><\/p>\n
<!-- Social Share Buttons -->\n<a href=\"#\" data-action=\"share\/facebook\" target=\"_blank\"><i class=\"fa fa-facebook-square\"><\/i> Facebook<\/a>\n<a href=\"#\" data-action=\"share\/twitter\" target=\"_blank\"><i class=\"fa fa-twitter-square\"><\/i> Twitter<\/a><\/code><\/pre>\n
效果:<\/strong> 点击这些链接后，会在新窗口弹出相关平台的分享窗口。<\/p>\n
通过以上介绍，你可以看到短代码的强大功能如何帮助你在WordPress网站上实现丰富的交互体验。希望这些建议对你有所帮助！<\/p>\r\n<\/div>\r\n<\/div>\r\n<\/div>\r\n<\/div>
\r\n
\r\n
\r\n
\r\n
\r\n
黑板IDE教书匠：<\/h2>\r\n<\/div>\r\n<\/div>\r\n<\/div>\r\n\r\n\r\n\r\n
\r\n
\r\n
7个必备技巧：在WordPress中使用短代码<\/h1>\n
目标受众<\/h2>\n
本教程旨在帮助初学者和中级用户了解如何在WordPress网站上使用短代码。通过本教程，您将学习到基本的短代码语法、如何添加自定义功能以及如何优化短代码以提高网站性能。<\/p>\n
知识点概述<\/h2>\n
短代码简介<\/h3>\n
短代码是一种特殊的标记，可以用来创建HTML元素或组合这些元素来构建复杂的页面布局。它们可以在WordPress主题的functions.php<\/code>文件中被引用。<\/p>\n
1. 创建一个短代码块<\/h3>\n
首先，需要创建一个包含特定标签（如<h2><\/code>）的短代码块。例如：<\/p>\n
function my_theme_custom_header() {\n    echo '<h2>Welcome to my site!<\/h2>';\n}<\/code><\/pre>\n
2. 使用短代码<\/h3>\n
接下来，要在您的WordPress文章正文部分嵌入这个短代码。只需在相应的HTML <p><\/code>标签内插入以下代码：<\/p>\n
<?php the_content(); ?><\/code><\/pre>\n
或者使用PHP代码：<\/p>\n
echo get_the_content();<\/code><\/pre>\n
3. 调整短代码位置<\/h3>\n
你可以将短代码放在任何你想的位置，但通常建议将其放置在内容之前，以便它能更好地与文本一起展示。<\/p>\n
<div>\n    <h2>Welcome to my site!<\/h2>\n    <?php the_content(); ?>\n<\/div><\/code><\/pre>\n
4. 添加自定义功能<\/h3>\n
除了基本的HTML元素外，短代码还可以用于添加各种自定义功能。例如，可以使用短代码实现动态加载图片或显示带有动画效果的内容。<\/p>\n
function my_theme_custom_image_loader($content) {\n    $image_url = wp_get_attachment_url(get_post_thumbnail_id());\n    if ($image_url) {\n        return '<img src=\"' . esc_url($image_url) . '\" alt=\"My Image\">';\n    }\n    return '';\n}\n\nadd_filter('the_content', 'my_theme_custom_image_loader');<\/code><\/pre>\n
5. 避免滥用短代码<\/h3>\n
尽管短代码可以帮助简化网页设计，但也需要注意避免滥用它们。过多地使用短代码可能会降低网站的易读性和用户体验。<\/p>\n
<p><?php the_title(); ?><\/p>\n<p><?php the_content(); ?><\/p>\n<p><?php the_excerpt(); ?><\/p><\/code><\/pre>\n
6. 自动替换短代码<\/h3>\n
如果你希望自动替换短代码中的变量值，可以使用wpautop()<\/code>函数。这有助于保持文档格式的一致性。<\/p>\n
function my_theme_custom_replace_shortcodes($content) {\n    global $post;\n    $shortcode = '[custom-shortcode]';\n    $params = array(\n        'name' => $post->post_name,\n        'title' => $post->post_title,\n        'date' => get_the_date(),\n        'author' => get_the_author()\n    );\n    $content = str_replace($shortcode, '{{custom_shortcode}}', $content);\n    return $content;\n}\nadd_filter('the_content', 'my_theme_custom_replace_shortcodes');<\/code><\/pre>\n
7. 性能优化<\/h3>\n
虽然短代码本身不会直接影响网站性能，但在处理大量短代码时，可能会影响加载速度。为了优化短代码，应尽量减少重复使用短代码的情况。<\/p>\n
<?php if (have_posts()) : while (have_posts()) : the_post(); ?>\n    <div class=\"article\">\n        <h2><?php the_title(); ?><\/h2>\n        <p><?php the_content(); ?><\/p>\n    <\/div>\n<?php endwhile; endif; ?>\n\n<script type=\"text\/javascript\" src=\"https:\/\/cdn.jsdelivr.net\/npm\/slick-carousel<\/a>@1.8.1\/slick\/slick.min.js\"><\/script>\n<div id=\"carouselExampleIndicators\" class=\"carousel slide\" data-ride=\"carousel\">\n    <ol class=\"carousel-indicators\">\n        <li data-target=\"#carouselExampleIndicators\" data-slide-to=\"0\" class=\"active\"><\/li>\n        <li data-target=\"#carouselExampleIndicators\" data-slide-to=\"1\"><\/li>\n        <li data-target=\"#carouselExampleIndicators\" data-slide-to=\"2\"><\/li>\n    <\/ol>\n    <div class=\"carousel-inner\">\n        <div class=\"carousel-item active\">\n            <img src=\"https:\/\/via.placeholder.com\/1000x5<\/a>\" alt=\"\">\n        <\/div>\n        <div class=\"carousel-item\">\n            <img src=\"https:\/\/via.placeholder.com\/1000x5<\/a>\" alt=\"\">\n        <\/div>\n        <div class=\"carousel-item\">\n            <img src=\"https:\/\/via.placeholder.com\/1000x5<\/a>\" alt=\"\">\n        <\/div>\n    <\/div>\n    <a class=\"carousel-control-prev\" href=\"#carouselExampleIndicators\" role=\"button\" data-slide=\"prev\">\n        <span class=\"carousel-control-prev-icon\" aria-hidden=\"true\"><\/span>\n        <span class=\"sr-only\">Previous<\/span>\n    <\/a>\n    <a class=\"carousel-control-next\" href=\"#carouselExampleIndicators\" role=\"button\" data-slide=\"next\">\n        <span class=\"carousel-control-next-icon\" aria-hidden=\"true\"><\/span>\n        <span class=\"sr-only\">Next<\/span>\n    <\/a>\n<\/div><\/code><\/pre>\n
\n
以上就是7个必备技巧：在WordPress中使用短代码的全部内容。每个知识点都有详细的解释和示例代码，希望能帮助您理解和应用短代码技术。<\/p>\r\n<\/div>\r\n<\/div>\r\n<\/div>\r\n<\/div>\n","protected":false},"excerpt":{"rendered":"
写 Bug工程师： 在WordPress网站开发和维护过程中，短&#..<\/p>\n","protected":false},"author":1,"featured_media":0,"comment_status":"closed","ping_status":"","sticky":false,"template":"","format":"standard","meta":{"_acf_changed":false,"footnotes":""},"categories":[1],"tags":[49,50],"tuisongtax":[],"class_list":["post-1257","post","type-post","status-publish","format-standard","hentry","category-wpdt","tag-rmzn","tag-xsbdtj"],"acf":[],"_links":{"self":[{"href":"https:\/\/www.zhaozhao123.cn\/wpcms\/wp-json\/wp\/v2\/posts\/1257","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/www.zhaozhao123.cn\/wpcms\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.zhaozhao123.cn\/wpcms\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.zhaozhao123.cn\/wpcms\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/www.zhaozhao123.cn\/wpcms\/wp-json\/wp\/v2\/comments?post=1257"}],"version-history":[{"count":0,"href":"https:\/\/www.zhaozhao123.cn\/wpcms\/wp-json\/wp\/v2\/posts\/1257\/revisions"}],"wp:attachment":[{"href":"https:\/\/www.zhaozhao123.cn\/wpcms\/wp-json\/wp\/v2\/media?parent=1257"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.zhaozhao123.cn\/wpcms\/wp-json\/wp\/v2\/categories?post=1257"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.zhaozhao123.cn\/wpcms\/wp-json\/wp\/v2\/tags?post=1257"},{"taxonomy":"tuisongtax","embeddable":true,"href":"https:\/\/www.zhaozhao123.cn\/wpcms\/wp-json\/wp\/v2\/tuisongtax?post=1257"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}