نمایش کد HTML در وردپرس

نمایش کد HTML در وردپرس (3 روش)

ممکن است گاهی اوقات در سایت خود و یا در پست‌های خود به نمایش کد HTML در وردپرس نیاز داشته باشید. برای مثال، امکان دارد به دنبال بهترین راه برای به اشتراک گذاشتن یک کد سفارشی برای کاربران خود باشید. همانطور که می‌دانید نمی‌توان کد را در وردپرس به صورت متن ساده در ویرایشگر وارد کرد تا نمایش داده شود. با این وجود، خوشبختانه می‌توان گفت نمایش کد HTML در وردپرس بسیار ساده است. برای این کار چندین روش وجود دارد، می‌توانید برای درج کد از بلوک‌های پیش فرض یا افزونه‌ها در پست‌ها و صفحات خود استفاده کنید.

در ادامه با ما همراه باشید تا نگاهی دقیق‌تر به چگونگی نمایش کد HTML در وردپرس بیندازیم. در این مقاله سه روش برای انجام این کار آموزش داده می‌شود.

چرا کد HTML در وردپرس نمایش داده می‌شود؟

HTML زبان نشانه‌گذاری استاندارد برای صفحات وب می‌باشد که شما می‌توانید از آن برای ایجاد وب‌سایت یا افزودن عناصر جدید به وب‌سایت‌تان استفاده کنید. ممکن است در بعضی مواقع به اشتراک گذاشتن قطعات کد HTML و نمایش کد HTML در وردپرس برای کاربران خود نیاز داشته باشید. به عنوان مثال، شاید بخواهید به آنها آموزش دهید که چگونه یک صفحه فرود یا لندینگ پیج بسازند یا یک فایل وردپرس را ویرایش کنند. برای این منظور باید کد HTML را در وردپرس به نمایش بگذارید.

اکثر کاربران مایلند کد HTML در وردپرس را کپی کنند و از آن ستفاده نمایند. بنابراین، مهم است که این کدها، به وضوح ارائه شوند. ترجیحاً کدهای Html باید به عنوان یک عنصر جداگانه درج شود تا با متن اطراف ترکیب نشود و کاربران را سردرگم نکند.

چگونه کد HTML را در پست‌ها و صفحات وردپرس نمایش دهیم

حال بیایید نگاهی به روش‌های نمایش کد HTML در وردپرس بیندازیم. همه روش‌ها بسیار ساده هستند، اگرچه روش اول ساده‌ترین و نتیجه بخش‌ترین است.

1- از ویژگی‌های کد پیش فرض در ویرایشگر Block استفاده کنید.
2- از یک افزونه اختصاصی استفاده کنید.
3-کد HTML را از ابزارهای توضیح سیستم یا third-party tools جاسازی کنید.

در ادامه با ما همراه باشید تا با هر یک از این روش‌ها، برای نمایش کد HTML در وردپرس آشنا شوید.

آموزش خصوصی طراحی سایت و وردپرس به صورت آنلاین

جهت مشاوره و کسب اطلاعات بیشتر از طریق واتساپ با شماره ۰۹۹۹۹۹-۱۵۸-۱۱ در تماس باشید.

پروژه محور - ارتباط مستقیم با مدرس

استفاده از ویژگی‌های کد پیش فرض در ویرایشگر بلاک

ویرایشگر بلاک وردپرس می‌تواند کد HTML در وردپرس (در پست‌ها یا صفحات سایت) را با 2 روش نمایش دهد. اولین مورد استفاده از گزینه Inline Code formatting است.

ابتدا در صفحه خود با نوشتن کد شروع کنید. همانطور که می‌دانید، هر خط به عنوان یک بلوک پاراگراف جداگانه ظاهر می‌شود. در ادامه به شما نشان خواهیم داد که چگونه این مشکل را برطرف کنید:

استفاده از کد پیش فرض برای نمایش کد HTML در وردپرس

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

کد درون خطی برای نمایش کد  HTML در وردپرس

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

استک کد برای نمایش کد HTML در وردپرس

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

نمایش کد HTML در وردپرس در Front end

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

با این حال، می‌توانید به جای آن از بلوک کد استفاده کنید :

استفاده از بلوک کد برای نمایش کد HTML در وردپرس

توجه داشته باشید که این با بلوک HTML سفارشی متفاوت است.

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

کدی را که می‌خواهید در بلوک نمایش دهید وارد کنید:

نمایش کد HTML در وردپرس درون بلوک کد

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

استفاده از Style برای تغییر کد HTML در وردپرس

همانطور که می‌بینید، استفاده از بلوک کد می‌تواند راهی آسان و سریع برای نمایش کد HTML در وردپرس و پست‌های سایت باشد.

استفاده از افزونه برای نمایش کد HTML

روش دیگر این است که شما می‌توانید کد HTML را در وردپرس با افزونه‌ای مانند Highlighting Code Block نمایش دهید. این افزونه به شما این امکان را می‌دهد تا کد هایلایت شده را در پست‌ها و صفحات خود وارد کنید.

برای شروع، افزونه را در سایت خود نصب و فعال کنید:

استفاده از افزونه Highlighting Code Block برای نمایش کد HTML در وردپرس

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

نمایش کد HTML در وردپرس با کمک افزونه Highlighting Code Block

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

کد HTML در وردپرس در افرونه Highlighting Code Block

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

نمایش کد HTML در وردپرس در افرونه Highlighting Code Block برای کاربران

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

کپی کد HTML در وردپرس از طریق افزونه Highlighting Code Block

این کار کپی کد را برای کاربران راحت‌تر می‌کند.

جاسازی کد HTML در وردپرس ازطریق third-party tools

برخی از ویرایشگرهای کد آنلاین مانند CodePen به شما امکان را می‌دهند کد HTML را در پست‌ها یا صفحات وردپرس خود جایگذاری کنید. اگر می‌خواهید بر روی نمایش کد HTML در وردپرس کنترل بیشتری داشته باشید، این گزینه می‌تواند بهترین انتخاب برای شما باشد.

می‌توانید با نوشتن و سفارشی کردن کد HTML در CodePen شروع کنید:

جاسازی کد HTML در وردپرس ازطریق third-party tools

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

نمایش کد HTML در وردپرس ازطریق third-party tools

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

استفاده از third-party tools برای نمایش کد HTML در وردپرس

همانطور که میبینید، کاربران می‌توانند هم کد HTML و هم نتیجه را مشاهده کنند.

جمع بندی

در این مقاله تلاش کردیم شما را با نحوه نمایش کد HTML در وردپرس آشنا نماییم. نمایش کدهای Html می‌تواند در ارائه مطالب آموزشی مربوط به طراحی سایت و سایر موارد بسیار کارآمد باشد. امیدواریم که این مطالب برای شما مفید بوده باشد.

خدمات طراحی سایت

طراحی سایت مطابق با استانداردهای روز برنامه‌نویسی، به همراه آموزش استفاده و ۶ ماه پشتیبانی رایگان