Χρησιμοποιήστε τη μηχανή προσαρμοσμένης αναζήτησης της Google στο θέμα GeneratePress WordPress

Υπάρχουν δύο λόγοι για τους οποίους μπορεί να θέλετε να αλλάξετε την προεπιλεγμένη αναζήτηση WordPress σε Google Custom Search Engine στο GeneratePress Theme.

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

Βήματα για την προσθήκη Προσαρμοσμένης αναζήτησης Google

• Προσθέστε μια νέα σελίδα με τίτλο “Αποτελέσματα αναζήτησης” και permalink “search” στο WordPress σας.
• Noindex σελίδα αποτελεσμάτων αναζήτησης ακολουθώντας τις οδηγίες από το πρόσθετο SEO σας.

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

<gcse:search enablehistory="false"></gcse:search>

• Συνδεθείτε στον ιστότοπο CSE
• Προσθέστε μια νέα μηχανή αναζήτησης

• Δώστε τη διεύθυνση URL του ιστότοπου σε μορφή μπαλαντέρ για να εμφανιστεί στα αποτελέσματα αναζήτησης.
• Φροντίστε για www ή non-www σύμφωνα με το canonical σας 😉

• Συγχαρητήρια! Δημιουργήσατε με επιτυχία την Προσαρμοσμένη μηχανή αναζήτησης.
• Πηγαίνετε στον Πίνακα Ελέγχου

• Πηγαίνετε στο “Look and Feel”
• Επιλέξτε Διάταξη δύο σελίδων
• 💾 Αποθήκευση & Αποκτήστε τον κωδικό

Διαμόρφωση παραμέτρων URL αναζήτησης

• Στις Διαφορές αποτελεσμάτων αναζήτησης, ορίστε τη διεύθυνση URL της σελίδας αποτελεσμάτων αναζήτησης και την παράμετρο ερώτησης.

• Κάντε κλικ στο κουμπί Save & Get Code. Θα δείτε τον κωδικό αποτελεσμάτων αναζήτησης. Αγνοήστε το τμήμα Div, που έχουμε ήδη προσθέσει στο πρώτο βήμα. Απλά αντιγράψτε την JavaScript. Θα τη χρησιμοποιήσουμε με το Hook.

Ρύθμιση κώδικα μέσα στο WordPress

• Ενεργοποιήστε την ενότητα Elements η οποία είναι διαθέσιμη στο GeneratePress Premium.

• Δημιουργήστε ένα νέο Hook

• Ονομάστε το ‘Custom Search Engine (English)’ και επικολλήστε το JS που αντιγράψατε στο βήμα 7.

• Τοποθετήστε τον κώδικα JS που αντιγράψατε στο βήμα 9. από το Google Custom Search Engine. Έχω προσθέσει το τμήμα preload για να φορτώσω γρήγορα το JS στο πρόγραμμα περιήγησης. Φροντίστε να αντικαταστήσετε το ID του εκδότη.

<link rel="preload" href="https://cse.google.com/cse.js?cx=partner-pub-XXXXXXXXXXX:YYYYYYYY" as="script">
<script async src="https://cse.google.com/cse.js?cx=partner-pub-XXXXXXXXXXX:YYYYYYYY"></script>

• Χρησιμοποιήστε το άγκιστρο wp_head με την υψηλότερη τιμή προτεραιότητας 0 για να διασφαλίσετε ότι το σενάριο θα τοποθετηθεί στο κορυφαίο τμήμα της επικεφαλίδας στην HTML.
• Όσον αφορά την απόδοση, μπορούμε να ορίσουμε Κανόνες εμφάνισης για να φορτώνουμε αυτό το JS μόνο στη σελίδα Αποτελέσματα αναζήτησης του WordPress όπου πραγματικά απαιτείται και σε μη άλλη σελίδα.

Απόκρυψη διαφήμισης των προσαρμοσμένων αποτελεσμάτων αναζήτησης της Google

• Ομοίως, χρησιμοποιώντας ένα νέο Hook προσθέστε το παρακάτω inline CSS για καλό σχεδιασμό της σελίδας αποτελεσμάτων αναζήτησης. Θα αποκρύψει την ενοχλητική διαφήμιση και στην δωρεάν έκδοση.

