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

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

توی این آموزش هر سه روش رو قدم‌به‌قدم با هم پیش می‌بریم. اگه می‌خواید کد کل نوشته رو ببینید، «ویرایشگر کد» به کارتون میاد. برای تغییر یک بلوک از «ویرایش به‌صورت HTML» استفاده می‌کنید و برای قراردادن یک کد مستقل هم سراغ بلوک «HTML سفارشی» می‌رید.

تبدیل ویرایشگر وردپرس به HTML در ویرایشگر بلوک

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

ورود به حالت ویرایشگر کد برای کل نوشته

1. از پیشخوان وردپرس به بخش «نوشته‌ها» برید و نوشته‌ای رو که می‌خواید تغییر بدید باز کنید.
2. روی آیکون سه‌نقطه در گوشه بالای صفحه ویرایش کلیک کنید.
3. توی بخش مربوط به ویرایشگر، گزینه «ویرایشگر کد» یا «Code editor» رو بزنید.
4. حالا HTML کل نوشته رو همراه با نشانه‌های بلوک‌های وردپرس می‌بینید.

توی فهرست میان‌برهای ویرایشگر، میان‌بر جابه‌جایی بین حالت دیداری و کد هم دیده می‌شه. این میان‌بر معمولاً Ctrl + Shift + Alt + M در ویندوز و ⌘ + Shift + Option + M در macOS هست. البته مرورگر یا سیستم‌عامل ممکنه اجازه اجرای اون رو نده. اگه میان‌بر کار نکرد، از همون منوی سه‌نقطه استفاده کنید.

بین کدهای نوشته، کامنت‌هایی مثل <!-- wp:paragraph --> می‌بینید. این کامنت‌ها نشانه‌های بلوک وردپرس هستن و نوع هر بخش رو به ویرایشگر معرفی می‌کنن. بهتره فقط بخشی رو تغییر بدید که دقیقاً می‌دونید چه کاری انجام می‌ده.

برگشت از ویرایشگر کد به ویرایشگر دیداری

برای برگشتن به حالت قبلی، منوی سه‌نقطه رو دوباره باز کنید و «ویرایشگر دیداری» یا «Visual editor» رو بزنید. همون میان‌بر صفحه‌کلید هم برای برگشت کاربرد داره. بعد از تغییر حالت، یک بار نوشته رو مرور کنید تا مطمئن بشید همه بلوک‌ها درست نمایش داده می‌شن.

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

ویرایش HTML فقط برای یک بلوک

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

استفاده از گزینه ویرایش به‌صورت HTML

1. روی بلوکی که قصد دارید ویرایشش کنید کلیک کنید.
2. منوی سه‌نقطه رو از نوار ابزار همون بلوک باز کنید.
3. اگه گزینه «ویرایش به‌صورت HTML» یا «Edit as HTML» رو دیدید، روی اون بزنید.
4. تغییر موردنظرتون رو با دقت انجام بدید و ساختار اصلی بلوک رو دست‌کاری نکنید.

برای نمونه، داخل یک بلوک پاراگراف ممکنه کدی مثل <p>متن نمونه</p> ببینید. <p> تگ HTML پاراگرافه؛ یعنی به مرورگر می‌گه محتوای بین تگ آغاز و پایان رو مثل یک پاراگراف نمایش بده.

برگردوندن بلوک به حالت دیداری

وقتی ویرایشتون تموم شد، منوی سه‌نقطه همون بلوک رو باز کنید و «ویرایش دیداری» یا «Edit visually» رو بزنید. اگه کدی که وارد کردید با ساختار موردانتظار بلوک هماهنگ نباشه، ممکنه پیام محتوای نامعتبر ظاهر بشه. پایین‌تر توضیح می‌دیم چطور این مشکل رو برطرف کنید.

اضافه‌کردن کد با بلوک HTML سفارشی

بلوک HTML سفارشی چه کاربردی داره؟

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

یادتون باشه این بلوک برای اجرای PHP ساخته نشده. PHP روی سرور اجرا می‌شه و اگه کد اون رو داخل نوشته بذارید، اجرا نمی‌شه. برای اضافه‌کردن قابلیت‌های PHP باید از روشی امن و هماهنگ با ساختار سایتتون استفاده کنید.

