Connect with us

Kiến Thức Về Wordpress

Giới thiệu về WordPress Action Hook | Thiết kế web WordPres

Nhân. Nguyễn

Đăng

-

Bạn có thể tìm kiếm qua : Google | Cốc Cốc | Bing với chủ đề này của Mạng Quảng Cáo Trực Tuyến

action hook wordpress

Nếu bạn đang phát triển của Theme hoặc plugin WordPress nào đó. Bạn sẽ luôn gặp phải nhu cầu tận dụng hệ thống Hook Action WordPress.

Trên thực tế, một trong những rào cản lớn nhất đối với việc sử dụng Theme Framework  hoặc tạo plugin. Họ phụ thuộc rất nhiều vào Action Hook để hoạt động đúng.

Bạn có thể xem qua bài : Toàn tập về Action Hook

Vì vậy chúng ta cần tìm hiểu, WordPress Action Hook là gì?

Action Hook về cơ bản là giữ chỗ. Bất cứ một Action hook được đặt, nó sẽ thực thi đoạn code nào đã được móc nối vào đó.

Bạn có thể bắt gặp một số Action hook mặc định của WordPress có trong hầu hết các theme. Bạn có thể tìm wp_headvà wp_footerchỉ trong theme có sẵn và hầu hết mọi người không nhận ra đây là những action hook . Chúng chỉ đơn giản là các trình giữ chỗ mà các plugin có thể sử dụng để chèn mã vào phần <head>, <footer> của theme. Thông thường, họ sử dụng các action hook này để chèn những thứ như CSShoặc mã Analytics. Họ tạo ra một hàm tạo code, và sau đó móc hook hàm đó thành  wp_head hoặc wp_footer.

Action Hook WordPress dùng cho nhà phát triển chèn code vào các vị trí cụ thể trong Theme WordPress

Tại sao Action Hook WordPress là cần thiết

Giống như bất kỳ phần mềm lớn nào khác, WordPress luôn được cập nhật. Cứ vài tháng một phiên bản mới được phát hành.

Giả sử rằng action hook không tồn tại. Nhưng bạn muốn thay đổi hoặc mở rộng một số chức năng của WordPress. Để làm điều này, bạn phải sửa đổi các tệp WordPress cốt lõi. Và khi bạn cần nâng cấp, bạn sẽ phải thực hiện nâng cấp và mất tất cả các sửa đổi

Nhưng nếu bạn sử dụng các Action Hook WordPress để sửa đổi cách thức hoạt động của WordPress. Bạn có thể nâng cấp khi biết rằng các sửa đổi của bạn nằm trong một tệp riêng biệt. Khi đó bạn chỉ cần ghi đè trong quá trình nâng cấp.

Làm thế nào để Action Hook làm việc?

Trở lại với ví dụ về wp_headvà wp_footer action, chúng ta hãy giả sử rằng bạn muốn chèn một số CSStrong bạn <head> trong phần theme của bạn để bạn có thể ghi đè lên các CSS đã có.

Điều đầu tiên bạn cần làm là tạo một Function Code. Vì các Action Hook chỉ cho phép các hàm được nối hook với chúng.

function insert_some_css() {
	echo <<<CSS
<style type="text/css">
	a {
		color: #08FF00; /* green */
		text-decoration: none;
	}
	a:hover {
		color: #FF0000; /* red */
		text-decoration: underline;
	}
</style>
	CSS;
}

Vì vậy, một khi bạn đã xây dựng được các function của mình, đã đến lúc Function Hook vào wp_head :

add_action ('wp_head', 'insert_some_css');

Bất cứ khi nào wp_head xuất hiện trong Theme của bạn, hãy thực thi Function  insert_some_css .

Bạn có thể xem phần cuối cùng tôi viết như thế này:

add_action('wp_head', 'insert_some_css');
function insert_some_css() {
	echo <<<CSS
<style type="text/css">
	a {
		color: #08FF00; /* green */
		text-decoration: none;
	}
	a:hover {
		color: #FF0000; /* red */
		text-decoration: underline;
	}
</style>
	CSS;
}

Bạn cần làm là tìm một Action Hook mà bạn muốn sử dụng để xuất một số code. Tạo một function action hook đó bằng cách sử dụng add_action giống như ở trên.

Như mọi khi, hãy chắc chắn rằng bất kỳ code PHP cũng cần có thẻ đóng PHP. Nếu không nó sẽ không thực thi.

Tạo Action Hook của riêng bạn

Mặc dù WordPress cung cấp cho bạn rất nhiều Hoock Action. Bạn cũng có thể tự tạo cho Theme hoặc plugin của bạn các Action Hook riêng

