Πώς να προσθέσετε κουμπί στο πρόγραμμα επεξεργασίας WordPress [εκμάθηση]

Πώς να προσθέσετε κουμπί στο πρόγραμμα επεξεργασίας WordPress [εκμάθηση]

Γιατί είναι τόσο σημαντικό το μπλοκ κουμπιών του WordPress;

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

Βασικά έχουμε 2 επιλογές. Χρήση τυπικού συνδέσμου ή κουμπιού. Οι απόψεις σχετικά με το πότε πρέπει να χρησιμοποιηθεί η πρώτη και η δεύτερη επιλογή είναι διάφορες. Είναι σύνηθες το γεγονός ότι σε μια σελίδα υπάρχουν πολλαπλές πιθανές ενέργειες. Πρέπει να βεβαιωθούμε ποια είναι η πρωταρχική και ποια η δευτερεύουσα. Σας συνιστούμε να χρησιμοποιείτε κουμπί μόνο για την πρωταρχική ενέργεια. Με αυτόν τον τρόπο επιτυγχάνετε μεγαλύτερη ορατότητα αυτής της πρωτογενούς ενέργειας. Θα εστιάσετε την προσοχή των επισκεπτών σε αυτή την ενέργεια. Μπορούμε επίσης να το ονομάσουμε κουμπί κλήσης προς δράση. Μην δημιουργείτε πάρα πολλά κουμπιά σε μια υποσελίδα.

Ποιες είναι οι κύριες λειτουργίες των κουμπιών;

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

Υπάρχουν πολλές παράμετροι που καθορίζουν την επιτυχία των κουμπιών. Σημαντικό είναι για παράδειγμα το μέγεθος, η τοποθέτηση ή το χρώμα του κουμπιού. Είναι απαραίτητο να ακολουθούνται οι τυπικές αρχές UI και UX. Το πράσινο χρώμα χρησιμοποιείται για κουμπιά με θετική ενέργεια, για παράδειγμα για να αγοράσετε κάτι. Το κόκκινο χρώμα είναι για αρνητική - για παράδειγμα για να διαγραφείτε από το ενημερωτικό δελτίο. Τα σωστά σχεδιασμένα κουμπιά με αυτόν τον τρόπο επηρεάζουν άμεσα τις ενέργειες των επισκεπτών.

Προσθήκη κουμπιού σε οποιαδήποτε σελίδα ή ανάρτηση στο WordPress

Κατάσταση πριν από το WordPress 5

Η προσθήκη κουμπιών ήταν αρκετά περίπλοκη διαδικασία πριν εφευρεθεί ο επεξεργαστής μπλοκ του WordPress. Επειδή αυτό το χαρακτηριστικό δεν ήταν φυσικά στο WordPress. Θα μπορούσατε να χρησιμοποιήσετε θέμα με Page Builder ή plugin τρίτου μέρους. Οι shortcodes δημιουργούν κουμπιά σε αυτή την περίπτωση.

Στα παλαιότερα θέματα WordPress μπορείτε να προσθέσετε κουμπί χρησιμοποιώντας συντομεύσεις στον οπτικό επεξεργαστή. Αφού κάνετε κλικ στην επιλογή Εισαγωγή σύντομου κώδικα -> Κουμπί μπορείτε να ορίσετε διάφορες ρυθμίσεις στο παράθυρο modal. Κείμενο, χρώμα κειμένου, χρώμα κουμπιού, url, ευθυγράμμιση και ούτω καθεξής. Χάρη σε αυτές τις προηγμένες ρυθμίσεις μπορείτε να προσθέσετε κουμπί αρκετά εύκολα και γρήγορα χωρίς προγραμματισμό.

Προσθήκη κουμπιού μέσω shortcodes
Προσθήκη κουμπιού μέσω shortcodes πριν από την απελευθέρωση του block editor

Πώς να χρησιμοποιήσετε το μπλοκ κουμπιών στον επεξεργαστή του WordPress;

Χάρη στο WordPress 5 υπάρχει δεύτερος τρόπος. Πολύ πιο εύκολος. Ο οπτικός επεξεργαστής του WordPress φέρνει πολλά χρήσιμα μπλοκ. Για να δημιουργήσετε ένα κουμπί στον ιστότοπο μπορείτε τώρα να χρησιμοποιήσετε το μπλοκ WordPress Button στον επεξεργαστή.

Βήμα-βήμα οδηγός για το πώς να προσθέσετε κουμπί στον επεξεργαστή του WordPress

1. Αρχικά πρέπει να αποφασίσετε πού θέλετε να τοποθετήσετε το κουμπί
2. Το μπλοκ κουμπιών μπορεί να προστεθεί με διάφορους τρόπους:
- κάνοντας κλικ στο "+" στην επάνω μπάρα ή οπουδήποτε στον επεξεργαστή μπλοκ όπου επιλέγετε το μπλοκ Button