روش اضافه‌کردن و پیش‌نمایش کد HTML

1. توی ویرایشگر روی دکمه «+» بزنید.
2. عبارت «HTML سفارشی» یا «Custom HTML» رو جست‌وجو کنید.
3. بلوک رو انتخاب کنید و HTML موردنظرتون رو داخل اون قرار بدید.
4. از نوار ابزار بلوک، گزینه «پیش‌نمایش» رو بزنید تا نتیجه اولیه رو ببینید.
5. در آخر، پیش‌نمایش کامل نوشته رو باز کنید و نتیجه رو روی صفحه واقعی سایت ببینید.

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

تبدیل ویرایشگر کلاسیک وردپرس به حالت HTML

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

تغییر دستی از زبانه دیداری به زبانه کد

نوشته رو توی ویرایشگر کلاسیک باز کنید و بالای کادر محتوا، زبانه «متن» یا «Text» رو بزنید. حالا HTML نوشته جلوی شماست. برای برگشتن هم کافیه زبانه «دیداری» یا «Visual» رو انتخاب کنید.

اگه فقط هر از گاهی نیاز دارید کد رو تغییر بدید، همین جابه‌جایی دستی انتخاب مناسب‌تریه. پیش‌فرض‌کردن حالت کد بیشتر برای وقتیه که عمداً بیشتر کارهاتون رو توی این حالت انجام می‌دید.

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

وردپرس فیلتر wp_default_editor رو برای مشخص‌کردن حالت اولیه ویرایشگر کلاسیک در اختیار توسعه‌دهنده‌ها می‌ذاره. وقتی مقدار این فیلتر html باشه، ویرایشگر کلاسیک به‌صورت پیش‌فرض با زبانه کد باز می‌شه.

اضافه‌کردن کد به فایل functions.php قالب فرزند

قبل از شروع این مرحله، حتماً از سایت نسخه پشتیبان بگیرید. حتی یک اشتباه کوچک توی کد PHP ممکنه بخش مدیریت یا کل سایت رو موقتاً از دسترس خارج کنه. کد رو داخل فایل functions.php قالب اصلی نذارید؛ چون ممکنه بعد از به‌روزرسانی قالب پاک بشه. بهتره از قالب فرزند استفاده کنید. قالب فرزند به قالب اصلی وابسته‌ست، ولی تغییرهای اختصاصی شما رو جدا نگه می‌داره.

add_filter( 'wp_default_editor', function () {
    return 'html';
} );

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

بررسی نتیجه و برگردوندن تنظیم قبلی

بعد از اضافه‌کردن کد، یک نوشته آزمایشی رو باز کنید و نتیجه رو ببینید. اگه زبانه کد به‌صورت پیش‌فرض باز نشد، اول مطمئن بشید افزونه ویرایشگر کلاسیک فعاله و اون نوشته واقعاً با همین ویرایشگر باز می‌شه. بعد بررسی کنید که قطعه کد بدون خطا داخل فایل functions.php قالب فرزند فعال قرار گرفته باشه.

برای برگردوندن تنظیم قبلی، همین قطعه کد رو از فایل functions.php قالب فرزند پاک کنید. با حذف این فیلتر فقط حالت پیش‌فرض ویرایشگر برمی‌گرده و هیچ‌کدوم از نوشته‌هاتون حذف نمی‌شن.

نکته‌های مهم قبل از ویرایش HTML نوشته

