{"id":9603,"date":"2025-04-06T15:19:10","date_gmt":"2025-04-06T08:19:10","guid":{"rendered":"https:\/\/tapchicntt.com\/?p=9603"},"modified":"2025-04-14T13:47:59","modified_gmt":"2025-04-14T06:47:59","slug":"wordpress-huong-dan-tao-nut-upload-media-bang-wp_enqueue_media","status":"publish","type":"post","link":"https:\/\/tapchicntt.com\/wordpress-huong-dan-tao-nut-upload-media-bang-wp_enqueue_media\/","title":{"rendered":"[WordPress] H\u01b0\u1edbng d\u1eabn t\u1ea1o n\u00fat upload media b\u1eb1ng wp_enqueue_media()"},"content":{"rendered":"\n<p><code>wp_enqueue_media()<\/code>&nbsp;l\u00e0 m\u1ed9t h\u00e0m WordPress m\u1ea1nh m\u1ebd cho ph\u00e9p b\u1ea1n t\u00edch h\u1ee3p tr\u00ecnh t\u1ea3i l\u00ean v\u00e0 qu\u1ea3n l\u00fd t\u1ec7p ph\u01b0\u01a1ng ti\u1ec7n c\u1ee7a WordPress v\u00e0o c\u00e1c plugin v\u00e0 ch\u1ee7 \u0111\u1ec1 c\u1ee7a m\u00ecnh. D\u01b0\u1edbi \u0111\u00e2y l\u00e0 h\u01b0\u1edbng d\u1eabn chi ti\u1ebft v\u1ec1 c\u00e1ch s\u1eed d\u1ee5ng n\u00f3:<\/p>\n\n\n\n<h3 class=\"wp-block-heading\">1. <strong>M\u1ee5c \u0111\u00edch<\/strong><\/h3>\n\n\n\n<p>H\u00e0m&nbsp;<code>wp_enqueue_media()<\/code>&nbsp;t\u1ea3i t\u1ea5t c\u1ea3 c\u00e1c t\u1eadp l\u1ec7nh, ki\u1ec3u v\u00e0 khu\u00f4n m\u1eabu JavaScript c\u1ea7n thi\u1ebft \u0111\u1ec3 s\u1eed d\u1ee5ng API ph\u01b0\u01a1ng ti\u1ec7n c\u1ee7a WordPress. \u0110i\u1ec1u n\u00e0y cho ph\u00e9p b\u1ea1n t\u1ea1o c\u00e1c tr\u01b0\u1eddng t\u1ea3i l\u00ean t\u00f9y ch\u1ec9nh, th\u01b0 vi\u1ec7n ph\u01b0\u01a1ng ti\u1ec7n v\u00e0 c\u00e1c t\u00ednh n\u0103ng li\u00ean quan \u0111\u1ebfn ph\u01b0\u01a1ng ti\u1ec7n kh\u00e1c.<\/p>\n\n\n\n<p><strong>Khi n\u00e0o n\u00ean s\u1eed d\u1ee5ng<\/strong><\/p>\n\n\n\n<p>B\u1ea1n n\u00ean s\u1eed d\u1ee5ng&nbsp;<code>wp_enqueue_media()<\/code>&nbsp;b\u1ea5t c\u1ee9 khi n\u00e0o b\u1ea1n c\u1ea7n t\u01b0\u01a1ng t\u00e1c v\u1edbi th\u01b0 vi\u1ec7n ph\u01b0\u01a1ng ti\u1ec7n ho\u1eb7c t\u1ea3i l\u00ean t\u1ec7p ph\u01b0\u01a1ng ti\u1ec7n trong ph\u1ea7n ph\u1ee5 tr\u1ee3 c\u1ee7a WordPress (b\u1ea3ng \u0111i\u1ec1u khi\u1ec3n qu\u1ea3n tr\u1ecb).<\/p>\n\n\n\n<h3 class=\"wp-block-heading\">2. <strong>C\u00e1ch s\u1eed d\u1ee5ng<\/strong><\/h3>\n\n\n\n<p><strong>Th\u00eam h\u00e0m v\u00e0o hook&nbsp;<code>admin_enqueue_scripts<\/code>:<\/strong><\/p>\n\n\n<div class=\"wp-block-syntaxhighlighter-code \"><pre class=\"brush: php; title: ; notranslate\" title=\"\">\nfunction my_enqueue_media_uploader() {\n    wp_enqueue_media();\n}\nadd_action( &#039;admin_enqueue_scripts&#039;, &#039;my_enqueue_media_uploader&#039; );\n<\/pre><\/div>\n\n\n<p>\u0110\u1ea3m b\u1ea3o \u0111\u1eb7t h\u00e0m n\u00e0y trong t\u1ec7p&nbsp;<code>functions.php<\/code>&nbsp;c\u1ee7a ch\u1ee7 \u0111\u1ec1 ho\u1eb7c trong plugin c\u1ee7a b\u1ea1n.<\/p>\n\n\n\n<p><strong>T\u1ea1o n\u00fat t\u1ea3i l\u00ean<\/strong><\/p>\n\n\n<div class=\"wp-block-syntaxhighlighter-code \"><pre class=\"brush: xml; title: ; notranslate\" title=\"\">\n&lt;button id=&quot;upload_button&quot;&gt;Ch\u1ecdn ho\u1eb7c t\u1ea3i l\u00ean h\u00ecnh \u1ea3nh&lt;\/button&gt;\n&lt;input type=&quot;hidden&quot; name=&quot;image_attachment_id&quot; id=&quot;image_attachment_id&quot; value=&quot;&quot;&gt;\n&lt;img id=&quot;image_preview&quot; src=&quot;&quot; style=&quot;max-width: 300px;&quot;&gt;\n<\/pre><\/div>\n\n\n<p>B\u1ea1n c\u00f3 th\u1ec3 \u0111\u1eb7t n\u00fat n\u00e0y \u1edf b\u1ea5t k\u1ef3 \u0111\u00e2u trong bi\u1ec3u m\u1eabu ho\u1eb7c trang qu\u1ea3n tr\u1ecb c\u1ee7a m\u00ecnh.<\/p>\n\n\n\n<p><strong>Th\u00eam JavaScript \u0111\u1ec3 x\u1eed l\u00fd s\u1ef1 ki\u1ec7n nh\u1ea5p chu\u1ed9t:<\/strong><\/p>\n\n\n<div class=\"wp-block-syntaxhighlighter-code \"><pre class=\"brush: jscript; title: ; notranslate\" title=\"\">\njQuery(document).ready(function($){\n    var mediaUploader;\n\n    $(&#039;#upload_button&#039;).click(function(e) {\n        e.preventDefault();\n\n        if (mediaUploader) {\n            mediaUploader.open();\n            return;\n        }\n\n        mediaUploader = wp.media({\n            title: &#039;Ch\u1ecdn h\u00ecnh \u1ea3nh&#039;,\n            button: {\n                text: &#039;Ch\u1ecdn h\u00ecnh \u1ea3nh&#039;\n            },\n            multiple: false\n        });\n\n        mediaUploader.on(&#039;select&#039;, function(){\n            var attachment = mediaUploader.state().get(&#039;selection&#039;).first().toJSON();\n            $(&#039;#image_attachment_id&#039;).val(attachment.id);\n            $(&#039;#image_preview&#039;).attr(&#039;src&#039;, attachment.url);\n        });\n\n        mediaUploader.open();\n    });\n});\n<\/pre><\/div>\n\n\n<ol class=\"wp-block-list\">\n<li>\u0110\u1ea3m b\u1ea3o th\u00eam m\u00e3 n\u00e0y v\u00e0o m\u1ed9t t\u1ec7p JavaScript \u0111\u01b0\u1ee3c t\u1ea3i trong ph\u1ea7n ph\u1ee5 tr\u1ee3.<\/li>\n<\/ol>\n\n\n\n<h3 class=\"wp-block-heading\">3. <strong>Gi\u1ea3i th\u00edch<\/strong><\/h3>\n\n\n\n<ul class=\"wp-block-list\">\n<li><code>wp.media()<\/code>: T\u1ea1o m\u1ed9t \u0111\u1ed1i t\u01b0\u1ee3ng tr\u00ecnh t\u1ea3i l\u00ean ph\u01b0\u01a1ng ti\u1ec7n.<\/li>\n\n\n\n<li><code>title<\/code>: \u0110\u1eb7t ti\u00eau \u0111\u1ec1 cho c\u1eeda s\u1ed5 tr\u00ecnh t\u1ea3i l\u00ean.<\/li>\n\n\n\n<li><code>button.text<\/code>: \u0110\u1eb7t v\u0103n b\u1ea3n cho n\u00fat &#8220;Ch\u1ecdn&#8221; trong c\u1eeda s\u1ed5 tr\u00ecnh t\u1ea3i l\u00ean.<\/li>\n\n\n\n<li><code>multiple<\/code>: Cho ph\u00e9p ch\u1ecdn nhi\u1ec1u t\u1ec7p (\u0111\u1eb7t th\u00e0nh&nbsp;<code>true<\/code>) ho\u1eb7c ch\u1ec9 m\u1ed9t t\u1ec7p (\u0111\u1eb7t th\u00e0nh&nbsp;<code>false<\/code>).<\/li>\n\n\n\n<li><code>mediaUploader.on('select', ...)<\/code>: X\u1eed l\u00fd s\u1ef1 ki\u1ec7n khi ng\u01b0\u1eddi d\u00f9ng ch\u1ecdn m\u1ed9t t\u1ec7p.<\/li>\n\n\n\n<li><code>attachment.id<\/code>: L\u1ea5y ID t\u1ec7p \u0111\u00ednh k\u00e8m.<\/li>\n\n\n\n<li><code>attachment.url<\/code>: L\u1ea5y URL c\u1ee7a t\u1ec7p.<\/li>\n<\/ul>\n\n\n\n<p><strong>T\u00f9y ch\u1ec9nh<\/strong><\/p>\n\n\n\n<p>B\u1ea1n c\u00f3 th\u1ec3 t\u00f9y ch\u1ec9nh tr\u00ecnh t\u1ea3i l\u00ean ph\u01b0\u01a1ng ti\u1ec7n b\u1eb1ng c\u00e1ch s\u1eed d\u1ee5ng c\u00e1c t\u00f9y ch\u1ecdn kh\u00e1c nhau trong h\u00e0m&nbsp;<code>wp.media()<\/code>. V\u00ed d\u1ee5: b\u1ea1n c\u00f3 th\u1ec3 \u0111\u1eb7t lo\u1ea1i t\u1ec7p \u0111\u01b0\u1ee3c ph\u00e9p t\u1ea3i l\u00ean, gi\u1edbi h\u1ea1n k\u00edch th\u01b0\u1edbc t\u1ec7p v\u00e0 h\u01a1n th\u1ebf n\u1eefa.<\/p>\n\n\n\n<p><strong>L\u01b0u \u00fd quan tr\u1ecdng<\/strong><\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li>\u0110\u1ea3m b\u1ea3o r\u1eb1ng JavaScript c\u1ee7a b\u1ea1n \u0111\u01b0\u1ee3c \u0111\u1eb7t trong m\u1ed9t h\u00e0m&nbsp;<code>jQuery(document).ready()<\/code>.<\/li>\n\n\n\n<li>B\u1ea1n c\u00f3 th\u1ec3 s\u1eed d\u1ee5ng h\u00e0m&nbsp;<code>wp_get_attachment_image_src()<\/code>&nbsp;\u0111\u1ec3 l\u1ea5y URL h\u00ecnh thu nh\u1ecf c\u1ee7a t\u1ec7p \u0111\u00ednh k\u00e8m.<\/li>\n\n\n\n<li>\u0110\u1ec3 bi\u1ebft th\u00eam t\u00f9y ch\u1ec9nh v\u00e0 ch\u1ee9c n\u0103ng n\u00e2ng cao, h\u00e3y tham kh\u1ea3o t\u00e0i li\u1ec7u&nbsp;<a href=\"https:\/\/developer.wordpress.org\/reference\/functions\/wp_enqueue_media\/\" target=\"_blank\" rel=\"noreferrer noopener\">WordPress Codex<\/a>.<\/li>\n<\/ul>\n","protected":false},"excerpt":{"rendered":"<p>wp_enqueue_media()&nbsp;l\u00e0 m\u1ed9t h\u00e0m WordPress m\u1ea1nh m\u1ebd cho ph\u00e9p b\u1ea1n t\u00edch h\u1ee3p tr\u00ecnh t\u1ea3i l\u00ean v\u00e0 qu\u1ea3n l\u00fd t\u1ec7p ph\u01b0\u01a1ng ti\u1ec7n [&hellip;]<\/p>\n","protected":false},"author":6,"featured_media":9605,"comment_status":"closed","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[244],"tags":[],"class_list":["post-9603","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-functions"],"views":654,"_links":{"self":[{"href":"https:\/\/tapchicntt.com\/rest-api\/wp\/v2\/posts\/9603","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/tapchicntt.com\/rest-api\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/tapchicntt.com\/rest-api\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/tapchicntt.com\/rest-api\/wp\/v2\/users\/6"}],"replies":[{"embeddable":true,"href":"https:\/\/tapchicntt.com\/rest-api\/wp\/v2\/comments?post=9603"}],"version-history":[{"count":6,"href":"https:\/\/tapchicntt.com\/rest-api\/wp\/v2\/posts\/9603\/revisions"}],"predecessor-version":[{"id":9643,"href":"https:\/\/tapchicntt.com\/rest-api\/wp\/v2\/posts\/9603\/revisions\/9643"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/tapchicntt.com\/rest-api\/wp\/v2\/media\/9605"}],"wp:attachment":[{"href":"https:\/\/tapchicntt.com\/rest-api\/wp\/v2\/media?parent=9603"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/tapchicntt.com\/rest-api\/wp\/v2\/categories?post=9603"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/tapchicntt.com\/rest-api\/wp\/v2\/tags?post=9603"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}