بررسی کامل شخصی سازی تم های انتخابی
در این درس، شما با فرآیند شخصی‌سازی تم در وردپرس آشنا می‌شوید. ابتدا نحوه انتخاب و فعال‌سازی یک تم از میان تم‌های موجود در وردپرس را می‌آموزید. سپس به وسیله ابزار “Customizer”، امکان تغییرات در بخش‌های مختلف تم از جمله عنوان سایت، tagline، نمادک سایت (favicon) و پیشنمایش تغییرات در زمان واقعی فراهم می‌شود. همچنین به شما نشان داده می‌شود که چگونه آیکن سایت خود را برای نمایش در مرورگر و اپلیکیشن‌های موبایل به شکلی بهینه تنظیم کنید. این آموزش به شما این توانایی را می‌دهد که تم وردپرس خود را کاملاً مطابق با نیازهای برند و سلیقه شخصی‌سازی کنید و بدون نیاز به کدنویسی تغییرات دلخواه را اعمال نمایید.
وقتی یک تم برای سایتتون پیدا کردید وقتشه که اختصاصیش کنید. من همیشه توصیه می کنم تم هاتون رو قبل از فعال کردن برای مشاهده کاربرانتون، سفارشی کنید تا از گزینه های شخصی سازی موجود نهایت استفاده کامل رو داشته باشید. همونطور که در ویدئوی آموزشی قبل گفتم در این دوره آموزشی از تم 2017 استفاده می کنم. چونکه تم 2017 بیشترین گزینه های شخصی سازی رو داره.
شما می تونید با تم 2017 یا هر تمی که دوست دارید کار رو دنبال کنید فقط بدونید که تم های مختلف گزینه های مختلفی برای سفارشی سازی دارن .
customizer یا در وردپرس فارسی محیط “سفارشی سازی”؛ یکسری گزینه ها در سمت چپ در اختیارتون قرار میده که وقتی انتخابشون کنید، پنل های متنی باز میشه که میتونید تغییرشون بدید. پس بیاید این گزینه ها رو بررسی کنیم و ببینیم چی هستن و چطور باید تم هامون رو بسرعت و براحتی باهاشون اختصاصی کنیم. قبلاً Theme Manager رو دیدیم پس به گزینه های اصلی میایم و با “هویت سایت” یا در وردپرس لاتین با Site Identity شروع می کنیم.
وقتی Site Identity رو باز کنید می تونید 3 تا کار انجام بدید.
می تونید عنوان سایت رو عوض کنید یعنی هر چیزی که اینجا ظاهر میشه و اگر اینکار رو انجام بدید همون لحظه که تایپ می کنید در پیش نمایش می بینیدش و براتون در همون لحظه بنمایش در میاد.
من میذارم همونطوری با عنوان اخیر بمونه، پس مجدد روی این عنوان تایپ شده جدید، تایپش میکنم.
می تونید در قسمته tag line؛ یعنی اینجا معرفی کوتاه سایتتون رو عوض کنید من tag line این شرکت رو میام و تغییر میدم و اینطوری سفارشیش میکنم.
خب؛ همچنین این عنوان و tag line رو می تونید با این چک باکس فعال و غیر فعال کنید. بیشتر تم ها اجازه اینکار رو میدن و دلیلش این است که بتونید تصویر پس زمینه یا سر صفحه اضافه کنید که لوگوی شرکت رو نشون میده و نیازی هم نیست که هم لوگو و هم عنوان و هم tag line رو با هم در یک زمان داشته باشید.
یک ویژگیه جدید دیگه هم با نام “نمادک سایت” یا در وردپرس لاتین گزینه ای با نامه Site Icon وجود داره.
آیکن سایت همون Favicon سایت شماست و آیکنی هست که این بالا در تب مرورگر نشون داده میشه و یا وقتی که سایتتون رو بعنوانه برنامه موبایل یا در جای دیگه اضافه می کنید این آیکن بکار میاد. راهنماش همه ی این ها رو نوشته. مثلاً میگه : “نمادک سایت بعنوانه نمادک مرورگر یا نمادک اپلیکیشن سایت شما استفاده می شود. نمادک ها باید مربعی و با اندازه حداقل 512 پیکسل در عرض و ارتفاع باشند.” .
از اینجا با آیکن ” انتخاب تصویر” می تونید هر تصویری با این ویژگی یاد شده رو آپلود کنید. من یکسری تصویر دارم پس میرم و با زدن روی سربرگ “بارگذاری پرونده ها” در پنجره ” انتخاب تصویر” فایل ها رو آپلود می کنم. روی Select Files یا در همین وردپرس فارسی روی “گزینش پرونده ها” کلیک می کنم و از این اکسپلورر به دسکتاپم میرم و این تصویر رو انتخاب می کنم که کمی بزرگتر از اندازه درخاستی است اما مربعی است؛ بعدش هم با زدن روی open بازش می کنم.
عنوان تصویر آپلود شده رو به H+ Sport Logo تغییر می دم و روی “گزینش” یا در وردپرس لاتین روی Select کلیک می کنم.
حالا می تونم تصویر رو crop کنم و ببرمش. اگر یک تصویر بزرگ انتخاب کردید از اینجا می تونید اون رو crop کنید. گزینه “بریدن تصویر” یا در وردپرس لاتین Crop Image رو میزنم و حالا آیکن سایت این پایین اضافه شده و در تصویر نوار ابزار مرورگر مکینتاش ها هم با یک تصویر نمونه در اینجا بنمایش درمیاد.
الان متوجه شدم که آیکون ایده آلی نیست اما تغییرش نمیدم شما هم می تونید با این گزینه به راحتی آیکون های مختلف رو بیاید و امتحان بکنید، و همونطور که دیدیم انجام این فرآیند تغییر فویکشن سایت هم خیلی ساده هستش.
در نسخه جدید همونطور که می بینید گزینه ای هم با نامه “نشان” سفارشی شده و فعلاً با عبارت ” هیچ نشانی گزیده نشده” همراه هست. می تونیم به طریقه مشابه بیایم و یک نشان برای نمایش در این نقطه از وب سایتمون با تمه 2017 سفارشی کنیم و این نشان کنار عنوان سایت قرار می گیره و در برخی کاربردها می تونه خیلی هم مفید باشه.
برای این کار بیاید و روی “گزینش نشان” کلیک کنید؛ بعدش هم در پنجره گزینش نشان بیاید و یکی از این تصاویر رو براش انتخاب کنید؛ بعدش هم باید روی “گزینش” کلیک کنید.
خب؛ می بینید که پنجره “بریدن تصویر” باز هم فراخونی میشه و می تونید از اینجا اون محدوده ای که مده نظرتون هست رو برای تصویر سفارشی کنید.
خب؛ نهایتاً هم بیاید و روی “بریدن تصویر” کلیک کنید تا این نشان منبعد با تم 2017 برای قسمت فرانت اند سایتتون درست کنار عنوان برای کاربران قابل مشاهده بشه.
خب اینم از این، وقتی کارم تموم شد روی back کلیک می کنم و به گزینه بعد میرم که برای رنگ هاست. گزینه Colors یا “رنگ ها ” بسته به تمی که استفاده می کنید خیلی متغیر هست. بعضی تم ها طرح رنگی دارن مثل تم 2015 که می تونید طرح رنگی کل سایتتون رو سریع باهاش عوض کنید. الان در تم 2017 این گزینه وجود نداره ولی من از قبل تم 2015 رو هم آماده توی این یکی تب باز کردم و الان روش کلیک می کنم تا شما رو با این گزینه آشنا کنم.
خب؛ ایناهاش، این گزینه “شمای رنگ پایه” هست و باهاش می تونید طرحه سایتتون رو تغییر بدید. بعضی تم ها فقط بهتون اجازه میدن چیزهایی مثل رنگ پس زمینه رو عوض کنید. اگه روی “گزینش رنگ” بزنید می بینید که یک پالت رنگی کامل دارید و هر رنگی بخاید می تونید باهاش برای بک گرانده سایتتون انتخاب کنید.
یا می تونید رنگ متن Header و Sidebar رو تغییر بدید. این گزینه هم با نام “رنگ متن سربرگ و ستون کناری” در تم 2015 سفارشی شده. اگر اینجا هم بیاید و روی “گزینش رنگ” کلیک کنید میتونید رنگه مد نظرتون رو برای سربرگ و ستونه کناری سفارشی کنید.
دقت داشته باشید که در تمه 2015 این قسمت سمته چپ هدر یا سربرگ نام داره؛ پس بطریقه مشابه بیاید رنگه متن و بک گرانده پس زمینه هدر و ستون کناری یا Sidebar رو تغییر بدید. اگر بخاید واقعاً میتونید یک سایت زشت درست کنید.
الان چیزی که به نظر میرسه این است که این سایت یک خرده رو فرم نیست و جالب به نظر نمیرسه بکنید. برای اینکه یخوره بهتر بشه به نظرم بیاید این رو این قسمت رو زرد کنیم.
عالی شد.
اگر یکسری تغییرات ایجاد کردید و دیدید زیاد خوب نشد دوباره رنگ ها رو باز کنید و برای همشون روی default کلیک کنید تا به رنگه پیش فرض برگردن.
می بینید که رنگ پیشفرض در تم 2015 دوباره بر می گرده به تنظیمات پیشفرض. الان فقط base color scheme یا در وردپرس فارسی همین “شمای رنگ پایه” مون بطور پیشفرض تنظیم نشده که این هم میگذارم روی گزینه “پیشفرض”.
من کلاً رنگه پیشفرض رو انتخاب می کنم.
خب بیاید بریم توی این سربرگ مرورگرمون سراغ تم 2017 ببینیم برای رنگها اون چی داره!!
اول از هر چیزی یک قسمت به اسم “رنگ بندی” داره که با گزینه های “روشن” ، “تیره” و “دلخواه” میشه سفارشی شون کرد. گزینه “تیره” رو بزنید و به این پایین پیشنمایش اسکرول کنید؛ می بینید که بک گراندمون کلاً تیره میشه و بنظر گزینه مناسبی نمیاد.
اینجا هم گزینه ای به نام “رنگ متن سربرگ” داریم که می تونیم رنگه عنوان و تگ لاین رو باهاش سفارشی کنیم که در کل بنظر من گزینه های دیفالت انتخاب های مناسب تری هستن.
بهرحال اگر خاسته باشید می تونید هرکدومشون رو بعنوان یک رنگ مجزا برای سایتتون سفارشی کنید.
خب روی back میزنم تا برگردم به محیطه اول “سفارشی سازی”.
بذارید اول برم به سربرگ مربوط به تم 2015 ام. ویژگی قابل توجه دیگه ای که داریم Header Image یا در وردپرس فارسی “تصویر سربرگ” نام داره و جالب چونکه بسته به تمی که استفاده می کنید تصویر هدر متفاوت خواهد بود در اکثر تم ها تصویر هدر در بالای سایت یا در محتوای سایتتون قرار می گیره و محتوا رو به پایین می بره مثله تم 2017 اما حتماً نباید اینجوری باشه و تم 2015 نماینده خوبی است که نشون میده تصویر هدر میتونه کاملاً متفاوت باشه
در اینجا می بینید که تصویر هدر دقیقاً مثل آیکن سایت اندازه ایده آل خودش رو بهتون میگه.
اما اندازه ایده آل هدر برای تم 2015 عجیب هست، چون که ارتفاعش از عرضش بیشتره.
دلیلش این است که هدر در نوار جانبی سمت چپ نشون داده میشه.
یکسری تصویر برای این درست کردم روی “افزودن تصویر تازه” یا در وردپرس لاتین روی Add New Image کلیک می کنم و میرم یک فایل آپلود می کنم.
اولی رو که هدر نام داره امتحان می کنم. این یک تصویر بزرگ و استاندارد است. وقتی آپلود شد روی “انتخاب و برش” یا در وردپرس لاتین روی Select and Crop کلیک می کنم و وردپرس بهم کمک می کنه تا تصویر رو کراپ کنم تا در هدر تم 2015 هم جا بشه. جای مورده نظر رو پیدا می کنم . مثلاً اینجا و روی “بریدن تصویر” یا در همین وردپرس لاتین روی Crop Image کلیک می کنم.
حالا تصویر هدر اعمال میشه و می بینید که چرا این تم غیره عادی است؛ تصویر هدر در پشت متن اصلی قرار می گیره. که این برای پیش روی در کارتون بنظرم جواب نمیده؛ شاید هم جواب بده.
پس روی این ضربدر کلیک می کنم تا حذفش کنم و بعد سعی می کنم تصاویر دیگه ای رو بجای این تصویر اضافه کنم چند تا فایل رو آپلود می کنم و اینم بگم من از قبل این فایل های هدر رو ساختم و همشون رو برای آپلود آماده کردم. پس انتخابشون میکنم و همه رو آپلود می کنم.
بعد می تونم “انتخاب و برش” یا در ودرپرس لاتین select and crop رو بزنم؛ اگه تصویرم با استاندارده هدر یعنی 1300 در 954 همخانی داشته باشه، روی گزینه دیگه ای بنام “صرف نظر از قاب بری” یا skip cropping کلیک میکنم.
خب این یک تصویر بریم سراغ بعدی، روی “افزودن تصویر تازه” یا Add New Image کلیک می کنم و بعدی رو انتخاب میکنم و باز هم” انتخاب وبرش” و بعدش هم “صرف نظر از قاب بری” یا skip cropping رو میزنم و بیشتر از این تنظیم نمی کنم چون اندازه همه اینا دقیق است و ادامه میدم و میرم تا بعدی رو انتخاب می کنم. “صرف نظر از قاب بری” یا select and crop.
و باز هم ” افزودن تصویر تازه” یا Add a New Image و این یکی آخری است و دوباره “صرف نظر از قاب بری” یا Skip cropping رو میزنم.
دلیل این که چند تا عکس انتخاب کردم اینه که حالا می تونم به پایین صفحه بیام و گزینه “نمایش اتفاقی سربرگ های بارگذاری شده” یا در وردپرس لاتین Randomize Uploaded Headers رو انتخاب بکنم.
حالا وقتی صفحات رو ریلود می کنیم وردپرس بطور تصادفی هر بار یک تصویر رو بعنوان تصویر هدر انتخاب می کنه البته تصاویری که من انتخاب کردم زیاد خوب نیستن چونکه نمیشه متن ها رو خوند پس اگر از تم 2015 استفاده می کنید باید در انتخاب تصاویر دقت کنید.
من همه این عکس ها رو پاک می کنم چونکه عجیب بنظر میرسن و بر می گردم به شخصی سازی.
بگذارید بریم سراغ تم 2017. سربرگ رو عوض می کنم و اینجا بجای عنوان “تصویر سربرگ” چون می تونیم ویدئو هم اضافه کنیم عبارت “رسانه سربرگ” رو داریم.
و تنها تفاوتش با تم 2015 این است که ویدئو هم می تونه بعنوانه رسانه سربرگمون در تم سفارشی کنه و همونطورم که گفتم این تم هم بر خلافه 2015 آیتم هدر رو در بالای فرانت اند سایت نشون میده.
خب اینم از این بذارید برگردیم بریم سراغ تم 2015. یک ویژگی دیگه رو میخام بهتون نشون بدم که تصویر پس زمینه هست. تصویر پس زمینه هم مثل تصویر هدر بسته به تمی که استفاده می کنید فرق خواهد داشت و تنها راه برای اینکه بدونیم چطور میشه باید یکی اضافه کنم.
برای تصاویر پس زمینه می تونید یک تصویر عادی اضافه کنید که معمولاً خوب جواب نمیده یا می تونید تصاویر tiled اضافه کنید که تصاویر گرافیکی کوچیکی هستند که کنار هم قرار می گیرن و بافت تصویره پس زمینه رو بوجود میارن.
اما در این تم فکر کنم بتونیم از یک تصویر معمولی استفاده کنیم چونکه پس زمینه در اطراف این قاب قرار گرفته.
روی “انتخاب تصویر” یا در وردپرس لاتین روی Select Image کلیک می کنم و بعد این تصویر مربوط به دوچرخه سوار رو که قبلاً آپلودش کردم و تصویر بزرگی هم هست انتخاب می کنم.
می بینید که تصویر پس زمینه پشت محتوا ام نشون داده میشه و وقتی اسکرول می کنم به اینصورت در میاد این جواب میده اما تصویر باید با محتوای سایتم همخانی داشته باشه و باز هم میگم باید تصویر مناسب و کم حجمی باید انتخاب کرد.
وقتی از تصویر پس زمینه استفاده می کنید گزینه های زیادی دارید که می تونید انتخابشون بکنید تصویر پس زمینه تکرار بشه یا نه اگر از قسمت کنونی “سفارشی” رو انتخاب کنید و تیک چک باکس “تکرار تصویر پس زمینه” رو فعال کنید نمونه های مختلفی از تصویر رو کنار هم نشون میده تا پس زمینه رو کامل با این تصویر پر کنه. به این میگن قابلیت Tile و اگر تصویرتون خیلی کوچیک باشه بخوبی درکش میکنید.
همچنین می تونید موقعیت پس زمینه رو از قسمت “موقعیت تصویر” تعیین کنید الان سمت بالا و راست است می تونم روی مرکز یعنی این نقطه کلیک کنم تا روی مرکز بذارمش یا فلش بسمت راست رو کلیک کنم تا تصویر رو سمت راست بذارم.
میتونید با چک باکس “متحرک با صفحه” انتخاب بکنید که پس زمینه اسکرول بشه یا نه. الان تیکش نخورده و این یعنی پس زمینه ثابت است و وقتی به بالا و پایین اسکرول می کنم پس زمینه سر جای خودش باقی می مونه اما اگه روی اسکرول بذارم یعنی گزینه ” متحرک با صفحه ” رو انتخاب بکنم و تیکش بزنم؛ پس زمینه با محتوا اسکرول میشه و می تونیم اون قابلیت Tile رو ببینیم تا اینجا تصویر تموم میشه و تصویر بعد شروع میشه. اینم بگم در تم 2017 اصلاً “تصویر سربرگ” نداریم و باز هم میگم که وجود خیلی از آپشن ها در اینجا کاملاً به تمی که دارید أزش استفاده می کنید بستگی داره.
استفاده از تصاویر هدر و پس زمینه می تونه خیلی روی تم تون تاثیر بذاره. اما باید دقیقاً برای سایت خودتون طراحیشون بکنید. اگر مثل چند لحظه پیش من تصاویر تصادفی آپلود بکنید احتمالاً سایتتون جالب نمیشه و باید تصاویر هدر و پس زمینه رو خودتون مخصوص سایتتون طراحی بکنید.
وقتی اینکار رو انجام دادید می تونید نماهای بصری خیلی جذابی برای سایتتون ایجاد کنید.