√ تعريب قوالب بلوجر الأجنبية يدويا بسهولة دون استعمال أي برنامج

تعريب قوالب بلوجر الأجنبية يدويا بسهولة دون استعمال أي برنامج

3/05/2016

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

أنت بحاجة أولا ل:

تعلم أساسيات html و css. (أقل من 24 ساعة)
فهم أجزاء كود قوالب بلوجر.

بعد ذلك، يمكنك البدء بتعريب القوالب ولما لا تصميمها كليا.

هل من برنامج أو برامج لتعريب قوالب بلوجر؟

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

أمثلة html تتعلق بقوالب بلوجر

كتعريف مبسط للغة الhtml فهي لغة برمجة تهتم بالهيكل الخاص بالقالب. عندما أقول الهيكل، أقصد به جسم المدونة بحيث أن الhtml يساعد في تحديد الأقسام وتصنيفها.

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

سنتعرف على عناصر الhtml التي تستعمل كثيرا داخل قوالب بلوجر وهي كالآتي:

أقسام القالب

يتم استعمال وسوم Div tags لتنظيم المحتوى وتبدو الأكواد الخاصة بها التي تبدأ ب <div وتنتهي ب </div> . ويتم إضافة class أو ID مع إسم لتعريفها وتسهيل التحكم في كل جزء عن طريق الCSS :

<div class='header'> المحتوى يوضع هنا</div>

هنا الdiv هو من نوع class ويحمل إسم header .

<div class='article'> المحتوى يوضع هنا</div>

هنا الdiv من نوع id ويحمل إسم الأول يحمل إسم article . يمكن تسمية هذه الأقسام بأسماء مختلفة ، لذلك ستجدون أنها

تختلف من قالب لقالب. لكن غالبا ما تحمل هذه الأسماء:

الجزء العلوي للقالب: header أو headerwrapper حيث يوجد رأس المدونة وعنوانها وأحيانا القوائم.
الجزء الرئيسي mainwrapper حيث يوجد نص المواضيع والتعليقات
الجزء الجانبي sidebar حيث يتم وضع مجموعة من الإضافات
الجزء السفلي footer أو footerwrapper حيث يوجد حقوق الملكية.

أقسام القالب كما توضح الصورة أسفله:

هيكل قالب بخانتين

بعض القوالب قد تتوفر على جانبين مثلا:

هيكل قالب بثلالث خانات تعريب قوالب بلوجر

هيكل قالب بثلاث خانات

الفرق بين ID و Class هو أن الأول عندما نستعمله بإسم لا يمكن تكرار ذلك الاسم داخل نفس صفحة الويب. بينما الClass يمكن تكرارها.

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

القوائم

القوائم يتم انشاءها باستعمال اللوائح المنظمة Ordered Lists ، والكود الخاص بها يكون بهذا الشكل:

<ul>

<li> العنصر الأول</li>

<li> العنصر الثاني</li>

<li> العنصر الثالث</li>

</ul>

<ul> هو بداية الائحة التي تنتهي ب</ul> . وبينهما توجد العناصر <li></li> وهي التي تظهر لنا في القائمة. بطبيعة الحال فشكل القائمة في الأصل هو عمودي، لكن باستعمال الCSS يتم إخفاء الأرقام الترتيبية أو نقط الائحة وجعلها أفقية. على اليمين لائحة عادية وإلى اليسار لائحة مع تغييرها لأفقية:

بعد ذلك يتم إضافة الروابط لتصبح:

<ul>

<li> <a href='www.folfoly.com'>دروس بلوجر</a></li>

<li><a href='www.folfoly.com'>دروس بلوجر</a></li>

</ul>

إذا أردتم تعريب قائمة يكفي تغيير أسماء الكلمات داخل العناصر مع إضافة الروابط الخاصة بمحتوى مدونتكم:
نص الرابط بالأحمر
الرابط بالأخضر

ماذا عن القوائم الثانوية؟
القوائم الثانوية يتم إضافتها بنفس الطريقة داخل قائمة عنصر رئيسية <li></li> وتبدأ كذلك ب <ul> وتنتهي ب</ul> وداخلها مجموعة عناصر تبدأ ب <li> وتنتهي ب </li> .

<ul>

<li> <a href='www.folfoly.com'>دروس بلوجر</a></li>

<li><a href='www.folfoly.com'>دروس بلوجر</a></li>

<li>

تعريب قوالب بلوجر

<ul>

</ul>

</li>

</ul>

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

يمكنكم إضافة ما لا نهاية من اللوائح الثانوية داخل لوائح أخرى رئيسية.

مربع البحث

إذا كان القالب متوفرا على مربع البحث فغالبا ما يكون بهذا الشكل:

</form>

هناك جزءان ليتم تعريبهما وهما النص الموجود داخل مربع الكتابة placeholder هنا Type here.. ثم نص زر البحث وهو مرتبط ب submit ويكون صفة ل value هنا Search وقد قمت بتحديدهما في الصورة أعلاه. طريقة التعريب بسيطة، ويكفي البحث عن هذه النصوص وتعويضها بنصوص عربية. زر البحث يكون غالبا إلى اليمين وباستعمال الcss يمكن ارجاعه إلى اليسار وسنرى كيفية القيام بذلك.

