Προσαρμόστε τη σελίδα αποτελεσμάτων αναζήτησης του WordPress με το GeneratePress και το GenerateBlocks

 

Η μηχανή αναζήτησης του WordPress είναι χάλια

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

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

Η εμφάνιση των αποτελεσμάτων μπορεί να βελτιωθεί λίγο με CSS και η ανταπόκριση με ένα δωρεάν πρόσθετο (με πληρωμένη έκδοση) όπως το Relevanssi (αν και θα τριπλασιάσει το βάρος της βάσης δεδομένων σας) ή αυτό εδώ που συνδέεται με την εξωτερική υπηρεσία Algolia (δωρεάν μέχρι 10.000 αιτήσεις αναζήτησης το μήνα).

Αλλά θα αφήσω το θέμα της απόδοσης για μια άλλη μέρα, καθώς ακόμα παλεύω με αυτό και θα ασχοληθώ με τις καθαρά αισθητικές μεταρρυθμίσεις χρησιμοποιώντας GeneratePress (GP) και GenerateBlocks (GB).

GeneratePress και GenerateBlocks

ΤοGP και το GB είναι ακόμα δύο εργαλεία από ένα νεαρό έργο και με πολλή ευχρηστία προς βελτίωση, το GB δεν προσφέρει την ίδια καμπύλη εκμάθησης που θα περιμένατε αν έρχεστε από τη χρήση builders όπως το Elementor ή παρόμοια.

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

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

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

Στοιχεία μπλοκ

Τα Blocks Elements, εφεξής Elements, προστέθηκαν τον Ιούλιο του 2020 στην έκδοση GeneratePress Premium 1.11.0. Μπορεί να χρησιμοποιηθεί ως ένα κανονικό άγκιστρο για να εισάγετε περιεχόμενο σχεδόν οπουδήποτε στο ιστολόγιό σας χωρίς να χρειάζεται να πειράξετε τον κώδικα.

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

Ας μπούμε στο θέμα.

Πρότυπο δομής

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

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

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

Elements de GeneratePress- Layout o diseño

Για τη συγκεκριμένη χρήση που μας αφορά, κατά την προσθήκη ενός νέου στοιχείου επιλέγουμε Design και πατάμε create.

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

Προσαρμόστε τη σελίδα αποτελεσμάτων αναζήτησης του WordPress με το GeneratePress και το GenerateBlocks

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

Μπορούμε επίσης να αποφασίσουμε ποια στοιχεία θέλουμε να αποκρύψουμε. Στην περίπτωσή μου θα χρησιμοποιήσω μόνο μία επιλογή για να κάνω χωρίς την πλαϊνή μπάρα, οπότε επιλέγω"Περιεχόμενο (Χωρίς πλαϊνές μπάρες)".

Προσαρμόστε τη σελίδα αποτελεσμάτων αναζήτησης του WordPress με το GeneratePress και το GenerateBlocks

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

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

Desactivar Elementos en GeneratePress

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

Προσαρμόστε τη σελίδα αποτελεσμάτων αναζήτησης του WordPress με το GeneratePress και το GenerateBlocks

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

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

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

Πρότυπο εμφάνισης

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

Εδώ αρχίζει η πραγματική εργασία προσαρμογής.

Δημιουργούμε ένα νέο στοιχείο, αυτή τη φορά ένα Block και του δίνουμε ένα περιγραφικό όνομα.

Προσαρμόστε τη σελίδα αποτελεσμάτων αναζήτησης του WordPress με το GeneratePress και το GenerateBlocks

Προσθέτουμε ένα δοχείο GenerateBlocks και μέσα σε αυτό το δοχείο τοποθετούμε ένα μπλοκ Query Loop.

Προσαρμόστε τη σελίδα αποτελεσμάτων αναζήτησης του WordPress με το GeneratePress και το GenerateBlocks

Και αυτό είναι που θα δούμε.

Προσαρμόστε τη σελίδα αποτελεσμάτων αναζήτησης του WordPress με το GeneratePress και το GenerateBlocks

Έχω επιλέξει το"Start blank" για να αναπαράγω την εγγενή δομή των αποτελεσμάτων, αλλά μπορείτε να επιλέξετε οποιοδήποτε από τα πρότυπα που προσφέρει αυτό το μπλοκ.

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

Προσαρμόστε τη σελίδα αποτελεσμάτων αναζήτησης του WordPress με το GeneratePress και το GenerateBlocks

Αφού επιλέξετε το πρότυπο, επιλέξτε το μπλοκ του βρόχου ερωτήσεων (1) και θα δείτε την καρτέλα "Block" στα δεξιά (2). Κάντε κλικ σε αυτό και τσεκάρετε την επιλογή"Inherit query from template" ( 3) στην ενότητα "Query parameters" (Παράμετροι ερωτήματος). Τέλος, στο κάτω μέρος, κάτω από τους "Κανόνες εμφάνισης"/"Θέση" (4) κάνουμε αναζήτηση και ορίζουμε "Αποτελέσματα αναζήτησης" και αποθηκεύουμε ως προσχέδιο.

Όταν ξεδιπλώσουμε το βρόχο του ερωτήματος θα δούμε αυτό:

Προσαρμόστε τη σελίδα αποτελεσμάτων αναζήτησης του WordPress με το GeneratePress και το GenerateBlocks

