آیا تا به حال فکر کرده اید که چگونه تاریخ ارسال وبلاگ خود را فوق العاده سبک کنید؟ من می خواهم به شما نشان دهم که چگونه این کار را با استفاده از CSS sprites طی 18 دقیقه انجام دهید
یادداشت تحریریه: این پست به طراحان تم اختصاص دارد. دانش قبلی CSS و وردپرس توصیه می شود.
آنچه شما نیاز دارید:
- یک برنامه گرافیکی (من از Adobe Photoshop CS4 استفاده می کنم)
- یک ویرایشگر متن ساده
آنچه در این آموزش به دست خواهید آورد:
- تاریخ ارسال های وبلاگ شما با استفاده از CSS Sprites فوق العاده است
بیایید شروع کنیم…
مرحله شماره 1 h4>
برنامه گرافیکی خود را روشن کنید. می توانید یک PSD یا PNG الگو برای کمک به طرح همه تاریخ های موجود در Sprite ما.
مرحله شماره 2 h4>
اساساً شما می خواهید با استفاده از ماهها ، روزها و سالها یک شبکه ایجاد کنید. همانطور که مشاهده می کنید ، شبکه من ماه ها را در یک ستون و سپس روزها را در دو ستون و در آخر سال ها را به صورت عمودی در یک ستون دارد. هنگامی که تاریخ خود را در “grid” دریافت کردید ، می توانید پرونده را ذخیره کنید. نکته: اطمینان حاصل کنید که متن شما از بالا به پایین و از چپ به راست به یک اندازه فاصله داشته باشد. این وقتی ریاضیات فضای سفید یکسانی داشته باشد ریاضیات را آسان تر می کند.
مرحله شماره 3 h4>
برای کدگذاری worry نگران نباشید که این کار واقعا آسان است ، مخصوصاً اگر از PNG من استفاده می کنید یا از پرونده PSD استفاده کرده اید (این شامل راهنمایی هایی برای زیبا و مرتب نگه داشتن شبکه شما می باشد به علاوه می توانید سپس کد CSS در این مرحله مستقیماً در صفحه سبک تم های شما بدون هیچ گونه ریاضی قرار می گیرد.)
CSS به شرح زیر است:
/ * Date Sprite * /
.postdate {
موقعیت: نسبی ؛
عرض: 66px؛
ارتفاع: 60px؛
شناور: چپ ؛
}
.month ، .day ، .year {
موقعیت: مطلق؛
text-indent: -1000em؛
background-image: url (images / date_img.png)؛ background-تکرار: بدون تکرار ؛
}
.month {top: 10px؛ سمت چپ: 0؛ عرض: 33 پیکسل ارتفاع: 30px؛}
.day {top: 30px؛ سمت چپ: 0؛ عرض: 33 پیکسل قد: 30 پیکسل؛}
. سال {پایین: 0؛ راست: 13px؛ عرض: 20 پیکسل ارتفاع: 60 پیکسل؛}.m-01 {background-position: 0 0px؛}
.m-02 {background-position: 0 -30px؛}
.m-03 {background-position: 0 -62px ؛}
.m-04 {background-position: 0 -94px؛}
.m-05 {background-position: 0 -125px؛}
.m-06 {background-position : 0 -155px؛}
.m-07 {background-position: 0 -185px؛}
.m-08 {background-position: 0 -217px؛}
.m-09 {background-position: 0 -248px؛}
.m-10 {background-position: 0 -279px؛}
.m-11 {background-position: 0 -310px؛}
.m-12 {background-position: 0 -341px؛}.d-01 {background-position: -51px 0؛}
.d-02 {background-position: -51px -27px؛}
.d-03 {background-position: – 51px -57px؛}
.d-04 {background-position: -51px -91px؛}
.d-05 {background-position: -51px -122px؛}
.d- 06 {background-position: -51px -151px؛}
.d-07 {background-position: -51px -185px؛}
.d-08 {background-position: -51px -214px؛}
.d-09 {background-position: -51px -249px؛}
.d-10 {background-position: -51px -275px؛}
.d-11 {background-position : -51px -309px؛}
.d-12 {background-position: -51px -338px؛}
.d-13 {background-Position: -51px -373px؛}
. d-14 {background-position: -51px -404px؛}
.d-15 {background-position: -51px -436px؛}
.d-16 {background-position: -51px -462px ؛}
.d-17 {background-position: -100px -0px؛}
.d-18 {background-position: -100px -27px؛}
.d-19 {background -pozicion: -100px -57px؛}
.d-20 {background-position: -100px -91px؛}
.d-21 {background-position: -100px -122px؛}
.d-22 {background-position: -100px -151px؛}
.d-23 {background-position: -100px -185px؛}
.d-24 {background-position : -100px -214px؛}
.d-25 {background-position: -100px -249px؛}
.d-26 {background-position: -100px -275px؛}
. d-27 {background-position: -100px -309px؛}
.d-28 {background-position: -100px -338px؛}
.d-29 {background-position: -100px -373px ؛}
.d-30 {background-position: -100px -404px؛}
.d-31 {background-position: -100px -436؛}.y-2009 {background-position: -150px 0؛}
.y-2010 {background-position: -150px -60px؛}
.y-2011 {background-position: – 150px -120px؛}
.y-2012 {background-position: -150px -180؛}
.y-2013 {background-position: -150px -240px؛}
.y- 2014 {background-position: -150px -300px؛}
توضیح: h4>
.postdate – عرض و ارتفاع کل تاریخ را تنظیم می کند. در این صورت ما می خواهیم تاریخ خود را در یک جعبه 66 پیکسل در 60 پیکسل قرار دهیم.
.month ، .day ، .year – عرض و ارتفاع عناصر منفرد را که کل خرما Sprite ما را تشکیل می دهد ، تنظیم می کند. عرض ماهها و روزهای ما 33 پیکسل در ارتفاع 30 پیکسل است. این سالها 33px عرض و 60px ارتفاع هستند. وقتی این عناصر را کنار هم قرار می دهید ، جعبه ای به عرض 66 پیکسل در ارتفاع 60 پیکسل ایجاد می کنند. همچنین گرافیکی را که در مرحله شماره 1 ساخته ایم متصل می کند تا بتوانیم آن را برای هر عنصر جداگانه در Sprite قرار دهیم.
.m-01 تا .m-12 – حدس زدید! این ماه های ماست. این قسمت از CSS گرافیک ما را برای نمایش ماهها قرار می دهد. همانطور که مشاهده می کنید من تنظیم می کنم که تصویر بر روی محور X Y حرکت کند بر اساس مکانی که در تصویر ظاهر می شود. ساده ترین راه برای فهمیدن اینکه گوشه سمت چپ بالای هر ماه ، روز یا سال در تصویر بزرگتر کجاست ، باز کردن فتوشاپ و انتخاب ابزار Marquee است. از بالا به پایین و پایین به سمت راست و درست بالای گوشه سمت چپ بالای ماه ، روز یا سال خود را انتخاب کنید و به مکان اشاره گر خود از آمار صفحه اطلاعات اشاره کنید.
.d-01 تا .d-31 – دقیقاً برای همان مورد استفاده می شود .m-01 – .m-12 به جز مواردی که برای روزها استفاده می شود نه ماهها.
.y-2009 تا .y-2014 – مانند موارد بالا فقط ما برای سالها از آنها استفاده می کنیم.
مرحله شماره 4 h4>
حلقه را در وردپرس باز کنید. حلقه در وردپرس صفحه (ها) ای است که پست های وبلاگ شما را نمایش می دهد. این معمولاً صفحه index.php است. تاریخ ها در صفحات دیگر نیز نشان داده می شوند اما این آموزش فقط تاریخ های حلقه اصلی را جایگزین می کند. اگر به این بخش از آموزش رسیده اید ، به اندازه کافی هوشمند هستید که می توانید سایر موارد تاریخ را در طرح زمینه خود در فایلهای دیگر مانند single.php ، page.php ، archives.php و غیره جستجو و جایگزین کنید.
در حلقه خود چیزی را در این خط جستجو کنید:
با این خطوط جایگزین کنید:
“>تاد سانتورو طراح اصلی و ارشد شرکت خود است طرح های ToddSantoro.com . تاد 11 سال است که در وب کار می کند و در زمینه UI و طراحی گرافیک بسیار عالی عمل می کند. او عاشق توجه به جزئیات و توسعه در چارچوب وردپرس است. می توانید او را در توییتر دنبال کنید.
منبع:
https://www.wpbeginner.com/wp-themes/use-css-sprites-to-beautify-your-wordpress-post-dates/.