نسخه اصلی

آشنایی با theme.json در وردپرس

  • دسته بندی ها: وردپرس

توسعه دهندگان وردپرس کنترل بیشتری نسبت به قبل دارند زیرا اکوسیستم وردپرس همچنان در حال تکامل است. ویرایش کامل سایت (FSE) زمینه بازی را برای همه کاربران فراهم می‌کند تا از ابتدا و به ویژه با استفاده از فایل theme.json یک پوسته بسازند.
در این مطلب، آنچه را که فایل theme.json ارائه می‌دهد، از جمله ارتباط آن با ویرایش کامل سایت Full site editing (FSE)، بررسی خواهیم کرد. در پایان، متوجه خواهید شد که چگونه می توانید از قابلیت‌های آن برای ایجاد وب‌سایت مدرن و کارآمد صرف نظر از توانایی توسعه خود استفاده نمائید.

معرفی فایل theme.json

در هسته خود، theme.json یک فایل پیکربندی است که تنظیمات و سبک‌های قالب وردپرس را تعریف می‌کند. از JSON استفاده می‌کند، که داده‌های ساختاری است که جفت‌های key-value زبان اصلی خود را به ارث می‌برد تا به شما امکان بدهد کد خود را بنویسید.

فایل theme.json برای کنترل جنبه‌های مختلف پوسته شما کلیدی است که شامل پالت‌های رنگ، تنظیمات تایپوگرافی، گزینه‌های طرح‌بندی، سبک‌های هر بلوک، ویژگی‌های CSS سفارشی و موارد دیگر می‌شود.

در حالی که این تا کنون خیلی خاط و متفاوت به نظر نمی‌رسد، theme.json برای آینده توسعه وردپرس مهم است.

چرا theme.json به توسعه قالب وردپرس مرتبط است

رویکرد معمول وردپرس برای توسعه تم و ایجاد افزونه‌ها اغلب حول ویرایش فایل‌های پوسته با PHP و استفاده از فایل functions.php و سایر کارهای فنی می‌چرخد.

فایل theme.json تغییر قابل توجهی را نشان می‌دهد، به خصوص برای توسعه تم ها. چند دلیل برای این وجود دارد:

  •  این فایل نشان دهنده یک مکان سازماندهی شده برای تعیین تنظیمات و سبک‌های پوسته است. این امر نیاز به آرایه پراکنده ای از فایل های CSS و PHP را کاهش می‌دهد.
  • این رویکرد متمرکز اعلام سبک‌ها و تنظیمات در theme.json به این معنی است که وردپرس می‌تواند CSS کارآمدتری تولید کند. در مقایسه با استفاده از فریمورکی مانند jQuery، پتانسیل بهبود عملکرد وجود دارد.
  • شما کنترل بیشتری بر طراحی سایت و بلوک‌های فردی خود نسبت به قبل دارید. این امر توسعه تم را برای کاربران با دانش فنی کمتر عادلانه‌تر می‌کند.
  • همانطور که FSE به تکامل خود ادامه می دهد، فایل theme.json نقش مهمی در نحوه تعامل تم‌ها، سبک های گلوبال و ویرایشگر بلاک خواهد داشت.

ترکیب همه این جنبه‌ها منجر به یک روش استاندارد برای تعریف تنظیمات و سبک‌ها برای پوسته شما می‌شود. برای هر کسی که مایل به درک و کار با پوسته‌های مختلف است، پذیرش theme.json امکان می‌دهد تم‌های وردپرس قوی‌تر، انعطاف‌پذیرتر و کاربرپسندتری ایجاد کند.

کجا می‌توان فایل theme.json را پیدا کرد

اول از همه، فایل theme.json را در قالب‌های سنتی یا کلاسیک پیدا نخواهید کرد. برای یافتن و استفاده از این فایل، به یک تم بلوک اختصاصی نیاز دارید. همانطور که گفته شد، تا زمانی که وردپرس 5.8 یا بالاتر را اجرا کنید، می توانید فایل را در هر قالبی ایجاد کنید.
مکان معمولی برای فایل theme.json در wp-content/themes/[your-theme] است. اگر فایل وجود ندارد، باید ویرایشگر کدنویسی مورد علاقه خود را باز کرده و در صورت لزوم فایل را ایجاد کنید
اگر می‌خواهید یک فایل جدید از ابتدا ایجاد کنید، اما همچنین می‌خواهید پیچیدگی‌های موجود در آن را قبل از سفارشی کردن فایل خود ببینید، قالب پیش‌فرض بیست و بیست و چهار را بررسی کنید.
به عنوان یک تم بلوکی، یک فایل theme.json برای مشاهده دارد. وقتی به ساختار در چند بخش بعدی نگاه می کنیم، باز کردن آن ممکن است مفید باشد.

