برای سایت‌های آموزشی که محتوای برنامه‌نویسی ارائه می‌دهند، نمایش کدها به شکلی منظم و کاربرپسند اهمیت زیادی دارد 😊. یکی از راه‌های مناسب برای انجام این کار در وردپرس، استفاده از افزونه‌های مخصوص برای قرار دادن باکس کد در مطالب است. با این روش، کدهای برنامه‌نویسی با ظاهری جذاب و خوانا نمایش داده می‌شوند 📄، و کاربران به راحتی می‌توانند آن‌ها را در پروژه‌های خود استفاده کنند.
علاوه بر این، استفاده از باکس‌های کد به کاربران کمک می‌کند تا هنگام کپی کردن کدها، بدون هیچ مشکلی یا سردرگمی این کار را انجام دهند 📋. این قابلیت به خصوص برای مبتدیان که هنوز با ساختار کدها آشنایی کامل ندارند، بسیار مفید است. با استفاده از افزونه‌ها، می‌توانید کدها را به راحتی در پست‌های خود قرار دهید و تجربه‌ای بهتر و راحت‌تر را برای کاربران خود فراهم کنید 👌.
این ویژگی‌ها باعث می‌شود تا وب‌سایت شما حرفه‌ای‌تر به نظر برسد و تجربه کاربری بهتری را ارائه دهد 🎯. پس اگر می‌خواهید کدهای خود را به بهترین شکل ممکن نمایش دهید و کاربران را راضی نگه دارید، حتماً از افزونه‌های مناسب برای این کار استفاده کنید 🔧
📝 آموزش قرار دادن باکس کد در وردپرس
حال قصد داریم به معرفی افزونه‌ای مفید بپردازیم که با استفاده از آن می‌توانید کدهای برنامه‌نویسی با هر زبان برنامه‌نویسی از جمله PHP، CSS، HTML، جاوا اسکریپت و… را به صورت مرتب و زیبایی در قالب یک باکس نمایش دهید 📦. با این روش، نمایش کدها در نوشته‌های وردپرس شما به صورت منظم و خوانا خواهد بود 📄✨.
اگر شما هم به دنبال روشی برای نمایش کدهای برنامه‌نویسی به صورت منظم و حرفه‌ای در مطالب وردپرس خود هستید، این آموزش را تا انتها دنبال کنید 🚀🔍. با استفاده از این افزونه، می‌توانید کدها را به راحتی در پست‌های خود قرار داده و تجربه بهتری را برای کاربران خود فراهم کنید 🖥️💡
افزونه نمایش کد در وردپرس
افزونه‌ای که قصد معرفی آن را دارم، با نام Urvanov Syntax Highlighter در مخزن وردپرس ثبت شده است و تا کنون بیش از ۵۰,۰۰۰ نصب فعال داشته و امتیاز 6.6.1 را از کاربران کسب کرده است. به همین دلیل، می‌توانید از این افزونه به عنوان یکی از بهترین گزینه‌ها برای نمایش کد در وردپرس استفاده کنید. 💻🔍
برای استفاده از این افزونه، ابتدا وارد پنل وردپرس خود شوید و از بخش افزونه‌ها، نام “Urvanov Syntax Highlighter” را جستجو کرده و آن را دانلود کنید. پس از دانلود، افزونه را نصب و فعال کنید. برای این منظور، می‌توانید از آموزش نصب افزونه در وردپرس کمک بگیرید. 🛠️🔧
بعد از فعال‌سازی، به منوی تنظیمات > Crayon مراجعه کرده و تنظیمات افزونه را بر اساس نیازهای خود سفارشی‌سازی کنید. 🎨📊
ویژگی‌های کلیدی افزونه Urvanov Syntax Highlighter
- تولبار سفارشی‌سازی: با این بخش می‌توانید نحوه نمایش منوی بالای باکس کد را تنظیم کنید. به طور پیش‌فرض، تولبار مخفی است و با حرکت نشانگر موس روی باکس کد، نمایش داده می‌شود. این تولبار به کاربران امکان می‌دهد کدها را کپی کنند یا آن‌ها را در پنجره جدید باز کنند. 🖱️📝
- مدیریت خطوط کد: این بخش به شما امکان می‌دهد برای هر خط کد، استایل دلخواهی اعمال کنید، خطوط را شماره‌گذاری کنید و خطوط مهم را علامت‌گذاری نمایید. 📑🔢
سفارشی‌سازی قالب و فونت کدها
- انتخاب قالب: می‌توانید از میان قالب‌های آماده یکی را انتخاب کنید یا با استفاده از دانش کدنویسی خود، یک قالب اختصاصی برای نمایش کدها ایجاد کنید. 🎨📋
- تنظیمات فونت: با استفاده از این بخش، می‌توانید فونت مناسب برای نمایش کدها در باکس را انتخاب کنید تا با قالب انتخابی همخوانی داشته باشد. 🔠✒️
تنظیمات پیشرفته نمایش کدها
- تعیین ابعاد و تراز باکس کد: با استفاده از گزینه‌های ارتفاع و عرض، می‌توانید ابعاد دلخواه برای باکس کد تعیین کنید. همچنین، با تنظیم فاصله‌ها از بالا، پایین، چپ و راست، می‌توانید حاشیه‌هایی ایجاد کنید که به نمایش بهتر کدها کمک می‌کند. علاوه بر این، امکان تراز کردن باکس کد در مرکز، چپ یا راست نوشته نیز وجود دارد. 📏↔️
نتیجه نهایی کار با افزونه Urvanov Syntax Highlighter
پس از افزودن کد به نوشته خود، کدها با ظاهری زیبا و منظم در وردپرس نمایش داده می‌شوند و کاربران می‌توانند به راحتی از آن‌ها استفاده کنند. 🌟📑
به همین سادگی، با استفاده از افزونه Urvanov Syntax Highlighter می‌توانید جعبه کد را در وردپرس قرار دهید. این روش ساده و کارآمدی برای نمایش کد در مطالب وردپرس است که با نصب افزونه به راحتی انجام می‌شود. 🚀💻
سوالات متداول درباره قرار دادن جعبه کد در وردپرس با استفاده از افزونه
چگونه یک جعبه کد در وردپرس اضافه کنم؟
برای اضافه کردن جعبه کد در وردپرس، ابتدا روی نماد Block Inserter کلیک کنید. سپس، بلوک کد را از طریق نماد Block Inserter یا دستور اسلش /code به نوشته خود اضافه کنید. همچنین می‌توانید با تایپ کردن / در یک بلوک پاراگراف جدید و فشردن کلید Enter، به سرعت یک بلوک کد اضافه کنید. استفاده از دستور اسلش /code ساده‌ترین روش برای درج یک بلوک کد در وردپرس است. 💻📦
آیا افزونه Urvanov Syntax Highlighter رایگان است؟
بله، افزونه Urvanov Syntax Highlighter کاملاً رایگان است و می‌توانید بدون هیچ هزینه‌ای از آن برای نمایش کدهای برنامه‌نویسی در وردپرس استفاده کنید. 🎉💸
افزونه Urvanov Syntax Highlighter چیست؟
Urvanov Syntax Highlighter یک افزونه کاربردی برای وردپرس است که به شما امکان می‌دهد به راحتی جعبه‌های کد را در نوشته‌ها و برگه‌های خود قرار دهید و کدهای برنامه‌نویسی را با ظاهری زیبا و منظم به کاربران نمایش دهید. 🛠️🔍
جمع‌بندی
امیدواریم آموزش نحوه قرار دادن جعبه کد در وردپرس با استفاده از افزونه Urvanov Syntax Highlighter مورد توجه شما قرار گرفته باشد و بتوانید به راحتی از آن برای افزودن کدهای برنامه‌نویسی در مطالب وردپرس استفاده کنید. با استفاده از این افزونه، کاربران سایت شما قادر خواهند بود تا کدهای درج شده در مطالب را به شکلی زیبا و منظم مشاهده و استفاده کنند. اگر سوالی در رابطه با این آموزش دارید یا مشکلی برایتان پیش آمده، می‌توانید آن را در بخش دیدگاه‌ها مطرح کنید تا در کوتاه‌ترین زمان ممکن به شما پاسخ دهیم. 😊📝