Προσθέτουμε ένα άλλο μπλοκ πλέγματος μέσα στο "Query Template" και επιλέγουμε τη δομή που θέλουμε.

Προσαρμόστε τη σελίδα αποτελεσμάτων αναζήτησης του WordPress με το GeneratePress και το GenerateBlocks

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

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

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

Τώρα ας αδειάσουμε αυτά τα δύο δοχεία.

Προσαρμόστε τη σελίδα αποτελεσμάτων αναζήτησης του WordPress με το GeneratePress και το GenerateBlocks

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

Προσαρμόστε τη σελίδα αποτελεσμάτων αναζήτησης του WordPress με το GeneratePress και το GenerateBlocks

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

Τώρα, με επιλεγμένο το πρώτο δοχείο, προσθέτουμε ένα μπλοκ εικόνας GenerateBlocks μέσα σε αυτό.

Προσαρμόστε τη σελίδα αποτελεσμάτων αναζήτησης του WordPress με το GeneratePress και το GenerateBlocks

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

Προσαρμόστε τη σελίδα αποτελεσμάτων αναζήτησης του WordPress με το GeneratePress και το GenerateBlocks

Επιλέγουμε και πάλι το δοχείο που περιέχει την εικόνα (1). Στο μενού του μπλοκ στα δεξιά κατεβαίνουμε στο "Ενεργοποίηση δυναμικών δεδομένων και το ενεργοποιούμε (2). Επιλέγουμε "Featured image" στο Background image source (3) και οι εικόνες θα εμφανιστούν στον επεξεργαστή.

Στην πηγή συνδέσμου επιλέγουμε "Ατομικός σύνδεσμος" (4) ώστε κάθε εικόνα να παραπέμπει στην αντίστοιχη ανάρτηση και αποθηκεύουμε ξανά ως προσχέδιο.

Προσαρμόστε τη σελίδα αποτελεσμάτων αναζήτησης του WordPress με το GeneratePress και το GenerateBlocks

Τώρα πηγαίνουμε στο δεύτερο δοχείο, το επιλέγουμε και προσθέτουμε ένα μπλοκ "Headline" από το GenerateBlocks.

Προσαρμόστε τη σελίδα αποτελεσμάτων αναζήτησης του WordPress με το GeneratePress και το GenerateBlocks

Επιλέγουμε το μπλοκ "Headline" (1) με ενεργοποιημένα τα δυναμικά δεδομένα (2) και επαναλαμβάνουμε την προηγούμενη διαδικασία (3), αλλά αυτή τη φορά επιλέγουμε "Title" ως πηγή του περιεχομένου (4) και ατομική καταχώρηση στην πηγή του συνδέσμου (5)

Προσαρμόστε τη σελίδα αποτελεσμάτων αναζήτησης του WordPress με το GeneratePress και το GenerateBlocks

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

Προσαρμόστε τη σελίδα αποτελεσμάτων αναζήτησης του WordPress με το GeneratePress και το GenerateBlocks

Αφού προστεθεί, επαναλαμβάνουμε ξανά την ίδια διαδικασία. Με επιλεγμένο αυτό το νέο μπλοκ (1) ενεργοποιούμε τα δυναμικά δεδομένα (2) και ως πηγή των δεδομένων (3) την τρέχουσα καταχώρηση και την πηγή του περιεχομένου "Απόσπασμα" (4). Τώρα μπορείτε επίσης να ορίσετε το μήκος του αποσπάσματος σε λέξεις (5).

Προσαρμόστε τη σελίδα αποτελεσμάτων αναζήτησης του WordPress με το GeneratePress και το GenerateBlocks

Τέλος, θα προσθέσουμε την σελιδοποίηση, η οποία θα εμφανίζεται κάτω από τα αποτελέσματα. Για να το κάνετε αυτό, επιλέξτε το μπλοκ βρόχου ερωτήματος (1) και κάντε κλικ στο μικρό σύμβολο + με τις τελείες που θα βρείτε στη γραμμή επεξεργασίας (2).

Προσαρμόστε τη σελίδα αποτελεσμάτων αναζήτησης του WordPress με το GeneratePress και το GenerateBlocks

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

Προσαρμόστε τη σελίδα αποτελεσμάτων αναζήτησης του WordPress με το GeneratePress και το GenerateBlocks

Θα το αφήσω εδώ για να μην επεκτείνω πολύ αυτή τη δημοσίευση.

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

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

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

Πολλές δυνατότητες προσαρμογής

Προσαρμόστε τη σελίδα αποτελεσμάτων αναζήτησης του WordPress με το GeneratePress και το GenerateBlocks

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

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

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

Όλα αυτά χωρίς να βγείτε από τον επεξεργαστή και χωρίς να χρειαστεί να πειράξετε τα CSS ή να αγγίξετε τα αρχεία του προτύπου σας.

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

Επιπλέον μπάλα: Αν χρειαστεί να προσθέσετε το τυπικό"Εμφάνιση (αριθμού) αποτελεσμάτων για: ( αναζητούμενηλέξη )" στα αποτελέσματα, εδώ μπορείτε να βρείτε τον απαραίτητο κώδικα κώδικα και οδηγίες για να το κάνετε να λειτουργήσει με το μπλοκ Query Loop, χάρη στον David από την υποστήριξη της GB


Suscríbete por email para recibir las viñetas y los artículos completos y sin publicidad

Artículos relacionados

Este blog se aloja en LucusHost

LucusHost, el mejor hosting