هل مدونة WordPress الخاصة بك مناسبة للطباعة؟

اطبع CSS

كما أكملت مشاركة الأمس في وسائل الإعلام الاجتماعية ROI، أردت إرسال معاينة له إلى الرئيس التنفيذي لشركة Dotster Clint Page. عندما قمت بالطباعة إلى ملف PDF ، كانت الصفحة في حالة من الفوضى!

لا يزال هناك العديد من الأشخاص الذين يرغبون في طباعة نسخ من موقع ويب لمشاركتها أو الرجوع إليها لاحقًا أو مجرد ملف مع بعض الملاحظات. قررت أن أجعل مدونتي صديقة للطباعة. كان الأمر أسهل بكثير مما كنت أعتقد أنه سيكون.

كيفية عرض النسخة المطبوعة الخاصة بك:

ستحتاج إلى فهم أساسيات CSS لإنجاز ذلك. الجزء الأصعب هو استخدام وحدة تحكم مطور المستعرض لديك لاختبار عرض المحتوى وإخفائه وضبطه بحيث يمكنك كتابة CSS الخاص بك. في Safari ، ستحتاج إلى تمكين أدوات المطور ، والنقر بزر الماوس الأيمن على صفحتك ، وتحديد فحص المحتوى. سيُظهر لك هذا العنصر و CSS المرتبطين.

Safari لديه خيار صغير لطيف لعرض النسخة المطبوعة من صفحتك في عارض الويب:

Safari - عرض الطباعة في Web Inspector

كيف تجعل مدونة WordPress الخاصة بك صديقة للطباعة:

هناك طريقتان مختلفتان لتحديد تصميمك للطباعة. الأول هو إضافة قسم في ورقة الأنماط الحالية خاص بك إلى نوع وسائط "الطباعة".

@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:

عرض طباعة WordPress

تصميم الطباعة المتقدم

من المهم ملاحظة أنه ليست كل المتصفحات متشابهة. قد ترغب في اختبار كل متصفح لترى كيف تبدو صفحتك عبرهم. يدعم البعض أيضًا بعض ميزات الصفحة المتقدمة لإضافة محتوى وتعيين الهوامش وأحجام الصفحات ، بالإضافة إلى عدد من العناصر الأخرى. مجلة Smashing لديها جدا مقالة مفصلة عن هذه المطبوعات المتقدمة خيارات.

إليك بعض تفاصيل تخطيط الصفحة التي قمت بدمجها لإضافة إشارة إلى حقوق النشر في أسفل اليسار ، وعداد صفحة في أسفل اليمين ، وعنوان المستند أعلى يسار كل صفحة:

@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 لتقليل الرسائل الضارة. تعرف كيف تتم معالجة بيانات تعليقك.