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


نویسنده:
دسته‌ها: مگ
پنجشنبه ۱۷ مهر ۱۳۹۹
افزودن دکمه پرینت به سایت

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

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

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

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

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

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

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

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


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

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

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

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


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

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

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

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

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

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

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

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

پرسونا چیست؟ آموزش اصول تدوین و طراحی پرسونای مشتری

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

بازاریابی محتوا چیست و چگونه باعث رشد کسب‌وکارها می‌شود؟

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

بهترین روش‌های بهینه‌سازی و کاهش حجم تصاویر سایت

معمولاً در هر محتوا از یک یا چند تصویر استفاده می‌شود که اگر این تصویر از نظر حجم و سایز...

نقش کپی‌رایتر در تبلیغات چیست؟ و چه تفاوتی با کارشناس تولید محتوا دارد؟

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

دوره آموزش افزونه EDD

دوره آموزش افزونه EDD

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

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

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

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

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

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

در پکیج آموزش وردپرس فارسی یاد می‌گیرید که چطور از صفر و ...

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

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

نشانی ایمیل شما منتشر نخواهد شد. بخش‌های موردنیاز علامت‌گذاری شده‌اند *