آنچه برای کار با theme.json نیاز دارید

البته، همه نمی‌توانند فایل کانفیگ را باز کرده و دست به کار شوند. برای ساخت و سفارشی کردن یک پوسته، همچنان به مهارت‌ها و دانش اساسی نیاز دارید:

  • دانش اولیه JSON – آشنایی با سینتکس و ساختار JSON بسیار مهم است.
  • درک CSS – متوجه خواهید شد که بسیاری از اشیاء و خصوصیات theme.json با همتایان CSS آن مطابقت دارند. CSS Chops یک مزیت خواهد بود.
  • دانش ویرایشگر بلوک وردپرس – درک نحوه کار بلوک‌ها، همراه با گزینه‌های سفارشی‌سازی آنها، به شما در ساختن کمک می‌کند.
    اگرچه کاملا ضروری نیست ولی پیشنهاد می‌کنیم حداقل مفاهیم کلیدی FSE را درک کنید، که به شما کمک می‌کند تا فایل theme.json را به روشی موثرتر استفاده کنید.

در نهایت، چند نکته اضافی وجود دارد که ما توصیه می‌کنیم:

  • ویرایشگر کد – انتخاب یک ویرایشگر با کیفیت که برجسته سازی و اعتبار سنجی سینتکس JSON را ارائه می‌دهد، گردش کار شما را لذت بخش تر می‌‎کند.
  • محیط توسعه محلی – استفاده از ابزاری برای کار بر روی پوسته به شما امکان می‌دهد تغییرات خود را سریع و بدون تاثیرگذاری بر سایت زنده تست و آزمایش کنید.
    با در اختیار داشتن این ابزارها و دانش، به خوبی مجهز خواهید بود تا با استفاده از theme.json، تم وردپرس خود را سفارشی کنید.

آناتومی، ساختار و سلسله مراتب theme.json

بدیهی است که فایل theme.json ساختاری دارد که باید آن را درک کنید. همچنین دارای یک سلسله مراتب است، همراه با برخی از عناصر منحصر به فرد که نیاز به توضیح بیشتر دارد.
این احتمالا پیچیده‌ترین بخش استفاده از فایل پیکربندی است، اما حتی در این صورت، مفاهیم را به راحتی درک خواهید کرد.

بیایید با ساختار شروع کنیم، سپس به سراغ سایر عناصر theme.json برویم.

ساختار اساسی

با توجه به اینکه فایل از فرمت JSON پیروی می‌کند، ممکن است از قبل مفهوم کلی ساختار را درک کنید. اول از همه، کل آبجکت فایل در آکولاد پیچیده می‌شود، همانطور که برخی از اشیاء مختلف دیگر درون آن قرار می‌گیرند. هر شی از جفتهای key-value تشکیل شده است، از تک کوتیشن یا دابل کوتیشن برای کلیدها و کاما برای پایان دادن به خط استفاده کنید.

حداقل چیزی که یک فایل theme.json نیاز دارد نسخه (version)، تنظیمات (settings) و اشیاء سبک ( styles) است:

