ওয়ার্ডপ্রেস থিমকে গুটেনবার্গ সাপোর্ট দেয়ার গাইডলাইন

গুটেনবার্গ কি?


গুটেনবার্গ হল ওয়ার্ডপ্রেসের নতুন এডিটর । এটি জোহানেস গুটেনবার্গের নামে নামকরণ করা হয়েছে, তিনি ৫০০ বছর আগে চলমান প্রিন্টিং প্রেস আবিষ্কার করেছিলেন । বর্তমান ভিজ্যুয়াল এডিটর দিয়ে কাজ করতে শর্টকোড এবং এইচটিএমএল ব্যবহার করতে হয় । তাদের লক্ষ্য এই এডিটরের ব্যাবহার সহজ করা , বিশেষ করে যারা শুধু ওয়ার্ডপ্রেস নিয়ে কাজ শুরু করেছেন তাদের জন্য। আপনারা এক্সাম্পল পোষ্ট চেক করতে পারেন ।

আপনি যদি ক্লায়েন্টদের জন্য কাস্টম থিম তৈরি করেন অথবা থিম সেল করার জন্য তৈরি করে থাকেন তাহলে এই মুহূর্তে গুটেনবার্গ সাপোর্ট দেয়া উচিত।
চলুন দেখে নেই কিভাবে করতে পারি সেটা :

ফ্রন্টেন্ড স্টাইল
আপনি সম্ভবত ওয়ার্ডপ্রেসের ডিফল্ট আইটেম সমূহ যেমন ব্লককোট, রুল(লাইন) ইত্যাদির ডিজাইন করে থাকেন , কিন্তু গুটেনবার্গ নিজস্ব ডিজাইন লোড করে। আপনি আপনার থিমের সাথে সামঞ্জস্য নিশ্চিত করার জন্য অতিরিক্ত ডিজাইন করতে পারেন ।

টার্ন অন ওয়াইড ইমেজ

আপনার থিম যদি ওয়াইড ইমেজ সাপোর্ট করে তাহলে ব্যাবহার কারিরা সহজে ওয়াইড ইমেজ ব্যাবহার করতে পারবেন । সেক্ষেত্রে র‍্যাপার বা কনটেইনারকে এক্সপ্যান্ড করে ইমেজ ওয়াইড হবে ।

সাপোর্ট দেয়ার জন্য কেবল আপনার থিম এর functions.php ফাইলে এটি অন্তর্ভুক্ত করুন:

add_theme_support( 'align-wide' );

এটা থিমের সাথে ভাল কাজ করবে তা নিশ্চিত করার জন্য ফ্রন্টেন্ডে এই অ্যালাইনমেন্টগুলির স্টাইল করে দেয়া উচিত।

@media only screen and (min-width: 768px) {

  .alignfull {
    margin-left: calc(50% - 50vw);
    margin-right: calc(50% - 50vw);
    width: auto;
    max-width: 1000%;
  }

  .alignwide {
    margin-left: calc(25% - 25vw);
    margin-right: calc(25% - 25vw);
    width: auto;
    max-width: 1000%;
  }

  .alignwide img,
  .alignfull img {
    display: block;
    margin: 0 auto;
  }
}

ব্লককোট

গুটেনবার্গ দুই ধরনের ব্লককোট ব্যাবহার করে : একটি স্টান্ডার্ড ব্লককোট এবং আরেকটি পুল ব্লককোট। আমরা দুটিকেই ডিজাইন করতে পারি :

/* Blockquote --------------------------------------------- */
 blockquote, blockquote.wp-block-quote {
	 background: transparent;
	 text-align: left;
}
 blockquote p, blockquote.wp-block-quote p {
	 color: #222;
	 font-size: 24px;
	 font-style: normal;
	 font-weight: 400;
}
 blockquote cite, blockquote.wp-block-quote cite, blockquote .wp-block-quote__citation, blockquote.wp-block-quote .wp-block-quote__citation {
	 color: #222;
	 display: block;
	 font-size: 16px;
	 font-weight: 700;
	 margin-top: 12px;
	 text-transform: uppercase;
}
 blockquote p:last-of-type, blockquote.wp-block-quote p:last-of-type {
	 margin-bottom: 0;
}
 blockquote.is-large, blockquote.wp-block-quote.is-large, blockquote.is-style-large, blockquote.wp-block-quote.is-style-large {
	 margin: 15px auto;
}
/* Pull Quote --------------------------------------------- */
 .wp-block-pullquote {
	 border: none;
	 padding: 0;
}
 .wp-block-pullquote blockquote {
	 border-left: 0;
	 border-top: 8px solid #222;
	 border-bottom: 8px solid #222;
	 padding: 16px 0;
	 text-align: center;
	 max-width: 50%;
	 margin: 0 auto;
}
 .wp-block-pullquote.alignleft blockquote, .wp-block-pullquote.alignright blockquote {
	 max-width: 100%;
}
 

