تو قسمت قبل یعنی توسعه وردپرس با موتور قالب twig – مقدمه فهمیدیم که Twig (توسط افزونه Timber) می تونه به توسعه دهنده ها در کد نویسی ماژولار در قالب نویسی وردپرس و حتی افزونه نویسی کمک کنه. با این رویکرد شما می تونین بخش منطق و نمایش اپلیکیشن وب خودتون رو جدا کنید. اجازه بدین که به بخش فنی این آموزش بریم:

ساخت قالب twig، تبدیل HTML به فایل های Twig، و چگونه رندر کردن منطق یا داده ها بوسیله قالب ها.

نصب Timber

اول از همه من میخوام Timber رو نصب کنم. این افزونه وردپرس به یکپارچه سازی موتور قالب twig با وردپرس کمک می کنه. پس بیاین این کارو بکنیم.

  • وارد پیشخوان وردپرس خود بشین
  • به قسمت افزونه ها > افزودن برید
  • افزونه timber را جستجو کنین
  • این افزونه رو نصب و سپس فعال کنین

یکبار که timber نصب شد، شما می تونین جداسازی فایل های قالب خودتون رو به فایل های داده(data) و نمایش(view) شروع کنید.

یک قالب Tiwg بسازید

قبل از اینکه ایجاد قالب های twig رو شروع کنیم، پیشنهاد می کنم که وردپرس رو روی سیستم خودتون به صورت لوکال نصب کرده باشین. برای این بخش از آموزش راه های زیر را دنبال کنید:

  • نصب وردپرس روی لوکال هاست(localhost)
  • افزونه timber رو نصب و سپش فعال کنید
  • دل بخواهی: یک پوسته مناسب هم نصب کنید

برای راحتی کار می تونید از Timber Starter Theme استفاده کنید.

حالا دیگه باید شروع کنیم. من میخوام یک پیام رو در بالای صفحه خانگی یا homepage نمایش بدم. چطور این کار رو بدون استفاده از Twig انجام می دم؟ احتمالا همونطور که در کد زیر میبینید، یک تکه کد HTML درون فایل PHP قرار می دم تا پیام خوش آمدگویی رو چاپ کنه. فایل index.php شبیه زیر میشه:

حالا صفحه خانگی وردپرسی که روی لوکال هاست نصب کردیم دقیقا پیام خوش آمد گویی رو بالا صفحه نمایش میده. این هم عکس:

home-page-preview

مشکل

اشکالی که این رویکرد داره اینه که واحد منطق یا داده با واحد نمایش قاطی شده. و این باعث می شه که درک و خوانایی کد سخت تر بشه به عنوان مثال شما یه حلقه وردپرس رو بعد از این کد ها اضافه کنید که خودش ممکنه دارای چندین آرگومان باشه و بعد فیلتر و بعد از آن هم صفحه بندی… پس این به هم ریختگی کد که php داخل html باشه و … منطقی به نظر نمی رسد.

رویکرد ماژولار

برای ایجاد ساختار ماژولار، ما به محتوای صفحه خانگی خودمون به شکل بلاک و بخش بخش و یا مولفه ای و یا کامپوننتی نگاه می کنیم. بطور پیشفرض ما دو بخش کامل داریم یکی بخش حلقه پست های ما و دیگری بخش صفحه بندی. حالا ما میخوایم یک مولفه با بخش دیگر در بالا اضافه کنیم که همون پیام خوش آمدگویی ما هست. پس بیاین یک فایل twig برای این بخش یا مولفه درست کنیم:

یک فایل خالی داخل ویرایشگر متنی خود باز کنید و کدهای زیر را داخل آن کپی کنید.

در شاخه اصلی پوسته خود یک پوشه با عنوان views ایجاد کنید و این فایل رو با پسوند .twig ذخیره کنید. به عنوان مثال من این فایل رو با عنوان welcome.twig ذخیره می کنم.

رندر کردن قالب twig

Timber با توابعی که داره به ما اجازه می ده قالب رو رندر کنیم. شما می تونید این تابع یا متد استاتیک رو اینطور صدا بزنید:

این تابع می تونه چهار آرگومان قبول کنه که البته این دیگه خارج از این چارچوب این سری آموزشی هست ولی شما می تونید از مستندات Timber استفاده کنید. ما می تونیم نام هر فایل Twig که داخل پوشه views هست رو به عنوان قالب به این تابع ارسال کنیم.

بیاین پیام خوش آمد گویی رو داخل فایل index.php رندر کنیم.

Timber فایل welcome.twig را رندر می کنه یعنی فایل HTML رو لود می کنه و به عنوان پایه ی نمایش در بخش عمومی اون رو اینطور نمایش می ده:

twig در وردپرس

تابع render() فایل welcome.twig رو به عنوان آرگومنت می گیره، اما بصورت خودکار میره سراغ پوشه ای که کنارش با عنوان views مشخص شده. اگر میخواین از نام و یا مسیر دلخواه خودتون به عنوان آدرس فایل های نمایش twig استفاده کنین باید چیکار کنید؟ به عنوان مثال من یک پوشه twig داخل پوشه اصلی قالبم ساختم و آدرسش رو به عنوان آرگومنت به تابع ارسال کردم.

