Jak zintegrować silnik wyszukiwarki Google z WordPress?

Im bardziej rozbudowana strona, tym większego znaczenia nabiera możliwość efektywnego wyszukiwania treści. WordPress posiada wbudowaną wyszukiwarkę, lecz jej mechanizm ma kilka zasadniczych wad i od lat jest powodem do narzekań. A gdyby tak skorzystać z pomocy silnika Google?

Dlaczego warto pomyśleć o zmianie silnika wyszukiwarki?

Główne wady wytykane wbudowanej w WordPressa wyszukiwarce to:

• wyniki sortowane są wg daty publikacji, a nie trafności względem zapytania;
• mechanizm wyszukiwania nie jest dopracowany a trafność wyników często pozostawia wiele do życzenia (nie dorównuje Google);
• interfejs nie jest przyjazny dla użytkownika: nie pogrubia wyszukiwanych fraz w wynikach, nie pokazuje ilości wyników, ilość wyników na stronę jest ograniczona standardowym ustawieniem ilości wpisów na stronę.

Zastąpienie standardowej wyszukiwarki silnikiem Google rozwiązuje wszystkie powyższe problemy, chociaż nie jest pozbawione pewnych wad. Przyjrzyjmy się im nieco bliżej:

Zalety:

• lepsza jakość wyników wyszukiwania w porównaniu do wbudowanej wyszukiwarki;
• użytkownicy są przyzwyczajeni do korzystania z interfejsu Google;
• możliwość połączenia z Google AdSense w celu generowania przychodu z reklam;
• możliwość śledzenia zapytań w Google Analytics.

Wady:

• nowe wpisy nie pojawiają się w wynikach wyszukiwania natychmiast po publikacji, ale dopiero po zindeksowaniu ich przez Google, a to może zająć trochę czasu;
• w darmowej wersji wyszukiwarki wyświetlane są reklamy Google (ceny płatnej wersji zaczynają się od $100 /rok).

Konfigurujemy własną wyszukiwarkę

Zaczynamy od wizyty na stronie usługi, gdzie skonfigurujemy naszą wyszukiwarkę i wygenerujemy kod, który następnie wstawimy na stronę. Warto zaznaczyć, że aby móc korzystać z usługi własnej wyszukiwarki (Custom Search Engine) musimy mieć konto Google (np. w usłudze Gmail).

Proces składa się z trzech kroków i zajmie nam zaledwie kilka minut:

Krok 1. „Skonfiguruj swoją wyszukiwarkę”

W pierwszym kroku ustawiamy nazwę, opis i język naszej wyszukiwarki. Następnie wpisujemy adres strony, lub stron, które mają być przeszukiwane. Ostatnia opcja to wybór wersji przeglądarki – darmowa, w której wyświetlane będą reklamy Google, lub płatna.

Krok 1. „Skonfiguruj swoją wyszukiwarkę”

Krok 2. „Wygląd”

W drugim kroku definiujemy wygląd wyszukiwarki. Do wyboru mamy siedem stylów. Ich wygląd i działanie wyszukiwarki możemy od razu przetestować poniżej (sekcja „Wypróbuj wyszukiwarkę”).

Krok 2. „Wygląd”

Krok 3. „Pobierz kod”

To już w zasadzie koniec kreatora. Na tym etapie mamy już wygenerowany kod, ale zanim wstawimy go na stronę dokonamy jeszcze kilku zmian. W tym celu klikamy w link „Zmień kartę wygląd i styl”, który znajduje się w dolnej części ekranu.

Krok 2. „Wygląd / Wybierz układ”

Spośród dostępnych opcji układu wybieramy „Dwie strony”, ponieważ chcemy mieć możliwość wyświetlania formularza wyszukiwania na wszystkich podstronach serwisu, niezależnie od wyników – np. umieszczając formularz wyszukiwania w sidebarze. Jeśli nie chcesz korzystać z formularza wyszukiwania dostarczanego przez Google, wybierz układ „Tylko wyniki”. Dzięki temu będziesz mógł wykorzystać standardowy formularz wyszukiwania oferowany przez WordPress. Więcej informacji na temat opcji układu można znaleźć na blogu Google.

W lewej kolumnie znajduje się panel sterowania, za pomocą którego możemy również zmodyfikować inne parametry wyszukiwarki, np. połączyć ją z naszym kontem AdSense oraz Google Analytics.

Teraz pozostaje nam tylko pobrać kod i wstawić go na naszą stronę. Klikamy więc „Zapisz i pobierz kod” na dole strony.

Krok 3. „Pobierz kod / Określ szczegóły wyników wyszukiwania”

Zostaniemy jeszcze poproszeni o podanie adresu podstrony, na której będziemy wyświetlać wyniki wyszukiwania. Pole parametru wyszukiwania zostawiamy bez zmian. Jeśli jednak zdecydowałeś się w poprzednim kroku na układ „Tylko wyniki” musisz zmienić domyślną wartość „q”, na „s” ponieważ takiego parametru używa standardowy formularz WordPress.

