فایل theme.json در وردپرس چیست و چگونه از آن استفاده کنیم
فایل theme.json در وردپرس چیست و چگونه از آن استفاده کنیم
آیا از یک تم بلوک استفاده میکنید و فایل theme.json را در وردپرس میبینید؟ شاید برای شما این سوال پیش آمده باشد که هدف این فایل چیست و آیا باید آن را ویرایش کنید.
فایل theme.json بخش مهمی از تجربه کامل ویرایش سایت در وردپرس است. همانطور که تم های بلوک گسترده تر می شوند، مهم است که بفهمیم theme.json چه کاری انجام می دهد و چگونه آن را به درستی ویرایش کنیم.
به همین دلیل است که ما در WPBeginner این راهنمای جامع را گردآوری کردهایم. در این مقاله، توضیح خواهیم داد که فایل theme.json چیست و چگونه می توانید از آن برای سفارشی کردن سایت وردپرس خود استفاده کنید.
فایل WordPress theme.json چیست؟
فایل theme.json یک فایل تم ویژه است که در WordPress 5.8. این نقش کلیدی در کامل دارد. تجربه ویرایش سایت (FSE)، که به شما امکان می دهد هر جنبه ای از تم بلوک وردپرس خود را به صورت بصری سفارشی کنید.
اساساً، فایل theme.json به عنوان طرحی عمل می کند که استایل و عملکرد تم بلوک شما را کنترل می کند. این شامل کدی است که به وردپرس میگوید عناصر مختلف مانند رنگها، تایپوگرافی، طرحبندیها و قالبها چگونه باید ظاهر و رفتار کنند.
چرا تم های بلاک وردپرس به فایل theme.json نیاز دارند؟
ویرایش یک تم بلوکی در وردپرس با ویرایش موضوع کلاسیک متفاوت است.
موضوعهای کلاسیک از فایل functions.php برای فعال کردن ویژگیهایی مانند سفارشی استفاده میکنند. منوها یا تصاویر برجسته با تابع add_theme_support()
. سپس، میتوانید آن ویژگیها را با قوانین CSS در فایل CSS stylesheet (style.css) استایل دهید.
در بلاک کردن تم ها ، theme.json به عنوان یک مرکز مرکزی برای هر چیزی که ظاهر و احساس تم بلوک شما را مشخص می کند عمل می کند. این به شما امکان می دهد مواردی مانند فونت ها، رنگ ها و گزینه های طرح بندی را در یک مکان تعریف کنید و جایگزین نیاز به add_theme_support()
در functions.php.
به همین دلیل است که فایل functions.php در تم های بلوک اغلب کوچکتر از معادل آن در تم های کلاسیک است.
داشتن یک فایل اختصاصی theme.json مزایای بسیار خوبی نسبت به سیستم تم کلاسیک قبلی دارد.
ابتدا، theme.json دست به دست هم با ویرایشگر کامل سایت وردپرس کار می کند. این به شما امکان میدهد به راحتی سبک ها و تنظیمات طرح زمینه خود را سفارشی کنید مستقیماً در ویرایشگر بدون نیاز به لمس هیچ کدی.
علاوه بر این، theme.json با هدف ایجاد یک تجربه ثابت برای توسعه دهندگان و کاربران است. برخی از کاربران وقتی نیاز به تغییر تم ها زیرا آنها باید طرح بندی ها و گزینه های سبک کاملا جدید را یاد بگیرند.
با theme.json، تغییر طرحها به فرآیند روانتری تبدیل میشود، زیرا همه چیز به روشی مشابه سازماندهی شده است.
در نهایت، با استفاده از theme.json، توسعه دهندگان و کاربران تم می توانند کار خود را در آینده ثابت کنند زیرا وردپرس به گسترش قابلیت های کامل ویرایش سایت خود ادامه می دهد.
اکنون که به این موضوع پرداختیم که فایل theme.json چیست، بیایید عمیقتر به موضوع بپردازیم. برای پیمایش در این راهنما می توانید از پیوندهای سریع زیر استفاده کنید:
فایل theme.json وردپرس را از کجا پیدا می کنید؟
فایل theme.json در دایرکتوری تم شما در وب سرور شما یافت می شود. مسیر فایل معمولی public_html » wp-content » themes » your-theme خواهد بود -name » theme.json.
برای دسترسی به آن، ابتدا باید از طریق FTP یا میزبانی خود به سایت خود متصل شوید. مدیر فایل اکانت
اگر از Bluehost استفاده می کنید، سپس می توانید وارد شوید و به تب “وب سایت ها” بروید. سپس، روی دکمه “تنظیمات” در زیر وب سایت خود کلیک کنید.
اکنون، حتماً در برگه «نمای کلی» بمانید.
سپس، به پایین بروید تا روی دکمه “File Manager” کلیک کنید.
وقتی فایل منیجر را به این روش باز میکنید، بهطور خودکار در پوشه ریشه وبسایت خود خواهید بود.
در اینجا، به دنبال دایرکتوری “wp-content” بگردید و آن را باز کنید. در آنجا، پوشه “themes” را خواهید یافت که حاوی همه موضوعات وردپرس.
پوشه مربوط به تم بلوکی خاصی را که استفاده میکنید باز کنید. فایل theme.json مستقیماً در این فهرست موضوعی در کنار سایر فایلهای موضوعی قرار خواهد گرفت.
پس از یافتن آن، میتوانید فایل theme.json را با استفاده از ویرایشگر کد مشاهده کنید.
فایل theme.json چگونه است؟
فایل theme.json دارای ساختار خاصی است که تمام تنظیمات کلی برای تم بلوک وردپرس شما را سازماندهی می کند.
بسته به اینکه موضوع شما چقدر پیچیده یا ساده به نظر می رسد، فایل می تواند بسیار کوتاه یا طولانی باشد. با این حال، به راحتی می توانید این فایل را به 7 بخش سطح بالا تقسیم کنید:
{
"$schema": "https://schemas.wp.org/trunk/theme.json"،
"نسخه": 2،
"تنظیمات": {}،
"styles": {},
"CustomTemplates": {}،
"templateParts": {}،
"الگوها": []
}
در اینجا یک تفکیک ساده آمده است:
طرحواره
این قسمت در واقع اختیاری است که در طرحهای زمینه بلوک وجود داشته باشد، بنابراین ممکن است آن را در تم خود ببینید یا نبینید.
ویژگی schema URL را به طرحواره JSON وردپرس، که تنظیمات کلی، سبکها و سایر پیکربندیها را برای طرح زمینه شما تعریف میکند.
نسخه
این بخش مشخص میکند که کدام نسخه API از قالب theme.json توسط فایل و اطمینان حاصل می کند که از ساختار صحیح پیروی می کند.
از زمان نگارش این مقاله، API در نسخه 2 است.
تنظیمات
این ویژگی گزینهها و کنترلهای موجود را برای کاربران تعریف میکند تا تم خود را سفارشی کنند. این موارد شامل تنظیمات از پیش تعیین شده برای پالت رنگ تم، تایپوگرافی، فاصله، گرادیان، سایه ها، حاشیه ها، و غیره.
در اینجا یک مثال بسیار ساده از شکل ظاهری ویژگی تنظیمات آمده است:
{
"تنظیمات": {
"رنگ": {
"جعبه رنگ نقاشی": [
{
"اسلگ": "پایه"،
"color": "#ffffff",
"name": "سفید"
}،
{
"Slug": "تضاد"،
"color": "#222222",
"name": "تاریک"
}،
{
"لبه": "لهجه"،
"color": "#f08080"،
"name": "صورتی"
}،
{
"Slug": "لهجه-2"،
"color": "#90ee90",
"name": "سبز روشن"
}،
{
"Slug": "لهجه-3"،
"color": "#e0ffff"،
"name": "آبی روشن"
}
]
}،
"تایپوگرافی": {
"fontFamilies": [
{
"fontFamily": "Open Sans, sans-serif"،
"Slug": "open-sans"
"name": "Open Sans"
}،
{
"fontFamily": "Arial، sans-serif"،
"لز": "آریال"،
"نام": "آریال"
}،
{
"fontFamily": "Times New Roman, serif"،
"Slug": "Times-New-Roman"،
"name": "Times New Roman"
}
]،
"fontSizes": [
{
"نام": "بسیار کوچک"،
"Slug": "xx-small"،
"اندازه": "0.75rem"
}،
{
"نام": "کوچک"،
"Slug": "کوچک"
"اندازه": "0.875rem"
}،
{
"نام": "متوسط"،
"Slug": "متوسط"،
"Size": "1rem"
}،
{
"name": "بزرگ"،
"Slug": "بزرگ"
"اندازه": "1.125rem"
}،
{
"نام": "بسیار بزرگ"،
"Slug": "x-large"
"اندازه": "1.25 rem"
}،
{
"نام": "XX-Large"،
"Slug": "xx-large"،
"اندازه": "1.5 rem"
}
]،
"فاصله": {
"واحد": ["رم"]،
"ارزش های": {
"small": "1rem"،
"متوسط": "1.5rem"،
"large": "2rem"
}
}
}
}
}
اگر به کد نگاه کنید، درک زبان استفاده شده بسیار آسان است. میتوانید بگویید که تنظیمات رنگها را تعیین میکنند، خانواده های فونت، اندازه فونت و فاصله استفاده شده در موضوع اضافه کنید.
اگر مرجعی در اینجا یا در طرح زمینه شما وجود دارد که متوجه آن نمی شوید، می توانید مرجع رسمی تنظیمات وردپرس.
برخی از عناصر، مانند رنگها و خانوادههای فونت، دارای راب هستند، مانند این:
{
"تنظیمات": {
"رنگ": {
"جعبه رنگ نقاشی": [
{
"اسلگ": "پایه"،
"color": "#ffffff"،
"name": "سفید"
}،
اینها برای بخش سبکها بعداً برای ایجاد تنظیمات از پیش تعیین شده مفید خواهند بود، که در قسمت بعدی توضیح خواهیم داد.
سبک ها
در حالی که بخش تنظیمات، گزینههای سفارشیسازی پیشفرض طرح زمینه را تعریف میکند، بخش سبکها آنها را روی طرح زمینه اعمال میکند.
در اینجا، میتوانید تنظیمات سفارشیسازی را در کل وبسایت یا در سطح بلوک با استفاده از تنظیمات از پیش تعیین شده اعمال کنید.
بیایید مثال زیر را بررسی کنیم:
{
"تنظیمات": {
// تنظیمات موجود از مثال قبلی
}،
"سبک": {
"رنگ": {
"پس زمینه": "var(--wp--preset--color--base)"،
"text": "var(--wp--preset--color--contrast)"
}،
"عناصر": {
"ارتباط دادن": {
"رنگ": {
"text": "var(--wp--preset--color--accent-2)"
}
}،
"h1": {
"fontSize": "var(--wp--preset--font-size--xx-large)"
"lineHeight": "1.2"،
"marginBottom": "1rem"
}،
"h2": {
"fontSize": "var(--wp--preset--font-size--x-large)"،
"lineHeight": "1.2"،
"marginBottom": "1rem"
}،
"h3": {
"fontSize": "var(--wp--preset--font-size--large)"،
"lineHeight": "1.2"،
"marginBottom": "1rem"
}
}
}
}
همانطور که می توانید بگویید، این خط کد در سراسر این قطعه ظاهر می شود: var(--wp--preset--xxx)
. اینها از پیش تنظیم هستند که میانبرهایی در بخش سبک ها هستند که به مقادیر تعریف شده در بخش تنظیمات برمی گردند.
به عنوان مثال، {"slug": "base"، "color": "#ffffff"، "name": "White"}
را در بخش تنظیمات در نظر بگیرید. در اینجا، "base"
اسلاگ است، و از پیش تعیین شده مربوط به این رنگ var(--wp--preset--color--base)
است.
بنابراین، کد "color": {"background": "var(--wp--preset--color--base)"
در استایل ها می گوید که رنگ پس زمینه این موضوع سفید است.
الگوهای سفارشی
توسعهدهندههای تم مسدود میتوانند طرحبندیهای از پیش تعریفشده برای صفحات سفارشی، پست ها یا انواع پست برای استفاده کاربران.
به عنوان مثال، تم Twenty Twenty Four دارای چندین الگوی سفارشی است که در فایل theme.json تعریف شده است: صفحه بدون عنوان، صفحه با نوار کناری، صفحه با تصویر گسترده، و تک با نوار کناری.
می توانید از هر یک از اینها برای ایجاد محتوای خود استفاده کنید.
]،
"Custom Templates": [
{
"name": "page-no-title",
"postTypes": ["صفحه"]،
"title": "صفحه بدون عنوان"
}،
{
"name": "page-with-sidebar",
"postTypes": ["صفحه"]،
"title": "صفحه با نوار کناری"
}،
{
"name": "گسترش صفحه"،
"postTypes": ["صفحه"]،
"title": "صفحه با تصویر گسترده"
}،
{
"name": "single-with-sidebar",
"postTypes": ["پست"]،
"title": "Single with Sidebar"
}
]
نکته ای که باید به آن توجه داشت این است که فایل theme.json فقط به الگوها با نام ارجاع می دهد و ابرداده هایی را درباره آنها ارائه می دهد، مانند عنوان آنها و انواع پست هایی که برای آنها در نظر گرفته شده است.
با این حال، ظاهر واقعی و عملکرد الگوهای سفارشی در فایلهای قالب جداگانه در داخل پوشه تم تعریف شده است.
برای دیدن آنها، می توانید به public_html » wp-content » themes » your-theme-name » الگوها بروید.
قطعات قالب
قطعات قالب قسمتهای قابل استفاده مجدد هستند که میتوانید در قالبهای سفارشی خود اعمال کنید. اینها عناصری مانند headers، پانویس، نوارهای کناری، و غیره.
این قسمتهای الگو در theme.json ثبت شده است:
"templateParts": [
{
"منطقه": "سرصفحه"،
"نام": "سرصفحه"،
"عنوان": "سرصفحه"
}،
{
"منطقه": "پانویس"،
"نام": "پانویس"،
"عنوان": "پانویس"
}،
{
"area": "sidebar"، // حذف شده "uncategorized"
"name": "نوار کناری"،
"title": "نوار کناری"
}،
{
"area": "post-meta"، // حذف شده "uncategorized"
"نام": "پس از متا"،
"عنوان": "پست متا"
}
]
فایل theme.json مانند الگوهای سفارشی فقط به الگوها ارجاع می دهد.
ظاهر واقعی آنها در فایلهای قسمت الگوی خودشان در پوشه parts تعریف شده است.
الگوها
Patterns مجموعه های از پیش ساخته شده ای از بلوک ها هستند که به شما امکان می دهند طرح بندی محتوای سفارشی را در صفحات، پست ها یا هر جای دیگری در موضوع خود ایجاد کنید.
وقتی ویرایشگر کامل سایت را باز می کنید، ممکن است منوی الگوها را متوجه شوید. اینجاست که میتوانید تمام الگوهای موجود برای طرح زمینه بلوک گوتنبرگ خود را پیدا کنید.
با theme.json، توسعهدهندگان طرح زمینه میتوانند به الگوهای عمومی مراجعه کنند دایرکتوری الگو. این یک راه عالی برای ارائه گزینه های سفارشی سازی بیشتر بدون طراحی این بلوک های قابل استفاده مجدد است.
به عنوان مثال، موضوع بیست و چهار به دو الگو از دایرکتوری رسمی ارجاع می دهد: بخش سه ستون خدمات و مشتریان:
"الگوها": [
"سه ستون خدمات"،
"بخش مشتریان"
]
ما این را می دانیم زیرا این الگوها در منوی الگوها در ویرایشگر کامل سایت هستند.
اما، آنها در پوشه patterns داخل فهرست تم نیستند.
توجه: ممکن است متوجه شوید که پوشههای الگوها، قطعات و الگوهای موجود در فهرست تم شما حاوی فایلهایی هستند که در theme.json مشخص نشدهاند، اما همچنان در ویرایشگر کامل سایت قابل مشاهده هستند.< /p>
اگر کنجکاو هستید، به این دلیل است که وردپرس به گونهای طراحی شده است که به طور خودکار این پوشهها را بر اساس قراردادهای نامگذاری و مکان آنها در فهرست موضوع شناسایی و استفاده کند.
چه کاری باید قبل از ویرایش فایل theme.json انجام دهید
از آنجایی که theme.json یک فایل تم اصلی است، آن را مستقیماً در زنده خود ویرایش کنید وب سایت وردپرس با خطراتی همراه است. اشتباهات تصادفی ممکن است به طور بالقوه موضوع یا وب سایت شما را خراب کند.
رویکرد ایمنتر استفاده از طرح زمینه کودک.
یک طرح زمینه کودک تمام سبکها و قابلیتهای طرح زمینه اصلی شما را به ارث میبرد (موضوع بلوکی که استفاده میکنید) اما به شما امکان میدهد موارد را بدون تغییر طرح اصلی خود. به این ترتیب، اگر طرح زمینه والد بهروزرسانیهایی دریافت کند، سفارشیسازیهای شما رونویسی نمیشوند.
میتوانید راهنمای ما را در نحوه ایجاد یک تم کودک در وردپرس. این مقاله یک روش آسان را با نشان میدهد. افزونه Create Block Theme که به طور خودکار یک فایل theme.json جدید فقط برای طرح زمینه فرزند شما ایجاد می کند.
برای اطمینان از تجربه ویرایش روان و جلوگیری از خرابی وبسایت، توصیه میکنیم یک پشتیبان گیری از وب سایت وردپرس خود. به این ترتیب، اگر مشکلی پیش بیاید، می توانید به راحتی سایت خود را به حالت قبلی بازگردانید.
توصیه میکنیم از افزونهای مانند Duplicator استفاده کنید. برای یک راه حل پشتیبان گیری سریع و قابل اعتماد.
همچنین توصیه می شود در یک محیط توسعه محلی وردپرس یا یک سایت مرحله بندی. این یک کپی از وبسایت زنده شما ایجاد میکند که در آن میتوانید با خیال راحت تغییرات را بدون تأثیر بر بازدیدکنندگان خود آزمایش کنید.
در اینجا چند نکته دیگر وجود دارد که باید در نظر داشته باشید:
- با ویرایش های جزئی در فایل theme.json خود شروع کنید و قبل از ایجاد تغییرات پیچیده تر، آنها را به طور کامل آزمایش کنید.
- اگر در مورد ویژگی یا تنظیمات خاصی در فایل theme.json مطمئن نیستید، به هدف اسناد رسمی وردپرس.
- در صورت بروز هرگونه مشکل، از تیم پشتیبانی توسعهدهنده تم یا انجمنهای پشتیبانی WordPress.org دریغ نکنید. راهنمای ما را در چگونه برای اطلاعات بیشتر درخواست پشتیبانی از وردپرس کنیم.
نحوه ویرایش فایل وردپرس theme.json
بر اساس تحقیقات و آزمایشهای خود، دو راه برای ویرایش فایل theme.json WordPress کشف کردهایم: استفاده از ویرایشگر کامل سایت یا استفاده از کد. گزینه اول بسیار ساده تر و ایمن تر است و به شما امکان می دهد تغییرات خود را از قسمت جلویی وب سایت خود مشاهده کنید.
در همین حال، اگر با توسعه پیشرفته وردپرس راحت هستید، انتخاب دوم توصیه می شود.
ویرایش theme.json بدون کد (مبتدیان)
برای ویرایش فایل theme.json خود بدون لمس مستقیم کد، میتوانید از Create Block Theme. این افزونه توسط تیم رسمی WordPress.org منتشر شده است تا به کاربران اجازه دهد تا تغییرات سبک تم بلوک خود را ایجاد، ویرایش و ذخیره کنند.
ابتدا، افزونه وردپرس را در قسمت مدیریت خود نصب کنید. سپس، ویرایشگر تمام سایت را با رفتن به Appearance » Editor باز کنید.