فایل 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 انجام دهید

از آنجایی که 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 باز کنید.

اکنون چندین منو برای ویرایش طرح زمینه خود خواهید دید.

در اینجا، “Styles” را انتخاب کنید.

بعد، روی نماد مداد «ویرایش سبک‌ها» کلیک کنید.

این شما را به ویرایشگر را مسدود کنید برای ویرایش سبک های جهانی وب سایت شما.

اکنون، می‌توانید سبک تم خود را مانند حالت عادی تغییر دهید. می‌توانید بخش نحوه ویرایش سبک های جهانی قالب در راهنمای ویرایش کامل سایت وردپرس ما برای اطلاعات بیشتر.

بیایید به عنوان مثال یک پالت رنگ سفارشی ایجاد کنیم.

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

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

برای ویرایش پالت، “Colors” را در نوار کناری تنظیمات Styles انتخاب کنید.

در صفحه بعدی ، برخی از تنظیمات را برای سفارشی کردن رنگ های موضوع خود مشاهده خواهید کرد.

در اینجا ، روی رنگ های موجود در بخش “پالت” کلیک کنید.

<شکل کلاس = "wp-block-image size-full"> 3>

در این مثال ، موضوع بیست و بیست و چهار در حال حاضر 5 رنگ را در پالت تعریف کرده است ، اما می توانید هر یک از آنها را تغییر دهید تا یک سفارشی از ابتدا ایجاد کنید.

برای انجام این کار ، روی یکی از رنگهای زیر “موضوع” کلیک کنید. سپس ، هر رنگی را در ابزار انتخاب کننده رنگ انتخاب کنید.
<شکل کلاس = "wp-block-image size-full"> 3>

اکنون ، اگر شما پیش نمایش وب سایت خود ، خواهید دید که بلوک ها یا عناصر خاصی که از رنگ قبلی استفاده می کنند با رنگی که تازه در پالت خود انتخاب کرده اید جایگزین شده است.

می توانید همان مراحل را برای هر رنگ تکرار کنید. سپس ، روی “ذخیره” کلیک کنید.

<شکل کلاس = "wp-block-image size-full"> >

پس از صرفه جویی در تغییرات خود ، بر روی دکمه ایجاد بلوک (نماد آچار) کلیک کنید.

سپس ، “ذخیره تغییرات در موضوع” را انتخاب کنید.

<شکل کلاس = "wp-block-image size-full">

در صفحه بعدی ، شما باید به پایین بروید.

پس از آن ، روی “ذخیره تغییرات” کلیک کنید.
<شکل کلاس = "wp-block-image size-full">

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

اکنون ، دوباره روی دکمه ایجاد بلوک کلیک کنید و ‘View theme.json را انتخاب کنید.”
<شکل کلاس = "wp-block-image size-full">

برای دیدن کد برای پالت رنگ سفارشی خود ، به دنبال پالت که در داخل color و تنظیمات قرار دارد ، مانند چنین است:

"تنظیمات": {
  // برخی از کد ...
  "رنگ": {
    // برخی از کد ...
    "جعبه رنگ نقاشی":  
  }
}

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

<شکل کلاس = "wp-block-image size-full">

ویرایش تم. json با کد (کاربران پیشرفته)

این روش توصیه می شود اگر شما مشتاق باشید توسعه دهنده تم وردپرس یا تجربه ای با کد داشته باشید.

ابتدا ، پرونده موضوع بلوک خود را در فهرست وردپرس خود باز کنید. می توانید از ویرایشگر کد در مدیر فایل میزبان وب خود استفاده کنید یا فایل را بارگیری کنید ، آن را در رایانه ویرایش کنید و دوباره آن را در سرور خود بارگذاری کنید.

ما از بیست و چهار موضوع موضوع و مدیر پرونده Bluehost برای اهداف تظاهرات استفاده خواهیم کرد. اگر شما یک کاربر BlueHost هستید و از File Manager استفاده می کنید ، می توانید فقط بر روی پرونده Time.json خود کلیک راست کرده و روی “ویرایش” کلیک کنید.

<شکل کلاس = "wp-block-image size-full">

اگر از FTP استفاده می کنید ، می توانید راهنمای ما را در مورد نحوه استفاده از FTP برای بارگذاری پرونده ها در وردپرس .

بیایید یک مثال ساده از ویرایش پرونده خود را امتحان کنیم. JSON: ایجاد اندازه فونت سفارشی.

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

اگر از یک موضوع کودک استفاده می کنید ، می توانید به سادگی کپی و کد زیر را چسبانده به پرونده خود. json خود را تغییر دهید و اندازه فونت را در پیکسل ها تغییر دهید همانطور که می بینید مناسب است:

{
  "تنظیمات": {
    "تایپوگرافی": {
      "سیال": نادرست ،
      "فونتز": [
        {
          "نام": "کوچک" ،
          "slug": "کوچک" ،
          "اندازه": "16px"
        }،
        {
          "نام": "متوسط" ،
          "slug": "متوسط" ،
          "اندازه": "24px"
        }،
        {
          "نام": "بزرگ" ،
          "slug": "بزرگ" ،
          "اندازه": "40px"
        }،
        {
          "نام": "فوق العاده بزرگ" ،
          "slug": "x -lagrge" ، // typo ثابت (بزرگ -> بزرگ)
          "اندازه": "48px"
        }
      ]
    }
  }
}

توجه: اگر مستقیماً پرونده موضوع والدین خود را ویرایش می کنید ، باید کدی را پیدا کنید که می گوید فونتز می کند .

باید در داخل تایپوگرافی و تنظیمات ، مانند SA:

توخالی شود

{
  "تنظیمات": {
    // برخی از کد ...
    "تایپوگرافی": {
      // برخی از کد ...
      "فونتز": [
        // تعاریف اندازه فونت در اینجا
      ]
    }
  }
}

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

پس از اتمام ، پرونده را ذخیره کرده و وب سایت خود را پیش نمایش کنید تا تغییرات خود را ببینید. برای کاربران BlueHost ، می توانید به سادگی روی “ذخیره تغییرات” در ویرایشگر کد مدیر پرونده کلیک کنید.

<شکل کلاس = "wp-block-image size-full">

اگر می خواهید موضوع خود را ویرایش کنید. بیشتر ، ما به شدت آشنایی با ساختار پرونده را که در بخش قبلی توضیح داده شده است ، تشویق می کنیم.

ما همچنین پیشنهاد می کنیم مرجع رسمی تنظیمات وردپرس ، که شامل لیست کاملی از خصوصیات و دستورالعمل های تنظیمات موجود برای استفاده از آنها است.

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

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

خوشبختانه ، گزینه کاربر پسند دیگری برای افزودن کد سفارشی و ایجاد سفارشی سازی پیشرفته وجود دارد: پلاگین قطعه “> wpcode .

با wpcode ، می توانید قطعه های کد سفارشی را وارد کنید بدون اینکه نیازی به لمس کردن پرونده های موضوع خود نباشید. این به طور قابل توجهی خطر شکستن وب سایت شما را در هنگام شخصی سازی کاهش می دهد.

اگر می خواهید در مورد این افزونه کد کد اطلاعات بیشتر بدانید ، بررسی کامل wpcode .

همچنین ، در اینجا برخی از آموزش های مفید برای شروع کار با استفاده از WPCode:

وجود دارد

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