Kurs WordPress (4)

Autor: Damian Chodorek • Opublikowany: 8 grudnia 2014 • Ostatnia aktualizacja: 8 lutego 2015 • Kategoria: kursy, wordpress

Edycja informacji szablonu. Własne arkusze stylów.

W poprzedniej części rozpoczęliśmy pracę z frameworkiem Thematic. Dziś kontynuujemy temat. Na początek skopiuj katalog thematicsamplechildtheme do katalogu wp-content/themes. Teraz nadaj nazwę swojemu szablonowi. Zgodnie z nią zmień nazwę katalogu, który właśnie skopiowałeś.

Dane szablonu

Aby zmienić informacje o szablonie tak, żeby były widoczne po zalogowaniu się w WordPressie w menu wygląd, należy zmienić plik style.css. W pierwszych wierszach zobaczysz:

/*   
Theme Name: A Thematic Child Theme
Theme URI: http://thematictheme.com/
Description: Use this theme to start your Thematic Child Theme development.
Author: Ian Stewart
Author URI: http://themeshaper.com/
Template: thematic
Version: 1.0
Tags: white, three-columns, two-columns, fixed-width, theme-options, left-sidebar, right-sidebar, threaded-comments, sticky-post, microformats
License: GNU General Public License v2.0
License URI: http://www.gnu.org/licenses/gpl-2.0.html

.
The Thematic Theme is copyright Ian Stewart http://themeshaper.com/
This work, like WordPress, is released under GNU General Public License, version 2 (GPL).
.

*/

Jak widzisz, wiersze definiują informacje o szablonie. Zamień domyślne opisy na swoje własne.

Zmiana układu szablonu

Aktualny szablon posiada domyślne style CSS. Oczywiście możesz dodać swoje własne, ale framework dostarcza kilku gotowych rozwiązań, z których warto umieć skorzystać. Przykładowo pasek boczny znajduje się domyślnie po lewej stronie. Jeśli chcesz, aby był po prawej nie musisz męczyć się nad pisaniem swojego kodu. Wystarczy, że zajrzysz do folderu wp-content/themes/thematic/library/layouts/.

Znajduje się tam kilka arkuszy stylów, które definiują układ strony. Jeśli chcę, aby pasek boczny był po prawej stronie to wystarczy, że linijkę:

/* Apply a basic layout */
@import url('../thematic/library/layouts/2c-r-fixed.css');

zamienię na:

/* Apply a basic layout */
@import url('../thematic/library/layouts/2c-l-fixed.css');

i zapiszę zmiany. Gotowe! Po odświeżeniu strona zmieni układ. Oczywiście nic nie stoi na przeszkodzie, abyś usunął tę linijkę i napisał kawałek własnego kodu CSS.

Zwróć teraz uwagę na linijkę:

/* Apply default theme styles and colors */
/* It's better to actually copy over default.css into this file (or link to a copy in your child theme) if you're going to do anything outrageous */
@import url('../thematic/library/styles/default.css');

Jeśli zechcesz (a prawdopodobnie zechcesz) utworzyć własną kolorystykę na stronie, to postąp zgodnie z powyższą instrukcją i skopiuj plik default.css do własnego katalogu. Zmień także odpowiednio ścieżkę na ./default.css w poleceniu @import.

Jeśli zajrzysz do pliku ze stylami, zobaczysz, że jest on całkiem dobrze opisany komentarzami. Dzięki temu łatwo możesz odnaleźć potrzebne fragmenty kodu i zmienić na własne potrzeby. Jeżeli zamierzasz używać CSS’ów z frameworka we własnych komercyjnych projektach, powinieneś zapoznać się z ich licencją.

część 5

Zobacz również
Kurs WordPress (1)Ogólny zarys technologii.
Kurs WordPress (2)Podstawowe rodzaje szablonów.
Kurs WordPress (3)Pierwsze kroki. Framework Thematic.
Kurs WordPress (5)Przeszukiwanie i dołączanie plików szablonu. Wstrzykiwanie treści. Mechanizm zaczepów i filtrów.
Kurs WordPress (6)Dodawanie filtrów. Własna pętla oraz szablon podstrony.
Projektowanie stron WWW (1)10 heurystyk Jakoba Nielsena – Twoja ściąga.
Kurs obiektowego JavaScript (1)Wstęp, historia i zastosowanie języka. Dla kogo jest ten kurs?

Dodaj komentarz

Twój adres e-mail nie zostanie opublikowany.