Προσθήκη κουμπιού κάνοντας κλικ στο "+"
Προσθήκη μπλοκ κουμπιών κάνοντας κλικ στο "+"
Προσθήκη κουμπιού μέσω της γραμμής αναζήτησης
Προσθήκη μπλοκ κουμπιών μέσω της γραμμής αναζήτησης
Προσθήκη μπλοκ κουμπιών μέσω της κάθετης
Προσθήκη μπλοκ κουμπιών με χρήση της κάθετης "/"

- μπορείτε επίσης να βρείτε οποιοδήποτε μπλοκ χρησιμοποιώντας τη γραμμή αναζήτησης, απλά γράψτε "κουμπί"

- πληκτρολογώντας "/" που σας δίνει πρόσβαση σε όλα τα διαθέσιμα μπλοκ

3. Το μπλοκ Button μπορεί να διαμορφωθεί περαιτέρω

Προσθήκη κειμένου κουμπιού και διεύθυνσης URL

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

Κουμπί editation
Μέσα σε λίγα δευτερόλεπτα μπορείτε να αλλάξετε εντελώς την εμφάνιση του κουμπιού σας.

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

Αλλαγή χρώματος κουμπιών

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

Αλλαγή χρώματος κουμπιών
Άμεση αλλαγή χρώματος κουμπιού μετά από κλικ στο επιλεγμένο χρώμα

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

Βρείτε το δικό σας στυλ κουμπιών

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

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

Επεξεργασία κουμπιού με προσαρμοσμένο CSS

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

Προσαρμοσμένη είσοδος κλάσης
Εισάγετε προσαρμοσμένη κλάση για το στυλ του κουμπιού σας

Όπως βλέπουμε υπάρχει πολύ πιο εύκολος τρόπος από τη χρήση του shortcode κουμπιού. Το μπλοκ κουμπιών WordPress μπορεί να χρησιμοποιηθεί σε οποιοδήποτε θέμα που είναι συμβατό με τον επεξεργαστή μπλοκ WordPress. Διαβάστε περισσότερα για το ολοκαίνουργιο θέμα μας Citadela WordPress. Είναι ειδικά σχεδιασμένο και αναπτυγμένο για το WordPress Block Editor.

Πρόσθετη συμβουλή στο τέλος

Μην ξεχνάτε να παρακολουθείτε το μπλοκ κουμπιών του WordPress και την επιτυχία του ίδιου του κουμπιού. Εάν χρησιμοποιείτε το Google Analytics, μπορείτε να δημιουργήσετε μια μοναδική διεύθυνση URL. Για να παρακολουθείτε τα κλικ των επισκεπτών μπορείτε να προσθέσετε Παράμετρος Google UTM. Η διεύθυνση URL μπορεί να δημιουργηθεί με τη χρήση του URL builder. Η προσθήκη παραμέτρων σας επιτρέπει να προσδιορίσετε την πηγή της επίσκεψης. Είναι πολύ χρήσιμο αν θέλετε να γνωρίζετε από πού ήρθαν οι επισκέπτες στη σελίδα αγορών σας.

Ποιο είναι το μεγαλύτερο πρόβλημα που έχετε σήμερα με το μπλοκ κουμπιών του WordPress; Ας συζητήσουμε στα σχόλια παρακάτω. Μοιραστείτε την εμπειρία σας με τη χρήση των κουμπιών στον ιστότοπο.

4 σκέψεις σχετικά με το "How to add button in WordPress editor [tutorial]"

  1. Ευχαριστώ που μοιράζεστε αυτό το σεμινάριο. Μπορείτε επίσης να με καθοδηγήσετε πώς μπορώ να δημιουργήσω ένα πρότυπο μπλοκ; Κάνω το ίδιο χρησιμοποιώντας αυτόν τον πόρο https://wpitech.com/create-wordpress-gutenberg-block-templates/ αλλά δίνει ένα σφάλμα και έχω κάποιες γραμμές προγραμματισμού στο front end. Αυτός είναι ο κώδικας
    add_action( 'init', function() {
    $args = array(
    'public' => true,
    'label' => 'Νέα',
    'show_in_rest' => true,
    'template_lock' => 'all',
    'template' => array(
    array( 'core/paragraph', array(
    'placeholder' => 'Breaking News',

  2. Ξέρετε αν υπάρχει τρόπος να καταρρεύσει το περιεχόμενο με ένα κουμπί χωρίς να κατεβάσετε ένα πρόσθετο; Βασικά χρησιμοποιώ wordpress.com premium, όχι business οπότε το κατέβασμα των plugins δεν είναι πραγματικά εύκολη επιλογή.

    Ευχαριστώ!

    1. Γειά σου,

      ευχαριστώ που ρωτάτε. Θα πρέπει να ρωτήσετε άμεσα την ομάδα υποστήριξης wordpress.com αν θα μπορούσαν να προσφέρουν κάποια λύση για την επίλυση του προβλήματός σας. Με εκτίμηση!
      Ζλάτκο
      Ομάδα AIT

Τα σχόλια είναι κλειστά.