ترفندهای بهینه سازی قالب سایت برای Print گرفتن - قسمت 4



visibility  
mode_comment   ۱

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

6. تنظیم مجدد استایلها

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

همونطور که میبینید برای همه المنتها و همچنین کلاسهای کاذبشون، ویژگی های background و color و box-shadow و text-shadow رو reset کردیم و صفحه رو برای حالت پرینت آماده سازی کردیم. کدهای بالا از HTML5 Boilerplate گلچین شده اند. شما میتونین از کل کدهای مربوط به پرینت این ابزار استفاده کنید. همونطور که در کدها میبینید از !important استفاده شده است. میدونین که بهتره تا حدی که میشه از این دستور استفاده نشه. اما برای استایلهای پرینت اشکالی نداره و میتونین برای اون استثناء قائل بشید.

7. حذف محتوای غیر ضروری

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

برای صرفه جویی در مصرف جوهر پرینتر، شما باید موارد تصویری، تبلیغات، منوها و ... رو با استفاده از display: none مخفی کنید.

همچنین اگر بخواید فقط المنت main رو نمایش بدین و همه چیز بجز اون رو مخفی کنید، میتونین از کد زیر استفاده کنید:

به همین راحتی.

8. نمایش دادن URL در لینکها

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

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

کد بالا یه مقدار سخت بنظر میاد. بیاید کد بالا رو با هم معنی کنیم. در ابتدا همه لینکهایی که ویژگی href دارند و مقدار اونا با http شروع میشه و آدرس سایت خودمون هم داخل URL اون نیست انتخاب میشن و مقدار URL بعد از متن لینک قرار داده میشه.

به همین راحتی.

در جلسات بعد با ادامه این مبحث در خدمتتون هستیم.

امیدوارم از این مطلب خوشتون اومده باشه.

موفق و پیروز باشید.

یا علی

Source

comment دیدگاه کاربران
لقمان آوند

تست متن

تست کد

نیاز به لاگین

برای ارسال دیدگاه و یا پرسیدن سوال خود در این قسمت، باید در سایت لاگین شوید.