Πώς να ανεβάσετε μια εικόνα WordPress από το frontend με ένα plugin

Η μεταφόρτωση εικόνων είναι ένα από τα πιο σημαντικά πράγματα όταν μιλάμε για έναν ιστότοπο, καθώς οι εικόνες είναι, ουσιαστικά, αυτές που δίνουν το στυλ ενός ιστότοπου. Χωρίς εικόνες, ένας ιστότοπος μπορεί να φαίνεται πολύ παλιός ή να μην μπορεί να συγκεντρώσει τον αριθμό των πελατών/χρηστών που θα θέλαμε.

Εκτός από αυτό, η δυνατότητα στους χρήστες σας να ανεβάζουν εικόνες στο frontend θα μπορούσε να σας προσφέρει πολλά πλεονεκτήματα, όπως το να τους επιτρέψετε να κατεβάζουν έγγραφα ή οποιαδήποτε εικόνα θα ήθελαν να χρησιμοποιήσουν, για παράδειγμα, για ένα προφίλ.

Σε αυτήν την ανάρτηση, θα αξιολογήσουμε μερικά πρόσθετα (plugins) που μας επιτρέπουν να πετύχουμε αυτό που θέλουμε.

Πώς να ανεβάσετε μια εικόνα WordPress από το frontend με ένα plugin

Εδώ θα συζητήσουμε διάφορους τρόπους για να ανεβάσετε εικόνες WordPress με διάφορους τύπους πρόσθετων (plugins).

Μεταφόρτωση αρχείων στο Frontend χρησιμοποιώντας ένα Form Plugin

Ένας από τους γρήγορους και πιο προσιτούς τρόπους είναι η χρήση ενός πρόσθετου φόρμας, το οποίο είναι χρήσιμο όταν χρειάζεται να δημιουργήσουμε, για παράδειγμα, μια φόρμα επικοινωνίας όπου χρειαζόμαστε ο χρήστης να ανεβάσει ένα έγγραφο ή οποιαδήποτε χρήσιμη πληροφορία χρησιμοποιώντας μια εικόνα.

Υπάρχουν πολλά πρόσθετα (plugins) που σας επιτρέπουν να δημιουργείτε φόρμες με πεδίο μεταφόρτωσης αρχείων, ένα από αυτά είναι το Contact Form 7, το οποίο σας επιτρέπει να ανεβάζετε αρχεία στον ιστότοπό σας στο frontend δωρεάν.

Επομένως, για να χρησιμοποιήσετε φόρμες που θα επιτρέπουν στους χρήστες σας να ανεβάζουν αρχεία στο frontend, θα πρέπει πρώτα να δημιουργήσουμε τη φόρμα, οπότε μετά την εγκατάσταση του πρόσθετου, μεταβείτε στην επιλογή Επικοινωνία > Προσθήκη νέας .

Σε αυτήν την οθόνη, θα έχετε μερικές ετικέτες HTML με τον σύντομο κώδικα για κάθε πεδίο μέσα, από προεπιλογή, δημιουργείται μια φόρμα με τα βασικά πεδία.

Καθώς θέλουμε να προσθέσουμε ένα πεδίο μεταφόρτωσης αρχείου, κάντε κλικ στο σημείο όπου θέλετε να προσθέσετε το πεδίο και, στη συνέχεια, κάντε κλικ στο αρχείο στα διαθέσιμα κουμπιά/επιλογές.

Αυτό θα ανοίξει ένα αναδυόμενο παράθυρο όπου μπορείτε να ορίσετε όρια για την μεταφόρτωση αρχείων, να προσθέσετε όλα τα όρια που θέλετε και, τέλος, να κάνετε κλικ στην εισαγωγή ετικέτας .

Αυτό θα προσθέσει τον σύντομο κώδικα για το πεδίο στο περιεχόμενο της φόρμας.

Τώρα μπορείτε να προσαρμόσετε όσο θέλετε τη φόρμα σας, να προσθέσετε άλλα πεδία ή να προσθέσετε HTML και CSS, αν θέλετε, καθώς η φόρμα επιτρέπει κάθε είδους προσαρμογές.

