Προστασία ανεπιθύμητων μηνυμάτων με το Akismet. Πώς να δημιουργήσετε μια φόρμα σχολίων επικοινωνίας στο WordPress
Χαιρετισμούς, φίλοι. Το σημερινό σεμινάριο θα βοηθήσει τον ιστότοπό σας στο WordPress να έχει μια ωραία και λειτουργική φόρμα σχολίων. Θα το κάνουμε χρησιμοποιώντας την προσθήκη Φόρμας Επικοινωνίας 7 Κάποτε, πέρασα πολύ χρόνο ψάχνοντας για μια κανονική φόρμα επικοινωνίας και δεν βρήκα ποτέ μια άξια εναλλακτική σε αυτήν την προσθήκη.
Χαρακτηριστικά πρόσθετωνΕπιτρέψτε μου να σας υπενθυμίσω για άλλη μια φορά ότι θα εργαστούμε με ένα πρόσθετο, οπότε αν χρειάζεστε σχόλια χωρίς προσθήκη, καλύτερα να επισκεφτείτε το άρθρο σχετικά, η ρύθμιση είναι λίγο πιο περίπλοκη, αλλά η επιλογή είναι πιο καθολική (κατάλληλη για κάθε ιστότοπο) και επιβαρύνει λιγότερο τους διακομιστές.
Το κύριο πλεονέκτημα της φόρμας επικοινωνίας στη Φόρμα Επικοινωνίας 7 είναι η ευκολία προσαρμογής, η σχεδόν απεριόριστη λειτουργικότητα και η αυτόματη προσαρμογή σχεδίασης σε οποιοδήποτε πρότυπο WordPress. Με τη βοήθειά του, μπορείτε να δημιουργήσετε όχι μόνο μια φόρμα για την αποστολή μηνυμάτων από τον ιστότοπο. Η προσθήκη μπορεί να χρησιμοποιηθεί για τη δημιουργία ενός κουμπιού παραγγελίας, μιας επιστροφής κλήσης ή ενός σύνθετου ερωτηματολογίου με πλαίσια ελέγχου και αναπτυσσόμενες λίστες. Είναι επίσης δυνατή η επισύναψη αρχείων για μεταφορά.
Με μια λέξη, το πρόσθετο είναι πολύ λειτουργικό.
Εάν εξακολουθείτε να ανησυχείτε για την ερώτηση "να κάνετε ή να μην κάνετε μια φόρμα επικοινωνίας;" (μπορείτε να τα βγάλετε πέρα τοποθετώντας απλώς τα στοιχεία επικοινωνίας στις απαραίτητες σελίδες), τότε θα πω κατηγορηματικά - αξίζει να το κάνετε.
Πρώτον, η αποστολή ενός μηνύματος απευθείας από τον ιστότοπο είναι πιο βολική από το άνοιγμα ενός προγράμματος email και τη μη αυτόματη συμπλήρωση όλων. Η εξοικονόμηση χρόνου δεν θα βλάψει κανέναν.
Δεύτερον, η φόρμα επικοινωνίας μπορεί να προσαρμοστεί και αυτό θα σας επιτρέψει να λαμβάνετε επιστολές τυπικής μορφής - θα είναι πιο εύκολη η πλοήγηση. Για παράδειγμα, μπορείτε να ορίσετε μια τυπική κεφαλίδα για ένα μήνυμα "Παραγγελία" και όλα τα μηνύματα ηλεκτρονικού ταχυδρομείου από τη σελίδα παραγγελιών θα φτάνουν με αυτήν την κεφαλίδα.
Τρίτον, η χρήση μιας φόρμας επικοινωνίας σάς επιτρέπει να αποκρύψετε τη διεύθυνση ηλεκτρονικού ταχυδρομείου σας και, ως εκ τούτου, να απαλλαγείτε από πιθανά ανεπιθύμητα μηνύματα που εμφανίζονται αναπόφευκτα όταν η θυρίδα ηλεκτρονικού ταχυδρομείου σας γίνει δημόσια διαθέσιμη.
Τέταρτον, είναι απλά κομψό και μοντέρνο.
Εγκατάσταση και διαμόρφωση της προσθήκης φόρμας επικοινωνίας 7Το πρόσθετο βρίσκεται στη γενική βάση δεδομένων του WordPress, επομένως δεν χρειάζεται να αναζητήσετε κάπου τα αρχεία του, να τα κατεβάσετε μόνοι σας και στη συνέχεια να τα ανεβάσετε στο hosting σας. Όλα γίνονται πιο απλά - μέσω του διαχειριστή του WordPress, εισαγάγετε την ενότητα προσθηκών, πληκτρολογήστε "Φόρμα επικοινωνίας 7" στο πεδίο αναζήτησης και εγκαταστήστε το. Εάν δεν έχετε εγκαταστήσει ποτέ πρόσθετα, τότε εδώ θα βρείτε λεπτομερείς οδηγίες για τον τρόπο εγκατάστασης του πρόσθετου.
Η ρύθμιση της προσθήκης αποτελείται από δύο στάδια.
Το πρώτο είναι η δημιουργία μιας συγκεκριμένης φόρμας. Μπορεί να υπάρχουν πολλές διαφορετικές μορφές, καθεμία από αυτές μπορεί να περιέχει το δικό της σύνολο πεδίων. Με μια λέξη, για κάθε εργασία και κάθε σελίδα στον ιστότοπο μπορείτε να δημιουργήσετε ξεχωριστά μια φόρμα σχολίων, το Wordpress το επιτρέπει - η λίστα τους θα αποθηκευτεί στη βάση δεδομένων των προσθηκών.
Το δεύτερο στάδιο είναι η εισαγωγή της φόρμας στις σελίδες του ιστότοπου. Κάθε φόρμα που δημιουργούμε μέσα στο πρόσθετο θα έχει τον δικό της μοναδικό σύντομο κώδικα. Για να το εισαγάγετε στη σελίδα, χρειάζεται μόνο να το εισαγάγετε.
Λοιπόν πάμε.
Αρχικά, στο αριστερό μενού του πίνακα διαχείρισης βρίσκουμε την καρτέλα Φόρμα Επικοινωνίας 7 Κάτω από αυτό θα εμφανιστεί ένα μενού με δύο στοιχεία - "Φόρμες" και "Προσθήκη νέου".
Δεν έχουμε ακόμη έτοιμες φόρμες, οπότε ας πάμε στην ενότητα "Προσθήκη νέου". Εκεί θα ανοίξει μια σελίδα που σας ζητά να επιλέξετε μια γλώσσα και η προεπιλεγμένη γλώσσα θα εμφανίζεται επίσης εκεί. Απλώς κάντε κλικ στο μπλε κουμπί "Προσθήκη νέου".
Οι ρυθμίσεις φόρμας χωρίζονται σε ξεχωριστά μπλοκ. Θα τα εξετάσω με τη σειρά.
Αποκλεισμός "Όνομα φόρμας"Το πρώτο μπλοκ είναι υπεύθυνο για το όνομα της φόρμας σας - τοποθετήστε τον κέρσορα στην επιγραφή "Χωρίς τίτλο" και εισαγάγετε το όνομα που χρειάζεστε. Αυτό το όνομα θα εμφανίζεται μόνο σε εσάς στη λίστα με τις φόρμες επικοινωνίας του πρόσθετου, γι' αυτό κάντε το ξεκάθαρο για να μην μπερδευτείτε στο μέλλον από όλη την ποικιλία.
Αρχικά, αυτό το μπλοκ περιέχει μια τυπική διαμόρφωση πεδίου. Περιέχει το όνομα του αποστολέα της επιστολής, τη διεύθυνση email του, το θέμα της επιστολής, τα περιεχόμενα της επιστολής και το κουμπί αποστολής.
Τα υποχρεωτικά πεδία επισημαίνονται με αστερίσκους. Εάν αυτό το πεδίο μείνει κενό, το μήνυμα δεν θα σταλεί.
Η θέση των πεδίων μπορεί να προσαρμοστεί χρησιμοποιώντας κανονική σήμανση HTML.
Όσον αφορά τη ρύθμιση των ίδιων των πεδίων, μπορείτε να αφαιρέσετε τα περιττά και να προσθέσετε αυτά που χρειάζεστε. Εάν δεν θέλετε το θέμα του γράμματος να εισαχθεί χειροκίνητα, απλώς διαγράψτε το αντίστοιχο μπλοκ.
Η προσθήκη πεδίων είναι επίσης πολύ εύκολη. Στη δεξιά πλευρά υπάρχει ένα κουμπί για τη δημιουργία μιας ετικέτας, κάνοντας κλικ σε αυτήν θα δείτε μια λίστα με όλα τα πιθανά πεδία που υποστηρίζει αυτό το πρόσθετο.
Επιλέξτε το επιθυμητό στοιχείο και διαμορφώστε τις ρυθμίσεις του. Το πρόσθετο είναι στα ρωσικά, επομένως όλες οι ρυθμίσεις είναι εύχρηστες.
Το πρώτο πλαίσιο ελέγχου υποδεικνύει εάν το πεδίο είναι υποχρεωτικό ή προαιρετικό (προσθέτει έναν αστερίσκο).
Αφού ρυθμίσετε το πεδίο, θα έχετε 2 συντομότερους κωδικούς:
- "Αντιγράψτε αυτόν τον κώδικα και επικολλήστε τον στο πρότυπο φόρμας στα αριστερά" - αυτός ο κώδικας εισάγεται στον κώδικα φόρμας με τον ίδιο τρόπο όπως όλοι οι άλλοι.
- "Και επικολλήστε τον ακόλουθο κώδικα στο πρότυπο γράμματος παρακάτω" - θα χρειαστούμε αυτόν τον κωδικό για να μορφοποιήσουμε το γράμμα στο επόμενο μπλοκ.
Με αυτόν τον τρόπο μπορείτε να προσθέσετε οποιονδήποτε αριθμό πεδίων, πλαισίων ελέγχου, αναπτυσσόμενες λίστες, στοιχεία για επισύναψη αρχείων κ.λπ. στη φόρμα.
Μπλοκ "Επιστολή"Τώρα το καθήκον μας είναι να προσαρμόσουμε την επιστολή που θα λάβουμε. Η επιστολή δεν επηρεάζει με κανέναν τρόπο τη λειτουργικότητα της φόρμας ανατροφοδότησης, χρησιμεύει μόνο για τη μετάδοση των πληροφοριών που έχουν εισαχθεί στη φόρμα.
Καθήκον μας είναι να συμπεριλάβουμε όλες τις πληροφορίες στην επιστολή.
Το πρώτο βήμα είναι να υποδείξετε τη διεύθυνση email στην οποία θα σταλεί το μήνυμα (μπορεί να είναι οτιδήποτε).
Το δεύτερο στοιχείο υποδεικνύει τη διεύθυνση email από την οποία θα σας σταλεί η επιστολή. Δεν θα άλλαζα τίποτα εδώ, η προεπιλογή είναι τα εισερχόμενα του ιστολογίου σας και σε αυτό προστίθεται μια ετικέτα με το όνομα του ατόμου που στέλνει το μήνυμα.
Στη συνέχεια αναφέρουμε το θέμα της επιστολής. Κατά κανόνα, το θέμα λαμβάνεται από το πεδίο που συμπληρώνεται στη φόρμα. Αλλά μπορείτε να αφαιρέσετε αυτό το στοιχείο από τη φόρμα και να εισαγάγετε ένα συγκεκριμένο θέμα στο πεδίο, το οποίο ορίζεται αυτόματα σε κάθε γράμμα. Το έκανα για φόρμες σχολίων από σελίδες σχετικά με υπηρεσίες και διαφημίσεις. Τα μηνύματα από εκεί έρχονται πάντα με το ίδιο θέμα "Παραγγελίες υπηρεσιών" ή "Παραγγελία διαφήμισης" - απλά και ξεκάθαρα.
Το πεδίο πρόσθετων κεφαλίδων περιέχει την ετικέτα "Απάντηση σε:" έτσι ώστε όταν απαντάτε σε μια επιστολή που λάβατε από το ιστολόγιό σας, να στέλνετε το μήνυμα στο ιστολόγιο και στη διεύθυνση που υπέδειξε ο αποστολέας της επιστολής στο πεδίο φόρμας. Δεν χρειάζεται να αλλάξετε αυτό το πεδίο.
Το πεδίο «Πρότυπο επιστολής» είναι υπεύθυνο για το εσωτερικό περιεχόμενο του μηνύματος που λάβατε. Από προεπιλογή, περιέχει πληροφορίες σχετικά με τον αποστολέα, το θέμα και το κείμενο του μηνύματος που έχει εισαχθεί στο πεδίο.
Στο τέλος αναφέρεται ο ιστότοπος από τον οποίο στάλθηκε η επιστολή.
Εάν προσθέσατε επιπλέον πεδία στη φόρμα που δεν ήταν εγκατεστημένα από προεπιλογή, τότε μην ξεχάσετε να προσθέσετε την αντίστοιχη ετικέτα στο πρότυπο γράμματος. Σας δόθηκε στο μπλοκ "Πρότυπο φόρμας", όπου δημιουργήσατε την αντίστοιχη ετικέτα (το πεδίο "Και επικολλήστε τον παρακάτω κώδικα στο πρότυπο email παρακάτω").
Οποιεσδήποτε πληροφορίες κειμένου σε αυτό το μπλοκ (εκτός από ετικέτες) μπορούν να αλλάξουν σύμφωνα με τις προτιμήσεις σας. Μπορείτε επίσης να προσθέσετε περιγραφές και να ανταλλάξετε ετικέτες, τακτοποιώντας τις με τη σειρά που σας ταιριάζει.
Μπλοκ "Γράμμα 2"Εάν θέλετε κάποιος άλλος να λάβει το μήνυμα που σας έστειλε, μπορείτε να επιλέξετε αυτό το πλαίσιο.
Αυτό το μπλοκ έχει διαμορφωθεί παρόμοια με το προηγούμενο. Από προεπιλογή, συμπληρώνονται όλα τα πεδία σε αυτό, ώστε το γράμμα να πάει στο άτομο που συμπλήρωσε τη φόρμα (προφανώς για να μην ξεχάσει).
Μπορείτε να δημιουργήσετε ένα αντίγραφο που θα σταλεί, για παράδειγμα, στον διευθυντή ή στον λογιστή σας.
Αποκλεισμός "Ειδοποιήσεις κατά την υποβολή μιας φόρμας"Σε αυτό το μπλοκ μπορείτε να διαμορφώσετε τα μηνύματα που βλέπει ο χρήστης αφού κάνει κλικ στο κουμπί αποστολής μηνύματος. Αν θέλετε να αλλάξετε κάτι, παρακαλώ, τα άφησα όλα όπως είναι.
Ενεργοποίηση φόρμαςΑφού συμπληρώσετε όλα τα πεδία, επιστρέψτε στην αρχή στο μπλοκ «Όνομα φόρμας» και κάντε κλικ στο κουμπί «αποθήκευση» που βρίσκεται στα δεξιά.
Το πρόσθετο θα τοποθετήσει τη φόρμα που δημιουργήσατε στη λίστα με τις ενεργές και θα της εκχωρήσει έναν ειδικό κωδικό κάπως έτσι:
[ επικοινωνία - φόρμα - 7 id = "5464" title = "Επαλήθευση" ] !} |
Εισάγοντας αυτόν τον κωδικό οπουδήποτε στον ιστότοπό σας, θα λάβετε μια έτοιμη φόρμα επικοινωνίας με τους πιθανούς πελάτες σας.
Anti-spam – Akismet και CaptchaΤα ανεπιθύμητα μηνύματα προκαλούν πολλά προβλήματα στους ιδιοκτήτες ιστότοπων και κάθε νέα φόρμα που σας επιτρέπει να γράψετε κάτι απλώς προσθέτει στον αριθμό των spam bots.
Αν αφήσετε το πρόσθετο της φόρμας επικοινωνίας στη βασική του έκδοση, τότε μετά από λίγο θα βομβαρδιστείτε με πολλά άδεια και ανούσια μηνύματα.
Υπάρχουν δύο τρόποι για να απαλλαγείτε από τους spammers:
Η πρώτη επιλογή είναι άβολη γιατί αναγκάζει τους επισκέπτες να εισάγουν μη αυτόματα πρόσθετους χαρακτήρες. Δεν είναι τόσο δύσκολο, αλλά σε κάποιους δεν αρέσει.
Η χρήση της προσθήκης Akismet είναι πιο βολική επειδή αναλύει ανεξάρτητα τα δεδομένα που έχουν εισαχθεί (ονόματα, διευθύνσεις email, συνδέσμους) και, με βάση τη συσσωρευμένη βάση δεδομένων, εξάγει συμπεράσματα σχετικά με το εάν το μήνυμα είναι ανεπιθύμητο ή όχι.
Επιπλέον, το akismet είναι εγκατεστημένο στους περισσότερους ιστότοπους WordPress για προστασία από ανεπιθύμητα μηνύματα σε σχόλια σε άρθρα. Αυτό σημαίνει ότι όταν το χρησιμοποιείτε δεν θα χρειαστεί να εγκαταστήσετε πρόσθετα πρόσθετα και να δημιουργήσετε περιττό φορτίο στον ιστότοπο.
Προστασία ανεπιθύμητων μηνυμάτων με το Akismet1. Εγκαταστήστε το πρόσθετο Akismet στον ιστότοπό σας και ενεργοποιήστε το - .
2. Προσθέστε επιπλέον δεδομένα στις ετικέτες της φόρμας επικοινωνίας:
- στο πεδίο με το όνομα του συγγραφέα προσθέστε akismet:author
- στο πεδίο με τον αποστολέα email της επιστολής akismet:author_email
- στο πεδίο για τη διεύθυνση του ιστότοπου akismet:author_url
Θα πρέπει να μοιάζει με αυτό:
Μόλις αποθηκευτεί, η φόρμα επικοινωνίας θα πρέπει να αποκλείει όλα τα μηνύματα που αποστέλλονται από αποστολείς ανεπιθύμητης αλληλογραφίας. Μπορείτε να ελέγξετε τη λειτουργία του φίλτρου χρησιμοποιώντας το ειδικό όνομα δοκιμής «viagra-test-123? – όταν το εισάγετε, θα πρέπει να εμφανιστεί ένα μήνυμα σφάλματος.
Για να κάνετε την επαλήθευση λιγότερο αυστηρή, μπορείτε να ελέγξετε μόνο ορισμένα από τα πεδία, για παράδειγμα, όνομα και email, και να αφήσετε μη επιλεγμένη τη διεύθυνση του ιστότοπου. Αυτό θα αυξήσει την πιθανότητα λήψης ανεπιθύμητων μηνυμάτων, αλλά θα είναι λιγότερο πιθανό να χάσετε τα μηνύματα που χρειάζεστε.
Προστασία ανεπιθύμητων μηνυμάτων με Really Simple CAPTCHAΕάν διαπιστώσετε ότι το Akismet δεν σας ταιριάζει (αφαιρεί πολλά ανεπιθύμητα μηνύματα ή αποκλείει τα απαραίτητα μηνύματα), τότε μπορείτε να ενεργοποιήσετε ένα captcha. Για να το κάνετε αυτό, εγκαταστήστε το πρόσθετο Really Simple CAPTCHA.
Ανοίξτε τη φόρμα επικοινωνίας που θέλετε για επεξεργασία
Επιλέξτε Captcha από τη λίστα ετικετών. Στις ρυθμίσεις ετικέτας, μπορείτε να επιλέξετε το μέγεθος της εικόνας με σύμβολα, διαφορετικά δεν χρειάζεται να αλλάξετε τίποτα. Στο κάτω μέρος του παραθύρου ρυθμίσεων, θα εμφανιστούν 2 ετικέτες, η μία είναι υπεύθυνη για την εμφάνιση της εικόνας, η δεύτερη εμφανίζει ένα πεδίο για την εισαγωγή δεδομένων από αυτήν την εικόνα.
Για να αρχίσει να λειτουργεί η captcha, πρέπει να αντιγράψετε και να επικολλήσετε και τις δύο αυτές ετικέτες στο αριστερό παράθυρο του προτύπου φόρμας και, στη συνέχεια, να αποθηκεύσετε τις αλλαγές.
Τοποθέτηση μιας φόρμας σχολίων σε ένα αναδυόμενο παράθυροΗ φόρμα επικοινωνίας δεν χρειάζεται πάντα να βρίσκεται σε μια συγκεκριμένη ενότητα του ιστότοπου, μερικές φορές, ο πελάτης θα πρέπει να έχει πρόσβαση σε αυτήν από κάθε σελίδα του πόρου.
Σε τέτοιες περιπτώσεις, η δημοσίευση μιας πλήρους φόρμας δεν είναι πάντα βολική. Είναι πολύ πιο εύκολο να τοποθετήσετε ένα κουμπί σε εμφανές σημείο που προσελκύει την προσοχή. Κάνοντας κλικ σε αυτό το κουμπί θα πρέπει ήδη να οδηγείτε στο άνοιγμα της φόρμας.
Έτσι, ένα άτομο θα μπορεί να στέλνει μηνύματα από τον ιστότοπο χωρίς να φύγει από τη σελίδα που χρειάζεται.
Αυτό γίνεται χρησιμοποιώντας ένα άλλο πρόσθετο - το Easy FancyBox.
1. Εγκαταστήστε το πρόσθετο
Πρώτα απ 'όλα, εγκαθιστούμε το ίδιο το πρόσθετο, το οποίο βρίσκεται στη γενική βάση δεδομένων των προσθηκών, οπότε το μόνο που χρειάζεται να κάνετε είναι να εισαγάγετε το όνομά του στον πίνακα διαχείρισης του ιστολογίου σας στην αναζήτηση προσθηκών. Μετά την εγκατάσταση της προσθήκης, θα εμφανιστεί μια καρτέλα "αρχεία πολυμέσων" στην ενότητα "Ρυθμίσεις".
Σε αυτήν την καρτέλα πρέπει να βρείτε μια λίστα με τους τύπους περιεχομένου που θα πρέπει να εμφανίζονται στο αναδυόμενο παράθυρο. Από προεπιλογή υπάρχουν μόνο Εικόνες, πρέπει να προσθέσετε περιεχόμενο Inline.
Τώρα που ολοκληρώθηκε η ρύθμιση της προσθήκης, ας προχωρήσουμε στη ρύθμιση του κουμπιού σχολίων.
2. Επικολλήστε τον κώδικα στον ιστότοποΚατ 'αρχήν, μπορείτε να χρησιμοποιήσετε έναν κανονικό σύνδεσμο κειμένου, αλλά ένα κουμπί εικόνας θα φαίνεται καλύτερο.
Στον ιστότοπό σας, όπου θέλετε να εμφανίσετε ένα κουμπί για τη φόρμα επικοινωνίας (στην κεφαλίδα, το υποσέλιδο ή την πλαϊνή γραμμή), εισαγάγετε τον ακόλουθο κώδικα:
< a href = "#contact_form_pop" class = "fancybox-inline" > < img title = "Φόρμα Επικοινωνίας" alt = "Φόρμα Επικοινωνίας" src = "http://ссылка на картинку" > < / a > < div style = "display:none" class = "fancybox-hidden" > < div id = "contact_form_pop" > [ contact - form - 7 id = "your form id" title = "όνομα της φόρμας σας" ] !} < / div > < / div > |
Στον κώδικα, πρέπει να υποδείξετε τη διεύθυνση της εικόνας που χρησιμοποιείτε ως κουμπί ανατροφοδότησης και να επεξεργαστείτε τον σύντομο κωδικό της ίδιας της φόρμας - εισαγάγετε το αναγνωριστικό και τον τίτλο σας.
3. Καταργήστε τον περιορισμό στους συντομότερους κωδικούς στην πλαϊνή γραμμήΑυτό το στοιχείο είναι απαραίτητο εάν θέλετε να εγκαταστήσετε ένα κουμπί στην πλαϊνή γραμμή. Η πλαϊνή γραμμή στο WordPress δεν επιτρέπει πάντα συντομότερους κωδικούς.
Για να ενεργοποιήσετε αυτήν τη λειτουργία, πρέπει να ανοίξετε το αρχείο function.php για επεξεργασία (απευθείας από την περιοχή διαχειριστή του WordPress) και να εισαγάγετε τον ακόλουθο κώδικα πριν από την αγκύλη κλεισίματος "?>":
add_filter("widget_text", "do_shortcode");
add_filter ("widget_text" , "do_shortcode" ); |
Θα σας δώσει τη δυνατότητα να εκτελέσετε όλους τους συντομότερους κωδικούς στην πλαϊνή γραμμή.
Κατέληξα σε αυτήν την ωραία αναδυόμενη φόρμα:
Μερικές φορές υπάρχει ανάγκη να τοποθετηθούν πολλές φόρμες σε έναν ιστότοπο με διαφορετικές ρυθμίσεις και πεδία.
Για παράδειγμα, ένα κουμπί οδηγεί σε μια φόρμα με όνομα και αριθμό τηλεφώνου και χρησιμοποιείται για την παραγγελία μιας κλήσης από τον ιστότοπο και το δεύτερο θα πρέπει να ανοίξει μια άλλη φόρμα όπου υπάρχει μια λεπτομερής αίτηση παραγγελίας (με διεύθυνση, πεδίο περιγραφής, τη δυνατότητα επισύναψης αρχείου κ.λπ.). Στην ίδια την προσθήκη Φόρμας Επικοινωνίας 7, μπορείτε να δημιουργήσετε έναν ατελείωτο αριθμό επιλογών φόρμας, αλλά πώς μπορείτε να τις χωρέσετε σε διαφορετικά κουμπιά στην ίδια σελίδα;
Για να το κάνετε αυτό, πρέπει να προσαρμόσετε τον κωδικό του κουμπιού από την προηγούμενη παράγραφο. Το πρώτο κουμπί χρησιμοποιεί την επιλογή που παρουσιάζεται παραπάνω. Στη δεύτερη, δύο τιμές αλλάζουν:
Πολύ συχνά χρειάζεται να δημιουργήσετε μια φόρμα σχολίων και να την αποκρύψετε. Αυτή η φόρμα θα πρέπει να εμφανίζεται όταν κάνετε κλικ σε ένα κουμπί ή μια επιγραφή στον ιστότοπο σε ένα αναδυόμενο παράθυρο lightbox. Σε αυτό το άρθρο θα περιγράψουμε: Πώς να δημιουργήσετε μια φόρμα σχολίων σε ένα αναδυόμενο παράθυρο για το WordPress. Έξοδος φόρμας συνδρομής Feedburner. Πώς να πραγματοποιήσετε μια κλήση σε πολλές φόρμες σε μία σελίδα. Πώς να κλείσετε το παράθυρο με τη φόρμα σχολίων (fancybox) μετά την αποστολή και θα αναλύσουμε όλα τα πιθανά σφάλματα και τις λύσεις τους.
Για να δημιουργήσετε μια φόρμα σχολίων ή άλλες φόρμες για έναν ιστότοπο στο CMS WP, το στούντιο σχεδιασμού "Engine" συνιστά την προσθήκη Φόρμας Επικοινωνίας 7 και για ένα αναδυόμενο παράθυρο με εφέ lightbox θα χρησιμοποιήσουμε το Easy FancyBox.
Η πιο δημοφιλής, υψηλής ποιότητας και εύκολη στη διαμόρφωση και χρήση προσθήκη είναι η Φόρμα Επικοινωνίας 7 - με τη βοήθειά της μπορείτε να δημιουργήσετε οποιεσδήποτε φόρμες επικοινωνίας και πολλά άλλα. Δεδομένου ότι η προσθήκη έχει μεγάλο αριθμό διαφορετικών μορφών και πεδίων, μπορεί να χρησιμοποιηθεί για πολλές εργασίες.
Σε αυτήν την περίπτωση, για να καλέσετε πολλές φόρμες, δώστε προσοχή σε αυτά τα μέρη του κώδικα:
6. Έξοδος φόρμας συνδρομής Feedburner
ΕΓΓΡΑΦΕΙΤΕ
ΕΓΓΡΑΦΕΙΤΕ:
Μπορείτε να χρησιμοποιήσετε αυτόν τον κωδικό για τη φόρμα συνδρομής σας αλλάζοντας μόνο τη διεύθυνση ροής https://feedburner.google.com/fb/a/mailverify?uri=Cms-info στη δική σας.
Προσθέστε τον ακόλουθο κώδικα εάν χρησιμοποιείτε μια προσθήκη με fancybox, όπως το Easy Fancybox:
on_sent_ok: $.fancybox.close();
στην ενότητα Πρόσθετες ρυθμίσεις για τη φόρμα σας.
Αυτό το σφάλμα μπορεί να παρουσιαστεί στις πιο πρόσφατες εκδόσεις της μηχανής WordPress, συνιστάται να αλλάξετε την κλάση στον σύνδεσμο:
Ανατροφοδότηση
αλλάζω σε:
Ανατροφοδότηση
Αλλάξαμε το fancybox σε fancybox-inline .
Προβλήματα και λύσεις που προέκυψαν:1. Όταν έκανα κλικ στον σύνδεσμο, δεν συνέβη τίποτα στη φόρμα - το http://site/#contact_form_pop εμφανίστηκε στη γραμμή διευθύνσεων.
Το πρόβλημα λύθηκε με την αντικατάσταση της προσθήκης Easy FancyBox με το FancyBox για WordPress
2. Εάν έχετε συνδέσει μια συλλογή (για παράδειγμα NextGEN Gallery) ή ένα θέμα που έχει ήδη εγκατεστημένο εφέ "lightbox", συμβαίνει το εξής: οι φωτογραφίες ανοίγουν με το ενσωματωμένο lightbox και επίσης με ένα lightbox από το EasyFancy Box, που είναι, τότε πρέπει να τα κλείσετε δύο φορές.
Για να το αποφύγετε αυτό, στις ρυθμίσεις του EasyFancy Box, καταργήστε την επιλογή του πλαισίου ελέγχου Εικόνες και στο επάνω μέρος του αναδυόμενου κώδικα φόρμας, αντικαταστήστε την κλάση fancybox με fancybox-inline . Ο κωδικός σας θα μοιάζει με αυτό:.
Ανατροφοδότηση
Αυτό είναι όλο, αν θέλετε να μας «ευχαριστήσετε», έχετε αυτή την ευκαιρία: στα δεξιά υπάρχουν επιλογές για δωρεές για την ανάπτυξη της πύλης. Ή μοιραστείτε το άρθρο στα μέσα κοινωνικής δικτύωσης χρησιμοποιώντας τις παρακάτω υπηρεσίες.
Γειά σου. Σε αυτό το μάθημα θα δημιουργήσουμε μια πλήρη φόρμα σχολίων και θα εμφανιστεί σε ένα παράθυρο τρόπου λειτουργίας όταν κάνετε κλικ σε ένα κουμπί στη σελίδα. Αυτό το μάθημα το έκανα μόνος μου, από την αρχή, χρησιμοποιώντας μόνο το πλαίσιο jQuery και ένα μικρό JavaScript τα απαραίτητα αρχεία για εργασία:
Βήμα 1. Γενική περιγραφή και λειτουργία της φόρμας σχολίων:
Αρχικά, θα σας πω ποια αρχεία θα χρειαστούμε και, στην πραγματικότητα, γιατί χρειάζονται:
- εικόνες - ο φάκελος όπου αποθηκεύονται όλες οι εικόνες της φόρμας μας.
- index.html - το κύριο αρχείο "ευρετηρίου" στο οποίο θα βρίσκεται το κουμπί για την κλήση της φόρμας σχολίων.
- contact.html είναι το αρχείο που περιέχει την ίδια τη φόρμα. Είναι αυτό το αρχείο που θα συμπεριληφθεί στο παράθυρο modal.
- send.php - ένα αρχείο χειριστή υπεύθυνο για την αποστολή επιστολών.
- jquery.js - το κύριο πλαίσιο jQuery.
- Το style.css είναι ένα αρχείο με φύλλα στυλ για τη φόρμα μας.
Ας προχωρήσουμε λοιπόν και με τη σειρά... Η φόρμα θα λειτουργήσει ως εξής: Ο χρήστης πηγαίνει στη σελίδα στην οποία υπάρχει ένα κουμπί για να καλέσει το modal παράθυρο, το πατάει και μετά εμφανίζεται η φόρμα, στην οποία ο επισκέπτης εισάγει όλα τα δεδομένα και το κείμενο του μηνύματος και αποστέλλεται, στη συνέχεια ανακατευθύνεται σε μια σελίδα με μήνυμα σχετικά με την επιτυχή ή μη αποστολή της επιστολής. Αυτό είναι όλο, τώρα ας αρχίσουμε να απλώνουμε τη φόρμα μας...
Βήμα 2. Κουμπί για να καλέσετε τη φόρμα.
Έτσι, για να εμφανιστεί το modal παράθυρο μας με τη φόρμα, πρέπει να το αναγκάσουμε με κάποιο τρόπο να το κάνει αυτό. Για να γίνει αυτό, χρειάζεται απλώς να τοποθετήσουμε ένα κανονικό κουμπί στη σελίδα. Ο κώδικας για ένα τέτοιο κουμπί εμφανίζεται παρακάτω, μαζί με τα στυλ που εφαρμόζονται σε αυτό:
Γράψτε ένα μήνυμα στον διαχειριστή
Βήμα 3. Η ίδια η φόρμα + ρυθμίσεις για αυτήν
Τώρα ας υπολογίσουμε πού θα βρίσκεται η φόρμα σχολίων μας. Και θα βρίσκεται στο αρχείο contact.html, το οποίο βρίσκεται ήδη στον πηγαίο κώδικα του μαθήματος. Αυτή η φόρμα είναι αρκετά μικρή, οπότε θα τοποθετήσω τον κωδικό της παρακάτω:
Αποστολή μηνύματος στη Διοίκηση:
Όπως μπορείτε να δείτε, περνώντας από τον κώδικα, ακόμα και με γυμνό μάτι μπορείτε να δείτε ότι για να εμφανίσω καλύτερα τη φόρμα, χρησιμοποίησα μια διάταξη πίνακα. Αυτό ήταν πολύ χρήσιμο για μένα να εξισώσω όλα τα πεδία φόρμας.
Βήμα 4. Υπεύθυνος επεξεργασίας για την αποστολή επιστολών
Εδώ θα σας πω γρήγορα για τον κύριο επεξεργαστή για την αποστολή επιστολών. Δεν θα δώσω τον κωδικό του εδώ, γιατί είναι στον πηγαίο κώδικα. Κατεβάστε και δείτε τα περιεχόμενά του. Εάν γνωρίζετε την PHP κάπου σε ενδιάμεσο επίπεδο, όπως εγώ, τότε μπορείτε εύκολα να αναλύσετε ολόκληρο τον κώδικα αυτού του χειριστή μόνοι σας. Αν όλα είναι έτοιμα, τότε προχωρήστε...
Βήμα 5. «Βίδωμα» του κύριου πλαισίου jQuery
Τώρα, όπως σε κάθε μάθημα jQuery, πρέπει να "βιδώσουμε" το κύριο πλαίσιο jQuery. Για να το κάνουμε αυτό, ας πάμε λίγο πίσω, εκεί που βρίσκεται το κουμπί μας και ανάμεσα στις ετικέτες και εισάγουμε τον ακόλουθο κώδικα:
Βήμα 6: Δημιουργία στυλ της φόρμας
Όπως μπορείτε να δείτε, τα στυλ για τη φόρμα μας τοποθετούνται ξεχωριστά στο αρχείο style.css, καθώς αυτά τα στυλ καταλαμβάνουν πολύ χώρο. Απλώς πρέπει να συνδέσουμε τον παρακάτω κώδικα με το αρχείο ευρετηρίου μας:
Βήμα 7. Βελτιώσεις jQuery
Τώρα για να λειτουργήσει πλήρως το παράθυρο φόρμας, πρέπει να εισαγάγουμε τον ακόλουθο κώδικα jQuery:
$(function() ( $("a").overlay(function() ( var wrap = this.getContent().find("div.wrap"); if (wrap.is(":empty")) ( wrap.load(this.getTrigger().attr("href"));
Συμπέρασμα.
Η ενδιαφέρουσα φόρμα σχολίων μας είναι έτοιμη. Το μονοπάτι ήταν μακρύ και δύσκολο, οπότε αν κάποιος δεν καταλαβαίνει τίποτα, θα ακούσω τις ερωτήσεις σας στα σχόλια αυτού του μαθήματος. Και αυτό είναι όλο για μένα, τα λέμε ξανά, φίλοι!
Με ειλικρινή σεβασμό, ο οδηγός σας jQuery - M.K.
(Τελευταία ενημέρωση: 07/08/2016)
Γεια σε όλους! Είμαι πάλι εγώ, με μια χρήσιμη ανάρτηση - WordPress popup - για αρχάριους και όχι μόνο χρήστες WordPress. Εάν ενδιαφέρεστε για το αναδυόμενο πρόσθετο του WordPress, που ονομάζεται επίσης και modal window plugin, τότε εσείς, φίλοι, ήρθατε στο σωστό μέρος.
Το πρόσθετο που θα παρουσιάσω παρακάτω, μπορείτε να το χρησιμοποιήσετε για: Φόρμα Επικοινωνίας 7 σε ένα παράθυρο μοντάλ. οποιαδήποτε φόρμα επαφής (ανατροφοδότηση) σε ένα τροπικό (αναδυόμενο) παράθυρο. βίντεο σε ένα τροπικό παράθυρο. εικόνες σε ένα αναδυόμενο παράθυρο. δημοσίευση χρήσιμων πληροφοριών με συνδέσμους. φόρμα συνδρομής αλληλογραφίας για νέα άρθρα σε παράθυρο τρόπου λειτουργίαςκαι ούτω καθεξής, και ούτω καθεξής, δεν μπορείτε να τα αναφέρετε όλα. Το πρόσθετο είναι πολύ απλό, χωρίς πολύπλοκες ρυθμίσεις και δεν δημιουργεί σχεδόν κανένα επιπλέον φορτίο στον ιστότοπο.
Easy Modal Plugin - Αναδυόμενο/Modal Παράθυρο για WordPress
Modal window plugin για WordPress - Easy Modal Μπορείτε να εγκαταστήσετε αυτό το πρόσθετο με τον τυπικό τρόπο, μέσω του πίνακα διαχείρισης - Προσθήκες - Προσθήκη νέου και στο πεδίο Αναζήτηση προσθηκών πληκτρολογήστε το όνομα Easy Modal και πατήστε Enter. Θα πρέπει να είναι πρώτο στη λίστα. Εγκαταστήστε το και ενεργοποιήστε το ως συνήθως. Στη συνέχεια, μπορείτε να προχωρήσετε στη δημιουργία ενός νέου παραθύρου.
Για να το κάνετε αυτό, κάντε κλικ στη νέα ενότητα Easy Modal που εμφανίζεται και επιλέξτε Modals:
Easy Modal - δημιουργία ενός νέου παραθύρου modal Μετά από αυτό, στο επάνω μέρος της σελίδας, κάντε κλικ στο κουμπί Προσθήκη νέου:
Προσθήκη νέου παραθύρου Και εδώ, όλα είναι απλά:
Δημιουργία αναδυόμενου βίντεο Στις γενικές ρυθμίσεις (καρτέλα "Γενικά") δώστε το όνομα του νέου παραθύρου (δεν θα εμφανιστεί, αυτό είναι για εσάς εάν, για παράδειγμα, δημιουργήσετε πολλά παράθυρα τύπου modal). τύπος φόρτωσης Load Sitewide (για ολόκληρο τον ιστότοπο). τίτλος παραθύρου και τέλος επικολλήστε τον κωδικό που χρειάζεστε στο πρόγραμμα επεξεργασίας (Λειτουργία κειμένου). Στο παράδειγμά μου έχω εισαγάγει έναν κωδικό βίντεο από το YouTube.
Ρύθμιση ενός παραθύρου τροπικού τρόπου Στις παραμέτρους μπορείτε να επιλέξετε το μέγεθος του παραθύρου. εάν θα χρησιμοποιήσετε φόντο ή όχι. τύπος κίνησης για modal/αναδυόμενο παράθυρο. τη θέση του παραθύρου και μπορείτε επίσης να διορθώσετε το παράθυρο (επιλέξτε το πλαίσιο και υποδείξτε την απόσταση από το επάνω μέρος της οθόνης).
Στην καρτέλα Παραδείγματα θα βρείτε παραδείγματα κώδικα για την εμφάνιση ενός αναδυόμενου παραθύρου στο WordPress:
Κώδικας για την εμφάνιση ενός παραθύρου modal στο WordPress Εδώ μπορείτε να επιλέξετε έναν απλό σύνδεσμο κειμένου, κουμπί ή εικονίδιο. Λάβετε υπόψη ότι σε κάθε παράθυρο που δημιουργήθηκε πρόσφατα εκχωρείται μια κλάση eModal. Το πρώτο παράθυρο που δημιουργείται θα έχει την κλάση eModal - 1, το δεύτερο eModal - 2 και ούτω καθεξής. Χρειάζεται μόνο να αντικαταστήσετε μόνοι σας τον αριθμό μετά το - υπογράψτε. Αυτός ο κώδικας μπορεί να επικολληθεί μέσα ή οπουδήποτε στο άρθρο σας. Φυσικά, μπορείτε να γράψετε οποιοδήποτε κείμενο στον κώδικα. Ναι, σχεδόν ξέχασα ότι μετά τη δημιουργία ενός παραθύρου modal στη δεξιά πλευρά της σελίδας, μην ξεχάσετε να κάνετε κλικ στο κουμπί Δημοσίευση.
Έβαλα τον κωδικό για το παράθυρο modal με το βίντεο στην πλαϊνή γραμμή ως κουμπί:
Κουμπί πλευρικής γραμμής ιστολογίου Ο επισκέπτης κάνει κλικ σε αυτό και ανοίγει ένα παράθυρο με ένα βίντεο:
Τροπικό παράθυρο με βίντεο Ελπίζω, φίλοι και σύντροφοι, η γενική αρχή της εργασίας με το πρόσθετο Easy Modal είναι σαφής για εσάς. Θα προσθέσω απλώς ότι μπορείτε στη συνέχεια ή αμέσως να προσαρμόσετε την εμφάνιση του παραθύρου του modal κάνοντας κλικ στο στοιχείο Θέμα. Δυστυχώς, η δωρεάν έκδοση του πρόσθετου έχει μόνο ένα θέμα για σχεδιασμό, αλλά μπορείτε να το σχεδιάσετε όπως θέλετε, υπάρχουν αρκετές ρυθμίσεις. Κατά την προσαρμογή της εμφάνισης του παραθύρου modal, μπορείτε να δείτε αμέσως μια προεπισκόπηση του σχεδίου στα δεξιά:
Επεξεργασία θέματος - σχεδιασμός τροπικών/αναδυόμενων παραθύρων Μετά από όλες τις ρυθμίσεις για την εμφάνιση του παραθύρου, κάντε κλικ στο κουμπί Αποθήκευση στα δεξιά. Και τέλος, κυρίες και κύριοι, θα σας δείξω ένα παράδειγμα εμφάνισης της φόρμας επικοινωνίας της Φόρμας Επικοινωνίας 7 σε ένα παράθυρο τύπου.
Δημιουργήστε ένα νέο παράθυρο τύπου modal όπως φαίνεται παραπάνω και σε ένα πρόγραμμα επεξεργασίας κειμένου απλώς επικολλήστε τον σύντομο κωδικό της Φόρμας Επικοινωνίας 7 (εάν έχετε εγκαταστήσει αυτήν την προσθήκη, εάν όχι):
Δημιουργήστε τη Φόρμα Επικοινωνίας 7 σε ένα αναδυόμενο παράθυρο 
Κουμπί για να γράψετε στον συγγραφέα μετά το μήνυμα Εάν ο αναγνώστης θέλει να επικοινωνήσει μαζί σας, θα κάνει κλικ στο κουμπί και η φόρμα επικοινωνίας θα ανοίξει σε ένα παράθυρο τύπου:
Φόρμα επικοινωνίας με τον συγγραφέα σε ένα παράθυρο τρόπου λειτουργίας Κάτι τέτοιο. Επίσης, όλα τα αναδυόμενα παράθυρα που δημιουργήσατε θα εμφανιστούν στη σελίδα (στοιχείο Modals), όπου, παρεμπιπτόντως, υποδεικνύονται οι τάξεις για κάθε παράθυρο modal:
Δημιουργήθηκαν modal παράθυρα στο WordPress Γεια σας αγαπητέ αναγνώστη, σε αυτό το άρθρο θα σας δείξω πώς να δημιουργήσετε μια αναδυόμενη φόρμα επικοινωνίας στον ιστότοπό σας στο WordPress. Συχνά, κατά την ανάπτυξη του δικού σας ιστότοπου ή ιστολογίου, είναι απαραίτητο να καθιερωθεί η δυνατότητα γρήγορης επικοινωνίας με τους επισκέπτες σε έναν πόρο Διαδικτύου. Σε αυτήν την περίπτωση, μια αναδυόμενη φόρμα σχολίων για το WordPress θα σας φανεί χρήσιμη, καθώς θα σας βοηθήσει να δημιουργήσετε γρήγορη επαφή με τους χρήστες.
Γιατί χρειάζεστε μια αναδυόμενη φόρμα σχολίων για το WordPress Λόγοι για τη χρήση της;Ας δούμε γιατί χρειάζεται αυτή η φόρμα
Ένα πρόσθετο πλεονέκτημα: η φόρμα είναι εύκολο να τροποποιηθεί και να προσαρμοστεί ώστε να ταιριάζει στις ανάγκες του ιστότοπού σας. Μια αναδυόμενη φόρμα σχολίων για το WordPress μπορεί να παρουσιαστεί με τη μορφή ενός ανοίγματος παραθύρου για παραγγελία κλήσης, υπηρεσίας ή προϊόντος ή για συνδρομή. Εάν θέλετε, μπορείτε να προσθέσετε οπτικά εφέ, διάφορες εικόνες κ.λπ.
Πρόσθετα για την εγκατάσταση μιας αναδυόμενης φόρμαςΑς δούμε τα εργαλεία που χρειάζονται για την ανάπτυξη αναδυόμενων παραθύρων στο Wordpress, μια ειδική εφαρμογή για την ανάπτυξη και τη δημιουργία ιστοσελίδων.
Φόρμα Επικοινωνίας 7Αυτό το πρόσθετο χρησιμοποιείται απευθείας για το σχεδιασμό της φόρμας. Για να το εγκαταστήσετε, ακολουθήστε τα εξής βήματα:
Εύκολο FancyBox Αυτό το πρόσθετο είναι κατάλληλο για την ανάπτυξη ενός εφέ αναδυόμενου παραθύρου. Η σειρά εγκατάστασης του Easy FancyBox είναι παρόμοια με την προηγούμενη εγκατάσταση προσθήκης.
Μπορείτε να διαμορφώσετε τις ρυθμίσεις του πρόσθετου Easy FancyBox μέσω αρχείων πολυμέσων. Χρησιμοποιήστε τις επιλογές μενού "Ρυθμίσεις" -> "Αρχεία πολυμέσων".
Στο μπλοκ που ανοίγει, ακριβώς κάτω από τις τυπικές ρυθμίσεις, θα βρίσκονται οι παράμετροι του ίδιου του plugin. Συνήθως υπάρχει ένα σημάδι επιλογής δίπλα στο στοιχείο "Εικόνες", το οποίο υποδεικνύει ότι ένα αναδυόμενο παράθυρο θα ενεργοποιηθεί όταν κάνετε κλικ στην εικόνα. Συνιστάται να το αφαιρέσετε, καθώς εάν έχετε άλλα πρόσθετα εργαλεία για τη δημιουργία αναδυόμενων κινούμενων εικόνων, οι εικόνες θα ανοίξουν δύο φορές.
Αλλά δεν είναι μόνο αυτό. Επιλέξτε το πλαίσιο δίπλα στο "Ενσωματωμένο περιεχόμενο"
Οποιοσδήποτε μπορεί να εμβαθύνει στις ρυθμίσεις της προσθήκης και να τις ορίσει στη διακριτική του ευχέρεια.
Συμβουλή: εάν θέλετε η φόρμα να είναι πάντα ανοιχτή, καταργήστε την επιλογή "Κλείσιμο FancyBox όταν γίνεται κλικ στην επικάλυψη" στις ρυθμίσεις Easy FancyBox, η οποία κλείνει το παράθυρο όταν κάνετε κλικ έξω από αυτήν.
Οδηγία βήμα προς βήμαΛοιπόν, η "βαρετή" προκαταρκτική προετοιμασία τελείωσε, τώρα ας περάσουμε στο "νόστιμο" μέρος - πώς, στην πραγματικότητα, αναπτύσσεται η αναδυόμενη φόρμα σχολίων του WordPress.
Χειρισμός του παραθύρου φόρμαςΑπό πού ξεκινάμε; Φυσικά, με προκαταρκτική διαμόρφωση της ίδιας της φόρμας. Επιλέξτε «Φόρμα Επικοινωνίας 7» στο δεξί μενού και, στη συνέχεια, την επιλογή «Προσθήκη νέου».
Βρείτε ένα νέο όνομα για τη φόρμα, για παράδειγμα, "Πείραμα", πληκτρολογήστε το στο πεδίο εισαγωγής του παραθύρου που ανοίγει, όπου βρίσκεται το κείμενο "Τίτλος" και κάντε κλικ στο κουμπί "Αποθήκευση". Μπορείτε να αλλάξετε άλλες παραμέτρους, συμπεριλαμβανομένου του ίδιου του προτύπου φόρμας, αλλά δεν θα το αγγίξουμε. Τώρα ο κύριος στόχος μας είναι απλώς να μάθουμε πώς να δημιουργούμε αναδυόμενες φόρμες.
Ρίξτε μια ματιά στο αποτέλεσμα. Όπως μπορείτε να δείτε, το πρόσθετο δημιούργησε έναν ειδικό σύντομο κώδικα που χρησιμοποιείται για να εμφανίσει στη συνέχεια τη φόρμα. Πρέπει να το αντιγράψετε.
Τώρα ας πάμε στον προγραμματισμό. Ο νέος κώδικας προγράμματος μπορεί να εισαχθεί οπουδήποτε στον ιστότοπο, για παράδειγμα, στις "Επαφές" και σε άλλα. Στο παράδειγμά μας, η νέα φόρμα θα εμφανιστεί στο widget. Επιλέξτε «Εμφάνιση» στο μενού, κάντε κλικ στο «Γραφικά στοιχεία» και, στη συνέχεια, στο παράθυρο που ανοίγει, κάντε κλικ στην επιλογή «Κείμενο».
Τώρα κάντε κλικ στο κουμπί "Προσθήκη γραφικού στοιχείου".
Επικολλήστε τον ακόλουθο κώδικα στο πεδίο εισαγωγής περιεχομένου:
Γράψτε ένα γράμμα Κείμενο έναρξης Κείμενο λήξης
Έτσι θα μοιάζει το αποτέλεσμα:
Λάβετε υπόψη ότι αντί για τον σύντομο κωδικό που καθορίζεται στο παράδειγμα, θα χρειαστεί να καθορίσετε αυτόν που δημιουργήσατε ως αποτέλεσμα της δημιουργίας μιας νέας φόρμας.
Επιπλέον, η φόρμα μπορεί να επεξεργαστεί: προσθήκη ή αφαίρεση πεδίων εισαγωγής, εισαγωγή αρχικού και/ή τελικού κειμένου πριν και μετά τη φόρμα, μετατροπή του κειμένου σε τίτλο ή εμφάνιση ως ξεχωριστό μπλοκ, χρήση διαφορετικών στυλ, θέσεων κράτησης θέσης κ.λπ. Αν υπήρχε χρόνος και επιθυμία!
Στυλ συνδέσμωνΑς δούμε επίσης δύο τρόπους για να μετατρέψετε έναν σύνδεσμο σε κουμπί για να βελτιώσετε την οπτική του εμφάνιση.
Μέθοδος 1: Χρήση πρόσθετων στυλ θεμάτων.
Ο παρακάτω κώδικας μπορεί να εισαχθεί ως εξής:
Ο ίδιος ο κώδικας του προγράμματος μοιάζει με αυτό:
| 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 | /***Εμφάνιση συνδέσμου σε μορφή κουμπιού****/ .επικοινωνήστε μαζί μας a( margin:auto; /*ευθυγράμμιση του μπλοκ στο κέντρο*/ display:block; πλάτος:199px; /*button size*/ padding: 11px 22px ; κεντράρισμα της λεζάντας*/ color:#ffffff; έγχρωμοι σύνδεσμοι όταν τοποθετείτε τον κέρσορα**/ .contact-us a:hover( -moz-box-shadow: 0 0 7px #111; -webkit-box-shadow: 0 0 7px #111; box-shadow:0 0 7px #111 ; |
/***Εμφάνιση συνδέσμου σε μορφή κουμπιού****/ .επικοινωνήστε μαζί μας a( margin:auto; /*ευθυγράμμιση του μπλοκ στο κέντρο*/ display:block; πλάτος:199px; /*button size*/ padding: 11px 22px ; κεντράρισμα της λεζάντας*/ color:#ffffff; έγχρωμοι σύνδεσμοι όταν τοποθετείτε τον κέρσορα**/ .contact-us a:hover( -moz-box-shadow: 0 0 7px #111; -webkit-box-shadow: 0 0 7px #111; box-shadow:0 0 7px #111 ;
Το αποτέλεσμα είναι ένα κουμπί όπως αυτό:
Ο κώδικας λέει ήδη ποια παράμετρος είναι υπεύθυνη για τι. Τώρα ο καθένας μπορεί να επεξεργαστεί τον κώδικα σύμφωνα με τις προτιμήσεις του, πειραματιζόμενος με διαφορετικά στυλ και χρώματα για να δημιουργήσει τον πιο κατάλληλο σύνδεσμο για το αναδυόμενο παράθυρο.
Μέθοδος 2 - χρησιμοποιήστε μια εικόνα ως κουμπί. Αρχικά, ανεβάστε την απαιτούμενη εικόνα στον ιστότοπο (όποια εικόνα σας αρέσει, όχι απαραίτητα με τη μορφή κουμπιού - δεν έχει μεγάλη σημασία). Για να το κάνετε αυτό, κάντε κλικ στο "Media" -> "Add New" και επιλέξτε την εικόνα που θέλετε. Ένας μόνιμος σύνδεσμος προς το αρχείο θα εμφανιστεί στα δεξιά της εικόνας (σε αυτό το παράδειγμα http://www.sait.ru/wp-content/uploads/2017/04/depositphotos_2169498-E-mail-internet-icon.jpg) , αντιγράψτε το και προσθέστε το στον κώδικα (μην αφαιρείτε εισαγωγικά):
Προσθέστε τον κωδικό που προκύπτει στον κύριο κωδικό εξόδου της φόρμας αντί για το κείμενο "Γράψτε ένα γράμμα".
| 1 | 
|
Ο ιστότοπός μου εμφάνισε το κουμπί που φαίνεται στο παρακάτω στιγμιότυπο οθόνης:
Και έτσι θα μοιάζει το κουμπί εάν αφήσετε το πρόσθετο στυλ που περιγράφεται στην πρώτη μέθοδο:
Για να μπορεί να κληθεί η αναδυόμενη φόρμα σχολίων για το WordPress απευθείας από το μενού, πρέπει να χρησιμοποιήσετε τον ακόλουθο κώδικα
| 1 2 3 | |
Πρώτα πρέπει να υπολογίσετε πού ακριβώς πρέπει να εισαγάγετε αυτόν τον κωδικό. Μεταβείτε στο "Editor" μέσω του "Appearance" και ανάμεσα στα πρότυπα επιλέξτε "Header (header.php)"
Τώρα βρείτε το μέρος όπου βρίσκεται ο κωδικός μενού. Βρείτε τις ακόλουθες πληροφορίες:
| 1 2 |
Παρακάτω, επικολλήστε τον κωδικό σας λίγο πριν από την ετικέτα κλεισίματος.
Γενικά, δεν υπάρχει τίποτα δύσκολο να προσθέσετε μια φόρμα επικοινωνίας στον ιστότοπό σας, το κύριο πράγμα είναι να έχετε λίγο ελεύθερο χρόνο και την επιθυμία να μελετήσετε διεξοδικά όλες τις πτυχές. Τώρα ξέρετε τι είναι μια φόρμα επικοινωνίας, σε τι χρησιμεύει, πώς να τη χρησιμοποιήσετε στον ιστότοπο και πώς να επεξεργαστείτε έναν σύνδεσμο για να ανοίξετε ένα παράθυρο με ένα αναδυόμενο εφέ. Καλή τύχη σε εσάς και επιτυχία σε αυτή τη δύσκολη αλλά συναρπαστική επιχείρηση κατασκευής ιστοσελίδων.