صندوق المشاركة عبر البريد

عنصر الhtml الأخير الذي يحتاج التعريب هو صندوق المتابعة عبر البريد والذي يتوفر غالبا على كود بهذا الشكل:

<button class="newsletter-button-sm" type="submit">Subscribe</button>

</div>

</form>

مثله مثل مربع البحث، هناك نص داخل مربع البحث ثم زر الإرسال كما تم تحديدهما في الصورة أعلاه. ويكفي ترجمة النص. لاحظوا استعمال نفس التقنية placeholder ثم submit.

بالنسبة لبقية التغييرات مثل جعل النص إلى اليمين أو تحويل مربع إلى اليسار فهذا دور الCSS الذي سنمر إليه الآن لنرى طريقة تحكمه في عناصر الhtml بشكل سحري.

قواعد الCSS الخاصة بالتعريب

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

قاعدة ال Float

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

في هذا المثال الcss يجعل الفقرة p إلى اليمين. لتحويلها إلى اليسار يكفي تغيير right ب left.

p {

float : right;

}

اتجاه النص text-align

في هذا المثال نص الموضوع هو من اليسار لليمين:

.post {

text-align: left;

}

هذه القاعدة تحتمل ثلاث خيارات:
Right النص من اليمين لليسار
Left النص من اليسار إلى اليمين
Center النص في الوسط

نظام الصندوق Box Model

من القواعد التي تتطلب القليل من الإنتباه لفهمها. وهي تتألف من القواعد التالية:

Margin : الهامش الذي يفصل بين الصندوق ومحيطه من الخارج
Padding : الهامش من داخل الصندوق
Boder : الحد المحيط بالعنصر

نظام الصندوق CSS BOX MODEL

الهامش الداخلي padding والهامش الخارجي margin

القاعدتان تعملان بنفس الطريقة وتكون بهذه الأشكال:
المثال هنا يتعلق ب h1 العنوان

h1 {

margin: 5px 10px 15px 30px;

padding: 5px 10px 15px 30px;

}

أي هامش خارجي margin بقيمة 5px فوق،10px على اليمين، 15pxاسفل، و30px إلى اليسار
نفس الشيء بالنسبة للهامش الداخلي padding.
الترتيب من اليسار هو أعلى يمين تحت يسار .

يمكن استعمال قيمتين فقط:

h1 {

margin: 5px 10px;

padding: 5px 10px;

}

هامش خارجي بقيمة 5px فوق وأسفل. ثم 10px يمين ويسار.
هامش داخلي بقيمة 5px فوق وأسفل. ثم 10px يمين ويسار.
هامش خارجي فوق وتحت ب ويمين ويسار بقيمة

ويمكن أن تكون قيمة القاعدة واحدة:

h1 {

margin: 5px;

padding: 0px;

}

هامش خارجي من كل الجهات بقيمة 5px
هامش داخلي من كل الجهات بقيمة 0

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

.title{

Padding : 0px 0px 0px 10px ;

}

هنا الهوامش الداخلية فوق، أسفل، يمين هي 0 صفر، بينما في اليسار 10px
لكي يناسب القالب العربي يكفي تغيير الهامش ليصبح:

.title{

Padding : 0px 10px 0px 0px ;

}

أصبح الهامش على اليمين الآن 10px

وقد تكون الهوامش بأسماء مخصصة:

Padding-top هامش داخلي فوق
Padding –right هامش داخلي يمين
Padding-bottom هامش داخلي أسفل
Padding –left هامش داخلي يسار
نفس الشيء بالنسبة للهامش الخارجي:
margin-top هامش خارجي فوق
margin –right هامش خارجي يمين
margin-bottom هامش خارجي أسفل
margin –left هامش خارجي يسار

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

h1{

Margin-top : 10px ;

}

شاهدوا الفيديو التالي لفهم نظام الصندوق Box Model أكثر:

الحد المحيط بالصندوق Border

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

كود الحد يكون على الشكل التالي:

h1 {

border: 1px solid black;

}

هذه القاعدة تقول أن العنوان h1 سيحيط به خط من جميع الجهات بحجم 1px وهو خط متصل solid ولونه أسود black.
يمكن تخصيص الحد لجهة واحدة أو جهتين أو ثلاث بحسب الحاجة كما رأينا بالنسبة للهوامش:

h1 {

border-top: 1px solid black;

border-right: 1px solid black;

border-bottom: 1px solid black;

border-left: 1px solid black;

}

في القوالب الأجنبية يكون غالبا الحد إلى اليسار مخصصا بإسم:
لborder-left
ويجب تحويله ل border-right ليصبح إلى اليمين

رأينا بعض قواعد ال وال التي ستساعدنا في تعريب أي قالب مهما كان نوعه. الآن حان وقت تطبيق هذه القواعد على قالب للتجربة.

تعريب قالب بلوجر يدويا

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