Όταν όλα είναι έτοιμα, μπορείτε να προσθέσετε έναν τίτλο και να κάνετε κλικ στην επιλογή Αποθήκευση .

Αυτό θα δημιουργήσει ένα shortcode που μπορείτε να χρησιμοποιήσετε για να ενσωματώσετε τη φόρμα στην ανάρτηση ή τη σελίδα σας, να την αντιγράψετε και, στη συνέχεια, να χρησιμοποιήσετε το μπλοκ που είναι διαθέσιμο στον επεξεργαστή σελίδας σας για την προσθήκη ενός shortcode. Σε αυτήν την περίπτωση, θα δούμε πώς να το προσθέσετε με τον επεξεργαστή Gutenberg.

Τώρα πρέπει να το δημοσιεύσετε και θα μπορείτε να δείτε τη φόρμα με τα πεδία που προσθέσατε και το κουμπί μεταφόρτωσης αρχείου.

Το μόνο που χρειάζεται να κάνετε είναι να κάνετε κλικ στην επιλογή Επιλογή αρχείου και να επιλέξετε το αρχείο, σε αυτήν την περίπτωση, την εικόνα σας, από τους φακέλους σας στον υπολογιστή σας.

Αφού κάνετε κλικ στην υποβολή, θα πρέπει να ολοκληρωθεί και η εικόνα θα πρέπει να βρίσκεται πλέον στον ιστότοπό σας.

Με αυτόν τον τρόπο, οι χρήστες σας θα μπορούν να ανεβάζουν εικόνες στον ιστότοπό σας, μαζί με κάποιες άλλες πληροφορίες που μπορεί να χρειαστούμε, όπως το όνομα ή το email του ατόμου που τις ανέβασε χρησιμοποιώντας μια φόρμα, κάτι πραγματικά απλό και λειτουργικό.

Χρήση του πρόσθετου μεταφόρτωσης αρχείων WordPress

Τώρα που είδαμε τον συνηθισμένο "παλιό" τρόπο, ας δούμε πώς να ανεβάσετε μια εικόνα χρησιμοποιώντας αυτό το πρόσθετο που θα μας επιτρέψει να ενσωματώσουμε μια επιλογή μεταφόρτωσης αρχείου σε οποιαδήποτε ανάρτηση ή σελίδα χωρίς να χρειάζεται να συμπληρώσουμε άλλες πληροφορίες ή να δημιουργήσουμε καθόλου φόρμα.

Πρώτα απ 'όλα, πρέπει να έχουμε εγκατεστημένο το πρόσθετο "WordPress File Upload", καθώς αυτό θα μας δώσει όλες τις απαραίτητες επιλογές για να δημιουργήσουμε την επιλογή μεταφόρτωσης αρχείων.

Αφού ενεργοποιήσουμε αυτό το πρόσθετο στον ιστότοπό μας, θα πρέπει να μπορούμε να δούμε μια επιλογή μενού διαθέσιμη για να ελέγξουμε όλα τα αρχεία που ανεβάζουμε χρησιμοποιώντας το.

Για να το χρησιμοποιήσουμε, το μόνο που χρειάζεται να κάνουμε είναι να προσθέσουμε ένα shortcode [wordpress_file_upload] όπου θέλουμε να το εμφανίσουμε. Σε αυτήν την περίπτωση, έχουμε ετοιμάσει μια ανάρτηση με κάποιες πληροφορίες όπου προσθέσαμε το shortcode, ώστε να μπορείτε να ελέγξετε πώς θα φαίνεται στον Gutenberg Editor και στο frontend.

Επεξεργαστής Gutenberg

Πρόσοψη

Τώρα που προστέθηκε η φόρμα μεταφόρτωσης, το μόνο που χρειάζεται να κάνετε είναι να κάνετε κλικ στην επιλογή "Επιλογή αρχείου" για να εξερευνήσετε τα αρχεία του υπολογιστή σας και, τέλος, να κάνετε κλικ στην επιλογή Μεταφόρτωση αρχείου.

