Gotowy dodatek – wyszukiwarka do przeglądarki

20 minut zeszło mi nad wymyśleniem jakiegoś sensownego tytułu tego wpisu, całe 20 minut! Każda z tych bardziej popularnych przeglądarek internetowych posiada możliwość utworzenia własnych wyszukiwarek. Dzięki skorzystaniu z takiego rozwiązania w formie dodatkowej wyszukiwarki, bez konieczności wchodzenia na stronę możemy przeszukać jej zawartość. Oczywiście po wklepaniu keyworda i naciśnięciu entera zostaniemy przeniesieni na stronę z wynikami, jednakże nie musimy tego robić na samym początku.

Nim przejdziesz dalej, pragnę zwrócić Twoją uwagę, iż poniższy opis dotyczy tworzenia wyszukiwarki dla niezmodyfikowanej wersji WordPressa (mając na myśli silnik wyszukiwarki w niezmienionej formie).

Rozwiązanie to działa doskonale na takich przeglądarkach, jak: Mozilla Firefox, Internet Explorer, oraz Google Chrome. Wydawać by się mogło, że skoro te 3 przeglądarki radzą sobie w zadowalającym stopniu z takim „dodatkiem” to również dla Opery nie powinno być to wielkim wyzwaniem. A tu peszek niestety. Twórcy Opery widać, że lubią wprowadzać swoje własne trendy, które mijają się z nurtem idei postawionych przez inne przeglądarki.

Ale oso chodzi

Domyślnie użytkownicy odwiedzający naszą stronę/bloga mogą użyć wyszukiwarki w formie formularza na stronie. Dokładnie tak, jak na tym blogu, gdzie w górnym prawym rogu znajduje się formularz wyszukiwarki – tak ma to miejsce na tysiącach innych stron i blogach (niekoniecznie w prawym górnym rogu). Jednakże jeśli dzielimy się pożytecznymi informacjami i posiadamy bardzo wielu czytelników, to dlaczego by nie uprościć im i sobie życia dodając prosty kod na serwer, dzięki któremu już nie będzie musiał każdorazowo wchodzić na naszą witrynę by coś wyszukać. Zrobi to – korzystając z wyszukiwarki przeglądarki internetowej.

Każdy na pewno na przykładzie domyślnych wyszukiwarek wie, jak działa pasek wyszukiwarki. Po prostu klikamy na nim, bądź korzystamy z shortkey’a CTRL+K, a następnie wpisujemy szukaną frazę, wciskamy enter i tyle. Przeglądarka sama przeniesie nas na stronę z wynikami wyszukiwania. To samo osiągnąć chcemy w naszych przeglądarkach.

Tworzenie pliku *.xml

Pierwszą czynnością, którą wykonamy będzie utworzenie pliku XML ze zdefiniowanymi przez nas informacjami, takimi jak (kolejność przypadkowa):

  • Nazwa wyszukiwarki
  • Opis (opcjonalne)
  • Adres formularza
  • Metoda przesyłania danych
  • Ikonka (opcjonalne)
  • Kodowanie znaków
Poprawne ustawienie kodowania jest obowiązkowe. Jeśli z jakiś powodów ustawimy źle kodowanie i nie pokryje się ono nam z kodowaniem strony/bazy, to możemy zapomnieć o prawidłowym funkcjonowaniu wyszukiwarki i obsłudze polskich znaków. Jednakże obecnie większość stron używa UTF-8.

Otwieramy nowy plik w dowolnym edytorze tekstu (ja preferuję Notepad++) i wklejamy do niego poniższą zawartość.

<OpenSearchDescription>
 <ShortName></ShortName>
 <Description></Description>
 <InputEncoding></InputEncoding>
 <Image width="16" height="16">data:image/x-icon;base64,</Image> <!-- należy usunąć, jeśli nie chcemy favikonki -->
<Url type="text/html" method="GET" template=""/>
</OpenSearchDescription>

Pierwsza i ostatnia linia otwiera mechanizm, można by to porównać do <html>…</html>. Następnie ShortName przesyła informacje o nazwie naszej wyszukiwarki, może to być nazwa strony, slogan, cokolwiek. Description jest opisem strony, np. moja prywatna strona o niczym. InputEncoding odpowiada za kodowanie przesyłanych znaków. Image przesyła obrazek/faviconkę.

My do przechowania favicony użyjemy Base64, by wszystko zamknąć w jednym pliku. Ja do tego celu używam Notepada.

A na końcu zostaje Url, który odpowiedzialny jest za przesłanie informacji o metodzie przesyłu formularza i za sam formularz.

Na przykładzie mojego bloga, całość wygląda, tak:

