آموزش وردپرس – ویرایش پوسته ها – درس چهارم

در درس قبل به چند خصوصیت افزونه مداد زرد در ویرایش قالبهای وردپرس پرداختیم. در این مقاله قصد داریم امکانات بیشتری از این افزونه را بررسی کنیم.

برای مطالعه مقاله قبلی روی لینک زیر کلیک کنید.

آموزش وردپرس – ویرایش پوسته ها – درس سوم

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

با کمک بخش WIDTH می توانید عرض عنصر را تنظیم کنید. همانطور که در مقاله قبلی اشاره شد می توانید اندازه را بر حسب سه نوع پیکسل، درصد و em تنظیم کنید. برای تنظیم به صورت ریسپانسیو می بایست ابعاد را بر حسب درصد ایجاد کنید.
ارتفاع عنصر را می توانید از بخش HEIGHT تغییر دهید.
در بخش BOX SIZING دو دکمه وجود دارد. اگر روی borer-box کلیک کنید، کادر دور عنصر انتخاب شده و همچنین padding اضافه شده به عنصر، به مجموع عرض و ارتفاع عنصر اضافه می شود و اگر روی content-box کلیک کنید، عرض و ارتفاع عنصر، همان عرض و ارتفاع محتویات درون عنصر خواهد بود.

MIN WIDTH حداقل عرضی است که برای عنصر در نظر گرفته می شود. این خصوصیت برای ریسپانسیو کردن قالب به کار می رود.

در ادامه گزینه MIN HEIGHT را داریم. با استفاده از آن گزینه می توانید تنظیم کنید که حتی با کوچک یا بزرگ شدن صفحه نمایشی که کاربر در حال مشاهده سایت شما با آن است، ارتفاع عنصر از این مقدار کمتر نشود.
MAX WIDTH نیز مثل دو گزینه فوق و البته بر عکس آنها است یعنی حداکثر عرض عنصر را تنظیم می کند.
MAX HEIGHT نیز حداکثر ارتفاع عنصر را تغییر می دهد.

در ادامه دکمه های پلاگین مداد زرد، دکمه Animation را داریم. به کمک این دکمه می توانید به عنصر خود خاصیت انیمیشن و حرکت دهید.

برای ایجاد انیمیشن روی عنصر، از بخش ANIMATION، یک نوع از انیمیشن های در نظر گرفته شده را انتخاب کنید. اگر روی دکمه ANIMATOR در کنار ANIMATION کلیک کنید باکس ویرایش انیمیشن باز خواهد شد و می توانید به یک عنصر چند نوع انیمیشن بدهید و تایم هر کدام را ویرایش کنید.

اگر روی قسمت خاکستری رنگ بخش ANIMATION PLAY کلیک کنید تعدادی حالت مختلف به شما نشان داده خواهد شد تا بتوانید تعیین کنید که در چه حالتی انیمیشن شما به نمایش در بیاید.
اگر حالت onScreen را انتخاب کنید همین که صفحه سایت توسط کاربر، باز شود انیمیشن شروع به پخش می کند.
اگر Hover را برگزنید، وقتی کاربر با موس روی عنصری که به آن خصوصیت انیمیشن داده اید برود انیمیشن پخش خواهد شد.
اگر گزینه Click را انتخاب کنید تنها در صورتی که کاربر روی عنصر کلیک کند انیمیشن به نمایش در خواهد آمد.
اگر حالت Focus انتخاب شده باشد در این حالت کاربرانی که به جای موس با صفحه کلید یا همان کیبورد کارهای خود را در اینترنت انجام می دهند به وسیله دکمه tab در کیبورد روی این عنصر بروند، انیمیشن آغاز خواهد شد.

در ادامه گزینه های انیمیشن در بخش ANIMATION INTERATION می توانید تعیین کنید که انیمیشن چند بار تکرار شود. گزینه های موجود یک بار، دو بار و تکرار مداوم و بی نهایت هستند.

در بخش ANIMATION DURATION می توانید مدت زمانی که انیمیشن به نمایش در می آید را تنظیم کنید. به زبان ساده، انیمیشن چقدر طول بکشد.
از قسمت ANIMATION DELAY می توانید زمانی را تعیین کنید تا انیمیشن پس از این زمان شروع به نمایش کند. تعیین میزان تاخیر.
در بخش ANIMATION FILL MODE سه گزینه وجود دارد. با انتخاب دکمه forwards شما می توانید تعیین کنید که انیمیشن پس از اتمام نمایش یا در زمان تاخیر برای شروع نمایش، آخرین فریم انیمیشن را نشان دهد و در آن فریم، ثابت و بی حرکت باقی بماند.
با انتخاب دکمه backwards بر خلاف مورد فوق، اولین فریم نمایش داده می شود و با انتخاب دکمه both خصوصیت هر دو فریم ابتدایی و انتهایی به نمایش در خواهد آمد.

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

  • با استفاده از قسمت LIST STYLE TYPE می توانید نوع لیست خود را انتخاب کنید. انواع لیستهای با کاراکتر مربع، دایره توپر و تو خالی و حروف الفبای کوچک و بزرگ انگلیسی در دسترس است.
  • در بخش LIST STYLE IMAGE می توانید یک عکس را به عنوان کاراکتر لیست آپلود کنید.
  • از بخش LIST STYLE POSITION نیز می توانید تعیین کنید که محل قرارگیری لیست در درون کادر عنصر انتخاب شده باشد یا در خارج از آن.