Κάνοντας κλικ σε αυτό το κουμπί, ο χρήστης μπορεί να ανεβάσει μια εικόνα ή ένα αρχείο στον ιστότοπό σας και το καλύτερο είναι ότι μπορούμε να επιλέξουμε σε ποιο σημείο του διακομιστή θέλουμε να ανεβάσουμε την εικόνα απευθείας στις ρυθμίσεις του πρόσθετου, καθώς και πώς θα φαίνεται και σε πολλές άλλες ρυθμίσεις για τη φόρμα.

Το κύριο μέρος όπου μπορούμε να ελέγξουμε τις μεταφορτώσεις θα είναι στην επιλογή "Μεταφόρτωση Αρχείων" στο αριστερό μενού από τον πίνακα ελέγχου διαχειριστή. Αυτή είναι η κύρια σελίδα για το πρόσθετο όπου εμφανίζονται όλα τα αρχεία που έχουν μεταφορτωθεί.

Όπως μπορείτε να δείτε, ένα εύκολο και λειτουργικό πρόσθετο που θα μας επιτρέψει να λαμβάνουμε εικόνες από τους χρήστες μας χωρίς μια σημαντική ταλαιπωρία πέρα ​​από την επικόλληση του shortcode στο backend και την αναμονή των χρηστών να ανεβάσουν το αρχείο.

Διαχείριση πολυμέσων ανά ρόλο χρήστη χρησιμοποιώντας WP Media Folder

Όπως μπορούμε να δούμε, υπάρχουν πολλοί τρόποι για να επιτρέψουμε στους χρήστες μας να ανεβάζουν εικόνες και αρχεία στο frontend, αλλά το θέμα σε αυτές τις περιπτώσεις είναι ότι οι εικόνες θα μπορούσαν να ανεβαίνουν "τυχαία" και δεν θα μπορούσαμε να έχουμε ακριβή έλεγχο του πού ανεβαίνουν, μην ανησυχείτε καθόλου! WP Media Folder έρχεται να σώσει τη συσκευή.

WP Media Folder διαθέτει ένα ειδικό εργαλείο αφιερωμένο στη διαχείριση της πρόσβασης στη βιβλιοθήκη πολυμέσων σας. Αυτό θα μπορούσε να είναι πραγματικά χρήσιμο όταν θέλετε να ελέγχετε ποιος ανεβάζει εικόνες και πού, καθώς και αν θέλετε να επιτρέψετε στους χρήστες σας να διαχειρίζονται τα δικά τους πολυμέσα απευθείας στη βιβλιοθήκη πολυμέσων χωρίς να μπορούν να βλέπουν άλλους ρόλους/πολυμέσα χρηστών.

Πρώτα απ 'όλα, πρέπει να έχουμε εγκατεστημένο WP Media Folder, αυτό είναι το πρόσθετο που θα μας επιτρέψει να χρησιμοποιήσουμε όλες τις διαθέσιμες λειτουργίες για να λειτουργήσει αυτό.

Τώρα που το έχουμε εγκαταστήσει, θα πρέπει να ενεργοποιήσουμε την επιλογή περιορισμού πρόσβασης. Για αυτό, μεταβείτε στις Ρυθμίσεις > WP Media Folder και θα μπορέσουμε να δούμε την WP Media Folder .

Σε αυτήν την ενότητα, μεταβείτε στην επιλογή Πρόσβαση και Σχεδίαση > Πρόσβαση σε μέσα .

Σε αυτήν την ενότητα, για να περιορίσουμε τα μέσα ανά ρόλο χρήστη και να δημιουργήσουμε αυτόματα έναν φάκελο αφιερωμένο σε κάθε ρόλο χρήστη, θα επιλέξουμε Πρόσβαση σε μέσα ανά Χρήστη ή Ρόλος Χρήστη και Ρόλοι Χρήστη .

Έχουμε επίσης περισσότερες επιλογές, όπως την επιλογή ενός φακέλου διαδρομής ή την παροχή άδειας στον ρόλο/χρήστη να βλέπει όλα τα άλλα μέσα χρηστών/ρόλων.

Τώρα που έχουμε ενεργοποιήσει την επιλογή να επιτρέπεται σε έναν ρόλο χρήστη να επεξεργάζεται μόνο τα δικά του πολυμέσα, ας υποθέσουμε ότι έχουμε έναν ρόλο συντάκτη και θέλουμε όλοι οι χρήστες σε αυτόν τον ρόλο να μπορούν να βλέπουν και να διαχειρίζονται τα πολυμέσα τους για αναρτήσεις και σελίδες.