Bạn có thể sử dụng đoạn code dưới đây:

<? php do_action ('my_action_hook_name'); ?>

Bạn chỉ cần thay đổi my_action_hook_namethành một tên của bạn

Các nguồn khác trên móc hành động

Tôi viết để lưu trữ và chia sẻ cho bạn đọc những gì tôi học và hiểu được về lập trình và kinh nghiệm của tôi sau những năm tôi đi làm. Vậy nên nhiều bài rất ngắn các bạn đừng trách móc. Xin cảm ơn đã ủng hộ. Kênh Youtube của Nhân Nguyễn

Đọc Tiếp Bài Viết
Quảng Cáo
Nhấn Để Bình Luận

Leave a Reply

Email của bạn sẽ không được hiển thị công khai. Các trường bắt buộc được đánh dấu *

Kiến Thức Về Wordpress

Cách khắc phục khi quên mật khẩu admin trong WordPress

Nhân. Nguyễn

Đăng

-

2 tuần rồi mình chưa viết bài nào vì bận làm mấy dự án cho khách hàng. Hôm nay mới rảnh một tí, và cũng để khắc phục cho một số khách hàng hỏi mình. “Làm thế nào để khắc phục khi quên mật khẩu admin trong WordPress. Tôi đã làm mọi cách mà không được.

Nếu bạn không thể lấy lại mật khẩu admin của website mình qua Email vì một số lý do nào đó thì có 1 cách này nữa dành cho bạn

Yêu Cầu bạn cần phải quản trị Hosting và có thể truy cập vào được Cơ Sở Dữ Liệu

Lấy lại mật khẩu admin cho website WordPress bằng việc thao tác với Cơ Sở Dữ Liệu

Đầu tiên, hãy truy cập vào Phpmyadmin >Tìm tới Database của bạn > Tiếp tục tìm tới bảng wp_user hoặc đằng trước _ là user là được như hình dưới nhé

Bảng User trong Cơ sở dữ liệu của WordPress

Chọn bảng wp_user nó sẽ hiện ra bảng User như hình dưới

Tìm đến tài khoản bạn cần lấy mật khẩu sau đó ấn edit ( sửa ). Sau đó nó hiện ra một bảng mới bạn chỉ cần tìm chú ý đến hàng user_pas tìm đến ô Hàm chọn MD5 > Phần giá trị bạn nhập mật khẩu của bạn vào đó rồi ấn Hoàn thành

Xong rồi đó. Chúc bạn thành công

Đọc Tiếp Bài Viết

Kiến Thức Về Wordpress

Hướng dẫn cài đặt và tối ưu website WordPress bằng Plugin Wp Rocket

Nhân. Nguyễn

Đăng

-

Bài viết dưới đây mình sẽ hướng dẫn các bạn cấu hình Plugin WP Rocket tối ưu website WordPress với dịch vụ DNS miễn phí của Cloudflare. Nếu bạn lựa chọn WP Rocket để làm trang web của mình nhanh hơn, bạn đã có một lựa chọn chính xác rồi đấy. Đây là plugin cache được bình chọn #1 hiện nay trên rất nhiều diễn đàn, group Facebook khác nhau. Nhưng mình khuyên các bạn dùng bản trả phí của nó thì tốt nhất nó hỗ trợ bạn được nhiều hơn. CÒn không bạn có thể dùng bản miễn phí mà mình chia sẻ trước đó nhưng không được hỗ trợ nhiều. Đây là bản miễn phí bạn có thể tải tại đây. Download Plugin WP Rocket

Mình sẽ test và đánh giá 3 plugin phổ biến nhất về tối ưu dữ liệu website WordPress với website của khách hàng mình luôn trang www.namviettravel.com.vn, dùng thử các Plugin sau : WP Rocket, WP Super CacheWP Fastest Cache. Plugin cache và hosting chính là 2 yếu tố quan trọng nhất ảnh hưởng tới tốc độ WordPress. Cấu hình WP Rocket đúng cách và tối ưu cùng với Cloudflare hoặc StackPath sẽ giúp bạn sửa lỗi và tăng điểm đánh giá trên GTmetrix. Tốt nhất bạn lên dùng thêm 2 cái này PingdomPageSpees để có cái nhìn tổng quát nhất . Các bạn cùng xem nhé. Đây là website về Du lịch lên hơi nhiều ảnh chất lượng.

Lưu ý chút nhé ” 3 ví dụ dưới đây là mình chỉ cài đặt và thiết lập sơ qua thôi nhé”

