محتوانوشته
در حالی که وردپرس یکی از بهترین سیستم های مدیریت محتوای سایت ساز جهان است که نیازی به دانش برنامه نویسی ندارد، اما ممکن است بنا به دلایل مختلفی مجبور شوید تا کدهای وردپرس را ویرایش کنید تا بتوانید مدیریت بهتری روی ظاهر و عملکرد سایت خود داشته باشید. خوشبختانه وردپرس این کار را با استفاده از روش های مختلف برای شما ساده کرده است. به همین منظور ما در این مطلب قصد داریم آموزش تغییر کدهای HTML سایت را در اختیار شما عزیزان قرار دهیم. با ما همراه باشید.
نحوه ویرایش HTML در وردپرس
برای اینکه کنترل بهتری بر نحوه ظاهر و عملکرد سایت وردپرس خود داشته باشید، می توانید کد وردپرس خود را برای سفارشی کردن مناطق مختلف ویرایش کنید، شما می توانید از روش های مختلفی اقدام به اینکار کنید که در ادامه آنها را به شما معرفی می کنیم:
- ویرایشگر گوتنبرگ و ویرایشگر کلاسیک به شما این امکان را می دهند تا به سادگی کد HTML را برای پست ها یا صفحات جداگانه سایت خود ویرایش کنید.
- اگر قصد دارید کد منبع پوسته وردپرس خود را ویرایش کنید، کافیست از یک تم فرزند استفاده نمائید.
- می توانید از یک افزونه برای مدیریت قطعه کدی که به فایل <head> یا php قالب خود اضافه می کنید، استفاده نمائید.
- همچنین اگر تنها قصد دارید CSS سفارشی اضافه کنید، می‌توانید از بخش “سفارشی سازی” وردپرس خود استفاده نمائید.
بیشتر بخوانید: سئو تکنیکال چیست؟ 10 قانون Technical SEO برای وردپرس
نحوه تغییر کدهای HTML سایت برای پست ها و صفحه های فردی
شما می توانید این کار را هم در ویرایشگر جدید بلاک وردپرس (گوتنبرگ) و هم در ویرایشگر کلاسیک به سادگی انجام دهید. در ادامه هر دو روش را به شما آموزش می دهیم.
– طریقه تغییر کدهای HTML سایت با استفاده از ویرایشگر گوتنبرگ
در صورتی که قصد دارید فقط کد HTML خود را به محتوایی اضافه کنید، به شما پیشنهاد می کنم که سعی نکنید کل کد منبع پست خود را ویرایش کنید، زیرا این کار را پیچیده و دشوار است. در عوض شما می توانید از بلوک اختصاصی استفاده و HTML مورد نظر خود را در آنجا اضافه کنید:
با این حال، ممکن است نیاز به ویرایش مستقیم HTML یک بلوک دیگر داشته باشید. برای مثال، اگر قصد دارید یک تگ نوفالو را به لینکی در ویرایشگر گوتنبرگ خود اضافه کنید، باید HTML آن بلوک را ویرایش نمائید. به طور کلی؛ دو راه برای انجام این کار وجود دارد:
ابتدا می توانید روی گزینه‌های یک بلوک جداگانه کلیک و گزینه Edit as HTML را انتخاب کنید:
بیشتر بخوانید: آموزش تبدیل قالب html به قالب وردپرس به صورت مرحله به مرحله
این به شما امکان می دهد تا کد HTML را فقط برای آن بلوک جداگانه ویرایش کنید:
یا اگر قصد دارید کد HTML را برای کل پست خود ویرایش کنید، می توانید از منوی کشویی اصلی Tools & Options به ویرایشگر کد دسترسی داشته باشید. یا، فقط می توانید از میانبر (Ctrl + Shift + Alt + M) صفحه کلید برای جابجایی بین کد و ویرایش بصری استفاده نمائید.
بیشتر بخوانید: معرفی روش های ایندکس کردن سایت در گوگل
– آموزش ویرایش کدهای HTML در وردپرس با ویرایشگر کلاسیک
اگر هنوز از ویرایشگر کلاسیک وردپرس (TinyMCE) استفاده می کنید، می توانید HTML را برای کل پست خود با رفتن به تب Text ویرایش نمائید:
– نحوه ویرایش کد منبع در قالب وردپرس
اگر قصد دارید به صورت مستقیم کدهای موجود در فایل های طرح زمینه خود را ویرایش کنید، به جای ویرایش قالب «والد» باید از یک تم فرزند استفاده کنید. بدون طرح زمینه فرزند، هر تغییر کدی که ایجاد می کنید دفعه بعد که طرح زمینه خود را به روز می کنید، رونویسی می شود. با این حال، وقتی از طرح زمینه فرزند استفاده می کنید، می توانید بدون از دست دادن تغییراتی که در طرح زمینه فرزندتان ایجاد کرده اید، طرح زمینه اصلی را به سرعت به روزرسانی نمائید. برای انجام اینکار می توانید از روش های مختلفی استفاده کنید.
بیشتر بخوانید: آموزش طراحی قالب ایمیل
– از ویرایشگر کد وردپرس درون داشبورد استفاده کنید
اگر قصد دارید به صورت مستقیم کد طرح زمینه خود را ویرایش کنید، ما به شما توصیه می کنیم قبل از انجام این کار از سایت خود یک نسخه پشتیبان تهیه کنید. با اینکار اگر اطلاعات سایت شما از بین برود می توانید به سادگی آنها را بازیابی کنید.
پس از انجام این کار، وارد پنل وردپرس خود شده و سپس از بخش “نمایش” روی گزینه “ویرایشگر پوسته” کلیک کنید تا به ویرایشگر کد تم درون داشبورد دسترسی پیدا کنید. زمانی که وارد صفحه شدید، در اولین قدم با یک هشدار از سمت وردپرس مواجه خواهید شد:
سپس، می توانید از نوار کناری سمت راست برای پیمایش بین فایل های قالب مختلف و خود ویرایشگر کد برای انجام ویرایش‌های واقعی خود استفاده کنید.
بیشتر بخوانید: آموزش فعال سازی دیباگ وردپرس (حالت اشکال زدایی) با افزونه و بدون افزونه
– از SFTP برای ویرایش کد در وردپرس استفاده کنید
به عنوان جایگزینی برای ویرایشگر کد درون داشبورد، می توانید فایل های تم را از طریق SFTP نیز ویرایش کنید. استفاده از این روش دو مزیت برای شما دارد:
- می توانید از ویرایشگر کد دلخواه خود استفاده کنید.
- اگر به صورت تصادفی کدی را حذف کردید، می توانید بلافاصله مشکل را برطرف نمائید.
پس از انجام این کار، به پوشه قالب “…/wp-content/themes/child-theme-name” خود بروید و سپس فایلی را که می خواهید ویرایش کنید را پیدا کرده و روی آن کلیک راست کنید. اکثر برنامه های FTP گزینه ای برای ویرایش فایل در اختیار شما قرار می دهند و پس از ایجاد تغییرات به صورت خودکار فایل را دوباره آپلود می کنند.
با این حال، ما به شدت توصیه می کنیم قبل از ایجاد هر گونه تغییر، نسخه اصلی فایل را روی دسکتاپ خود دانلود کنید. به این ترتیب، اگر به صورت تصادفی چیزی را خراب کردید، می توانید نسخه اصلی را دوباره آپلود نمائید:
بیشتر بخوانید: کد تخفیف نوین وردپرس
نحوه افزودن CSS سفارشی به وردپرس
اگر قصد دارید به جای ویرایش کدهای HTML یا PHP وردپرس، فقط CSS سفارشی را به وردپرس اضافه کنید، نیازی به استفاده از ویرایشگر کد درون داشبورد یا روش های SFTP ندارید. در عوض، می توانید از بخش سفارشی ساز خود قالبتان استفاده کنید.
برای انجام اینکار؛ وارد پیشخوان وردپرس خود شوید و سپس از بخش “نمایش” روی گزینه “سفارشی سازی” کلیک کنید.
سپس روی تب “ccs اضافی” کلیک کنید.
بیشتر بخوانید: لیست مهمترین تگ های html در سئو سایت | موثرترین تگ های html برای seo را بشناسید
با این کار یک ویرایشگر کد باز می شود که در آن می توانید CSS مورد نظر خود را اضافه کنید. همانطور که CSS را اضافه می کنید، می توانید پیش نمایش زنده تغییرات خود را در طرف دیگر صفحه مشاهده کنید:
ویرایش کدهای html در وردپرس با المنتور
المنتور (Elementor) به شما این امکان را می‌دهد که به راحتی کدهای HTML سفارشی خود را به هر بخش از سایت اضافه کنید، بدون اینکه نیاز به ویرایش فایل‌های اصلی قالب داشته باشید. این کار با استفاده از ابزارک HTML در المنتور انجام می‌شود.
نحوه استفاده از ابزارک HTML برای ویرایش کدهای html در وردپرس:
- وارد ویرایشگر المنتور شوید.
- از پنل سمت چپ، ابزارک HTML را پیدا کنید و آن را به ناحیه مورد نظر در صفحه بکشید و رها کنید (Drag & Drop).
- پس از قرار دادن ابزارک، در پنل سمت چپ یک ویرایشگر کد متنی ظاهر می‌شود.
- کدهای HTML مورد نظر خود را مستقیماً در این کادر وارد کنید.
- پس از وارد کردن کد، می‌توانید نتیجه آن را به صورت زنده در سمت راست مشاهده کنید.
این روش برای افزودن کدهای اسکریپت (مانند کدهای رهگیری گوگل آنالیتیکس)، بنرهای تبلیغاتی یا هر نوع محتوای HTML که نیاز به نمایش مستقیم در یک بخش خاص از صفحه دارد، بسیار کاربردی است.
خرید افزونه imagify| خرید افزونه pwa | خرید افزونه UserWP | خرید افزونه wpform | خرید افزونهsmush خرید افزونه wpml| خرید افزونه acf pro
استفاده از افزونه‌ها برای تزریق کد
ویرایش مستقیم فایل‌های قالب وردپرس (مثل functions.php یا header.php) ریسک بالایی دارد و با هر به‌روزرسانی قالب، تغییرات شما از بین می‌رود. افزونه‌های تزریق کد، راه‌حلی ایمن و آسان برای اضافه کردن کدهای سفارشی به بخش‌های مختلف سایت بدون لمس فایل‌های اصلی هستند. دو نمونه از این افزونه‌ها عبارتند از:
۱. افزونه Code Snippets برای ویرایش کدهای html در وردپرس
این افزونه به شما اجازه می‌دهد که قطعه کدهای (Snippets) PHP، CSS یا HTML را به سایت خود اضافه کنید. این قطعه کدها مانند یک افزونه کوچک عمل می‌کنند و به صورت مجزا از فایل‌های قالب ذخیره می‌شوند.
- نحوه کار: پس از نصب افزونه، می‌توانید یک قطعه کد جدید ایجاد کنید، نوع آن (HTML، PHP و غیره) را مشخص کرده و کد خود را در آن وارد نمایید. می‌توانید محل اجرای کد (مثلاً فقط در بخش مدیریت یا در کل سایت) را نیز تعیین کنید.
۲. افزونه Insert Headers and Footers برای ویرایش کدهای html در وردپرس
این افزونه برای افزودن کدهای HTML، CSS و جاوااسکریپت به بخش‌های <head> و <footer> سایت طراحی شده است.
- نحوه کار: پس از نصب، در بخش تنظیمات افزونه، سه کادر متنی در اختیار شما قرار می‌گیرد: یک کادر برای کدهای هدر، یک کادر برای کدهای بدنه و یک کادر برای کدهای فوتر. کافیست کد خود را در کادر مربوطه وارد کرده و آن را ذخیره کنید.
این افزونه‌ها برای اضافه کردن کدهای گوگل آنالیتیکس، فیسبوک پیکسل، تگ‌های متا و سایر کدهای ردیابی که باید در بخش هدر سایت قرار گیرند، بسیار مناسب هستند و از اشتباهات احتمالی در ویرایش دستی فایل‌ها جلوگیری می‌کنند.
دانلود قالب بی تم| دانلود قالب فلت سام | دانلود قالب استادیار | دانلود قالب دیوی | دانلود قالب آوادا | دانلود قالب اسنشیالز | دانلود قالب انفولد | دانلود قالب وودمارت
سوالات متداول پیرامون آموزش ویرایش کد html در وردپرس
چگونه می‌توانم بدون ویرایش قالب، کدهای HTML را به سایت اضافه کنم؟
برای اضافه کردن کدهای HTML بدون ویرایش مستقیم فایل‌های قالب، می‌توانید از چند روش امن استفاده کنید. یکی از ساده‌ترین راه‌ها استفاده از ابزارک HTML در ویرایشگر گوتنبرگ یا المنتور است. این ابزارک‌ها به شما اجازه می‌دهند تا قطعه کدهای خود را به صورت مستقیم در هر بخش از صفحه یا نوشته قرار دهید. راه دیگر، استفاده از افزونه‌های مدیریت کد مانند Code Snippets است که کدهای شما را بدون دستکاری فایل‌های اصلی، در محل مناسب قرار می‌دهند.
چرا بعد از به‌روزرسانی قالب، تغییرات HTML من از بین رفت؟
این اتفاق زمانی رخ می‌دهد که کدهای خود را مستقیماً در فایل‌های قالب اصلی (مثلاً header.php یا footer.php) ویرایش کرده باشید. با هر بار به‌روزرسانی قالب، تمام فایل‌های اصلی آن با نسخه جدید جایگزین می‌شوند و تغییرات شما حذف خواهد شد. برای جلوگیری از این مشکل، همیشه باید از قالب فرزند (Child Theme) برای اعمال تغییرات استفاده کنید. قالب فرزند یک کپی کوچک از قالب اصلی است که تغییرات شما را در خود نگه می‌دارد و از بین رفتن آنها جلوگیری می‌کند.
ویرایش کدهای HTML در وردپرس برای چه مواردی مفید است؟
ویرایش کدهای HTML برای شخصی‌سازی سایت و افزودن قابلیت‌های خاص بسیار مفید است. برای مثال، می‌توانید کدهای HTML را برای قرار دادن بنرهای تبلیغاتی، کدهای گوگل آنالیتیکس یا کدهای ردیابی استفاده کنید. همچنین، اگر یک المان سفارشی نیاز به استایل‌دهی خاصی داشته باشد، می‌توانید با ویرایش HTML و افزودن کلاس‌ها یا شناسه‌ها، ظاهر آن را با استفاده از CSS تغییر دهید.
بیشتر بخوانید: تفاوت سایت وردپرس با کدنویسی چیست؟ کدام بهتر است؟
جمع بندی: آموزش تغییر دادن کدهای html در وردپرس
در صورتی که قصد اضافه کردن کد را در یک پست یا صفحه وردپرس خود دارید، هم ویرایشگر گوتنبرگ و هم ویرایشگر کلاسیک گزینه هایی برای ویرایش مستقیم HTML در اختیار شما قرار می دهند. همچنین می توانید از افزونه ها برای انجام اینکار استفاده کنید. ما در این مطلب آموزش تغییر کدهای HTML سایت را با استفاده از روش های مختلف در اختیار شما عزیزان قرار دادیم. امیدوارم این مطلب مورد رضایت شما قرار گرفته باشد.
منبع: kinsta
نظراتمقاله
چیزی اینجا نیست!
خوشحال می شویم همین الان می‌توانید اولین نظر خود را ارسال نمایید!