SasquatchWP
Struktura plików oraz pomocne funkcje Timber dla front-end developerów
Agnieszka Palmowska
Skąd pobrać SasquatchWP
Struktura plików SasquatchWP
assets
- fonts
- images
- js
- scss
data
dist
front
lang
lib
models
node_modules
vendor
views
- layouts
- parts
- templates
-- front
Pliki frontowe
Użycie plików frontowych podczas integracji z WP
Funkcje Timber pomocne przy tworzeniu kodu HTML/SCSS
Include:
{% include "views/templates/front/front-module.twig" %}przyklad z dodatkową klasą:
{% include "views/templates/front/front-module.twig" with { 'class': "m-b-60" } %}Zdefiniowanie 'class' w HTML (w szablonie front-module.twig):
...Bezpośrednie odniesienie do naszego motywu:
{{ theme.link }}przyklad:
działanie:
Bezpośrednie odniesienie do całego WordPressa:
{{ site.url }}przyklad:
działanie:
Jest to adres podany w Ustawienia - Ogólne - Adres witryny (url)
Wyświetlenie aktualnego roku:
{{ now|date('Y') }}przyklad:
2019Nazwa i opis strony:
{{ site.name }}
{{ site.description }}
przyklad:
Nazwa i opis pochodzą z Ustawienia - Ogólne - Tytuł witryny / Opis
Funkcje pomocne przy podpinaniu wpisów:
Tytuł wpisu:
{{ post.title }}przyklad:
Tytuł najnowszego wpisu na naszym blogu
Funkcje pomocne przy podpinaniu wpisów:
Odnośnik do wpisu:
{{ post.link }}przyklad:
{{ post.title }}
Otrzymujemy:
Tytuł najnowszego wpisu na naszym blogu
Funkcje pomocne przy podpinaniu wpisów:
Data publikacji wpisu:
{{ post.date("d F Y") }}przyklad:
12 marca 2019
Funkcje pomocne przy podpinaniu wpisów:
Wyświetlenie contentu wpisu:
{{ post.content }}przyklad:
Lorem ipsum dolor...