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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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