Μόλις δείτε πόσο εύκολο είναι να συμπτύξετε κείμενο στο WordPress, μπορείτε να ανησυχείτε λιγότερο για το γέμισμα του ιστότοπού σας με κομμάτια περιεχομένου που επηρεάζουν την αναγνωσιμότητα.
Το πτυσσόμενο περιεχόμενο μπορεί να προστεθεί με εναλλαγή ή δημιουργώντας μενού ακορντεόν. Ορισμένα θέματα WP συνοδεύονται από προσαρμοσμένους συντομότερους κωδικούς για την εισαγωγή μενού ακορντεόν οπουδήποτε στον ιστότοπό σας.
Εάν το θέμα σας δεν υποστηρίζει πτυσσόμενο περιεχόμενο, μπορείτε να το προσθέσετε χειροκίνητα με πρόσθετα ή επεξεργάζοντας τα αρχεία θέματός σας.
Θα λειτουργήσει ακόμη και σε δωρεάν σχέδια WordPress.com, απλά χωρίς στυλ.
Πώς να συμπτύξετε κείμενο στο WordPress
Χρησιμοποιήστε πρόσθετα 'Ακορντεόν' ή πρόσθετα σύντομου κώδικα με τη λειτουργία 'ακορντεόν' ή 'εναλλαγή' για να συμπτύξετε κείμενο στο WordPress. Τα δωρεάν προγράμματα του WordPress.com μπορούν να κάνουν το περιεχόμενο πτυσσόμενο προσθέτοντας
Η διαφορά μεταξύ εναλλαγής και ακορντεόν στο WordPress
Οι λειτουργίες ακορντεόν και εναλλαγής είναι δύο μέθοδοι που λειτουργούν για τη σύμπτυξη κειμένου στο WordPress.
Η διαφορά μεταξύ του κειμένου εναλλαγής και του κειμένου ακορντεόν είναι αυτή…
- Με ένα στοιχείο ακορντεόν, όταν κάνετε κλικ σε μια ενότητα, φορτώνεται μόνο αυτή η ενότητα περιεχομένου. Όταν κάνετε κλικ στο επόμενο στοιχείο ακορντεόν, η προηγούμενη ενότητα κειμένου κλείνει αυτόματα.
- Με τη λειτουργία εναλλαγής, όλες οι πτυσσόμενες περιοχές περιεχομένου μπορούν να φορτωθούν και να παραμείνουν ανοιχτές. Τα πλαίσια περιεχομένου που εμφανίζονται με στοιχεία εναλλαγής δεν κλείνουν αυτόματα.
Σε μεγάλες σελίδες, το στοιχείο ακορντεόν είναι προτιμότερο, καθώς εμποδίζει τις οθόνες να γεμίσουν με ερωτήσεις για τις οποίες ο χρήστης δεν ενδιαφέρεται να διαβάσει.
Μπορούν να κάνουν κύλιση στους τίτλους σε μια σελίδα Συχνών Ερωτήσεων και, στη συνέχεια, όταν βρουν μια ερώτηση που θέλουν να απαντηθούν, μπορούν να κάνουν κλικ για να προβάλουν μόνο τη συγκεκριμένη ενότητα περιεχομένου.
Σκέψου το έτσι…
Αν θέλατε να μάθετε «πόσο είναι η παράδοση;», τι θα προτιμούσατε…
α) Μεμονωμένες γραμμές τίτλου με συγκεκριμένες ερωτήσεις σε ετικέτες επικεφαλίδων;
Ή
β) Κύλιση σε 80 ερωτήσεις και απαντήσεις μέχρι να βρεις αυτή που ήθελες;
Τα στοιχεία ακορντεόν κάνουν το περιεχόμενό σας πιο ευέλικτο.
4 τρόποι σύμπτυξης κειμένου στο WordPress
1. Χρησιμοποιήστε ένα μπλοκ Ακορντεόν στο Gutenberg Editor
Για όσους χρησιμοποιούν το νέο πρόγραμμα επεξεργασίας 'block' ή Gutenberg σε έναν αυτο-φιλοξενούμενο ιστότοπο WordPress, μπορούν να προστεθούν πρόσθετα ακορντεόν από την πλαϊνή γραμμή του προγράμματος επεξεργασίας μπλοκ.
Είναι η ίδια διαδικασία με την παλιά μέθοδο προσθήκης πρόσθετων για επέκταση της λειτουργικότητας του ιστότοπού σας. Απλώς πιο βολικό καθώς δεν χρειάζεται πλέον να μεταβείτε στο μενού προσθηκών για να προσθέσετε μια νέα προσθήκη.
Φορτώστε το πρόγραμμα επεξεργασίας μπλοκ, κάντε κλικ στο εικονίδιο + για να προσθέσετε ένα νέο μπλοκ και, στη συνέχεια, αναζητήστε 'ακορντεόν'.
Δεν υπάρχουν προεγκατεστημένα μπλοκ ακορντεόν. Πρέπει να προσθέσετε ένα πρόσθετο μπλοκ ακορντεόν.
Για τη δοκιμή μας, το πρόσθετο που προστέθηκε ήταν ' Ακορντεόν ' από το 'WPDeveloper'.
Η δυνατότητα προσθήκης προσθηκών από τον πίνακα εργαλείων επεξεργασίας μπλοκ WP προστέθηκε στην έκδοση 5.6 του WordPress.
Εάν εκτελείτε μια παλαιότερη έκδοση του WordPress, θα χρειαστεί να προσθέσετε την προσθήκη με τον τυπικό τρόπο.
Εναλλακτικά, ενημερώστε την έκδοση του WordPress στην πιο πρόσφατη διαθέσιμη.
Το πλεονέκτημα της χρήσης των νέων μπλοκ για περιεχόμενο τύπου ακορντεόν είναι ότι τα ερωτήματα JavaScript που απαιτούνται για την ενεργοποίησή του εκτελούνται μόνο όταν φορτώνεται το μπλοκ.
Κάποτε ήταν ότι η απόκρυψη των εικόνων σε ένα μενού ακορντεόν θα μπορούσε να βοηθήσει στην αύξηση της ταχύτητας του ιστότοπου. Τώρα, το WordPress έχει ενεργοποιημένο το 'τεμπέλικο φόρτωμα' από προεπιλογή. Ωστόσο, κάνει την παρουσίαση καλύτερη.
Για να συμπεριλάβετε εικόνες σε ενότητες διευρυμένου περιεχομένου, κάντε κλικ στις τρεις κάθετες κουκκίδες, επιλέξτε 'Επεξεργασία ως HTML' και προσθέστε τον πηγαίο κώδικα της εικόνας χρησιμοποιώντας την ακόλουθη συμβολοσειρά HTML
<img src="http://yoursite.com/wp-content/uploads/2021/09/your-image-title.jpg" alt="give it an alternative title" width="###" height="###">
Η διεύθυνση URL της εικόνας εμφανίζεται στη βιβλιοθήκη πολυμέσων σας.
2. Προσθέστε μια ενότητα ακορντεόν μόνο με HTML (απαιτείται σε δωρεάν προγράμματα WordPress.com)
Στα δωρεάν προγράμματα WordPress.com, υπάρχει ένα μειονέκτημα.
Δεν μπορείτε να εκτελέσετε ερωτήματα JavaScript και εσείς δεν μπορεί να εγκαταστήσει πρόσθετα WordPress είτε. Μπορείτε ακόμα να συμπτύξετε κείμενο μέσα στο πρόγραμμα επεξεργασίας κειμένου.
Ανοίξτε τη σελίδα ή την ανάρτησή σας σε λειτουργία επεξεργασίας και χρησιμοποιήστε το πρόγραμμα επεξεργασίας κειμένου. Όχι ο οπτικός επεξεργαστής.
Ο κωδικός για προσθήκη είναι
<details> <summary>Question 1</summary> <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p> </details>
(επαναλάβετε όσες φορές απαιτείται)
Το θετικό σε αυτό είναι ότι μπορείτε να το προσθέσετε χωρίς επιπλέον πρόσθετα και λειτουργεί και σε δωρεάν λογαριασμούς WordPress.com.
Καθώς είναι απλό HTML, το αποτέλεσμα είναι απλό κείμενο.
Για να συμπεριλάβετε στοιχεία στυλ σε ένα ακορντεόν ή στοιχεία εναλλαγής, χρησιμοποιήστε μια προσθήκη ή κωδικοποιήστε το πρότυπο θέματός σας.
Οι προσθήκες είναι απλούστερες, επομένως, αν δεν έχετε την καρδιά να επεξεργαστείτε τον κώδικα, χρησιμοποιήστε μια προσθήκη. Το πρόσθετο Ultimate Shortcodes έχει πολλά εικονίδια.
Για τους φοβερούς, συνεχίστε να διαβάζετε για οδηγίες σχετικά με τη σκληρή κωδικοποίηση του θέματός σας για να φορτώσετε ένα προσαρμοσμένο ακορντεόν διεπαφής χρήστη jQuery.
3. Χρησιμοποιήστε πρόσθετα για να συμπτύξετε κείμενο στο WordPress Classic Editor
Εκατομμύρια χρήστες WP εξακολουθούν να εργάζονται με τον κλασικό επεξεργαστή. Εάν το κάνετε, χρειάζεστε ένα συμβατό πρόσθετο.
Ένα από τα πιο απλά πρόσθετα στη χρήση είναι…
Ακορντεόν από την PickPlugins
Αυτό το πρόσθετο αγκιστρώνεται στη βιβλιοθήκη Font Awesome. Προσθέστε το εικονίδιο κώδικας HTML για οποιοδήποτε στοιχείο από το Font Awesome για να παρακάμψετε τα προεπιλεγμένα βέλη.
Μόλις εγκατασταθεί, προστίθεται ένα νέο μενού στην πλαϊνή γραμμή διαχειριστή. Κάντε κλικ στο «προσθήκη νέου» για να δημιουργήσετε όσα μενού ακορντεόν χρειάζεστε.
Το συμπτυγμένο κείμενο μπορεί να εμφανιστεί οπουδήποτε στον ιστότοπό σας που δέχεται HTML.
Αυτό μπορεί να είναι εντός αναρτήσεων, σελίδων και περιοχών γραφικών στοιχείων χρησιμοποιώντας το γραφικό στοιχείο HTML. Προσθέστε το widget, δώστε του έναν τίτλο, εισάγετε τον σύντομο κωδικό και εμφανίζεται το μενού ακορντεόν.
Το πλάτος του περιεχομένου προσαρμόζεται αυτόματα, ώστε να μην υπάρχει πρόβλημα με το CSS που απαιτείται για τον καθορισμό των μεγεθών εμφάνισης για διάφορες οθόνες.
Στο μενού ακορντεόν, μπορείτε να χρησιμοποιήσετε HTML και να εισαγάγετε εικόνες.
Παρά μόνο καταργήστε τις πρόσφατες αναρτήσεις στο WordPress , μπορείτε να προχωρήσετε περαιτέρω χρησιμοποιώντας αυτό το πρόσθετο ακορντεόν για να δημιουργήσετε ένα γραφικό στοιχείο με πλήρες στυλ για να εμφανίσετε το πιο δημοφιλές περιεχόμενό σας, λεπτομερείς οδηγούς, κορυφαίες κριτικές και οδηγούς αγοράς απευθείας σε ένα γραφικό στοιχείο ακορντεόν.
Με άλλα λόγια, σας δίνει καλύτερη χρήση του widget real estate σε ιστότοπους WordPress.
… Όλα αυτά αποφεύγοντας την ακαταστασία της περιοχής του widget της πλαϊνής γραμμής.
4. Προσθέστε ένα jQuery UI Accordion σε θέματα WordPress
Αυτή η διαδικασία είναι κάπως περίπλοκη επειδή το WordPress δεν επιτρέπει την εκτέλεση JavaScript μέσα στο αρχείο κεφαλίδας.
Αντίθετα, τα σενάρια JS είναι ήδη καταχωρημένα από προεπιλογή σε μια εγκατάσταση WordPress. Το μόνο που χρειάζεται να κάνετε είναι να «αγκιστρώσετε» σε αυτά.
Αν δεν αναπτύσσετε το δικό σας προσαρμοσμένο θέμα ή προσθήκη, δεν χρειάζεται να μάθετε πώς να συμπτύσσετε κείμενο στο WordPress χρησιμοποιώντας άγκιστρα WordPress.
Ωστόσο, δεν θα σας βλάψει να ξέρετε πώς γίνεται, γιατί τότε μπορείτε να κάνετε διορθώσεις εάν κάτι σταματήσει να λειτουργεί. Όπως μετά από α Ενημέρωση WordPress .
Οι προγραμματιστές θεμάτων WP χρησιμοποιούν αγκίστρια στον Κώδικα του WordPress για να αγκιστρωθούν σε πολλές από τις προκαταρκτικές βιβλιοθήκες.
Η συνάρτηση 'jQuery UI Accordion' είναι αυτή που εκτελείται για τη δημιουργία πτυσσόμενου κειμένου στο WP.
Τα σενάρια και τα αρχεία για σύμπτυξη κειμένου στο WordPress
Πρώτα, δημιουργήστε το αρχείο JavaScript.
Χρησιμοποιήστε ένα πρόγραμμα επεξεργασίας απλού κειμένου όπως το Σημειωματάριο και επικολλήστε το παρακάτω
//jQuery-ui-accordion
jQuery(document).ready(function($) {
$( "#accordion" ).accordion({
collapsible: true, active: false, heightStyle: "content"
});
});Αποθηκεύστε το αρχείο ως 'accordion.js'.
Τι κάνει αυτός ο κωδικός…
Η τελευταία γραμμή κώδικα είναι να κάνει όλα τα στοιχεία πτυσσόμενα.
Η ρύθμιση της κατάστασης 'ενεργού' σε ψευδή σημαίνει ότι ο χρήστης πρέπει να κάνει κλικ για να φορτώσει την ενότητα περιεχομένου. Ρυθμίζοντας αυτό το στοιχείο σε 'true' θα προφορτωθεί το πρώτο στοιχείο στην ενότητα ακορντεόν σας.
Το τελευταίο μέρος για το 'heightStyle: 'περιεχόμενο' σημαίνει ότι δεν υπάρχει σετ μέγιστου ύψους. Η ρύθμιση του σε 'περιεχόμενο' θα φορτώσει όλο το περιεχόμενο εντός του στοιχείου div χωρίς να χρειάζεται κύλιση προς τα κάτω ή κατά μήκος.
Στον παραπάνω κωδικό, το #accordion είναι για το 'div ID' και το .accordion είναι για 'div class'. Με αυτά που προστίθενται, όταν τοποθετείτε
<div ID="accordion"> and <div class="accordion">
… στο πρόγραμμα επεξεργασίας κειμένου σας, θα ενεργοποιηθεί το jQuery.
- Το [ # ] είναι ένα αναγνωριστικό
- [ . ] είναι μια τάξη
Πώς να προσθέσετε προσαρμοσμένα αρχεία JavaScript σε θέματα WP
Μεταβείτε στο cPanel σας, ανοίξτε το θέμα στο οποίο θέλετε να εκτελέσετε το σενάριο και, στη συνέχεια, αναζητήστε το φάκελο που ονομάζεται 'JS'. Εδώ μπορείτε να τοποθετήσετε τυχόν αρχεία JavaScript.
Ορισμένα θέματα θα έχουν το φάκελο στη ρίζα των αρχείων θεμάτων Διαδρομή αρχείου: Περιεχόμενο WP > Θέματα > Το θέμα σας > JS.
Άλλοι ενδέχεται να χρησιμοποιήσουν έναν υποφάκελο, όπως έναν φάκελο 'στοιχεία' εντός του φακέλου θεμάτων. Αυτό θα ακολουθούσε τη διαδρομή αρχείου: Περιεχόμενο WP > Θέματα > Το θέμα σας > Στοιχεία > JS.
Ο φάκελος για όλα τα αρχεία JavaScript είναι JS. Εάν το θέμα σας δεν έχει, δημιουργήστε ένα.
Ανοίξτε το φάκελο JS για το θέμα σας, κάντε κλικ στο 'upload file' και αποθέστε το αρχείο 'accordion.js'.
Επεξεργαστείτε το functions.php για να φορτώσετε το JavaScript
Αυτό το μέρος είναι να πει στο WordPress να φορτώσει το αρχείο JavaScript. Στις περισσότερες άλλες πλατφόρμες, αυτό γίνεται στο αρχείο κεφαλίδας. Καθώς το WordPress εκτελείται σε PHP, η JavaScript δεν μπορεί να φορτωθεί χρησιμοποιώντας την ετικέτα