{"id":2683,"date":"2025-06-11T05:30:25","date_gmt":"2025-06-10T21:30:25","guid":{"rendered":"https:\/\/www.zhaozhao123.cn\/wpcms\/wpdt\/2683.html"},"modified":"2025-06-11T05:30:25","modified_gmt":"2025-06-10T21:30:25","slug":"%e5%a6%82%e4%bd%95%e5%9c%a8wordpress%e4%b8%ad%e6%b7%bb%e5%8a%a0svg%e5%9b%be%e7%89%87%e6%96%87%e4%bb%b6%ef%bc%883%e7%a7%8d%e7%ae%80%e5%8d%95%e6%96%b9%e6%b3%95%ef%bc%89","status":"publish","type":"post","link":"https:\/\/www.zhaozhao123.cn\/wpcms\/post\/2683.html","title":{"rendered":"\u5982\u4f55\u5728WordPress\u4e2d\u6dfb\u52a0SVG\u56fe\u7247\u6587\u4ef6\uff083\u79cd\u7b80\u5355\u65b9\u6cd5\uff09"},"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中添加SVG图片文件可以通过多种方式实现，以下是三种简单的方法：<\/p>\n

方法一：通过上传SVG文件<\/h3>\n
    \n
  1. \n

    上传SVG文件<\/strong>：<\/p>\n

      \n
    • 登录到您的WordPress后台。<\/li>\n
    • 进入“媒体”菜单下的“添加新文件”或“插入媒体”选项。<\/li>\n
    • 选择“从计算机上添加文件”，然后找到并上传您想要添加的SVG文件。<\/li>\n<\/ul>\n<\/li>\n
    • \n

      设置为默认图像<\/strong>：<\/p>\n

        \n
      • 在上传完成后，点击“保存更改”按钮。<\/li>\n
      • 转到“编辑”页面，找到要替换现有图片的位置。<\/li>\n
      • 点击“替换”按钮以应用新的SVG文件。<\/li>\n<\/ul>\n<\/li>\n<\/ol>\n

        这种方法适用于简单的、非交互式的SVG图片。<\/p>\n

        示例代码与步骤：<\/h3>\n
        \/\/ 获取当前页面的ID\n$current_page_id = get_the_ID();\n\n\/\/ 添加一个SVG图片到当前页面\nadd_image_size('svg', 64, 64);\n$image_url = wp_get_attachment_image_src(get_post_thumbnail_id($current_page_id), 'full');\n?>\n<img src=\"<?php echo $image_url[0]; ?>\" alt=\"SVG Image\" class=\"svg-image\"><\/code><\/pre>\n
        解释：<\/h3>\n
          \n
        • get_the_ID()<\/code>：获取当前页面的ID，用于确定图片位置。<\/li>\n
        • wp_get_attachment_image_src()<\/code>: 获取附件（在这里是SVG图片）的URL。<\/li>\n
        • add_image_size()<\/code>：定义一个新的图片尺寸，这里我们定义了一个大小为64×64像素的SVG图片。<\/li>\n<\/ul>\n
          方法二：通过嵌套HTML标签<\/h3>\n
            \n
          1. 插入SVG代码<\/strong>：\n
              \n
            • 打开您的WordPress博客。<\/li>\n
            • 导航到您希望放置SVG图片的地方。<\/li>\n
            • 插入以下HTML代码来嵌套SVG和CSS样式：<\/li>\n<\/ul><\/li>\n<\/ol>\n
              <div style=\"display: flex; justify-content: center;\">\n    <svg width=\"100%\" height=\"auto\" viewBox=\"0 0 512 512\" xmlns=\"http:\/\/www.w3.org\/2000\/svg\">\n        <!-- SVG内容 -->\n    <\/svg>\n<\/div><\/code><\/pre>\n
                \n
              1. 编写SVG代码<\/strong>：\n
                  \n
                • 使用 <svg><\/code> 标签创建SVG元素。<\/li>\n
                • 设置width<\/code>和height<\/code>属性来控制SVG的大小。<\/li>\n
                • viewBox<\/code> 属性指定了SVG元素的实际显示区域。<\/li>\n<\/ul><\/li>\n<\/ol>\n
                  示例代码与步骤：<\/h3>\n
                  <div style=\"display: flex; justify-content: center;\">\n    <svg width=\"100%\" height=\"auto\" viewBox=\"0 0 512 512\" xmlns=\"http:\/\/www.w3.org\/2000\/svg\">\n        <circle cx=\"50%\" cy=\"50%\" r=\"48\" fill=\"#fff\"\/>\n        <rect x=\"25%\" y=\"25%\" width=\"70%\" height=\"70%\" fill=\"#fff\"\/>\n    <\/svg>\n<\/div><\/code><\/pre>\n
                  解释：<\/h3>\n
                    \n
                  • <svg><\/code>：创建SVG元素。<\/li>\n
                  • width<\/code>, height<\/code>, viewBox<\/code>：设置SVG的大小和显示区域。<\/li>\n
                  • <circle><\/code> 和 <rect><\/code>：添加图形元素，如圆形和矩形。<\/li>\n<\/ul>\n
                    方法三：通过链接引用SVG文件<\/h3>\n
                      \n
                    1. \n
                      上传SVG文件<\/strong>：<\/p>\n
                        \n
                      • 同样地，将SVG文件上传到WordPress媒体库。<\/li>\n<\/ul>\n<\/li>\n
                      • \n
                        链接SVG文件<\/strong>：<\/p>\n
                          \n
                        • 在WordPress中，您可以将SVG文件作为静态图像或自定义图标的链接使用。<\/li>\n
                        • 创建一个指向SVG文件的链接，例如：\n
                          <a href=\"<?php echo esc_url(esc_attr($file->guid)); ?>\">\n <img src=\"<?php echo esc_url($file->guid); ?>\" alt=\"SVG Icon\" \/>\n<\/a><\/code><\/pre><\/li>\n<\/ul>\n<\/li>\n<\/ol>\n
                          示例代码与步骤：<\/h3>\n
                          <?php \n$attachment_id = attachment_exists('path\/to\/your\/specific-svg-file.svg'); \/\/ 替换为实际路径\nif ($attachment_id) {\n    $file = get_post_meta($attachment_id, '_wp_attached_file', true);\n    ?>\n    <a href=\"<?php echo esc_url($file); ?>\">\n        <img src=\"<?php echo esc_url($file); ?>\" alt=\"SVG Icon\" \/>\n    <\/a>\n    <?php\n}\n?><\/code><\/pre>\n
                          解释：<\/h3>\n
                            \n
                          • $attachment_id<\/code>：根据SVG文件的GUID查找其ID。<\/li>\n
                          • get_post_meta()<\/code>：获取关联数组中的值。<\/li>\n
                          • esc_url()<\/code>：防止SQL注入攻击。<\/li>\n<\/ul>\n
                            以上就是三种在WordPress中添加SVG图片文件的基本方法，每种方法都有其适用场景。选择哪种方法取决于您的具体需求和偏好。<\/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中添加SVG图片文件是一种常见的需求，特别是当您需要为网站设计一个独特或复杂的图形元素时。SVG（Scalable Vector Graphics）图像格式具有许多优点，包括可以缩放以适应不同大小和分辨率的屏幕，以及支持丰富的颜色和动画效果。<\/p>\n
                            以下是使用WordPress提供的几种方式来实现这个目标：<\/p>\n
                            方法一：使用插件<\/h3>\n
                            使用WordPress自带的插件<\/h4>\n
                            首先，确保您的WordPress版本至少是5.0及以上。安装并激活以下插件之一：<\/p>\n
                              \n
                            1. WooCommerce SVG Image<\/strong> – 这个插件专门用于处理与SVG相关的图片和产品图片。<\/li>\n
                            2. WPML SVG Importer<\/strong> – 如果您需要将SVG导入到多语言网站上，请考虑此插件。<\/li>\n<\/ol>\n
                              示例代码:<\/h4>\n
                              \/\/ 使用WooCommerce SVG Image插件\nadd_action('admin_init', 'wpsvgs_import');\nfunction wpsvgs_import() {\n    \/\/ 检查是否有上传的SVG文件\n    if (isset($_FILES['svg_file']) && $_FILES['svg_file']['error'] === UPLOAD_ERR_OK) {\n        $file = wp_upload_dir()['basedir'] . '\/' . sanitize_file_name( $_FILES['svg_file']['name']);\n        move_uploaded_file($_FILES['svg_file']['tmp_name'], $file);\n        $svg_data = file_get_contents($file);\n\n        \/\/ 创建一个新的WooCommerce商品\n        $product = wc_create_product(array(\n            'title' => 'My SVG Product',\n            'description' => 'This is a product with an SVG image.',\n            'sku' => 'my-svg-product',\n            'image' => array(\n                'id' => 1,\n                'sizes' => array(),\n                'url' => $file,\n            ),\n        ));\n    }\n}\n\n\/\/ 使用WPML SVG Importer插件\nadd_action('wp_loaded', 'wmlsvgs_import');\nfunction wmlsvgs_import() {\n    \/\/ 检查是否有上传的SVG文件\n    if (isset($_POST['import_svg'])) {\n        $upload_dir = wp_upload_dir();\n        $post_id = wp_insert_post(array(\n            'post_title' => sanitize_title( $_POST['post_title'] ),\n            'post_content' => sanitize_text_field( $_POST['post_content'] ),\n            'post_status' => 'publish',\n            'post_type' => 'post',\n            'post_author' => get_current_user_id()\n        ));\n\n        $svg_path = wp_upload_dir()['base_url'] . '\/images\/' . $post_id;\n        copy(ABSPATH . 'wp-content\/uploads\/svg.svg', $svg_path);\n\n        \/\/ 导航到新创建的产品页面\n        wp_redirect( add_query_arg( 'slug', 'my-svg-product' ) );\n        exit();\n    }\n}<\/code><\/pre>\n
                              方法二：通过WordPress编辑器<\/h3>\n
                              虽然这种方法不常用，但如果您已经熟悉了WordPress的编辑器，也可以尝试使用它来加载SVG文件。这通常适用于那些想要自定义网页外观的用户。<\/p>\n
                              示例代码:<\/h4>\n
                              <!-- 使用WordPress编辑器加载SVG -->\n<div class=\"wrap\">\n    <h2>Upload your SVG image here<\/h2>\n    <form action=\"\" method=\"post\" enctype=\"multipart\/form-data\">\n        <input type=\"hidden\" name=\"action\" value=\"upload_svg_image\"\/>\n        <input type=\"text\" name=\"post_title\" placeholder=\"Title of the post\"\/>\n        <textarea name=\"post_content\"><\/textarea>\n        <label for=\"svg_file\">Select SVG File:<\/label><br\/>\n        <input type=\"file\" id=\"svg_file\" name=\"svg_file\"\/>\n        <button type=\"submit\">Upload SVG Image<\/button>\n    <\/form>\n<\/div><\/code><\/pre>\n
                              方法三：使用JavaScript<\/h3>\n
                              对于更简单的HTML\/JS解决方案，您可以编写一个简单的脚本来加载SVG文件。这种方法不需要任何额外的插件，但可能不是最推荐的方法，因为它可能会增加服务器负载。<\/p>\n
                              示例代码:<\/h4>\n
                              \/\/ 获取SVG文件URL\nvar svgUrl = document.getElementById(\"svg_file\").files[0].path;\n\n\/\/ 将SVG数据插入到文档中\ndocument.body.innerHTML += '<img src=\"' + svgUrl + '\" alt=\"SVG Image\">';<\/code><\/pre>\n
                              这些示例代码展示了如何在WordPress中加载SVG图片文件的不同方法。选择最适合您项目需求的方法，并根据实际情况调整代码。希望这对您有所帮助！<\/p>\r\n<\/div>\r\n<\/div>\r\n<\/div>\r\n<\/div>\n","protected":false},"excerpt":{"rendered":"
                              Bug编译狮 在WordPress中添加SVG图片文件可以通过多种方..<\/p>\n","protected":false},"author":1,"featured_media":0,"comment_status":"","ping_status":"","sticky":false,"template":"","format":"standard","meta":{"_acf_changed":false,"footnotes":""},"categories":[1],"tags":[59],"tuisongtax":[],"class_list":["post-2683","post","type-post","status-publish","format-standard","hentry","category-wpdt","tag-pzjc"],"acf":[],"_links":{"self":[{"href":"https:\/\/www.zhaozhao123.cn\/wpcms\/wp-json\/wp\/v2\/posts\/2683","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=2683"}],"version-history":[{"count":0,"href":"https:\/\/www.zhaozhao123.cn\/wpcms\/wp-json\/wp\/v2\/posts\/2683\/revisions"}],"wp:attachment":[{"href":"https:\/\/www.zhaozhao123.cn\/wpcms\/wp-json\/wp\/v2\/media?parent=2683"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.zhaozhao123.cn\/wpcms\/wp-json\/wp\/v2\/categories?post=2683"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.zhaozhao123.cn\/wpcms\/wp-json\/wp\/v2\/tags?post=2683"},{"taxonomy":"tuisongtax","embeddable":true,"href":"https:\/\/www.zhaozhao123.cn\/wpcms\/wp-json\/wp\/v2\/tuisongtax?post=2683"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}