Heroic Knowledge Base – Korzystanie z systemu szablonów

Opublikowany: 2016-01-11

Jeśli spędzasz dużo czasu, odpowiadając na te same pytania pomocnicze w kółko, to w HeroThemes mamy odpowiedź….

Uwaga: w tym artykule założono, że wiesz, jak zainstalować WordPress, wtyczki i masz pewną wiedzę na temat tworzenia motywów, w tym motywy nadrzędne / podrzędne, HTML, CSS i podstawową wiedzę na temat PHP.

Heroiczna baza wiedzy

Nasza wtyczka bazy wiedzy zapewnia szybkie i bardzo łatwe do skonfigurowania rozwiązanie do tworzenia niestandardowej bazy wiedzy w Twojej witrynie. Błyskawiczne dostarczanie klientom odpowiedzi na te częściej zadawane pytania i pozwalanie na skrócenie czasu spędzonego na odpowiadaniu na telefony i e-maile pomocy technicznej, dzięki czemu możesz zamiast tego przejść i pominąć pola stokrotek (lub robić to, na czym chcesz się skupić zamiast tego) i upewniając się, że masz szczęśliwszych klientów.

Podobnie jak większość wtyczek WordPress, początkowa instalacja nie może być prostsza. Po prostu prześlij wtyczkę do katalogu wtyczek za pośrednictwem pulpitu nawigacyjnego i aktywuj ją. Wtyczka Knowledge Base bezproblemowo integruje się z większością dobrze zakodowanych motywów, dlatego nie ma znaczenia, czy używasz całkowicie spersonalizowanego motywu, jednego z naszych premium produktów HeroThemes, czy domyślnego motywu WordPress. W ciągu kilku minut otrzymasz w pełni funkcjonalną bazę wiedzy zintegrowaną z Twoją witryną WordPress.

Jeśli masz pewną wiedzę na temat tworzenia motywów i chcesz dalej dostosować wtyczkę, nasz przejrzysty, przyjazny dla programistów kod, funkcje wtykowe i łatwy do naśladowania system szablonów pozwalają na dokonywanie zaawansowanych dostosowań. W tym artykule przyjrzymy się niektórym fajnym rzeczom, które możesz zrobić, aby dostosować wtyczkę za pomocą systemu szablonów.

Podam szybki przegląd:

  • Instalowanie wtyczki, ogólne ustawienia i dodawanie treści
  • Podstawowa integracja z nowym motywem TwentySixteen dostępnym z WordPress 4.4
  • Zaawansowana integracja: Modyfikowanie szablonów w celu dalszego dostosowania

Pierwsze kroki

Po początkowej instalacji WordPressa upewnij się, że masz zainstalowany i aktywowany zarówno motyw TwentySixteen, jak i wtyczkę Knowledge Base.

TwentySixteen to nowy domyślny motyw dostarczany z WordPress 4.4. Jeśli po uaktualnieniu instalacji WordPressa nie masz nowego motywu wymienionego w sekcji Wygląd > Motywy , możesz go pobrać ze strony motywu TwentySixteen na WordPress.org

Wtyczka bazy wiedzy

Podobnie jak sam WordPress, konfiguracja wtyczki Knowledge Base jest bardzo łatwa. Po aktywacji wtyczki zostaniesz automatycznie przeniesiony do ekranu „Rozpoczęcie”, który zawiera kilka podstawowych wskazówek, które pomogą Ci zacząć. Dostępna jest również nowa pozycja menu w menu po lewej stronie pulpitu nawigacyjnego o nazwie Baza wiedzy.

Baza wiedzy działa w bardzo podobny sposób do standardowego typu postu, którego używa WordPress. Artykuły można organizować według kategorii, a także według tagów. Kategorie można dodawać lub usuwać w dowolnym momencie, tak jak w przypadku postów, jednak aby upewnić się, że baza wiedzy jest jak najbardziej użyteczna, zaleca się zaplanowanie struktury kategorii przed rozpoczęciem tworzenia treści.

Domyślnie artykuły z bazy wiedzy są wyświetlane w kolejności dat publikacji dokładnie tak, jak standardowe posty, jednak możesz to zmienić w ustawieniach wtyczki.

kb-blog1-settings

Baza wiedzy zawiera szeroką gamę ustawień, które umożliwiają dostosowanie instalacji bez konieczności zagłębiania się w szablony.

Możesz zostawić je dokładnie tak, jak są, a Twoja baza wiedzy będzie działać idealnie, jednak jeśli chcesz zmienić kolejność artykułów, sposób wyświetlania kategorii, dostosować funkcję wyszukiwania na żywo, włączyć głosowanie i komentowanie artykułów oraz szeroki wiele innych opcji, możesz to zrobić bez konieczności posiadania wiedzy o kodowaniu.

