چگونه کدهای وردپرس را تغییر دهیم؟
وردپرس یک پلتفرم متن باز و قدرتمند است که به شما امکان می‌دهد بدون نیاز به حتی یک خط کدنویسی، وب‌سایت‌های حرفه‌ای و شگفت‌انگیزی بسازید. با این حال، در برخی موارد ممکن است بخواهید ظاهر یا عملکرد قالب وردپرس خود را دقیق‌تر و متناسب‌تر با نیازتان شخصی‌سازی کنید. در چنین مواقعی، یادگیری نحوه تغییر کدهای وردپرس اهمیت پیدا می‌کند.
در این مقاله از سایت تم فارس، به‌صورت گام به گام و به صورت تصویری آموزش خواهیم داد چگونه می‌توانید به‌صورت ایمن و اصولی کدهای وردپرس را ویرایش کنید، از تغییرات ساده در HTML و CSS گرفته تا ویرایش فایل‌های قالب و استفاده از قالب فرزند. در پایان نیز چند افزونه کاربردی معرفی می‌کنیم تا اگر ترجیح می‌دهید بدون ویرایش مستقیم کدها، تغییرات دلخواه خود را اعمال کنید، بتوانید از آن‌ها استفاده نمایید.
آموزش گام به گام تغییر کدهای وردپرس
برای داشتن کنترل بیشتر بر ظاهر و عملکرد سایت وردپرسی خود، می‌توانید بخش‌های مختلف آن را با ویرایش کدها شخصی‌سازی کنید. در ادامه، مراحل و روش‌های اصلی برای انجام این کار را مرور می‌کنیم:
- ویرایش HTML در وردپرس: با استفاده از ویرایشگر بلوک (گوتنبرگ) یا ویرایشگر کلاسیک می‌توانید کد HTML مربوط به پست‌ها یا صفحات جداگانه را ویرایش کنید.
- ویرایش کد قالب (HTML/PHP): اگر قصد دارید کد منبع قالب وردپرس خود را تغییر دهید، حتماً از قالب فرزند (Child Theme) استفاده کنید تا در هنگام به‌روزرسانی قالب اصلی، تغییرات شما از بین نرود.
- مدیریت قطعه‌کدها با افزونه‌ها: برای افزودن اسکریپت‌ها یا قطعه‌کدهای دلخواه به بخش <head> یا فایل functions.php، بهتر است از افزونه‌های مخصوص مدیریت کد مانند Code Snippets استفاده کنید تا امنیت و نظم سایت حفظ شود.
- افزودن CSS سفارشی: اگر فقط قصد دارید ظاهر سایت را تغییر دهید، کافی است از بخش CSS اضافی (Additional CSS) در سفارشی‌ساز وردپرس (Customizer) استفاده کنید یا از افزونه‌ای مانند Simple CSS بهره ببرید.
⚠️ نکته مهم: قبل از ویرایش هر فایل، حتماً از سایت خود بک‌آپ بگیرید تا در صورت بروز خطا بتوانید آن را بازیابی کنید.
نحوه ویرایش HTML وردپرس در ویرایشگر گوتنبرگ (بلوک)
در گوتنبرگ چند روش برای کار با HTML وجود دارد. اگر فقط می‌خواهید کد HTML خودتان را داخل یک محتوا قرار دهید، بهتر است سراغ ویرایش کامل کد منبع پست نروید، چون این کار فقط اوضاع را پیچیده‌تر می‌کند.
به جای آن، از بلوک HTML سفارشی استفاده کنید و کد مورد نظرتان را همان جا وارد کنید.
با این حال، گاهی لازم است HTML یک بلوک دیگر را مستقیماً ویرایش کنید. مثلاً وقتی می‌خواهید به یک لینک در ویرایشگر بلوک، تگ nofollow اضافه کنید.
برای این کار دو روش وجود دارد:
- روی گزینه‌های همان بلوک کلیک کنید و Edit as HTML را انتخاب کنید. در این حالت فقط HTML همان بلوک مشخص قابل ویرایش است.
2. اگر قصد دارید HTML کامل یک پست را ویرایش کنید، از منوی ابزارها وارد ویرایشگر کد شوید. همچنین می‌توانید با میانبر Ctrl + Shift + Alt + M بین حالت کد و حالت بصری جابه‌جا شوید.
یادتان باشد در ویرایشگر کد کامل، باید با نشانه‌گذاری‌های مخصوص بلوک‌ها کنار بیایید، مثل <!– wp:paragraph –>.
نحوه ویرایش HTML وردپرس در ویرایشگر کلاسیک
اگر هنوز از ویرایشگر کلاسیک استفاده می‌کنید، برای ویرایش HTML کامل یک پست، کافی است وارد تب متن (Text) شوید. در این بخش تمام محتوا به‌صورت HTML کامل نمایش داده می‌شود و می‌توانید به‌طور مستقیم آن را تغییر دهید.
بیشتر بخوانید: نحوه ویرایش HTML در وردپرس
تغییر کد منبع در قالب وردپرس
حالا بیایید به موضوع مهم تر بپردازیمویرایش کد های قالب وردپرس. این بخش نسبت به به ویرایش HTML پست ها ریسک بالاتری است، چون هر اشتباه کوچک می‌تواند باعث اختلال در عملکرد قالب یا حتی از دسترس خارج شدن سایت شود. وردپرس در نسخه‌های جدید، جلوی بسیاری از خطاهای ناخواسته را می‌گیرد، اما باز هم تغییر مستقیم کد منبع همیشه احتمال ایجاد مشکل را به‌همراه دارد. برای همین باید با دقت و اصولی جلو بروید.
استفاده از قالب فرزند برای هرگونه ویرایش مستقیم کد
اگر قصد دارید مستقیماً کدهای موجود در فایل‌های قالب خود را ویرایش کنید، بهترین و درست‌ترین روش این است که تغییرات را در یک قالب فرزند (Child Theme) اعمال کنید، نه روی قالب اصلی.
دلیلش هم مشخص است:
اگر روی قالب اصلی تغییر ایجاد کنید، به محض اینکه آن قالب را به‌روزرسانی کنید، تمام ویرایش‌های شما از بین می‌رود. اما وقتی از قالب فرزند استفاده کنید:
- قالب اصلی آپدیت می شود
- تغییرات شما همیشه محفوظ می‌ماند
- ساختار سایت هم دچار مشکل نمی‌شود
به‌عبارت ساده، قالب فرزند یک لایه امن برای ویرایش کد است.
تغییر کدهای وردپرس با استفاده از افزونه
در بسیاری از مواقع، برای تغییر عملکرد قالب لازم است مستقیماً وارد فایل‌های قالب فرزند شوید و کد را ویرایش کنید. اما همیشه نیاز نیست به سراغ فایل‌های PHP بروید. اگر هدف شما فقط افزودن چند خط کد یا یک اسکریپت ساده باشد، استفاده از افزونه‌ها می‌تواند راه‌حل بسیار ایمن‌تر و قابل مدیریت‌تری باشد.
برای مثال، اگر قصد دارید یک اسکریپت ردیابی را در بخش <head> سایت قرار دهید، یا می‌خواهید قطعه کدی به فایل functions.php اضافه کنید، بهتر است این کار را با کمک افزونه انجام دهید. افزونه‌هایی مثل Head & Footer & Post Injection این امکان را فراهم می‌کنند که کدهای مختلف را دقیقاً در بخش موردنظرتان قرار دهید.
مزیت اصلی این افزونه‌ها این است که تمام کدهای اضافه‌شده مرتب و جداگانه ذخیره می‌شوند و در آینده مدیریت‌شان راحت‌تر خواهد بود.
همین موضوع برای فایل functions.php هم صدق می‌کند. اگر قرار است کدی اضافه کنید که عملکرد سایت را تغییر می‌دهد، افزونه رایگان Code Snippets یکی از بهترین گزینه‌هاست.
این افزونه به شما اجازه می‌دهد بدون ویرایش مستقیم فایل‌ها، قطعه‌کدهای PHP را اضافه، فعال، غیرفعال یا حتی دسته‌بندی کنید. همچنین در صورت بروز خطا راحت‌تر می‌توانید مشکل را برطرف کنید.
به طور خلاصه: اگر هدف شما فقط اضافه کردن قطعه‌کدهایی در این بخش‌هاست:
-
قسمت <head>
-
فایل functions.php قالب
بهتر است از افزونه استفاده کنید. این کار علاوه بر ساده‌تر کردن مدیریت کدها، باعث می‌شود هنگام به‌روزرسانی قالب، تغییرات شما از بین نرود و نیازی هم به ویرایش مستقیم فایل‌های پوسته نباشد.
اما اگر تغییری که می‌خواهید اعمال کنید مربوط به ساختار یا عملکرد اصلی قالب است و افزونه‌ها قادر به انجام آن نیستند، در این صورت باید سراغ ویرایش مستقیم کد منبع قالب بروید که در ادامه به آن می‌رسیم.
از ویرایشگر کد وردپرس درون داشبورد استفاده کنید
اگر قصد دارید کد پوسته خود را مستقیماً ویرایش کنید، اکیداً توصیه می‌کنیم قبل از انجام این کار، از سایت خود (یا کل سایت یا فایلی که ویرایش می‌کنید) نسخه پشتیبان تهیه کنید.
بعد از تهیه نسخه پشتیبان، برای دسترسی به ویرایشگر کد داخلی وردپرس کافی است وارد مسیر نمایش ⇐ ویرایشگر پرونده پوسته شوید. در این بخش، وردپرس ابتدا یک هشدار نمایش می‌دهد که مشابه هشدارهایی است که پیش‌تر توضیح داده شد و شما را از ریسک‌های ویرایش مستقیم فایل‌ها آگاه می‌کند.
پس از عبور از هشدار، به صفحه ویرایشگر می‌رسید. در ستون کناری سمت چپ، فهرستی از تمام فایل‌های قالب را مشاهده می‌کنید. با کلیک روی هر فایل، محتوای آن در بخش اصلی صفحه ظاهر می‌شود و می‌توانید تغییرات موردنظر خود را اعمال کنید.
در این قسمت، امکان ویرایش فایل‌هایی مثل:
- style.css
- functions.php
- فایل‌های PHP مختلف قالب
- فایل‌های قالب فرزند
وجود دارد و پس از انجام تغییرات، با ذخیره‌سازی، تغییرات مستقیماً روی سایت اعمال خواهند شد.
استفاده از SFTP برای ویرایش کد در وردپرس
اگر نمی‌خواهید از ویرایشگر کد داخل داشبورد وردپرس استفاده کنید، می‌توانید فایل‌های قالب را از طریق SFTP ویرایش کنید. این روش دو مزیت مهم دارد:
- می‌توانید از هر ویرایشگر کدی که راحت‌تر هستید استفاده کنید.
- اگر ناخواسته تغییری اشتباه ایجاد کنید و سایت دچار مشکل شود، می‌توانید فوراً فایل را جایگزین یا اصلاح کنید. در حالی‌که هنگام ویرایش از داخل داشبورد وردپرس، ممکن است یک خطا باعث شود کاملاً از داشبورد قفل شوید و برای رفع مشکل به هر حال مجبور شوید از SFTP استفاده کنید (گرچه نسخه‌های جدید وردپرس احتمال این اتفاق را کمتر کرده‌اند).
برای استفاده از SFTP ابتدا باید به سایت خود متصل شوید. بعد از اتصال، وارد مسیر زیر شوید:
/wp-content/themes/child-theme-name
در این مسیر فایل قالب یا فایل قالب فرزند خود را پیدا کنید، روی آن کلیک راست کرده و گزینه ویرایش (Edit) را انتخاب کنید. اکثر نرم‌افزارهای FTP این امکان را دارند که فایل را باز کنید، تغییر دهید و سپس پس از ذخیره، نسخه ویرایش‌شده را به‌صورت خودکار به سرور برگردانند.
با این حال، توصیه اکید این است که قبل از هر تغییری، نسخه اصلی فایل را روی سیستم خود دانلود کنید. در این صورت اگر تغییری باعث ایجاد خطا شد، می‌توانید بلافاصله نسخه سالم را دوباره روی سرور آپلود کنید و مشکل را برطرف نمایید.
نحوه اضافه کردن CSS سفارشی به وردپرس
اگر فقط قصد دارید CSS سفارشی به وردپرس اضافه کنید و نمی‌خواهید کدهای HTML یا PHP قالب را دستکاری کنید، نیازی به استفاده از ویرایشگر کد داخلی یا روش‌های SFTP نیست.
در این شرایط، بهترین راه استفاده از سفارشی‌ساز وردپرس است. علاوه بر ساده‌تر بودن، مزیت دیگر این روش این است که می‌توانید تغییرات را به‌صورت زنده مشاهده کنید.
برای شروع، از داشبورد وردپرس به مسیر زیر بروید:
داشبورد وردپرس ⇐ نمایش ⇐ سفارشی سازی ⇐ CSS اضافی
سپس، در بخش سفارشی‌سازی وردپرس، گزینه‌ی CSS اضافی را پیدا کنید:
با انتخاب این گزینه، یک ویرایشگر کد باز می‌شود که می‌توانید CSS موردنظر خود را در آن وارد کنید. با هر تغییری که اعمال می‌کنید، پیش‌نمایش زنده سایت بلافاصله و خودکار به روزرسانی می‌شود .
سخن پایانی
تغییر کدهای وردپرس، یکی از مهارت‌های کلیدی برای هر مدیر سایت یا وردپرس کار حرفه‌ای است. با رعایت اصولی مانند استفاده از قالب فرزند، افزونه‌های مخصوص و گرفتن نسخه پشتیبان، می‌توانید بدون خطر و با اطمینان کامل ظاهر و عملکرد سایت خود را تغییر دهید. اگر هم می‌خواهید سریع‌تر و راحت‌تر شخصی‌سازی را انجام دهید، از قالب‌های استاندارد و بهینه مثل قالب های ارائه‌شده در تم فارس استفاده کنید تا خیالتان از سازگاری و امنیت راحت باشد.
به پایان این مطلب درباره “چگونه کدهای وردپرس را تغییر دهیم؟” رسیدیم. امیدواریم برای شما مفید بوده باشد و همچنین پیشنهاد می کنیم سایر مطالب پیشنهادی زیر را نیز بخوانید.
مطالب پیشنهادی: