Je\u015bli patrzysz na W\u0105sy, by\u0107 mo\u017ce zainteresuje Ci\u0119 Kierownica, a je\u015bli patrzysz na Blade, gor\u0105co polecam sprawdzenie Sage<\/a> z zespo\u0142u Roots<\/a>.<\/p>\n Ale w tym ostatnim po\u015bcie zamierzam kontynuowa\u0107 z Timberem, co przedstawi\u0142em wczoraj. Nie chodzi mi tak bardzo o to, co jest u\u017cywane (poniewa\u017c wszystkie maj\u0105 swoje kompromisy), o ile jest to sp\u00f3jne.<\/p>\n Maj\u0105c to na uwadze, oto jak mo\u017cesz zacz\u0105\u0107 u\u017cywa\u0107 Timber<\/a> w swoich projektach.<\/p>\n Aby rozpocz\u0105\u0107, musisz zna\u0107 Composer i mie\u0107 konfiguracj\u0119 lokalnego \u015brodowiska programistycznego. Je\u015bli nie masz \u017cadnego z nich lub potrzebujesz pomocy, mam dla Ciebie ochron\u0119:<\/p>\n Po przej\u015bciu krok\u00f3w opisanych w ka\u017cdym z tych przewodnik\u00f3w powiniene\u015b by\u0107 gotowy. Oto, co zamierzamy zrobi\u0107.<\/p>\n B\u0119d\u0119 do tego u\u017cywa\u0142 Valeta, co oznacza, \u017ce \u200b\u200bb\u0119d\u0119 mia\u0142 katalog z najnowsz\u0105 wersj\u0105 WordPressa<\/a> (czyli 4.8.3) zainstalowan\u0105 w jego katalogu.<\/p>\n Oznacza to, \u017ce b\u0119d\u0119 mie\u0107 baz\u0119 danych ju\u017c gotow\u0105 do pracy:<\/p>\n Wydam nast\u0119puj\u0105ce polecenia, aby skonfigurowa\u0107 Laravela i bezpieczn\u0105 instalacj\u0119 (aby na\u015bladowa\u0107 \u015brodowisko pomostowe):<\/p>\n Abym m\u00f3g\u0142 uzyska\u0107 dost\u0119p do witryny w przegl\u0105darce.<\/p>\n Dla ciekawskich u\u017cywam:<\/p>\n I \u017cadnych innych wtyczek. To tylko waniliowa instalacja inna ni\u017c ta, kt\u00f3r\u0105 widzisz powy\u017cej.<\/p>\n W tym momencie jestem gotowy do zainstalowania Timber.<\/p>\n Zak\u0142adaj\u0105c, \u017ce post\u0119powa\u0142e\u015b zgodnie z powy\u017cszymi wskaz\u00f3wkami dla Valeta i Composera, powiniene\u015b by\u0107 gotowy. Korzystaj\u0105c z terminala, przejd\u017a do katalogu instalacyjnego WordPress.<\/p>\n Nast\u0119pnie wydaj nast\u0119puj\u0105ce polecenie:<\/p>\n Spowoduje to zainstalowanie Timber, ale nadal b\u0119dziesz musia\u0142 zaktualizowa\u0107 plik functions.php swojego motywu, aby poprawnie u\u017cywa\u0142 autoloadera Composera.<\/p>\n Zak\u0142adaj\u0105c, \u017ce wszystko posz\u0142o poprawnie, powiniene\u015b by\u0107 w stanie od\u015bwie\u017cy\u0107 swoj\u0105 witryn\u0119, przej\u015b\u0107 do dowolnych post\u00f3w, stron itd. i nic nie powinno by\u0107 niesprawne.<\/p>\n Wreszcie nadszed\u0142 czas, aby u\u017cy\u0107 Timber, aby zast\u0105pi\u0107 wi\u0119kszo\u015b\u0107 tego, do czego przywykli\u015bmy w kontek\u015bcie szablonu WordPress.<\/p>\n Zdecydowa\u0142em si\u0119 zrobi\u0107 to w content-page.php<\/strong>, aby u\u0142atwi\u0107 \u015bledzenie. Zauwa\u017c, \u017ce segment kodu, kt\u00f3ry zmieniam oryginalnie wygl\u0105da tak:<\/a><\/p>\n W tym po\u015bcie nie zamierzam ca\u0142kowicie odtwarza\u0107 tego, co widzisz powy\u017cej, ale zaczn\u0119 od tego, co jest potrzebne, aby zacz\u0105\u0107 u\u017cywa\u0107 silnika szablon\u00f3w w kontek\u015bcie podstawy PHP.<\/p>\n Najpierw b\u0119dziesz musia\u0142 stworzy\u0107 szablon, kt\u00f3ry mo\u017cna zastosowa\u0107 do przyk\u0142adowej strony w standardowej instalacji WordPressa. Zadzwoni\u0142em do mojego template-timber-page.php<\/a> i wygl\u0105da to tak:<\/p>\n W powy\u017cszym kodzie dzieje si\u0119 tak:<\/p>\n W tym miejscu wa\u017cne jest, aby utworzy\u0107 rzeczywisty plik ga\u0142\u0105zki (kt\u00f3ry jest rozszerzeniem pliku szablonu Timber). Stworzy\u0142em wi\u0119c content-sample-page.twig<\/strong> i wygl\u0105da to tak:<\/a><\/p>\n Po utworzeniu instancji obiektu Timber, a nast\u0119pnie zast\u0105pieniu kodu, kt\u00f3ry widzisz powy\u017cej, zauwa\u017cysz, \u017ce kod czyta si\u0119 troch\u0119 inaczej (cho\u0107 nie jest to trudne do na\u015bladowania).<\/p>\n Aby zastosowa\u0107 szablon, przejd\u017a do Strony<\/strong> w WordPressie. Zlokalizuj przyk\u0142adow\u0105 stron\u0119<\/strong>, a nast\u0119pnie w menu rozwijanym szablonu wybierz t\u0119, kt\u00f3r\u0105 w\u0142a\u015bnie utworzyli\u015bmy, u\u017cywaj\u0105c powy\u017cszego tytu\u0142u:<\/p>\n Gdy to zrobisz, mo\u017cesz wy\u015bwietli\u0107 post. Zauwa\u017cysz, \u017ce wygl\u0105da troch\u0119 nago w por\u00f3wnaniu do tego, do czego jeste\u015bmy przyzwyczajeni:<\/p>\n Ale masz og\u00f3lne poj\u0119cie, w jaki spos\u00f3b mo\u017cemy u\u017cy\u0107 kontekstu, aby uzyska\u0107 dost\u0119p do wielu tych samych w\u0142a\u015bciwo\u015bci, do kt\u00f3rych przywykli\u015bmy w WordPressie, bez konieczno\u015bci za\u015bmiecania kodu znacznikami i PHP oraz czymkolwiek innym, czego u\u017cywamy do u\u017cywania.<\/p>\n Wiem, \u017ce jest to g\u0142\u00f3wnie przyspieszony kurs tworzenia szablon\u00f3w i nie obejmuje tak du\u017co, jak m\u00f3g\u0142by. Poniewa\u017c ten post zbli\u017ca si\u0119 do 1000 s\u0142\u00f3w, musz\u0119 gdzie\u015b narysowa\u0107 granic\u0119, wi\u0119c zdecyduj\u0119 si\u0119 zrobi\u0107 to tutaj.<\/p>\n Nie oznacza to jednak, \u017ce sko\u0144czy\u0142em o tym dyskutowa\u0107. Planuj\u0119 wr\u00f3ci\u0107 do bardziej zaawansowanych temat\u00f3w zwi\u0105zanych z tworzeniem szablon\u00f3w w przysz\u0142ych doniczkach.<\/p>\n Ale je\u015bli jeste\u015b zainteresowany, gor\u0105co polecam pod\u0105\u017canie zar\u00f3wno za przewodnikiem Getting tarted<\/a> dla Timber, jak i projektem na GitHub<\/a>.<\/p>\n To przynajmniej da ci punkt wyj\u015bcia, od kt\u00f3rego mo\u017cesz zrobi\u0107 jeszcze wi\u0119kszy post\u0119p w tworzeniu czystszego, bardziej logicznie oddzielnego kodu ni\u017c ten, do kt\u00f3rego przywykli\u015bmy w WordPressie.<\/p>\nSzablony WordPress: Korzystanie z drewna<\/h2>\n
![\"Szablony](\"https:\/\/wordpress.mediadoma.com\/wp-content\/uploads\/2022\/01\/post-165381-61e77ec006741.png\")
<\/a><\/p>\n\n
1 Skonfiguruj lokaln\u0105 instalacj\u0119 dla drewna<\/h3>\n
![\"Szablony](\"https:\/\/wordpress.mediadoma.com\/wp-content\/uploads\/2022\/01\/post-165381-61e77ec4380aa.png\")
<\/a><\/p>\n$ valet link\n$ valet secure<\/code><\/pre>\n![\"Szablony](\"https:\/\/wordpress.mediadoma.com\/wp-content\/uploads\/2022\/01\/post-165381-61e77ec7806b6.png\")
<\/a><\/p>\n\n
2 Instalacja drewna<\/h3>\n
![\"Szablony](\"https:\/\/wordpress.mediadoma.com\/wp-content\/uploads\/2022\/01\/post-165381-61e77ecb7040b.png\")
<\/a><\/p>\n$ composer require timber\/timber<\/code><\/pre>\n![\"Szablony](\"https:\/\/wordpress.mediadoma.com\/wp-content\/uploads\/2022\/01\/post-165381-61e77ece8223b.png\")
<\/a><\/p>\n![\"Szablony](\"https:\/\/wordpress.mediadoma.com\/wp-content\/uploads\/2022\/01\/post-165381-61e77ed28264d.png\")
<\/a><\/p>\n3 Inicjalizacja drewna<\/h3>\n
<article id=\"post-<?php the_ID(); ?>\" <?php post_class(); ?>>\n <?php\n \/\/ Post thumbnail.\n twentyfifteen_post_thumbnail();\n ?>\n\n <header class=\"entry-header\">\n <?php the_title( '<h1 class=\"entry-title\">', '<\/h1>' ); ?>\n <\/header><!-- .entry-header -->\n\n <div class=\"entry-content\">\n <?php the_content(); ?>\n <?php\n wp_link_pages( array(\n 'before' => '<div class=\"page-links\"><span class=\"page-links-title\">'. __( 'Pages:', 'twentyfifteen' ). '<\/span>',\n 'after' => '<\/div>',\n 'link_before' => '<span>',\n 'link_after' => '<\/span>',\n 'pagelink' => '<span class=\"screen-reader-text\">'. __( 'Page', 'twentyfifteen' ). ' <\/span>%',\n 'separator' => '<span class=\"screen-reader-text\">, <\/span>',) );\n ?>\n <\/div><!-- .entry-content -->\n\n <?php edit_post_link( __( 'Edit', 'twentyfifteen' ), '<footer class=\"entry-footer\"><span class=\"edit-link\">', '<\/span><\/footer><!-- .entry-footer -->' ); ?>\n\n<\/article><!-- #post-## --><\/code><\/pre>\n<?php\n\n\/**\n * Template Name: Timber Template\n * Description: Replaces the standard page with a Timber template.\n *\/\n\n$timber = new TimberTimber();\n$context = Timber::get_context();\n$post = new TimberPost();\n\n$context['post'] = $post;\nTimber::render(\n array( 'content-'. $post->post_name. '.twig', 'page.twig' ),\n $context\n);\n<\/code><\/pre>\n\n
{% block content %}\n <article id=\"post-{{post.ID}}\" class=\"{{body_class}}\">\n\n <header class=\"entry-header\">\n <h1 class=\"article-h1\">{{post.title}}<\/h1>\n <\/header><!-- .entry-header -->\n\n <div class=\"entry-content\">\n {{post.content}}\n <\/div><!-- .entry-content -->\n\n <\/article><!-- #post-## -->\n{% endblock %}\n<\/code><\/pre>\n4 Stosowanie szablonu<\/h3>\n
![\"Szablony](\"https:\/\/wordpress.mediadoma.com\/wp-content\/uploads\/2022\/01\/post-165381-61e77ed87f4dc.png\")
<\/a><\/p>\n![\"Szablony](\"https:\/\/wordpress.mediadoma.com\/wp-content\/uploads\/2022\/01\/post-165381-61e77eddccec8.png\")
<\/a><\/p>\nWi\u0119cej zasob\u00f3w<\/h2>\n