Tworzenie treści

Zanim zaczniesz dokonywać zaawansowanych dostosowań w naszej bazie wiedzy, potrzebujesz pewnej zawartości. Dlatego pierwszą rzeczą, którą musisz zrobić, to stworzyć kilka artykułów. Po zainstalowaniu motywu TwentySixteen dodaj nowy ekran

kb-blog1-dodaj-nowy-ekran
kb-blog1-dodaj-nowe-opcje

Powinno to wyglądać bardzo znajomo, jeśli kiedykolwiek korzystałeś z WordPressa. Tytuł posta, treść, publikacja, formaty postów, kategorie i pola tagów są takie same. W rzeczywistości jedynymi obszarami, które się różnią, są opcje artykułów i opcje głosowania

Alternatywnie możesz zainstalować domyślną zawartość z ekranu początkowego na początku.

Integracja z TwentySixteen

Integracja wtyczki Knowledge Base z motywem TwentySixteen jest naprawdę prosta. Jeśli wykonałeś powyższe kroki, to wszystko. Mógłbyś to tam zostawić i miałbyś dobrze wyglądającą funkcjonalną bazę wiedzy bez potrzeby robienia czegokolwiek dalej. Idealne, jeśli nie znasz dużo kodu lub po prostu chcesz coś szybkiego i prostego do skonfigurowania.

Ale… co, jeśli chcesz zrobić więcej?

To, co jest naprawdę fajne we wtyczce dla twórców motywów, to system szablonów.

System szablonów działa poprzez kopiowanie plików szablonów, które chcesz zmienić, z wtyczki do folderu motywu. Następnie WordPress najpierw przyjrzy się Twojemu motywowi. Jeśli w motywie znajduje się odpowiedni plik szablonu, zostanie on użyty. Jeśli nie, szablon rezerwy w folderze wtyczki zostanie użyty zamiast przejąć funkcję the_content() i wstawić zawartość bazy wiedzy do standardowego page.php .

Hierarchia szablonów we wtyczce lub w motywie działa w bardzo podobny sposób do standardowej hierarchii szablonów WordPress, co ułatwia poruszanie się.

Na przykład hkb-taxonomy-category.php hkb-archive.php w taki sam sposób, w jaki category-$slug.php przesłoni standardowy archive.php .

kb-blog1-heirachy-szablonu
Szablony zamówień są używane w zależności od wyświetlanej treści i tego, czy istnieją w Twoim motywie. Na przykład podczas przeglądania kategorii zostanie użyty hkb-taxonomy-category.php , jeśli plik istnieje, w przeciwnym razie zostanie użyty hkb-archive.php .

Jeśli chcesz dowiedzieć się więcej o hierarchii szablonów WordPress, możesz przeczytać o niej kodeks programisty.

Dostosowywanie szablonów

Domyślnie sekcja Bazy wiedzy będzie wyglądać tak podczas korzystania z motywu TwentySixteen:

Strona z zawartością bazy wiedzy i pojedynczy artykuł
Strona z zawartością bazy wiedzy i pojedynczy artykuł

W porządku, TwentySixteen to bardzo ładnie wystylizowany motyw mobilny. Jednak ze względu na układ szablonów stron, strony Bazy wiedzy mają dużo martwej przestrzeni w porównaniu do innych stron w serwisie:

Ta sama strona z zawartością bazy wiedzy w porównaniu ze standardowym wpisem na blogu
Ta sama strona z zawartością bazy wiedzy w porównaniu ze standardowym wpisem na blogu

Nie potrzebujesz całej tej pustej przestrzeni na stronach bazy wiedzy, więc musisz zmodyfikować kod HTML odpowiedniego szablonu, aby go usunąć.

Zanim jednak do tego dojdziesz, musisz utworzyć motyw potomny dla TwentySixteen, aby żadne zmiany nie zostały utracone po wydaniu aktualizacji motywu. Nazwałem mój folder dwadzieścia szesnaście-dziecko . Więcej informacji na temat motywów potomnych można znaleźć w naszym artykule na temat motywów potomnych.

Po skonfigurowaniu motywu potomnego możesz teraz rozpocząć pracę nad edycją szablonów. Utwórz nowy folder w folderze dwadzieścia szesnaście- dzieci i nazwij go hkb-templates . Następnie skopiuj szablon, który chcesz edytować, z folderu wtyczek do nowo utworzonego folderu szablonów.

Aby zmienić stronę archiwum Bazy wiedzy, szablon, który będziesz musiał edytować, to hkb-archive.php . Po skopiowaniu otwórz go w edytorze kodu. Powinieneś zobaczyć:


