کتابخانه jquery
همه چیز درباره jquery
همه چیز درباره jquery
توسعه قالب در ورد پرس ، برای راه اندازی کسب و کار و انجام وظایف کاری به ابزارهای مدیریت پروژه نیاز دارید.
این ابزارها در قالب نرم افزار مدیریت پروژه به شما در فرآیند کسب و کار کمک میکنند.
نرم افزارهای زیادی در این زمینه تولید شدهاند. حالا باید بهترین ابزار ممکن برای کارتان را انتخاب کرده
و وقت خودتان را صرف برنامههای نامناسب نکنید. اگر به صورت دورکاری فعالیت دارید نرم افزارهای
توسعه قالب در وردپرس ، ابزار مدیریتی برتر برای رسیدن به حداکثر بهره وری در کسب و کار را به شما معرفی میکند.
رای بهترین شروع در وردپرس باید مستندات فنی آن به خوبی مورد استفاده قرار بگیرد تا مشکلی
در روند توسعه پیش نیاید سپس با استفاده از یک Starter مانند Sage می توان پروسه طراحی قالب را آغاز کرد.
ما در این مقاله شما را با دو استارتر اصلی وردپرس آشنا میکنیم
ستارتر اول که کار کردن با آن بسیار ساده است UnderScores نام دارد
توسعه قالب در وردپرس ، یکی دیگر از استارتر هایی که کارکردن با آن آسان است و پشتیبانی از Sass هم دارد استفاده از ابزار است
این وب سایت برای شما یک قالب خام وردپرس با همه پیش فرض هایی که باید داشته باشد از قبیل انواع فایل ها
و ساختارها را به صورت پیش فرض دارد و کافی است که نام پوسته خود را جهت شروع وارد کنید نسخه ای که دانلود
npm run bundle نسخه نهایی شده را جهت به شما در یک فایل zip تحویل میدهد . این استارتر از composer هم جهت
تست کد ها استفاده میکند که کارکردن و استفاده از آن ضروری نیست .
استارتر دوم Sage نام دارد
مزیت استفاده از sage در طراحی قالب وردپرس : به طور کلی این starter هیچ افزونه و کد آماده ای را به شما
تحویل نمی دهد فقط زیرساخت را برای بهترین شروع برای شما فراهم میکند . بعد از راه اندازی شما شاهد یک صفحه سفید
هستید که آخرین مطالب بدون هیچ استایلی دیده میشوند ! خوب این چه کمکی به ما میکند ؟ استفاده از Sage برخی از ابزارهای
چه تفاوتی با روش های معمول در طراحی قالب دارد ؟ شاید تا امروز شما از قالب های آماده برای تحویل پروژه های مشتریان خود
باعث میشود که در هر پروژه سبک کد نویسی و استراکچر قالب با یکدیگر مساوی نباشد . این برای توسعه دهندگان کار ساده ای نیست
که هر روز روش های متفاوتی در توسعه را تست کنند و به رشد دانش طراحی و برنامه نویسی کمک خاصی را نمیکند . اما استفاده از
سیستم هایی مانند Sage به دلیل اینکه ساختار منسجمی را برای شما تعریف میکند باعث میشود تمرکز اصلی شما روی بهینه سازی و توسعه
اصلی باشد . این روش را میتوان به عنوان یک روش استاندارد در نظر گرفت چرا که هزاران نفر در سراسر دنیا با این روش ها کار میکنند
و روز به روز ویژگی ها جدیدی به آن اضافه میشود
آموزش نصب و راه اندازی
ابتدا دانلود Sage را انجام دهید و از حالت فشرده خارج نمایید
آدرس را مطابق آدرسی که در لوکال دارید وارد کنید مثلا 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 باز میکند استفاده کنید که
برای شروع ایجاد تغییر در استایل از مسیر wp-content/themes/sage/resources/assets/styles/main.scss وارد شوید
و قبل از شروع کار کمی با scss آشنا باشید. میتوانید مطابق سلیقه خود استایل را توسعه و تغییر دهید.
sage از سیستم eslint استفاده میکند eslint تلاش میکند که کدها بر اساس نظم و قاعده خاصی نوشته شود شاید عجیب باشد که یک فاصله
خالی را هم به عنوان خطای کامپایلری می شناسد برای اینکه مطابق آن عمل کنید میتوانید کدهای خود را بر از تغییرات با ابزاراهایی که
درون gui ها مانند visual studio code اصلاح یا فرمت کنید . یا اینکه eslint را کلا غیرفعال نمایید
جهت غیرفعال سازی کلی eslint در مسیر assets\build\webpack.config.js حدودا در خط ۱۸۰ تکه کد زیر را حذف کنید
توسعه قالب در وردپرس ، متاسفانه استفاده بیش از اندازه از قالب های متنوع با کاربری های مختلف باعث افت کیفیت
سایت هایی میشود که با ودرپرس طراحی و تولید میشوند . مدیران سایتهای موفق بر این باور رسیده اند
که طراحی اختصاصی قالب وردپرس بهترین روش طراحی و توسعه در وردپرس در همه جای دنیا است
چرا که بسیار سبک و ساده و با استفاده از زیرساختی استوار بنا میشود. کیفیت SEO بالاتر میرود و میتوان
انواع طرح ها را پیاده سازی کرد . ضمن اینکه در آینده به راحتی میتوان قالب را توسعه و گسترش داد.
توسعه قالب در وردپرس ، خیر اصلا اینگونه نیست ، این یک Starter است یعنی چیزی که برای شروع لازم است و در هر نوع طراحی
لازم است بعد از اولین نصب آن شاهد این خواهید بود که تنها یک صفحه سفید به شما تحویل میدهد !
برای کار کردن با آن لازم نیست چیز جدیدی را یادبگیرد همان دانش قبلی را که در توسعه های گذشته بدست
آوده اید را در همین جا به کار بگیرد.این استارتر کاملا متن باز است و برای استفاده از آن لازم به پرداخت هیچ
هزینه ای نیست در واقع بعد از پایان کار شما هستید که روی کارتان لایسنس قرار میدهید و میتوانید پروژه
ساخته شده خود را به صورت قانونی حتی در کشورهایی که اصول کپی و رایت را رعایت میکنند به فروش برسانید.
از زبان مشتریان