نمایش کد HTML در وردپرس (3 روش)
ممکن است گاهی اوقات در سایت خود و یا در پستهای خود به نمایش کد HTML در وردپرس نیاز داشته باشید. برای مثال، امکان دارد به دنبال بهترین راه برای به اشتراک گذاشتن یک کد سفارشی برای کاربران خود باشید. همانطور که میدانید نمیتوان کد را در وردپرس به صورت متن ساده در ویرایشگر وارد کرد تا نمایش داده شود. با این وجود، خوشبختانه میتوان گفت نمایش کد HTML در وردپرس بسیار ساده است. برای این کار چندین روش وجود دارد، میتوانید برای درج کد از بلوکهای پیش فرض یا افزونهها در پستها و صفحات خود استفاده کنید.
- چرا کد HTML در وردپرس نمایش داده میشود؟
- چگونه کد HTML را در پستها و صفحات وردپرس نمایش دهیم
- استفاده از ویژگیهای کد پیش فرض در ویرایشگر بلاک
- استفاده از افزونه برای نمایش کد HTML
- جاسازی کد HTML در وردپرس ازطریق third-party tools
در ادامه با ما همراه باشید تا نگاهی دقیقتر به چگونگی نمایش کد HTML در وردپرس بیندازیم. در این مقاله سه روش برای انجام این کار آموزش داده میشود.
چرا کد HTML در وردپرس نمایش داده میشود؟
↑HTML زبان نشانهگذاری استاندارد برای صفحات وب میباشد که شما میتوانید از آن برای ایجاد وبسایت یا افزودن عناصر جدید به وبسایتتان استفاده کنید. ممکن است در بعضی مواقع به اشتراک گذاشتن قطعات کد HTML و نمایش کد HTML در وردپرس برای کاربران خود نیاز داشته باشید. به عنوان مثال، شاید بخواهید به آنها آموزش دهید که چگونه یک صفحه فرود یا لندینگ پیج بسازند یا یک فایل وردپرس را ویرایش کنند. برای این منظور باید کد HTML را در وردپرس به نمایش بگذارید.
اکثر کاربران مایلند کد HTML در وردپرس را کپی کنند و از آن ستفاده نمایند. بنابراین، مهم است که این کدها، به وضوح ارائه شوند. ترجیحاً کدهای Html باید به عنوان یک عنصر جداگانه درج شود تا با متن اطراف ترکیب نشود و کاربران را سردرگم نکند.
چگونه کد HTML را در پستها و صفحات وردپرس نمایش دهیم
↑حال بیایید نگاهی به روشهای نمایش کد HTML در وردپرس بیندازیم. همه روشها بسیار ساده هستند، اگرچه روش اول سادهترین و نتیجه بخشترین است.
1- از ویژگیهای کد پیش فرض در ویرایشگر Block استفاده کنید.
2- از یک افزونه اختصاصی استفاده کنید.
3-کد HTML را از ابزارهای توضیح سیستم یا third-party tools جاسازی کنید.
در ادامه با ما همراه باشید تا با هر یک از این روشها، برای نمایش کد HTML در وردپرس آشنا شوید.
آموزش خصوصی طراحی سایت و وردپرس به صورت آنلاین
جهت مشاوره و کسب اطلاعات بیشتر از طریق واتساپ با شماره ۰۹۹۹۹۹-۱۵۸-۱۱ در تماس باشید.
پروژه محور - ارتباط مستقیم با مدرس
استفاده از ویژگیهای کد پیش فرض در ویرایشگر بلاک
↑ویرایشگر بلاک وردپرس میتواند کد HTML در وردپرس (در پستها یا صفحات سایت) را با 2 روش نمایش دهد. اولین مورد استفاده از گزینه Inline Code formatting است.
ابتدا در صفحه خود با نوشتن کد شروع کنید. همانطور که میدانید، هر خط به عنوان یک بلوک پاراگراف جداگانه ظاهر میشود. در ادامه به شما نشان خواهیم داد که چگونه این مشکل را برطرف کنید:

اکنون روی هر بلوک پاراگراف (یا خط) کلیک کنید و نماد More را از نوار ابزار انتخاب کنید. شما باید گزینه ای به نام کد درون خطی یا Inline code را ببینید. ادامه دهید و روی آن کلیک کنید.

