Czego szukasz?

Jeżeli szukasz odpowiedzi na pytania związane z SEO lub Wordpressem wpisz frazę i czekaj na podpowiedzi lub kliknij enter! Wyniki pokazują także linki do zewnętrznych źródeł.

163 artykułów w bazie

Konfiguracja motywu potomnego na podstawie CherryFramework16 min read

16 min read" > cherry-framework

Dzisiaj WordPress jest jednym z najbardziej popularnych systemów zarządzania treścią dzięki szybkiej instalacji, elastycznemu przebudowywaniu i prostej obsłudze. Oprócz tego zawiera on mnóstwo wtyczek, które pozwalają rozszerzać możliwości systemu: dodać funkcjonalność i dopasować CMS pod odpowiedni projekt internetowy. Takie eksperymenty z WordPress są możliwe dzięki modułowej architekturze CMS.

Czym jest Framework?

System zarządzania treścią można uznać za konstruktora LEGO, który wykorzystuje różne komponenty. To pozwała dopasowywać stronę pod każdy indywidualny projekt bez straty czasu i siły na tworzenie nowego dedykowanego CMS, zwłaszcza wtedy, gdy zależy nam kosztach. W takim przypadku bardzo korzystną rzeczą dla modernizacji systemu jest framework.
Zgodnie z definicją framework (ang. framework– struktura) to zestaw narzędzi i bibliotek, pozwalający rozszerzyć funkcjonalność strony i zaoszczędzić czas przy tworzeniu własnych komponentów. Właśnie, dlatego użycie frameworków wraz z  WordPressem staje się elastycznym rozwiązaniem nawet dla najwybredniejszego projektanta stron internetowych.

Istnieją darmowe i płatne frameworki doprojektowania stron opartych na WordPress. Każdy z nich ma swoje wady i zalety, ale najbardziej popularnymi i używanymi (zgodnie z danymi pochodzącymi z 1stwebdesigner.com) są:

Każdy z was pewnie już doświadczył pracy z podanymi powyżej frameworkami. W swoim artykule chciałbym opisać wam prosty przykład tworzenia szablonu-dziecka (motywu potomnego) opartego na CherryFramework. Postaram się opisać głownie etapy tworzenia takiego szablonu.
Powiem wstępnie, że CherryFramework był stworzony wraz ze specjalistami TemplateMonster i jest darmowym frameworkiem dla WordPressa. Postaram się pokazać niektóre jego przewagi i możliwości.

Krok pierwszy. Podstawowe informacje

Przed rozpoczęciem pracy, należy pobrać sam framework i podstawowy motyw Cherry:

  1. Pliki frameworku – CherryFramework
  2. Pliki motywu potomnego – Motyw Cherry

Kiedy już mamy podane wyżej pliki, możemy przystąpić do ich instalacji. Należy wykonać dwie operacje. W menu administratora przechodzimy do opcji Appearance (Wygląd)->Themes (Motywy)->Add Themes (Dodaj motyw). Za pomocą przycisku Upload Theme (Wyślij motyw na serwer) po kolei wgrywamy pliki z CherryFramework i motyw Cherry (rys. 1).

Instalacja CherryFramework i motywu Cherry

Rysunek 1. Instalacja CherryFramework i motywu Cherry

Zainstalowany motyw trzeba aktywować, ponieważ na jego podstawie będziemy pracować ze stroną internetową (rys. 2).

Aktywacja motywu potomnego Cherry

Rysunek 2. Aktywacja motywu potomnego Cherry

Po aktywacji motywu pojawi się wiadomość z propozycją zainstalowania odpowiedniej wtyczki (Contact Form 7 i Motopress Content Editor). Komunikat ten można ukryć (rys. 3). My jednak użyjemy proponowanych komponentów, dlatego przechodzimy do ich instalacji.

Komunikat o instalacji Contact Form 7 i Motopress Content Editor

Rysunek 3. Komunikat o instalacji Contact Form 7 i Motopress Content Editor

Po instalacji wtyczek nasz motyw jest gotowy do dalszej edycji. Oto, jaki efekt uzyskamy przechodząc wszystkie kroki poradnika (rys. 4):

Końcowa wersja naszego szablonu dla strony internetowej

