{"id":2778,"date":"2026-06-09T19:51:59","date_gmt":"2026-06-09T11:51:59","guid":{"rendered":"https:\/\/longmai-nt.com\/?page_id=2778"},"modified":"2026-06-13T15:44:26","modified_gmt":"2026-06-13T07:44:26","slug":"%e6%a1%88%e4%be%8b%e5%88%86%e4%ba%ab%e5%88%9b%e5%bb%ba%e6%8c%87%e5%8d%97-%c2%b7-%e8%ae%be%e8%ae%a1%e7%94%bb%e5%b8%83","status":"publish","type":"page","link":"https:\/\/longmai-nt.com\/?page_id=2778","title":{"rendered":"\u6848\u4f8b\u5206\u4eab\u521b\u5efa\u6307\u5357 \u00b7 \u8bbe\u8ba1\u753b\u5e03"},"content":{"rendered":"\n

\u4ece\u65b9\u6848\u5230\u4e0a\u7ebf\u7684\u5b8c\u6574\u6d41\u7a0b \u00b7 \u56fe\u7247\u5d4c\u5165\u89e3\u51b3\u65b9\u6848<\/h1>\n\n\n\n\n\n\n\n\n\u6848\u4f8b\u5206\u4eab\u521b\u5efa\u6307\u5357 \u00b7 \u8bbe\u8ba1\u753b\u5e03 | \u9f99\u8109\u6696\u901a<\/title>\n<style>\n * { margin: 0; padding: 0; box-sizing: border-box; }\n body { font-family: \"PingFang SC\", \"Microsoft YaHei\", \"Helvetica Neue\", sans-serif; color: #2C2C2A; background: #EDEDEB; line-height: 1.6; }\n\n .canvas { max-width: 960px; margin: 0 auto; padding: 20px; }\n\n \/* \u2500\u2500 \u753b\u5e03\u5934\u90e8 \u2500\u2500 \/\n .canvas-header { background: #3C3489; color: #fff; border-radius: 10px; padding: 28px 32px; margin-bottom: 16px; }\n .canvas-header .tag { display: inline-block; font-size: 11px; font-weight: 500; background: rgba(255,255,255,0.2); padding: 3px 10px; border-radius: 4px; margin-bottom: 10px; }\n .canvas-header h1 { font-size: 20px; font-weight: 500; letter-spacing: 0.5px; margin-bottom: 6px; }\n .canvas-header .desc { font-size: 13px; color: #CECBF6; }\n\n \/ \u2500\u2500 \u53c2\u6570\u5361\u7247\u6761 \u2500\u2500 \/\n .param-strip { display: grid; grid-template-columns: repeat(auto-fit, minmax(130px, 1fr)); gap: 10px; margin-bottom: 16px; }\n .param-card { background: #fff; border-radius: 8px; padding: 14px 12px; text-align: center; border: 1px solid #E8E6E0; }\n .param-card .label { font-size: 11px; color: #888780; margin-bottom: 4px; }\n .param-card .value { font-size: 14px; font-weight: 500; color: #2C2C2A; }\n .param-card .value.purple { color: #534AB7; }\n .param-card .value.teal { color: #0F6E56; }\n .param-card .value.coral { color: #D85A30; }\n\n \/ \u2500\u2500 6\u6b65\u6d41\u7a0b\u6761 \u2500\u2500 \/\n .flow-strip { display: grid; grid-template-columns: repeat(6, 1fr); gap: 6px; margin-bottom: 16px; }\n .flow-step { background: #fff; border-radius: 8px; padding: 14px 8px; text-align: center; border: 1px solid #E8E6E0; position: relative; }\n .flow-step .num { font-size: 18px; font-weight: 500; color: #534AB7; margin-bottom: 4px; }\n .flow-step .title { font-size: 12px; font-weight: 500; color: #2C2C2A; margin-bottom: 2px; }\n .flow-step .detail { font-size: 10px; color: #888780; }\n .flow-step::after { content: \"\u2192\"; position: absolute; right: -8px; top: 50%; transform: translateY(-50%); color: #D3D1C7; font-size: 14px; z-index: 1; }\n .flow-step:last-child::after { display: none; }\n\n \/ \u2500\u2500 \u53cc\u680f\u5e03\u5c40 \u2500\u2500 \/\n .row { display: grid; gap: 16px; margin-bottom: 16px; }\n .row-2 { grid-template-columns: 1fr 1fr; }\n .row-3 { grid-template-columns: 1fr 1fr 1fr; }\n .row-3-1 { grid-template-columns: 2fr 1fr; }\n\n \/ \u2500\u2500 \u901a\u7528\u9762\u677f \u2500\u2500 \/\n .panel { background: #fff; border-radius: 10px; padding: 20px; border: 1px solid #E8E6E0; }\n .panel-header { display: flex; align-items: center; gap: 8px; margin-bottom: 14px; }\n .panel-tag { display: inline-block; font-size: 10px; font-weight: 500; padding: 2px 8px; border-radius: 4px; }\n .panel-title { font-size: 15px; font-weight: 500; color: #2C2C2A; }\n\n .tag-purple { background: #EEEDFE; color: #534AB7; }\n .tag-coral { background: #FAECE7; color: #D85A30; }\n .tag-teal { background: #E1F5EE; color: #0F6E56; }\n .tag-blue { background: #E6F1FB; color: #185FA5; }\n .tag-amber { background: #FAEEDA; color: #854F0B; }\n\n \/ \u2500\u2500 \u5bf9\u6bd4\u8868 \u2500\u2500 \/\n .compare-table { width: 100%; border-collapse: collapse; font-size: 12px; }\n .compare-table th { background: #F1EFE8; font-weight: 500; text-align: left; padding: 8px 10px; color: #444441; border-bottom: 2px solid #D3D1C7; font-size: 11px; }\n .compare-table td { padding: 7px 10px; border-bottom: 1px solid #E8E6E0; color: #2C2C2A; vertical-align: top; }\n .compare-table .highlight-cell { background: #EEEDFE; font-weight: 500; color: #3C3489; }\n\n \/ \u2500\u2500 \u7167\u7247\u6d41\u7a0b\u5361 \u2500\u2500 \/\n .photo-flow { border-radius: 8px; overflow: hidden; margin-bottom: 12px; }\n .photo-flow img { width: 100%; display: block; border-radius: 8px; }\n .photo-flow .photo-label { font-size: 11px; color: #534AB7; font-weight: 500; margin-bottom: 6px; display: flex; align-items: center; gap: 4px; }\n .photo-flow .photo-label .step-dot { width: 18px; height: 18px; border-radius: 50%; background: #534AB7; color: #fff; font-size: 10px; display: flex; align-items: center; justify-content: center; }\n\n \/ \u2500\u2500 \u5f15\u7528\u5757 \u2500\u2500 \/\n .quote-block { background: #FAFAF8; border-left: 3px solid #534AB7; padding: 12px 16px; border-radius: 0 6px 6px 0; margin: 12px 0; }\n .quote-block p { font-size: 13px; color: #3C3489; font-style: italic; }\n\n \/ \u2500\u2500 \u547d\u540d\u793a\u4f8b \u2500\u2500 \/\n .naming-demo { background: #F1EFE8; border-radius: 6px; padding: 12px; font-size: 12px; margin: 8px 0; }\n .naming-demo .bad { color: #D85A30; text-decoration: line-through; }\n .naming-demo .good { color: #0F6E56; font-weight: 500; }\n .naming-demo .arrow { color: #888780; margin: 0 6px; }\n\n \/ \u2500\u2500 \u6e05\u5355 \u2500\u2500 \/\n .checklist { font-size: 12px; color: #5F5E5A; }\n .checklist .item { padding: 4px 0; display: flex; align-items: flex-start; gap: 6px; }\n .checklist .icon-check { color: #0F6E56; font-size: 13px; flex-shrink: 0; margin-top: 1px; }\n .checklist .icon-cross { color: #D85A30; font-size: 13px; flex-shrink: 0; margin-top: 1px; }\n\n \/ \u2500\u2500 \u4ee3\u7801\u5757 \u2500\u2500 \/\n .code-block { background: #2C2C2A; color: #CECBF6; border-radius: 6px; padding: 12px 14px; font-family: \"SF Mono\", \"Consolas\", monospace; font-size: 11px; line-height: 1.7; margin: 10px 0; overflow-x: auto; }\n .code-block .comment { color: #888780; }\n .code-block .keyword { color: #D85A30; }\n .code-block .string { color: #0F6E56; }\n\n \/ \u2500\u2500 WP\u64cd\u4f5c\u5361 \u2500\u2500 \/\n .wp-steps { counter-reset: wp-step; }\n .wp-step { display: flex; gap: 10px; margin-bottom: 10px; align-items: flex-start; }\n .wp-step::before { counter-increment: wp-step; content: counter(wp-step); flex-shrink: 0; width: 22px; height: 22px; border-radius: 50%; background: #534AB7; color: #fff; font-size: 11px; display: flex; align-items: center; justify-content: center; font-weight: 500; }\n .wp-step .text { font-size: 12px; color: #5F5E5A; line-height: 1.6; }\n .wp-step .text strong { color: #2C2C2A; }\n\n \/ \u2500\u2500 \u5e95\u90e8 \u2500\u2500 \/\n .canvas-footer { text-align: center; padding: 16px; font-size: 11px; color: #888780; }\n\n \/ \u2500\u2500 \u54cd\u5e94\u5f0f \u2500\u2500 \/\n @media (max-width: 700px) {\n .flow-strip { grid-template-columns: repeat(3, 1fr); }\n .flow-step::after { display: none; }\n .row-2, .row-3, .row-3-1 { grid-template-columns: 1fr; }\n .param-strip { grid-template-columns: repeat(3, 1fr); }\n }\n<\/style>\n<\/head>\n<body>\n\n<div class=\"canvas\">\n\n \n <div class=\"canvas-header\">\n <div class=\"tag\">\u6848\u4f8b\u5206\u4eab\u521b\u5efa\u6307\u5357 \u00b7 \u8bbe\u8ba1\u753b\u5e03<\/div>\n <h1>\u4ece\u65b9\u6848\u5230\u4e0a\u7ebf\u7684\u5b8c\u6574\u6d41\u7a0b \u00b7 \u56fe\u7247\u5d4c\u5165\u89e3\u51b3\u65b9\u6848<\/h1>\n <div class=\"desc\">6\u6b65\u6807\u51c6\u5316\u6d41\u7a0b\uff1a\u4e0b\u8f7d\u7167\u7247 \u2192 \u9a6c\u7ef4\u65af\u7f16\u8f91\u547d\u540d\u538b\u7f29 \u2192 \u4e0a\u4f20\u5a92\u4f53\u5e93 \u2192 \u590d\u5236URL\u7ed9AI \u2192 AI\u5d4c\u5165HTML \u2192 WordPress\u81ea\u5b9a\u4e49HTML\u533a\u5757\u7c98\u8d34\u53d1\u5e03<\/div>\n <\/div>\n\n \n <div class=\"param-strip\">\n <div class=\"param-card\">\n <div class=\"label\">\u6838\u5fc3\u73af\u8282<\/div>\n <div class=\"value purple\">6\u6b65\u6d41\u7a0b<\/div>\n <\/div>\n <div class=\"param-card\">\n <div class=\"label\">\u5173\u952e\u89d2\u8272<\/div>\n <div class=\"value teal\">\u9a6c\u7ef4\u65af<\/div>\n <\/div>\n <div class=\"param-card\">\n <div class=\"label\">\u7167\u7247\u5efa\u8bae<\/div>\n <div class=\"value\">10~15\u5f20\/\u6848\u4f8b<\/div>\n <\/div>\n <div class=\"param-card\">\n <div class=\"label\">\u538b\u7f29\u6807\u51c6<\/div>\n <div class=\"value\">80~150KB<\/div>\n <\/div>\n <div class=\"param-card\">\n <div class=\"label\">\u53d1\u5e03\u65b9\u5f0f<\/div>\n <div class=\"value coral\">\u81ea\u5b9a\u4e49HTML\u533a\u5757<\/div>\n <\/div>\n <div class=\"param-card\">\n <div class=\"label\">\u6548\u7387\u63d0\u5347<\/div>\n <div class=\"value purple\">2h \u2192 30min<\/div>\n <\/div>\n <\/div>\n\n \n <div class=\"flow-strip\">\n <div class=\"flow-step\">\n <div class=\"num\">\u2460<\/div>\n <div class=\"title\">\u4e0b\u8f7d\u5230\u7edf\u4e00\u6587\u4ef6\u5939<\/div>\n <div class=\"detail\">D:\/\u5b98\u7f51\u9700\u8981\u7684\u8d44\u6599\/<\/div>\n <\/div>\n <div class=\"flow-step\">\n <div class=\"num\">\u2461<\/div>\n <div class=\"title\">\u9a6c\u7ef4\u65af\u7f16\u8f91\u547d\u540d\u538b\u7f29<\/div>\n <div class=\"detail\">\u7edf\u4e00\u5c3a\u5bf8\u00b7\u89c4\u8303\u547d\u540d<\/div>\n <\/div>\n <div class=\"flow-step\">\n <div class=\"num\">\u2462<\/div>\n <div class=\"title\">\u4e0a\u4f20WordPress\u5a92\u4f53\u5e93<\/div>\n <div class=\"detail\">\u6dfb\u52a0\u65b0\u6587\u4ef6<\/div>\n <\/div>\n <div class=\"flow-step\">\n <div class=\"num\">\u2463<\/div>\n <div class=\"title\">\u590d\u5236URL\u7ed9AI<\/div>\n <div class=\"detail\">\u6bcf\u5f20\u7167\u7247\u7684\u5a92\u4f53\u5e93\u94fe\u63a5<\/div>\n <\/div>\n <div class=\"flow-step\">\n <div class=\"num\">\u2464<\/div>\n <div class=\"title\">AI\u5d4c\u5165HTML<\/div>\n <div class=\"detail\">\u81ea\u52a8\u66ff\u6362img src<\/div>\n <\/div>\n <div class=\"flow-step\">\n <div class=\"num\">\u2465<\/div>\n <div class=\"title\">\u81ea\u5b9a\u4e49HTML\u7c98\u8d34<\/div>\n <div class=\"detail\">WordPress\u533a\u5757\u53d1\u5e03<\/div>\n <\/div>\n <\/div>\n\n \n <div class=\"row row-3-1\">\n\n \n <div class=\"panel\">\n <div class=\"panel-header\">\n <span class=\"panel-tag tag-blue\">\u5bf9\u6bd4<\/span>\n <span class=\"panel-title\">\u6848\u4f8b\u5206\u4eab vs \u4e09\u79cd\u8868\u8fbe\u98ce\u683c<\/span>\n <\/div>\n <table class=\"compare-table\">\n <thead>\n <tr><th>\u7ef4\u5ea6<\/th><th>\u7ebf\u6027\u53d9\u4e8b<\/th><th>\u7ec4\u4ef6\u5316\u4ee3\u7801<\/th><th>\u8bbe\u8ba1\u753b\u5e03<\/th><th class=\"highlight-cell\">\u6848\u4f8b\u5206\u4eab<\/th><\/tr>\n <\/thead>\n <tbody>\n <tr><td>\u76ee\u7684<\/td><td>\u5448\u73b0\u65b9\u6848\u7ec6\u8282<\/td><td>\u5de5\u7a0b\u5316\u6279\u91cf\u751f\u6210<\/td><td>\u5feb\u901f\u51b3\u7b56<\/td><td class=\"highlight-cell\">\u771f\u5b9e\u6545\u4e8b+\u4fe1\u4efb<\/td><\/tr>\n <tr><td>\u56fe\u7247\u89d2\u8272<\/td><td>\u8f85\u52a9\u8bf4\u660e<\/td><td>\u57fa\u672c\u65e0\u56fe<\/td><td>\u56fe\u8868\u4e3a\u4e3b<\/td><td class=\"highlight-cell\">\u6838\u5fc3\u4e3b\u89d2<\/td><\/tr>\n <tr><td>\u9605\u8bfb\u65b9\u5f0f<\/td><td>\u987a\u5e8f\u9605\u8bfb<\/td><td>\u5728\u7ebf\u9884\u89c8<\/td><td>\u626b\u4e00\u773c\u6293\u5173\u952e<\/td><td class=\"highlight-cell\">\u770b\u56fe\u8bfb\u6545\u4e8b<\/td><\/tr>\n <tr><td>\u5236\u4f5c\u6210\u672c<\/td><td>\u4f4e<\/td><td>\u9ad8<\/td><td>\u4e2d<\/td><td class=\"highlight-cell\">\u4e2d(AI\u8f85\u52a9)<\/td><\/tr>\n <tr><td>\u5185\u5bb9\u6765\u6e90<\/td><td>\u624b\u52a8\u7f16\u5199<\/td><td>\u6570\u636e\u62c9\u53d6<\/td><td>AI\u751f\u6210<\/td><td class=\"highlight-cell\">\u5b9e\u62cd+\u539f\u8bdd<\/td><\/tr>\n <\/tbody>\n <\/table>\n <\/div>\n\n \n <div class=\"panel\" style=\"display:flex;flex-direction:column;justify-content:center;\">\n <div class=\"panel-header\">\n <span class=\"panel-tag tag-purple\">\u6838\u5fc3<\/span>\n <span class=\"panel-title\">\u672c\u8d28\u5dee\u5f02<\/span>\n <\/div>\n <div class=\"quote-block\">\n <p>\u4e09\u79cd\u98ce\u683c\u89e3\u51b3<br><strong>“\u65b9\u6848\u600e\u4e48\u5448\u73b0”<\/strong><\/p>\n <\/div>\n <div style=\"text-align:center;font-size:18px;color:#534AB7;margin:8px 0;\">\u2193<\/div>\n <div class=\"quote-block\" style=\"border-left-color:#0F6E56;\">\n <p style=\"color:#0F6E56;\">\u6848\u4f8b\u5206\u4eab\u89e3\u51b3<br><strong>“\u522b\u4eba\u7528\u4e0b\u6765\u600e\u4e48\u6837”<\/strong><\/p>\n <\/div>\n <div style=\"font-size:11px;color:#888780;margin-top:10px;text-align:center;\">\u65bd\u5de5\u7167\u7247\u662f\u4fe1\u4efb\u7684\u8f7d\u4f53\uff0c\u4e0d\u662f\u88c5\u9970<\/div>\n <\/div>\n <\/div>\n\n \n <div class=\"row row-3\">\n <div class=\"panel\">\n <div class=\"panel-header\">\n <span class=\"panel-tag tag-teal\">\u7b2c3\u6b65<\/span>\n <span class=\"panel-title\">\u7edf\u4e00\u7f16\u8f91\u00b7\u547d\u540d\u00b7\u538b\u7f29<\/span>\n <\/div>\n <div class=\"photo-flow\">\n <img decoding=\"async\" src=\"https:\/\/longmai-nt.com\/wp-content\/uploads\/2026\/06\/\u7167\u7247\u7f16\u8f91\u5e76\u4e0a\u4f20\u5a92\u4f53\u5e93\u4ee5\u53ca\u5d4c\u5165\u5230HTML\u7f51\u9875\u7684\u6d41\u7a0b-\u7edf\u4e00\u7f16\u8f91\u5c3a\u5bf8\u3001\u538b\u7f29\u3001\u547d\u540d.jpg\" alt=\"\u9a6c\u7ef4\u65af\u7edf\u4e00\u7f16\u8f91\u5c3a\u5bf8\u3001\u538b\u7f29\u3001\u547d\u540d\u7684\u64cd\u4f5c\u754c\u9762\">\n <\/div>\n <div style=\"font-size:11px;color:#5F5E5A;\">\u9a6c\u7ef4\u65af\u7edf\u4e00\u7f16\u8f91\u5c3a\u5bf8\u3001\u538b\u7f29\u3001\u547d\u540d\uff0c\u4fdd\u5b58\u5230\u7edf\u4e00\u6587\u4ef6\u5939<\/div>\n <\/div>\n <div class=\"panel\">\n <div class=\"panel-header\">\n <span class=\"panel-tag tag-blue\">\u7b2c4\u6b65<\/span>\n <span class=\"panel-title\">\u4e0a\u4f20\u5a92\u4f53\u5e93\u00b7\u590d\u5236\u94fe\u63a5<\/span>\n <\/div>\n <div class=\"photo-flow\">\n <img decoding=\"async\" src=\"https:\/\/longmai-nt.com\/wp-content\/uploads\/2026\/06\/\u7167\u7247\u7f16\u8f91\u5e76\u4e0a\u4f20\u5a92\u4f53\u5e93\u4ee5\u53ca\u5d4c\u5165\u5230HTML\u7f51\u9875\u7684\u6d41\u7a0b-\u4e0a\u4f20\u5230\u5a92\u4f53\u5e93\u5e76\u590d\u5236\u5730\u5740\u94fe\u63a5.jpg\" alt=\"\u4e0a\u4f20\u5230WordPress\u5a92\u4f53\u5e93\u5e76\u590d\u5236\u5730\u5740\u94fe\u63a5\">\n <\/div>\n <div style=\"font-size:11px;color:#5F5E5A;\">\u4e0a\u4f20\u5230WordPress\u5a92\u4f53\u5e93\uff0c\u70b9\u51fb\u6bcf\u5f20\u7167\u7247\u590d\u5236\u6587\u4ef6URL<\/div>\n <\/div>\n <div class=\"panel\">\n <div class=\"panel-header\">\n <span class=\"panel-tag tag-purple\">\u7b2c5\u6b65<\/span>\n <span class=\"panel-title\">\u628aURL\u53d1\u7ed9AI\u5d4c\u5165<\/span>\n <\/div>\n <div class=\"photo-flow\">\n <img decoding=\"async\" src=\"https:\/\/longmai-nt.com\/wp-content\/uploads\/2026\/06\/\u7167\u7247\u7f16\u8f91\u5e76\u4e0a\u4f20\u5a92\u4f53\u5e93\u4ee5\u53ca\u5d4c\u5165\u5230HTML\u7f51\u9875\u7684\u6d41\u7a0b-\u7ed9\u51faai\u6307\u4ee4.png\" alt=\"\u628a\u5a92\u4f53\u5e93URL\u590d\u5236\u7ed9AI\u7684\u64cd\u4f5c\u793a\u610f\">\n <\/div>\n <div style=\"font-size:11px;color:#5F5E5A;\">\u628aURL\u94fe\u63a5\u53d1\u7ed9AI\uff0cAI\u81ea\u52a8\u5d4c\u5165HTML\u4e2d\u7684img src<\/div>\n <\/div>\n <\/div>\n\n \n <div class=\"row row-2\">\n\n \n <div class=\"panel\">\n <div class=\"panel-header\">\n <span class=\"panel-tag tag-amber\">\u89c4\u8303<\/span>\n <span class=\"panel-title\">\u7167\u7247\u547d\u540d\u89c4\u8303<\/span>\n <\/div>\n\n <div style=\"font-size:12px;color:#5F5E5A;margin-bottom:8px;\">\u683c\u5f0f\uff1a<strong style=\"color:#2C2C2A;\">\u5730\u70b9+\u6237\u578b+\u54c1\u724c+\u4e3b\u673a\u578b\u53f7<\/strong>_\u7167\u7247\u5185\u5bb9\u63cf\u8ff0.jpg<\/div>\n\n <div class=\"naming-demo\">\n <span class=\"bad\">IMG_20260609_001.jpg<\/span>\n <span class=\"arrow\">\u2192<\/span>\n <span class=\"good\">\u5927\u6797\u9547\u81ea\u5efa\u623f\u65e5\u7acb\u6c34\u5885\u9002225\u4e3b\u673a\u4e00\u62d68_\u5916\u673a\u6392\u6c14\u9600\u4f4d\u7f6e.jpg<\/span>\n <\/div>\n <div class=\"naming-demo\">\n <span class=\"bad\">\u5fae\u4fe1\u56fe\u7247_20260609.jpg<\/span>\n <span class=\"arrow\">\u2192<\/span>\n <span class=\"good\">\u5927\u6797\u9547\u81ea\u5efa\u623f\u65e5\u7acb\u6c34\u5885\u9002225\u4e3b\u673a\u4e00\u62d68_\u6a2a1.jpg<\/span>\n <\/div>\n <div class=\"naming-demo\">\n <span class=\"bad\">\u65b0\u5efa\u6587\u4ef6\u5939\/QQ\u622a\u56fe.jpg<\/span>\n <span class=\"arrow\">\u2192<\/span>\n <span class=\"good\">\u5927\u6797\u9547\u81ea\u5efa\u623f\u65e5\u7acb\u6c34\u5885\u9002225\u4e3b\u673a\u4e00\u62d68_\u7ad64.jpg<\/span>\n <\/div>\n\n <table class=\"compare-table\" style=\"margin-top:12px;\">\n <thead>\n <tr><th>\u5173\u952e\u8bcd<\/th><th>\u542b\u4e49<\/th><th>\u5bf9\u5e94\u677f\u5757<\/th><\/tr>\n <\/thead>\n <tbody>\n <tr><td>\u5916\u673aXXX<\/td><td>\u5916\u673a\u5b89\u88c5\u76f8\u5173<\/td><td>\u5916\u673a\u4e3b\u7ba1\u8d70\u7ba1<\/td><\/tr>\n <tr><td>\u6a2aN<\/td><td>\u5ba4\u5185\u7ba1\u8def\u6a2a\u5411\u8d70\u7ebf<\/td><td>\u5ba4\u5185\u7ba1\u8def\u94fa\u8bbe<\/td><\/tr>\n <tr><td>\u7ad6N<\/td><td>\u7ebf\u63a7\u5668\/\u672b\u7aef\u76f8\u5173<\/td><td>\u7ebf\u63a7\u5668\u9884\u7559\u9884\u57cb<\/td><\/tr>\n <tr><td>\u6392\u6c14\u9600<\/td><td>\u5916\u673a\u7ec6\u8282<\/td><td>\u5916\u673a\u4e3b\u7ba1\u8d70\u7ba1<\/td><\/tr>\n <\/tbody>\n <\/table>\n <\/div>\n\n \n <div class=\"panel\">\n <div class=\"panel-header\">\n <span class=\"panel-tag tag-purple\">\u53d1\u5e03<\/span>\n <span class=\"panel-title\">WordPress\u7c98\u8d34HTML<\/span>\n <\/div>\n\n <div style=\"background:#FAECE7;border-radius:6px;padding:10px 12px;margin-bottom:12px;font-size:12px;\">\n <strong style=\"color:#D85A30;\">\u26a0\ufe0f \u4e0d\u662f”\u4ee3\u7801\u7f16\u8f91\u5668”\u6a21\u5f0f\uff01<\/strong><br>\n <span style=\"color:#5F5E5A;\">\u6b63\u786e\u505a\u6cd5\u662f\u6dfb\u52a0 <strong style=\"color:#2C2C2A;\">“\u81ea\u5b9a\u4e49HTML”<\/strong> \u533a\u5757<\/span>\n <\/div>\n\n <div class=\"wp-steps\">\n <div class=\"wp-step\">\n <div class=\"text\">\u6253\u5f00WordPress\u540e\u53f0\uff0c<strong>\u65b0\u5efa\u6216\u7f16\u8f91\u9875\u9762<\/strong><\/div>\n <\/div>\n <div class=\"wp-step\">\n <div class=\"text\">\u5728\u7f16\u8f91\u5668\u4e2d\u70b9\u51fb <strong>“+”<\/strong> \u6309\u94ae<\/div>\n <\/div>\n <div class=\"wp-step\">\n <div class=\"text\">\u641c\u7d22 <strong>“\u81ea\u5b9a\u4e49HTML”<\/strong> \u5e76\u9009\u4e2d\u8be5\u533a\u5757<\/div>\n <\/div>\n <div class=\"wp-step\">\n <div class=\"text\">\u628aAI\u751f\u6210\u7684<strong>\u5b8c\u6574HTML\u4ee3\u7801\u7c98\u8d34<\/strong>\u8fdb\u53bb<\/div>\n <\/div>\n <div class=\"wp-step\">\n <div class=\"text\">\u70b9\u51fb<strong>“\u9884\u89c8”<\/strong>\u68c0\u67e5\u6548\u679c<\/div>\n <\/div>\n <div class=\"wp-step\">\n <div class=\"text\">\u786e\u8ba4\u65e0\u8bef\u540e<strong>\u53d1\u5e03<\/strong><\/div>\n <\/div>\n <\/div>\n\n <div style=\"font-size:11px;color:#888780;margin-top:8px;\">\ud83d\udca1 \u53ef\u6309\u677f\u5757\u62c6\u6210\u591a\u4e2a”\u81ea\u5b9a\u4e49HTML”\u533a\u5757\uff0c\u65b9\u4fbf\u5355\u72ec\u7f16\u8f91<\/div>\n <\/div>\n <\/div>\n\n \n <div class=\"row row-3-1\">\n\n \n <div class=\"panel\">\n <div class=\"panel-header\">\n <span class=\"panel-tag tag-teal\">\u6a21\u677f<\/span>\n <span class=\"panel-title\">\u628aURL\u53d1\u7ed9AI\u7684\u6307\u4ee4\u6a21\u677f<\/span>\n <\/div>\n <div class=\"code-block\">\n<span class=\"comment\">\/\/ \u6b65\u9aa41\uff1a\u63d0\u4f9b\u5ba2\u6237\u4fe1\u606f<\/span>\n\u5ba2\u6237\u59d3\u540d\uff1a\u5f90\u5148\u751f\n\u5730\u5740\uff1a\u5929\u5e9c\u65b0\u533a\u5927\u6797\u9547\n\u6237\u578b\uff1a3\u5c42\u81ea\u5efa\u623f\uff08\u672c\u6b21\u88c5\u4fee2\u697c\uff09\n\u5ba2\u6237\u539f\u8bdd\uff1a”\u6548\u679c\u8981\u597d” “\u5c3d\u91cf\u914d\u5927\u70b9” “\u4e0d\u8981\u70ed\u6c34\u5ffd\u51b7\u5ffd\u70ed”\n\n<span class=\"comment\">\/\/ \u6b65\u9aa42\uff1a\u63d0\u4f9b\u65b9\u6848\u914d\u7f6e<\/span>\n\u5916\u673a\uff1a\u65e5\u7acb RAS-225FPUEN2Q\/M\uff0820kW\/23kW\uff09\n\u5185\u673a\uff1a\u65e5\u7acb\u96f6\u8d8a \u00d7 8\u53f0\uff0c\u8d85\u914d\u7387183%\n\u7cfb\u7edf\uff1a\u5929\u6c34\u5730\u6c34\u4e24\u8054\u4f9b + \u6052\u6e29\u6052\u538b\u70ed\u6c34\n\n<span class=\"comment\">\/\/ \u6b65\u9aa43\uff1a\u63d0\u4f9b\u7167\u7247URL<\/span>\n\u8bf7\u628a\u8fd9\u4e9b\u94fe\u63a5\u66ff\u6362\u5230HTML\u4ee3\u7801\u91cc\u9762\uff1a\n<span class=\"keyword\">https:\/\/<\/span>longmai-nt.com\/wp-content\/uploads\/2026\/06\/<span class=\"string\">…_\u6a2a1.jpg<\/span>\n<span class=\"keyword\">https:\/\/<\/span>longmai-nt.com\/wp-content\/uploads\/2026\/06\/<span class=\"string\">…_\u6a2a2.jpg<\/span>\n<span class=\"keyword\">https:\/\/<\/span>longmai-nt.com\/wp-content\/uploads\/2026\/06\/<span class=\"string\">…_\u5916\u673a\u7ad63.jpg<\/span>\n…\n\n<span class=\"comment\">\/\/ \u6b65\u9aa44\uff1a\u7279\u6b8a\u8981\u6c42<\/span>\n\u4e0d\u4f53\u73b0\u62a5\u4ef7 \u00b7 \u4f7f\u7528\u5357\u5317\u5bcc\u68ee\u70ed\u7ebf \u00b7 \u5730\u6696\u5c1a\u672a\u8fdb\u573a\n <\/div>\n <\/div>\n\n \n <div class=\"panel\">\n <div class=\"panel-header\">\n <span class=\"panel-tag tag-amber\">\u6807\u51c6<\/span>\n <span class=\"panel-title\">\u7167\u7247\u538b\u7f29\u89c4\u8303<\/span>\n <\/div>\n <table class=\"compare-table\">\n <thead>\n <tr><th>\u7528\u9014<\/th><th>\u5c3a\u5bf8<\/th><th>\u6587\u4ef6\u5927\u5c0f<\/th><\/tr>\n <\/thead>\n <tbody>\n <tr><td>\u7f51\u683c\u7f29\u7565\u56fe<\/td><td>800\u00d7600px<\/td><td>80~150KB<\/td><\/tr>\n <tr><td>\u70b9\u51fb\u653e\u5927<\/td><td>1920\u00d71440px<\/td><td>300~500KB<\/td><\/tr>\n <\/tbody>\n <\/table>\n <div style=\"font-size:12px;color:#5F5E5A;margin-top:10px;\">\u5de5\u5177\uff1aTinyPNG \/ ImageOptim<\/div>\n <div style=\"font-size:12px;color:#5F5E5A;\">\u538b\u7f29\u7387\uff1a70%~80%<\/div>\n <div style=\"font-size:11px;color:#888780;margin-top:6px;\">\u624b\u673a\u539f\u56fe3~8MB\/\u5f20\uff0c\u4e0d\u538b\u7f2915\u5f20=60~120MB\uff0c\u9875\u9762\u52a0\u8f7d\u6781\u6162<\/div>\n\n <div style=\"margin-top:14px;border-top:1px solid #E8E6E0;padding-top:12px;\">\n <div style=\"font-size:12px;font-weight:500;color:#2C2C2A;margin-bottom:8px;\">\u7167\u7247\u5206\u7ec4\u5efa\u8bae<\/div>\n <table class=\"compare-table\">\n <thead><tr><th>\u5206\u7ec4<\/th><th>\u5f20\u6570<\/th><th>\u5c55\u793a\u91cd\u70b9<\/th><\/tr><\/thead>\n <tbody>\n <tr><td>\u5916\u673a\u4e3b\u7ba1\u8d70\u7ba1<\/td><td>2~3\u5f20<\/td><td>\u4e3b\u673a\u4f4d\u7f6e\u3001\u6392\u6c14\u9600\u3001\u51cf\u9707<\/td><\/tr>\n <tr><td>\u5ba4\u5185\u7ba1\u8def\u94fa\u8bbe<\/td><td>6~8\u5f20<\/td><td>\u6a2a\u5e73\u7ad6\u76f4\u3001\u4fdd\u6e29\u3001\u56fa\u5b9a<\/td><\/tr>\n <tr><td>\u7ebf\u63a7\u5668\/\u7ec6\u8282<\/td><td>2~4\u5f20<\/td><td>\u9884\u7559\u9884\u57cb\u3001\u6210\u54c1\u4fdd\u62a4<\/td><\/tr>\n <\/tbody>\n <\/table>\n <\/div>\n <\/div>\n <\/div>\n\n \n <div class=\"row row-2\">\n <div class=\"panel\" style=\"border-left:3px solid #0F6E56;\">\n <div class=\"panel-header\">\n <span class=\"panel-tag tag-teal\">\u2705 \u505a<\/span>\n <span class=\"panel-title\">\u6700\u4f73\u5b9e\u8df5<\/span>\n <\/div>\n <div class=\"checklist\">\n <div class=\"item\"><span class=\"icon-check\">\u2713<\/span><span>\u7167\u7247\u7edf\u4e00\u547d\u540d \u2192 AI\u80fd\u7406\u89e3\u5185\u5bb9<\/span><\/div>\n <div class=\"item\"><span class=\"icon-check\">\u2713<\/span><span>\u8ba9\u9a6c\u7ef4\u65af\u7edf\u4e00\u7f16\u8f91\u5c3a\u5bf8\u3001\u538b\u7f29 \u2192 \u9875\u9762\u52a0\u8f7d\u5feb<\/span><\/div>\n <div class=\"item\"><span class=\"icon-check\">\u2713<\/span><span>\u5a92\u4f53\u5e93URL\u4ea4\u7ed9AI \u2192 \u5d4c\u5165\u51c6\u786e<\/span><\/div>\n <div class=\"item\"><span class=\"icon-check\">\u2713<\/span><span>WordPress\u7528”\u81ea\u5b9a\u4e49HTML”\u533a\u5757\u7c98\u8d34<\/span><\/div>\n <div class=\"item\"><span class=\"icon-check\">\u2713<\/span><span>7\u677f\u5757\u7ed3\u6784 \u2192 \u4fe1\u606f\u5b8c\u6574\u3001\u903b\u8f91\u6e05\u6670<\/span><\/div>\n <div class=\"item\"><span class=\"icon-check\">\u2713<\/span><span>\u4e0d\u4f53\u73b0\u62a5\u4ef7 \u2192 \u5f15\u6d41\u5230\u95e8\u5e97\u54a8\u8be2<\/span><\/div>\n <\/div>\n <\/div>\n <div class=\"panel\" style=\"border-left:3px solid #D85A30;\">\n <div class=\"panel-header\">\n <span class=\"panel-tag tag-coral\">\u274c \u4e0d\u505a<\/span>\n <span class=\"panel-title\">\u907f\u5751\u6e05\u5355<\/span>\n <\/div>\n <div class=\"checklist\">\n <div class=\"item\"><span class=\"icon-cross\">\u2717<\/span><span>\u522b\u8ba9\u5de5\u4eba\u968f\u4fbf\u547d\u540d\uff08IMG_xxx.jpg\u6ca1\u4eba\u770b\u5f97\u61c2\uff09<\/span><\/div>\n <div class=\"item\"><span class=\"icon-cross\">\u2717<\/span><span>\u522b\u7528\u5fae\u4fe1\u538b\u7f29\u56fe\uff08\u753b\u8d28\u5dee\uff0c\u6848\u4f8b\u5206\u4eab\u8981\u6e05\u6670\uff09<\/span><\/div>\n <div class=\"item\"><span class=\"icon-cross\">\u2717<\/span><span>\u522b\u5728\u9875\u9762\u91cc\u653e\u62a5\u4ef7\uff08\u907f\u514d\u5728\u7ebf\u6bd4\u4ef7\uff09<\/span><\/div>\n <div class=\"item\"><span class=\"icon-cross\">\u2717<\/span><span>\u522b\u8df3\u8fc7\u4eba\u5de5\u6821\u5bf9\uff08AI\u65e0\u6cd5\u8bfb\u56fe\uff0c\u63cf\u8ff0\u53ef\u80fd\u4e0d\u51c6\uff09<\/span><\/div>\n <div class=\"item\"><span class=\"icon-cross\">\u2717<\/span><span>\u522b\u7528”\u4ee3\u7801\u7f16\u8f91\u5668”\u6a21\u5f0f\u7c98\u8d34HTML\uff08\u4f1a\u7834\u574f\u7f16\u8f91\u5668\uff09<\/span><\/div>\n <div class=\"item\"><span class=\"icon-cross\">\u2717<\/span><span>\u522b\u8df3\u8fc7\u9a6c\u7ef4\u65af\u7684\u7f16\u8f91\u6b65\u9aa4\uff08\u547d\u540d+\u538b\u7f29\u662f\u540e\u7eed\u4e00\u5207\u57fa\u7840\uff09<\/span><\/div>\n <\/div>\n <\/div>\n <\/div>\n\n \n <div class=\"panel\">\n <div class=\"panel-header\">\n <span class=\"panel-tag tag-blue\">FAQ<\/span>\n <span class=\"panel-title\">\u5e38\u89c1\u95ee\u9898<\/span>\n <\/div>\n <table class=\"compare-table\">\n <thead>\n <tr><th>\u95ee\u9898<\/th><th>\u7b54\u6848<\/th><\/tr>\n <\/thead>\n <tbody>\n <tr><td>\u5730\u6696\u8fd8\u6ca1\u8fdb\u573a\uff0c\u7167\u7247\u600e\u4e48\u5904\u7406\uff1f<\/td><td>\u5728\u677f\u5757\u6ce8\u660e”\u5730\u6696\u5c1a\u672a\u8fdb\u573a”\uff0c\u7528\u5360\u4f4d\u8bf4\u660e\u4ee3\u66ff\u3002\u7b49\u8fdb\u573a\u540e\u8865\u62cd\u7167\u7247\u66f4\u65b0\u9875\u9762\u3002<\/td><\/tr>\n <tr><td>AI\u8bf4”\u65e0\u6cd5\u8bfb\u53d6\u56fe\u7247”\u600e\u4e48\u529e\uff1f<\/td><td>\u8ba9\u9a6c\u7ef4\u65af\u5728\u547d\u540d\u65f6\u628a\u5185\u5bb9\u5199\u6e05\u695a\uff08\u5982_\u5916\u673a\u6392\u6c14\u9600\u4f4d\u7f6e.jpg\uff09\uff0cAI\u6839\u636e\u6587\u4ef6\u540d\u63a8\u65ad\u5185\u5bb9\uff0c\u53d1\u5e03\u524d\u4eba\u5de5\u6838\u5bf9\u3002<\/td><\/tr>\n <tr><td>WordPress\u91cc\u76f4\u63a5\u62d6\u56fe\u7247\u4e0d\u884c\u5417\uff1f<\/td><td>\u53ef\u4ee5\uff0c\u4f46\u547d\u540d\u6df7\u4e71\u3001\u65e0\u6cd5\u538b\u7f29\u3001AI\u65e0\u6cd5\u8bfb\u53d6\u3002\u4e00\u7bc7\u6848\u4f8b\u53ef\u62d6\u56fe\uff0c\u6279\u91cf\u505a\u5fc5\u987b\u8d70\u89c4\u8303\u6d41\u7a0b\u3002<\/td><\/tr>\n <tr><td>\u4e00\u4e2a\u9875\u9762\u653e\u591a\u4e2a”\u81ea\u5b9a\u4e49HTML”\u533a\u5757\uff1f<\/td><td>\u53ef\u4ee5\u3002\u6309\u677f\u5757\u62c6\u6210\u591a\u4e2a\u533a\u5757\uff0c\u65b9\u4fbf\u5355\u72ec\u7f16\u8f91\u67d0\u4e2a\u677f\u5757\uff0c\u4e0d\u7528\u6bcf\u6b21\u64cd\u4f5c\u6574\u6bb5\u4ee3\u7801\u3002<\/td><\/tr>\n <\/tbody>\n <\/table>\n <\/div>\n\n \n <div class=\"canvas-footer\">\n \u9f99\u8109\u6696\u901a \u00b7 \u4e13\u6ce8\u8212\u9002\u8282\u80fd\u8bbe\u8ba1 \u00b7 \u59cb\u4e8e2004 | \u672c\u6587\u7531\u9f99\u8109\u6696\u901a\u56e2\u961f\u4e0eAI\u534f\u4f5c\u5b8c\u6210 \u00b7 2026\u5e746\u6708\n <\/div>\n\n<\/div>\n\n<\/body>\n<\/html>\n\n\n\n<div data-wp-context=\"{ "autoclose": false, "accordionItems": [] }\" data-wp-interactive=\"core\/accordion\" role=\"group\" class=\"wp-block-accordion is-layout-flow wp-block-accordion-is-layout-flow\">\n<div data-wp-class--is-open=\"state.isOpen\" data-wp-context=\"{ "id": "accordion-item-1", "openByDefault": false }\" data-wp-init=\"callbacks.initAccordionItems\" data-wp-on-window--hashchange=\"callbacks.hashChange\" class=\"wp-block-accordion-item is-layout-flow wp-block-accordion-item-is-layout-flow\">\n<h3 class=\"wp-block-accordion-heading\"><button aria-expanded=\"false\" aria-controls=\"accordion-item-1-panel\" data-wp-bind--aria-expanded=\"state.isOpen\" data-wp-on--click=\"actions.toggle\" data-wp-on--keydown=\"actions.handleKeyDown\" id=\"accordion-item-1\" type=\"button\" class=\"wp-block-accordion-headingtoggle\"><span class=\"wp-block-accordion-headingtoggle-title\">WordPress \u753b\u5e03\u9875\u9762\u6784\u5efa\u53ca\u907f\u5751\u6307\u5357<\/span><span class=\"wp-block-accordion-heading__toggle-icon\" aria-hidden=\"true\">+<\/span><\/button><\/h3>\n\n\n\n<div inert aria-labelledby=\"accordion-item-1\" data-wp-bind--inert=\"!state.isOpen\" id=\"accordion-item-1-panel\" role=\"region\" class=\"wp-block-accordion-panel is-layout-flow wp-block-accordion-panel-is-layout-flow\">\n\n<!DOCTYPE html>\n<html lang=\"zh-CN\">\n<head>\n<meta charset=\"UTF-8\">\n<meta name=\"viewport\" content=\"width=device-width,initial-scale=1.0\">\n<title>\u9f99\u8109\u6696\u901a \u00b7 WordPress\u53d1\u5e03\u907f\u5751\u5168\u6307\u5357<\/title>\n<style>\n\/ ============ \u57fa\u7840\u91cd\u7f6e\u4e0e\u53d8\u91cf ============ \/\n:root {\n --maxw: 1200px;\n --nav-w: 260px;\n --primary: #0d7377;\n --primary-dark: #094e51;\n --primary-light: #14a3a8;\n --accent: #e8a838;\n --accent-dark: #c78c20;\n --bg: #f5f7fa;\n --bg-white: #ffffff;\n --text: #2c3e50;\n --text-light: #6b7b8d;\n --border: #dce3ea;\n --success: #27ae60;\n --danger: #e74c3c;\n --warning: #f39c12;\n --code-bg: #1e293b;\n --code-text: #e2e8f0;\n --header-h: 80px;\n --nav-gap: 24px;\n scroll-behavior: smooth;\n}\n\n { margin:0; padding:0; box-sizing:border-box; }\n\nhtml { scroll-margin-top: calc(var(--header-h) + 60px); }\n\nbody {\n font-family: -apple-system, BlinkMacSystemFont, \"Segoe UI\", \"PingFang SC\", \"Microsoft YaHei\", sans-serif;\n color: var(--text);\n background: var(--bg);\n line-height: 1.75;\n font-size: 15px;\n}\n\n\/* ============ \u9875\u9762\u5bb9\u5668 ============ \/\n.page-wrap {\n max-width: var(--maxw);\n margin: 0 auto;\n padding: 32px 24px;\n display: flex;\n gap: var(--nav-gap);\n align-items: flex-start;\n}\n\n\/ ============ \u5de6\u4fa7\u5bfc\u822a ============ \/\n.side-nav {\n width: var(--nav-w);\n flex-shrink: 0;\n position: sticky;\n top: var(--header-h);\n max-height: calc(100vh - var(--header-h) - 32px);\n overflow-y: auto;\n background: var(--bg-white);\n border-radius: 12px;\n border: 1px solid var(--border);\n padding: 20px 16px;\n scrollbar-width: thin;\n}\n\n.side-nav::-webkit-scrollbar { width: 4px; }\n.side-nav::-webkit-scrollbar-thumb { background: var(--border); border-radius: 2px; }\n\n.nav-logo {\n font-size: 14px;\n font-weight: 700;\n color: var(--primary);\n padding-bottom: 12px;\n border-bottom: 2px solid var(--primary);\n margin-bottom: 12px;\n letter-spacing: 1px;\n}\n\n.nav-section {\n font-size: 11px;\n font-weight: 700;\n color: var(--primary-dark);\n text-transform: uppercase;\n letter-spacing: 1.5px;\n padding: 12px 0 4px;\n margin-top: 8px;\n}\n\n.nav-section:first-child { margin-top: 0; }\n\n.nav-link {\n display: block;\n padding: 5px 8px;\n margin: 1px 0;\n color: var(--text-light);\n text-decoration: none;\n font-size: 13px;\n border-radius: 6px;\n transition: all .2s;\n border-left: 3px solid transparent;\n}\n\n.nav-link:hover {\n color: var(--primary);\n background: rgba(13,115,119,0.06);\n border-left-color: var(--primary-light);\n}\n\n.nav-link.active {\n color: var(--primary);\n background: rgba(13,115,119,0.1);\n border-left-color: var(--primary);\n font-weight: 600;\n}\n\n\/ ============ \u53f3\u4fa7\u4e3b\u5185\u5bb9 ============ \/\n.main-content {\n flex: 1;\n min-width: 0;\n}\n\n\/ ============ Hero \u533a\u57df ============ \/\n.hero {\n background: linear-gradient(135deg, var(--primary-dark) 0%, var(--primary) 60%, var(--primary-light) 100%);\n color: #fff !important;\n border-radius: 16px;\n padding: 48px 40px;\n margin-bottom: 32px;\n position: relative;\n overflow: hidden;\n}\n\n.hero::after {\n content: '';\n position: absolute;\n top: -50%;\n right: -20%;\n width: 400px;\n height: 400px;\n border-radius: 50%;\n background: rgba(255,255,255,0.04);\n}\n\n.hero h1, .hero h2, .hero p, .hero span, .hero li { color: #fff !important; }\n\n.hero h1 {\n font-size: 28px;\n font-weight: 800;\n margin-bottom: 8px;\n letter-spacing: 1px;\n}\n\n.hero h2 {\n font-size: 16px;\n font-weight: 400;\n opacity: .85;\n margin-bottom: 20px;\n}\n\n.hero-badges {\n display: flex;\n gap: 10px;\n flex-wrap: wrap;\n}\n\n.hero-badge {\n display: inline-flex;\n align-items: center;\n gap: 6px;\n padding: 6px 14px;\n background: rgba(255,255,255,0.15);\n border-radius: 20px;\n font-size: 13px;\n font-weight: 500;\n backdrop-filter: blur(4px);\n}\n\n.hero-badge .emoji { font-size: 15px; }\n\n\/ ============ \u7ae0\u8282\u5361\u7247 ============ \/\n.chapter {\n background: var(--bg-white);\n border-radius: 12px;\n border: 1px solid var(--border);\n padding: 32px;\n margin-bottom: 24px;\n scroll-margin-top: calc(var(--header-h) + 20px);\n}\n\n.chapter-head {\n display: flex;\n align-items: center;\n gap: 12px;\n margin-bottom: 20px;\n padding-bottom: 16px;\n border-bottom: 2px solid var(--border);\n}\n\n.chapter-num {\n display: inline-flex;\n align-items: center;\n justify-content: center;\n width: 36px;\n height: 36px;\n border-radius: 10px;\n font-size: 15px;\n font-weight: 800;\n color: #fff;\n flex-shrink: 0;\n}\n\n.chapter-num.green { background: var(--success); }\n.chapter-num.blue { background: var(--primary); }\n.chapter-num.orange { background: var(--warning); }\n.chapter-num.red { background: var(--danger); }\n\n.chapter-title {\n font-size: 20px;\n font-weight: 700;\n color: var(--text);\n}\n\n.chapter-title small {\n font-size: 13px;\n font-weight: 400;\n color: var(--text-light);\n margin-left: 8px;\n}\n\n\/ ============ \u63a8\u8350\u6807\u7b7e ============ \/\n.tag {\n display: inline-block;\n padding: 2px 10px;\n border-radius: 12px;\n font-size: 11px;\n font-weight: 700;\n letter-spacing: .5px;\n vertical-align: middle;\n}\n\n.tag-rec { background: #e8f5e9; color: #2e7d32; }\n.tag-new { background: #e3f2fd; color: #1565c0; }\n.tag-warn { background: #fff3e0; color: #e65100; }\n.tag-danger { background: #fce4ec; color: #c62828; }\n\n\/ ============ \u901a\u7528\u6392\u7248 ============ \/\nh3 {\n font-size: 17px;\n font-weight: 700;\n color: var(--primary-dark);\n margin: 24px 0 10px;\n padding-left: 10px;\n border-left: 3px solid var(--primary);\n}\n\nh4 {\n font-size: 15px;\n font-weight: 700;\n color: var(--text);\n margin: 18px 0 8px;\n}\n\np { margin-bottom: 12px; }\n\nul, ol { margin: 8px 0 14px 20px; }\nli { margin-bottom: 5px; }\n\n\/ ============ \u8868\u683c ============ \/\ntable {\n width: 100%;\n border-collapse: collapse;\n margin: 12px 0 18px;\n font-size: 14px;\n}\n\nth {\n background: var(--primary);\n color: #fff !important;\n padding: 10px 14px;\n text-align: left;\n font-weight: 600;\n font-size: 13px;\n}\n\ntd {\n padding: 9px 14px;\n border-bottom: 1px solid var(--border);\n vertical-align: top;\n}\n\ntr:nth-child(even) td { background: rgba(13,115,119,0.03); }\n\n\/ ============ \u4ee3\u7801\u5757 ============ \/\n.code-block {\n background: var(--code-bg);\n color: var(--code-text);\n border-radius: 8px;\n padding: 16px 20px;\n margin: 10px 0 16px;\n font-family: \"JetBrains Mono\", \"Fira Code\", Consolas, monospace;\n font-size: 13px;\n line-height: 1.6;\n overflow-x: auto;\n white-space: pre;\n}\n\n.code-block .cm { color: #64748b; }\n.code-block .kw { color: #c084fc; }\n.code-block .str { color: #86efac; }\n.code-block .fn { color: #67e8f9; }\n.code-block .num { color: #fbbf24; }\n\n\/ ============ \u63d0\u793a\u6846 ============ \/\n.tip, .warn, .danger, .info {\n border-radius: 8px;\n padding: 14px 18px;\n margin: 14px 0;\n font-size: 14px;\n line-height: 1.6;\n}\n\n.tip { background: #e8f5e9; border-left: 4px solid var(--success); }\n.warn { background: #fff8e1; border-left: 4px solid var(--warning); }\n.danger { background: #fce4ec; border-left: 4px solid var(--danger); }\n.info { background: #e3f2fd; border-left: 4px solid #1976d2; }\n\n.tip::before { content: '\u2705 '; font-weight: 700; }\n.warn::before { content: '\u26a0\ufe0f '; font-weight: 700; }\n.danger::before { content: '\ud83d\udd34 '; font-weight: 700; }\n.info::before { content: '\u2139\ufe0f '; font-weight: 700; }\n\n\/ ============ \u5bf9\u6bd4\u9762\u677f ============ \/\n.compare-grid {\n display: grid;\n grid-template-columns: 1fr 1fr;\n gap: 16px;\n margin: 14px 0;\n}\n\n.compare-box {\n border-radius: 10px;\n padding: 18px;\n font-size: 14px;\n}\n\n.compare-box.good {\n background: #e8f5e9;\n border: 1px solid #a5d6a7;\n}\n\n.compare-box.bad {\n background: #fce4ec;\n border: 1px solid #ef9a9a;\n}\n\n.compare-box .label {\n font-weight: 700;\n font-size: 13px;\n margin-bottom: 8px;\n display: block;\n}\n\n.compare-box.good .label { color: #2e7d32; }\n.compare-box.bad .label { color: #c62828; }\n\n\/ ============ \u6298\u53e0\u9762\u677f ============ \/\ndetails {\n border: 1px solid var(--border);\n border-radius: 8px;\n margin: 8px 0;\n background: var(--bg-white);\n}\n\nsummary {\n padding: 12px 16px;\n cursor: pointer;\n font-weight: 600;\n font-size: 14px;\n color: var(--primary-dark);\n background: rgba(13,115,119,0.03);\n border-radius: 8px;\n list-style: none;\n display: flex;\n align-items: center;\n gap: 8px;\n user-select: none;\n}\n\nsummary::-webkit-details-marker { display: none; }\n\nsummary::before {\n content: '\u25b6';\n font-size: 10px;\n transition: transform .2s;\n color: var(--primary);\n}\n\ndetails[open] summary::before {\n transform: rotate(90deg);\n}\n\ndetails .detail-body {\n padding: 14px 16px;\n border-top: 1px solid var(--border);\n}\n\n\/ ============ \u6d41\u7a0b\u6b65\u9aa4 ============ \/\n.step-flow {\n display: flex;\n gap: 0;\n margin: 16px 0;\n flex-wrap: wrap;\n}\n\n.step-item {\n flex: 1;\n min-width: 120px;\n text-align: center;\n padding: 14px 10px;\n background: var(--bg);\n border: 1px solid var(--border);\n font-size: 13px;\n position: relative;\n}\n\n.step-item:first-child { border-radius: 8px 0 0 8px; }\n.step-item:last-child { border-radius: 0 8px 8px 0; }\n\n.step-num {\n display: inline-flex;\n align-items: center;\n justify-content: center;\n width: 28px;\n height: 28px;\n border-radius: 50%;\n background: var(--primary);\n color: #fff;\n font-size: 13px;\n font-weight: 700;\n margin-bottom: 6px;\n}\n\n.step-item .step-label {\n display: block;\n font-weight: 600;\n color: var(--text);\n margin-bottom: 2px;\n}\n\n.step-item .step-desc {\n color: var(--text-light);\n font-size: 12px;\n}\n\n.step-arrow {\n display: flex;\n align-items: center;\n color: var(--primary-light);\n font-size: 18px;\n padding: 0 2px;\n}\n\n\/ ============ \u68c0\u67e5\u6e05\u5355 ============ \/\n.checklist {\n list-style: none;\n margin: 0;\n padding: 0;\n}\n\n.checklist li {\n padding: 7px 0 7px 28px;\n position: relative;\n border-bottom: 1px dashed var(--border);\n font-size: 14px;\n}\n\n.checklist li::before {\n position: absolute;\n left: 0;\n font-size: 16px;\n}\n\n.checklist.pass li::before { content: '\u2705'; }\n.checklist.fail li::before { content: '\u274c'; }\n\n\/ ============ \u51b3\u7b56\u6d41\u7a0b\u56fe ============ \/\n.flow-diagram {\n background: var(--bg);\n border: 1px solid var(--border);\n border-radius: 10px;\n padding: 24px;\n margin: 16px 0;\n text-align: center;\n}\n\n.flow-node {\n display: inline-block;\n padding: 10px 20px;\n border-radius: 8px;\n font-size: 14px;\n font-weight: 600;\n margin: 6px;\n}\n\n.flow-node.start { background: var(--primary); color: #fff; }\n.flow-node.decision { background: #fff3e0; border: 2px solid var(--warning); color: #e65100; }\n.flow-node.css-way { background: #e8f5e9; border: 2px solid var(--success); color: #2e7d32; }\n.flow-node.iframe-way { background: #e3f2fd; border: 2px solid #1976d2; color: #1565c0; }\n\n.flow-arrow {\n display: block;\n color: var(--text-light);\n font-size: 20px;\n margin: 4px 0;\n}\n\n.flow-label {\n font-size: 12px;\n color: var(--text-light);\n margin: 0 8px;\n}\n\n\/ ============ \u9875\u811a ============ \/\n.page-footer {\n text-align: center;\n color: var(--text-light);\n font-size: 12px;\n padding: 24px 0 12px;\n border-top: 1px solid var(--border);\n margin-top: 16px;\n}\n\n\/ ============ \u54cd\u5e94\u5f0f ============ \/\n@media (max-width: 900px) {\n .page-wrap { flex-direction: column; }\n .side-nav {\n width: 100%;\n position: static;\n max-height: none;\n }\n .compare-grid { grid-template-columns: 1fr; }\n .step-flow { flex-direction: column; }\n .step-item { border-radius: 8px !important; }\n .step-arrow { transform: rotate(90deg); justify-content: center; }\n .hero { padding: 32px 24px; }\n .hero h1 { font-size: 22px; }\n .chapter { padding: 20px; }\n}\n<\/style>\n<\/head>\n<body>\n\n<div class=\"page-wrap\">\n\n\n<nav class=\"side-nav\">\n <div class=\"nav-logo\">\ud83d\udccb \u9f99\u8109\u907f\u5751\u6307\u5357<\/div>\n\n <div class=\"nav-section\">\u51b3\u7b56\u603b\u89c8<\/div>\n <a class=\"nav-link\" href=\"#sec-decision\">\u65b9\u6848\u9009\u62e9\u51b3\u7b56\u56fe<\/a>\n\n <div class=\"nav-section\">\u9996\u9009\u65b9\u6848<\/div>\n <a class=\"nav-link\" href=\"#sec-css-overview\">\u7eafCSS\u65b9\u6848\u603b\u89c8 <span class=\"tag tag-rec\">\u63a8\u8350<\/span><\/a>\n <a class=\"nav-link\" href=\"#sec-css-tab\">Tab\u5207\u6362 :checked<\/a>\n <a class=\"nav-link\" href=\"#sec-css-faq\">FAQ\u624b\u98ce\u7434 details<\/a>\n <a class=\"nav-link\" href=\"#sec-css-scroll\">\u5e73\u6ed1\u6eda\u52a8<\/a>\n <a class=\"nav-link\" href=\"#sec-css-pub\">\u53d1\u5e03\u4e09\u6b65\u6cd5<\/a>\n\n <div class=\"nav-section\">\u5907\u9009\u65b9\u6848<\/div>\n <a class=\"nav-link\" href=\"#sec-iframe-overview\">iframe\u5d4c\u5165 <span class=\"tag tag-warn\">\u590d\u6742\u4ea4\u4e92<\/span><\/a>\n <a class=\"nav-link\" href=\"#sec-iframe-height\">\u9ad8\u5ea6\u81ea\u9002\u5e94<\/a>\n\n <div class=\"nav-section\">CSS\u907f\u5751<\/div>\n <a class=\"nav-link\" href=\"#sec-selector\">\u9009\u62e9\u5668\u9677\u9631 \u2605<\/a>\n <a class=\"nav-link\" href=\"#sec-theme\">\u4e3b\u9898\u51b2\u7a81\u9632\u63a7<\/a>\n <a class=\"nav-link\" href=\"#sec-sticky-nav\">\u56fa\u5b9a\u60ac\u6d6e\u5bfc\u822a<\/a>\n\n <div class=\"nav-section\">\u5b89\u5168\u7ea2\u7ebf<\/div>\n <a class=\"nav-link\" href=\"#sec-security\">XML-RPC\u98ce\u9669<\/a>\n <a class=\"nav-link\" href=\"#sec-precise\">\u7cbe\u786e\u66ff\u6362\u539f\u5219<\/a>\n\n <div class=\"nav-section\">\u9644\u5f55<\/div>\n <a class=\"nav-link\" href=\"#sec-checklist\">\u81ea\u68c0\u6e05\u5355<\/a>\n <a class=\"nav-link\" href=\"#sec-ai-prompt\">AI\u6307\u4ee4\u6a21\u677f<\/a>\n <a class=\"nav-link\" href=\"#sec-case-guide\">\u6848\u4f8b\u5206\u4eab\u521b\u5efa\u6d41\u7a0b<\/a>\n<\/nav>\n\n\n<main class=\"main-content\">\n\n\n<div class=\"hero\">\n <h1>WordPress \u53d1\u5e03\u907f\u5751\u5168\u6307\u5357<\/h1>\n <h2>\u9f99\u8109\u6696\u901a \u00b7 \u7eafCSS + iframe \u53cc\u8f68\u65b9\u6848 \u00b7 \u751f\u4ea7\u73af\u5883\u53cd\u590d\u9a8c\u8bc1<\/h2>\n <div class=\"hero-badges\">\n <span class=\"hero-badge\"><span class=\"emoji\">\u2705<\/span> \u7eafCSS\u4f18\u5148<\/span>\n <span class=\"hero-badge\"><span class=\"emoji\">\ud83d\udce6<\/span> \u4e00\u952e\u7c98\u8d34\u53d1\u5e03<\/span>\n <span class=\"hero-badge\"><span class=\"emoji\">\ud83d\udd12<\/span> \u5b89\u5168\u7ea2\u7ebf<\/span>\n <span class=\"hero-badge\"><span class=\"emoji\">\ud83d\udcc5<\/span> \u6700\u540e\u66f4\u65b0 2026-06-13<\/span>\n <\/div>\n<\/div>\n\n\n<div class=\"chapter\" id=\"sec-decision\">\n <div class=\"chapter-head\">\n <span class=\"chapter-num blue\">\u2605<\/span>\n <span class=\"chapter-title\">\u65b9\u6848\u9009\u62e9\u51b3\u7b56\u56fe<\/span>\n <\/div>\n\n <p>WordPress \u7684 kses \u8fc7\u6ee4\u5668\u4f1a\u81ea\u52a8\u5265\u79bb\u6240\u6709 <code><script><\/code> \u6807\u7b7e\u548c <code>onclick<\/code> \u4e8b\u4ef6\u5c5e\u6027\u3002\u9762\u5bf9\u8fd9\u4e2a\u95ee\u9898\uff0c<strong>\u6709\u4e24\u6761\u8def<\/strong>\uff1a<\/p>\n\n <div class=\"flow-diagram\">\n <span class=\"flow-node start\">\u9700\u8981\u4ea4\u4e92\u5f0f\u9875\u9762<\/span>\n <span class=\"flow-arrow\">\u2193<\/span>\n <span class=\"flow-node decision\">\u4ea4\u4e92\u7c7b\u578b\u662f\u4ec0\u4e48\uff1f<\/span>\n <div style=\"display:flex;justify-content:center;gap:24px;margin-top:10px;flex-wrap:wrap;\">\n <div>\n <span class=\"flow-label\">Tab\u5207\u6362 \/ FAQ \/ \u5e73\u6ed1\u6eda\u52a8<\/span>\n <span class=\"flow-arrow\">\u2193<\/span>\n <span class=\"flow-node css-way\">\u2705 \u7eafCSS\u65b9\u6848\uff08\u76f4\u63a5\u7c98\u8d34\uff09<\/span>\n <\/div>\n <div>\n <span class=\"flow-label\">\u6eda\u52a8\u9ad8\u4eae \/ \u52a8\u6001\u8ba1\u7b97 \/ \u590d\u6742\u8f6e\u64ad<\/span>\n <span class=\"flow-arrow\">\u2193<\/span>\n <span class=\"flow-node iframe-way\">\ud83d\udce6 iframe\u65b9\u6848\uff08\u4e0a\u4f20+\u5d4c\u5165\uff09<\/span>\n <\/div>\n <\/div>\n <\/div>\n\n <div class=\"compare-grid\">\n <div class=\"compare-box good\">\n <span class=\"label\">\u2705 \u7eafCSS\u65b9\u6848<\/span>\n <ul>\n <li>\u76f4\u63a5\u7c98\u8d34\u5230\u81ea\u5b9a\u4e49HTML\u533a\u5757<\/li>\n <li>\u4e0d\u7528\u4e0a\u4f20\u6587\u4ef6\uff0c\u4e0d\u7528iframe<\/li>\n <li>\u516c\u53f8\u4efb\u4f55\u4eba\u90fd\u80fd\u64cd\u4f5c<\/li>\n <li>\u96f6\u811a\u672c\uff0ckses \u5403\u4e0d\u6389\u4efb\u4f55\u4e1c\u897f<\/li>\n <\/ul>\n <\/div>\n <div class=\"compare-box bad\">\n <span class=\"label\">\u26a0\ufe0f iframe\u65b9\u6848<\/span>\n <ul>\n <li>\u9700\u8981\u4e0a\u4f20HTML\u5230\u670d\u52a1\u5668<\/li>\n <li>\u9700\u8981\u914d\u7f6e\u9ad8\u5ea6\u81ea\u9002\u5e94<\/li>\n <li>\u64cd\u4f5c\u95e8\u69db\u9ad8\uff0c\u9700\u8981FTP<\/li>\n <li>\u4ec5\u7528\u4e8e\u7eafCSS\u65e0\u6cd5\u5b9e\u73b0\u7684\u590d\u6742\u4ea4\u4e92<\/li>\n <\/ul>\n <\/div>\n <\/div>\n\n <div class=\"tip\">\u4f18\u5148\u7ea7\uff1a\u80fd\u7528\u7eafCSS\u5c31\u4e0d\u7528iframe\u3002\u7edd\u5927\u591a\u6570\u9875\u9762\u4ea4\u4e92\uff08Tab\u3001FAQ\u3001\u951a\u70b9\uff09\u7eafCSS\u90fd\u80fd\u641e\u5b9a\u3002<\/div>\n<\/div>\n\n\n<div class=\"chapter\" id=\"sec-css-overview\">\n <div class=\"chapter-head\">\n <span class=\"chapter-num green\">0<\/span>\n <span class=\"chapter-title\">\u7eafCSS\u65b9\u6848 <small><span class=\"tag tag-rec\">\u63a8\u8350\u9996\u9009<\/span> <span class=\"tag tag-new\">v2.0\u65b0\u589e<\/span><\/small><\/span>\n <\/div>\n\n <h3>\u6838\u5fc3\u601d\u8def\uff1a\u4e0d\u7528JS\uff0ckses\u5c31\u65e0\u4ece\u5403\u8d77<\/h3>\n <p>WordPress \u7684 kses \u8fc7\u6ee4\u5668\u53ea\u5403 <code><script><\/code> \u548c\u4e8b\u4ef6\u5c5e\u6027\u3002\u5982\u679c\u6211\u4eec<strong>\u6839\u672c\u4e0d\u7528\u8fd9\u4e9b<\/strong>\uff0c\u628a\u4ea4\u4e92\u5168\u90e8\u7528 CSS \u5b9e\u73b0\uff0c\u90a3\u4e48\u7c98\u8d34\u8fdb\u53bb\u662f\u4ec0\u4e48\uff0c\u53d1\u5e03\u51fa\u6765\u5c31\u662f\u4ec0\u4e48\u3002<\/p>\n\n <h3>\u4e09\u79cd\u4ea4\u4e92\u7684\u7eafCSS\u5b9e\u73b0<\/h3>\n <table>\n <tr><th>\u4ea4\u4e92\u7c7b\u578b<\/th><th>JS\u65b9\u5f0f\uff08\u88ab\u5403\uff09<\/th><th>\u7eafCSS\u65b9\u5f0f\uff08\u5b89\u5168\uff09<\/th><th>\u539f\u7406<\/th><\/tr>\n <tr><td>Tab\u5207\u6362<\/td><td><code>onclick=\"switchTab()\"<\/code><\/td><td><code>input:radio + label + :checked<\/code><\/td><td>\u70b9label\u9009\u4e2dradio\uff0cCSS\u6839\u636e:checked\u663e\u793a\u5bf9\u5e94\u9762\u677f<\/td><\/tr>\n <tr><td>FAQ\u624b\u98ce\u7434<\/td><td><code>onclick=\"toggleFaq()\"<\/code><\/td><td><code><details> + <summary><\/code><\/td><td>HTML5\u539f\u751f\u6807\u7b7e\uff0c\u6d4f\u89c8\u5668\u81ea\u5e26\u5c55\u5f00\/\u6536\u8d77<\/td><\/tr>\n <tr><td>\u5e73\u6ed1\u6eda\u52a8<\/td><td><code>scrollTo({behavior:'smooth'})<\/code><\/td><td><code>scroll-behavior:smooth<\/code><\/td><td>CSS\u4e00\u884c\u641e\u5b9a<\/td><\/tr>\n <tr><td>\u951a\u70b9\u504f\u79fb<\/td><td><code>JS\u8ba1\u7b97navHeight<\/code><\/td><td><code>scroll-margin-top:140px<\/code><\/td><td>CSS\u7eaf\u9759\u6001\u8865\u507f<\/td><\/tr>\n <\/table>\n\n <h3>\u7eafCSS\u505a\u4e0d\u4e86\u7684\uff08\u624d\u7528iframe\uff09<\/h3>\n <ul>\n <li>\u6eda\u52a8\u65f6\u5bfc\u822a\u81ea\u52a8\u9ad8\u4eae\u5f53\u524d\u7ae0\u8282\uff08\u9700\u8981scroll\u4e8b\u4ef6\u76d1\u542c\uff09<\/li>\n <li>FAQ\u624b\u98ce\u7434\u53ea\u80fd\u5c55\u5f00\u4e00\u4e2a\uff08details\/summary\u53ef\u540c\u65f6\u5f00\u591a\u4e2a\uff09<\/li>\n <li>\u52a8\u6001\u8ba1\u7b97\u5143\u7d20\u9ad8\u5ea6<\/li>\n <li>\u590d\u6742\u56fe\u7247\u8f6e\u64ad\uff08\u591a\u7ec4\u72ec\u7acb\u6ed1\u52a8\uff09<\/li>\n <\/ul>\n <div class=\"info\">FAQ\u53ef\u540c\u65f6\u5f00\u591a\u4e2a\uff0c\u5176\u5b9e\u662f\u66f4\u597d\u7684\u7528\u6237\u4f53\u9a8c\uff0c\u4e0d\u7b97\u7f3a\u70b9\u3002<\/div>\n<\/div>\n\n\n<div class=\"chapter\" id=\"sec-css-tab\">\n <div class=\"chapter-head\">\n <span class=\"chapter-num green\">0.1<\/span>\n <span class=\"chapter-title\">Tab\u5207\u6362\uff1a:checked \u6280\u5de7<\/span>\n <\/div>\n\n <h3>HTML\u7ed3\u6784<\/h3>\n <div class=\"code-block\"><span class=\"cm\"><!– \u9690\u85cf\u7684radio\u63a7\u4ef6 –><\/span>\n<span class=\"kw\"><input<\/span> type=”radio” name=”coreTab” id=”coreTab0″ checked style=”display:none”<span class=\"kw\">><\/span>\n<span class=\"kw\"><input<\/span> type=”radio” name=”coreTab” id=”coreTab1″ style=”display:none”<span class=\"kw\">><\/span>\n<span class=\"kw\"><input<\/span> type=”radio” name=”coreTab” id=”coreTab2″ style=”display:none”<span class=\"kw\">><\/span>\n\n<span class=\"cm\"><!– Tab\u6309\u94ae\uff08label\u5173\u8054radio\uff09 –><\/span>\n<span class=\"kw\"><div<\/span> class=”tab-bar”<span class=\"kw\">><\/span>\n <span class=\"kw\"><label<\/span> for=”coreTab0″ class=”tab-btn”<span class=\"kw\">><\/span>\u6838\u5fc3\u79d1\u6280<span class=\"kw\"><\/label><\/span>\n <span class=\"kw\"><label<\/span> for=”coreTab1″ class=”tab-btn”<span class=\"kw\">><\/span>\u8212\u9002\u4f53\u9a8c<span class=\"kw\"><\/label><\/span>\n <span class=\"kw\"><label<\/span> for=”coreTab2″ class=”tab-btn”<span class=\"kw\">><\/span>\u667a\u80fd\u63a7\u5236<span class=\"kw\"><\/label><\/span>\n<span class=\"kw\"><\/div><\/span>\n\n<span class=\"cm\"><!– \u9762\u677f –><\/span>\n<span class=\"kw\"><div<\/span> class=”tab-panels”<span class=\"kw\">><\/span>\n <span class=\"kw\"><div<\/span> class=”tab-pane pane-0″<span class=\"kw\">><\/span>\u9762\u677f0\u5185\u5bb9<span class=\"kw\"><\/div><\/span>\n <span class=\"kw\"><div<\/span> class=”tab-pane pane-1″<span class=\"kw\">><\/span>\u9762\u677f1\u5185\u5bb9<span class=\"kw\"><\/div><\/span>\n <span class=\"kw\"><div<\/span> class=”tab-pane pane-2″<span class=\"kw\">><\/span>\u9762\u677f2\u5185\u5bb9<span class=\"kw\"><\/div><\/span>\n<span class=\"kw\"><\/div><\/span><\/div>\n\n <h3>CSS\u6837\u5f0f<\/h3>\n <div class=\"code-block\"><span class=\"cm\">\/ \u9ed8\u8ba4\u6240\u6709\u9762\u677f\u9690\u85cf \/<\/span>\n<span class=\"kw\">.tab-pane<\/span> { <span class=\"fn\">display<\/span>: <span class=\"str\">none<\/span>; }\n\n<span class=\"cm\">\/ :checked \u5bf9\u5e94\u7684\u9762\u677f\u663e\u793a \/<\/span>\n<span class=\"kw\">#coreTab0:checked ~ .tab-panels .pane-0<\/span>,\n<span class=\"kw\">#coreTab1:checked ~ .tab-panels .pane-1<\/span>,\n<span class=\"kw\">#coreTab2:checked ~ .tab-panels .pane-2<\/span> {\n <span class=\"fn\">display<\/span>: <span class=\"str\">block<\/span>;\n}\n\n<span class=\"cm\">\/ :checked \u5bf9\u5e94\u7684\u6309\u94ae\u9ad8\u4eae \/<\/span>\n<span class=\"kw\">#coreTab0:checked ~ .tab-bar label[for=”coreTab0″]<\/span>,\n<span class=\"kw\">#coreTab1:checked ~ .tab-bar label[for=”coreTab1″]<\/span>,\n<span class=\"kw\">#coreTab2:checked ~ .tab-bar label[for=”coreTab2″]<\/span> {\n <span class=\"fn\">background<\/span>: <span class=\"str\">var(–primary)<\/span>;\n <span class=\"fn\">color<\/span>: <span class=\"str\">#fff<\/span>;\n}<\/div>\n\n <div class=\"warn\">radio\u3001tab-bar\u3001tab-panels \u5fc5\u987b<strong>\u662f\u540c\u7ea7\u5144\u5f1f\u5143\u7d20<\/strong>\uff0c`:checked ~` \u624d\u80fd\u751f\u6548\u3002\u8fd9\u662f\u6b64\u6280\u5de7\u552f\u4e00\u7684\u7ed3\u6784\u6027\u7ea6\u675f\u3002<\/div>\n<\/div>\n\n\n<div class=\"chapter\" id=\"sec-css-faq\">\n <div class=\"chapter-head\">\n <span class=\"chapter-num green\">0.2<\/span>\n <span class=\"chapter-title\">FAQ\u624b\u98ce\u7434\uff1adetails \/ summary<\/span>\n <\/div>\n\n <h3>HTML\u7ed3\u6784<\/h3>\n <div class=\"code-block\"><span class=\"kw\"><details<\/span> open<span class=\"kw\">><\/span>\n <span class=\"kw\"><summary><\/span>\u5e38\u89c1\u95ee\u9898\u4e00\uff1a\u5b89\u88c5\u5468\u671f\u591a\u4e45\uff1f<span class=\"kw\"><\/summary><\/span>\n <span class=\"kw\"><div<\/span> class=”faq-body”<span class=\"kw\">><\/span>\n \u4e00\u822c3-5\u5929\u5b8c\u6210\u5168\u90e8\u5b89\u88c5\u8c03\u8bd5\uff0c\u5177\u4f53\u53d6\u51b3\u4e8e\u6237\u578b\u548c\u7cfb\u7edf\u590d\u6742\u5ea6\u3002\n <span class=\"kw\"><\/div><\/span>\n<span class=\"kw\"><\/details><\/span>\n\n<span class=\"kw\"><details><\/span>\n <span class=\"kw\"><summary><\/span>\u5e38\u89c1\u95ee\u9898\u4e8c\uff1a\u8d28\u4fdd\u51e0\u5e74\uff1f<span class=\"kw\"><\/summary><\/span>\n <span class=\"kw\"><div<\/span> class=”faq-body”<span class=\"kw\">><\/span>\n \u4e3b\u673a\u8d28\u4fdd5\u5e74\uff0c\u7cfb\u7edf\u8d28\u4fdd2\u5e74\uff0c\u7ec8\u8eab\u7ef4\u62a4\u3002\n <span class=\"kw\"><\/div><\/span>\n<span class=\"kw\"><\/details><\/span><\/div>\n\n <h3>CSS\u7f8e\u5316<\/h3>\n <div class=\"code-block\"><span class=\"kw\">details<\/span> {\n <span class=\"fn\">border<\/span>: <span class=\"num\">1px<\/span> solid <span class=\"str\">var(–border)<\/span>;\n <span class=\"fn\">border-radius<\/span>: <span class=\"num\">8px<\/span>;\n <span class=\"fn\">margin<\/span>: <span class=\"num\">8px 0<\/span>;\n}\n\n<span class=\"kw\">summary<\/span> {\n <span class=\"fn\">padding<\/span>: <span class=\"num\">14px 16px<\/span>;\n <span class=\"fn\">cursor<\/span>: <span class=\"str\">pointer<\/span>;\n <span class=\"fn\">font-weight<\/span>: <span class=\"num\">600<\/span>;\n <span class=\"fn\">list-style<\/span>: <span class=\"str\">none<\/span>; <span class=\"cm\">\/ \u53bb\u6389\u9ed8\u8ba4\u4e09\u89d2 \/<\/span>\n}\n\n<span class=\"kw\">summary::before<\/span> {\n <span class=\"fn\">content<\/span>: <span class=\"str\">‘\u25b6’<\/span>; <span class=\"cm\">\/ \u81ea\u5b9a\u4e49\u7bad\u5934 \/<\/span>\n <span class=\"fn\">margin-right<\/span>: <span class=\"num\">8px<\/span>;\n <span class=\"fn\">transition<\/span>: <span class=\"str\">transform .2s<\/span>;\n}\n\n<span class=\"kw\">details[open] summary::before<\/span> {\n <span class=\"fn\">transform<\/span>: <span class=\"str\">rotate(90deg)<\/span>; <span class=\"cm\">\/ \u5c55\u5f00\u65f6\u7bad\u5934\u53f3\u8f6c \/<\/span>\n}\n\n<span class=\"kw\">.faq-body<\/span> {\n <span class=\"fn\">padding<\/span>: <span class=\"num\">12px 16px<\/span>;\n <span class=\"fn\">border-top<\/span>: <span class=\"num\">1px<\/span> solid <span class=\"str\">var(–border)<\/span>;\n}<\/div>\n\n <div class=\"tip\">\u52a0 <code>open<\/code> \u5c5e\u6027\u7684 details \u9ed8\u8ba4\u5c55\u5f00\u3002\u4e0d\u52a0\u5219\u9ed8\u8ba4\u6536\u8d77\u3002\u6d4f\u89c8\u5668\u539f\u751f\u652f\u6301\uff0c\u65e0\u9700\u4efb\u4f55JS\u3002<\/div>\n<\/div>\n\n\n<div class=\"chapter\" id=\"sec-css-scroll\">\n <div class=\"chapter-head\">\n <span class=\"chapter-num green\">0.3<\/span>\n <span class=\"chapter-title\">\u5e73\u6ed1\u6eda\u52a8 + \u951a\u70b9\u504f\u79fb<\/span>\n <\/div>\n\n <h3>\u4e24\u884cCSS\u641e\u5b9a<\/h3>\n <div class=\"code-block\"><span class=\"cm\">\/ \u5168\u5c40\u5e73\u6ed1\u6eda\u52a8 \/<\/span>\n<span class=\"kw\">html<\/span> {\n <span class=\"fn\">scroll-behavior<\/span>: <span class=\"str\">smooth<\/span>;\n}\n\n<span class=\"cm\">\/ \u951a\u70b9\u504f\u79fb\uff1a\u9632\u6b62\u56fa\u5b9a\u5bfc\u822a\u680f\u906e\u6321\u76ee\u6807\u4f4d\u7f6e \/<\/span>\n<span class=\"kw\">.chapter, [id]<\/span> {\n <span class=\"fn\">scroll-margin-top<\/span>: <span class=\"num\">140px<\/span>; <span class=\"cm\">\/ 80px\u4e3b\u9898header + 60px\u5bfc\u822a\u680f \/<\/span>\n}<\/div>\n\n <div class=\"info\"><code>scroll-margin-top<\/code> \u7684\u503c = WordPress\u4e3b\u9898header\u9ad8\u5ea6 + \u4f60\u7684\u56fa\u5b9a\u5bfc\u822a\u680f\u9ad8\u5ea6\u3002\u9f99\u8109\u5b98\u7f51(Astra\u4e3b\u9898)header\u7ea680px\uff0c\u5bfc\u822a\u680f\u7ea660px\uff0c\u5408\u8ba1140px\u3002<\/div>\n<\/div>\n\n\n<div class=\"chapter\" id=\"sec-css-pub\">\n <div class=\"chapter-head\">\n <span class=\"chapter-num green\">0.4<\/span>\n <span class=\"chapter-title\">\u53d1\u5e03\u4e09\u6b65\u6cd5 <small>\u516c\u53f8\u4efb\u4f55\u4eba\u90fd\u80fd\u64cd\u4f5c<\/small><\/span>\n <\/div>\n\n <div class=\"step-flow\">\n <div class=\"step-item\">\n <span class=\"step-num\">1<\/span>\n <span class=\"step-label\">AI\u751f\u6210HTML<\/span>\n <span class=\"step-desc\">\u7eafCSS\u7248\uff0c\u96f6\u811a\u672c<\/span>\n <\/div>\n <div class=\"step-arrow\">\u2192<\/div>\n <div class=\"step-item\">\n <span class=\"step-num\">2<\/span>\n <span class=\"step-label\">Ctrl+A \u2192 Ctrl+C<\/span>\n <span class=\"step-desc\">\u6253\u5f00\u6587\u4ef6\u5168\u9009\u590d\u5236<\/span>\n <\/div>\n <div class=\"step-arrow\">\u2192<\/div>\n <div class=\"step-item\">\n <span class=\"step-num\">3<\/span>\n <span class=\"step-label\">\u81ea\u5b9a\u4e49HTML\u7c98\u8d34<\/span>\n <span class=\"step-desc\">WordPress\u533a\u5757\u53d1\u5e03<\/span>\n <\/div>\n <\/div>\n\n <h3>\u8be6\u7ec6\u6b65\u9aa4<\/h3>\n <ol>\n <li>\u8ba9AI\u751f\u6210<strong>\u7eafCSS\u7248<\/strong>HTML\u6587\u4ef6\uff08\u786e\u8ba4\u6ca1\u6709 <code><script><\/code> \u548c <code>onclick<\/code>\uff09<\/li>\n <li>\u6253\u5f00HTML\u6587\u4ef6\uff0c<strong>Ctrl+A \u5168\u9009 \u2192 Ctrl+C \u590d\u5236<\/strong><\/li>\n <li>WordPress\u540e\u53f0\u7f16\u8f91\u76ee\u6807\u9875\u9762\uff0c<strong>\u5220\u9664<\/strong>\u65e7\u7684\u81ea\u5b9a\u4e49HTML\u533a\u5757\u5185\u5bb9<\/li>\n <li>\u65b0\u5efa<strong>“\u81ea\u5b9a\u4e49HTML”\u533a\u5757<\/strong>\uff08\u4e0d\u662f”\u4ee3\u7801\u7f16\u8f91\u5668”\u6a21\u5f0f\uff01\uff09<\/li>\n <li><strong>Ctrl+V \u7c98\u8d34<\/strong>\uff0c\u70b9\u9884\u89c8\u786e\u8ba4\u6548\u679c<\/li>\n <li>\u786e\u8ba4\u65e0\u8bef\u540e<strong>\u53d1\u5e03<\/strong><\/li>\n <\/ol>\n\n <div class=\"warn\">\u4e0d\u662f”\u4ee3\u7801\u7f16\u8f91\u5668”\u6a21\u5f0f\uff01\u6b63\u786e\u505a\u6cd5\u662f\u6dfb\u52a0”\u81ea\u5b9a\u4e49HTML”\u533a\u5757\u3002\u4ee3\u7801\u7f16\u8f91\u5668\u6a21\u5f0f\u4f1a\u7834\u574f\u6574\u4e2a\u7f16\u8f91\u5668\u3002<\/div>\n<\/div>\n\n\n<div class=\"chapter\" id=\"sec-iframe-overview\">\n <div class=\"chapter-head\">\n <span class=\"chapter-num orange\">1<\/span>\n <span class=\"chapter-title\">iframe\u5d4c\u5165\u65b9\u6848 <small><span class=\"tag tag-warn\">\u5907\u9009\u00b7\u590d\u6742\u4ea4\u4e92<\/span><\/small><\/span>\n <\/div>\n\n <div class=\"warn\">\u4ee5\u4e0b\u65b9\u6848\u4ec5\u7528\u4e8e<strong>\u7eafCSS\u65e0\u6cd5\u5b9e\u73b0\u7684\u590d\u6742\u4ea4\u4e92<\/strong>\uff08\u6eda\u52a8\u65f6\u5bfc\u822a\u81ea\u52a8\u9ad8\u4eae\u3001\u52a8\u6001\u8ba1\u7b97\u9ad8\u5ea6\u3001\u590d\u6742\u591a\u7ec4\u8f6e\u64ad\u7b49\uff09\u3002\u5bf9\u4e8eTab\u5207\u6362\u3001FAQ\u624b\u98ce\u7434\u3001\u5e73\u6ed1\u6eda\u52a8\u7b49\uff0c\u4f18\u5148\u4f7f\u7528\u7eafCSS\u65b9\u6848\u3002<\/div>\n\n <h3>3\u6b65\u6d41\u7a0b<\/h3>\n <div class=\"step-flow\">\n <div class=\"step-item\">\n <span class=\"step-num\">1<\/span>\n <span class=\"step-label\">\u521b\u5efa\u81ea\u5305\u542bHTML<\/span>\n <span class=\"step-desc\">CSS+JS+HTML\u5168\u5199\u5728\u4e00\u4e2a\u6587\u4ef6<\/span>\n <\/div>\n <div class=\"step-arrow\">\u2192<\/div>\n <div class=\"step-item\">\n <span class=\"step-num\">2<\/span>\n <span class=\"step-label\">\u4e0a\u4f20\u5230\u670d\u52a1\u5668<\/span>\n <span class=\"step-desc\">wp-content\/uploads\/<\/span>\n <\/div>\n <div class=\"step-arrow\">\u2192<\/div>\n <div class=\"step-item\">\n <span class=\"step-num\">3<\/span>\n <span class=\"step-label\">iframe\u5d4c\u5165<\/span>\n <span class=\"step-desc\">\u81ea\u5b9a\u4e49HTML\u533a\u5757<\/span>\n <\/div>\n <\/div>\n\n <h3>\u6838\u5fc3\u539f\u7406<\/h3>\n <p>WordPress \u7684 kses \u8fc7\u6ee4\u5668<strong>\u65e0\u6cd5\u5e72\u6d89 iframe \u5185\u90e8<\/strong>\u3002iframe \u662f\u72ec\u7acb\u6c99\u7bb1\uff0cJS \u548c CSS 100% \u53ef\u7528\u3002<\/p>\n\n <h3>WordPress\u7aef\u5d4c\u5165\u4ee3\u7801<\/h3>\n <div class=\"code-block\"><span class=\"kw\"><iframe<\/span>\n id=”solutionFrame”\n src=”https:\/\/\u4f60\u7684\u57df\u540d.com\/wp-content\/uploads\/2026\/06\/\u6587\u4ef6\u540d.html”\n style=”width:100%;border:none;display:block”\n scrolling=”no”<span class=\"kw\">><\/span>\n<span class=\"kw\"><\/iframe><\/span><\/div>\n\n <h3>\u5173\u952e\u907f\u5751<\/h3>\n <ul>\n <li>\u6587\u4ef6\u540d\u7528\u82f1\u6587\uff08\u5982 <code>zunrui-detail.html<\/code>\uff09\uff0c\u4e2d\u6587\u8def\u5f84\u53ef\u80fd\u62a5404<\/li>\n <li>\u56fe\u7247\u5fc5\u987b\u7528 <code>https:\/\/<\/code> \u5f00\u5934\u7684\u7edd\u5bf9URL<\/li>\n <li>iframe\u5185\u907f\u514d <code>position:fixed<\/code>\uff0c\u6539\u7528 <code>position:sticky<\/code><\/li>\n <li>\u89e6\u6478\u4e8b\u4ef6\u76d1\u542c\u5668\u6807\u8bb0 <code>{passive:true}<\/code><\/li>\n <\/ul>\n<\/div>\n\n\n<div class=\"chapter\" id=\"sec-iframe-height\">\n <div class=\"chapter-head\">\n <span class=\"chapter-num orange\">1.1<\/span>\n <span class=\"chapter-title\">iframe\u9ad8\u5ea6\u81ea\u9002\u5e94<\/span>\n <\/div>\n\n <h3>\u65b9\u6848A\uff1apostMessage \u52a8\u6001\u901a\u4fe1\uff08\u63a8\u8350\uff09<\/h3>\n <p>HTML\u6587\u4ef6\u5185\u90e8\u672b\u5c3e\u6dfb\u52a0\uff1a<\/p>\n <div class=\"code-block\"><span class=\"cm\">\/\/ ============ \u653e\u5728 HTML \u7684 <script> \u672b\u5c3e ============<\/span>\n(<span class=\"kw\">function<\/span>() {\n <span class=\"kw\">function<\/span> <span class=\"fn\">sendHeight<\/span>() {\n <span class=\"kw\">var<\/span> h = Math.max(\n document.body.scrollHeight,\n document.documentElement.scrollHeight,\n document.body.offsetHeight,\n document.documentElement.offsetHeight\n );\n window.parent.postMessage({ type: <span class=\"str\">‘setIframeHeight’<\/span>, height: h }, <span class=\"str\">‘’<\/span>);\n }\n window.addEventListener(<span class=\"str\">‘load’<\/span>, <span class=\"kw\">function<\/span>() {\n sendHeight();\n setTimeout(sendHeight, <span class=\"num\">500<\/span>);\n setTimeout(sendHeight, <span class=\"num\">1500<\/span>);\n });\n window.addEventListener(<span class=\"str\">‘resize’<\/span>, sendHeight);\n <span class=\"kw\">if<\/span> (window.ResizeObserver) {\n <span class=\"kw\">new<\/span> ResizeObserver(<span class=\"kw\">function<\/span>() { sendHeight(); }).observe(document.body);\n }\n})();<\/div>\n\n <p>WordPress\u7aefiframe\u540e\u9762\u52a0\u76d1\u542c\uff1a<\/p>\n <div class=\"code-block\"><span class=\"kw\"><iframe<\/span> id=”solutionFrame” src=”…”\n style=”width:100%;border:none;display:block”\n scrolling=”no”<span class=\"kw\">><\/iframe><\/span>\n\n<span class=\"kw\"><script><\/span>\nwindow.addEventListener(<span class=\"str\">‘message’<\/span>, <span class=\"kw\">function<\/span>(e) {\n <span class=\"kw\">if<\/span> (e.data && e.data.type === <span class=\"str\">‘setIframeHeight’<\/span>) {\n <span class=\"kw\">var<\/span> frame = document.getElementById(<span class=\"str\">‘solutionFrame’<\/span>);\n <span class=\"kw\">if<\/span> (frame) frame.style.height = e.data.height + <span class=\"str\">‘px’<\/span>;\n }\n});\n<span class=\"kw\"><\/script><\/span><\/div>\n\n <h3>\u65b9\u6848B\uff1a\u56fa\u5b9a\u5927\u9ad8\u5ea6\uff08\u7b80\u5355\u7c97\u66b4\uff09<\/h3>\n <p>\u5982\u679cWordPress\u8fde\u5916\u5c42script\u4e5f\u5403\u6389\uff0c\u76f4\u63a5\u8bbe\u4e00\u4e2a\u8db3\u591f\u5927\u7684\u9ad8\u5ea6\uff1a<\/p>\n <div class=\"code-block\"><span class=\"kw\"><iframe<\/span>\n src=”https:\/\/\u4f60\u7684\u57df\u540d.com\/wp-content\/uploads\/2026\/06\/\u6587\u4ef6.html”\n style=”width:100%;border:none;display:block;min-height:8000px”\n scrolling=”auto”<span class=\"kw\">><\/span>\n<span class=\"kw\"><\/iframe><\/span><\/div>\n<\/div>\n\n\n<div class=\"chapter\" id=\"sec-selector\">\n <div class=\"chapter-head\">\n <span class=\"chapter-num blue\">2<\/span>\n <span class=\"chapter-title\">CSS\u9009\u62e9\u5668\u9677\u9631 \u2605 <small>\u5934\u53f7Bug\u6765\u6e90<\/small><\/span>\n <\/div>\n\n <h3>\u81f4\u547d\u9519\u8bef\uff1a~ \u5144\u5f1f\u9009\u62e9\u5668 vs \u7a7a\u683c \u540e\u4ee3\u9009\u62e9\u5668<\/h3>\n <p>\u8fd9\u662f\u9f99\u8109\u9879\u76ee\u5bfc\u81f4”\u667a\u80fd\u65b9\u6848\u5bf9\u6bd4”Tab<strong>\u5b8c\u5168\u5931\u6548<\/strong>\u7684Bug\u3002<\/p>\n\n <div class=\"code-block\"><span class=\"cm\"><!– DOM\u7ed3\u6784 –><\/span>\n<span class=\"kw\"><div<\/span> id=”compTabs”<span class=\"kw\">><\/span> <span class=\"cm\"><!– \u5bb9\u5668 –><\/span>\n <span class=\"kw\"><div<\/span> class=”comp-tabs”<span class=\"kw\">><\/span> <span class=\"cm\"><!– Tab\u6309\u94ae\u884c –><\/span>\n <span class=\"kw\"><button<\/span> class=”comp-tab”<span class=\"kw\">><\/span>…<span class=\"kw\"><\/button><\/span>\n <span class=\"kw\"><\/div><\/span>\n <span class=\"kw\"><div<\/span> class=”plan-body”<span class=\"kw\">><\/span> <span class=\"cm\"><!– \u9762\u677f\u5bb9\u5668 –><\/span>\n <span class=\"kw\"><div<\/span> class=”tab-pane”<span class=\"kw\">><\/span>…<span class=\"kw\"><\/div><\/span> <span class=\"cm\"><!– \u540e\u4ee3\uff01\u4e0d\u662f\u5144\u5f1f\uff01–><\/span>\n <span class=\"kw\"><div<\/span> class=”tab-pane”<span class=\"kw\">><\/span>…<span class=\"kw\"><\/div><\/span>\n <span class=\"kw\"><\/div><\/span>\n<span class=\"kw\"><\/div><\/span><\/div>\n\n <table>\n <tr><th>\u9009\u62e9\u5668<\/th><th>\u542b\u4e49<\/th><th>\u7ed3\u679c<\/th><\/tr>\n <tr><td><code>#compTabs .tab-pane<\/code><\/td><td>\u540e\u4ee3\u9009\u62e9\u5668\uff08\u7a7a\u683c\uff09<\/td><td>\u2705 \u627e\u52303\u4e2a\u9762\u677f<\/td><\/tr>\n <tr><td><code>#compTabs > .tab-pane<\/code><\/td><td>\u5b50\u9009\u62e9\u5668<\/td><td>\u274c \u7a7a\uff01.tab-pane\u5728.plan-body\u91cc<\/td><\/tr>\n <tr><td><code>#compTabs ~ .tab-pane<\/code><\/td><td>\u5144\u5f1f\u9009\u62e9\u5668<\/td><td>\u274c \u7a7a\uff01.tab-pane\u662f\u540e\u4ee3\u4e0d\u662f\u5144\u5f1f<\/td><\/tr>\n <\/table>\n\n <div class=\"danger\">\u6838\u5fc3\u89c4\u5219\uff1aTab\u9762\u677f .tab-pane \u51e0\u4e4e\u6c38\u8fdc\u5d4c\u5728 .plan-body \u6216\u7c7b\u4f3c\u5bb9\u5668\u91cc\uff0c\u662f<strong>\u540e\u4ee3\u4e0d\u662f\u5144\u5f1f<\/strong>\u3002\u9009\u62e9\u5668\u7528<strong>\u7a7a\u683c<\/strong>\u3002<\/div>\n\n <h3>\u9009\u62e9\u5668\u901f\u67e5\u8868<\/h3>\n <table>\n <tr><th>\u9009\u62e9\u5668<\/th><th>\u542b\u4e49<\/th><th>\u4f55\u65f6\u4f7f\u7528<\/th><\/tr>\n <tr><td><code>A B<\/code><\/td><td>A\u7684\u540e\u4ee3B\uff08\u4efb\u610f\u6df1\u5ea6\uff09<\/td><td>tab-pane\u5728\u5bb9\u5668\u5185\u65f6\uff08\u6700\u5e38\u7528\uff09<\/td><\/tr>\n <tr><td><code>A > B<\/code><\/td><td>A\u7684\u76f4\u63a5\u5b50\u5143\u7d20B<\/td><td>\u660e\u786e\u77e5\u9053\u7236\u5b50\u5173\u7cfb\u65f6<\/td><\/tr>\n <tr><td><code>A ~ B<\/code><\/td><td>A\u7684\u540c\u7ea7\u540e\u7eed\u5144\u5f1fB<\/td><td>\u4ec5\u5f53B\u548cA\u5728DOM\u540c\u4e00\u5c42\u7ea7\u65f6<\/td><\/tr>\n <tr><td><code>A + B<\/code><\/td><td>A\u7684\u7d27\u90bb\u4e0b\u4e00\u4e2a\u5144\u5f1fB<\/td><td>\u6781\u5c11\u4f7f\u7528<\/td><\/tr>\n <\/table>\n\n <h3>\u9996\u9009ID\u67e5\u8be2<\/h3>\n <p>\u5f53\u7ed3\u6784\u5141\u8bb8\u65f6\uff0c\u4f18\u5148\u4f7f\u7528 <code>getElementById<\/code>\uff0c\u5b83\u4e0d\u53d7\u5d4c\u5957\u5c42\u7ea7\u5f71\u54cd\uff1a<\/p>\n <div class=\"code-block\"><span class=\"cm\">\/\/ \u2705 \u6700\u53ef\u9760\u7684\u65b9\u5f0f<\/span>\n<span class=\"kw\">var<\/span> track = document.getElementById(<span class=\"str\">‘prodTrack’<\/span>);\n<span class=\"kw\">var<\/span> slider = document.getElementById(<span class=\"str\">‘prodSlider’<\/span>);<\/div>\n<\/div>\n\n\n<div class=\"chapter\" id=\"sec-theme\">\n <div class=\"chapter-head\">\n <span class=\"chapter-num blue\">3<\/span>\n <span class=\"chapter-title\">WordPress\u4e3b\u9898CSS\u51b2\u7a81\u9632\u63a7 \u2605<\/span>\n <\/div>\n\n <h3>Hero\u6807\u9898\u989c\u82724\u5c42\u4fdd\u62a4<\/h3>\n <p>\u9f99\u8109\u6696\u901a\uff08OceanWP\/Astra\u4e3b\u9898\uff09\u751f\u4ea7\u73af\u5883\u53cd\u590d\u8c03\u8bd5\u603b\u7ed3\uff1a<\/p>\n\n <div class=\"code-block\"><span class=\"cm\">\/* \u7b2c1\u5c42\uff1a\u5bb9\u5668\u81ea\u8eab \/<\/span>\n<span class=\"kw\">.hero-section<\/span> {\n <span class=\"fn\">background<\/span>: <span class=\"str\">linear-gradient(135deg, #1a3a4a, #0d2130)<\/span>;\n <span class=\"fn\">color<\/span>: <span class=\"str\">#fff !important<\/span>;\n}\n\n<span class=\"cm\">\/ \u7b2c2\u5c42\uff1a\u6240\u6709\u76f4\u63a5\u6587\u672c\u5143\u7d20\u9010\u4e00\u58f0\u660e \/<\/span>\n<span class=\"kw\">.hero-title, .hero-subtitle, .hero-desc, .hero-meta,\n.hero-section h1, .hero-section h2, .hero-section h3,\n.hero-section p, .hero-section span, .hero-section li<\/span> {\n <span class=\"fn\">color<\/span>: <span class=\"str\">#fff !important<\/span>;\n}\n\n<span class=\"cm\">\/ \u7b2c3\u5c42\uff1a\u6b21\u7ea7\u6587\u5b57\uff08\u534a\u900f\u660e\uff09 \/<\/span>\n<span class=\"kw\">.hero-section .dim-text<\/span> {\n <span class=\"fn\">color<\/span>: <span class=\"str\">rgba(255,255,255,0.75) !important<\/span>;\n}\n\n<span class=\"cm\">\/ \u7b2c4\u5c42\uff1a\u901a\u914d\u7b26\u515c\u5e95 \/<\/span>\n<span class=\"kw\">.hero-section <\/span> {\n <span class=\"fn\">color<\/span>: <span class=\"str\">#fff !important<\/span>;\n}<\/div>\n\n <h3>\u5bb9\u5668\u5bbd\u5ea6\u5bf9\u9f50<\/h3>\n <div class=\"code-block\"><span class=\"kw\">:root<\/span> { <span class=\"fn\">–maxw<\/span>: <span class=\"num\">1400px<\/span>; } <span class=\"cm\">\/* \u2190 \u6539\u4e3a\u76ee\u6807\u7f51\u7ad9\u7684\u5bb9\u5668\u5bbd\u5ea6 \/<\/span>\n\n<span class=\"kw\">.wrap<\/span> {\n <span class=\"fn\">max-width<\/span>: <span class=\"str\">var(–maxw)<\/span>;\n <span class=\"fn\">margin<\/span>: <span class=\"num\">0 auto<\/span>;\n <span class=\"fn\">padding<\/span>: <span class=\"num\">0 24px<\/span>;\n}<\/div>\n\n <h3>position: fixed \u2192 sticky<\/h3>\n <p>iframe\u5185 <code>position:fixed<\/code> \u4f1a\u76f8\u5bf9iframe\u89c6\u53e3\u5b9a\u4f4d\uff0c\u4ea7\u751f\u975e\u9884\u671f\u504f\u79fb\u3002\u5728\u81ea\u5b9a\u4e49HTML\u5757\u4e2d\u540c\u7406\uff0c\u6539\u7528 <code>sticky<\/code>\uff1a<\/p>\n\n <div class=\"compare-grid\">\n <div class=\"compare-box bad\">\n <span class=\"label\">\u274c \u907f\u514d<\/span>\n <code>.geo-nav { position: fixed; top: 0; }<\/code>\n <\/div>\n <div class=\"compare-box good\">\n <span class=\"label\">\u2705 \u63a8\u8350<\/span>\n <code>.geo-nav { position: sticky; top: 0; z-index: 100; }<\/code>\n <\/div>\n <\/div>\n<\/div>\n\n\n<div class=\"chapter\" id=\"sec-sticky-nav\">\n <div class=\"chapter-head\">\n <span class=\"chapter-num blue\">4<\/span>\n <span class=\"chapter-title\">\u56fa\u5b9a\u60ac\u6d6e\u5bfc\u822a\u680f <small>\u6eda\u52a8\u65f6\u59cb\u7ec8\u53ef\u89c1<\/small><\/span>\n <\/div>\n\n <h3>\u539f\u7406<\/h3>\n <p><code>position: sticky<\/code> \u7684\u5143\u7d20\u5728\u6eda\u52a8\u5230\u6307\u5b9a\u4f4d\u7f6e\u524d\u6b63\u5e38\u6d41\u5e03\u5c40\uff0c\u5230\u8fbe\u540e”\u9489”\u4f4f\u4e0d\u52a8\u3002<\/p>\n\n <h3>\u5173\u952eCSS<\/h3>\n <div class=\"code-block\"><span class=\"kw\">.side-nav<\/span> {\n <span class=\"fn\">position<\/span>: <span class=\"str\">sticky<\/span>;\n <span class=\"fn\">top<\/span>: <span class=\"num\">80px<\/span>; <span class=\"cm\">\/ \u8ddd\u89c6\u53e3\u9876\u90e880px\uff08\u8ba9\u51faAstra\/OceanWP\u4e3b\u9898header\uff09 \/<\/span>\n <span class=\"fn\">z-index<\/span>: <span class=\"num\">1000<\/span>; <span class=\"cm\">\/ \u5c42\u7ea7\u6700\u9ad8\uff0c\u5185\u5bb9\u4ece\u4e0b\u65b9\u7a7f\u8fc7 \/<\/span>\n <span class=\"fn\">max-height<\/span>: <span class=\"fn\">calc<\/span>(<span class=\"num\">100vh<\/span> – <span class=\"num\">80px<\/span> – <span class=\"num\">32px<\/span>);\n <span class=\"fn\">overflow-y<\/span>: <span class=\"str\">auto<\/span>; <span class=\"cm\">\/ \u5bfc\u822a\u592a\u957f\u65f6\u81ea\u8eab\u53ef\u6eda\u52a8 \/<\/span>\n}<\/div>\n\n <h3>top\u503c\u600e\u4e48\u5b9a\uff1f<\/h3>\n <table>\n <tr><th>\u4e3b\u9898<\/th><th>Header\u9ad8\u5ea6<\/th><th>sticky top\u503c<\/th><\/tr>\n <tr><td>Astra\uff08\u9f99\u8109\u5b98\u7f51\uff09<\/td><td>~80px<\/td><td><code>top: 80px<\/code><\/td><\/tr>\n <tr><td>OceanWP<\/td><td>~70px<\/td><td><code>top: 70px<\/code><\/td><\/tr>\n <tr><td>\u65e0\u56fa\u5b9aheader<\/td><td>0<\/td><td><code>top: 0<\/code><\/td><\/tr>\n <\/table>\n\n <h3>\u951a\u70b9\u504f\u79fb\u914d\u5408<\/h3>\n <div class=\"code-block\"><span class=\"cm\">\/ \u9632\u6b62\u5bfc\u822a\u680f\u906e\u6321\u951a\u70b9\u76ee\u6807 \/<\/span>\n<span class=\"kw\">html<\/span> {\n <span class=\"fn\">scroll-behavior<\/span>: <span class=\"str\">smooth<\/span>;\n <span class=\"fn\">scroll-margin-top<\/span>: <span class=\"num\">140px<\/span>; <span class=\"cm\">\/ 80px header + 60px nav \/<\/span>\n}\n\n<span class=\"kw\">[id]<\/span> {\n <span class=\"fn\">scroll-margin-top<\/span>: <span class=\"num\">140px<\/span>;\n}<\/div>\n\n <div class=\"tip\"><code>position: sticky<\/code> \u6bd4 <code>position: fixed<\/code> \u66f4\u597d\uff1a\u4e0d\u9700\u8981\u624b\u52a8\u8865\u507f\u5185\u5bb9\u504f\u79fb\uff0c\u5143\u7d20\u81ea\u7136\u5728\u6587\u6863\u6d41\u4e2d\u3002<\/div>\n<\/div>\n\n\n<div class=\"chapter\" id=\"sec-security\">\n <div class=\"chapter-head\">\n <span class=\"chapter-num red\">5<\/span>\n <span class=\"chapter-title\">\u5b89\u5168\u7ea2\u7ebf\uff1aXML-RPC \u4e0e\u8fdc\u7a0b\u4fee\u6539 <small><span class=\"tag tag-danger\">\u5fc5\u8bfb<\/span><\/small><\/span>\n <\/div>\n\n <h3>\u53d1\u751f\u4e86\u4ec0\u4e48<\/h3>\n <p>AI\u52a9\u624b\uff08\u9a6c\u7ef4\u65af\uff09\u901a\u8fc7 WordPress \u7684 <strong>XML-RPC \u63a5\u53e3<\/strong>\uff08xmlrpc.php\uff09\u76f4\u63a5\u8c03\u7528 <code>wp.editPost<\/code> \u4fee\u6539\u4e86\u9875\u9762\u5185\u5bb9\uff0c<strong>\u65e0\u9700\u767b\u5f55WordPress\u540e\u53f0<\/strong>\u3002<\/p>\n\n <div class=\"compare-grid\">\n <div class=\"compare-box bad\">\n <span class=\"label\">\u274c XML-RPC\u8fdc\u7a0b\u4fee\u6539\u7684\u98ce\u9669<\/span>\n <ul>\n <li>\u6ca1\u6709”\u786e\u8ba4\u73af\u8282”\uff0c\u6539\u4e86\u5c31\u662f\u6539\u4e86<\/li>\n <li>\u6539\u9519\u540e\u7ebf\u4e0a\u9875\u9762\u76f4\u63a5\u4e71\u6389<\/li>\n <li>\u6ca1\u6709\u5907\u4efd\u5bf9\u6bd4\uff0c\u65e0\u6cd5\u4e00\u952e\u56de\u9000<\/li>\n <li>\u51ed\u636e\u6cc4\u9732=\u4efb\u4f55\u4eba\u90fd\u80fd\u6539\u4f60\u7684\u7f51\u7ad9<\/li>\n <\/ul>\n <\/div>\n <div class=\"compare-box good\">\n <span class=\"label\">\u2705 \u5b89\u5168\u505a\u6cd5\uff1aAI\u751f\u6210 + \u4eba\u5de5\u7c98\u8d34<\/span>\n <ul>\n <li>AI\u53ea\u751f\u6210\u4ee3\u7801\uff0c\u4e0d\u78b0\u7f51\u7ad9<\/li>\n <li>\u4f60\u767b\u5f55\u540e\u53f0\uff0c\u786e\u8ba4\u540e\u518d\u7c98\u8d34<\/li>\n <li>\u7c98\u8d34\u524d\u53ef\u9884\u89c8\uff0c\u4e0d\u5bf9\u5c31\u4e0d\u8d34<\/li>\n <li>\u94a5\u5319\u59cb\u7ec8\u5728\u4f60\u624b\u91cc<\/li>\n <\/ul>\n <\/div>\n <\/div>\n\n <h3>\u7acb\u523b\u505a3\u4ef6\u4e8b<\/h3>\n <ol>\n <li><strong>\u5220\u9664Application Password<\/strong>\uff1aWordPress\u540e\u53f0 \u2192 \u7528\u6237 \u2192 \u4e2a\u4eba\u8d44\u6599 \u2192 Application Passwords \u2192 \u5168\u90e8\u5220\u9664<\/li>\n <li><strong>\u5173\u95edXML-RPC<\/strong>\uff1a\u4e3b\u9898 functions.php \u672b\u5c3e\u52a0 <code>add_filter('xmlrpc_enabled', '__return_false');<\/code><\/li>\n <li><strong>\u6539\u5f3a\u5bc6\u7801<\/strong>\uff1a\u5982\u679c\u5bc6\u7801\u662f\u5f31\u5bc6\u7801\uff0c\u8d81\u73b0\u5728\u6539\u6389<\/li>\n <\/ol>\n\n <div class=\"danger\">\u6807\u51c6\u5de5\u4f5c\u6d41\uff1aAI\u6765\u505a \u2192 \u4f60\u6765\u770b \u2192 \u4f60\u6765\u8d34 \u2192 \u4f60\u6765\u53d1\u3002\u6bcf\u4e00\u6b65\u90fd\u5728\u4f60\u624b\u91cc\u3002<\/div>\n<\/div>\n\n\n<div class=\"chapter\" id=\"sec-precise\">\n <div class=\"chapter-head\">\n <span class=\"chapter-num red\">6<\/span>\n <span class=\"chapter-title\">\u7cbe\u786e\u66ff\u6362\u539f\u5219 <small>\u9a6c\u7ef4\u65af\u7ffb\u8f66\u6559\u8bad<\/small><\/span>\n <\/div>\n\n <h3>\u4e24\u6b21\u4fee\u6539\u5bf9\u6bd4<\/h3>\n <table>\n <tr><th><\/th><th>\u274c \u7b2c\u4e00\u6b21\uff08\u7ffb\u8f66\uff09<\/th><th>\u2705 \u7b2c\u4e8c\u6b21\uff08\u6b63\u5e38\uff09<\/th><\/tr>\n <tr><td>\u64cd\u4f5c\u65b9\u5f0f<\/td><td>\u91cd\u6784\u4e86\u6574\u4e2a post_content\uff0c\u628a <div class=”entry-content”> \u5916\u5c42\u4e5f\u585e\u4e86\u8fdb\u53bb<\/td><td>\u53ea\u5bf9 post_content \u505a\u7cbe\u786e\u5b57\u7b26\u4e32\u66ff\u6362\uff08img src + alt\uff09<\/td><\/tr>\n <tr><td>\u540e\u679c<\/td><td>\u5d4c\u5957 entry-content \u5bb9\u5668\uff0cCSS\u9009\u62e9\u5668\u51b2\u7a81\u3001\u5e03\u5c40\u584c\u9677\u3001\u5bfc\u822a\u5931\u6548<\/td><td>\u96f6\u7ed3\u6784\u6539\u52a8\uff0cCSS\u548cDOM\u539f\u5c01\u4e0d\u52a8<\/td><\/tr>\n <tr><td>\u6839\u56e0<\/td><td>\u6ca1\u6709\u533a\u5206”\u5916\u5c42\u5bb9\u5668”\u548c”\u5185\u90e8\u5185\u5bb9”<\/td><td>\u53ea\u66ff\u6362\u76ee\u6807\u5b57\u7b26\u4e32\uff0c\u4e0d\u52a8\u5176\u4ed6\u4efb\u4f55\u4e1c\u897f<\/td><\/tr>\n <\/table>\n\n <h3>\u94c1\u5f8b<\/h3>\n <ul class=\"checklist fail\">\n <li>\u4e0d\u8981\u91cd\u6784\u6574\u4e2a post_content\uff0c\u53ea\u505a\u7cbe\u786e\u66ff\u6362<\/li>\n <li>\u4e0d\u8981\u628a WordPress \u4e3b\u9898\u751f\u6210\u7684 <div class=”entry-content”> \u4e5f\u585e\u8fdb\u53bb<\/li>\n <li>\u4e0d\u8981\u5047\u8bbe AI \u80fd\u770b\u5230\u6e32\u67d3\u6548\u679c\u2014\u2014AI \u770b\u4e0d\u5230\u9875\u9762\uff0c\u6539\u5b8c\u5fc5\u987b\u4eba\u5de5\u9a8c\u8bc1<\/li>\n <\/ul>\n\n <div class=\"warn\">\u5373\u4f7f\u672a\u6765\u6062\u590d\u8fdc\u7a0b\u4fee\u6539\u80fd\u529b\uff0c\u4e5f\u5fc5\u987b\u9075\u5faa\uff1a\u7cbe\u786e\u66ff\u6362\uff0c\u7edd\u4e0d\u91cd\u6784\u3002\u6539\u5b8c\u4eba\u5de5\u9884\u89c8\u786e\u8ba4\u540e\u518d\u751f\u6548\u3002<\/div>\n<\/div>\n\n\n<div class=\"chapter\" id=\"sec-checklist\">\n <div class=\"chapter-head\">\n <span class=\"chapter-num blue\">7<\/span>\n <span class=\"chapter-title\">\u81ea\u68c0\u6e05\u5355<\/span>\n <\/div>\n\n <h3>\u7eafCSS\u65b9\u6848\u81ea\u68c0<\/h3>\n <ul class=\"checklist pass\">\n <li>\u6240\u6709\u4ea4\u4e92\u4e0d\u4f9d\u8d56 JS\uff08\u7528 :checked \u6216 details\/summary \u5b9e\u73b0\uff09<\/li>\n <li>\u6ca1\u6709 <script> \u6807\u7b7e\u548c onclick \u4e8b\u4ef6<\/li>\n <li>\u5728\u672c\u5730\u6d4f\u89c8\u5668\u9a8c\u8bc1\u901a\u8fc7<\/li>\n <li>\u56fe\u7247\u4f7f\u7528\u7edd\u5bf9 URL\uff08https:\/\/ \u5f00\u5934\uff09<\/li>\n <li>Hero\/\u6df1\u8272\u80cc\u666f\u6587\u5b57\u989c\u8272\u4f7f\u7528 !important \u4fdd\u62a4<\/li>\n <li>\u56fa\u5b9a\u5bfc\u822a\u7528 sticky \u800c\u975e fixed<\/li>\n <li>\u951a\u70b9\u8bbe\u7f6e\u4e86 scroll-margin-top \u8865\u507f<\/li>\n <li>\u76f4\u63a5\u7c98\u8d34\u5230\u81ea\u5b9a\u4e49HTML\u533a\u5757\u5373\u53ef\u53d1\u5e03<\/li>\n <\/ul>\n\n <h3>iframe\u65b9\u6848\u81ea\u68c0<\/h3>\n <ul class=\"checklist pass\">\n <li>\u6240\u6709 JS \u4ea4\u4e92\u5df2\u5728\u672c\u5730\u6d4f\u89c8\u5668\u9a8c\u8bc1\u901a\u8fc7<\/li>\n <li>\u6bcf\u4e2a querySelectorAll \u9009\u62e9\u5668\u8def\u5f84\u4e0e DOM \u5d4c\u5957\u4e00\u81f4<\/li>\n <li>\u6ca1\u6709\u8bef\u7528 ~ \u5144\u5f1f\u9009\u62e9\u5668\u6307\u5411\u540e\u4ee3\u5143\u7d20<\/li>\n <li>\u56fe\u7247\u4f7f\u7528\u7edd\u5bf9 URL<\/li>\n <li>Hero \u533a\u57df\u6587\u5b57\u989c\u8272 4 \u5c42 !important \u4fdd\u62a4<\/li>\n <li>\u6ca1\u6709 position: fixed\uff0c\u6539\u7528 sticky<\/li>\n <li>\u89e6\u6478\u4e8b\u4ef6\u76d1\u542c\u5668\u6807\u8bb0\u4e86 {passive: true}<\/li>\n <li>HTML \u6587\u4ef6\u540d\u7528\u82f1\u6587\uff0c\u5df2\u4e0a\u4f20\u5230 wp-content\/uploads\/<\/li>\n <li>iframe \u9ad8\u5ea6\u81ea\u9002\u5e94\u4ee3\u7801\u5df2\u914d\u7f6e<\/li>\n <\/ul>\n<\/div>\n\n\n<div class=\"chapter\" id=\"sec-ai-prompt\">\n <div class=\"chapter-head\">\n <span class=\"chapter-num blue\">8<\/span>\n <span class=\"chapter-title\">AI\u6307\u4ee4\u6a21\u677f <small>\u590d\u5236\u7ed9AI\u667a\u80fd\u4f53<\/small><\/span>\n <\/div>\n\n <h3>\u7eafCSS\u65b9\u6848\u6307\u4ee4<\/h3>\n <details>\n <summary>\u5c55\u5f00\uff1a\u7eafCSS\u65b9\u6848AI\u6307\u4ee4<\/summary>\n <div class=\"detail-body\">\n <div class=\"code-block\">\u4f60\u662f\u4e00\u4e2a WordPress \u9875\u9762\u6784\u5efa\u4e13\u5bb6\u3002\u5728\u4e3a\u6211\u521b\u5efa\u5d4c\u5165 WordPress \u7684\u4ea4\u4e92\u5f0f HTML \u9875\u9762\u65f6\uff0c\u5fc5\u987b\u9075\u5b88\u4ee5\u4e0b\u89c4\u5219\uff1a\n\n\u3010\u6574\u4f53\u6d41\u7a0b\u3011\n1. \u6240\u6709\u5185\u5bb9\u5199\u5165\u5355\u4e2a HTML \u6587\u4ef6\n2. \u96f6 JavaScript\uff1a\u4e0d\u4f7f\u7528 <script> \u6807\u7b7e\u3001\u4e0d\u4f7f\u7528 onclick \u7b49\u4e8b\u4ef6\u5c5e\u6027\n3. \u53d1\u5e03\u65b9\u5f0f\uff1a\u76f4\u63a5\u7c98\u8d34\u5230 WordPress \u81ea\u5b9a\u4e49HTML\u533a\u5757\n\n\u3010\u4ea4\u4e92\u5b9e\u73b0\u3011\n– Tab\u5207\u6362 \u2192 \u9690\u85cfradio + label[for] + CSS :checked \u4f2a\u7c7b\n– FAQ\u624b\u98ce\u7434 \u2192 HTML5 <details> + <summary> \u539f\u751f\u6807\u7b7e\n– \u5e73\u6ed1\u6eda\u52a8 \u2192 CSS scroll-behavior: smooth\n– \u951a\u70b9\u504f\u79fb \u2192 CSS scroll-margin-top: 140px\n\n\u3010CSS \u9009\u62e9\u5668\u94c1\u5f8b\u3011\n– \u627e Tab \u9762\u677f\u7528\u300c\u7a7a\u683c\u300d\uff08\u540e\u4ee3\u9009\u62e9\u5668\uff09\n– \u4e25\u7981\u7528\u300c~\u300d\uff08\u5144\u5f1f\u9009\u62e9\u5668\uff09\u627e\u9762\u677f\n– :checked \u6280\u5de7\u8981\u6c42 radio\u3001tab-bar\u3001tab-panels \u662f\u540c\u7ea7\u5144\u5f1f\n\n\u3010Hero \u989c\u8272\u4fdd\u62a4\u3011\n– \u6df1\u8272\u80cc\u666f Hero \u5fc5\u987b 4 \u5c42\u4fdd\u62a4\uff0c\u6bcf\u5c42\u90fd\u52a0 !important\n\n\u3010CSS \u53d8\u91cf\u9694\u79bb\u3011\n– \u6240\u6709\u53d8\u91cf\u5728 :root \u4e2d\u81ea\u5efa\uff0c\u4e0d\u5f15\u7528\u4efb\u4f55 wp- \u6216 theme-* \u53d8\u91cf\n\n\u3010\u56fa\u5b9a\u5bfc\u822a\u3011\n– \u7528 position: sticky \u800c\u975e fixed\n– top \u503c = WordPress\u4e3b\u9898header\u9ad8\u5ea6\uff08Astra\u7ea680px\uff09\n– \u914d\u5408 scroll-margin-top \u8865\u507f\u951a\u70b9\u504f\u79fb<\/div>\n <\/div>\n <\/details>\n\n <h3>iframe\u65b9\u6848\u6307\u4ee4<\/h3>\n <details>\n <summary>\u5c55\u5f00\uff1aiframe\u65b9\u6848AI\u6307\u4ee4<\/summary>\n <div class=\"detail-body\">\n <div class=\"code-block\">\u4f60\u662f\u4e00\u4e2a WordPress \u667a\u80fd\u6ed1\u5757\u6784\u5efa\u4e13\u5bb6\u3002\u5728\u4e3a\u6211\u521b\u5efa\u9700\u8981\u590d\u6742JS\u4ea4\u4e92\u7684\u5d4c\u5165\u9875\u9762\u65f6\uff0c\u5fc5\u987b\u9075\u5b88\u4ee5\u4e0b\u89c4\u5219\uff1a\n\n\u3010\u6574\u4f53\u6d41\u7a0b\u3011\n1. \u6240\u6709\u5185\u5bb9\u5199\u5165\u5355\u4e2a HTML \u6587\u4ef6\uff08CSS + JS + HTML\uff09\n2. \u53d1\u5e03\u65b9\u5f0f\uff1a\u4e0a\u4f20 HTML \u5230\u670d\u52a1\u5668 \u2192 WordPress \u9875\u9762\u4e2d\u7528 iframe \u5d4c\u5165\n3. iframe \u5185\u5fc5\u987b\u5305\u542b\u9ad8\u5ea6\u81ea\u9002\u5e94 postMessage \u4ee3\u7801\n\n\u3010CSS \u9009\u62e9\u5668\u94c1\u5f8b\u3011\n– \u627e Tab \u9762\u677f\u7528\u300c\u7a7a\u683c\u300d\uff08\u540e\u4ee3\u9009\u62e9\u5668\uff09\n– \u4e25\u7981\u7528\u300c~\u300d\uff08\u5144\u5f1f\u9009\u62e9\u5668\uff09\u627e\u9762\u677f\n\n\u3010Hero \u989c\u8272\u4fdd\u62a4\u3011\n– \u6df1\u8272\u80cc\u666f Hero \u5fc5\u987b 4 \u5c42\u4fdd\u62a4\uff0c\u6bcf\u5c42\u90fd\u52a0 !important\n\n\u3010\u5b89\u5168\u89c4\u5219\u3011\n– \u4e0d\u76f4\u63a5\u4fee\u6539 WordPress \u9875\u9762\u5185\u5bb9\n– \u53ea\u751f\u6210\u4ee3\u7801\uff0c\u7531\u4eba\u5de5\u7c98\u8d34\u53d1\u5e03<\/div>\n <\/div>\n <\/details>\n<\/div>\n\n\n<div class=\"chapter\" id=\"sec-case-guide\">\n <div class=\"chapter-head\">\n <span class=\"chapter-num blue\">9<\/span>\n <span class=\"chapter-title\">\u9644\u5f55\uff1a\u6848\u4f8b\u5206\u4eab\u521b\u5efa\u6307\u5357 \u00b7 \u8bbe\u8ba1\u753b\u5e03<\/span>\n <\/div>\n\n <h3>6\u6b65\u6807\u51c6\u5316\u6d41\u7a0b<\/h3>\n <div class=\"step-flow\">\n <div class=\"step-item\">\n <span class=\"step-num\">1<\/span>\n <span class=\"step-label\">\u4e0b\u8f7d\u7167\u7247<\/span>\n <span class=\"step-desc\">D:\/\u5b98\u7f51\u9700\u8981\u7684\u8d44\u6599\/<\/span>\n <\/div>\n <div class=\"step-arrow\">\u2192<\/div>\n <div class=\"step-item\">\n <span class=\"step-num\">2<\/span>\n <span class=\"step-label\">\u9a6c\u7ef4\u65af\u7f16\u8f91<\/span>\n <span class=\"step-desc\">\u547d\u540d\u00b7\u538b\u7f29\u00b7\u5c3a\u5bf8<\/span>\n <\/div>\n <div class=\"step-arrow\">\u2192<\/div>\n <div class=\"step-item\">\n <span class=\"step-num\">3<\/span>\n <span class=\"step-label\">\u4e0a\u4f20\u5a92\u4f53\u5e93<\/span>\n <span class=\"step-desc\">\u6dfb\u52a0\u65b0\u6587\u4ef6<\/span>\n <\/div>\n <\/div>\n <div class=\"step-flow\">\n <div class=\"step-item\">\n <span class=\"step-num\">4<\/span>\n <span class=\"step-label\">\u590d\u5236URL\u7ed9AI<\/span>\n <span class=\"step-desc\">\u6bcf\u5f20\u7167\u7247\u94fe\u63a5<\/span>\n <\/div>\n <div class=\"step-arrow\">\u2192<\/div>\n <div class=\"step-item\">\n <span class=\"step-num\">5<\/span>\n <span class=\"step-label\">AI\u5d4c\u5165HTML<\/span>\n <span class=\"step-desc\">\u66ff\u6362img src<\/span>\n <\/div>\n <div class=\"step-arrow\">\u2192<\/div>\n <div class=\"step-item\">\n <span class=\"step-num\">6<\/span>\n <span class=\"step-label\">\u7c98\u8d34\u53d1\u5e03<\/span>\n <span class=\"step-desc\">\u81ea\u5b9a\u4e49HTML\u533a\u5757<\/span>\n <\/div>\n <\/div>\n\n <h3>\u6838\u5fc3\u53c2\u6570<\/h3>\n <table>\n <tr><th>\u7ef4\u5ea6<\/th><th>\u5185\u5bb9<\/th><\/tr>\n <tr><td>\u7167\u7247\u5efa\u8bae<\/td><td>10~15\u5f20\/\u6848\u4f8b<\/td><\/tr>\n <tr><td>\u538b\u7f29\u6807\u51c6<\/td><td>80~150KB<\/td><\/tr>\n <tr><td>\u53d1\u5e03\u65b9\u5f0f<\/td><td>\u81ea\u5b9a\u4e49HTML\u533a\u5757<\/td><\/tr>\n <tr><td>\u6548\u7387\u63d0\u5347<\/td><td>2h \u2192 30min<\/td><\/tr>\n <\/table>\n\n <h3>\u7167\u7247\u547d\u540d\u89c4\u8303<\/h3>\n <p><strong>\u683c\u5f0f\uff1a<\/strong>\u5730\u70b9+\u6237\u578b+\u54c1\u724c+\u4e3b\u673a\u578b\u53f7_\u7167\u7247\u5185\u5bb9\u63cf\u8ff0.jpg<\/p>\n <table>\n <tr><th>\u539f\u59cb\u6587\u4ef6\u540d<\/th><th>\u89c4\u8303\u547d\u540d<\/th><\/tr>\n <tr><td>IMG_20260609_001.jpg<\/td><td>\u5927\u6797\u9547\u81ea\u5efa\u623f\u65e5\u7acb\u6c34\u5885\u9002225\u4e3b\u673a\u4e00\u62d68_\u5916\u673a\u6392\u6c14\u9600\u4f4d\u7f6e.jpg<\/td><\/tr>\n <tr><td>\u5fae\u4fe1\u56fe\u7247_20260609.jpg<\/td><td>\u5927\u6797\u9547\u81ea\u5efa\u623f\u65e5\u7acb\u6c34\u5885\u9002225\u4e3b\u673a\u4e00\u62d68_\u6a2a1.jpg<\/td><\/tr>\n <\/table>\n\n <h3>\u7167\u7247\u538b\u7f29\u89c4\u8303<\/h3>\n <table>\n <tr><th>\u7528\u9014<\/th><th>\u5c3a\u5bf8<\/th><th>\u6587\u4ef6\u5927\u5c0f<\/th><\/tr>\n <tr><td>\u7f51\u683c\u7f29\u7565\u56fe<\/td><td>800\u00d7600px<\/td><td>80~150KB<\/td><\/tr>\n <tr><td>\u70b9\u51fb\u653e\u5927<\/td><td>1920\u00d71440px<\/td><td>300~500KB<\/td><\/tr>\n <\/table>\n\n <h3>\u7ed9AI\u7684\u6307\u4ee4\u6a21\u677f<\/h3>\n <details>\n <summary>\u5c55\u5f00\uff1a\u6848\u4f8b\u5206\u4eabAI\u6307\u4ee4\u6a21\u677f<\/summary>\n <div class=\"detail-body\">\n <div class=\"code-block\">\/\/ \u6b65\u9aa41\uff1a\u63d0\u4f9b\u5ba2\u6237\u4fe1\u606f\n\u5ba2\u6237\u59d3\u540d\uff1a\u5f90\u5148\u751f\n\u5730\u5740\uff1a\u5929\u5e9c\u65b0\u533a\u5927\u6797\u9547\n\u6237\u578b\uff1a3\u5c42\u81ea\u5efa\u623f\uff08\u672c\u6b21\u88c5\u4fee2\u697c\uff09\n\u5ba2\u6237\u539f\u8bdd\uff1a”\u6548\u679c\u8981\u597d” “\u5c3d\u91cf\u914d\u5927\u70b9” “\u4e0d\u8981\u70ed\u6c34\u5ffd\u51b7\u5ffd\u70ed”\n\n\/\/ \u6b65\u9aa42\uff1a\u63d0\u4f9b\u65b9\u6848\u914d\u7f6e\n\u5916\u673a\uff1a\u65e5\u7acb RAS-225FPUEN2Q\/M\uff0820kW\/23kW\uff09\n\u5185\u673a\uff1a\u65e5\u7acb\u96f6\u8d8a \u00d7 8\u53f0\uff0c\u8d85\u914d\u7387183%\n\u7cfb\u7edf\uff1a\u5929\u6c34\u5730\u6c34\u4e24\u8054\u4f9b + \u6052\u6e29\u6052\u538b\u70ed\u6c34\n\n\/\/ \u6b65\u9aa43\uff1a\u63d0\u4f9b\u7167\u7247URL\n\u8bf7\u628a\u8fd9\u4e9b\u94fe\u63a5\u66ff\u6362\u5230HTML\u4ee3\u7801\u91cc\u9762\uff1a\nhttps:\/\/longmai-nt.com\/wp-content\/uploads\/2026\/06\/\u2026_\u6a2a1.jpg\nhttps:\/\/longmai-nt.com\/wp-content\/uploads\/2026\/06\/\u2026_\u6a2a2.jpg\n\u2026\n\n\/\/ \u6b65\u9aa44\uff1a\u7279\u6b8a\u8981\u6c42\n\u4e0d\u4f53\u73b0\u62a5\u4ef7 \u00b7 \u4f7f\u7528\u5357\u5317\u5bcc\u68ee\u70ed\u7ebf \u00b7 \u5730\u6696\u5c1a\u672a\u8fdb\u573a<\/div>\n <\/div>\n <\/details>\n\n <h3>\u6700\u4f73\u5b9e\u8df5 vs \u907f\u5751<\/h3>\n <div class=\"compare-grid\">\n <div class=\"compare-box good\">\n <span class=\"label\">\u2705 \u505a<\/span>\n <ul>\n <li>\u7167\u7247\u7edf\u4e00\u547d\u540d \u2192 AI\u80fd\u7406\u89e3\u5185\u5bb9<\/li>\n <li>\u7edf\u4e00\u7f16\u8f91\u5c3a\u5bf8\u3001\u538b\u7f29 \u2192 \u9875\u9762\u52a0\u8f7d\u5feb<\/li>\n <li>\u5a92\u4f53\u5e93URL\u4ea4\u7ed9AI \u2192 \u5d4c\u5165\u51c6\u786e<\/li>\n <li>WordPress\u7528”\u81ea\u5b9a\u4e49HTML”\u533a\u5757\u7c98\u8d34<\/li>\n <li>7\u677f\u5757\u7ed3\u6784 \u2192 \u4fe1\u606f\u5b8c\u6574\u903b\u8f91\u6e05\u6670<\/li>\n <li>\u4e0d\u4f53\u73b0\u62a5\u4ef7 \u2192 \u5f15\u6d41\u5230\u95e8\u5e97\u54a8\u8be2<\/li>\n <\/ul>\n <\/div>\n <div class=\"compare-box bad\">\n <span class=\"label\">\u274c \u4e0d\u505a<\/span>\n <ul>\n <li>\u522b\u8ba9\u5de5\u4eba\u968f\u4fbf\u547d\u540d\uff08IMG_xxx.jpg\u6ca1\u4eba\u770b\u5f97\u61c2\uff09<\/li>\n <li>\u522b\u7528\u5fae\u4fe1\u538b\u7f29\u56fe\uff08\u753b\u8d28\u5dee\uff09<\/li>\n <li>\u522b\u5728\u9875\u9762\u91cc\u653e\u62a5\u4ef7\uff08\u907f\u514d\u5728\u7ebf\u6bd4\u4ef7\uff09<\/li>\n <li>\u522b\u8df3\u8fc7\u4eba\u5de5\u6821\u5bf9\uff08AI\u65e0\u6cd5\u8bfb\u56fe\uff09<\/li>\n <li>\u522b\u7528”\u4ee3\u7801\u7f16\u8f91\u5668”\u6a21\u5f0f\u7c98\u8d34HTML<\/li>\n <li>\u522b\u8df3\u8fc7\u9a6c\u7ef4\u65af\u7684\u7f16\u8f91\u6b65\u9aa4<\/li>\n <\/ul>\n <\/div>\n <\/div>\n<\/div>\n\n\n<div class=\"page-footer\">\n <p>\u9f99\u8109\u6696\u901a \u00b7 \u4e13\u6ce8\u8212\u9002\u8282\u80fd\u8bbe\u8ba1 \u00b7 \u59cb\u4e8e2004 | \u672c\u6307\u5357\u7531\u9f99\u8109\u6696\u901a\u56e2\u961f\u4e0eAI\u534f\u4f5c\u5b8c\u6210 \u00b7 2026\u5e746\u6708<\/p>\n <p>\ud83d\udd04 \u968f\u65f6\u66f4\u65b0\uff1a\u53d1\u73b0\u95ee\u9898\u5c31\u544a\u8bc9AI\u300c\u66f4\u65b0\u907f\u5751\u6307\u5357\u300d\uff0c\u751f\u6210\u65b0\u7248\u672c\u540e\u7c98\u8d34\u66ff\u6362\u5373\u53ef<\/p>\n<\/div>\n\n<\/main>\n<\/div>\n\n<\/body>\n<\/html>\n<\/div>\n<\/div>\n<\/div>\n\n\n\n<hr class=\"wp-block-separator has-alpha-channel-opacity is-style-wide\"\/>\n","protected":false},"excerpt":{"rendered":"<p>\u4ece\u65b9\u6848\u5230\u4e0a\u7ebf\u7684\u5b8c\u6574\u6d41\u7a0b \u00b7 \u56fe\u7247\u5d4c\u5165\u89e3\u51b3 […]<\/p>\n","protected":false},"author":1,"featured_media":0,"parent":0,"menu_order":0,"comment_status":"closed","ping_status":"closed","template":"","meta":{"site-sidebar-layout":"default","site-content-layout":"","ast-site-content-layout":"default","site-content-style":"default","site-sidebar-style":"default","ast-global-header-display":"","ast-banner-title-visibility":"","ast-main-header-display":"","ast-hfb-above-header-display":"","ast-hfb-below-header-display":"","ast-hfb-mobile-header-display":"","site-post-title":"","ast-breadcrumbs-content":"","ast-featured-img":"","footer-sml-layout":"","ast-disable-related-posts":"","theme-transparent-header-meta":"","adv-header-id-meta":"","stick-header-meta":"","header-above-stick-meta":"","header-main-stick-meta":"","header-below-stick-meta":"","astra-migrate-meta-layouts":"default","ast-page-background-enabled":"default","ast-page-background-meta":{"desktop":{"background-color":"var(--ast-global-color-5)","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""},"tablet":{"background-color":"","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""},"mobile":{"background-color":"","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""}},"ast-content-background-meta":{"desktop":{"background-color":"var(--ast-global-color-4)","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""},"tablet":{"background-color":"var(--ast-global-color-4)","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""},"mobile":{"background-color":"var(--ast-global-color-4)","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""}},"footnotes":""},"class_list":["post-2778","page","type-page","status-publish","hentry"],"yoast_head":"\n<title>\u6848\u4f8b\u5206\u4eab\u521b\u5efa\u6307\u5357 \u00b7 \u8bbe\u8ba1\u753b\u5e03 - \u9f99\u8109\u6696\u901a<\/title>\n<meta name=\"robots\" content=\"index, follow, max-snippet:-1, max-image-preview:large, max-video-preview:-1\" \/>\n<link rel=\"canonical\" href=\"https:\/\/longmai-nt.com\/?page_id=2778\" \/>\n<meta property=\"og:locale\" content=\"zh_CN\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"\u6848\u4f8b\u5206\u4eab\u521b\u5efa\u6307\u5357 \u00b7 \u8bbe\u8ba1\u753b\u5e03 - \u9f99\u8109\u6696\u901a\" \/>\n<meta property=\"og:description\" content=\"\u4ece\u65b9\u6848\u5230\u4e0a\u7ebf\u7684\u5b8c\u6574\u6d41\u7a0b \u00b7 \u56fe\u7247\u5d4c\u5165\u89e3\u51b3 […]\" \/>\n<meta property=\"og:url\" content=\"https:\/\/longmai-nt.com\/?page_id=2778\" \/>\n<meta property=\"og:site_name\" content=\"\u9f99\u8109\u6696\u901a\" \/>\n<meta property=\"article:modified_time\" content=\"2026-06-13T07:44:26+00:00\" \/>\n<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\n<meta name=\"twitter:label1\" content=\"\u9884\u8ba1\u9605\u8bfb\u65f6\u95f4\" \/>\n\t<meta name=\"twitter:data1\" content=\"9 \u5206\" \/>\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\\\/\\\/schema.org\",\"@graph\":[{\"@type\":\"WebPage\",\"@id\":\"https:\\\/\\\/longmai-nt.com\\\/?page_id=2778\",\"url\":\"https:\\\/\\\/longmai-nt.com\\\/?page_id=2778\",\"name\":\"\u6848\u4f8b\u5206\u4eab\u521b\u5efa\u6307\u5357 \u00b7 \u8bbe\u8ba1\u753b\u5e03 - \u9f99\u8109\u6696\u901a\",\"isPartOf\":{\"@id\":\"https:\\\/\\\/longmai-nt.com\\\/#website\"},\"datePublished\":\"2026-06-09T11:51:59+00:00\",\"dateModified\":\"2026-06-13T07:44:26+00:00\",\"breadcrumb\":{\"@id\":\"https:\\\/\\\/longmai-nt.com\\\/?page_id=2778#breadcrumb\"},\"inLanguage\":\"zh-Hans\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\\\/\\\/longmai-nt.com\\\/?page_id=2778\"]}]},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\\\/\\\/longmai-nt.com\\\/?page_id=2778#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"\u9996\u9875\",\"item\":\"https:\\\/\\\/longmai-nt.com\\\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"\u6848\u4f8b\u5206\u4eab\u521b\u5efa\u6307\u5357 \u00b7 \u8bbe\u8ba1\u753b\u5e03\"}]},{\"@type\":\"WebSite\",\"@id\":\"https:\\\/\\\/longmai-nt.com\\\/#website\",\"url\":\"https:\\\/\\\/longmai-nt.com\\\/\",\"name\":\"\u9f99\u8109\u6696\u901a\",\"description\":\"\u4e13\u6ce8\u8212\u9002\u8282\u80fd\u8bbe\u8ba1\",\"publisher\":{\"@id\":\"https:\\\/\\\/longmai-nt.com\\\/#organization\"},\"potentialAction\":[{\"@type\":\"SearchAction\",\"target\":{\"@type\":\"EntryPoint\",\"urlTemplate\":\"https:\\\/\\\/longmai-nt.com\\\/?s={search_term_string}\"},\"query-input\":{\"@type\":\"PropertyValueSpecification\",\"valueRequired\":true,\"valueName\":\"search_term_string\"}}],\"inLanguage\":\"zh-Hans\"},{\"@type\":\"Organization\",\"@id\":\"https:\\\/\\\/longmai-nt.com\\\/#organization\",\"name\":\"\u6210\u90fd\u5e02\u9f99\u8109\u6696\u901a\u8bbe\u5907\u6709\u9650\u516c\u53f8\",\"alternateName\":\"\u9f99\u8109\u6696\u901a\",\"url\":\"https:\\\/\\\/longmai-nt.com\\\/\",\"logo\":{\"@type\":\"ImageObject\",\"inLanguage\":\"zh-Hans\",\"@id\":\"https:\\\/\\\/longmai-nt.com\\\/#\\\/schema\\\/logo\\\/image\\\/\",\"url\":\"http:\\\/\\\/longmai-nt.com\\\/wp-content\\\/uploads\\\/2026\\\/04\\\/logo.png\",\"contentUrl\":\"http:\\\/\\\/longmai-nt.com\\\/wp-content\\\/uploads\\\/2026\\\/04\\\/logo.png\",\"width\":516,\"height\":478,\"caption\":\"\u6210\u90fd\u5e02\u9f99\u8109\u6696\u901a\u8bbe\u5907\u6709\u9650\u516c\u53f8\"},\"image\":{\"@id\":\"https:\\\/\\\/longmai-nt.com\\\/#\\\/schema\\\/logo\\\/image\\\/\"},\"sameAs\":[\"https:\\\/\\\/www.xiaohongshu.com\\\/user\\\/profile\\\/5fe8a4e800000000010058d2\"]}]}<\/script>\n","yoast_head_json":{"title":"\u6848\u4f8b\u5206\u4eab\u521b\u5efa\u6307\u5357 \u00b7 \u8bbe\u8ba1\u753b\u5e03 - \u9f99\u8109\u6696\u901a","robots":{"index":"index","follow":"follow","max-snippet":"max-snippet:-1","max-image-preview":"max-image-preview:large","max-video-preview":"max-video-preview:-1"},"canonical":"https:\/\/longmai-nt.com\/?page_id=2778","og_locale":"zh_CN","og_type":"article","og_title":"\u6848\u4f8b\u5206\u4eab\u521b\u5efa\u6307\u5357 \u00b7 \u8bbe\u8ba1\u753b\u5e03 - \u9f99\u8109\u6696\u901a","og_description":"\u4ece\u65b9\u6848\u5230\u4e0a\u7ebf\u7684\u5b8c\u6574\u6d41\u7a0b \u00b7 \u56fe\u7247\u5d4c\u5165\u89e3\u51b3 […]","og_url":"https:\/\/longmai-nt.com\/?page_id=2778","og_site_name":"\u9f99\u8109\u6696\u901a","article_modified_time":"2026-06-13T07:44:26+00:00","twitter_card":"summary_large_image","twitter_misc":{"\u9884\u8ba1\u9605\u8bfb\u65f6\u95f4":"9 \u5206"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"WebPage","@id":"https:\/\/longmai-nt.com\/?page_id=2778","url":"https:\/\/longmai-nt.com\/?page_id=2778","name":"\u6848\u4f8b\u5206\u4eab\u521b\u5efa\u6307\u5357 \u00b7 \u8bbe\u8ba1\u753b\u5e03 - \u9f99\u8109\u6696\u901a","isPartOf":{"@id":"https:\/\/longmai-nt.com\/#website"},"datePublished":"2026-06-09T11:51:59+00:00","dateModified":"2026-06-13T07:44:26+00:00","breadcrumb":{"@id":"https:\/\/longmai-nt.com\/?page_id=2778#breadcrumb"},"inLanguage":"zh-Hans","potentialAction":[{"@type":"ReadAction","target":["https:\/\/longmai-nt.com\/?page_id=2778"]}]},{"@type":"BreadcrumbList","@id":"https:\/\/longmai-nt.com\/?page_id=2778#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"\u9996\u9875","item":"https:\/\/longmai-nt.com\/"},{"@type":"ListItem","position":2,"name":"\u6848\u4f8b\u5206\u4eab\u521b\u5efa\u6307\u5357 \u00b7 \u8bbe\u8ba1\u753b\u5e03"}]},{"@type":"WebSite","@id":"https:\/\/longmai-nt.com\/#website","url":"https:\/\/longmai-nt.com\/","name":"\u9f99\u8109\u6696\u901a","description":"\u4e13\u6ce8\u8212\u9002\u8282\u80fd\u8bbe\u8ba1","publisher":{"@id":"https:\/\/longmai-nt.com\/#organization"},"potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https:\/\/longmai-nt.com\/?s={search_term_string}"},"query-input":{"@type":"PropertyValueSpecification","valueRequired":true,"valueName":"search_term_string"}}],"inLanguage":"zh-Hans"},{"@type":"Organization","@id":"https:\/\/longmai-nt.com\/#organization","name":"\u6210\u90fd\u5e02\u9f99\u8109\u6696\u901a\u8bbe\u5907\u6709\u9650\u516c\u53f8","alternateName":"\u9f99\u8109\u6696\u901a","url":"https:\/\/longmai-nt.com\/","logo":{"@type":"ImageObject","inLanguage":"zh-Hans","@id":"https:\/\/longmai-nt.com\/#\/schema\/logo\/image\/","url":"http:\/\/longmai-nt.com\/wp-content\/uploads\/2026\/04\/logo.png","contentUrl":"http:\/\/longmai-nt.com\/wp-content\/uploads\/2026\/04\/logo.png","width":516,"height":478,"caption":"\u6210\u90fd\u5e02\u9f99\u8109\u6696\u901a\u8bbe\u5907\u6709\u9650\u516c\u53f8"},"image":{"@id":"https:\/\/longmai-nt.com\/#\/schema\/logo\/image\/"},"sameAs":["https:\/\/www.xiaohongshu.com\/user\/profile\/5fe8a4e800000000010058d2"]}]}},"jetpack_sharing_enabled":true,"_links":{"self":[{"href":"https:\/\/longmai-nt.com\/index.php?rest_route=\/wp\/v2\/pages\/2778","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/longmai-nt.com\/index.php?rest_route=\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/longmai-nt.com\/index.php?rest_route=\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/longmai-nt.com\/index.php?rest_route=\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/longmai-nt.com\/index.php?rest_route=%2Fwp%2Fv2%2Fcomments&post=2778"}],"version-history":[{"count":6,"href":"https:\/\/longmai-nt.com\/index.php?rest_route=\/wp\/v2\/pages\/2778\/revisions"}],"predecessor-version":[{"id":3146,"href":"https:\/\/longmai-nt.com\/index.php?rest_route=\/wp\/v2\/pages\/2778\/revisions\/3146"}],"wp:attachment":[{"href":"https:\/\/longmai-nt.com\/index.php?rest_route=%2Fwp%2Fv2%2Fmedia&parent=2778"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}