ستارتر اول که کار کردن با آن بسیار ساده است UnderScores نام دارد

توسعه قالب در وردپرس ، یکی دیگر از استارتر هایی که کارکردن با آن آسان است و پشتیبانی از Sass هم دارد استفاده از ابزار است

این وب سایت برای شما یک قالب خام وردپرس با همه پیش فرض هایی که باید داشته باشد از قبیل انواع فایل ها

و ساختارها را به صورت پیش فرض دارد و کافی است که نام پوسته خود را جهت شروع وارد کنید نسخه ای که دانلود

میشود را با وارد شدن در آن و زدن دستور npm install میتوان کارکردن با sass را بدست آورید در نهایت هم با دستور

npm run bundle نسخه نهایی شده را جهت به شما در یک فایل zip تحویل میدهد . این استارتر از composer هم جهت

تست کد ها استفاده میکند که کارکردن و استفاده از آن ضروری نیست .

آموزش نصب و راه اندازی

ابتدا دانلود Sage را انجام دهید و از حالت فشرده خارج نمایید

ابتدا از نصب بودن composer , yarn و نسخه node js 8  روی سیستم خود اطمینان حاصل نمایید
به مسیر wp-content/themes وارد شوید و دستور زیر را جهت ساخت اولین پروژه خود با sage وارد کنید
composer create-project roots/sage blog
در مراحل نصب مواردی تنظیمی را میتوانید به زدن enter به صورت پیش فرض رد کنید اما سه سوال در مورد آدرس و مسیر و نوع فریم ورک را تعیین کنید

آدرس را مطابق آدرسی که در لوکال دارید وارد کنید مثلا http://wp.local
مسیر  را مطابق /wp-content/themes/sage
و نام فریم روک را ترجیحا گزینه bootstrap بزنید
حالا یک قالب جدید با نام blog ایجاد شده است بعد از پایان یک پوشه به نام vendor ایجاد میشود این پوشه وابستگی های sage است و سیستم

به صورت خودکار ازآنها استفاده میکند اصلا با این پوشه کاری نداشته باشید و در پایان کار طراحی قالب باید به همراه قالب روی سایت نصب گردد.
برای توسعه frontend لازم است وارد پوشه blog شوید و دستورyarn را وارد کنید منتظر بمانید تا مراحل نصب انجام شود

در پایان این مرحله یک پوشه به نام node_modules درون sage ایجاد میشود توجه کنید که این پوشه هم مانند vendor می باشد

اما فقط در محیط توسعه به کار میرود و بعد از اتمام طراحی و کار نباید به همراه فایل های قالب zip و روی سایت آپلود شود

بعد از پایان نصب برای شروع توسعه frontend دستور yarn start را وارد کنید

حالا از درون وردپرس قالب sage را فعال کنید اگر شما صفحه سفید را صفحه اصلی میبینید به دلیل نداشتن سطح دسترسی برای

ایجاد فایل های cache balde است در لینوکس دستور  sudo chmod -R 775 /wp را بزنید wp در سیستم من همان پوشه

اصلی root وردپرس است با این دستور سطح دسترسی را برای ایجاد فایل های cache به sage میدهید.

جهت توسعه به صورت realtime browsersync باید از صفحه ای که به صورت خودکار yarn باز میکند استفاده کنید که

معمولا با پورت 3000 است http://localhost:3000/ و از آدرس v-host که از قبل ایجاد کرده اید برای نسخه نهایی استفاده کنید

(نسخه نهایی یعنی بعد از اینکه توسعه تمام شد با دستور yarn build:production فایل های scss به صورت کامپایل شده در فایل اصلی style.css ایجاد میشود)

برای شروع ایجاد تغییر در استایل از مسیر wp-content/themes/sage/resources/assets/styles/main.scss وارد شوید

و قبل از شروع کار کمی با scss آشنا باشید. میتوانید مطابق سلیقه خود استایل را توسعه و تغییر دهید.

sage از سیستم eslint استفاده میکند eslint تلاش میکند که کدها بر اساس نظم و قاعده خاصی نوشته شود شاید عجیب باشد که یک فاصله

خالی را هم به عنوان خطای کامپایلری می شناسد برای اینکه مطابق آن عمل کنید میتوانید کدهای خود را بر از تغییرات با ابزاراهایی که

درون gui ها مانند visual studio code اصلاح یا فرمت کنید . یا اینکه eslint را کلا غیرفعال نمایید

جهت غیرفعال سازی کلی eslint در مسیر assets\build\webpack.config.js حدودا در خط ۱۸۰ تکه کد زیر را حذف کنید