هل مدونة WordPress الخاصة بك مناسبة للطباعة؟
كما أكملت مشاركة الأمس في وسائل الإعلام الاجتماعية ROI، أردت إرسال معاينة له إلى الرئيس التنفيذي لشركة Dotster Clint Page. عندما قمت بالطباعة إلى ملف PDF ، كانت الصفحة في حالة من الفوضى!
لا يزال هناك العديد من الأشخاص الذين يرغبون في طباعة نسخ من موقع ويب لمشاركتها أو الرجوع إليها لاحقًا أو مجرد ملف مع بعض الملاحظات. قررت أن أجعل مدونتي صديقة للطباعة. كان الأمر أسهل بكثير مما كنت أعتقد أنه سيكون.
كيفية عرض النسخة المطبوعة الخاصة بك:
ستحتاج إلى فهم أساسيات CSS لإنجاز ذلك. الجزء الأصعب هو استخدام وحدة تحكم مطور المستعرض الخاص بك لاختبار عرض المحتوى وإخفائه وضبطه بحيث يمكنك كتابة CSS الخاص بك. في Safari ، ستحتاج إلى تمكين أدوات المطور ، والنقر بزر الماوس الأيمن على صفحتك ، وتحديد فحص المحتوى. سيُظهر لك العنصر و CSS المرتبطين.
Safari لديه خيار صغير لطيف لعرض النسخة المطبوعة من صفحتك في عارض الويب:
كيف تجعل مدونة WordPress الخاصة بك صديقة للطباعة:
هناك طريقتان مختلفتان لتحديد تصميمك للطباعة. الأول هو إضافة قسم في ورقة الأنماط الحالية خاص بك إلى نوع وسائط "الطباعة".
@media print {
header,
nav,
aside {
display: none;
}
#primary {
width: 100% !important
}
.hidden-print,
.google-auto-placed,
.widget_eu_cookie_law_widget {
display: none;
}
}
الطريقة الأخرى هي إضافة ورقة أنماط معينة إلى نسقك الفرعي الذي يحدد خيارات الطباعة. إليك الطريقة:
- قم بتحميل ورقة أنماط إضافية إلى دليل السمات الخاص بك يسمى print.css.
- أضف مرجعًا إلى ورقة الأنماط الجديدة في ملف 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:
تصميم الطباعة المتقدم
من المهم ملاحظة أنه لا يتم إنشاء جميع المتصفحات على قدم المساواة. قد ترغب في اختبار كل متصفح لترى كيف تبدو صفحتك عبرهم. يدعم البعض أيضًا بعض ميزات الصفحة المتقدمة لإضافة محتوى وتعيين الهوامش وأحجام الصفحات بالإضافة إلى عدد من العناصر الأخرى. مجلة 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;
}
}