Cách tải lên hình ảnh WordPress từ frontend với một plugin

Tải hình ảnh lên là một trong những điều quan trọng nhất khi nói về một trang web, vì hình ảnh về cơ bản là thứ mang lại phong cách cho một trang web mà không có hình ảnh có thể trông quá cũ hoặc không thể thu hút số lượng khách hàng/người dùng mà chúng ta mong muốn.

Ngoài ra, việc cho phép người dùng của bạn tải hình ảnh lên trong frontend có thể mang lại nhiều lợi thế như cho phép họ tải xuống tài liệu hoặc bất kỳ hình ảnh nào họ muốn sử dụng, ví dụ, cho một hồ sơ.

Trong bài đăng này, chúng tôi sẽ đánh giá một số plugin cho phép chúng tôi đạt được những gì chúng tôi muốn làm.

Cách tải lên hình ảnh WordPress từ frontend với một plugin

Ở đây chúng tôi sẽ thảo luận về một số cách để tải ảnh WordPress lên với một số loại plugin khác nhau.

Tải tệp tin lên trong Frontend sử dụng Plugin biểu mẫu

Một trong những cách nhanh chóng và dễ dàng nhất là sử dụng plugin biểu mẫu, điều này hữu ích khi chúng ta cần tạo, ví dụ, một biểu mẫu liên hệ nơi chúng ta cần người dùng tải lên một tài liệu hoặc bất kỳ thông tin hữu ích nào bằng cách sử dụng hình ảnh.

Có nhiều plugin cho phép bạn tạo biểu mẫu với trường tải tệp lên, một trong số đó là Contact Form 7 cho phép bạn tải tệp lên trang web của mình trong frontend miễn phí.

Vì vậy, để sử dụng biểu mẫu cho phép người dùng tải tệp lên frontend, trước tiên chúng ta cần tạo biểu mẫu, vì vậy sau khi cài đặt plugin, hãy đi tới Liên hệ > Thêm Mới.

Trong màn hình này, bạn sẽ có một số thẻ HTML với shortcode cho mỗi trường bên trong, theo mặc định, một biểu mẫu được tạo với các trường cơ bản.

Vì chúng tôi muốn thêm trường tải tệp lên, hãy nhấp vào vị trí mà bạn muốn thêm trường và sau đó nhấp vào tệp trong các nút/tùy chọn có sẵn.

Điều này sẽ mở ra một cửa sổ bật lên nơi bạn có thể đặt giới hạn cho việc tải tệp của mình, thêm tất cả các giới hạn bạn muốn và cuối cùng, nhấp vào chèn thẻ.

Điều này sẽ thêm shortcode cho trường trong nội dung biểu mẫu.

Bây giờ bạn có thể tùy chỉnh biểu mẫu của mình nhiều như bạn muốn, thêm các trường khác hoặc thêm HTML và cả CSS nếu bạn muốn vì biểu mẫu cho phép tất cả các loại tùy chỉnh đó.

Khi mọi thứ đã xong, bạn có thể thêm tiêu đề và nhấp vào Lưu.

Điều này sẽ tạo ra một shortcode mà bạn có thể sử dụng để nhúng biểu mẫu vào bài đăng hoặc trang của mình, sao chép và sau đó sử dụng khối có sẵn trong trình chỉnh sửa trang để thêm shortcode, trong trường hợp này, chúng ta sẽ xem cách thêm nó bằng trình chỉnh sửa Gutenberg.

Bây giờ bạn cần xuất bản nó và bạn sẽ có thể xem biểu mẫu với các trường mà bạn đã thêm và nút tải tệp lên.

Tất cả những gì bạn cần làm là nhấp vào Chọn Tệp và chọn tệp, trong trường hợp này là hình ảnh của bạn, từ các thư mục trên PC của bạn.

Sau khi nhấp vào gửi, việc tải lên sẽ hoàn tất và hình ảnh sẽ được tải lên trang web của bạn.