مطلب مرتبط:  آموزش وردپرس - ساخت صفحه اصلی سفارشی - درس اول

بخش بعدی پلاگین مداد زرد Box Shadow است که مربوطه به ایجاد سایه در پیرامون کادر عنصر انتخاب شده است.

در قسمت COLOR می توانید رنگ سایه کادر را انتخاب کنید.
با گزینه BLUR RADIUS می توانید شعاع تار شدگی سایه را تنظیم کنید. هر چه مقدار بیشنری داشته باشد میزان محو و تار شدگی سایه بیشتر خواهد بود.
از قسمت SPREAD می توانید تعیین کنید که به چه میزان سایه عنصر در محیط پیرامونی پیشروی داشته باشد.
از بخش INSET با کلیک بر روی دکمه INSET می توانید سایه ی تولید شده را به داخل عنصر انتقال دهید. سایه هایی که به صورت پیش فرض ایجاد می شوند سایه های خارج عنصر هستند و محیط بیرونی عنصر را سایه دار می کنند اما این گزینه عنصر را دارای سایه درونی می کند.

در ادامه برای ویرایش سایه کادر، دو خصوصیت دیگر در اختیار ما است.

با استفاده از HORIZONTAL LENGHT می توانید سایه را در راستای افقی به سمت راست یا چپ حرکت دهید.
با استفاده از VERTICAL LENGHT می توانید سایه را در راستای عمودی به چپ و راست حرکت دهید.

آخرین دکمه پلاگین مداد زرد، Extra نام دارد و همانطور که از نامش پیدا است تنظیمات بیشتری را در اختیار شما قرار می دهد.

اگر روی اولین بخش آن یعنی Filters کلیک کنید تصویر زیر را می بینید. اگر با فتوشاپ کار کرده باشید می بایست با اصطلاح فیلتر آشنایی داشته باشید. این گزینه به رنگ و شمایل عنصر خصوصیات خاصی می دهد. مثلا با ویرایش بخش BLUR می توانید میزان تار شدگی عنصر را تنظیم نمایید. همچنین با تغییر BRIGHTNESS میزان روشنایی و با GRAYSCALE میزان سیاه و سفید شدن عنصر ویرایش می شود. گزینه های دیگر آن عبارتند از CONTRAST برای تغییر کنتراست عنصر، HUE ROTATE برای تغییر میزان چرخش رنگ، SATURATE برای تعیین میزان اشباع شدگی رنگ عنصر و SEPIA برای تغییر شدت رنگدانه های عنصر.

بخش بعدی Transform است که عنصر را تغییر شکل و اندازه می دهد.

با دستکاری بخش SCALE می توانید سایز و مقیاس عنصر را افزایش یا کاهش دهید.
گزینه ROTATE عنصر را می چرخاند. ROTATE X و ROTATE Y نیز به ترتیب عنصر را در راستای محور ایکس و در راستای محور y می چرخانند.
TRANSLATE X عنصر را در راستای افقی به سمت چپ یا راست حرکت می دهد و TRANSLATE Y در راستای عمودی این کار را می کند.

SKEW X و SKEW Y به ترتیب عنصر را در راستای محور X و در راستای محور Y کج می کنند.
PERSPECTIVE نیز به عنصر خاصیت سه بعدی می دهد.

در ادامه گزینه OPACITY وجود دارد که به کمک آن می توانید میزان شفافیت عنصر را کنترل کنید.

در ادامه اگر روی فضای خاکستری رنگ گزینه Display کلیک کنید موارد متعددی وجود خواهد داشت.

انتخاب گزینه block عنصر را به صورت یک بلوک نمایش می دهد. این نوع از محتوا یک خط مجزا برای خود اشغال خواهد نمود و تمام عرض صفحه نمایش را مال خود خواهد کرد.
گزینه flex عنصر را به شکل یک ظرف شبیه به بلوک اما انعطاف پذیر نمایش خواهد داد.
گزینه inline-block عنصر را به شکل درون خطی و در قالب بلوک نمایش می دهد ولی بر خلاف نوع inline، می توانید عرض و ارتفاع نیز برای آن تعریف کنید.
گزینه inline-flex نیز آن را درون خطی می کند و در قالب منعطف به نمایش در می آورد.
گزینه table-cell عنصر را به شکل یک جدول یا فهرست نمایش می دهد.
گزینه none کلا عنصر را نمایش نمی دهد و فضای خالی شده عنصر به وسیله عناصر مجاور پر می شود.
کمی خودتان با افزونه کار کنید می فهمید که اینها به چه دردی می خورند. در کل مربوط به تنظیم نمایش بهینه یک عنصر برای مشاهده مناسب در صفحه نمایشهای مختلف هستند.