Rysunek 4. Końcowa wersja naszego szablonu dla strony internetowej

Na początku, w bezpośredniej edycji naszego motywu, najlepiej zapoznać się z jego strukturą, żeby rozumieć, jak jest zbudowany i co zawiera.

Struktura plików i folderów:

CherryTheme

/bootstrap

less – zawiera wszystkie pliki.less związane ze stylami bootstrap.

css – zawiera automatycznie wygenerowanego CSS dla bootstrap.

/images – zawiera domyślne obrazki i ikonki.

/includes

/plugins – zawiera obowiązkowe i zalecane wtyczki dla szablonu.

custom-function.php – plik, w który można dodać funkcje użytkownika dla używanego motywu potomnego.

custom-js.php – plik służący do podłączenia potrzebnych dla motywu potomnego plików .js (javascript). W podanym pliku można podłączać potrzebne użytkownikowi pliki .js, dodając je do funkcji cherry_child_custom_scripts() za pomocą wp_enqueue_script.

register-plugins.php – plik, w którym są deklarowane obowiązkowe i zalecane wtyczki dla szablonu.

sidebar-init.php – plik, w którym odbywa się rejestracja paneli bocznych (sidebar) dla motywu potomnego. W tym pliku można zarejestrować swoje panele boczne, deklarując je dzięki funkcji cherry_widgets_init() za pomocą register_sidebar().

theme-init.php – plik, który definiuje podstawowe ustawienia motywu potomnego, w tym ustawienia rozmiaru domyślnych miniatur i rozmiary dodatkowych zdjęć, rejestrację menu, typów wpisów i taksonomii.

/js – zawiera potrzebne pliki .js.

/languages – zawiera pliki lokalizacyjne.

favicon.ico – używana domyślnie ikona, która pojawia się przed adresem w polu adresowym przeglądarki internetowej.

main-style.css – plik z CSSami szablonu. Są automatycznie generowane z style.less, więc nie można robić w nim zmian bezpośrednio.

options.php – plik zawierający wartości dla opcji motywu domyślnego. Możliwe jest dodanie nowych opcji.

rtl.css – plik ze stylami dla języków z zapisem od prawej do lewej.

style.css – główny plik CSS. Musi być obecny dla poprawnego funkcjonowania całego motywu. Również w tym pliku można dodawać własne style CSS.

style.less – plik .less ze stylami CSS dla motywu.

Bardzo istotna rzecz: w CherryFramework i w motywie potomnym jest używany preprocesor less dla bardziej komfortowej pracy ze stylami CSS. Dlatego, podczas edycji stylów najlepiej jest zmieniać je w plikach .less. Framework wtedy sam skompiluje je w CSS. Jeśli nie chcesz korzystać z less, a wprowadzać zmiany w samym CSS, to lepiej robić to w pliku style.css, ponieważ wszystkie inne pliki CSS w motywie potomnym są automatyczne generowane z plików .less i aktualizowane po zapisaniu poprawek.

Krok drugi. Edytowanie motywu

Przychodzimy do edytowania motywu. Aby wyglądał tak jak na rys. 5 musimy przejść przez 6 prostych etapów.

1. Przygotowanie motywu

1.1 Stworzymy statyczną stronę startową i stronę dla blogu: Pages->Add new (Strony->Dodaj nową). Dla strony głównej, w jakości motywu wybierzmy Home Page (Strona domowa).

1.2 Następnie w menu Settings->Reading (Ustawienia->Czytanie) należy wybrać Static page (Statyczną stronę) i następnie dla Front Page (Strona główna) i Posts Page (Strona z wpisami) wybrać nowo utworzone strony.

1.3 Przechodzimy do menu Settings->Permalinks (Ustawienia->Bezpośrednie odnośniki) i definiujemy ustawienia dla stałych linków. Wybieramy, na przykład, Post name (Nazwa wpisu) i zapisujemy zmiany.

Więcej o adresach strukturze adresów url możesz przeczytać tutaj: http://www.seowordpress.pl/struktura-adresow-url-w-wp/

1.4 Przechodzimy do menu Appearance->Menus (Wygląd->Menu) i tworzymy nowe menu dzięki przyciskowi Create a new menu (Utworzyć nowe). W Theme locations (Zarządzaj rozmieszczeniem) wybieramy Primary Menu (Menu główne). Dodajemy potrzebne strony i zapisujemy zmiany.

