روش برای ایجاد تغییر در طراحی پوسته وردپرس
پوسته های بسیاری برای ظاهر سایت وردپرسی طراحی شده اند اما به مرور زمان این نکته ثابت میشود که همیشه پوسته وردپرسی که با طراحی دلخواه خودمان است را برای سایتمان بیشتر دوست داریم. باشیوه هایی بسیار ساده و کاربردی و راه حل هایی جذاب میتوان ظاهر سایتمان را به سبک دلخواه خود تغییردهیم.
تغییر در طراحی پوسته وردپرس
برای ایجاد تغییر در طراحی پوسته وردپرس در این مقاله ۵ روش اصلی را مطرح میکنیم که تنها با ۱۵ دقیقه زمان می توانید اطلاعات جدیدی کسب کنید.
۱٫ ایجاد تغییراتی کوچک درطراحی – سفارشی سازی وردپرس
برای شروع و ایجاد تغییر در طراحی پوسته وردپرس، در قسمت پیشخوان وردپرس به مسیر نمایش>> سفارشی سازی رجوع کنید که به صفحه ای مشابه تصویر زیر هدایت خواهید شد.
customize-تغییر در طراحی پوسته وردپرس
بنابر پوسته ای که در حال سفارشی سازی آن هستید، ممکن است قادر به تغییر رنگ طرح ، تغییر فونت های قسمت های مختلف متنی در پوسته، اضافه کردن و یا حذف تصاویر هدر، تنظیم عناوین و لوگوهای سایت، و یا حتی پر کردن بخش های سفارشی از محتویات صفحات استاتیک باشید. همه این موارد به سرعت و بدون دردسر از داخل پیشخوان وردپرس در دسترس هستند.
بخش های استاندارد در سفارشی ساز وردپرس
ستون کناری شامل چندین بخش برای سفارشی سازی پوسته برای تغییر در طراحی پوسته وردپرس است ازجمله:
هویت سایت: با این قسمت به طور پیش فرض بدون در نظر گرفتن پوسته، امکان تغییرات در عنوان سایت و … و اضافه و حذف لوگو را دارید .
رنگ ها: کاملا واضح است، یک بخش متعارف که در آن شما قادر به تغییر رنگ قسمت های مختلف پوسته هستید.
تصویر سربرگ: جایی که شما می توانید تصویر هدر را اضافه یا تغییر دهید، و گاهی اوقات برای کنترل محل قرارگیری هدر و تنظیم سایز مورد استفاده قرارمیگیرد.
برگه نخست ایستا: جایی که محتویات قابل نمایش صفحه اول وب سایت خود را تنظیم میکنید. به وردپرس میگویید که در صفحه اول کدام نوشته ،مقاله یا محتوا را نمایش دهد.
سفارشی ساز وردپرس برای تغییرات سریع و کوچک بسیار مناسب است، اما نکته ی قابل تامل اینجاست که تغییر در طراحی پوسته وردپرس با قسمت سفارشی سازی شامل محدودیت هایی است یعنی نمیتوان تمام گزینه ها و تغییرات مورد نظر را از این قسمت اعمال کرد و این نکته باعث میشود که برای ایجاد تغییرات بیشتر به سراغ گزینه های کامل تر برویم.
۲٫ تغییرات کوچک درطراحی – با پلاگین های فوری quick-fix
همان طور که اشاره کردیم گاهی فقط یک یا چند جنبه خاص طراحی وجود دارد که شما را ناراحت می کند، اما هیچ گزینه ای برای سفارشی کردن آن موارد خاص در قسمت سفارشی سازی وردپرس وجود ندارد. در این شرایط ممکن است یک پلاگین برای حل مسئله مورد نظرتان طراحی شده باشد. یعنی برای هر مورد از پلاگین مربوطه استفاده کنید.
به عنوان مثال، اگر چندین رنگ موجود در پوسته را نمیپسندید، می توانید از یک افزونه مانند Theme Tweaker برای تغییر رنگ پوسته استفاده کنید.
یا مثلا اگر پوسته شما با یک تصویر هدر استاندارد همراه است و نمیتوانید آن را تغییر دهید یا می خواهید تصاویر هدرهای مختلف در صفحات یا دسته های مختلف داشته باشید، یک پلاگین به نام Unique Headers برای این کار وجود دارد. که برای تنظیم سرصفحه های منحصر به فرد برای صفحات، دسته ها و برچسب ها و غیره استفاده میشود و می تواند در تغییر در طراحی پوسته وردپرس موثر باشد.
اما این دسته از پلاگین ها که عمولا با اصطلاح quick-fix شناخته میشوند می توانند تاثیر منفی بر عملکرد داشته باشند، به ویژه اگر همزمان از چندین مورد استفاده کنید. پس باید سایر گزینه ها را هم بررسی کنیم.
۳٫ تغییرات کوچک در طراحی – با پلاگین های Page Builder
page builder-تغییر در طراحی پوسته وردپرس
این دسته از پلاگین ها برای تغییر در ساخت صفحات استفاده میشوند. امروزه صفحه سازها روی پوسته های از قبل ساخته شده قلم میزنند و تغییراتی ایجاد میکنند ( میتوانیم یکسری صفحه با طرح دلخواه بسازیم .) مانند Divi یا WPMU Upfront . پلاگین های صفحه ساز به شما امکان کنترل کامل بر محتوا در داخل یک صفحه یا پست را می دهد، مانند Visual composer یا Beaver Builder . اگر واقعا دوست دارید طراحی پوسته فعلی خود را حفظ کنید این احتمالا بهترین گزینه برای شماست ، چون به راحتی توانایی ساخت صفحات پویا و ایجاد تغییر در طراحی پوسته وردپرس برای وب سایت خود را دارید.
با استفاده از پلاگین های صفحه ساز، به راحتی میتوان صفحاتی با طراحی دلخواه حتی با ستون های چندگانه ایجاد کرد اگر پوسته از موارد تک ستون پشتیبانی کرده باشد باز هم امکان ایجاد صفحات پویا با ستون های متعدد و پیچیده وجود دارد.
با این کار به راحتی میتوان صفحاتی مانند نمونه کارها، صفحات ورودی و… تهیه کرد. همچنین امکان درج محتویات را به صورت تعاملی آسان تر همراه افزودن رسانه ها به پست های خود با سایر فرمت ها فراهم میکند.
۴٫ تغییرات میانه درطراحی – تغییردر CSS با استفاده از پلاگین
CSS یک زبان برنامه نویسی است که در کنار HTML کار می کند تا وب سایتی را که امروز می بینیم تولید کند. HTML اساسا مانند یک اسکلت کار می کند، کلیت کار را پایه ریزی میکند .چارچوب و متن، تصاویر و بسیاری از مطالب دیگر را اضافه میکند. اما سبک CSS، مثل گوشتی است که بر روی استخوان قرار می گیرد و دقیقا چگونگی ظاهر کار را تعیین می کند.
برای تغییرات در CSS می توانید از پلاگین Simple Custom CSS کمک بگیرید، یا فقط از بخش ویرایشگر CSS Editor استفاده کنید. برای شروع باید با پایه HTML / CSS آشنا بشید.
قبل ازشروع به کار با یک افزونه Custom CSS، باید نحوه انجام دو مورد را به خوبی بلد باشید:
چگونگی پیدا کردن کلاس عنصر مربوط به یک سبک
نحوه کار کردن با آن برای ایجاد تغییر در یک پوسته رسپانسیو
ایجاد تغییرات با ادیتور: برای تغییر css مربوط به هر بخش باید قسمت های موردنظر را در مرورگر مشخص کنید، برای اینکار روی بخش مورد نظر کلیک راست کرده و گزینه inspect را انتخاب کنید. که HTML کد و CSS مربوطه به آن بخش را نشان می دهد. برای مثال، میخواهیم عنوان پستی را در سایت وردپرسی بررسی کنیم در این صورت با کلیک راست روی عنوان پست و انتخاب inspect به ما html و css مربوط به عنوان پست را نمایش می دهد. مشابه تصویر زیر :
inspect element-تغییر در طراحی پوسته وردپرس
ظاهر صفحه نیز مهم است که چگونه دیده شود (یک پرس و جو رسانه ای، یک تابع در CSS است که برای اعمال یا استفاده از سبک های خاص بسته به مواردی مانند اندازه صفحه نمایش استفاده می شود). اغلب برای ایجاد وب سایت ریسپانسیو کاربرد دارد.
در این مثال یک پرس و جو رسانه ای( media query) داریم:
۱
@media screen and (min-width: 61.5625em)
و سبک های زیرکه مربوط به آن است :
۱
۲
۳
۴
۵
.entry-title.
font-size: 40px;
font-size: 2.5rem;
line-height: 1.225;
margin-bottom: 1.05em;
این کد به این معنی است که این سبک ها زمانی اعمال میشوند که صفحه نمایش (یا پنجره مرورگر) بزرگتر از em61.5625 یا (۹۸۵ پیکسل) باشد .بنابراین اگر میخواهید چیزی به طور خاص روی یک صفحه خاص ظاهر شود، باید از پرس و جو رسانه ای برای تغییر در طراحی پوسته وردپرس کمک بگیرید.
و یا مواردی مثل اندازه فونت درمثال زیر:
۱
۲
۳
۴
۵
@media screen and (min-width: 61.5625em) {
.entry-title {
font-size: 200px;
}
}
حالا برای تست سایز فونت .entry-title رابایک مقیاس بزرگ وارد کردیم تا بتوانیم اختلاف آن را در صفحه نمایش ها با اندازه های مختلف مشاهده کنیم برای تایید اینکه کد را درست را نوشته ایم.
عنوان من در یک صفحه بزرگ، مشابه تصویر زیر خواهد بود:
font size- تغییر در طراحی پوسته وردپرس
اما اگر صفحه را به اندازه تلفن همراه / تبلت کنیم، عنوان ورود من بدون تغییر باقی می ماند.
responsive-تغییر در طراحی پوسته وردپرس
خیلی مهم است که طراحی خود را پایدار کرده و انسجام ببخشد. پس تمام نقاط پوسته خود را بررسی و با آنها کار کنید. اما با این روش نیز تغییرات در حد متوسط هستند و برای ایجاد تغییرات بیشتر باید به سراغ گزینه های جامع تری برویم.
۵٫ ایجاد تغییرات قابل ملاحظه درپوسته – باکمک پوسته فرزند
همانطور که قبلا در مقاله های مربوط به Child Theme در همیار وردپرس گفتیم اگر می خواهید تغییر در طراحی پوسته وردپرس به طور قابل توجهی در یک پوسته ایجاد کنید، باید از پوسته فرزند استفاده کنید. به این ترتیب، حتی اگر تم را بروز رسانی کنید (WordPress این کار را به صورت خودکار انجام می دهد)، هیچ تغییر یا داده ای را از دست نمیدهید چون بعد از بروز شدن تمامی تغییرات پاک میشوند اما اگر تم فرزند داشته باشیم این تغییرات ضمن بروزرسانی حفظ میشوند.
این مورد بالاترین استاندارد برای ایجاد تغییرات طراحی و.. در یک پوسته است. اساسا در ایجاد تغییرات و افزودن کدها در پوسته فرزند هیچ محدودیتی وجودندارد.(به جز محدودیت های مهارت های برنامه نویسی )
نتیجه نهایی
در حالی که چندبن روش مختلف برای تغییر طراحی پوسته وردپرس وسایت شما وجود دارد، اما همه این موارد به تغییر کد منجر میشوند.
بنابراین اگر میخواهید کنترل کامل بر طراحی و ظاهرسایت داشته باشید، به یادگیری نحوه کد گذاری بپردازید .(حداقل زبانهایی که مربوط به نمایش ظاهر هستند، مثل HTML و CSS).
و بهتر از آن اگر با عملکرد کدهای php آشنا شوید، قادر هستید که نه تنها چگونگی نمایش یک پوسته را کنترل کنید، بلکه نحوه عملکرد و چگونگی آن را نیز تحت کنترل در آورید!
موفق باشید
