تعريب قوالب بلوجر الأجنبية يدويا بسهولة دون استعمال أي برنامج
تعريب قوالب بلوجر لا يتطلب إلا معرفة بأساسيات تقنيات الويب. حتى أن جوجل تقول أنه لا حاجة لتصميم قالب بلوجر من الصفر حيث يكفي تعديل القوالب الموجودة على المنصة.
أنت بحاجة أولا ل:
بعد ذلك، يمكنك البدء بتعريب القوالب ولما لا تصميمها كليا.
فيقول هذا جزء علوي، سفلي، أو جانبي. هذه فقرة، صورة، عنوان أو جدول... الhtml لا يتحكم في أمور مثل الألوان والتنظيم كتحويل من اليمين إلى اليسار أو العكس، لان هذا دور الCSS وسنرى كيف يتم ذلك جزء من هذا الدرس.
سنتعرف على عناصر الhtml التي تستعمل كثيرا داخل قوالب بلوجر وهي كالآتي:
تختلف من قالب لقالب. لكن غالبا ما تحمل هذه الأسماء:
أقسام القالب كما توضح الصورة أسفله:
بعض القوالب قد تتوفر على جانبين مثلا:
الفرق بين ID و Class هو أن الأول عندما نستعمله بإسم لا يمكن تكرار ذلك الاسم داخل نفس صفحة الويب. بينما الClass يمكن تكرارها.
الفيديو في نهاية الدرس يشرح طريقة إيجاد هذه الأقسام باستعمال المتصفح.
<ul> هو بداية الائحة التي تنتهي ب</ul> . وبينهما توجد العناصر <li></li> وهي التي تظهر لنا في القائمة. بطبيعة الحال فشكل القائمة في الأصل هو عمودي، لكن باستعمال الCSS يتم إخفاء الأرقام الترتيبية أو نقط الائحة وجعلها أفقية. على اليمين لائحة عادية وإلى اليسار لائحة مع تغييرها لأفقية:
بعد ذلك يتم إضافة الروابط لتصبح:
إذا أردتم تعريب قائمة يكفي تغيير أسماء الكلمات داخل العناصر مع إضافة الروابط الخاصة بمحتوى مدونتكم:
نص الرابط بالأحمر
الرابط بالأخضر
ماذا عن القوائم الثانوية؟
القوائم الثانوية يتم إضافتها بنفس الطريقة داخل قائمة عنصر رئيسية <li></li> وتبدأ كذلك ب <ul> وتنتهي ب</ul> وداخلها مجموعة عناصر تبدأ ب <li> وتنتهي ب </li> .
القائمة الرئيسية تبدأ ب <ul> الأزرق وتنتهي ب</ul> الأزرق. وداخلها عناصر رئيسية. ثم داخل عنصر رئيسي وهو تعريب قوالب بلوجر أضفنا قائمة ثانوية تبدأ ب <ul> الأحمر وتنتهي ب الأحمر </ul> وداخلها عناصر ثانوية. بهذه الطريقة يتم إنشاء القوائم الثانوية.
يمكنكم إضافة ما لا نهاية من اللوائح الثانوية داخل لوائح أخرى رئيسية.
بالنسبة لبقية التغييرات مثل جعل النص إلى اليمين أو تحويل مربع إلى اليسار فهذا دور الCSS الذي سنمر إليه الآن لنرى طريقة تحكمه في عناصر الhtml بشكل سحري.
كود الCSS يكون بهذا الشكل:
العنصر
الصفة
القيمة
في هذا المثال لدينا p أي فقرة النص هو العنصر وصفته حجم الخط الذي قيمته 20 . وثيفته الثانية لون الخط وهو green الأخضر.
إليكم لائحة الصفات وقيمها التي ستسمح لكم بتعريب أي قالب بلوجر لجعل شكله مناسب للمحتوى العربي.
في هذا المثال الcss يجعل الفقرة p إلى اليمين. لتحويلها إلى اليسار يكفي تغيير right ب left.
Right النص من اليمين لليسار
Left النص من اليسار إلى اليمين
Center النص في الوسط
Margin : الهامش الذي يفصل بين الصندوق ومحيطه من الخارج
Padding : الهامش من داخل الصندوق
Boder : الحد المحيط بالعنصر
المثال هنا يتعلق ب h1 العنوان
نفس الشيء بالنسبة للهامش الداخلي padding.
الترتيب من اليسار هو أعلى يمين تحت يسار .
يمكن استعمال قيمتين فقط:
هامش داخلي بقيمة 5px فوق وأسفل. ثم 10px يمين ويسار.
هامش خارجي فوق وتحت ب ويمين ويسار بقيمة
ويمكن أن تكون قيمة القاعدة واحدة:
هامش داخلي من كل الجهات بقيمة 0
الأمر الذي يجب الإنتباه إليه أثناء تعريب القوالب هو أن الهامش غالبا ما يكون على اليسار لأن اللغة الانجليزية تكتب من اليسار إلى اليمين. وبما أن العربية تكتب عكس ذلك يجب تحويل الهامش إلى اليمين. مثلا قد تجد في قالب أجنبي هامش داخلي بهذا الشكل:
هنا الهوامش الداخلية فوق، أسفل، يمين هي 0 صفر، بينما في اليسار 10px
لكي يناسب القالب العربي يكفي تغيير الهامش ليصبح:
وقد تكون الهوامش بأسماء مخصصة:
كمثال، أريد فقط إضافة مساحة كهامش خارجي بين العنوان والعناصر الأخرى من فوق فقط، الطريقة هي كالتالي:
أنت بحاجة أولا ل:
- تعلم أساسيات 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>
<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><a href='www.folfoly.com'>دروس بلوجر</a></li>
<li>
تعريب قوالب بلوجر
<ul>
<li> <a href='www.folfoly.com'>html</a></li>
<li> <a href='www.folfoly.com'>css</a></li>
</ul>
</li>
</ul>
القائمة الرئيسية تبدأ ب <ul> الأزرق وتنتهي ب</ul> الأزرق. وداخلها عناصر رئيسية. ثم داخل عنصر رئيسي وهو تعريب قوالب بلوجر أضفنا قائمة ثانوية تبدأ ب <ul> الأحمر وتنتهي ب الأحمر </ul> وداخلها عناصر ثانوية. بهذه الطريقة يتم إنشاء القوائم الثانوية.
يمكنكم إضافة ما لا نهاية من اللوائح الثانوية داخل لوائح أخرى رئيسية.
مربع البحث
إذا كان القالب متوفرا على مربع البحث فغالبا ما يكون بهذا الشكل:
<form id="searchbox" method="get" action="/search">
<input name="q" type="text" size="15" placeholder="Type here..." />
<input id="button-submit" type="submit" value="Search" />
</form>
هناك جزءان ليتم تعريبهما وهما النص الموجود داخل مربع الكتابة placeholder هنا Type here.. ثم نص زر البحث وهو مرتبط ب submit ويكون صفة ل value هنا Search وقد قمت بتحديدهما في الصورة أعلاه. طريقة التعريب بسيطة، ويكفي البحث عن هذه النصوص وتعويضها بنصوص عربية. زر البحث يكون غالبا إلى اليمين وباستعمال الcss يمكن ارجاعه إلى اليسار وسنرى كيفية القيام بذلك.صندوق المشاركة عبر البريد
عنصر الhtml الأخير الذي يحتاج التعريب هو صندوق المتابعة عبر البريد والذي يتوفر غالبا على كود بهذا الشكل:
<form action="https://feedburner.google.com/fb/a/mailverify" method="post" onsubmit="window.open('https://feedburner.google.com/fb/a/mailverify?uri=tntbystc', 'popupwindow', 'scrollbars=yes,width=550,height=520');return true" target="popupwindow">
<div class="newsletter-sm-bot">
<input class="newsletter-input-sm" name="email" placeholder="Enter Your Email" type="text">
<button class="newsletter-button-sm" type="submit">Subscribe</button>
</div>
<input name="uri" type="hidden" value="tntbystc">
</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 {
border-top: 1px solid black;
border-right: 1px solid black;
border-bottom: 1px solid black;
border-left: 1px solid black;
}
في القوالب الأجنبية يكون غالبا الحد إلى اليسار مخصصا بإسم:لborder-left
ويجب تحويله ل border-right ليصبح إلى اليمين
رأينا بعض قواعد ال وال التي ستساعدنا في تعريب أي قالب مهما كان نوعه. الآن حان وقت تطبيق هذه القواعد على قالب للتجربة.
تعريب قالب بلوجر يدويا
كل ما تحتاجونه هو قالب أجنبي، وقد اخترت قالب للعمل عليه ويمنكم تحميله من هنا ثم وضعه في مدونة. المدونة التي ستعملون عليها يجب أن تتوفر على بعض المشاركات بالصور وبعض الإضافات حتى نقوم بتعريب جميع الأجزاء. الفيديو يشرح طريقة تطبيق جميع القواعد التي رأيناها أعلاه في تعريب القالب.أقسام القالب التي سيتم تعريبها
1- الجزء العلوي الأول، حيث سيتم تحويل روابط الشبكات الإجتماعية من اليمين إلى اليسار ثم القائمة إلى اليمين
2 - عنوان المدونة إلى اليمين
3 - القائمة إلى اليمين
4 - الصورة إلى اليمين ثم النص كذلك ثم تحويل قراءة المزيد إلى اليسار
5 - تحويل صورة المشاركات الشائعة إلى اليمين والنص كذلك
6 - تحويل النص إلى اليمين مع تحويل السهم الصغير إلى اليسار
7 - تغيير نصوص أزرار ترقيم الصفحات بالسابق، الاحق...
8 - الجزء السفلي سيتم تحويل القائمة إلى اليمين وسهم العودة للإعلى إلى اليسار
9 - وفي الآخر سنرى كيفية تحويل أي من الأقسام إلى اليمين أو اليسار..