دانلود وردپرس
رفتن به نوشته

تغییر استایل گوتنبرگ

گوتنبرگ

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

به نظر می رسد وردپرس سیاست جایگزینی گوتنبرگ را با بسیاری از امکانات قدیمی وردپرس در پیش گرفته به در بروزرساتی های آتی شاهد گسترده شدن هرچه بیشتر این قسمت خواهیم شد. لذا آشنایی با آن اهمیت ویژه ای دارد.

به صورت پیشفرض پسزمینه این ویرایشگر سفید می باشد. در این مقاله نحوه تغییر استایل و رنگ های گوتنبرگ بحث خواهد شد.

با داشتن اطلاعات مختصر از زبان css میتوانید بینهایت تغییر اعمال کنید.

زمان مورد نیاز: 5 دقیقه.

چطور می توان استایل ویرایشگر گوتنبرگ در وردپرس را تغییر داد؟

  1. فعال کردن در قالب

    در فایل functions.php قالب خود کد ذکر شده را وارد کنید

  2. با ایجاد فایل css

    با ایجاد فایل استایل تغییرات خود را اعمال کنید. نمونه های قابل استفاده ذکر شده است

برای شروع ابتدا باید فایل CSS برای این ویرایشگر مشخص کنید، برای این کار کد زیر را در فایل functions.php قالب خود اضافه کنید:

function wpvar_gutenberg_setup() {
	add_theme_support( 'editor-styles' );
        // اضافه کردن امکان ویرایش ادیتور در قالب شما

	add_editor_style( 'gutenberg.css' );
        //مشخص کردن فایل استایل
}
add_action( 'after_setup_theme', 'wpvar_gutenberg_setup' );

فایل gutenberg.css را در مسیر اصلی قالب خود ایجاد کنید. پس از این مراحل هرگونه کدنویسی در این فایل استایل گوتنبرگ را تغییر خواهد داد.

برای مثال جهت تغییر رنگ پسزمینه ادیتور کد زیر را در فایل gutenberg.css قرار دهید:

body {
    background: #242020;
}

نتیجه به این صورت خواهد بود:

با استفاده از این روش می توانید رنگ بندی ها و المان های طراحی مختلفی را برای گوتنبرگ تنظیم کنید تا هم شما و هم نویسندگانتان خوشحال باشند!

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

5اُمین دیدگاه را شما ثبت کنید

ایمیل شما در دیدگاه نمایش داده نخواهد شد.

  1. bahar گفت:

    من این کارایی که گفتید رو انجام میدم ولی اعمال نمیشه! مشکل چیه؟

    1. علی فرجی گفت:

      نسخه وردپرستون چند هست؟

      1. bahar گفت:

        آپدیت هست 5.5

        1. علی فرجی گفت:

          یه بار دیگه همه مراحل رو چک کنید و مطمئن باشین کدهارو فایل صحیح وارد کردین. اگه از پلاگین کش استفاده می کنین کش رو خالی کنین و صفحه گوتنبرگ رو با ctrl+f5 ریلود کنید. اگه باز کار نکرد کدهاتون رو انجمن پشتیبانی قرار بدین تا بررسی کنیم.

خبرنامه وردپرس فارسی

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

 

با موفقیت مشترک شدید!