آیا وبلاگ وردپرس شما قابل چاپ است؟

چاپ CSS

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

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

نحوه نمایش نسخه چاپی شما:

برای انجام این کار باید اصول CSS را درک کنید. دشوارترین قسمت استفاده از کنسول توسعه دهنده مرورگر شما برای آزمایش نمایش ، پنهان کردن و تنظیم محتوا است تا بتوانید CSS خود را بنویسید. در Safari ، باید ابزارهای توسعه دهنده را فعال کنید ، روی صفحه خود کلیک راست کرده و Inspect Content را انتخاب کنید. این عنصر و CSS مرتبط را به شما نشان می دهد.

Safari گزینه کمی خوبی برای نمایش نسخه چاپی صفحه شما در بازرس وب دارد:

سافاری - نمای چاپ در Web Inspector

چگونه می توان وبلاگ وردپرس خود را مطابق با چاپگر سازگار کرد:

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

@media print {
     header, 
     nav, 
     aside { 
         display: none; 
     }
     #primary { 
         width: 100% !important 
     }
     .hidden-print, 
     .google-auto-placed, 
     .widget_eu_cookie_law_widget { 
         display: none; 
     }
}

روش دیگر این است که یک سبک خاص به موضوع کودک خود اضافه کنید که گزینه های چاپ را مشخص کند. نحوه کار:

  1. یک صفحه سبک اضافی به نام قالب خود بارگذاری کنید print.css.
  2. یک مرجع به صفحه سبک جدید خود اضافه کنید functions.php فایل. شما می خواهید اطمینان حاصل کنید که فایل print.css شما پس از صفحه سبک والدین و فرزند شما بارگیری می شود تا سبک های آن آخرین بارگیری شود. من همچنین اولویت 100 را روی این بارگذاری قرار دادم تا بعد از افزونه بارگیری شود. اینجا مرجع من به نظر می رسد:

function theme_enqueue_styles() {
    global $wp_version;
    wp_enqueue_style( 'parent-style', get_template_directory_uri() . '/style.css' );
    wp_enqueue_style( 'child-style', get_stylesheet_directory_uri() . '/style.css', array('parent-style') );
    wp_enqueue_style( 'child-style-print', get_stylesheet_directory_uri() . '/print.css', array(), $wp_version, 'print' );
}
add_action( 'wp_enqueue_scripts', 'theme_enqueue_styles' , 100);

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

My print.css پرونده به این شکل است. توجه داشته باشید که من حاشیه ها را نیز اضافه کردم ، روشی که توسط مرورگرهای مدرن پذیرفته می شود:

header, 
nav, 
aside { 
    display: none; 
}
#primary { 
    width: 100% !important 
}
.hidden-print, 
.google-auto-placed, 
.widget_eu_cookie_law_widget { 
    display: none; 
}

نمای چاپ چگونه به نظر می رسد

در صورتی که نمای چاپ من از Google Chrome چاپ شده به نظر می رسد:

نمای چاپی وردپرس

یک ظاهر طراحی پیشرفته

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

در اینجا برخی از جزئیات طرح بندی صفحه وجود دارد که برای افزودن ذکر حق چاپ در پایین سمت چپ ، شمارنده صفحه در پایین سمت راست و عنوان سند در سمت چپ بالای هر صفحه ، اضافه کردم:

@page { 
    size: 5.5in 8.5in;
    margin: 0.5in; 
}
@page:right{ 
  @bottom-left {
    margin: 10pt 0 30pt 0;
    border-top: .25pt solid #666;
    content: "©  " attr(data-date) " DK New Media, LLC. All Rights Reserved.";
    font-size: 9pt;
    color: #333;
  }

  @bottom-right { 
    margin: 10pt 0 30pt 0;
    border-top: .25pt solid #666;
    content: counter(page);
    font-size: 9pt;
  }

  @top-right {
    content:  string(doctitle);
    margin: 30pt 0 10pt 0;
    font-size: 9pt;
    color: #333;
  }
}

2 نظرات

  1. 1
  2. 2

شما چه فکر میکنید؟

این سایت از Akismet برای کاهش هرزنامه استفاده می کند. بدانید که چگونه نظر شما پردازش می شود.