1.5 Po wykonaniu tych kroków, powinniśmy otrzymać widok podobny do (rys. 5):

Przygotowanie podstawowego menu

Rysunek 5. Przygotowanie podstawowego menu

2. Ustawienie slidera

Najpierw musimy zdecydować, jakiego wymiary ma mieć slider i ustawić je w theme-init.php. Dla przykładu, jeśli chcemy, aby slider miał wymiar 1170×720 px, otwieramy theme-init.php i szukamy następującego wiersza:

i zamieniamy odpowiednią wartość, czyli w naszym przypadku będzie to:

Teraz musimy zmienić kilka ustawień slidera.  Otwieramy plik custom-function.php i dodajemy na końcu pliku, przed znacznikiem zamknięcia ?> poniższy kod:

Liczba 61,5% w kodzie jest wynikiem podzielenia wysokości naszego slidera przez jego szerokość i pomnożenia otrzymanej wartości przez 100%. Ten parametr jest wymagany, żeby slider skalował się przy różnych rozdzielczościach ekranu. 200px to minimalna wysokość slidera.

Teraz slider jest gotowy do użycia. Pozostało tylko dodać slajdy:

1. W panelu administracyjnym należy przejść do opcji Slider (rys. 6).

2. Następnie kliknąć w zakładkę Add New.

3. Podać tytuł slidera.

4. Przesłać obrazek przy użyciu opcji Featured Image (kliknąć link Set featured image).

5. Uzupełnić następujące pola:

Caption – pole do podpisu slajdu.

URL – pole do wstawienia URL slajdu (można podać zewnętrzny link).

6. Po skończeniu należy kliknąć przycisk Publikuj.

Ustawienie slidera

Rysunek 6. Ustawienie slidera

Jeżeli załadujemy grafiki na slider przed ustawieniem rozmiaru slidera w pliku theme-init.php, nie będą miały one zdefiniowanych dla slidera rozmiarów. Aby poprawić rozmiary grafik bez konieczności ich usunięcia i ponownego załadowania, można skorzystać z wtyczki Regenerate Thumbnails.

W wyniku edycji slidera otrzymamy taki rezultat (rys. 7):

Slider na stronie

Rysunek 7. Slider na stronie

Krok trzeci. Ogólna stylizacja motywu

Na tym etapie zrobimy ogólne ustawienia naszej strony – logo, favicon, kolor tła itd.

Na początku załadowujemy logo. Aby to zrobić, należy otworzyć w panelu administracyjnym Cherry Options->Logo & Favicon. W naszym przypadku nie będzie graficznego logo, dlatego wybierzemy opcję „Tekst Logo” i ustawimy odpowiedni styl czcionki.

Przechodzimy do zakładki General i ustawiamy kolory fontu dla sekcji <body> i nagłówka – w naszym przypadku dwa razy będzie używany biały kolor. Oprócz tego, w danym punkcie menu można ustawić kolory linków, stylów dla nagłówków we wpisach i wiele innych rzeczy (rys. 8).

Ogólna stylizacja za pomocą opcji General w Cherry Options

Rysunek 8. Ogólna stylizacja za pomocą opcji General w Cherry Options

Stylizacja nagłówka

Teraz ustawiamy ogólne style dla naszego nagłówka, marginesy, dodajemy logo i slogan, żeby nasza strona przypominała tą z rysunku 5. Jak wspominaliśmy powyżej, wszystkie style CSS należy dodać do pliku style.less, z którego będą one automatycznie kompilowane do głównego pliku stylów CSS (main-style.css). Bardzo szczegółową informację na temat użycia less można znaleźć na  stronie http://lesscss.org/.

Teraz możemy przystąpić do aktualizacji naszego motywu. Domyślnie pliki motywu znajdują się we frameworku. Jeśli trzeba zmienić lokalizację lub kolejność elementów, zmodyfikować kod HTML jakiejś części strony, musimy zmodyfikować dane pliki. Jak już wspominaliśmy powyżej, nie należy edytować plików we frameworku, ponieważ zmiany zostaną utracone przy jego aktualizacji. Najlepiej przenieść potrzebne pliki z frameworku do motywu potomnego z użyciem takiej samej struktury folderów. Potem można przystąpić do ich zmiany w folderze motywu potomnego.