[json]    {  "version": 2,  "settings": {  // Global settings go here  },  "styles": {  // Global styles go here  }  }    [/json]

تنظیمات و اشیاء سبک ساده هستند، اما نسخه نیاز به توضیح بیشتری دارد. این مقدار یک عدد صحیح خواهد بود که با نسخه API که برای خواندن فایل خود استفاده می کنید مطابقت دارد. نسخه فعلی API 3 است، اگرچه نسخه 2 نیز رایج است و می توانید از نسخه های قدیمی مهاجرت کنید.

اکثر ساختارهای فایل theme.json شامل یک schema نیز خواهند بود. به طور خلاصه، این به شما امکان می‌دهد با تکمیل خودکار در ویرایشگرهای کد کار کنید و اعتبار فایل را فراهم می کند. این را در بالای فایل اضافه خواهید کرد:

[json]  {  "$schema": "https://schemas.wp.org/trunk/theme.json",  "version": 2,  "settings": {  },  "styles": {  }  }    [/json]

از اینجا، ویژگی‌ها و اشیاء مختلفی را به تنظیمات و استایل‌ها اضافه می‌کنید تا بر روی فایل خود بسازید.

سلسله مراتب

فایل theme.json از یک ساختار سلسله مراتبی پیروی می‌کند و تنها یک سطح از سلسله مراتب کلی برای تنظیمات و سبک‌های سایت شما است. اگر دانش CSS دارید، درک این موضوع برای شما آسان تر خواهد بود، زیرا این فایل از نظر پیچیدگی شبیه به CSS است.

به طور خلاصه، سفارشی‌سازی‌هایی که در theme.json انجام می‌دهید ممکن است همیشه در قسمت فرانت سایت نشان داده نشوند. تنظیمات کاربر بر همه چیز اولویت دارند. این بدان معنی است که هر تغییری در صفحه Appearance > Editor در وردپرس رخ دهد، در قسمت فرانت نمایش داده می شود:

اگر از یک تم فرزند (child theme) استفاده نموده و یک فایل theme.json را اضافه می‌کنید، این پوسته هر تغییری غیر از تغییرات ایجاد شده با ویرایشگر سایت را لغو می کند. به همین ترتیب، هر چیزی که در فایل پیکربندی تم والد تعریف کنید، تنظیمات و سبک های پیش فرض وردپرس را لغو می‌کند. این فایلی است که در این پست روی آن تمرکز می کنیم، اگرچه وردپرس فایل theme.json خود را نیز دارد.

در حالی که تمرکز این پست نخواهد بود، می‌توانید با استفاده از قلاب‌ها (hook) و فیلترها، مقادیر را نادیده بگیرید. این فیلترهای پویا به شما امکان می‌دهند افزونه‌ها و تم‌هایی ایجاد کنید که تنظیمات و سبک‌های تم و پلتفرم را نیز تغییر می‌دهند.

ترکیب theme.json و ویرایش کامل سایت وردپرس

از بحث در مورد سلسله مراتب، متوجه خواهید شد که theme.json بخش بزرگی از FSE است. هر دو با هم کار می‌کنند تا یک راه حل قالب بندی جامع برای وردپرس ارائه دهند. برای مثال، رابط Global Styles نمایش بصری تنظیمات theme.json است.

می‌توانید تنظیمات را در پانل Global Styles یا فایل پیکربندی تغییر دهید و وردپرس مقادیر مربوطه را در صورت لزوم به روز می‌کند. در حالی که تنظیمات ویرایشگر سایت اولویت دارند، theme.json به عنوان پایه ای برای سبک‌های خود قالب عمل می‌کند. برای کاربر نهایی، Global Styles به آن‌ها اجازه می‌دهد بدون نیاز به کد یا ویرایش فایل theme.json، پیش‌فرض‌های شما را با سفارشی‌سازی‌های خود جایگزین کنند.

علاوه بر این، ویژگی‌های سفارشی CSS که در theme.json تعریف می‌کنید در رابط Global Styles در دسترس می‌شوند. این به کاربران اجازه می‌دهد از این ویژگی‌ها برای یک استایل ثابت‌تر در سراسر سایت استفاده کنند. این به توانایی تعریف سبک‌ها و تنظیمات Block خاص نیز گسترش می‌یابد، که می‌توانید از داشبورد وردپرس بیشتر آن‌ها را تغییر دهید.

به طور خلاصه، theme.json کنترل دقیق تری بر تنظیمات، سبک ها و موارد دیگر ارائه می دهد. این یک ابزار در سطح توسعه‌دهنده است که تجربه ساده‌تر و ساده‌تری را نسبت به رویکردهای کلاسیک ارائه می‌دهد. در مقابل، رابط Global Styles به همه این فرصت را می دهد که یک تم را مطابق میل خود سفارشی کنند. همانطور که تم ها را بیشتر توسعه می دهید، خواهید دید که چگونه هر دو به صورت پشت سر هم کار می کنند تا به ایجاد طرح ها و طرح های سایت کمک کنند.

گردش کار برای سفارشی کردن وب سایت وردپرس خود با استفاده از theme.json

هنگامی که اجزای کلیدی theme.json را درک کردید، توسعه گردش کار خود برای استفاده از آن گام مهمی است. این نشان دهنده راه جدیدی برای توسعه تم ها است، و به همین دلیل نیاز به رسیدگی به روشی متفاوت از روش های کلاسیک دارد.
رویکرد ما این است که URL طرحواره را تنظیم کنیم، یک نسخه API را انتخاب کنیم و ابتدا تنظیمات جهانی خود را تعریف کنیم. این شامل پالت رنگ، گزینه های تایپوگرافی و تنظیمات طرح بندی شما می شود. در بیشتر موارد، فعال کردن appearanceTools نیز مفید خواهد بود:

[json]  "$schema": "https://schemas.wp.org/trunk/theme.json",  "version": 3,  "settings": {  "appearanceTools": true,  "color": {  "palette": [  {  "name": "Primary",  "slug": "primary",  "color": "#0073aa"  },  {  "name": "Secondary",  "slug": "secondary",  "color": "#23282d"  }  ]  },  "typography": {  "fluid": true,  "fontSizes": [  {  "size": "13px",  "slug": "small",  "name": "Small"  },  {  "size": "16px",  "slug": "normal",  "name": "Normal"  [/json]

 

در مرحله بعد، می‌توانید به دنبال ایجاد ویژگی‌های CSS سفارشی با استفاده از اسلاگ‌هایی باشید که تعریف کرده‌اید. به عنوان مثال، ممکن است وزن فونت های سفارشی ایجاد کرده باشید:

[json]  …  "custom": {  "fontWeight": {  "light": 300,  "regular": 400,  "medium": 500,  "bold": 700  },    [/code]

هنگامی که تنظیمات خود را تمام کردید، نوبت به تعیین سبک ها می رسد.

  …  "styles": {  "color": {  "background": "var(--wp--preset--color--base)",  "text": "var(--wp--preset--color--main)"  },  [/json]

سفارشی کردن سبک های Block شما در مرحله بعدی قرار خواهد گرفت، و این می تواند بخش بزرگی از فایل theme.json شما را نشان دهد.

[json]  …  "styles": {  "block": {  "core/separator": {  "color": {  "text": "var(--wp--preset--color--main)"  },  "typography": {  "fontSize": "var(--wp--preset--font-size--large)"  }  },  "core/site-tagline": {  "spacing": {  "margin": {  "bottom": "20px"  }  },  "typography": {  "fontSize": "var(--wp--preset--font-size--small)"  }  },  "core/site-title": {  "typography": {  "fontSize": "var(--wp--preset--font-size--medium)",  "fontWeight": "var(--wp--custom--font-weight--semi-bold)",  "lineHeight": "var(--wp--custom--line-height--none)"  },  [/json]

در نهایت، شما می خواهید هر قالب سفارشی و قطعات قالب را طراحی کنید و آنها را در theme.json ثبت کنید. همچنین این زمان برای ثبت هر الگوی بلوکی است که می خواهید استفاده کنید و در صورت لزوم آنها را ایجاد کنید.

باید از theme.json استفاده کنید یا از ویرایش کامل سایت وردپرس
با توجه به تقاطع بین theme.json و ویرایش کامل سایت، ممکن است تعجب کنید که چرا از یکی بر دیگری استفاده می کنید. در واقع، هر دو با سناریوهای مختلف مطابقت دارند و باید در کنار هم استفاده شوند.
به عنوان مثال، theme.json در شرایط زیر مورد استفاده شما خواهد بود:

شما تم ها را توسعه می دهید و یک تم جدید از ابتدا ایجاد می کنید.
JSON زبانی است که می‌فهمید و کار کردن با آن راحت است.
شما یک روش برنامه‌نویسی برای تعریف سبک‌ها و تنظیمات پیش‌فرض برای موضوع خود می‌خواهید.
سبک‌ها و تنظیماتی که می‌خواهید پیاده‌سازی کنید به کنترل بیشتری نسبت به آنچه می‌توانید به‌طور پیش‌فرض در ویرایشگر سایت پیدا کنید، نیاز دارند.

مسلم، این آخرین نکته مهم خواهد بود، زیرا FSE تقریباً دقیقاً عملکرد theme.json را منعکس می کند. به این ترتیب، ویرایش کامل سایت برای اکثر کاربران در سناریوهای زیر منطقی تر خواهد بود:

شما مالک سایتی هستید که می‌خواهید یک تم موجود را سفارشی کنید.
JSON چیزی نیست که شما با آن آشنایی داشته باشید.
رابط های بصری برای سفارشی سازی و گردش کار توسعه شما منطقی تر است.
شما می خواهید بدون نیاز به کدنویسی گسترده تنظیمات سریع انجام دهید.

در عمل، موضوع به یک فایل پیکربندی نیاز دارد تا پایه های آن را تعریف کند. از آنجا، سلسله مراتب کنترل می شود و صاحبان سایت می توانند از FSE برای سفارشی سازی بیشتر استفاده کنند.

جمع بندی

فایل theme.json برای توسعه تم وردپرس انقلابی است. این یک خانه متمرکز برای تنظیمات و سبک‌های تم به شما می‌دهد و به شما امکان می‌دهد تم‌های انعطاف‌پذیر، قابل نگهداری و سفارشی‌سازی بیشتری ایجاد کنید.

برای رسیدن به طراحی نهایی سایت، از فایل در کنار ویرایشگر سایت در وردپرس استفاده خواهید کرد. گزینه‌هایی که در theme.json تنظیم می‌کنید به‌عنوان پیش‌فرض عمل می‌کنند که کاربر نهایی آن‌ها را بیشتر سفارشی می‌کند. خبر خوب این است که کدنویسی این فایل ساده تر از بهینه سازی مجموعه ای از فایل های PHP و CSS است – و این آینده طراحی وردپرس است.
آیا در مورد استفاده از فایل theme.json در وردپرس سوالی دارید؟ در بخش نظرات زیر به ما اطلاع دهید!

وبلاگ پارسدِو © 1403 — کپی و انتشار مطالب تنها با ذکر منبع و لینک مجاز است. بازگشت به بالا