مطلب مرتبط:  آموزش وردپرس - ساخت صفحه اصلی سفارشی - درس دوم

در بخش CURSOR می توانید شکل ظاهری موس را وقتی روی عنصر قرار می گیرد انتخاب کنید.
از بخش FLOAT می توانید عنصر را به سمت راست یا چپ شناور کرده و انتقال دهید.
گزینه CLEAR باعث می شود عناصر شناور در یکی از دو سمت راست یا چپ و یا هر دو سمت عنصر انتخاب شده، نتوانند شناور شوند و نتوانند انتقال پیدا کنند.

گزینه VISIBILITY عنصر را مخفی می کند و جای خالی عنصر مخفی شده، همچنان خالی می ماند و با چیزی پر نمی شود.
گزینه POINTER EVENTS نیز رفتار عنصر در زمانی که موس یا تاچ روی آن قرار می گیرد را به صورت خودکار و بر اساس تنظیمات قبلی تنظیم می کند یا اینکه کلا آن را غیر فعال می کند تا موس یا تاچ عملکردی روی عنصر نداشته باشند.

دو گزینه پایانی پلاگین مداد زرد عبارتند از OVERFLOW X و OVERFLOW Y که به ترتیب رفتار عنصر را وقتی از باکس خودش سرریز کند یا به عبارتی از باکس خود بزرگتر باشد در راستای محور X و محور Y تعیین می کند. از زیر گزینه های آن دکمه hidden آن قسمت از محتوا را که از باکس سرریز کرده است مخفی می کند. گزینه scroll باعث می شود که علیرغم مخفی شدن قسمت سرریز شده، یک اسکرول افقی یا عمودی ساخته شود تا کاربر با کشیدن و اسکرول کردن به محتوای مخفی دسترسی داشته باشد و بتواند محتوا را ببیند.

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

در این مقاله تمام دکمه های این پلاگین بسیار کاربردی را مورد بررسی قرار دادیم. اما اگر اکنون روی دکمه ذخیره تنظیمات کلیک کنید با تصویر زیر روبرو خواهید شد که به شما می گوید باید برای ذخیره این تنظیمات این پلاگین را خریداری کنید. زیرا بسیاری از این اقداماتی که انجام داده اید فقط در نسخه حرفه ای وجود دارد.

پس راه چاره چیست؟

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

همین که روی آن کلیک کردید صفحه زیر را می بینید. همانطور که مشاهده می کنید پر از کدهای css است. این کدها ترجمه کارهای شما روی سایتتان با پلاگین مداد زرد است که به زبان css درآمده است. اگر این پلاگین را نداشتید می بایست زبان برنامه نویسی css را یاد می گرفتید تا می توانستید تغییرات مورد نظر خود را روی سایت خود پیاده سازی کنید.

اکنون با کلیدهای ترکیبی ctrl + A روس کیبورد خود، تمام این کدها را بگیرید و سپس با زدن کلید ترکیبی Ctrl + C آنها را کپی کنید. سپس به محیط کاربری وردپرس بروید و از منوی سمت راست وردپرس روی “نمایش” و سپس روی “سفارشی سازی” کلیک کنید.

در صفحه جدیدی که باز می شود از منوهای موجود در پوسته خود به دنبال “css اضافی” بگردید و روی آن کلیک کنید.

در صفحه بعدی تمام کدهایی که کپی کرده اید را در باکس مربوطه با کلید ترکیبی Ctrl + V پیست کنید تا در باکس درج شود و در انتها روی گزینه آبی رنگ “انتشار” کلیک کنید تا تغییرات ذخیره شود.

به این وسیله تمام کدهای css شما به سایت چسبانیده می شود و شما بدون اینکه حتی یک خط کد نویسی به زبان css بلد باشید توانستید قالب سایت خود را به شکل و شمایلی که می خواستید در بیاورید. اگر از آموزش این مقاله خوشتان آمده است و هوادار مجله خلایق شده اید، باید بدانید هنوز راه زیادی در پیش دارید. اما اصلا نگران نباشید چرا که ما با شما هستیم و تا آموزش کامل وردپرس و طراحی اولین سایتتان به شما کمک خواهیم کرد.

اگر مطلب فوق به‌درد‌بخور است، با بقیه به اشتراک بگذارید تا از آن استفاده کنند:

مطالب مرتبط

Subscribe
اطلاع رسانی برای :
0 نظرات
بازخورد (Feedback) های اینلاین
مشاهده همه دیدگاه ها