Đây là lúc chưa được cài Plugin và chưa tối ưu
Đây là chỉ số khi cài WP Super Cache
Đây là chỉ số khi cài WP Fastest Cache
Và đâu là khi cài WP Rocket

Sự khác biệt rõ nét nhất phải không nào các bạn. Cái thời gian tải thì do hosting mình đang dùng là hosting share lên có phần hơi châm và đang có nhiều tác vụ trên đó. Ak mà quên nếu bạn nào đang sử dụng Google Adsense thì chú ý đến phần nén file và load ảnh nhé. Nó sẽ không tải ảnh và file js bên Google trước đâu. Nên nhiều lúc hơi bất tiện.

Cấu hình WP Rocket phải nói là dễ hơn rất nhiều so với W3 Total Cache và họ cũng rất rõ ràng trong việc cập nhập changelog trong các phiên bản mới. Điều này giúp chúng ta biết được rõ ràng các tính năng mới hay những bản vá quan trọng ảnh hưởng tới tốc độ web. WP Rocket cũng có tài liệu hướng dẫn sử dụng rất đầy đủ ( nhưng bằng tiếng Anh). Dùng GTmetrix để kiểm tra điểm số nhé. Mình thích cái này

Tại Sao Chọn Plugin WP Rocket để tối ưu tốc độ tải của trang web?

Plugin này mang lại kết quả tốt nhất trong các plugin cache mình thử nghiệm, dễ dàng cài đặt và tối ưu, đầy đủ hướng dẫn và cộng đồng người dùng rất lớn. WP Rocket cũng được trang bị rất nhiều tính năng mà các plugin free khác không có như: lazy load, preload, lưu và tải Google tracking code từ máy chủ web của chúng ta, tối ưu cơ sở dữ liệu và tối ưu heartbeat. Trong các thử nghiệm của mình, WP Rocket luôn mang lại kết quả load time tốt nhất trên GTmetrix (đây là công cụ chính xác và nó cho mình biết cần tối ưu lại cái gì, mình thấy hay nhất).

Để cài đặt được Plugin bạn có thể tham khảo hướng dẫn cài đặt plugin WordPress nếu bạn nào chưa biết nhé.

Hướng dẫn thiết lập và tối ưu WP Rocket

Bạn đọc phần giới thiệu về các tính năng của WP Rocket bật những tính năng nào phù hợp với website của bạn nhé. Đừng lạm dụng nó quá, quan trọng vẫn là trải nghiệm của người dùng. Nếu người dùng vào website của bạn load nhanh nhưng hình ảnh không rõ ràng hoặc bố cục bị vỡ do tối ưu thì cũng không thể có cái nhìn tốt được

Tối ưu WP Rocket | Dashboard

Bản điều khiển đầu tiên của WP Rocket có tên là Dashboard như hình bên dưới.

Tối ưu WP Rocket | Dashboard
  • Rocket Tester – Tíc vào nếu bạn muốn “chuột bạch” những tính năng cấu hình WP Rocket beta.
  • Rocket Analytics – Cho phép WP Rocket thu thập thông tin từ website của bạn (ẩn danh). Nên tắt để giảm công việc/sức nặng cho máy chủ và RAM
  • Clear Cache – Xóa cache thủ công, làm sau khi bạn đã cầu hình xong WP Rocket.
  • Preload Cache – Tạo cache thủ công cho trang chủ và các trang con trong website của bạn. Không cần phải sử dụng khi bạn đặt chế độ Preload Automatic trong phần PRELOAD.
  • Purge OPcache – Xóa OPcache. Thường được sử dụng để xóa cache PHP hoặc khi WP Rocket của bạn đã update những vẫn bị hiện phiên bản cũ.
  • Regenerate Critical CSS – Sử dụng khi bạn thay đổi stylesheets trong theme hoặc chèn thêm custom code vào CSS của child theme chẳng hạn.

Tối ưu WP Rocket | Cache

  • Mobile Cache – Bật cache và cấu hình WP Rocket cho thiết bị di dộng.
  • Separate Cache Files For Mobile Devices – Chỉ bật chế độ này nếu bạn không sử dụng theme responsive hoặc có giao diện riêng cho thiết bị di động.
  • Enable Caching For Logged-in WordPress Users – Bật nếu bạn muốn cache trang cho người dùng đăng nhập (ví dụ bbPress). Mỗi thành viên sẽ có cache riêng vì vậy chế độ này rất hao tài nguyên hệ thống. Nếu không cần thiết thì luôn tắt.
  • Specify Time After Which The Global Cache Is Cleared – Để mặc định. Nếu bạn không thường xuyên cập nhập nội dung hoặc trang vệ tinh, hosting cấu hình yếu, bạn có thể tăng thời gian này lên cao hơn.