ترتیب بارگذاری استاندارد یا رسمی timber

Timber اول میره سراغ قالب فرزند یا child-theme و بعد سراغ قالب والد یا همون قالب اصلی(مثل نحوه کار وردپرس). ترتیب رسمی و استاندارد به این ترتیبه:

  1. مکانی که کاربر تعریف کرده و به عنوان آرگومان به تابع فرستاده.
  2. پوشه ای که اسکریپت PHP در اون پوشه صدا میزنه(این پوشه افزونه هست)
  3. قالب فرزند.
  4. قالب والد.
  5. پوشه ای که اسکریپت PHP در اون پوشه صدا میزنه(این همون پوشه قالبه)
مورد دوم و چهارم مثل هم هستن ولی تفاوتشون چیه؟ اگه ما از Timber به عنوان افزونه نصب شده یا داخل افزونه استفاده کنیم، چون افزونه زودتر از قالب لود میشه پس این همون مورد دومه و اگر هم داخل قالب از این افزونه یا کتابخونه ش استفاده کنیم و چون پوسته آخر از همه لود میشه پس میشه مورد آخری

خب، حالا فایل index.php ما هیچ کد html داخل خودش نداره و توسط یک قالب twig رندر میشه.

حالا بیاین یه سری داده پویا یا داینامیک از index.php برای welcome.twig بفرستیم تا twig با این داده ها رندر بشه.

ارسال داده بوسیله Timber به فایل های twig

برای ارسال داده از فایل PHP به فایل twig، لازمه که بصورت یک آرایه این داده ها رو به فایل twig بفرستین. تابع render آرایه ای از داده ها رو برای ارسال به فایل twig می گیرد تا رندر شدن فایل با توجه به موقعیت و داده ها و پویا صورت بگیره. حالا این آرایه رو $context اسم گذاری کنیم که یک آرایه انجمنی هست. یعنی بصورت جفت های کلید-مقدار کار می کنه.

بیاین یک جفت کلید-مقدار بسازیم و پیام خوش آمد گویی رو داینامیک یا پویا کنیم و بعد این داده رو به فایل twig بفرستیم.

فایل داده php

فایل index.php من یه شبیه به اینه:

  • پس داخل فایل index.php، یک آرایه خالی با عنوان $context تو خط ۸ ایجاد کردم. بعد تو خط ۱۱ یه متغیر $var با مقدار Dynamic Message مقدار دهی کردم. تو خط ۱۴ یه کلید با عنوان the_message که برابر با مقدار $var هست رو برای ارسال به فایل twig ایجاد کردم.
  • تو خط ۱۷ تابع render رو با فایل welcome.twig صدا زدم، اما این دفه یه آرگومان اضافی هم که همون $context ما که حاوی داده های ارسالی به twig هست رو بهش اضافه کردم. یعنی این آرگومانی که توسط Timber ارائه شده میتونه به ما کمک کنه تا داده های خودمون رو از فایل php به فایل twig ارسال کنیم.
  • بنابراین ما یک آرایه ایجاد کردیم و پیام های پویا رو به اون دادیم(شما میتونین با توجه به کاربرتون پیام های مختلفی بهش بدین مقلا اسم کوچیک کاربر رو بگیرین و همراه آرایه یه فایل twig بفرتسین)

فایل قالب twig

حالا باید از داده هایی که تو قسمت قبلی برای این فایل twig ارسال کردیم استفاه کنیم که همون the_message هست. ما میتونیم یک متغیر رو داخل قالب twig خودمون با گذاشتن دو تا آکولاد دو طرف این متغیر چاپ کنیم. به عنوان مثال برای چاپ $var داخل فایل twig میتونیم {{ var }} بنویسیم. یعنی دقیقا کاری که من انجام دادم:

مقدار the_message داخل تگ h2 چاپ میشه. میدونم که خیلی ساده بود ولی میبینین که کد نویسی خیلی تمیز تر انجام میشه. تو قسمت های بعدی باز هم مثال میزنیم.

خب این هم از این، کد رو دخیره کنین و پیام داینامیکی که ساختین رو ببینین. این هم نتیجه نهایی تا این قسمت:

dynamic_message

بطور خلاصه، حالا شما میتونین از فایل PHP به عنوان بخش منطق و از فایل twig هم به عنوان بخش نمایش استفاده کنین. تو فایل twig میتونین عناصر HTML رو به همراه متغیر های ارسالی از php فقط با گذاشتن دو آکولاد در دوطرف متغیر چاپ کنید.

این رویکرد ماژولار برای هر بخش از قالب وردپرس شما استفاده بشه. به این فکر کنید که یه بخش با عنوان message.twig دارید که میتونین هرکجای قالب و هر زمان که بخواین و به هر تعدا اون رو نمایش بدین.

این یک پیاده سازی خیلی ساده و بنیادی tiwg در timber بود. هر چند در دو مقاله بعدی در رابطه با کدهای پر استفاده Timber، مدیریت تصاویر و ایجاد منو بدون استفاده از از تابع وردپرس بحث می کنیم.

ادامـــه دارد…


 
ما مایلیم مطالب جدید را در کانال تلگرام به شما اطلاع دهیم.