<?php /** * Theme template for archive display */ ?>

<?php get_header(); ?>

<?php hkb_get_template_part('hkb-compat', 'archive'); ?>

<?php get_footer(); ?>

Uwaga: ponieważ szablony we wtyczce wprowadzają zawartość bazy wiedzy do strony za pomocą funkcji the_content() WordPressa, pełna struktura strony nie jest początkowo uwzględniana w szablonie. Ponieważ zastępujesz domyślny szablon, będziesz musiał dodać dodatkowy kod HTML do strony.

Dlatego kod w hkb-archive.php powinien zostać zmieniony tak, aby wyglądał mniej więcej tak:

<?php /** * Theme template for archive display */ ?>
<?php get_header(); ?>

<div id="primary" class="content-area">
<main id="main" class="site-main" role="main">
<?php // Include the page content template. hkb_get_template_part('hkb-compat', 'archive'); ?>
</main><!-- .site-main -->

<?php get_sidebar( 'content-bottom' ); ?>
</div>

<!-- .content-area -->

<?php get_sidebar(); ?><?php get_footer(); ?>

Uwaga: nie ma potrzeby umieszczania pętli while w tym szablonie

kb-blog1-baza-wiedzy-unformat

Zapisz plik i wyświetl stronę. Powinien teraz wyglądać mniej więcej tak:

To teraz używa układu standardowego page.php w motywie dwadzieścia szesnaście i usunęło białą spację z lewej strony. Jednak w rzeczywistości usunięto również wszystkie stylizacje wtyczek, a zamiast tego teraz odwołuje się do domyślnej stylizacji motywu.

Dzieje się tak, ponieważ gdy tylko zaczniesz dostosowywać motyw, wtyczka zakłada, że ​​chcesz mieć swobodę pisania własnych stylów, więc nie ładuje arkusza stylów. Jest to bardzo przydatne, gdy tworzysz całkowicie spersonalizowane motywy, jednak jeśli chcesz zachować istniejące style, możesz skopiować i wkleić style z hkb-style.css do style.css w motywie potomnym. Lub, jeśli tworzysz motyw na zamówienie, możesz skopiować arkusz stylów z folderu wtyczki do folderu motywu, a następnie umieścić go w kolejce w pliku functions.php używając następujących wierszy kodu:


// Knowledge Base plugin styles
wp_enqueue_style( 'hkb-style', get_template_directory_uri() . '/css/hkb-style.css', array( 'twentysixteen-style' ), '20151217' );

Uwaga: Jeśli użyjesz tej metody z motywem potomnym, będziesz musiał użyć get_stylesheet_directory_uri() zamiast get_template_directory_uri() . Dzieje się tak, ponieważ get_stylesheet_directory_uri() przyjrzy się strukturze pliku motywu potomnego, get_template_directory_uri() zamiast tego wskazuje folder motywu nadrzędnego.

Jeśli tworzysz motyw na zamówienie zamiast modyfikować istniejący motywem potomnym, to osobiście wolę trzymać arkusze stylów osobno i używać metody kolejkowania, aby odpowiednio wprowadzić style do motywu. Dzieje się tak, ponieważ style.css często może stać się bardzo duży i trudny do szybkiego zarządzania, a oddzielenie odpowiednich stylów ułatwia ich odnalezienie w razie potrzeby dalszej edycji. Ta sama organizacja może być użyta, jeśli używasz preprocesora, takiego jak SASS, ponieważ możesz @zaimportować nowy arkusz stylów, aby został automatycznie połączony z style.css , który można następnie wstrzyknąć do motywu za pomocą wp_enqueue_style() .

Po ponownym zastosowaniu stylów wyświetl stronę ponownie, a teraz powinieneś zobaczyć:

kb-blog1-knowledge-base-formatted

Strona została teraz ponownie sformatowana, a martwa przestrzeń po lewej stronie została usunięta, dzięki czemu wszystko wygląda na znacznie bardziej uporządkowane bez utraty stylu i projektu motywu. Jeśli istnieją inne szablony stron, do których chcesz zastosować tę zmianę układu, po prostu skopiuj odpowiednie szablony do motywu podrzędnego i gotowe!

Końcowe przemyślenia

Mam nadzieję, że pokazałem, jak konfigurowalna jest wtyczka Heroic Knowledge Base. Jest wiele rzeczy, które możesz zrobić po wyjęciu z pudełka, bez konieczności znajomości kodu, jednak jeśli chcesz dalej dostosowywać i rozumiesz standardy kodu WordPress i tworzenie motywów, możesz to zrobić bardzo łatwo.