Po dokonaniu zmian musimy pamiętać aby kliknąć „Zapisz zmiany”.

Google wygeneruje dla nas dwa fragmenty kodu. Pierwszy z nich to kod odpowiedzialny za wyświetlanie formularza wyszukiwania, drugi odpowiada za wyświetlanie wyników.

Oba fragmenty składają się z dwóch części. Pierwsza z nich jest identyczna w obu przypadkach – jest to kod, który należy dodać do nagłówka tuż przed zamykającym znacznikiem </head>. Możemy tego dokonać na dwa sposoby – edytując bezpośrednio plik header.php lub za pośrednictwem pliku functions.php (w obu przypadkach warto wziąć pod uwagę opcję stworzenia motywu potomnego).

Integracja z WordPressem

Mamy już wygenerowany kod nowej wyszukiwarki. Musimy teraz zintegrować ją z naszym WordPressem. To również wymaga wykonania trzech kroków:

Krok 1. Dodanie kodu JavaScript do nagłówka

Aby dodać kod do nagłówka podepniemy się pod funkcję wp_head, która wywoływana jest standardowo tuż przed znacznikiem </head>.

Poniższy fragment należy wstawić do pliku functions.php, zastępując przykładowy kod własnym (wszystko co znajduje się pomiędzy znacznikami <script></script>):

add_action( 'wp_head', 'my_google_search_code' );

function my_google_search_code(){
?>
<script>
   (function() {
      var cx = '007103709377924233982:745ufxa9zhw';
      var gcse = document.createElement('script'); gcse.type = 'text/javascript'; gcse.async = true;
      gcse.src = (document.location.protocol == 'https:' ? 'https:' : 'http:') + '//www.google.com/cse/cse.js?cx=' + cx;
      var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(gcse, s);
   })();
</script>
<?php
}

Krok 2. Stworzenie strony z wynikami wyszukiwania

Wyniki wyszukiwania będziemy wyświetlać na osobnej podstronie (jej adres podaliśmy tuż przed pobraniem kodu). Na potrzeby tej strony stworzymy osobny szablon, do którego wstawimy fragment kodu od Google. Najprostszym rozwiązaniem jest skopiowanie domyślnego szablonu strony w naszym motywie, czyli pliku page.php i zapisanie go pod nową nazwą, np. search-results.php.

Edycję zaczynamy od nagłówka, dzięki któremu WordPress rozpozna plik jako szablon strony:

<?php /* Template Name: Wyniki wyszukiwania */ ?>

Następnie musimy zmodyfikować bazowy szablon usuwając niepotrzebne fragmenty. Jako że treścią strony będą wyniki wyszukiwania generowane przez Google, możemy usunąć treść strony generowaną przez WordPress oraz komentarze. W ich miejsce wstawimy odpowiedni fragment kodu od Google:

<gcse:searchresults-only></gcse:searchresults-only>

Domyślnie linki wyświetlane w wynikach wyszukiwania otwierane są w nowej zakładce. Możemy jednak łatwo zmienić to zachowanie modyfikując nieznacznie kod:

<gcse:searchresults-only linktarget="_parent"></gcse:searchresults-only>

W artykule bazuję na motywie Twenty Eleven, zatem w moim przypadku ostateczny szablon strony będzie miał następującą postać:

<?php /* Template Name: Wyniki wyszukiwania */  ?>

<?php get_header(); ?>

<div id="primary">
   <div id="content" role="main">
      <gcse:searchresults-only linktarget="_parent"></gcse:searchresults-only>
   </div><!-- #content -->
</div><!-- #primary -->

<?php get_footer(); ?>

Po wykonaniu tego kroku możemy przejść do panelu i dodać nową stronę. W sekcji „Szablon” wybieramy „Wyniki wyszukiwania”, po czym zapisujemy stronę. Tworząc stronę z wynikami wyszukiwania musimy jeszcze zwrócić uwagę na jej adres. Musi być on zgodny z tym, który podaliśmy generując kod wyszukiwarki.

Wybór szablonu i adresu strony

Krok 3. Dodanie formularza wyszukiwania

Pozostaje nam już tylko wstawić formularz wyszukiwania. Możemy go umieścić w dowolnym miejscu na stronie, np. jako widget w sidebarze. W tym celu należy przejść do zakładki „Wygląd / Widgety” i przeciągnąć na wybrany sidebar widget „Tekst”. Do środka wklejamy kod wyszukiwarki od Google:

<gcse:searchbox-only></gcse:searchbox-only>

Dodawanie formularza

To wszystko! Po przejściu na stronę formularz wyszukiwania powinien być już widoczny:

Wygląd formularzaw sidebarze

Podsumowanie

Czas wypróbować nowy mechanizm wyszukiwania! Wystarczy że wpiszesz wybraną frazę do wyszukiwarki, a zostaniesz przekierowany na stronę z wynikami wyszukiwania dostarczonymi przez Google:

Prezentacja wyników wyszukiwania

Ciekawa jestem waszych opinii na temat wyszukiwarki WordPress. Korzystacie z niej na swoich stronach czy zastępujecie innymi rozwiązaniami?