Tối ưu WP Rocket | File Optimization

  • Minify Files – lý tưởng nhất là chúng ta luôn bật chế độ tự động minify và gộp “combining” file dữ liệu nếu muốn đạt điểm 99-100% Pingdom và GTmetrix. Nhưng nhiều lúc, đối với một số theme hoặc plugin cụ thể, việc này có thể làm trang web bạn bị lỗi hiển thị (nhất là với JS và CSS). Vì vậy bạn nên bật từng mục lên một và vào trang web của mình để xem nó có bị lỗi không. Sau đó tiếp tục bật tiếp từng chế độ còn lại lên và kiểm tra. Nếu bị lỗi, thì một là bạn không nên sử dụng chức năng đó. Hoặc hai là bạn phải tự tìm ra và loại bỏ file CSS hoặc JS gây ra lỗi khi chế độ gộp file dữ liệu mình nói ở trên.
  • Combine Google Fonts File – Gộp các file Google fonts lại với nhau để giảm thiểu requests tới máy chủ Google
  • Remove Query Strings From Static Resources – Mục này thuần túy để tăng điểm Pingdom GTmetrix. Hoặc (hiếm khi) sữa lỗi với những nhà cung cấp CDN không có chức năng cache file theo version.
  • Minify CSS FilesTối ưu file CSS, loại bỏ khoảng trắng và comments thừa.
  • Combine CSS Files – Gộp các file CSS lại với nhau để giảm HTTP requests tới máy chủ.
  • Excluded CSS Files – Tìm file CSS khiến cho giao diện hiển thị bị lỗi và đặt đường dẫn file đó vào đây.
  • Optimize CSS Delivery – Tự động hiển thị trang mà không phải chờ tải về CSS file. WP Rocket sẽ tự động tạo ra một chuỗi gọi là Critical CSS above-the-fold của trang web.
  • Minify JS Files – Tối ưu file JS, loại bỏ khoảng trắng và comments thừa.
  • Combine JS Files – Gộp các file JS lại với nhau để giảm HTTP requests tới máy chủ.
  • Excluded JS Files – Tìm file CSS khiến cho giao diện hiển thị bị lỗi và đặt đường dẫn file đó vào đây.
  • Load JS deferred – Cho phép tải JavaScript theo kiểu deferred mà không phải chờ, giúp tăng tốc độ tải trang.
  • Safe Mode for jQuery – Chế độ an toàn cho jQuery. Yêu cầu hệ thống tải về jQuery trước khi render trang.

Tối Ưu WP Rocket – Media

  • Enable For Images – bật chế độ lazy load cho ảnh. Cá nhân mình thì muốn ảnh được tải luôn vậy nên mình bỏ qua mục này. Cái này có liên quan đến Google Adsense
  • Enable For Iframes And Videos – bật lazy load cho iframes và video.
  • Replace Youtbe Iframe WIth Preview Image – Thay iframe của Youtube bằng ảnh thumbnail. Giúp giảm HTTP requests tới máy chủ Youtube.
  • Disable Emoji – Tắt Emoji.
  • Disable WordPress Embeds – Tắt chế độ embeds.

Cấu Hình WP Rocket – Preload

  • Activate PreloadingPreload, để hiểu một cách đơn giản, là làm mới lại cache trên bộ nhớ mỗi khi bạn gia lệnh xóa cache hoặc khi cache cũ hết hạn. Mình luôn bật chức năng này vì nó không chỉ giúp tăng tốc độ tải lần đầu cho trang web mà còn cải thiện tốc độ index của Google. Chú ý là khi bật chế độ này, máy chủ sẽ hoạt động ở công suất rất cao, không nên sử dụng nếu bạn đang dùng share hosting hay máy chủ cấu hình yếu.
  • Activate sitemap-based cache preloading – Bật chế độ Preload cho toàn bộ trang web bao gồm cả trang chủ và các trang con. Tự động tối ưu khi sử dụng với Yoast SEO. Nếu bạn sử dụng plugin SEO khác thì nhớ chèn link sitemap vào đây. sitemap của Yoast SEO có dạng www.domain.com/sitemap_index.xml
  • Prefetch DNS Requests – chèn tên miền của bên thứ ba vào để tăng tốc độ tải trang (ví dụ: Google Fonts, Analytics, Tag Manager, Facebook Pixel).

Đây là những domain mình add:

//fonts.gstatic.com
//connect.facebook.net
//fonts.googleapis.com
//www.google-analytics.com

