اضافه کردن دکمه پرینت به فرم و صفحات وردپرس بدون افزونه

یه چیزی رو همیشه یادتون باشه که خیلی از کاربرهایی که میان توی سایتتون، فقط نمی‌خوان بخونن و برن. یه بخشیشون می‌خوان مطلبتون رو نگه دارن. پرینت بگیرن، بذارن کنار دستشون، یا PDF کنن بندازن توی گوشیشون که بعداً سر فرصت بخونن. مخصوصاً اگه سایتتون آموزشیه یا فرم دارید.

حالا مشکل کجاست؟ اینکه کاربر خودش باید بره سراغ منوی مرورگر، Ctrl+P بزنه، بعدش هم یه صفحه شلوغ و بهم‌ریخته با کلی منو و تبلیغ تحویل بگیره. خیلی‌هاشون اصلاً بی‌خیال می‌شن.

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

دکمه پرینت در وردپرس چیست و چطور کار می‌کند؟

بذارید خیالتون رو راحت کنیم: پشت این قضیه هیچ جادویی نیست. کل ماجرا یه دستور جاوااسکریپتیه به اسم window.print().

وقتی کاربر روی دکمه کلیک می‌کنه، این دستور به مرورگر می‌گه «آقا پنجره چاپ رو باز کن». همون پنجره‌ای که با Ctrl+P باز می‌شه. یعنی شما دارید فقط یه میان‌بر جلوی دست کاربر می‌ذارید، نه بیشتر.

یه نکته‌ای هم هست که خیلی‌ها قاطی می‌کنن: پرینت و PDF گرفتن فرق دارن؟ عملاً نه. توی همون پنجره‌ای که باز می‌شه، کاربر می‌تونه به‌جای پرینتر، گزینه‌ی «Save as PDF» رو انتخاب کنه. پس با یه دکمه، هم پرینت گرفتید هم خروجی PDF دادید. دو تا کار با یه تیر.

اهمیت دکمه پرینت در صفحه

راستش ما هم اولش فکر می‌کردیم این یه ویژگی لوکسه که به درد نمی‌خوره. ولی بعد از اینکه توی چند تا پروژه گذاشتیمش و آمار کلیک‌هاش رو دیدیم، نظرمون عوض شد.

دسترسی کاربر آفلاین

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

خروجی تمیز، بدون تبلیغ و شلوغی

وقتی درست پیاده‌سازیش کنید (که پایین‌تر یادتون می‌دیم چطور)، کاربر یه فایل تمیز فقط با متن اصلی تحویل می‌گیره. نه هدر، نه فوتر، نه سایدبار، نه دکمه‌های اشتراک‌گذاری.

فرم‌ها، فاکتورها و رسیدها

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

تجربه کاربری بهتر

یه دکمه‌ی کوچیک، ولی پیامش به کاربر اینه که «ما به کارت فکر کردیم». همین حس، تفاوت بین یه سایت معمولی و یه سایت حرفه‌ایه.

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

روش اول: بلوک HTML سفارشی در گوتنبرگ (ساده‌ترین راه)

اگه فقط می‌خواید توی یکی دو تا صفحه‌ی خاص این دکمه رو داشته باشید، این روش کافیه و دو دقیقه بیشتر وقتتون رو نمی‌گیره.

قدم به قدم

۱. برید توی ویرایشگر همون نوشته یا برگه‌ای که می‌خواید.

۲. روی دکمه‌ی + کلیک کنید و بلوک HTML سفارشی (Custom HTML) رو اضافه کنید.

۳. این کد رو داخلش پیست کنید:

html

<a href="#" onclick="window.print(); return false;">چاپ این صفحه</a>

۴. تموم. ذخیره کنید و برید پیش‌نمایش رو ببینید.

