10/24/2018

settings_overscan print announcement

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





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

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

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

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

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

    لنفترض أن النموذج الذي في الأسفل هو صفحة الموضوع يحتوي على عدة أقسام ولاحظ أننا أضفنا زر طباعة الموضوع فوق التدوينة لتمكين عرض أجهزة الوسائط الخاصة بالطباعة.
    في البداية سنريكم الطريقة السهلة والصحيحة لتركيب هذا الزر ثم بعدها نضيف ورقة أنماط إستعلامات الوسائط الخاصة بالطباعة.
#header-wrapper <-- 100% -->
#nav <-- 100% -->
#content-wrapper <-- 100% -->
#main <-- 350px -->


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

هذا النص هو مثال لنص يمكن أن يستبدل في نفس المساحة، لقد تم توليد هذا النص من مولد النص العربى، حيث يمكنك أن تولد مثل هذا النص أو العديد من النصوص الأخرى إضافة إلى زيادة عدد الحروف التى يولدها التطبيق، إذا كنت تحتاج إلى عدد أكبر من الفقرات يتيح لك مولد النص العربى زيادة عدد الفقرات كما تريد، النص لن يبدو مقسما ولا يحوي أخطاء لغوية، مولد النص العربى مفيد لمصممي المواقع على وجه الخصوص، حيث يحتاج العميل فى كثير من الأحيان أن يطلع على صورة حقيقية لتصميم الموقع، ومن هنا وجب على المصمم أن يضع نصوصا مؤقتة على التصميم ليظهر للعميل الشكل كاملاً،دور مولد النص العربى أن يوفر على المصمم عناء البحث عن نص بديل لا علاقة له بالموضوع الذى يتحدث عنه التصميم فيظهر بشكل لا يليق، هذا النص يمكن أن يتم تركيبه على أي تصميم دون مشكلة فلن يبدو وكأنه نص منسوخ، غير منظم، غير منسق، أو حتى غير مفهوم. لأنه مازال نصاً بديلاً ومؤقتاً.
#sidebar-wrapper <-- 250px -->
  • ضع كود html التالي مباشرة فوق <data:post.body/>

  • 
    <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>

  • 
    .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 لاحظ الفرق ..وكالعادة سنضيف الدعامات الخاصة بنا داخل العارضة {} التالية .

    
    @media print {}
    

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

  • 
    @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> يحتاج منا تغيير نسبة العرض 350px إلى نسبة متجاوبة تلقائية أي 100% وهذا ماقمنا به لكي تأخذ الحاوية كامل عرض الشاشة كما أننا منعنا إتجاه الموضع float: none!important; لكي لايميل إلى جهةاليسار أو اليمين ويبقى في الوسط.
    الجزء المحدد بهذا اللون ركز عليه فهو الأهم .. بحيث قمنا بإخفاء جميع أقسام القالب الغير ضرورية وذلك حتى لاتظهر على ورقة الطباعة ولاحظ كيف أخذنا إسم المعرف الخاص بكل قسم وأشركناهم في حاوية لتجنب التكرار مع الأخذ في عين الإعتبار وضع فاصلة , بين كل معرف.
    report
    تنبيه...لاحظ أننا في الغالب نقوم بإلحاق الدعامات بكلمة !important عليك المحافظة على إدراجه مع جميع الأنماط التي تضيفها هنا وذلك كأنك تقول (هذا نمط مهم جدا يحتاج أولوية عند العرض لاتعتبره نمط بديل).
    الآن يمكنك بنفس الطريقة تخصيص ورقة الأنماط الخاصة بقالبك لتصبح منشوراتك على هيئة مستندات قابلة للطباعة منسقة وبصورة منظمة.
    ولاحظ أنها نفس فكرة تخصيص ورقة استعلامات الوسائط Media Queries CSS لإنشاء إصدار الجوال الخاص بموقعك أي يمكنك تخصيص كذلك حجم الخط واللون أو إخفاء عناصر داخل التدوينة مثلما تريد ...المهم احرص على أن تكون الدعامات داخل عارضة إستعلامات الوسائط الخاصة بالطباعة @media print .
  • النتيجة التي تظهر عند النقر على زر طباعة الموضوع يجب أن تكون بالشكل التالي ..لاحظ كيف تم إخفاء جميع الأقسام
#main <-- 100% -->


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

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








add_commentإرسال تعليق

  1. انا تقريبا قرأت كل المواضيع فى مدونتك.
    وحقيقى كلمة شكرا قليلة عليك.

    ربنا يبارك فى عمرك ويرزقك.

    كان عندى طلبين
    1- عاوزين سكربت عرض المواضيع حسب الاقسام بشغلك الحلو ده، وتكون فيها خيارات متعددة زى اللى بنشوفها فى القوالب العالمية والتعديل الكامل من التخطيط، زى ( عدد البوستات / اسم القسم / اختيار التصميم وشكل العرض )
    2- عاوزين شرح كامل للاداة حماية قواب بلوجر، عذرا شرحك ليس واضح، اجعل الشرح سلس وبسيط جدا وواضح وشامل لجميع التفاصيل وخاصة دور الاداة ، وياريت لو بصوت.

    ردحذف
    الردود
    1. أولا دعني أشكرك على طيب كلامك وتقديرك للمجهود وهذا من حسن أخلاقك أخي ..بوركت :love:
      1- بالنسبة لسؤالك عن أداة عرض المواضيع حسب التسمية .. لمالا..سندرج طلبك في برنامجنا المستقبلي وستكون إنشاء الله تعالى في المستوى المطلوب
      2- أما بالنسبة للإشكال حول الأداة الخاصة بحماية القوالب صدقني عند الحصول على الأداة ستجدها تتوفر على شرح تفصيلي
      يكمن السبب في عدم فهم الجزئيات :thinking: هو أن الأداة ليست بين يديك لكن عكس ذالك ستجدها تعمل بنفسها أنت كل ما عليك القيام به هو النسخ واللصق..أنا لاأريد تزكية مشروعنا هذا بحكم أني من مبرمجيه ..لكن بكل فخر أقول أنه حصري على محتوى الويب ولن تجد من يقدم لك الخوارزمية حتى لو دفعت المال ..والحمد لله على التوفيق.
      أعتذر على جدا على الإطالة :wink:

      حذف
    2. يعنى الاداة باختصار هى لحماية قوالب بلوجر من السرقة، يعنى تمنع سرقة القالب والقرصنة عليه ونزوله مجانى زى ما البعض خاربها.

      وياسيدى والله ما قلت الا اللى انت تستحقه .

      حذف
    3. :verycrying: بالضبط أخي الكريم لكن الميزة الحصرية هي أن السكربت يتيح لك إمكانية التحكم في كل القوالب عن بعد بقاعدة بيانات واحدة والجميل أنها قاعدة بيانات google sheet الآمنة والقوية ...وليس كما هو معروف في إستخدام صفحات الويب كبلوجر مثلا..بالتوفيق أخي الكريم

      حذف