হরিজোন্টাল রুল


এখানে হরিজোন্টাল রুল একটি ক্লাস ব্যাবহার করে থাকে ( hr.wp-block-separator) এটিকে ধরে আমরা আমাদের থিম অনুযায়ী ডিজাইন করতে পারি

/* Separator --------------------------------------------- */
 .wp-block-separator:not(.is-style-dots), hr:not(.is-style-dots) {
	 background-color: #222;
	 border: 0;
	 height: 1px;
}
 .wp-block-separator:not(.is-style-wide):not(.is-style-dots), hr:not(.is-style-wide):not(.is-style-dots) {
	 width: 100%;
	 height: 4px;
	 background: transparent;
}
 .wp-block-separator:not(.is-style-wide):not(.is-style-dots)::before, hr:not(.is-style-wide):not(.is-style-dots)::before {
	 content: '';
	 display: block;
	 height: 4px;
	 width: 40px;
	 background: #222;
}
 .wp-block-separator.is-style-dots:before, hr.is-style-dots:before {
	 color: #fff;
	 font-size: 18px;
	 letter-spacing: 12px;
	 padding-left: 12px;
}
 

বাটন


গুটেনবার্গের একটি নিজস্ব বাটন ব্লক রয়েছে যা নিজের ডিফল্ট স্টাইলিং ব্যাবহার করে। আপনি আপনার থিম এর বাটন ডিজাইনের সাথে মিলিয়ে এটিকে কাস্টমাইজ করতে পারেন ।

ব্লক কালার প্যালেট :


গুটেন বার্গের নিজস্ব ব্লক কালার প্যালেট রয়েছে । আমরা চাইলে আমাদের থিমের কালারগুলি অথবা নিজেদের ইচ্ছা মত কালার প্যালেট তৈরী করতে পারি

ব্লক কালার প্যালেট সাপোর্ট দেয়ার জন্য ণিচের কোড গুলি আপনার থিম এর functions.php ফাইলে অন্তর্ভুক্ত করুন:

add_theme_support( 'editor-color-palette', array(
    array(
        'name' => __( 'strong magenta', 'themeLangDomain' ),
        'slug' => 'strong-magenta',
        'color' => '#a156b4',
    ),
    array(
        'name' => __( 'light grayish magenta', 'themeLangDomain' ),
        'slug' => 'light-grayish-magenta',
        'color' => '#d0a5db',
    ),
    array(
        'name' => __( 'very light gray', 'themeLangDomain' ),
        'slug' => 'very-light-gray',
        'color' => '#eee',
    ),
    array(
        'name' => __( 'very dark gray', 'themeLangDomain' ),
        'slug' => 'very-dark-gray',
        'color' => '#444',
    ),
) );

প্রত্যেকটি স্টাইলের জন্য সিএসএস করুন নিম্নোক্ত ভাবে :

  • স্লাগের পুর্বে has- এবং ব্যাকগ্রাউন্ড কালার হলে শেষে background-color , টেক্সট কালার হলে শুধু -color ব্যাবহার করতে হবে
.has-strong-magenta-background-color {
    background-color: #313131;
}

.has-strong-magenta-color {
    color: #f78da7;
}

লেখক সম্পর্কে

অপু জামান

পিএইচপি ডেভেলপার এবং প্রযুক্তি প্রেমী। ফাংশন নিয়ে লজিক লিখতে ভাল লাগে, আর ভাল লাগে ঘুরতে। টেকয়েস'এর পাশাপাশি তাই টেকওয়ান্স'এও ঘুরি।

মন্তব্য করুন

সাম্প্রতিক মন্তব্যগুলি

Pin It on Pinterest

Shares
Share This