📌تغییر کدهای HTML در وردپرس

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

با یادگیری آموزش ویرایش کد HTML در وردپرس نه‌تنها می‌توانید ظاهر و هویت بصری سایتتان را متناسب با نیازتان تغییر دهید، بلکه می‌توانید ویژگی‌های اختصاصی ایجاد کنید بدون اینکه برای هر کار کوچکی نیاز به نصب یک افزونه جدید داشته باشید. این یعنی کنترل بیشتر، افزونه‌های کمتر و در نتیجه سرعت بهتر سایت.

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

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

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

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

در سیستم مدیریت محتوا جهت تغییر کدهای HTML نوشته‌ها و برگه‌ها و انواع صفحه‌های دیگر وردپرس، ویرایشگر HTML یا همان ویرایشگر متنی در وردپرس، به افراد امکان ویرایش را فراهم می‌آورد.

نحوه ویرایش سورس کد وردپرس

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

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

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

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

تغییر کدهای HTML قالب وردپرس

برای اینکه کنترل بیشتری بر نحوه ظاهر و عملکرد سایت وردپرس خود داشته باشید، می‌توانید کد وردپرس خود را برای سفارشی کردن مناطق مختلف ویرایش کنید. ویرایش کدهای قالب وردپرس، مانند تغییر کدهای HTML در وردپرس، می‌تواند به وسیله ادیت کدهای قالب از طریق چایلد تم و یا ادیت کدهای قالب با استفاده از افزونه Footer، Head and Post Injection و Code Snippet انجام شود.

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

1. ادیت کدهای قالب از طریق چایلد تم

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

در رابطه با چایلد تم لازم به ذکر است که این شیوه برای اجرا، نیاز به گزینه‌های پوشه مخصوص به خود، یک شیوه‌نامه و یک فایل function.php دارد. که برای هر کدام شرایط خاصی تعریف می‌شود.

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

مشاهده و خرید محصولات

دسته بندی قالب وردپرس

مشاهده همه

2. ادیت کدهای قالب با استفاده از افزونه

افزونه Head Footer and Post Injections، تزریق کدها در هدر و فوتر وردپرس را برای افراد ساده‌تر می‌کند. همچنین افراد می‌توانند علاوه بر هدر و فوتر، کدها را در همه قسمت‌های نوشته‌ها و برگه‌ها قرار دهند. افزونه Head Footer and Post Injections در میان بهترین افزونه‌های هدر و فوتر وردپرس قرار دارد که قابلیت‌ها و ویژگی‌های مختلفی را در اختیار کاربران قرار می‌دهد.

این افزونه به شما امکان می‌دهد کدهای سفارشی را در بخش هدر، فوتر و قبل و بعد از محتوای پست ها و صفحات وبلاگ خود درج کنید. از دیگر امکانات این افزونه، امکان مدیریت کدهایی مانند Google Analytics، Facebook Pixel، کد Google DFP، کد تأیید Google Webmaster/Bing/Tradedoubler و غیره در یک نقطه متمرکز است. همچنین، شما می‌توانید از این افزونه بدون از دست دادن کدهای درج شده، قالب خود را تغییر دهید.

با افزونه “Head, Footer and Post Injections”، شما همچنین می‌توانید کدهای سفارشی را در بلاگ‌ها و نوشته‌ها درج کنید. این امکان به شما می‌دهد تا کدهایی مانند بنرهای تبلیغاتی، فرم‌های ثبت نام، کدهای نمایشی و سایر اجزا را در بخش‌های بلاگ‌ها و نوشته‌ها قرار دهید. این افزونه وردپرس را می توانید از مخزن افزونه وردپرس و یا سایت wordpress.org دانلود کرده و از آن استفاده کنید. آموزش این افزونه وردپرس به صورت شفاف در سایت وردپرس شرح داده شده است.

3. ویرایش HTML وردپرس در ویرایشگر کلاسیک

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

4. ویرایش HTML وردپرس با استفاده از FTP

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

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

1. اتصال به سرور: با یک کلاینت FTP (مثل FileZilla) به وب‌سایت خود وصل شوید
2. مسیر زیر را باز کنید: wp-content/themes/your-theme
3. دانلود فایل HTML یا PHP مورد نظر: فایل‌هایی را که قصد ویرایش دارید به سیستم خود منتقل کنید
4. ویرایش فایل‌ها در سیستم محلی: با یک ویرایشگر کد (VS Code، Sublime و …) تغییرات HTML را اعمال کنید
5. آپلود مجدد فایل‌ها روی سرور: نسخه ویرایش‌شده را دوباره در همان مسیر قبلی بارگذاری کنید

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

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

جمع بندی آموزش ویرایش کد html در وردپرس