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

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

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

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

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

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

Ανέβασμα αρχείων στο Frontend χρησιμοποιώντας ένα Πρόσθετο Φόρμας

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

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

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

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

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

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

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

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

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

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

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

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

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

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

Χρήση του Προσθέματος Ανεβάσματος Αρχείων WordPress

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

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

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

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

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

Προσθιοσκόπιο

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

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

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

Όπως μπορείτε να δείτε, ένα εύκολο και λειτουργικό πρόσθετο που θα μας επιτρέψει να λαμβάνουμε εικόνες από τους χρήστες μας χωρίς μεγάλη ταλαιπωρία, περισσότερο από την επικόλληση του σύντομου κώδικα στο 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 και τον Περιορισμό Πρόσβασης εδώ!