هنگامی که این کار را برای هر خط انجام دادید، کل کد را انتخاب کنید و روی نماد Stack در نوار ابزار کلیک کنید.

اکنون، این کد HTML ممکن است در front end ظاهر شود.

ممکن است این روش برای کدهای طولانی کمی وقت گیر باشد. به همین دلیل، آن را فقط برای قطعههای کوتاه توصیه میکنیم.
با این حال، میتوانید به جای آن از بلوک کد استفاده کنید :

توجه داشته باشید که این با بلوک HTML سفارشی متفاوت است.
روش دوم برای افزودن کد HTML به منظور نمایش یک عنصر خاص (مانند ویجت یا عکس) در صفحه استفاده میشود.
کدی را که میخواهید در بلوک نمایش دهید وارد کنید:

اگر Style را در پانل تنظیمات انتخاب کنید، میتوانید رنگ متن و پس زمینه را تغییر دهید و تایپوگرافی را سفارشی کنید:

همانطور که میبینید، استفاده از بلوک کد میتواند راهی آسان و سریع برای نمایش کد HTML در وردپرس و پستهای سایت باشد.
استفاده از افزونه برای نمایش کد HTML
↑روش دیگر این است که شما میتوانید کد HTML را در وردپرس با افزونهای مانند Highlighting Code Block نمایش دهید. این افزونه به شما این امکان را میدهد تا کد هایلایت شده را در پستها و صفحات خود وارد کنید.
- افزونه وردپرس چیست + کاربرد افزونه ها در وردپرس
- آموزش نصب افزونه در وردپرس از طریق هاست یا نرم افزار های FTP، پیشخوان و یا Github
- چه تعداد افزونه در وردپرس نصب کنیم؟ تعداد استاندارد افزونه ها در وردپرس
برای شروع، افزونه را در سایت خود نصب و فعال کنید:

سپس، پست یا صفحه ای را که میخواهید کد را در آن نمایش دهید باز کنید و به دنبال بلوک Highlighting Code بگردید:

در ادامه میتوانید کد خود را در بلوک وارد کنید. همچنین میتوانید زبان کد را از منوی کشویی انتخاب کنید:

بیایید ببینیم این موارد برای کاربران چگونه خواهد بود:

همانطور که میبینید، تگهای HTML رنگ متفاوتی با متن ورودی دارند که خواندن کد را آسانتر میکند. علاوه بر این، یک نماد در گوشه بالا سمت راست وجود دارد که میتوانید روی آن کلیک کنید تا کل متن برجسته شود:

این کار کپی کد را برای کاربران راحتتر میکند.
جاسازی کد HTML در وردپرس ازطریق third-party tools
↑برخی از ویرایشگرهای کد آنلاین مانند CodePen به شما امکان را میدهند کد HTML را در پستها یا صفحات وردپرس خود جایگذاری کنید. اگر میخواهید بر روی نمایش کد HTML در وردپرس کنترل بیشتری داشته باشید، این گزینه میتواند بهترین انتخاب برای شما باشد.
میتوانید با نوشتن و سفارشی کردن کد HTML در CodePen شروع کنید:

سپس، کار خود را ذخیره کرده و URL آن را کپی کنید. صفحه پستی را که میخواهید کد HTML را در آن نمایش دهید باز کنید و بلوک Embed را اضافه کنید :

در نهایت URL را از CodePen وارد کرده و Embed را بزنید . کد نمایش داده شده ممکن است چیزی شبیه به این باشد:

همانطور که میبینید، کاربران میتوانند هم کد HTML و هم نتیجه را مشاهده کنند.
جمع بندی
↑در این مقاله تلاش کردیم شما را با نحوه نمایش کد HTML در وردپرس آشنا نماییم. نمایش کدهای Html میتواند در ارائه مطالب آموزشی مربوط به طراحی سایت و سایر موارد بسیار کارآمد باشد. امیدواریم که این مطالب برای شما مفید بوده باشد.
خدمات طراحی سایت
طراحی سایت مطابق با استانداردهای روز برنامهنویسی، به همراه آموزش استفاده و ۶ ماه پشتیبانی رایگان