<style>
/* Google search results */
.gs-webResult {
border: 0px solid #eee;
padding: 1em;
}
/* Do no display the count of search results */
.gsc-result-info {
display: none;
}
/* Hide the Google branding in search results */
.gcsc-branding {
display: none;
}
/* Hide the thumbnail images in search results */
.gsc-thumbnail {
display: none;
}
/* Hide the snippets in Google search results */
.gs-snippet {
font-size: 16px;
}
/* Change the font size of the title of search results */
.gs-title a {
font-size: 18px !important;
text-decoration: none !important;
}
.gs-webResult div.gs-visibleUrl-long {
font-size: 16px !important;
}
/* Change the font size of snippets inside search results */
.gs-title b, .gs-snippet b {
font-weight: normal;
}
/* Highlight the pagination buttons at the bottom of search results */
.gsc-cursor-page {
font-size: 1.3em;
padding: 4px 8px;
border: 2px solid #ccc;
}
.gsc-adBlockVertical, .gsc-adBlock {
/* this hides both the top and right ad blocks*/
display: none !important;
}
.gsc-thinWrapper {
/* this gives you use of the whole block, as opposed to 69% google gives*/
width: 100%;
}
.gsc-result-info-container {
display: none;
}
td.gsc-twiddleRegionCell.gsc-twiddle-opened {
display: none;
}
td.gsc-configLabelCell {
display: none;
}
.gsc-above-wrapper-area {
border-bottom: 0px solid #E9E9E9!important;
padding: 0px!important;
}
.gsc-resultsRoot.gsc-tabData.gsc-tabdActive table {
margin-bottom: 0px !important;
}
.gsc-resultsRoot.gsc-tabData.gsc-tabdActive tbody {
border-bottom: 0px solid #ddd !important;
}
.gsc-result .gs-title {
height: 1.5em !important;
}
.gs-webResult.gs-result a.gs-title:link, .gs-webResult.gs-result a.gs-title:link b, .gs-imageResult a.gs-title:link, .gs-imageResult a.gs-title:link b {
border-bottom: 0px solid #4199FB;
}
.gs-webResult {
border: 0px solid #eee !important;
padding: 0em !important;
}
.cse .gsc-control-cse, .gsc-control-cse {
margin-top: 18px !important;
}
div.gcsc-branding {
display: none;
}
.cse .gsc-control-cse, .gsc-control-cse {
padding-top: 0 !important;
padding-bottom: 30px !important;
}
.gsc-webResult .gsc-result {
padding: 0px 0 10px 0 !important;
}
table.gsc-search-box td {
border: 0px !important;
}
.gsc-input-box table {
margin: 0px ;
}
.gcsc-find-more-on-google {
display: none !important;
}
.gsib_a {
padding: 9px 9px 9px 9px !important;
}
.cse .gsc-search-button-v2, .gsc-search-button-v2 {
border-color: #da0000 !important;
background-color: #da0000 !important;
padding: 10px 19px 10px 19px !important;
}
button.gsc-search-button.gsc-search-button-v2 svg {
width: 18px;
height: 13px;
}
.gsc-input-box {
padding-top: 0px !important;
padding-bottom: 0px !important;
}
.cse .gsc-control-cse, .gsc-control-cse {
padding: inherit !important;
}
</style>

Γνωρίζουμε ότι το WordPress εμφανίζει αποτελέσματα αναζήτησης σε https://www.gulshankumar.net/gr/?s=query

Ως εκ τούτου, είναι σημαντικό να αλλάξετε τη διαδρομή δράσης για το πλαίσιο Αναζήτηση και το Yoast πρόσθεσε σήμανση JSON-LD για την Αναζήτηση Ιστοσελίδας. Θα πρέπει να τοποθετήσετε το παρακάτω απόσπασμα χρησιμοποιώντας το πρόσθετο Code Snippet.

// Change Search path in the GeneratePress Theme
add_filter( 'generate_navigation_search_output', function() {
printf( 
'<form method="get" class="search-form navigation-search" action="%1$s">
<input type="search" placeholder=" Search" class="search-field" value="%2$s" name="q" title="%3$s" />
</form>', 
esc_url( home_url( '/search/' ) ), 
esc_attr( get_search_query() ), 
esc_attr_x( 'Search', 'label', 'generatepress' ) 
); 
} );
// Other theme? Use Real Time Find and Replace Plugin

Σωστή διαδρομή JSON

// For Yoast SEO
function yst_change_json_ld_search_url() {
return trailingslashit( home_url() ) . 'search/?q={search_term_string}';
}
add_filter( 'wpseo_json_ld_search_url', 'yst_change_json_ld_search_url' );

// For Rankmath
function gk_change_json_ld_search_url() {
return trailingslashit( home_url() ) . 'search/?q={search_term_string}';
}
add_filter( 'rank_math/json_ld/search_url', 'gk_change_json_ld_search_url' );

Εμφάνιση του τίτλου και της επικεφαλίδας της σελίδας σύμφωνα με το ερώτημα αναζήτησης

Χάρη στον James Hibbard που μου παρείχε το παρακάτω απόσπασμα το οποίο βασίζεται στο URLSearchParams. Αυτό θα πρέπει να λειτουργεί για όλα τα σύγχρονα προγράμματα περιήγησης.

Φροντίστε να τοποθετήσετε το σενάριο με το άγκιστρο wp_footer χρησιμοποιώντας το GeneratePress Elements ειδικά για τη σελίδα “Αποτελέσματα αναζήτησης” που δημιουργήσαμε στο πρώτο βήμα.

<script>
const queryString = window.location.search;
const urlParams = new URLSearchParams(queryString);
const searchTerm = urlParams.get('q');
if (searchTerm) {
    const heading = document.querySelector('h1');
    const title = document.querySelector('title');
    heading.textContent = `Search Results for ${searchTerm}`;
    title.textContent = `Search Results for ${searchTerm}`;
}
</script>

Τώρα μπορείτε να δείτε το ερώτημα αναζήτησης στον τίτλο και την επικεφαλίδα.

Συχνές ερωτήσεις

Ευχαριστώ για την ανάγνωση.