Με τις επιλογές που επιλέξαμε, όλα αυτά θα πρέπει να είναι δυνατά, οπότε ας δούμε. Για αυτό, το μόνο που χρειάζεται να κάνουμε είναι να συνδεθούμε ως Επεξεργαστής και να ανεβάσουμε τα μέσα όπως θα έκαναν κανονικά.

Όταν συνδεθείτε ως συντάκτης, θα μπορείτε να δείτε τη βιβλιοθήκη πολυμέσων ως εξής.

Όπως μπορείτε να δείτε, υπάρχουν δύο ενότητες όπου η Βιβλιοθήκη Πολυμέσων σάς ενημερώνει ότι βρισκόμαστε σε έναν φάκελο που ονομάζεται "editor", οπότε ας ανεβάσουμε κάποια αρχεία πολυμέσων για να ελέγξουμε πώς θα λειτουργήσει.

Η διαδικασία μεταφόρτωσης θα είναι ακριβώς η ίδια με αυτήν που κάνετε συνήθως, θα μπορούσε να είναι χρησιμοποιώντας ένα εργαλείο μεταφόρτωσης frontend ή απλώς χρησιμοποιώντας τη Βιβλιοθήκη πολυμέσων σας. Όλα όσα μεταφορτώνει αυτός ο ρόλος χρήστη θα περιορίζονται αυτόματα για τον ρόλο χρήστη.

Ένα από τα πλεονεκτήματα της χρήσης WP Media Folder είναι ότι αυτός ο ρόλος (και όλοι οι άλλοι με πρόσβαση στον wp-admin) θα μπορούν να δημιουργούν φακέλους χρησιμοποιώντας το κουμπί
+Προσθήκη νέου φακέλου

Μπορούμε να επιβεβαιώσουμε ότι στη βιβλιοθήκη πολυμέσων έχει δημιουργηθεί ένας Επεξεργαστής και μέσα βρίσκεται ο φάκελος που δημιουργήσαμε χρησιμοποιώντας τον ρόλο Επεξεργαστή, και ήταν τόσο εύκολο όσο το πάτημα ενός κουμπιού!

Τώρα που έχουμε ενεργοποιήσει την πρόσβασης σε πολυμέσα , θα δημιουργηθεί ένας φάκελος για κάθε ρόλο που έχει πρόσβαση στη Βιβλιοθήκη πολυμέσων σας και ανεβάζει μια εικόνα και θα μπορεί να μοιράζεται ή όχι τα πολυμέσα με τους άλλους χρήστες που ανήκουν στον ίδιο ρόλο, ανάλογα με τις ρυθμίσεις που επιλέγετε. Μπορείτε επίσης να έχετε περισσότερο έλεγχο στα πολυμέσα σας χρησιμοποιώντας φίλτρα .

Τι φοβερή λειτουργία και πραγματικά εύκολη στη χρήση! Έτσι δεν είναι;

Επιτρέψτε στους χρήστες σας να ανεβάζουν αρχεία με τον πιο επαγγελματικό τρόπο

Σε αυτήν την ανάρτηση, μπορέσαμε να δούμε πώς να επιτρέπουμε στους χρήστες μας να ανεβάζουν τις εικόνες τους με τον πιο επαγγελματικό τρόπο και να προσαρμόζουμε τον ιστότοπό μας σε κάθε περίπτωση, όπως απλώς να υποβάλλουν μια φόρμα ή επίσης να επιτρέπουν στους συντάκτες μας να δημιουργούν έναν κοινόχρηστο φάκελο που μόνο αυτοί θα μπορούν να βλέπουν στη Βιβλιοθήκη Πολυμέσων, και αυτό δεν είναι όλο! Με το WP Media Folder θα μπορείτε να κάνετε περισσότερα άλλα πράγματα, όπως να συνδέσετε τη Βιβλιοθήκη Πολυμέσων σας σε μια υπηρεσία cloud , Τέλεια! Έτσι δεν είναι;

Δείτε περισσότερα σχετικά με WP Media Folder και τον περιορισμό πρόσβασης εδώ !