W naszym przypadku, należy umieścić menu i logo w jednej linii, a ponad nimi umieścić pole wyszukiwania. W tym przypadku musimy edytować plik motywu wrapper-header.php, który znajduje się w odpowiednim folderze „wrapper” we frameworku.

W folderze z naszym motywem potomnym tworzymy nowy folder z nazwą „wrapper” i dodajemy w nim kopię pliku wrapper-header.php. Wszystkie pliki w motywem potomnym mają wysoki priorytet i właśnie one będą używane dla wyświetlania elementów na stronie. Wystarczy tylko zmienić kod. W naszym przypadku logo i menu mają być umieszczone w jednej linii, a pole z wyszukiwaniem ma się znaleźć nad nimi. Dlatego w pliku wrapper-header.php należy wprowadzić następujące zmiany:

Zapisujemy wszystkie zmiany i sprawdzamy otrzymany rezultat. Strona powinna wyglądać tak (rys.9):

Pole wyszukiwania nad menu

Rysunek 9. Pole wyszukiwania nad menu

Dalej ostylowujemy pozostałe elementy – pole wyszukiwania, menu, itd. Dzięki użyciu less można znacznie zaoszczędzić czas, ponieważ korzysta on z własnych zmiennych. Zmiana wartości zmiennej w jednym miejscu pozwala szybko zmienić wszystkie style we wszystkich elementach, gdzie używana jest podana zmienna.

Wszystkie zmienne znajdują się w pliku bootstrap/less/variables.less. Po otwarciu podanego pliku, można zauważyć, że niektóre z tych zmiennych są zakomentowane. Zmienne te mogą być również wykorzystywane przy definiowaniu stylów, ale ich wartości są zdefiniowane nie w pliku variables.less, a w opcjach motywu w panelu administracyjnym. Oznacza to, że jeśli będziemy używać zmiennej @linkColor, jej wartość zostanie pobrana z opcji Link Color w opcjach motywu, w naszym przypadku będzie to #e46568. W podobny sposób można używać zmiennych:

  • @textColor,
  • @linkColorHover,
  • @bodyBackground,
  • @baseFontSize,
  • @baseFontFamily,
  • @baseLineHeight

Inne zmienne mogą być zmieniane bezpośrednio w pliku variables.less. Korzystamy z flat design, dlatego musimy usunąć zaokrąglone kąty. Aby to zrobić zmieniamy wartość zmiennych @baseBorderRadius, @borderRadiusLarge, @borderRadiusSmal na 0.

Ukrywamy pole wyszukiwania w opcjach. Teraz go nie potrzebujemy, ale w przyszłości możemy go szybko aktywować i nie tracić czasu na modyfikację związanych z nim stylów CSS.

W opcjach motywu (Cherry Options) w zakładce Navigation jest opcja Use stickUp menu. Z jej pomocą można aktywować ruchome menu, które podczas przewijania strony w dół, zawsze pozostaje w górnej części ekranu. W przypadku aktywacji proponowanej funkcji lepiej „przywiązać” do góry ekranu nie tylko menu, a cały nagłówek. Dlatego zrobimy odpowiednie zmiany w naszym motywie: otwieramy plik custom-function.php i dodamy na jego końcu przed znacznikiem ?> następujący kod:

Powyższy kod zamienia element, do którego odnosić się będzie „przyklejanie” do górnej części ekranu. Można ustawić go do któregokolwiek elementu, po prostu zastępując .header odpowiednim CSS-selektorem. No i na koniec należy dodać w styl CSS motywu następujący kod:

Praca nad ostylowaniem nagłówka jest skończona. Powinniśmy otrzymać takie menu (rys. 10):

Menu po stylizacji

Rysunek 10. Menu po stylizacji

Stylizacja treści

Przejdźmy do dodawania treści strony domowej. Cała zawartość podanej strony będzie stworzona w edytorze za pomocą standardowych elementów i specjalnych kodów dodanych dzięki frameworkowi.