Cấu Hình WP Rocket | Advanced Rules

Mục này chủ yếu cho các trang web thương mại điện tử, ví dụ như Woocommerce hoặc các plugin ecommerce khác của WordPress. Nếu bạn sử dụng Woocommerce thì có thể bỏ qua mục này.

  • Never Cache URL(s) – Nếu bạn sử dụng nền tảng ecommerce khác Woocommerce, thì bạn chèn link giỏ hàng và link checkout tại đây.
  • Never Cache Cookies – Cũng tương tự như trên nhưng dựa trên cookies.
  • Never Cache User Agent(s) – Cấm Googlebots hoặc các bots khác truy cập trang cache.
  • advanced rules 2Always Purge URL(s) – Chèn link mà bạn muốn luôn luôn cache lại sau khi bạn xuất bản hoặc thay đổi nội dung trên trang web.
  • Cache Query String(s) – Sử dụng chủ yếu để cache các link tìm kiếm cho trang thương mại điện tử.

Cấu Hình WP Rocket – Database

  • Post Cleanup – Xóa bản nháp, bản lưu hoặc post trong thư mục rác.
  • Comments Cleanup – Xóa bình luận spam hoặc trong thùng rác.
  • Transients Cleanup – Dọn dẹp thông tin tạm thời không còn cần sử dụng nữa. Đây là những thông tin như số lượt like, số lượt đọc bài viết được WordPress lưu lại vào database để khi bạn truy cập, tốc độ trả về được nhanh nhất. Nhưng sau khi đã hết hạn, những thông tin này vẫn lưu lại trong database. Dẫn tới giảm thiểu tốc độ xử lý thông tin cơ sở dữ liệu.
  • Database Cleanup – Dọn cơ sở dữ liệu không còn sử dụng khi các plugins liên quan đã bị xóa.
  • Automatic Cleanup – Lên lịch tự động dọn dẹp.

Cấu Hình WP Rocket | CDN

  • Enable Content Delivery Network – Tích vào ô kích hoạt mạng phân phối nội dung CDN nếu bạn đang sử dụng CDN
  • CDN CNAME(s) – Nhập tên miền của CDN bạn đang dùng
  • Exclude files from CDN – Loại trừ các tệp tin khỏi CDN khi bạn muốn loại trừ một file nào đó có trong website của bạn

Cấu Hình WP Rocket | Heartbeat, Add-ons

Heartbeat cho phép giao tiếp trực tiếp từ trình duyệt tới server để cập nhập dữ liệu như tự động lưu bài viết, dữ liệu thực ecommerce, … Việc này khiến cho máy chủ nhiều khi bị quá tải khi có quá nhiều truy cập một lúc sử dụng heartbeat.

Mục này cho phép giảm hoặc tắt hoàn toàn Heartbeat để giảm tải cho máy chủ.

  • Add-ons Google Tracking – Tăng điểm Browser Cache của Pingdom, GTmetrix và cả PageSpeed khi cho phép WP Rocket lưu file Google Analytics trên máy chủ của web bạn thay vì máy chủ của Google.
  • Add-ons Facebook Pixel – Tương tự như Google Analytics nhưng cho Facebook Pixel.
  • Varnish – bật nếu hosting của bạn hỗ trợ Varnish cache.

Cấu Hình WP Rocket | Cloudflare

Nếu bạn sử dụng Cloudflare thì có thể bật add-ons Cloudflare và cấu hình tối ưu cho WP Rocket.

Nhập thông tin Global API Key, Email Cloudflare và Zone ID của website vào. Khuyến khích bạn sử dụng luôn chức năng Optimal Settings để WP Rocket tự động tối ưu.

Cấu Hình WP Rocket | Image Optimization

Với phần này thì bạn chỉ việc tải Plugin của nó về rồi nhập key vào tồi tối ưu ảnh là xong

Cấu Hình WP Rocket | Tools

  • Export Settings – Tải về file chứa setting WP Rocket. Có thể sử dụng với site khác.
  • Import Settings – Tải lên và nhập setting WP Rocket mà bạn có.
  • Rollback – Sử dụng phiên bản WP Rocket cũ hơn nếu bạn gặp lỗi với phiên bản mới.

Thế là đã hết phần này rồi nhé. Chúc bạn thành công. Nếu bạn nào cần tối ưu website thì cứ bấn vào phần hỗ trợ mình sẽ có mặt sau 5 phút

Đọc Tiếp Bài Viết



[]
1 Step 1
Previous
Next

Chủ Đề Nổi Bật

Được Quan Tâm Nhiều Trong Tháng