روش افزودن دکمه پرینت وب‌سایت


نویسنده:
پنجشنبه 17 مهر 1399
افزودن دکمه پرینت به سایت

حتماً تابه‌حال دیده‌اید که دکمه پرینت وب‌سایت در صفحاتی قرار گرفته است که با کلیک بر روی آن می‌توانید از صفحه مورد نظر پرینت بگیرید. این موضوع در وب‌سایت‌های فروشگاهی برای چاپ رسید خرید یا بلیت بسیار کاربردی است.

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

نحوه قراردادن دکمه‌ی پرینت در صفحه سایت

قراردادن دکمه‌ی پرینت در سایت اصلا کار دشواری نیست. فقط کافیست درون کد html دکمه‌ی مورد نظر خود از کد زیر استفاده کنید:

برای مثال کد زیر برای شما یک دکمه پرینت ایجاد می‌کند:

به قسمتی از کد بروید که قصد نمایش دکمه را دارید سپس کد بالا را در آن بخش از کد قرار دهید. برای مثال اگر از وردپرس استفاده می‌کنید و می‌خواهید این دکمه، داخل همه‌ی نوشته‌های سایت باشد، کد را در فایل single.php از قالب قرار دهید.

توجه کنید که این کد زمانی کار می‌کند که فایل جی‌کوئری به قالب شما اضافه شده باشد. بنابراین اگر متوجه شدید که کد بالا در وب‌سایت شما به خوبی کار نمی‌کند باید کد زیر را در بخش head قالب سایت خود در فایل header.php قرار دهید.

خروجی کار را می‌توانید در دکمه‌ی زیر مشاهده کنید:


نحوه پرینت گرفتن از بخش‌های مشخص صفحه وب‌سایت

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

گام اول- درج دکمه پرینت وب‌سایت

مثل مرحله قبل یک دکمه پرینت در صفحه وب‌سایت خود اضافه کنید.


گام دوم- مخفی کردن بخش‌های اضافی

دکمه‌ی بالا از کل بخش‌های صفحه پرینت می‌گیرد. ما باید با ترفندهای CSS بخش‌هایی که تمایل داریم در پرینت ما قرار نگیرند را مخفی کنیم. جهت انجام اینکار یک notepad را باز کنید در آن از کد زیر استفاده نمایید.

در کد بالا ما بخش سربرگ، پابرگ و سایدبار را از پرینت مخفی کردیم. شما هم تمام قسمت‌های مدنظر خود را در این کد انتخاب کنید. سپس فایل را با نام style-print.css ذخیره کنید.

گام سوم- افزودن فایل استایل به پروژه

فایل ایجاد شده در مرحله قبل را به قالب سایت خود اضافه کنید. برای اینکار در وب‌سایت‌های وردپرسی باید به آدرس /wp-content/themes در هاست بروید.

و در انتها، این فایل را در پروژه خود فراخوانی کنید. بنابراین باید به دنبال بخش head قالب باشید. این بخش معمولا در فایل‌های header.php یا index.php وجود دارد. در بخش head کد زیر را اضافه کنید:

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

مطالب زیر را حتما بخوانید

بهترین ویرایشگر کد برای طراحی وب

انتخاب یک ویرایشگر کد یا IDE مناسب برای برنامه نویسان همیشه چالشی بزرگ است. در این مقاله ۵ مورد از...

آموزش ساخت سایدبار ثابت (fixed sidebar)

در این مقاله آموزش می‌دهیم که چگونه با روشی آسان کاری کنیم تا هنگامی که صفحه اسکرول می‌شود، سایدبار ثابت...

بهترین‌ فریم‌ورک‌های CSS را بشناسید

زبان برنامه‌نویسی CSS در طراحی وب زبانی است که تعیین می‌کند چگونه عناصر HTML در کنار هم، درون یک صفحه...

بررسی تفاوت فرانت اند و بک اند در طراحی وب به صورت جامع

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

خرید دوره آموزش المنتور

دوره آموزش المنتور | طراحی سایت بدون کدنویسی

اگر شما هم می‌خواهید صفحات وب‌سایت خود را در ظاهری دلخواه آن ...

آموزش افزایش سرعت سایت

دوره آموزش افزایش سرعت وب‌سایت (جدید)

مرورگر را باز می‌کنید و آدرس سایتتان را وارد می‌کنید. مرورگر شروع ...

آموزش تولید محتوای متنی

دوره آموزش تولید محتوای متنی در وب

آموزش تولید محتوای متنی در وب‌سایت، یک دوره‌ی آموزشی برای تولید‌کنندگان محتوا ...

دیدگاهتان را بنویسید

دیدگاهتان را بنویسید

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