<OpenSearchDescription>
 <ShortName>inzaghi89 weblog</ShortName>
 <Description>Wyszukiwarka inzaghi89 weblog - blog.keepmind.eu</Description>
 <InputEncoding>UTF-8</InputEncoding>
 <Image width="16" height="16">
 data:image/x-icon;base64,iVBORw0KGgoAAAANSUhEUgAAABAAAAAQCAYAAAAf8/9hAAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAA0ZJREFUeNpMk8tvG1UUxn9z79hjO07iPOy83SaN2tJUNCJ0gUCooC54qRVShbrrrjt23VT8NTy2gJAgQgjUAmpLoU0Roo+kaYLzsBPHceLHeMYz4xlOvOqVju7cOzPnfN93vmM8rERLgR9Oup4XOq6L43o47bbsbVqtFq7n4zgubS/AlXu37cvz0e4p1/V2zfJBbex5YSfrNG208vF9nzCMUEpJxFHaxIzF8fwOR8sweHlp8/rNz6jFDjCTAcnDNAmdIJmwJHqwlI0KfDI9Q0ydPIdCI7lfXr65Wdgyspdc1FgNb3EGK0wgaInsdfa3/2Lt/gq4cObiZebfvYTwxIynIJYUNAbKsixaNeFabEp+TWSYqGgHv/iAw90OM+ffR8diLN9e5PGvPwhSC7u2y8H2OoHQNbu8mgGGlA0Dg1iiglH5h1Khyexbn5DJ5jgsrNA3PMLynZ+Jxy1B8iH7W/9hhIdSTEmGRkC055NU+yTqyxQ3Whx74wpWuk+4RIydXcCpH3D+42ss/fg1T+/8wuixadxqUXQRVaN6gFXvEJUf8/T3RwRNg067haEM6UjI2Ol53Gaj24EL1z7l3ndf8eTubfk1QuvjczdMfy8d269Rqyg6jsLdL9IsFWiWt0llBhkYncKUdr744xavf3SVwdw4d7/5QhJGttbTczfidjkdlqokT11gUNrl7GyQGs6R7Btk489b1Hc2mZh7jfKLJ8StOGfevEgoAkYd1+5S0I0QoyViinliwjv/zmXsvZIYSTN/5brca5a+/RynUWP1/m8U/n3I9uozIt0r5hMEiUoxHdo1zMmT0mOLhCTJ5GfZvPcTIgKvCuysnO3KDuW1FaqlLdKDo8TTA7bpi68b2kKlMiTMmPhAdBD3pQaynHrvKs++/1Kg+oy/co6RE6fR8j6Tm5TzAjrZj7kwlArLKo8dThE1awSNKh2hEoj/E+leZt/+gOdiIBV2OCtOTPcMMDQxIxqNdwfMWPy7UFpfXRl98GiJtUKBmNtESRVPxNGZLHFJ5IgevZlhdKqXHrlLSrTb3tHEVs3cZL7UnxvX2YnjYWFtlU5kcFitdD8wtJYqMp35afpH8rRsG1+m6Wgyo6hrwd3/BRgA93iI5e7XzRAAAAAASUVORK5CYII=
 </Image>
 <Url type="text/html" method="GET" template="http://blog.keepmind.eu/?s={searchTerms}"/>
</OpenSearchDescription>
Uważam iż nie ma co się rozdrabniać nad opisywaniem każdego z uzupełnionych elementów, gdyż wcześniej opisałem to wystarczająco przejrzyście i zrozumiale. Skupię się wyłącznie nad dwoma ostatnimi elementami: Image, oraz Url.

Jak zakodować faviconę w Base64?

Czynność zakodowania ikony do Base64 jest bardzo prosta. Musimy mieć dwie rzeczy, by móc tego dokonać:

  1. Ikonkę o rozmiarach 16x16px w png;
  2. Notepad++ z pluginem MIME Tools (który to jest domyślnie w tym programie).

Odpowiednio przygotowaną ikonę, zapisaną już na dysku otwieramy w Notepadzie. Zobaczymy tam tzw. krzaki, ale tak… o to chodzi. Zaznaczamy cały tekst (CTRL+A), a następnie z menu Pluginy / MIME Tools wybieramy Base64 Encode. Całość ponownie zaznaczamy i wklejamy do naszego pliku *.xml przed </Image>.

Z tego co sprawdzałem to ikonka działa na pewno w Mozilla Firefox, z pozostałymi przeglądarkami miałem problem by zmusić je do obsługi favicony. Czy to w postaci png, czy ico…

Co to jest Url, z czym to się je?

Ostatnim elementem do omówienia jest Url, który jak już wcześniej wspomniałem odpowiedzialny jest za przesyłanie naszych zapytań na stronę/do formularza. Blogi oparte na silniku WordPress domyślnie przesyłają zapytania wyszukania metodą GET, oznacza to iż nas dotyczy jedynie modyfikacja końcowego elementu z zawartością {searchTerms}.

