{"id":3837,"date":"2025-06-12T05:16:16","date_gmt":"2025-06-11T21:16:16","guid":{"rendered":"https:\/\/www.zhaozhao123.cn\/wpcms\/wpdt\/3837.html"},"modified":"2025-06-12T05:16:16","modified_gmt":"2025-06-11T21:16:16","slug":"%e5%a6%82%e4%bd%95%e5%9c%a8-wordpress-%e4%b8%ad%e6%98%be%e7%a4%ba-youtube-%e9%a2%91%e9%81%93%e7%9a%84%e6%9c%80%e6%96%b0%e8%a7%86%e9%a2%91","status":"publish","type":"post","link":"https:\/\/www.zhaozhao123.cn\/wpcms\/post\/3837.html","title":{"rendered":"\u5982\u4f55\u5728 WordPress \u4e2d\u663e\u793a YouTube \u9891\u9053\u7684\u6700\u65b0\u89c6\u9891"},"content":{"rendered":"
\r\n
\r\n
\r\n
\r\n
\r\n
\"Bug编译狮\"<\/figure>\r\n\r\n\r\n\r\n

Bug编译狮<\/p>\r\n<\/div>\r\n<\/div>\r\n<\/div>\r\n\r\n\r\n\r\n

\r\n
\r\n

在 WordPress 中显示 YouTube 频道的最新视频可以通过多种方式实现，以下是其中的一种方法：使用 YouTube API 和 Gutenberg 插件。<\/p>\n

步骤 1: 注册 YouTube API<\/h3>\n

首先，你需要注册并获取 YouTube API 的访问令牌。你可以从 Google Developers Console 创建一个新的项目，并按照文档指引完成注册和设置。<\/p>\n

步骤 2: 安装 Gutenberg 插件<\/h3>\n

安装 Gutenberg 插件（如 Gutenberg<\/code>），它允许你在 WordPress 文档页面上使用新的富文本编辑器。<\/p>\n

步骤 3: 编辑文章或页面<\/h3>\n

打开你要添加 YouTube 视频的文章或页面，在 Gutenberg 富文本编辑器中输入以下代码：<\/p>\n

[YouTube video=\"https:\/\/www.youtube.com\/watch?v=VIDEO_ID\"]<\/code><\/pre>\n
这里，“VIDEO_ID”是你从 YouTube 管理员账号中找到的视频 ID。例如，如果你有一个名为“my-video”的频道，ID 就是“my-video”。<\/p>\n
步骤 4: 设置参数<\/h3>\n
在上述代码中，你可以选择是否显示视频标题、描述以及作者信息等额外细节。这些选项可以通过在 [YouTube]<\/code> 标签内添加相应的参数来配置：<\/p>\n
    \n
  • title<\/code>: 显示视频标题。<\/li>\n
  • description<\/code>: 显示视频描述。<\/li>\n
  • author<\/code>: 显示视频发布者的信息。<\/li>\n<\/ul>\n
    示例代码<\/h3>\n
    [YouTube title=\"我的最新视频\" description=\"这是我在 YouTube 上发布的第一个视频。\" author=\"我\" width=\"640\" height=\"360\"]<\/code><\/pre>\n
    使用效果<\/h3>\n
    当您点击播放按钮时，会直接跳转到 YouTube 平台观看视频。如果您的站点没有启用 HTTPS，则可能需要在链接前加上协议头以确保安全连接。<\/p>\n
    请注意，这只是一个基本示例。实际应用中，您可能还需要处理一些错误情况，比如用户未登录、API 错误等。此外，为了提高用户体验，您可以考虑添加更多元的数据标签，如视频类别、发布日期等。<\/p>\n
    通过这种方式，您可以轻松地在 WordPress 文章或页面中嵌入 YouTube 视频，为用户提供丰富的多媒体体验。<\/p>\r\n<\/div>\r\n<\/div>\r\n<\/div>\r\n<\/div>
    \r\n
    \r\n
    \r\n
    \r\n
    \r\n
    \"黑板前的Bug语法讲师\"<\/figure>\r\n\r\n\r\n\r\n
    黑板前的Bug语法讲师<\/p>\r\n<\/div>\r\n<\/div>\r\n<\/div>\r\n\r\n\r\n\r\n
    \r\n
    \r\n
    教案标题：在 WordPress 中使用 YouTube 频道的最新视频<\/h3>\n
    目标：<\/h4>\n
    通过本课程，学生将学会如何在 WordPress 站点上设置和展示 YouTube 频道的最新视频。<\/p>\n
    课程结构：<\/h4>\n
      \n
    1. 引入<\/strong>\n
        \n
      • 明确主题。<\/li>\n<\/ul><\/li>\n
      • YouTube 频道简介<\/strong>\n
          \n
        • 基础了解 YouTube 频道及其功能。<\/li>\n<\/ul><\/li>\n
        • WordPress 设置<\/strong>\n
            \n
          • 创建 YouTube 视频插件。<\/li>\n<\/ul><\/li>\n
          • 安装和配置<\/strong>\n
              \n
            • 安装并配置 WordPress 视频插件。<\/li>\n<\/ul><\/li>\n
            • 更新视频列表<\/strong>\n
                \n
              • 更新 WordPress 视频插件以获取最新视频信息。<\/li>\n<\/ul><\/li>\n
              • 播放器设置<\/strong>\n
                  \n
                • 设置 WordPress 视频插件以显示最新视频。<\/li>\n<\/ul><\/li>\n
                • 自定义选项<\/strong>\n
                    \n
                  • 自定义播放器样式、音量控制等。<\/li>\n<\/ul><\/li>\n
                  • 测试与优化<\/strong>\n
                      \n
                    • 测试插件功能，确保一切正常工作。<\/li>\n<\/ul><\/li>\n
                    • 总结<\/strong>\n
                        \n
                      • 强调重要步骤和最佳实践。<\/li>\n<\/ul><\/li>\n<\/ol>\n
                        示例代码：<\/h4>\n
                        \/\/ 创建一个名为 \"youtube_video\" 的新插件文件夹\nmkdir('wp-content\/plugins\/youtube-video');\n\n\/\/ 创建一个名为 \"plugin.php\" 的新 PHP 文件\nfile_put_contents(\n    'wp-content\/plugins\/youtube-video\/plugin.php',\n    \"\n    <?php\n\n    class YoutubeVideo extends WP_Widget {\n\n        public function __construct() {\n            $widget_ops = array(\n                'classname' => 'youtube-video-widget',\n                'description' => esc_attr__( 'Display YouTube videos on your site.', 'your-plugin-title' ),\n            );\n\n            parent::__construct( 'youtube_video', esc_html__( 'YouTube Video Widget', 'your-plugin-title' ), $widget_ops );\n        }\n\n        public function widget($args, $instance) {\n            extract($args);\n\n            if ( !isset( $instance['url'] ) ) {\n                return;\n            }\n\n            echo $before_widget;\n\n            \/\/ 输出频道名称\n            echo '<h3>' . esc_html( $instance['channel_title'] ) . '<\/h3>';\n\n            \/\/ 输出频道描述\n            echo '<p>' . esc_html( $instance['channel_description'] ) . '<\/p>';\n\n            \/\/ 输出频道标签\n            echo '<div class=\"youtube-channel-labels\">';\n            foreach ($instance['channels_tags'] as $tag) {\n                echo '<a href=\"' . esc_url( $tag['url'] ) . '\">' . esc_html( $tag['label'] ) . '<\/a>';\n            }\n            echo '<\/div>';\n\n            \/\/ 输出频道封面图片\n            if (!empty($instance['cover_image'])) {\n                echo '<img src=\"' . esc_url( $instance['cover_image'] ) . '\" alt=\"' . esc_attr( $instance['channel_title'] ) . '\" \/>';\n            } else {\n                echo '<img src=\"' . esc_url( plugins_url( 'images\/no-image.jpg', __FILE__ ) ) . '\" alt=\"' . esc_attr( $instance['channel_title'] ) . '\" \/>';\n            }\n\n            \/\/ 输出频道视频链接\n            echo '<ul class=\"youtube-channel-videos\">';\n            foreach ($instance['videos'] as $video) {\n                $video_id = $video['id'];\n                $video_link = $video['link'];\n\n                \/\/ 如果有视频ID，则输出视频链接\n                if (!empty($video_id)) {\n                    echo '<li><a href=\"' . esc_url( $video_link ) . '\" target=\"_blank\"><span class=\"play-button\"><\/span><\/a><\/li>';\n                }\n            }\n            echo '<\/ul>';\n\n            echo $after_widget;\n        }\n\n        public function update($new_instance, $old_instance) {\n            $instance = $old_instance;\n\n            $instance['url'] = sanitize_text_field( $new_instance['url'] );\n            $instance['channel_title'] = sanitize_text_field( $new_instance['channel_title'] );\n            $instance['channel_description'] = sanitize_text_field( $new_instance['channel_description'] );\n            $instance['channels_tags'] = sanitize_text_field( $new_instance['channels_tags'] );\n            $instance['cover_image'] = sanitize_text_field( $new_instance['cover_image'] );\n\n            return $instance;\n        }\n\n        public function form($instance) {\n            $defaults = array(\n                'url' => '',\n                'channel_title' => '',\n                'channel_description' => '',\n                'channels_tags' => array(),\n                'cover_image' => '',\n            );\n\n            $instance = wp_parse_args( (array) $instance, $defaults );\n\n            echo \"<input type='text' name='url' value='\" . esc_attr( $instance['url'] ) . \"' placeholder='YouTube URL'>\";\n            echo \"<br>\";\n            echo \"<input type='text' name='channel_title' value='\" . esc_attr( $instance['channel_title'] ) . \"' placeholder='Channel Title'>\";\n            echo \"<br>\";\n            echo \"<textarea rows='10' cols='40' name='channel_description' id='channel-description' placeholder='Description'>\".esc_attr( $instance['channel_description'] ).\"<\/textarea>\";\n            echo \"<br>\";\n\n            $tags = get_terms(array('taxonomy'=>'youtube_channel_tag'));\n            echo \"<select name='channels_tags'>\";\n            foreach ($tags as $tag) {\n                echo \"<option value='\" . esc_attr( $tag->slug ) . \"'>\" . esc_html( $tag->name ) . \"<\/option>\";\n            }\n            echo \"<\/select>\";\n\n            echo \"<input type='text' name='cover_image' value='\" . esc_attr( $instance['cover_image'] ) . \"' placeholder='Cover Image'>\";\n        }\n\n        public function back_to_admin_page() {\n            header(\"Location: index.php\");\n        }\n\n    }\n\n    register_widget( 'YoutubeVideo' );\n\n}\n\"\n);<\/code><\/pre>\n
                        实践操作：<\/h4>\n
                          \n
                        • 在 WordPress 主题目录下创建或修改 functions.php<\/code> 文件，添加以下代码：\n
                          \nadd_action('admin_menu', 'my_custom_plugin_page');\nfunction my_custom_plugin_page() {\nadd_options_page('Your Plugin Name Here', 'Your Plugin Name Here', 'manage_options', 'your-plugin-name', 'my_custom_plugin_page_callback');\n}<\/code><\/pre><\/li>\n<\/ul>\n
                          function my_custom_plugin_page_callback() {\n?><\/p>\n
                          \n        \n            \n                \n                
                          <\/th>\n                <\/td>\n            <\/tr>\n            
                          <\/th>\n