• قبل از تغییر کد از نوشته نسخه پشتیبان بگیرید: می‌تونید محتوا رو موقتاً توی یک فایل متنی نگه دارید یا از رونوشت‌های وردپرس کمک بگیرید.
• نشانه‌های بلوک‌های وردپرس رو پاک نکنید: کامنت‌هایی مثل <!-- wp:paragraph --> ساختار بلوک‌ها رو مشخص می‌کنن. حذف اشتباه اون‌ها ممکنه باعث نامعتبرشدن بلوک بشه.
• کدهای مستقل رو داخل بلوک HTML سفارشی بذارید: با این کار، کد اختصاصی از پاراگراف‌ها و تیترهای معمولی جدا می‌مونه.
• بعد از هر تغییر، پیش‌نمایش نوشته رو ببینید: حالت دسکتاپ و موبایل رو بررسی کنید و مطمئن بشید لینک‌ها، فاصله‌ها و چیدمان درست کار می‌کنن.
• کد ناشناس رو وارد سایت نکنید: کدی که از منبع نامعتبر گرفته شده ممکنه امنیت، سرعت یا ظاهر سایتتون رو به خطر بندازه. مثلاً یک قطعه JavaScript ناشناس می‌تونه رفتار صفحه رو تغییر بده یا اطلاعات واردشده توی فرم‌ها رو بخونه. فقط کدی رو اضافه کنید که منبع و کاربرد اون رو می‌شناسید.

رفع مشکل‌های رایج ویرایش HTML در وردپرس

چرا گزینه ویرایشگر کد نمایش داده نمی‌شه؟

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

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

خطای محتوای غیرمنتظره یا نامعتبر یعنی چی؟

ویرایشگر بلوک، کد ذخیره‌شده هر بلوک رو با ساختاری که از اون بلوک انتظار داره مقایسه می‌کنه. اگه تگ، ویژگی یا نشانه‌های بلوک رو طوری تغییر بدید که این دو ساختار با هم هماهنگ نباشن، پیام محتوای غیرمنتظره یا نامعتبر رو می‌بینید.

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

چطور یک بلوک خراب رو بازیابی کنیم؟

1. اول متن یا کد فعلی بلوک رو کپی و جایی نگه‌داری کنید.
2. گزینه «تلاش برای بازیابی بلوک» یا «Attempt Block Recovery» رو بزنید.
3. اگه بلوک درست بازیابی نشد، منوی سه‌نقطه پیام خطا رو باز کنید و گزینه تبدیل به HTML رو ببینید.
4. اگه لازم بود، یک بلوک تازه بسازید و فقط بخش سالم محتوا رو به اون انتقال بدید.
5. قبل از به‌روزرسانی نوشته، پیش‌نمایش کامل صفحه رو بررسی کنید.

چرا بعضی از کدهای HTML بعد از ذخیره حذف می‌شن؟

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

اگه سرویسی ازتون می‌خواد یک اسکریپت سراسری به سایت اضافه کنید، اون کد رو داخل تک‌تک نوشته‌ها نذارید. اول راهنمای رسمی همون سرویس رو بخونید و روش امنی رو که برای قالب یا افزونه پیشنهاد کرده بررسی کنید. برای دورزدن فیلترهای امنیتی هم دسترسی کاربران رو بی‌دلیل بالا نبرید.

سؤال‌های متداول

جمع‌بندی

برای تبدیل ویرایشگر وردپرس به HTML، اول ببینید دقیقاً قصد دارید کد کدوم بخش رو تغییر بدید. برای مشاهده HTML کل نوشته از «ویرایشگر کد» کمک بگیرید. اگه فقط یک بلوک نیاز به اصلاح داره، «ویرایش به‌صورت HTML» انتخاب بهتریه. برای اضافه‌کردن یک قطعه مستقل هم بلوک «HTML سفارشی» رو در اختیار دارید. توی ویرایشگر کلاسیک هم زبانه «متن» همین کار رو انجام می‌ده.

قبل از شروع، یک نسخه امن از محتوا داشته باشید، نشانه‌های بلوک‌ها رو بدون دلیل تغییر ندید و نتیجه رو پیش از انتشار توی پیش‌نمایش ببینید. با رعایت همین نکته‌های ساده می‌تونید HTML نوشته‌هاتون رو با خیال راحت‌تری و بدون نصب افزونه اضافی ویرایش کنید.

تیم تولید محتوا

ما در تیم تولید محتوای میهن وردپرس در تلاش هستیم تا بهترین مقالات آموزشی در زمینه وردپرس و کسب‌و‌کارهای اینترنتی را تهیه کنیم. صحت محتوای این صفحه توسط رضا راد بررسی خواهد شد.