اون return false; رو حذف نکنید‌ها. کارش اینه که جلوی پرش صفحه به بالا رو می‌گیره (چون href رو گذاشتیم #). بدون اون، کاربر بعد از کلیک می‌بینه صفحه یهو پرید بالا و حالش گرفته می‌شه.

فعلاً ظاهرش یه لینک آبی سادست. نگران نباشید، پایین‌تر خوشگلش می‌کنیم.

روش دوم: شورت‌کد اختصاصی بسازید (روش حرفه‌ای‌ها)

حالا فرض کنید سایتتون ۲۰۰ تا مقاله داره و می‌خواید همه‌شون دکمه داشته باشن. می‌خواید ۲۰۰ بار برید توی ویرایشگر و کد پیست کنید؟ نه دیگه.

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

این کد رو توی فایل functions.phpقالب چایلدتون اضافه کنید:

php

function my_print_button_shortcode() {
    return '<a href="#" class="print-btn" onclick="window.print(); return false;">چاپ این صفحه</a>';
}
add_shortcode('print_button', 'my_print_button_shortcode');

از این به بعد هر جا خواستید، فقط کافیه بنویسید:

[print_button]

⚠️ جدی می‌گیم: حتماً قالب چایلد. اگه مستقیم توی فایل قالب اصلی بنویسید، اولین آپدیت قالب همه‌ی زحمتتون رو می‌شوره می‌بره.

روش سوم: جایگذاری خودکار دکمه به همه‌ی نوشته‌ها

اینم یه پله بالاتر. اگه اصلاً حوصله‌ی شورت‌کد گذاشتن توی تک‌تک مقاله‌ها رو ندارید، بذارید وردپرس خودش این کار رو بکنه.

این کد انتهای محتوای همه‌ی نوشته‌های تکی رو می‌گیره و دکمه رو می‌چسبونه بهش:

php

function add_print_button_to_content($content) {
    if (is_single() && in_the_loop() && is_main_query()) {
        $button = '<a href="#" class="print-btn" onclick="window.print(); return false;">چاپ این صفحه</a>';
        $content = $content . $button;
    }
    return $content;
}
add_filter('the_content', 'add_print_button_to_content');

اون سه تا شرط اول رو دست نزنید. کارشون اینه که مطمئن بشن دکمه فقط توی صفحه‌ی تکی نوشته میاد، نه توی آرشیو و نتایج جستجو و ویجت‌ها. اگه حذفشون کنید، دکمه‌تون می‌ره یه جاهایی ظاهر می‌شه که اصلاً انتظارش رو ندارید.

خواستید به‌جای بعدِ محتوا، اولش بیاد؟ کافیه خط $content = $content . $button; رو بکنید $content = $button . $content;.

روش چهارم: ارسال کپی اطلاعات فرم به ایمیل کاربر

این یکی مخصوص فرم‌هاست و یه‌کم رویکردش فرق داره.

بعضی وقت‌ها کاربر بعد از پر کردن فرم، دیگه توی همون صفحه نمی‌مونه که پرینت بگیره. یا اصلاً فرمتون با ای‌جکس ارسال می‌شه و صفحه عوض می‌شه. اینجا یه راه‌حل بهتر دارید: یه کپی از داده‌های فرم رو براش ایمیل کنید.

توی اکثر فرم‌سازها (مثل Contact Form 7، WPForms، گرویتی فرم) یه بخش دارن به اسم اعلان‌ها یا Notifications که می‌تونید یه گیرنده‌ی دوم اضافه کنید و ایمیل خود کاربر رو بذارید توش.

مزیتش چیه؟ کاربر همیشه یه نسخه از چیزی که فرستاده داره، هر وقت خواست پرینتش می‌کنه، و از سمت شما هم به‌عنوان رسید ثبت‌نام عمل می‌کنه. برد برده.

نسخه‌ی اختصاصی چاپ با @media print (این بخش رو رد نکنید!)

خب، اینجا مهم‌ترین قسمت مقالست. اگه فقط دکمه رو بذارید و کارتون رو تموم‌شده بدونید، نتیجه‌ی کار افتضاح می‌شه.

چون مرورگر همه‌چی رو چاپ می‌کنه. هدر، منو، لوگو، سایدبار، ۴۰ تا کامنت، فوتر، دکمه‌های شبکه اجتماعی و بقیه. کاربر برای یه مقاله‌ی دو صفحه‌ای، ۹ برگ کاغذ هدر می‌ده و دیگه هیچ‌وقت روی دکمه‌تون کلیک نمی‌کنه.

راه‌حل: @media print. این یه مدیا کوئریه که فقط موقع چاپ فعال می‌شه و روی نمایش عادی سایت هیچ تأثیری نداره. کدها رو بریزید توی style.css قالب چایلدتون.

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

css

@media print {
    .site-header,
    .site-footer,
    .sidebar,
    .comments-area,
    .print-button,
    .related-posts,
    .breadcrumb {
        display: none !important;
    }
}

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

تنظیم فونت و رنگ برای کاغذ

css

@media print {
    body {
        background: #fff;
        color: #000;
        font-size: 13pt;
        line-height: 1.7;
    }
    .content-area {
        width: 100% !important;
        margin: 0 !important;
        float: none !important;
    }
}

دقت کنید که برای چاپ از واحد pt استفاده کردیم نه px. چون داریم با کاغذ سروکار داریم نه با پیکسل. متن سفید روی زمینه‌ی مشکی هم که اصلاً فکرشم نکنید، هم جوهر رو می‌بلعه هم خوانا نیست.

کنترل شکست صفحه

هیچی بدتر از این نیست که یه جدول یا تصویر وسطش بین دو تا صفحه نصف بشه:

css

@media print {
    img, table, figure, pre, blockquote {
        page-break-inside: avoid;
    }
    h1, h2, h3 {
        page-break-after: avoid;
    }
}

خط دومی می‌گه تیتر رو تنهایی ته صفحه نذار. یعنی اگه بعد از تیتر جا نیست، خود تیتر رو هم ببر صفحه‌ی بعد. جزئیات کوچیکیه ولی خروجی رو حرفه‌ای می‌کنه.

نمایش آدرس لینک‌ها

روی کاغذ که نمی‌شه روی لینک کلیک کرد. پس بیاید آدرسشون رو کنارشون چاپ کنیم:

css

@media print {
    .entry-content a[href^="http"]:after {
        content: " (" attr(href) ")";
        font-size: 10pt;
        color: #555;
    }
}

حالا کاربر می‌بینه لینک به کجا اشاره می‌کرده. اون [href^="http"] هم برای اینه که فقط لینک‌های خارجی رو بگیره و لینک‌های داخلی صفحه (مثل #) رو بی‌خیال بشه.

زیباسازی دکمه پرینت

اون لینک آبی ساده‌ی اولی رو یادتونه؟ حالا وقتشه تبدیلش کنیم به یه دکمه‌ی درست‌وحسابی با آیکون پرینتر.

ساختار HTML

html

<a href="#" class="print-btn" onclick="window.print(); return false;">
    <svg viewBox="0 0 24 24" width="18" height="18" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
        <polyline points="6 9 6 2 18 2 18 9"></polyline>
        <path d="M6 18H4a2 2 0 0 1-2-2v-5a2 2 0 0 1 2-2h16a2 2 0 0 1 2 2v5a2 2 0 0 1-2 2h-2"></path>
        <rect x="6" y="14" width="12" height="8"></rect>
    </svg>
    <span>چاپ این صفحه</span>
</a>

آیکون رو به‌صورت SVG درون‌خطی گذاشتیم که یه فایل اضافه لود نشه و سرعت سایتتون پایین نیاد. رنگش هم با currentColor تنظیم شده، یعنی خودکار هم‌رنگ متن دکمه می‌شه.

استایل CSS

css

.print-btn {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    background: linear-gradient(135deg, #2c3e50, #3498db);
    color: #ffffff !important;
    padding: 12px 24px;
    font-family: inherit;
    font-size: 15px;
    font-weight: bold;
    text-decoration: none !important;
    border-radius: 8px;
    box-shadow: 0 4px 15px rgba(52, 152, 219, 0.3);
    transition: all 0.3s ease;
    cursor: pointer;
    border: none;
}

/* حالت هاور */
.print-btn:hover {
    background: linear-gradient(135deg, #3498db, #2c3e50);
    transform: translateY(-2px);
    box-shadow: 0 6px 20px rgba(52, 152, 219, 0.5);
}

/* حالت کلیک */
.print-btn:active {
    transform: translateY(1px);
    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.2);
}

.print-btn svg {
    display: inline-block;
    vertical-align: middle;
    transition: transform 0.3s ease;
}

.print-btn:hover svg {
    transform: scale(1.1);
}

اون font-family: inherit رو حتماً نگه دارید. باعث می‌شه دکمه فونت قالب خودتون رو بگیره و مثل یه وصله‌ی ناجور نباشه. رنگ‌های گرادیانت رو هم راحت با رنگ‌های برند خودتون عوض کنید.

مهم‌ترین ترفند این مقاله

css

@media print {
    .print-btn {
        display: none !important;
    }
}

این سه خط رو یادتون نره. وگرنه یه دکمه‌ی رنگی گنده وسط برگه‌ی چاپ‌شده‌ی کاربر ظاهر می‌شه که هیچ کاربردی هم نداره. باور کنید این اشتباه رو خیلی‌ها می‌کنن.

عیب‌یابی

خب رسیدیم به بخش عیب‌یابی.

چرا توی موبایل هیچ اتفاقی نمی‌افته؟

این شایع‌ترین گزارشیه که می‌گیرید. کاربر می‌گه «زدم روی دکمه، هیچی نشد».

نود درصد مواقع دلیلش اینه که کاربر از مرورگر داخلی اپلیکیشن‌ها (In-App Browser) اومده. یعنی لینک سایتتون رو توی اینستاگرام یا تلگرام یا واتساپ زده و صفحه توی خود همون اپ باز شده. این مرورگرهای داخلی دسترسی به دستورات چاپ سیستم‌عامل رو مسدود می‌کنن.

تقصیر کد شما نیست و راه‌حل کدنویسی هم نداره. بهترین کار اینه که یه راهنمای کوچیک زیر دکمه بذارید:

html

<p style="font-size: 13px; color: #777; margin-top: 8px;">
    اگر روی موبایل دکمه کار نکرد، صفحه را در مرورگر کروم یا سافاری باز کنید.
</p>

چرا رنگ پس‌زمینه و تصاویر چاپ نمی‌شن؟

مرورگرها به‌صورت پیش‌فرض پس‌زمینه‌ها رو چاپ نمی‌کنن که جوهر کاربر حروم نشه. اگه واقعاً لازم دارید (مثلاً برای فاکتور با هدر رنگی)، این رو اضافه کنید:

css

@media print {
    .invoice-header {
        -webkit-print-color-adjust: exact;
        print-color-adjust: exact;
    }
}

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

کد رو زدم ولی هیچ تغییری نمی‌بینم!

نود و نه درصد اوقات، کشه. افزونه‌ی کشتون (رخش یا هر چی) داره نسخه‌ی قدیمی CSS رو نشون می‌ده. اول کش رو پاک کنید، بعد یه Ctrl+Shift+R هم توی مرورگر بزنید.

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

کد بنویسیم یا افزونه نصب کنیم؟

سؤال منصفانه‌ایه. بذارید خلاصه مقایسه کنیم:

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

سؤالات متداول

جمع‌بندی

خب، تموم شد. ببینید در نهایت داستان اینه:

یه خط کد window.print() بهتون دکمه می‌ده. ولی چیزی که کارتون رو حرفه‌ای می‌کنه، اون @media print هست که خروجی چاپ رو تمیز و خوندنی می‌کنه. اگه قراره فقط یه بخش از این مقاله رو جدی بگیرید، همون بخشه.

پیشنهاد ما برای شروع اینه که با روش شورت‌کد جلو برید، استایل دکمه رو با رنگ برند خودتون هماهنگ کنید، کدهای @media print رو اضافه کنید، و آخرش حتماً خودتون یه بار تست پرینت بگیرید و ببینید خروجی چطوریه. همین تست ساده، کلی ایراد ریز رو نشونتون می‌ده.

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

تیم تولید محتوا

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