{"id":56741,"date":"2024-10-10T14:06:20","date_gmt":"2024-10-10T06:06:20","guid":{"rendered":"https:\/\/server.hk\/cnblog\/56741\/"},"modified":"2024-10-10T14:06:20","modified_gmt":"2024-10-10T06:06:20","slug":"wordpress-%e6%95%99%e7%a8%8b%ef%bc%9a%e5%9c%a8-javascript-%e4%b8%ad%e4%bd%bf%e7%94%a8%e5%aa%92%e9%ab%94%e6%9f%a5%e8%a9%a2%e7%9a%84%e6%95%99%e7%a8%8b","status":"publish","type":"post","link":"https:\/\/server.hk\/cnblog\/56741\/","title":{"rendered":"WordPress \u6559\u7a0b\uff1a\u5728 JavaScript \u4e2d\u4f7f\u7528\u5a92\u9ad4\u67e5\u8a62\u7684\u6559\u7a0b"},"content":{"rendered":"

WordPress \u6559\u7a0b\uff1a\u5728 JavaScript \u4e2d\u4f7f\u7528\u5a92\u9ad4\u67e5\u8a62\u7684\u6559\u7a0b<\/h1>\n

\u5728\u73fe\u4eca\u7684\u7db2\u9801\u958b\u767c\u4e2d\uff0c\u97ff\u61c9\u5f0f\u8a2d\u8a08\u5df2\u6210\u70ba\u4e00\u500b\u4e0d\u53ef\u6216\u7f3a\u7684\u5143\u7d20\u3002\u5a92\u9ad4\u67e5\u8a62\u662f CSS \u4e2d\u7684\u4e00\u500b\u91cd\u8981\u529f\u80fd\uff0c\u80fd\u5920\u6839\u64da\u4e0d\u540c\u7684\u8a2d\u5099\u7279\u6027\uff08\u5982\u87a2\u5e55\u5927\u5c0f\u3001\u89e3\u6790\u5ea6\u7b49\uff09\u4f86\u8abf\u6574\u6a23\u5f0f\u3002\u7136\u800c\uff0c\u96a8\u8457 JavaScript \u7684\u666e\u53ca\uff0c\u958b\u767c\u8005\u4e5f\u958b\u59cb\u63a2\u7d22\u5982\u4f55\u5728 JavaScript \u4e2d\u4f7f\u7528\u5a92\u9ad4\u67e5\u8a62\uff0c\u4ee5\u4fbf\u5728\u52d5\u614b\u5167\u5bb9\u4e2d\u5be6\u73fe\u66f4\u9748\u6d3b\u7684\u97ff\u61c9\u5f0f\u8a2d\u8a08\u3002<\/p>\n

\u4ec0\u9ebc\u662f\u5a92\u9ad4\u67e5\u8a62\uff1f<\/h2>\n

\u5a92\u9ad4\u67e5\u8a62\u662f\u4e00\u7a2e CSS \u6280\u8853\uff0c\u5141\u8a31\u958b\u767c\u8005\u6839\u64da\u4e0d\u540c\u7684\u8a2d\u5099\u7279\u6027\u4f86\u61c9\u7528\u4e0d\u540c\u7684\u6a23\u5f0f\u3002\u9019\u4f7f\u5f97\u7db2\u7ad9\u80fd\u5920\u5728\u5404\u7a2e\u8a2d\u5099\u4e0a\u63d0\u4f9b\u6700\u4f73\u7684\u4f7f\u7528\u9ad4\u9a57\u3002\u5a92\u9ad4\u67e5\u8a62\u7684\u57fa\u672c\u8a9e\u6cd5\u5982\u4e0b\uff1a<\/p>\n

\n@media (max-width: 600px) {\n    body {\n        background-color: lightblue;\n    }\n}\n<\/code><\/pre>\n
\u5728\u9019\u500b\u4f8b\u5b50\u4e2d\uff0c\u7576\u87a2\u5e55\u5bec\u5ea6\u5c0f\u65bc\u6216\u7b49\u65bc 600 \u50cf\u7d20\u6642\uff0c\u7db2\u9801\u7684\u80cc\u666f\u984f\u8272\u5c07\u8b8a\u70ba\u6dfa\u85cd\u8272\u3002<\/p>\n
\u5728 JavaScript \u4e2d\u4f7f\u7528\u5a92\u9ad4\u67e5\u8a62<\/h2>\n
\u5728 JavaScript \u4e2d\uff0c\u6211\u5011\u53ef\u4ee5\u4f7f\u7528 window.matchMedia()<\/code> \u65b9\u6cd5\u4f86\u6aa2\u67e5\u5a92\u9ad4\u67e5\u8a62\u7684\u72c0\u614b\u3002\u9019\u500b\u65b9\u6cd5\u8fd4\u56de\u4e00\u500b MediaQueryList<\/code> \u5c0d\u8c61\uff0c\u8a72\u5c0d\u8c61\u53ef\u4ee5\u7528\u4f86\u5224\u65b7\u5a92\u9ad4\u67e5\u8a62\u662f\u5426\u5339\u914d\u3002<\/p>\n
\u57fa\u672c\u7528\u6cd5<\/h3>\n
\u4ee5\u4e0b\u662f\u4e00\u500b\u7c21\u55ae\u7684\u7bc4\u4f8b\uff0c\u5c55\u793a\u5982\u4f55\u5728 JavaScript \u4e2d\u4f7f\u7528\u5a92\u9ad4\u67e5\u8a62\uff1a<\/p>\n
\nconst mediaQuery = window.matchMedia('(max-width: 600px)');\n\nfunction handleMediaQueryChange(e) {\n    if (e.matches) {\n        \/\/ \u7576\u87a2\u5e55\u5bec\u5ea6\u5c0f\u65bc\u6216\u7b49\u65bc 600 \u50cf\u7d20\u6642\u57f7\u884c\u7684\u4ee3\u78bc\n        console.log('\u87a2\u5e55\u5bec\u5ea6\u5c0f\u65bc\u6216\u7b49\u65bc 600 \u50cf\u7d20');\n    } else {\n        \/\/ \u7576\u87a2\u5e55\u5bec\u5ea6\u5927\u65bc 600 \u50cf\u7d20\u6642\u57f7\u884c\u7684\u4ee3\u78bc\n        console.log('\u87a2\u5e55\u5bec\u5ea6\u5927\u65bc 600 \u50cf\u7d20');\n    }\n}\n\n\/\/ \u521d\u59cb\u6aa2\u67e5\nhandleMediaQueryChange(mediaQuery);\n\n\/\/ \u76e3\u807d\u5a92\u9ad4\u67e5\u8a62\u8b8a\u5316\nmediaQuery.addListener(handleMediaQueryChange);\n<\/code><\/pre>\n
\u5728\u9019\u500b\u7bc4\u4f8b\u4e2d\uff0c\u6211\u5011\u9996\u5148\u5275\u5efa\u4e86\u4e00\u500b\u5a92\u9ad4\u67e5\u8a62\uff0c\u7136\u5f8c\u5b9a\u7fa9\u4e86\u4e00\u500b\u51fd\u6578\u4f86\u8655\u7406\u5a92\u9ad4\u67e5\u8a62\u7684\u8b8a\u5316\u3002\u63a5\u8457\uff0c\u6211\u5011\u9032\u884c\u4e86\u521d\u59cb\u6aa2\u67e5\uff0c\u4e26\u6dfb\u52a0\u4e86\u4e00\u500b\u76e3\u807d\u5668\u4f86\u76e3\u63a7\u5a92\u9ad4\u67e5\u8a62\u7684\u8b8a\u5316\u3002<\/p>\n
\u5728 WordPress \u4e2d\u7684\u61c9\u7528<\/h3>\n
\u5728 WordPress \u4e2d\uff0c\u6211\u5011\u53ef\u4ee5\u5c07\u4e0a\u8ff0 JavaScript \u4ee3\u78bc\u5d4c\u5165\u5230\u4e3b\u984c\u7684 functions.php<\/code> \u6587\u4ef6\u4e2d\uff0c\u6216\u662f\u901a\u904e\u81ea\u5b9a\u7fa9\u63d2\u4ef6\u4f86\u5be6\u73fe\u3002\u9019\u6a23\u53ef\u4ee5\u78ba\u4fdd\u5728\u4e0d\u540c\u8a2d\u5099\u4e0a\u63d0\u4f9b\u6700\u4f73\u7684\u4f7f\u7528\u9ad4\u9a57\u3002<\/p>\n
\u793a\u4f8b\uff1a\u5728 WordPress \u4e2d\u6dfb\u52a0 JavaScript<\/h4>\n
\nfunction my_custom_scripts() {\n    wp_enqueue_script('my-media-query-script', get_template_directory_uri() . '\/js\/media-query.js', array(), null, true);\n}\nadd_action('wp_enqueue_scripts', 'my_custom_scripts');\n<\/code><\/pre>\n
\u5728\u9019\u500b\u4f8b\u5b50\u4e2d\uff0c\u6211\u5011\u4f7f\u7528 wp_enqueue_script<\/code> \u51fd\u6578\u4f86\u52a0\u8f09\u81ea\u5b9a\u7fa9\u7684 JavaScript \u6587\u4ef6\uff0c\u9019\u6a23\u5c31\u53ef\u4ee5\u5728 WordPress \u7db2\u7ad9\u4e2d\u4f7f\u7528\u5a92\u9ad4\u67e5\u8a62\u4e86\u3002<\/p>\n
\u7e3d\u7d50<\/h2>\n
\u5a92\u9ad4\u67e5\u8a62\u5728\u97ff\u61c9\u5f0f\u8a2d\u8a08\u4e2d\u626e\u6f14\u8457\u91cd\u8981\u89d2\u8272\uff0c\u800c\u5728 JavaScript \u4e2d\u4f7f\u7528\u5a92\u9ad4\u67e5\u8a62\u5247\u70ba\u958b\u767c\u8005\u63d0\u4f9b\u4e86\u66f4\u591a\u7684\u9748\u6d3b\u6027\u3002\u901a\u904e window.matchMedia()<\/code> \u65b9\u6cd5\uff0c\u6211\u5011\u53ef\u4ee5\u8f15\u9b06\u5730\u6aa2\u67e5\u5a92\u9ad4\u67e5\u8a62\u7684\u72c0\u614b\u4e26\u6839\u64da\u9700\u8981\u57f7\u884c\u76f8\u61c9\u7684\u4ee3\u78bc\u3002\u5728 WordPress \u4e2d\uff0c\u5c07\u9019\u4e9b\u6280\u8853\u61c9\u7528\u65bc\u4e3b\u984c\u6216\u63d2\u4ef6\u4e2d\uff0c\u53ef\u4ee5\u986f\u8457\u63d0\u5347\u7db2\u7ad9\u7684\u4f7f\u7528\u9ad4\u9a57\u3002<\/p>\n
\u5982\u679c\u60a8\u6b63\u5728\u5c0b\u627e\u9ad8\u6548\u7684 \u9999\u6e2fVPS<\/a> \u89e3\u6c7a\u65b9\u6848\uff0cServer.HK \u63d0\u4f9b\u591a\u7a2e\u9078\u64c7\uff0c\u6eff\u8db3\u60a8\u7684\u9700\u6c42\u3002\u7121\u8ad6\u662f\u7db2\u7ad9\u6258\u7ba1\u9084\u662f\u61c9\u7528\u7a0b\u5e8f\u90e8\u7f72\uff0c\u6211\u5011\u7684 \u4e91\u670d\u52a1\u5668<\/a> \u90fd\u80fd\u70ba\u60a8\u63d0\u4f9b\u7a69\u5b9a\u7684\u652f\u6301\u3002<\/p>\n","protected":false},"excerpt":{"rendered":"
\u5b66\u4e60\u5982\u4f55\u5728 JavaScript \u4e2d\u4f7f\u7528\u5a92\u4f53\u67e5\u8be2\uff0c\u4f18\u5316\u60a8\u7684 WordPress \u7f51\u7ad9\u54cd\u5e94\u5f0f\u8bbe\u8ba1\uff0c\u63d0\u5347\u7528\u6237\u4f53\u9a8c\u3002<\/p>\n","protected":false},"author":1,"featured_media":0,"comment_status":"closed","ping_status":"","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[4925],"tags":[],"class_list":["post-56741","post","type-post","status-publish","format-standard","hentry","category-4925"],"_links":{"self":[{"href":"https:\/\/server.hk\/cnblog\/wp-json\/wp\/v2\/posts\/56741","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/server.hk\/cnblog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/server.hk\/cnblog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/server.hk\/cnblog\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/server.hk\/cnblog\/wp-json\/wp\/v2\/comments?post=56741"}],"version-history":[{"count":1,"href":"https:\/\/server.hk\/cnblog\/wp-json\/wp\/v2\/posts\/56741\/revisions"}],"predecessor-version":[{"id":56742,"href":"https:\/\/server.hk\/cnblog\/wp-json\/wp\/v2\/posts\/56741\/revisions\/56742"}],"wp:attachment":[{"href":"https:\/\/server.hk\/cnblog\/wp-json\/wp\/v2\/media?parent=56741"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/server.hk\/cnblog\/wp-json\/wp\/v2\/categories?post=56741"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/server.hk\/cnblog\/wp-json\/wp\/v2\/tags?post=56741"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}