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.
[warn]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).[/warn]
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
[warn]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.[/warn]
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ę.
[info]My do przechowania favicony użyjemy Base64, by wszystko zamknąć w jednym pliku. Ja do tego celu używam Notepada.[/info]
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>
[info]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.[/info]
Jak zakodować faviconę w Base64?
Czynność zakodowania ikony do Base64 jest bardzo prosta. Musimy mieć dwie rzeczy, by móc tego dokonać:
- Ikonkę o rozmiarach 16x16px w png;
- 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>.
[info]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…[/info]
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}.
[info]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 ;).[/info]
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.
[warn]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}.[/warn]
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.
[info]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.[/info]
To koniec. Żadnych więcej modyfikacji nie musimy wprowadzać. A jak wygląda to w praktyce?
[info]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ą.[/info]
Mozilla Firefox
Dodajemy ręcznie wyszukiwarkę klikając w rozwijaną listę wyszukiwarek (prawy górny róg, obok paska adresu).
Google Chrome
W przypadku tej przeglądarki, wyszukiwarka dodaje się automatycznie, musimy jedynie zmienić słowo kluczowe.
Internet Explorer
Podobnie, jak w przypadku Firefoksa musimy rozwinąć pasek wyszukiwarek i dodać naszą wyszukiwarkę ręcznie.
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.
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).
Dodaj komentarz