الدرس الرابع // استخدام استعلامات الوسائط Media Queries CSS لتنسيق صفحة الموضوع لتصبح جاهزة للطباعة print

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

نموذج سطح مكتب يحوي زر طباعة

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

#header-wrapper <-- 100% -->

#nav <-- 100% -->

#content-wrapper <-- 100% -->

#main <-- 850px -->

عنوان موضوع تجريبي

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

#sidebar-wrapper <-- 250px -->

#footer <-- 100% -->

لاتنسى أخذ نسخة إحتياطية من القالب

الخطوة الأولى

• قم بتسجيل حسابك ثم إذهب إلى منصة البلوجر dashboard
• إنتقل للمدونة >> ثم إلى المظهر >> ثم إضغط على تحرير  Edit HTML 
• إضغط في وسط محرر الأكواد  ثم   F + Ctrl لإضهار مربع البحث
• بإستعمال  الزر  C +Ctrl  للنسخ و  V +Ctrl  للصق قم بوضع الأكواد في المكان المناسب

لاتنسى أخذ نسخة إحتياطية من القالب

الخطوة الثانية - تركيب زر طباعة الموضوع

• ضع كود html التالي مباشرة فوق <data:post.body/>
  

  html
  <a class='btn-print' href='//www.printfriendly.com' onclick='window.print();return false;' title='طباعة الموضوع'>     
  <i class="fa fa-print" aria-hidden="true"></i>
  </a>
  

  
  

  ملاحظة:

  ستجد الوسم <data:post.body/> الذي نبحث عنه مكرر أكثر من مرة المطلوب تجده داخل حقل البوست <b:includable id='post' var='post'> أو قم بالتجربة على الجميع حتى يظهر الزر المطلوب بالعلم ان وضع الكود فوق الوسم يعني ظهور الزر فوق صفحة التدوينة ووضعه أسفل الوسم يعني العكس.
• الآن نضع كود css الخاص بزر طباعة الموضوع فوق الوسم ]]></b:skin>
  

  css
  .btn-print {
      float: right;
      color: #656c7a;
      background: #eeeeee;
      text-align: center;
      width: 40px;
      height: 40px;
      line-height: 40px;
      border-radius: 100%;
      -webkit-border-radius: 100%;
  }
  .btn-print:hover {
      color: #d2d2d2;
  }
  

  
  

لاتنسى أخذ نسخة إحتياطية من القالب

الخطوة الثالثة - تركيب ورقة أنماط إستعلامات الوسائط الخاصة بالطباعة

في البداية دعنا نراجع نقطة مهمة وهي أن نوع الوسيط الخاص بالتجاوب كما عرفناه في الدروس التي مرت كان @media screen
أما هنا نوع الوسيط الخاص بالطباعة هو @media print لاحظ الفرق ..وكالعادة سنضيف الدعامات الخاصة بنا داخل العارضة {} التالية .



CSS
@media print {}



• الآن نضع كود css لورقة أنماط إستعلامات الوسائط الخاصة بالطباعة فوق الوسم ]]></b:skin>
  

  css
  @media print {
  
    @page {
      margin: 1.25cm 1.3cm 1.25cm 1.3cm;
    }
    
    body {
      background: #FFF!important;
      color: black !important;
    }
    
    .post-body {
      -webkit-print-color-adjust: exact;
    }
  
    #main {
      width: 100%!important;
      float: none!important;
    }
    
    #header-wrapper, #nav, #sidebar-wrapper, #footer {
      display: none!important;
    }
    
  }
  
  
  

  
  

  شرح كود CSS

  الجزء @page المحدد بهذا اللون مهم جدا لأنه خاص بضبط نسبة الحافة لورقة الطباعة..نقصد هنا -الهامش- المسافة بين النص وحافة الورقة.

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

  الجزء المحدد بهذا اللون يسمح لنا بتواجد الألوان على التدوينة مثلا إذا كان في الموضوع صندوق إقتباس فقرة بلون خلفية معين سيظهر ذلك تماما كما هو عند تهيئة ورقة الطباعة أما إذا حذفت هذا السطر سيقوم جهاز الوسيط بحذف كامل للأنماط الثقيلة كالخلفية والحدود مثلا.
  نقطة أخرى متعلقة بهذا الجزء وهي في حال نريد فقط ترك عنصر معين داخل التدوينة بكامل لونه وشكله هنا علينا إستبدال إسم الفئة - الكلاس - .post-body بإسم الفئة الذي نريد تركه على هيئته.. أو إضافة أكثر من عنصر مع الفصل بينهم بفاصلة ,

  الجزء المحدد بهذا اللون خاص بحقل التدوينات <main> يحتاج منا تغيير نسبة العرض 850px إلى نسبة متجاوبة تلقائية أي 100% وهذا ماقمنا به لكي تأخذ الحاوية كامل عرض الشاشة كما أننا منعنا إتجاه الموضع float: none!important; لكي لايميل إلى جهةاليسار أو اليمين ويبقى في الوسط.

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

  تنبيه...لاحظ أننا في الغالب نقوم بإلحاق الدعامات بكلمة !important عليك المحافظة على إدراجه مع جميع الأنماط التي تضيفها هنا وذلك كأنك تقول (هذا نمط مهم جدا يحتاج أولوية عند العرض لاتعتبره نمط بديل).

نموذج متجاوب لشكل ورقة الطباعة

النتيجة التي تظهر عند النقر على زر طباعة الموضوع يجب أن تكون بالشكل التالي ..لاحظ كيف تم إخفاء جميع الأقسام
الآن يمكنك بنفس الطريقة تخصيص ورقة الأنماط الخاصة بقالبك لتصبح منشوراتك على هيئة مستندات قابلة للطباعة منسقة وبصورة منظمة.
ولاحظ أنها نفس فكرة تخصيص ورقة استعلامات الوسائط Media Queries CSS لإنشاء إصدار الجوال الخاص بموقعك أي يمكنك تخصيص كذلك حجم الخط واللون أو إخفاء عناصر داخل التدوينة مثلما تريد ...المهم احرص على أن تكون الدعامات داخل عارضة إستعلامات الوسائط الخاصة بالطباعة @media print .

#main <-- 100% -->

عنوان موضوع تجريبي

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