تو قسمت قبل یعنی توسعه وردپرس با موتور قالب 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 شبیه زیر میشه:
|
1 2 3 4 5 6 7 8 9 |
<?php /** * Homepage */ get_header(); ?> <div> <?php echo "Welcome to my blog!"; ?> </div> <?php get_footer(); ?> |
حالا صفحه خانگی وردپرسی که روی لوکال هاست نصب کردیم دقیقا پیام خوش آمد گویی رو بالا صفحه نمایش میده. این هم عکس:
مشکل
اشکالی که این رویکرد داره اینه که واحد منطق یا داده با واحد نمایش قاطی شده. و این باعث می شه که درک و خوانایی کد سخت تر بشه به عنوان مثال شما یه حلقه وردپرس رو بعد از این کد ها اضافه کنید که خودش ممکنه دارای چندین آرگومان باشه و بعد فیلتر و بعد از آن هم صفحه بندی… پس این به هم ریختگی کد که php داخل html باشه و … منطقی به نظر نمی رسد.
رویکرد ماژولار
برای ایجاد ساختار ماژولار، ما به محتوای صفحه خانگی خودمون به شکل بلاک و بخش بخش و یا مولفه ای و یا کامپوننتی نگاه می کنیم. بطور پیشفرض ما دو بخش کامل داریم یکی بخش حلقه پست های ما و دیگری بخش صفحه بندی. حالا ما میخوایم یک مولفه با بخش دیگر در بالا اضافه کنیم که همون پیام خوش آمدگویی ما هست. پس بیاین یک فایل twig برای این بخش یا مولفه درست کنیم:
یک فایل خالی داخل ویرایشگر متنی خود باز کنید و کدهای زیر را داخل آن کپی کنید.
|
1 2 3 4 |
<!-- Welcome Template --> <section class="welcome_message"> <h2>Welcome to my website!</h2> </section> |
در شاخه اصلی پوسته خود یک پوشه با عنوان views ایجاد کنید و این فایل رو با پسوند .twig ذخیره کنید. به عنوان مثال من این فایل رو با عنوان welcome.twig ذخیره می کنم.
رندر کردن قالب twig
Timber با توابعی که داره به ما اجازه می ده قالب رو رندر کنیم. شما می تونید این تابع یا متد استاتیک رو اینطور صدا بزنید:
|
1 |
Timber::render(); |
این تابع می تونه چهار آرگومان قبول کنه که البته این دیگه خارج از این چارچوب این سری آموزشی هست ولی شما می تونید از مستندات Timber استفاده کنید. ما می تونیم نام هر فایل Twig که داخل پوشه views هست رو به عنوان قالب به این تابع ارسال کنیم.
بیاین پیام خوش آمد گویی رو داخل فایل index.php رندر کنیم.
|
1 2 3 4 5 6 7 8 9 10 |
<?php /** * Homepage */ get_header(); // Timber Render. Timber::render( 'welcome.twig' ); get_footer(); |
Timber فایل welcome.twig را رندر می کنه یعنی فایل HTML رو لود می کنه و به عنوان پایه ی نمایش در بخش عمومی اون رو اینطور نمایش می ده:
تابع render() فایل welcome.twig رو به عنوان آرگومنت می گیره، اما بصورت خودکار میره سراغ پوشه ای که کنارش با عنوان views مشخص شده. اگر میخواین از نام و یا مسیر دلخواه خودتون به عنوان آدرس فایل های نمایش twig استفاده کنین باید چیکار کنید؟ به عنوان مثال من یک پوشه twig داخل پوشه اصلی قالبم ساختم و آدرسش رو به عنوان آرگومنت به تابع ارسال کردم.
|
1 |
<?php Timber::render('twig/welcome.twig'); ?> |
ترتیب بارگذاری استاندارد یا رسمی timber
Timber اول میره سراغ قالب فرزند یا child-theme و بعد سراغ قالب والد یا همون قالب اصلی(مثل نحوه کار وردپرس). ترتیب رسمی و استاندارد به این ترتیبه:
- مکانی که کاربر تعریف کرده و به عنوان آرگومان به تابع فرستاده.
- پوشه ای که اسکریپت PHP در اون پوشه صدا میزنه(این پوشه افزونه هست)
- قالب فرزند.
- قالب والد.
- پوشه ای که اسکریپت PHP در اون پوشه صدا میزنه(این همون پوشه قالبه)
خب، حالا فایل index.php ما هیچ کد html داخل خودش نداره و توسط یک قالب twig رندر میشه.
حالا بیاین یه سری داده پویا یا داینامیک از index.php برای welcome.twig بفرستیم تا twig با این داده ها رندر بشه.
ارسال داده بوسیله Timber به فایل های twig
برای ارسال داده از فایل PHP به فایل twig، لازمه که بصورت یک آرایه این داده ها رو به فایل twig بفرستین. تابع render آرایه ای از داده ها رو برای ارسال به فایل twig می گیرد تا رندر شدن فایل با توجه به موقعیت و داده ها و پویا صورت بگیره. حالا این آرایه رو $context اسم گذاری کنیم که یک آرایه انجمنی هست. یعنی بصورت جفت های کلید-مقدار کار می کنه.
بیاین یک جفت کلید-مقدار بسازیم و پیام خوش آمد گویی رو داینامیک یا پویا کنیم و بعد این داده رو به فایل twig بفرستیم.
فایل داده php
فایل index.php من یه شبیه به اینه:
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 |
<?php /** * Homepage */ get_header(); // Context array. $context = array(); // Dynamic message. $var = 'Dynamic Message'; // Dynamic data. $context['the_message'] = $var; // Render twig file with the give $context array. Timber::render( 'welcome.twig', $context ); get_footer(); |
- پس داخل فایل 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 }} بنویسیم. یعنی دقیقا کاری که من انجام دادم:
|
1 2 3 4 |
<!-- Message Template --> <section class="message"> <h2>{{ the_message }}</h2> </section> |
مقدار the_message داخل تگ h2 چاپ میشه. میدونم که خیلی ساده بود ولی میبینین که کد نویسی خیلی تمیز تر انجام میشه. تو قسمت های بعدی باز هم مثال میزنیم.
خب این هم از این، کد رو دخیره کنین و پیام داینامیکی که ساختین رو ببینین. این هم نتیجه نهایی تا این قسمت:
بطور خلاصه، حالا شما میتونین از فایل PHP به عنوان بخش منطق و از فایل twig هم به عنوان بخش نمایش استفاده کنین. تو فایل twig میتونین عناصر HTML رو به همراه متغیر های ارسالی از php فقط با گذاشتن دو آکولاد در دوطرف متغیر چاپ کنید.
این رویکرد ماژولار برای هر بخش از قالب وردپرس شما استفاده بشه. به این فکر کنید که یه بخش با عنوان message.twig دارید که میتونین هرکجای قالب و هر زمان که بخواین و به هر تعدا اون رو نمایش بدین.
این یک پیاده سازی خیلی ساده و بنیادی tiwg در timber بود. هر چند در دو مقاله بعدی در رابطه با کدهای پر استفاده Timber، مدیریت تصاویر و ایجاد منو بدون استفاده از از تابع وردپرس بحث می کنیم.
ادامـــه دارد…
پست های دوره "توسعه وردپرس با موتور قالب twig"
- توسعه وردپرس با موتور قالب twig – مقدمه
- توسعه وردپرس با موتور قالب twig – شروع کدنویسی
- حامد مودی
- ۳۰ پست
۱۱ دیدگاه به ثبت رسیده است:
سلام
امیدوارم حالتون خوب باشه
من نتونستم ایمیلی از شما در سایتتون پیدا کنم، پس لطف کنید این پیام بنده رو تایید نکنید
من نیاز دارم در افزونه وردپرس WooCommerce Multi Vendor Premium یا همون دکان (در سایت های فارسی به این نام مشهوره) تغییراتی ایجاد بشه
آیا شما اینکار رو انجام میدید؟
اگه آره لطف کنید به بنده ایمیل بزنید تا من جزئیات رو براتون ارسال کنم تا شما براورد هزینه کنید (لطفا در متن ایمیل اشاره بکنید که از ircodex هستید)
با تشکر از شما و باز هم ازتون بابت گذاشتن پیام در این بخش عذرخواهی میکنم
بسیار متشکر
سلام متاسفانه در زمینه ووکامرس فعالیت نکردم. عذر بابت تاخیر
با سلام
چرا این سری از مقالات دیگه ادامه پیدا نکرد؟
در صورت امکان داکیومنت آفلاین ووکامرس را مانند داکیومنت وردپرس تهیه کنید
با تشکر
سلام متاسفانه فرصت ترجمه ندارم دوست عزیز. واقعا سرم شلوغه شرمنده م
سلام مهندس جان.
بنده قصد دارم یه سایت برای آموزش دوره های فتوشاپ ایجاد کنم اما نمی دونم اطلاعات دوره رو به چه شکلی باید نشون بدم
فکر کنم با استفاده از meta box باید این کارو انجام بدم
متاسفانه آشنایی خوبی با وردپرس ندارم
اگه راهنمایی کنین ممنون میشم
منتظرم مهندس جان
سلام دوست عزیز
از اونجایی که هنوز فرصت نشده این موارد رو آموزش بدم از سایت همیار وردپرس کمک بگیرین. این آموزش خوبیه برا ساخت متاباکس:
http://goo.gl/9iWQIs
مهندس جان ممنون که جواب دادین
راستش آموزش رو دیدم ولی واقعا گنگ بود
اگه امکان داره یه مطلب یا یک ویدئوی کوتاه برای این مبحث کار کنین ..
ممنون میشم
فعلا که نمیدونم فکر نکنم فرصت بشه. بذارین تا اون موقع افزونه advanced custom field رو بهتون پشنهاد کنم که خیلی امکانات به شما میده.
اینم آدرسش:
https://wordpress.org/plugins/advanced-custom-fields/
ممنون مهندس جان
خواستم بدون افزونه کار کنم
بسیار خوشحال شدم و امیدوارم این آموزش رو بزودی از سایت فوق العاده کاربردی شما ببینم
موفق باشید
سلام
امکانش هست مستندات ووکامرس را هم مثل وردپرس به صورت آفلاین ارائه بدید؟
یا روشی برای تهیه مستندات برای ووکامرس بگید.(به صورت آفلاین)
سلام نه متاسفانه فعلا در گیر خدمتم و فرصت ندارم. باید ساختارشم بررسی کنم.
ممنون از پیشنهادتون