اگر هر نوع نرم افزار یا نکته برنامه نویسی را ارائه می دهید ، قطعاً می خواهید برخی از کدهای کد را به اشتراک بگذارید. این روش به اشتراک گذاری قطعه کد می تواند به آنها کمک کند تا یک تمرین را به سرعت تنظیم کنند. با این حال ، به اشتراک گذاری کد با تمام قالب بندی های لازم به طور پیش فرض امکان پذیر نیست. منظور من از قالب بندی ، برجسته سازی نحوی است. هنوز هم انجام این کار کاملاً آسان است.
خوشبختانه، اگر از divi استفاده می کنید، باید بدانید که یک روش داخلی برای انجام دستی این کار وجود دارد، تا استایل های سفارشی را به این قطعه کد اضافه کنید. علاوه بر این، پلاگین ها و ressources برنامه های شخص ثالثی که واقعاً می توانند فرآیند ایجاد اسنیپت های زیبا و کاربردی در Divi را ساده کنند.
در این آموزش ، نحوه اشتراک گذاری قطعه کد در Divi (دستی) را به شما نشان می دهم. و همچنین به شما نحوه طراحی بلوک های قطعه با Divi Builder را نشان می دهم که شما را به سطح بعدی می رساند.
بررسی
در اینجا مروری بر طرح های قطعه ای ممکن در این آموزش وجود دارد.
Code Snippet Boxes با قطعه کد ، حالت دستی را اضافه می کند.
پیش نیازهای آموزش
برای این آموزش، تنها چیزی که نیاز دارید این است تم دیوی، نصب و فعال است. ما قطعه کد نمونه را از ابتدا با استفاده از Divi Builder در یک صفحه جدید می سازیم.
برای شروع ، یک صفحه جدید ایجاد کنید و Divi Builder را در رابط عمومی مستقر کنید. سپس گزینه "ساخت از ابتدا" را انتخاب کنید.
حالا شما آماده هستید!
طراحی جعبه شخصی برای قطعه کد در Divi
از آنجا که قطعه کد ما در یک ماژول متن قرار دارد ، می توانیم از سازنده divi برای افزودن عناصر طراحی به ماژول متن (و اطراف آن) استفاده کنیم. برای این طراحی ، ما از یک ماژول خلاصه استفاده خواهیم کرد تا به عنوان برچسب قطعه مورد استفاده قرار گیرد. در مرحله بعد ، ما مکان نما را در سمت چپ ماژول متن سبک می کنیم و قرار می دهیم. بعد ، ماژول متن قطعه خود را سبک می کنیم.
ایجاد بخش ، ردیف و ستون
ابتدا باید یک بخش جدید با یک ردیف ستون ایجاد کنیم.
سپس پارامترهای خط را به شرح زیر به روز کنید:
عرض روده: 1
پد سفارشی: 0px در بالای صفحه، 0px در پایین
ماژول متن را اضافه کنید
سپس ماژول متن را به خط اضافه کنید.
می توانید ترک کنید محتویات به صورت پیش فرض. ما قطعه کد وردپرس خود را بعداً به آن اضافه خواهیم کرد. در حال حاضر، بیایید ماژول متن را با به روز رسانی پارامترهای متن زیر مدل کنیم:
رنگ زمینه: # eff0f1 رنگ متن: # 000000 حاشیه سفارشی: 60 پیکسل سمت چپ بالشتک سفارشی: 3٪ بالا ، 3٪ پایین ، 3٪ چپ ، 3٪ راست
عرض حاشیه بالا: 10 پیکسل رنگ حاشیه بالا: # 7cda24
ایجاد برچسب قطعه
برای ایجاد برچسب قطعه ، ما از یک ماژول blurb استفاده می کنیم. به شما این امکان را می دهد که در کنار زبان کد نمایش داده شده ، یک نماد متن blurb (یا نماد تصویر سفارشی) اضافه کنید.
یک ماژول ارائه ایجاد کنید و آن را به بالای ماژول متن بکشید. سپس تنظیمات ارائه زیر را به روز کنید:
عنوان: css مطالب: [حذف محتوای ساختگی] استفاده از نماد: نماد YES: به تصویر صفحه مراجعه کنید
سپس پارامترهای طراحی را به شرح زیر به روز کنید:
رنگ زمینه: # 1b2426 رنگ نماد: # 7cda24 تصویر / نماد محل: سمت چپ اندازه قلم: 20px عنوان عنوان متن: #ffffff اندازه متن متن: 16px
ارتفاع خط عنوان: 1.3em عرض: 100px حاشیه سفارشی: -44px پایین ، -50px بالشتک سفارشی سمت چپ: 10px بالا ، 2px پایین ، 15px چپ ، 15px راست
برای ایجاد طرح های بیشتر جعبه قطعه ، بخش را کپی کنید
این از اولین طراحی جعبه کد ما پشتیبانی می کند. اکنون ما فقط باید بخشی را که حاوی طراحی بلوک کد است کپی کنیم و برچسب و رنگ ها را به روز کنیم تا یک بلوک کد جدید برای یک زبان برنامه نویسی متفاوت ایجاد کنیم. این البته اختیاری است ، اما اگر قصد دارید تکه های مختلفی به یک صفحه اضافه کنید ، به شما کمک می کند تا یک رنگ بندی متفاوت برای هر یک داشته باشید.
به عنوان مثال ، بخش را کپی کرده و تنظیمات Blurb module را باز کنید.
عنوان "js" را برای Javascript به روز کنید.
سپس بر روی Image / Icon Color راست کلیک کرده و Find and Replace را انتخاب کنید.
گزینه های جستجو و جایگزین به روز شده:
در: این بخش جایگزینی با: [رنگ جدید] جایگزینی همه: بررسی جایگزینی تمام مقادیر پیدا شده
اکنون یک قطعه قطعه جدید برای قطعه های JS دارید.
در اینجا مثالی از جعبه های قطعه برای انواع کد محبوب برای وردپرس آورده شده است.
با استفاده از افزونه کد Prettify برای اضافه کردن نحو برجسته به قطعه کد دستی
خوب ، درست است که با روش دستی می توانید بلافاصله متن را بچسبانید و تصویب کنید. پیشنمایش پلاگین کد فوراً کد برجسته شده را به همه برچسب های "قبل" اضافه می کند. زیبایی این افزونه این است که به هیچ وجه سفارشی سازی لازم نیست. تمام کاری که شما باید انجام دهید این است که افزونه را بارگیری و فعال کنید.
در اینجا مثالی از کد با Active Prettify Code به نظر می رسد.
Code Prettify می آید از گوگل و همچنین برای سبک کردن تمام آن قطعه های شگفت انگیز استفاده می شود stackoverflow.com.
برای پایان دادن به
مشاهده قطعه کد در Divi کار دشواری نیست. اضافه کردن قطعه ها به صورت دستی با استفاده از برچسب های کد پیش و ورد ارائه شده توسط وردپرس کار اکثر قطعه های غیر html را انجام می دهد ، اما ابتدا باید قطعه را از طریق رمزگذار اجرا کنید. html برای اطمینان. علاوه بر این ، می توانید سبک متن قطعه را با استفاده از تنظیمات ماژول متن بیشتر شخصی سازی کنید. و Code Prettify را برای افزودن برجسته به قطعه های دستی خود فراموش نکنید.
برای آن دسته از شما که به طور منظم اسنیکت ها را به اشتراک می گذارید ، استفاده از افزونه SyntaxHighlighter احتمالاً بهترین شرط شماست. در هر صورت ، شما همیشه این گزینه را خواهید داشت که با استفاده از Divi Builder طرح های خلاقانه تری را به قطعه های خود اضافه کنید.
موفق باشید.
