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

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

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

درج کد css در قسمت سفارشی‌سازی وردپرس

در پیشخوان وردپرس و در منوی نمایش، یک گزینه تحت عنوان “سفارشی‌سازی” وجود دارد که قبلاً نیز به آن سر زدیم. در این بخش به جز تنظیمات کلی وردپرس، می‌توانید کد css نیز درج کنید. دقت کنید که این کدها در تمام سایت لود می‌شوند. ما در این پروژه مقداری کد زدیم، آن‌ها را اینجا درج می‌کنیم.

::selection {
	color: #ffffff;
	background-color: #1450A3;
}

::-webkit-scrollbar-track {
	background: #ccc;
}

::-webkit-scrollbar {
	width: 5px;
	background: #f5f5f5;
}

::-webkit-scrollbar-thumb {
	background: #757a86;
	border-radius: 10px;
}

::-webkit-scrollbar-thumb:hover {
	background: #1450A3;
}

body {
    -moz-font-feature-settings: "ss02";
    -webkit-font-feature-settings: "ss02";
    font-feature-settings: "ss02";
}

.icon-call-calling {
	transform: rotate(270deg);
}

روش‌های درج کد سفارشی در المنتور

شما هر ویجتی را در المنتور استفاده کنید، در تب پیشرفته، می‌توانید کلاس و آیدی css دهید و در همان بخش نیز کد css اضافه کنید. همچنین می‌توانید کد را به صورت پردازش شده، در ویجت html بندازید. (داخل این ویجت، به جز کد html و css می‌توانید کد javascript و jQuery را نیز داخل تک اسکریپت گذاشته و به صفحه اضافه کنید. افزون بر این، در پیشخوان وردپرس و در منوی المنتور، گزینه‌ای تحت عنوان “کدهای سفارشی” وجود دارد که در آنجا نیز می‌توانید کد Front که شامل موارد مذکور بود را درج کنید.

درج کد php در وردپرس با افزونه و بدون افزونه

شما با استفاده از افزونه‌هایی مانند Code Snippets می‌توانید اسکریپت php نیز به وردپرس اضافه کنید. البته بدون افزونه هم این کار ممکن است. برای درج کد php بدون استفاده از افزونه، شما می‌توانید وارد هاست خود شده و در مسیر public_html/themes/hello-elementor بروید و در پوشه قالب خود، فایل functions.php را باز کرده و کد php خود را به انتهای آن اضافه کنید. البته شما در پیشخوان وردپرس و در منوی نمایش، می‌توانید کدهای قالب hello از جمله functions.php را ببینید. اما افزونه امنیتی معمولاً مسیر این بخش را محدود می‌کند و لزوماً روش خوبی برای ویرایش نیست.

ساخت تم فرزند وردپرس یا Child Theme برای قالب Hello

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

نصب Child Theme به این معنی نیست که می‌توانید قالب اصلی hello را حذف کنید. در واقع تم فرزند فایل‌های style.css و functions.php قالب را مجزا می‌کند و بدین صورت، می‌توانید کد سفارشی خود را درج کنید و بعداً اگر قالب hello بروز هم بشود، به Child Theme و کد سفارشی شما آسیبی وارد نمی‌شود.

دانلود Child Theme برای قالب hello elementor

تم فرزند وردپرس بسازید حتی اگر کدنویسی بلد نیستید

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