Bằng cách này, người dùng của bạn sẽ có thể tải hình ảnh lên trang web của bạn, cùng với một số thông tin khác mà chúng tôi có thể cần như tên hoặc email của người đã tải lên bằng cách sử dụng biểu mẫu, rất đơn giản và chức năng.

Sử dụng Plugin Tải Lên Tệp WordPress

Bây giờ chúng ta đã xem cách "cũ" thông thường, hãy xem cách tải lên hình ảnh nhưng sử dụng plugin này cho phép chúng ta nhúng tùy chọn tải tệp lên trong bất kỳ bài đăng hoặc trang nào mà không cần phải điền thông tin khác hoặc tạo biểu mẫu nào cả.

Trước hết, chúng ta cần cài đặt plugin "Tải Lên Tệp WordPress" vì điều này sẽ cung cấp cho chúng ta tất cả các tùy chọn cần thiết để tạo tùy chọn tải tệp lên.

Sau khi kích hoạt plugin này trên trang web của chúng tôi, chúng tôi sẽ có thể thấy một tùy chọn menu có sẵn để kiểm tra tất cả các tệp chúng tôi tải lên bằng cách sử dụng nó.

Để sử dụng nó, tất cả những gì chúng ta cần làm là thêm một shortcode [wordpress_file_upload] nơi chúng ta muốn hiển thị nó, trong trường hợp này, chúng ta có một bài viết với một số thông tin đã chuẩn bị sẵn nơi chúng ta thêm shortcode để bạn có thể kiểm tra nó sẽ trông như thế nào trong Trình chỉnh sửa Gutenberg và frontend.

Trình chỉnh sửa Gutenberg

Frontend

Bây giờ form tải lên của chúng tôi đã được thêm vào, tất cả những gì bạn cần làm là nhấp vào "Chọn tệp" để khám phá các tệp trên PC của bạn và cuối cùng, nhấp vào Tải tệp lên.

Nhấp vào nút này sẽ cho phép người dùng của bạn tải lên một hình ảnh hoặc tệp tin lên trang web của bạn, và phần tốt nhất của điều này là chúng ta có thể chọn nơi trên máy chủ mà chúng ta muốn tải hình ảnh trực tiếp lên dưới các thiết lập của plugin cũng như cách nó trông như thế nào và nhiều thiết lập khác cho biểu mẫu.

Nơi chính mà chúng ta có thể kiểm tra các tệp tải lên sẽ nằm trong tùy chọn "Tải tệp lên" ở menu bên trái từ bảng điều khiển quản trị, đây là trang chính cho plugin nơi tất cả các tệp được tải lên đều được hiển thị.

Như bạn có thể thấy, một plugin dễ dàng và chức năng cho phép chúng tôi nhận hình ảnh từ người dùng mà không gặp trở ngại lớn nào ngoài việc dán shortcode trong phần backend và chờ người dùng tải tệp lên.

Quản lý phương tiện theo vai trò người dùng bằng cách sử dụng WP Media Folder

Như chúng ta có thể thấy, có rất nhiều cách để cho phép người dùng tải lên hình ảnh và tệp tin ở frontend nhưng điều quan trọng trong những trường hợp đó là hình ảnh có thể được tải lên "ngẫu nhiên" và chúng ta không thể kiểm soát chính xác nơi chúng được tải lên, hoàn toàn không phải lo lắng! WP Media Folder đến giải cứu.

WP Media Folder có một công cụ đặc biệt dành riêng cho việc quản lý quyền truy cập vào thư viện media của bạn, điều này có thể thực sự hữu ích khi bạn muốn kiểm soát ai tải ảnh lên và ở đâu cũng như liệu bạn có muốn cho phép người dùng quản lý media của họ trực tiếp trong thư viện media mà không thể xem media của các vai trò/người dùng khác.

Trước hết, chúng ta cần cài đặt WP Media Folder, đây là plugin sẽ cho phép chúng ta sử dụng tất cả các tính năng có sẵn để thực hiện công việc này.

Bây giờ chúng ta đã cài đặt nó, chúng ta sẽ cần kích hoạt tùy chọn để giới hạn quyền truy cập, đối với điều này, hãy đi đến Cài đặt > WP Media Folder, và chúng ta sẽ có thể xem WP Media Folder trang cấu hình chính.

Trong phần này, điều hướng đến Quyền truy cập & Thiết kế > Truy cập phương tiện.

Trong phần này, để giới hạn phương tiện cho mỗi vai trò người dùng và tự động tạo một thư mục dành riêng cho từng vai trò người dùng, chúng tôi sẽ chọn Quyền truy cập phương tiện theo Người dùng hoặc Vai trò người dùng và Vai trò người dùng.

Chúng tôi cũng có nhiều tùy chọn hơn như chọn thư mục đường dẫn hoặc cho phép vai trò/người dùng xem tất cả phương tiện của người dùng/vai trò khác.

Bây giờ chúng ta đã bật tùy chọn chỉ cho phép vai trò người dùng chỉnh sửa phương tiện của riêng họ, giả sử chúng ta có vai trò biên tập viên và chúng ta muốn tất cả người dùng dưới vai trò này có thể xem và quản lý phương tiện của họ cho các bài viết và trang.

Với các tùy chọn mà chúng tôi đã chọn, tất cả điều này nên được thực hiện dễ dàng, vì vậy hãy xem, để làm điều này, tất cả những gì chúng ta cần làm là đăng nhập với tư cách là Editor và tải media lên như họ thường làm.

Khi đăng nhập với tư cách là biên tập viên, bạn sẽ có thể xem thư viện phương tiện như thế này.

Như bạn có thể thấy, có hai phần mà Thư viện Phương tiện cho bạn biết rằng chúng ta đang ở trong một thư mục có tên là "editor", vì vậy hãy tải lên một số phương tiện để kiểm tra nó sẽ hoạt động như thế nào.

Quá trình tải lên sẽ giống hệt như bạn thường làm, nó có thể sử dụng công cụ tải lên frontend hoặc chỉ sử dụng Thư viện Media của bạn, mọi thứ vai trò người dùng này tải lên sẽ bị giới hạn cho vai trò người dùng tự động.

Một trong những lợi thế của việc sử dụng WP Media Folder là vai trò này (và tất cả các vai trò khác có quyền truy cập vào wp-admin) sẽ có thể tạo thư mục bằng cách sử dụng +Thêm Thư mục Mới nút.

Chúng tôi có thể xác nhận rằng dưới thư viện phương tiện một thư mục Trình soạn thảo đã được tạo và bên trong là thư mục mà chúng tôi đã tạo bằng cách sử dụng vai trò Trình soạn thảo, và nó dễ dàng như nhấp vào một nút!

Bây giờ chúng ta đã kích hoạt tùy chọn truy cập phương tiện , một thư mục sẽ được tạo cho mỗi vai trò truy cập vào Thư viện Phương tiện của bạn và tải lên một hình ảnh, và sẽ có thể chia sẻ hoặc không chia sẻ phương tiện với những người dùng khác dưới cùng một vai trò tùy thuộc vào cài đặt bạn chọn, bạn cũng có thể có nhiều quyền kiểm soát hơn đối với phương tiện của mình bằng cách sử dụng bộ lọc.

Thật là một tính năng tuyệt vời và thực sự dễ sử dụng! Phải không?

Cho phép người dùng của bạn tải tệp lên một cách chuyên nghiệp nhất

Trong bài đăng này, chúng tôi đã có thể xem cách cho phép người dùng tải ảnh của họ lên một cách chuyên nghiệp nhất và điều chỉnh trang web của chúng tôi cho từng trường hợp như chỉ gửi biểu mẫu hoặc cũng cho phép người chỉnh sửa tạo thư mục dùng chung mà chỉ họ mới có thể xem trong Thư viện Phương tiện, và điều này không phải là tất cả! Với WP Media Folder bạn sẽ có thể làm nhiều việc khác như kết nối Thư viện Phương tiện của bạn với dịch vụ đám mây, Thật tuyệt! Phải không?

Kiểm tra thêm về WP Media Folder và Giới hạn Truy cập tại đây!