Jak zapewne nie trudno się domyśleć {searchTerms} odpowiedzialne jest za przesyłanie wpisanych znaków do formularza. Na chłopski rozum, jeśli chcemy wyszukać: inzaghi89 weblog, to {searchTerms} po wpisaniu i wciśnięciu entera przyjmie wartość inzaghi89 weblog LUB inzaghi89+weblog – z naciskiem na lub ;).

Dla nas istotne jest to, co wpiszemy przed {searchTerms}, bowiem będzie to odnośnik do naszej strony/bloga/formularza. Po prostu należy podmienić http://blog.keepmind.eu/http://adresem.naszego.bloga.pl. To tyle! Zapisujemy zmiany.

Blogi, które nie korzystają z .htaccessa i modułu ModRewrite, który upraszcza linki, powinny jako url/template podać http://adres.bloga.pl/index.php?s={searchTerms}.

Efekt końcowy

Nim jednak sprawdzimy działanie w praktyce, musimy dodać odpowiednie metadane, tak by przeglądarki wiedziały: Aha! Ta strona ma wyszukiwarkę dla mnie!

Otwieramy plik header.php i w dowolnym miejscu w sekcji <head>…</head> wklejamy poniższą linijkę:

<link title="<?php echo get_bloginfo('name'); ?>" rel="search" type="application/opensearchdescription+xml" href="<?php echo get_bloginfo('url'); ?>/search.xml" />

Title zwróci nam nazwę naszego bloga, rel informuje o tym iż jest to wyszukiwarka, type o jej typie, a href wskazuje lokalizację pliku xml.

W moim przypadku jak widzicie, zapisałem plik pod nazwą search.xml i znajduje się on w głównym katalogu bloga, stąd linijka <?php echo get_bloginfo(’url’); ?>, która zwróci adres bloga http://blog.keepmind.eu.

To koniec. Żadnych więcej modyfikacji nie musimy wprowadzać. A jak wygląda to w praktyce?

Jeśli ustawimy słowo kluczowe dla wyszukiwarki, jak np. „blog” to wpisując w pasku adresu blog szukana zawartość zostanie wykonana identyczna operacja, jak podczas wpisywania szukanej zawartości w pasku wyszukiwarki z naszą wyszukiwarką.

Mozilla Firefox

Dodajemy ręcznie wyszukiwarkę klikając w rozwijaną listę wyszukiwarek (prawy górny róg, obok paska adresu).

Dodanie wyszukiwarki w przeglądarce Firefox

Google Chrome

W przypadku tej przeglądarki, wyszukiwarka dodaje się automatycznie, musimy jedynie zmienić słowo kluczowe.

Dodanie/modyfikacja wyszukiwarki w przeglądarce Google Chrome

Internet Explorer

Podobnie, jak w przypadku Firefoksa musimy rozwinąć pasek wyszukiwarek i dodać naszą wyszukiwarkę ręcznie.

Dodanie wyszukiwarki w przeglądarce Internet Explorer

Opera

Tutaj jednak musimy zrobić wyszukiwarkę własnoręcznie, nie da się kliknąć i dodać gotowca. Przechodzimy do preferencji (CTRL+F12) / Wyszukiwanie. Klikamy na „Dodaj” i uzupełniamy kolejno formularz, jak na zrzucie.

Ręczne wprowadzanie danych wyszukiwarki w Operze

Kilka informacji

To co tutaj opisałem to jest tylko zalążek możliwości tego mechanizmu. Więcej informacji można znaleźć na stronie: http://www.opensearch.org/Specifications/OpenSearch/1.1. Swoją drogą wpis ten napisałem, bo chciałem napisać w końcu coś bardziej przydatnego, a przy okazji przetestować Shortcode (Custom, to przez Ciebie! Bo to u Ciebie je podpatrzyłem).


Komentarze

2 odpowiedzi na „Gotowy dodatek – wyszukiwarka do przeglądarki”

  1. To nie zupełnie prawda z tą Operą. W Operze wystarczy kliknąć prawym myszy na wyszukiwarce, którą chcemy dodać i z menu wybrać pozycję: „Utwórz wyszukiwarkę…”, wpisać słowo kluczowe, zatwierdzić OK i gotowe. :)

    1. Masz rację, nawet nie znałem tej funkcjonalności – nigdy nie potrzebowałem tego. Aczkolwiek przyznasz iż mechanizm ten nie korzysta z rozwiązania OpenSearch :).

Dodaj komentarz

Twój adres e-mail nie zostanie opublikowany. Wymagane pola są oznaczone *