چگونه قالب وردپرس را سفارشی سازی کنیم؟

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

 اصول CSS:

حتما به این فکر می کنید که CSS یکی از زبان های برنامه نویسی پیچیده است و شما نمی توانید از پس یادگیری آن بر آیید. اما واقعیت چنین نیست. می توانید در یک بازه زمانی کوتاه در این حوزه به یک  متخصص تبدیل شوید. CSS زبانی است که برای اعمال سبک ها به HTML به کار می رود. HTML  چیزی است که صفحات وب بر روی آن ایجاد شده است. می توانید آن را همانند یک عروسک در نظر بگیرید که قادرید لباس های مختلفی بر تن آن نمایید. بدنه عروسک HTML نام دارد و لباس هایی که تن او می کنید را CSS stylesheet می گویند. این گزینه برگه ای از دستورالعمل ها برای سبک بخشیدن به HTML است.  تنها کاری که شما باید انجام دهید نوشتن مجموعه ای از دستورالعمل هاست که می تواند ظاهر سایت را نشان دهد:

CSS همانند لباس پوشیدن به عروسک عمل می کند. شما می توانید انتخابگرهایی را مشخص کنید و خواصی را بر روی آن اعمال نمایید. HTML نیز نشانگرهای راحت و اسانی به نام کلاس ها و ID ها فراهم می کند و همین امر موجب می شود سفارشی سازی بخش های مختلف سایت به اسانی صورت گیرد. مثلا فرض کنید می خواهید متنی را در بخشی از سایت خود تغییر دهید. کدی شبیه کد زیر نوشته اید:

.pants {

  color: green;

  text-decoration: underline;

  font-weight: bold;

}

خوب در این کد عبارت .pants انتخابگر و عبارت های color, text-decoration و font-weight جزو خاصیت ها محسوب می شوند.

 آغاز سفارشی سازی قالب:

باور بکنید یا نه ابزارهای جادویی در دو مرورگر بزرگ یعنی کروم و سفری وجود دارد که می توانید به کمک ان ها قالب خود را سفارشی سازی کنید. این ابزارها در گوگل کروم Devtools و در سفری Web Inspector نام دارد. این ابزارها به شما اجازه می دهند تغییرات CSS را در هر سایتی که مرور می کنید انجام دهید.  مثلا می توانید به یکی از سایت های برندهای مشهور سر بزنید و کل متن آن را به رنگ آبی تغییر دهید.

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

 چگونه می توان این ابزارها را فعال کرد؟

اگر روی گوگل کروم کار می کنید این ابزار به طور پیش فرض فعال شده است. فقط کافیست یک پنجره باز کنید. می توانید به کمک کلیدهای  Ctrl + Shift + I  ابزار Devtools را باز کنید. اگر از سفری استفاده می کنید باید به بخش Safari → Preferences → Advanced  بروید و سپس جعبه Show Develop menu in menu bar را تیک بزنید. بعد از اینکه ابزار را فعال کردید می توانید  از همان کلیدهای میانبر بالایی برای نشان دادن ابزار استفاده کنید.

بررسی یک نمونه واقعی:

خوب حالا که ابزارهای مدنظر را فعال کردید می توانیم با هم یک نمونه واقعی را بررسی کنیم. ما از گوگل کروم استفاده می کنیم. به سایت https://demo.thethemefoundry.com/linen-theme/ بروید.  همانطور که می بینید یک border ظریف بالا و پایین نوار ناوبری وجود دارد. می خواهیم رنگ این border را تغییر دهیم.

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

#navigation {

  margin: 30px 0 0 0;

  border-top: 1px solid #efefef;

  border-bottom: 1px solid #efefef;

}

عبارت navigation یک انتخابگر است و  سه خطی که در داخل براکت قرار دارند قوانین سبک بخشی هستند.

هر خط از فرمت یکسانی تبعیت می کند. این ها گزینه های مختلفی هستند که برای سبک بخشیدن به قسمت های متفاوت سایت به کار می روند. سمی کولون در انتهای هر خط قرار می گیرد و نشان می دهد  کد موجود در این بخش به پایان رسیده است. این مجموعه از دستورالعمل ها شبیه موارد زیر هستند:

• فضای 30 پیکسلی در بالای عنصر ناوبری قرار بده
• border یک پیکسلی به رنگ #efefef در بالای عنصر ناوبری قرار بده
• Border یک پیکسلی به رنگ #efefef  زیر عنصر ناوبری قرار بده

حالا می خواهیم رنگ border را تغییر دهیم. برای اینکار نیاز به کدهای hex خواهیم داشت.  این ها به نظر پیچیده می ایند اما تنها حروف ی اعداد 6 کاراکتری هستند که رنگ ها را مشخص می کنند. گوگل کروم  انتخابگر رنگ های HEX را به صورت درون ساخت در خود دارد. بر روی مربع رنگی برای خاصیت Border-top کلیک کنید و رنگ جدیدی را انتخاب نمایید . خوب همانطور که می بینید رنگ Border  تغییر پیدا کرده است. شما می توانید رنگ های مختلفی را امتحان کنید. اگر از نسخه های جدید کروم استفاده می کنید می توانید برای تغییرات هر کد روی آن ها دابل کلیک کنید. تغییر را ایجاد نمایید و اینتر را بزنید.

 دائمی کردن تغییرات:

همانطور که در قسمت های قبلی مقاله نیز ذکر کردیم این تغییرات تنها در مرورگر شما نشان داده خواهند شد.

این ابزار تنها پیش نمایشی از تغییرات را ارائه می کند و این تغییرات به صورت زنده روی سایت اعمال نمی شود. گام بعدی اعمال تغییر و اعمال آن بر روی قالب سایت است. قالب سایت شما فایل CSS دارد که این سبک ها را در خود نگه می دارد. بهترین و اسان ترین روش برای ویرایش فایل های CSS رفتن به بخش  نمایش و سپس انتخاب ویرایشگر ازطریق داشبورد وردپرس است.  شما باید فایل Style.css را باز کنید. این ها همه دستورات لازم برای سبک بخشیدن به سایت هستند. هر تغییری که در مثال بالا ارائه کردیم را می توانید در فایل سایت هم پیدا کنید. به دنبال قانونی که در مرورگر آن را تغییر دادید بگردید. آن را تغییر دهید و سپس بر روی دکمه به روزرسانی فایل کلیک نمایید.

استفاده از قالب Child:

زمانی که شروع به تغییرات Stylesheet قالب خود می کنید با دو مشکل مواجه خواهید شد:

• اگر توسعه دهنده قالب به روزرسانی ارائه کند و شما قالب را به روز کنید همه تغییرات از بین خواهد رفت
• ممکن است کدهای اصلی را فراموش کنید و ندانید چه تغییراتی را ایجاد کرده اید.

خوشبختانه وردپرس از قالب های Child پشتیبانی می کند. قبل از سفارشی سازی قالب نحوه استفاده از قالب های child را یاد بگیرید.