WordPress Gutenberg လုပ်ကွက်များအတွက်သီးသန့်ထုံးစံပုံစံများဖန်တီးခြင်းအတွက်သင်ခန်းစာ

မိတ်ဆက်ပေး

WordPress Gutenberg ပိတ်ပင်တားဆီးမှုသည် WordPress ဗားရှင်းမှမိတ်ဆက်ပေးသောအယ်ဒီတာပါ 0 င်သည့်အင်္ဂါရပ် 5.0 မှအကြောင်းအရာကိုပြင်ဆင်ရန် Modular နှင့်ထိရောက်စေရန်ဖြစ်သည်။ developer များအတွက် Gutenberg ပိတ်ပင်တားဆီးမှုသည်အသုံးပြုရန်မလွယ်ကူပါ, ဤဆောင်းပါးသည်သင်ဝက်ဘ်ဆိုက်၏ကျွမ်းကျင်မှုနှင့်အသုံးပြုသူအတွေ့အကြုံကိုမြှင့်တင်ရန် Gutenberg လုပ်ကွက်များအတွက်ကိုယ်ပိုင်စတိုင်များကိုမည်သို့ဖန်တီးရမည်ကိုတစ်ဆင့်ချင်းဒီဆောင်းပါးကိုလမ်းပြပါမည်။

လှမ်း

အဆင့် 1: ပြင်ဆင်မှု

သင်မစတင်မှီသင်သည် Wordpress 5.0 သို့မဟုတ်အထက်တွင်အသုံးပြုနေကြောင်းသေချာအောင်လုပ်ပါ,

အဆင့် 2: စိတ်ကြိုက်ပုံစံကိုဖန်တီးပါ

ထုံးစံပုံစံများ၏သော့ချက်သည်အဓိကအကြောင်းအရာမှာအဓိကအကြောင်းအရာများ၏ functions untions.php ဖိုင်ကိုပြုပြင်ရန်နှင့် CSS ဖိုင်အသစ်ကိုအယ်ဒီတာထဲသို့ 0 င်ရန်ဖြစ်သည်။ functions.php နှင့်ဖိုင်၏အဆုံးတွင်အောက်ပါကုဒ်ကိုထည့်ပါ။

 function my_custom_block_style() {
  wp_enqueue_style(
    'my-custom-block-style', // ပုံစံအမည်
    get_stylesheet_directory_uri() . '/css/my-block-style.css', // စတိုင်ဖိုင်လမ်းကြောင်း
    array( 'wp-blocks' ),
    filemtime( get_stylesheet_directory() . '/css/my-block-style.css' ) // အလိုအလျောက် cache ကို refresh
  );
}
add_action( 'enqueue_block_editor_assets', 'my_custom_block_style' );

၎င်းတို့အနက် "My-Custom-Block-style" သည်သင်လိုအပ်သည့်အတိုင်းပြုပြင်မွမ်းမံနိုင်သောစတိုင်၏လိုဂိုအမည်ဖြစ်သည်။ စတိုင်ဖိုင်သည်၎င်းကို CSS ဖိုင်တွဲတွင်အဓိကအကြောင်းအရာလမ်းညွှန်အောက်ရှိ CSS ဖိုင်တွဲတွင်ထည့်ထားပြီးဖိုင်အမည်မှာကျွန်ုပ်၏ block-style.css ဖြစ်သည်။ filemtime function သည် cache system ပြ problems နာများကိုရှောင်ရှားရန်အတွက်စတိုင်ဖိုင်ကိုအသစ်ပြောင်းတိုင်းနောက်ဆုံးပေါ်ဗားရှင်းကိုအလိုအလျောက်ဖွင့်သည်။

ထို့နောက် "My-block-style.css" ကိုဆောင်ပုဒ်၏ CSS ဖိုင်တွဲတွင်ဖန်တီးပါ။

အဆင့် 3: ပိတ်ပင်တားဆီးမှုကို Select လုပ်ပါ, စတိုင်ထည့်ပါ

style file အဆင်သင့်ဖြစ်ပြီဆိုရင် WordPress Editor ကိုဖွင့်ပြီးသင်စိတ်ကြိုက်ပြုလုပ်လိုသောပိတ်ပင်တားဆီးမှုကိုထည့်ပါ။ Block Settings တွင် custom style feature ကို add add add ကိုရှာပြီးသက်ဆိုင်ရာပိတ်ပင်တားဆီးမှုအတွက် CSS selector ကိုထည့်ပါ။

ဥပမာစာပိုဒ်တစ်ခု၏စာသားအရောင်ကိုပြုပြင်ရန်သင်ရေးသားနိုင်ပါသည်။

 .wp-block-paragraph {
  color: red;
}

".wp-block-port" သည်စာပိုဒ်များအတွက် default css class name ဖြစ်သည်။ လုပ်ကွက်မျိုးစုံကိုစတိုင်စေရန် selector box တွင်တစ်ချိန်တည်းတွင်ရွေးချယ်ထားသောရွေးချယ်သူများကိုတစ်ချိန်တည်းရိုက်ထည့်ပါ။

အဆင့် 4: အပြောင်းအလဲများကိုသိမ်းဆည်းပါ

စတိုင် input ကိုဖြည့်စွက်ပြီးနောက်သိမ်းဆည်းရန် "Add Style" ခလုတ်ကိုနှိပ်ပါ။ အယ်ဒီတာကိုလန်းဆန်းစေပြီးရွေးချယ်ထားသည့်ပိတ်ပင်တားဆီးမှုသည် 0 က်ဘ်ဆိုက်၏အသွင်အပြင်နှင့် ပတ်သက်. ထုံးစံပုံစံရှိသည်ကိုသင်တွေ့လိမ့်မည်။

အကျဉ်းချုပ်

WordPress Gutenberg လုပ်ကွက်များကိုစိတ်ကြိုက်ပြုပြင်ခြင်းသည်စိတ်ကြိုက် CSS ကို The Custom CSS နှင့်သတ်သတ်မှတ်မှတ်လုပ်ကွက်များအတွက်ပုံစံများအဖြစ်မိတ်ဆက်ပေးခြင်းဖြင့်ပြောင်းလွယ်ပြင်လွယ်။ အစွမ်းထက်ဖြစ်လာသည်။ အထက်ပါကျွမ်းကျင်မှုများကိုကျွမ်းကျင်စေခြင်းအားဖြင့်သင်သည်ဝက်ဘ်ဆိုက်၏ကျွမ်းကျင်မှုနှင့်အသုံးပြုသူအတွေ့အကြုံကိုတိုးတက်စေရန်ထူးခြားသောအကြောင်းအရာ module များကိုအလွယ်တကူဖန်တီးနိုင်သည်။ Gutenberg လုပ်ကွက်များ၏စတိုင်ကိုဒီဇိုင်းဆွဲရန်ဤဆောင်းပါးသည်သင့်အတွက်အထောက်အကူဖြစ်လိမ့်မည်ဟုမျှော်လင့်ပါ။