blog.nayma.pl


Dla miłośników WordPress, WooCommerce, HTML5, CSS3 oraz JS.

Podziel się


Tagi


Wyszukiwarka wpisów w Ghost

Wyszukiwarka - rzecz niezbędna

WordPress jako system blogowy/CMS posiadał wbudowana wyszukiwarkę dla zawartości strony po stronie klienta. W Ghost posiadamy jedynie wyszukiwarkę po stronie back-endu czyli dla administratorów i autorów. Mając jednak bardziej obszerny blog warto taką funkcjonalność posiadać tez na froncie dla użytkowników szukających jakiejś treści. Na szczęście wyszukiwarkę możemy dodać na własną rękę i nie jest to trudne.

Rozwiązanie problemu

Na sam początek potrzebujemy bibliotekę jquery.ghostHunter.min.js, którą można pobrać tutaj:

Pobierz skrypt

Podpinamy do default.hbs skrypt:

 <script src="js/jquery.ghostHunter.min.js"></script>

Następnie dodajemy pole wyszukiwania. Ja dodałem go akurat do panelu bocznego:

<div class="szukaj">  
  <form>
    <input type="text" id="search-field">
    <input type="submit" id="szukaj" value="szukaj">
  </form>
</div>  

Teraz musimy dodać miejsce gdzie będą wyświetlane wyniki. Ja dodałem akurat nad listą postów:

<section id="results"></section>  

Dodajemy do pliku .js skrypt odpowiedzialny za wyszukiwanie. W poniższym przykładzie mamy użyty własny szablon wyników jako tytuł do artykułu jako link. Możemy oczywiście dać tam też datę lub autora korzystając z Public API.

// Skrypt do wyszukiwarki

$("#search-field").ghostHunter({
      results   : "#results",
      result_template : "<a href='{{link}}'><h3>{{title}}</h3></a>"
    });

Teraz pozostaje nam ostylowanie elementów w CSS3, żeby wyglądem pasowały do naszej strony. Jako że u mnie panel wyszukiwania znajduje się w panelu bocznym warto zadbać o to by po kliknięciu w wyszukaj automatycznie się zamykał.

jQuery('#szukaj').click(function(){  
        closeDrawer();
    });

Oczywiście musimy jeszcze zdefiniować co ma robić funkcja/zmienna closeDrawer() i co ma zamykać. Jest to jednak fajny dodatek.

Uwaga !! Należy pamiętać aby Public API było włączone, gdyż inaczej wyszukiwarka zawsze zwróci nam wynik "0" !!

Podsumowanie

Tym oto prostym sposobem udało nam w kilku dość prostych krokach dodać w pełni funkcjonalną wyszukiwarkę po stronie klienta. Taki dodatek będzie na pewno świetnym uzupełnieniem każdego bloga opartego o system Ghost. Mam nadzieję, że porada przyda się niejednemu z was.

Nayma.pl Dariusz Okoń
Dodane przez

Nayma.pl Dariusz Okoń

Komentarze