Zaakcentujemy tytuły. W naszym przypadku mają one specyficzne style – duże odstępy i marginesy. W tym przypadku możemy skorzystać z jednego z dwóch sposobów: ustawić takie same style dla wszystkich tytułów domyślnie lub skorzystać ze specjalnych kodów, dostępnych w CherryFramework.

My wybierzemy tę drugą metodę i skorzystamy ze specjalnych kodów [title] (shortcode). Dzięki temu tylko tytuły w środku podanego kodu będą mieć unikalny styl.

Struktura kodu będzie wyglądała tak:

Szczegółową informację na temat dostępnych w CherryFramework specjalnych kodów można znaleźć na stronie TemplateMonster.

Stylizacja stopki

W ostatnim kroku edytujemy wspólne style stopki – marginesy, odstępy, fonty itd.

Zaczynamy od dodania i ostylowania widżetów. Domyślnie w CherryFramework dostępne są 4 obszary widżetów dla stopki, które są podzielone na kolumny równej szerokości. W naszym przypadku domyślna struktura odpowiada projektowi strony. Jeżeli pojawi się potrzeba, aby zmienić taką strukturę, należy wyedytować dwa pliki:

includes/sidebar-init.php w naszym motywie potomnym. W tym pliku rejestrują się wszystkie obszary widżetów dla naszego szablonu. Możemy także dodawać nowe, usuwać lub modyfikować istniejące obszary widżetów  w pliku za pomocą funkcji register_sidebar(), unregister_sidebar().

wrapper/wrapper-footer.php – plik, który odpowiada za wywołanie obszarów widżetu dla stopki. W tym pliku można edytować istniejącą strukturę HTML, układ obszarów widżetów, można stworzyć swój obszar dla widżetu za pomocą funkcji dynamic_sidebar.

Następnie w opcjach motywu (Cherry Options) przechodzimy do zakładki Footer, gdzie w opcji Footer copyright text, wpisujemy tekst dotyczący praw autorskich.

NO I JUŻ!

Skończyliśmy główną część pracy nad motywem potomnym. Teraz musimy zobaczyć całą stronę, poprawić style, aby całość wyglądała jak na rysunku 4.

Jeżeli wszystko zostało zrobione zgodnie z powyższymi krokami, otrzymamy prosty projekt strony oparty na CherryFramework. Aby bardziej go rozbudować można edytować pliki Bootstrap frameworku:

variables.less – zawiera wszystkie zmienne .less . W tym pliku można dowiedzieć się, jakie zmienne były już zadeklarowane, zmieniać ich wartości oraz dodawać własne zmienne.

buttons.less – ostylowanie domyślnego przycisku.

forms.less – ostylowanie wszystkich elementów formularzy.

mixins.less – mixiny używane domyślne.

Podsumowanie

Jak wspominaliśmy na początku naszego artykuły, framework jest bardzo potężnym dodatkiem dla WordPress, ponieważ pozwała za pomocą gotowych rozwiązań tworzyć różne strony internetowe. Za przykładu został wzięty CherryFramework, który znacznie rozszerza możliwości WordPressa przy tworzeniu wyglądu strony internetowej. Oczywiście, że to nie wszystkie możliwości CherryFramework i w naszym przypadku korzystaliśmy tylko z niektórych możliwości.

A jakie Wy macie doświadczenia z tym lub innym frameworkiem? Proszę śmiało komentować 🙂

O Janusz Kamiński

Specjalista działu marketingu firmy TemplateMonster. W branży IT pracuje od 5 lat. Posiada doświadczenie w SEO, marketingu internetowym. Oprócz tego interesuje się projektowaniem internetowym.

6 komentarzy

Zostaw odpowiedź

Email nie będzie publikowany. Wymagane pola są oznaczone *

Możesz używać tych tagów HTML <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code class="" title="" data-url=""> <del datetime=""> <em> <i> <q cite=""> <s> <strike> <strong> <pre class="" title="" data-url=""> <span class="" title="" data-url="">

Oferuję szereg usług związanych z WordpressemSPRAWDŹ OFERTĘ
Przeczytaj inne:
bezposrednielinki
Struktura adresów URL w WP

Dziś zajmę się tematem z pozoru bardzo prostym i oklepanym jeżeli chodzi o Wordpressa natomiast z niewiadomych przyczyn spotkałem się,...

Zamknij