{"id":15386,"date":"2020-03-21T15:24:11","date_gmt":"2020-03-21T08:24:11","guid":{"rendered":"https:\/\/kiencang.net\/?p=15386"},"modified":"2020-03-21T15:24:11","modified_gmt":"2020-03-21T08:24:11","slug":"gioi-thieu-plugin-wp-youtube-lyte","status":"publish","type":"post","link":"https:\/\/kiencang.net\/gioi-thieu-plugin-wp-youtube-lyte\/","title":{"rendered":"Gi\u1edbi thi\u1ec7u plugin WP YouTube Lyte \u0111\u1ec3 lazyload video"},"content":{"rendered":"\n
WP YouTube Lyte<\/a> cho ph\u00e9p b\u1ea1n “lazy load \/ t\u1ea3i l\u01b0\u1eddi” c\u00e1c video<\/a> c\u1ee7a b\u1ea1n b\u1eb1ng c\u00e1ch ch\u00e8n “M\u00e3 nh\u00fang YouTube nh\u1ecf g\u1ecdn” c\u00f3 kh\u1ea3 n\u0103ng ph\u1ea3n h\u1ed3i nhanh (responsive). \u0110i\u1ec1u n\u00e0y tr\u00f4ng gi\u1ed1ng nh\u01b0 khi b\u1ea1n nh\u00fang YouTube theo c\u00e1ch th\u00f4ng th\u01b0\u1eddng, nh\u01b0ng kh\u00e1c bi\u1ec7t \u1edf \u0111\u00e2y l\u00e0 n\u00f3 ch\u1ec9 g\u1ecdi c\u00e1c tr\u00ecnh b\u1eadt YouTube n\u1eb7ng n\u1ec1<\/a> (“fat”) khi ng\u01b0\u1eddi d\u00f9ng click v\u00e0o, v\u00ec th\u1ebf gi\u1ea3m \u0111\u01b0\u1ee3c dung l\u01b0\u1ee3ng v\u00e0 th\u1eddi gian k\u1ebft xu\u1ea5t \u0111\u00e1ng k\u1ec3, nh\u1ea5t l\u00e0 khi b\u1ea1n c\u00f3 nhi\u1ec1u video tr\u00ean c\u00f9ng m\u1ed9t trang. Plugin c\u00f3 th\u1ec3 \u0111\u01b0\u1ee3c c\u1ea5u h\u00ecnh \u0111\u1ec3 cache \u1ea3nh \u0111\u1ea1i di\u1ec7n (thumbnails) c\u1ee7a YouTube theo ki\u1ec3u c\u1ee5c b\u1ed9, c\u1ea3i thi\u1ec7n c\u1ea3 hi\u1ec7u su\u1ea5t v\u00e0 t\u00ednh ri\u00eang t\u01b0. B\u1eb1ng c\u00e1ch s\u1eed d\u1ee5ng Lyte \u0111\u1ec3 nh\u00fang video t\u1eeb YouTube, n\u00f3 gi\u00fap b\u1ea1n kh\u00f4ng ph\u1ea3i g\u1eedi y\u00eau c\u1ea7u t\u1edbi c\u00e1c m\u00e1y ch\u1ee7 c\u1ee7a YouTube, v\u00ec th\u1ebf c\u00f3 th\u1ec3 tu\u00e2n th\u1ee7 GDPR t\u1ed1t h\u01a1n (d\u00f9 t\u00f4i kh\u00f4ng ph\u1ea3i lu\u1eadt s\u01b0).<\/p>\n\n\n Plugin ch\u1ecdn c\u00e1c li\u00ean k\u1ebft th\u00f4ng th\u01b0\u1eddng c\u1ee7a YouTube, ti\u1ebfp qu\u1ea3n t\u1eeb WordPress core oEmbed. Ngo\u00e0i ra b\u1ea1n c\u00f3 th\u1ec3 th\u00eam YouTube-link cho video ho\u1eb7c to\u00e0n b\u1ed9 danh ph\u00e1t v\u1edbi “httpv” thay th\u1ebf cho “https” ho\u1eb7c th\u00eam Lyte widget v\u00e0o sidebar v\u00e0 WP YouTube Lyte s\u1ebd thay th\u1ebf li\u00ean k\u1ebft b\u1eb1ng \u0111o\u1ea1n m\u00e3 t\u1ed1i \u01b0u h\u00f3a hi\u1ec7u su\u1ea5t ch\u00ednh x\u00e1c. M\u1ed9t s\u1ed1 v\u00ed d\u1ee5:<\/p>\n\n\n C\u00e1c m\u00e3 \u1edf b\u00ean tr\u00ean, b\u1ea1n ph\u1ea3i b\u1ecf 2 d\u1ea5u ngo\u1eb7c vu\u00f4ng \u1edf ph\u1ea7n [.], v\u1eabn c\u1ea7n gi\u1eef l\u1ea1i d\u1ea5u ch\u1ea5m.<\/p>\n\n\n Ho\u1eb7c s\u1eed d\u1ee5ng shortcode:<\/p>\n\n\n [lyte-id=\u201d_SQkWbRublY\u201d \/] C\u00e1c m\u00e3 \u1edf b\u00ean tr\u00ean b\u1ea1n ph\u1ea3i b\u1ecf d\u1ea5u “-” t\u1ee9c l\u00e0 chuy\u1ec3n lyte-id<\/em> th\u00e0nh lyte id<\/em><\/p>\n\n\n WP YouTube Lyte \u0111\u01b0\u1ee3c vi\u1ebft ra v\u1edbi m\u1ee5c \u0111\u00edch ch\u00ednh l\u00e0 \u0111\u1ec3 t\u1ed1i \u01b0u h\u00f3a hi\u1ec7u su\u1ea5t, t\u1ed1c \u0111\u1ed9, nh\u01b0ng n\u00f3 \u0111\u00e3 \u0111\u01b0\u1ee3c ki\u1ec3m tra \u0111\u1ec3 c\u00f3 kh\u1ea3 n\u0103ng t\u01b0\u01a1ng th\u00edch t\u1ed1i \u0111a v\u1edbi c\u00e1c tr\u00ecnh duy\u1ec7t (bao g\u1ed3m c\u1ea3 iPad) trong khi v\u1eabn \u0111\u1ec3 \u00fd \u0111\u1ebfn kh\u1ea3 n\u0103ng truy c\u1eadp. B\u1eaft \u0111\u1ea7u t\u1eeb phi\u00ean b\u1ea3n 1.2.0 m\u00e3 nh\u00fang lyte l\u00e0 \u0111\u00e1p \u1ee9ng \u0111\u1ea7y \u0111\u1ee7 (co gi\u00e3n theo k\u00edch c\u1ee1 m\u00e0n h\u00ecnh) v\u00e0 c\u00f3 th\u1ec3 t\u1ef1 \u0111\u1ed9ng nh\u00fang videoObject microdata. Plugin h\u1ed7 tr\u1ee3 \u0111\u1ea7y \u0111\u1ee7 nhi\u1ec1u ng\u00f4n ng\u1eef kh\u00e1c nhau, trong \u0111\u00f3 c\u00f3 Catalan, H\u00e0 Lan, Anh, Ph\u00e1p, \u0110\u1ee9c, Hebrew, Romania, T\u00e2y Ban Nha v\u00e0 Slovene.<\/p>\n\n\n T\u1ea1i sao WP YouTube Lyte c\u1ea7n truy c\u1eadp v\u00e0o YouTube API? API l\u00e0 g\u00ec?<\/strong><\/p>\n\n\n API l\u00e0 c\u00e1ch hai ph\u1ea7n m\u1ec1m n\u00f3i chuy\u1ec7n v\u1edbi nhau \u0111\u1ec3 trao \u0111\u1ed5i th\u00f4ng tin. Trong tr\u01b0\u1eddng h\u1ee3p n\u00e0y, WP YouTube Lyte li\u00ean h\u1ec7 v\u1edbi YouTube \u0111\u1ec3 h\u1ecfi n\u00f3 v\u1ec1 \u1ea3nh \u0111\u1ea1i di\u1ec7n, ti\u00eau \u0111\u1ec1 v\u00e0 m\u00f4 t\u1ea3 cho video b\u1ea1n \u0111\u00e3 th\u00eam v\u00e0o. \u1ea2nh \u0111\u1ea1i di\u1ec7n v\u00e0 ti\u00eau \u0111\u1ec1 \u0111\u01b0\u1ee3c hi\u1ec3n th\u1ecb tr\u00ean trang web (trong tr\u00ecnh b\u1eadt c\u1ee7a Lyte) trong khi m\u00f4 t\u1ea3 \u0111\u01b0\u1ee3c \u0111\u01b0a v\u00e0o trong HTML d\u01b0\u1edbi d\u1ea1ng microdata v\u00ec l\u00fd do t\u1ed1i \u01b0u h\u00f3a cho m\u00e1y t\u00ecm ki\u1ebfm<\/a> (xem th\u00eam b\u00ean d\u01b0\u1edbi).<\/p>\n\n\n OK, v\u1eady gi\u1edd t\u00f4i ph\u1ea3i l\u00e0m th\u1ebf n\u00e0o \u0111\u1ec3 nh\u1eadn \u0111\u01b0\u1ee3c kh\u00f3a API?<\/strong><\/p>\n\n\n WP YouTube Lyte s\u1ebd ho\u1ea1t \u0111\u1ed9ng ch\u1ee9 n\u1ebfu t\u00f4i kh\u00f4ng cung c\u1ea5p kh\u00f3a API?<\/strong><\/p>\n\n\n C\u00f3, trong m\u1ed9t s\u1ed1 ngo\u1ea1i l\u1ec7; WP YouTube Lyte s\u1ebd ti\u1ebfp t\u1ee5c ho\u1ea1t \u0111\u1ed9ng, k\u1ebft xu\u1ea5t tr\u00ecnh b\u1eadt Lyte, nh\u01b0ng s\u1ebd kh\u00f4ng c\u00f3 ti\u00eau \u0111\u1ec1 v\u00e0 microdata (m\u00f4 t\u1ea3, th\u1eddi gian, v\u00e2n v\u00e2n) v\u00e0 kh\u00f4ng c\u00f3 \u1ea3nh \u0111\u1ea1i di\u1ec7n trong danh s\u00e1ch b\u1eadt.<\/p>\n\n\n T\u00f4i kh\u00f4ng mu\u1ed1n d\u00f9ng API key, l\u00e0m th\u1ebf n\u00e0o t\u00f4i c\u00f3 th\u1ec3 tho\u00e1t kh\u1ecfi nh\u1eafc nh\u1edf c\u1ee7a plugin li\u00ean quan \u0111\u1ebfn “API key”?<\/strong><\/p>\n\n\n Ch\u1ec9 c\u1ea7n nh\u1eadp v\u00e0o “none” trong khu v\u1ef1c API key v\u00e0 Lyte s\u1ebd d\u1eebng k\u00eau ca v\u1edbi b\u1ea1n.<\/p>\n\n\n WP YouTube Lyte h\u1ed7 tr\u1ee3 microdata nh\u01b0 th\u1ebf n\u00e0o?<\/strong><\/p>\n\n\n T\u00f4i c\u00f3 th\u1ec3 s\u1eed d\u1ee5ng WP YouTube Lyte v\u1edbi li\u00ean k\u1ebft YouTube ho\u1eb7c iframes th\u00f4ng th\u01b0\u1eddng?<\/strong><\/p>\n\n\n \u0110\u01b0\u1ee3c b\u1ea1n nh\u00e9, b\u1eaft \u0111\u1ea7u t\u1eeb phi\u00ean b\u1ea3n 1.5.0 li\u00ean k\u1ebft YouTube th\u00f4ng th\u01b0\u1eddng \u0111\u01b0\u1ee3c t\u1ef1 \u0111\u1ed9ng chuy\u1ec3n trong m\u00e3 nh\u00fang Lyte. B\u1ea1n c\u0169ng s\u1ebd t\u1ef1 \u0111\u1ed9ng nh\u1eadn \u0111\u01b0\u1ee3c m\u1ed9t (kh\u00f4ng ph\u1ea3i Lyte) h\u00ecnh xem tr\u01b0\u1edbc c\u1ee7a video b\u00ean trong m\u00e0n h\u00ecnh edit b\u00e0i vi\u1ebft d\u1ea1ng visual. B\u1eaft \u0111\u1ea7u t\u1eeb LYTE 1.7.5 iframe YouTube c\u0169ng c\u00f3 th\u1ec3 t\u1ef1 \u0111\u1ed9ng chuy\u1ec3n \u0111\u1ed5i m\u00e0 kh\u00f4ng g\u1eb7p v\u1ea5n \u0111\u1ec1 g\u00ec.<\/p>\n\n\n T\u00f4i c\u00f3 th\u1ec3 l\u00e0m nh\u1eefng g\u00ec v\u1edbi API?<\/strong><\/p>\n\n\n R\u1ea5t nhi\u1ec1u; c\u00f3 m\u1ed9t b\u1ed9 l\u1ecdc \u0111\u1ec3 ph\u00e2n t\u00edch c\u00fa ph\u00e1p tr\u01b0\u1edbc (pre-parse) l\u00e0 the_content, cho m\u1ee5c \u0111\u00edch thay \u0111\u1ed5i c\u00e0i \u0111\u1eb7t, thay \u0111\u1ed5i CSS, thay \u0111\u1ed5i HTML c\u1ee7a LYTE-div,… C\u00f3 c\u00e1c v\u00ed d\u1ee5 cho t\u1ea5t c\u1ea3 c\u00e1c b\u1ed9 l\u1ecdc (v\u00e0 m\u1ed9t action) trong lyte_helper.php_example<\/p>\n\n\n C\u00e1c r\u1eafc r\u1ed1i v\u1edbi All In One SEO Pack<\/strong><\/p>\n\n\n All in One SEO Pack \u1edf ch\u1ebf \u0111\u1ed9 m\u1eb7c \u0111\u1ecbnh t\u1ea1o ra m\u1ed9t \u0111o\u1ea1n m\u00e3 v\u1eabn c\u00f3 httpv-links b\u00ean trong n\u00f3. \u0110\u1ec3 lo\u1ea1i b\u1ecf nh\u1eefng c\u00e1i n\u00e0y, b\u1ea1n s\u1ebd ph\u1ea3i s\u1eed d\u1ee5ng lyte_helper.php (xem \u1edf tr\u00ean) v\u00e0 th\u00eam lyte_filter_aioseop_description v\u00e0o b\u00ean trong aioseop-filter.<\/p>\n\n\n M\u00e3 nh\u00fang LYTE co gi\u00e3n theo m\u00e0n h\u00ecnh<\/strong><\/p>\n\n\n Video c\u1ee7a t\u00f4i d\u01b0\u1eddng nh\u01b0 t\u1ea3i ch\u1eadm tr\u00ean thi\u1ebft b\u1ecb di \u0111\u1ed9ng?<\/strong><\/p>\n\n\n Theo m\u1eb7c \u0111\u1ecbnh (tr\u1eeb khi t\u00ednh n\u0103ng”cache thumnail locally” \u0111\u01b0\u1ee3c k\u00edch ho\u1ea1t), WP YouTube Lyte s\u1ebd th\u1ef1c s\u1ef1 t\u1ea3i video YouTube th\u00f4ng th\u01b0\u1eddng ch\u1eadm h\u01a1n thay v\u00ec c\u00e1c video Lyte, v\u00ec video Lyte y\u00eau c\u1ea7u hai click t\u1eeb ng\u01b0\u1eddi d\u00f9ng \u0111\u1ec3 b\u1eadt video (m\u1ed9t \u0111\u1ec3 t\u1ea3i video YouTube v\u00e0 m\u1ed9t \u0111\u1ec3 b\u1eadt n\u00f3) v\u00ec kh\u00f4ng c\u00f3 h\u1ed7 tr\u1ee3 b\u1eadt t\u1ef1 \u0111\u1ed9ng (autoplay) tr\u00ean di \u0111\u1ed9ng. N\u1ebfu b\u1ea1n mu\u1ed1n, b\u1ea1n c\u00f3 th\u1ec3 \u00e9p WP YouTube Lyte t\u1ea1o video c\u1ee7a Lyte tr\u00ean di \u0111\u1ed9ng b\u1eb1ng \u0111o\u1ea1n m\u00e3 d\u01b0\u1edbi \u0111\u00e2y (th\u00eam n\u00f3 v\u00e0o functions.php c\u1ee7a child theme trong m\u1ed9t plugin h\u1ed7 tr\u1ee3 ri\u00eang ho\u1eb7c s\u1eed d\u1ee5ng plugin code snippets<\/a>):<\/p>\n\n\n
[lyte-id=\u201d_SQkWbRublY\u201d audio=\u201dtrue\u201d \/]
[lyte-id=\u201d _SQkWbRublY \u2033 playlist=\u201dtrue\u201d \/] <\/p>\n\n\nFAQ \/ C\u00e2u h\u1ecfi th\u01b0\u1eddng g\u1eb7p<\/h2>\n\n\n
add_filter('lyte_do_mobile','lyte_on_mobile',10,0);\nfunction lyte_on_mobile(){\n return true;\n}<\/pre>\n\n\n