ووردبرس بالعربي » “بي أتش بي”

كيف تستبدل عنوان الهيدر بصورة

ووردبرس بالعربي — Thu, 19 Nov 2009 21:16:09 +0000

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

من إحل إستبدال العنوان النصي للقالب بصورة:

1- إفتح ملف header.php وابحث عن الكود التالي:

2- إستبدل الكود السابق بما يلي:

" src="/images/logo.png" />

حيث logo.png هو عنوان شعار مدونتك بعد رفعه لمجلد images الخاص بالقالب.

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

هذا كل شيء. بالتوفيق.. ولا تترددوا في السؤال إذا احتجتم أي مساعدة.

هل أعجبتك هذه التدوينة؟ يمكنك أن تشترك في خدمة الخلاصات (RSS) أو في النشرة البريدية لتحصل على آخر التدوينات أولاً بأول. كما يمكنك أن تشتري لي “ساندويش” أو “كتاب” عبر PayPal!!

الأوسمة: برمجة و تطوير, تعريب القوالب

الرئيسية ¦ قوالب إحترافية ¦ إضافات معرّبة ¦ الأرشيف ¦ راسلني ¦ الأسئلة المتكررة¦ للإعلان ¦ شروط إستخدام الموقع ¦ عنّي

كيف تعرض الإعلانات دون إستخدام الإضافات

ووردبرس بالعربي — Tue, 08 Sep 2009 16:55:29 +0000

لقد شرحت لك في تدوينة سابقة كيف تعرض الإعلانات المصوّرة (حجم 125×125) في القائمة الجانبية لمدونتك بإستخدام إضافة WP125. وبالرغم من أن هذه الإضافة بسيطة جداً ولا تحتاج إلى تعريب برأيي، إلا أنه يبدو أنها تتعارض مع نسخة ووردبريس 2.8.4 المعرّبة. فكما هو موضّح في التعليقات، تقوم هذه الإضافة بتغيير مسار لوحة التحكم لتصبح من اليسار إلى اليمين – مثل النسخة الإنجليزية لووردبريس. وعليه، سأقوم في هذه التدوينة بشرح طريقة مختلفة لعرض لإعلانات في القائمة الجانبية و من دون إستخدام أي إضافات، وإنما عبر إضافة الأكواد المناسبة لملف الستايل وملف القائمة الجانبية – sidebar.php.

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

كل ما عليك القيام به هو إضافة الأكواد المناسبة لملف الستايل style.css وملف القائمة الجانبية sidebar.php كما ذكرت:

1- إذهب إلى قسم القائمة الجانبية في ملف الستايل style.css و أضف أو عدّل الكود التالي (حسب القالب الذي تستخمه):

.sidebar_box .img_ads
{
 float: right;
 text-align:center;
}
.sidebar_box .img_ads img {
 border-width: 0px;
 margin: 0px 5px 5px 0px;
 padding: 0px;
}

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

2- إذهب الآن إلى ملف sidebar.php وفي أعلى الصفحة – أي قبل كل شيئ آخر – ضع الكود التالي:

<div id="sidebar">
<div id="sidebar_box">
<h3 id="toc-">إعلانات</h3>
<div class="img_ads">
<div> <a href="http://www.xyz1.zyx/"></a>
<a href="http://www.xyz1.zyx/"></a>
<a href="http://www.xyz1.zyx/"></a>
<a href="http://www.xyz1.zyx/"></a>
</div>
</div>
</div>

لنلقي نظرة على هذا الكود: كما تلاحظ، قمنا أولاً بتعريف الكلاس الخاص بكود الإعلانات ووضعنا العنوان “إعلانات”. لاحظ أنك قد تستخدم نوع خط آخر وبالتالي دالة مختلفة. إستخدم ما تستخدمه أنت في قالبك.

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

هذا كل شيئ. أتمنى ان يكون الكود واضح وأن لا تتردد في السؤال إذا إحتجت أية مساعدة.

هل أعجبتك هذه التدوينة؟ يمكنك أن تشترك في خدمة الخلاصات (RSS) أو في النشرة البريدية لتحصل على آخر التدوينات أولاً بأول. الرجاء عدم النقل أو النسخ أو إعادة النشر.

الأوسمة: برمجة و تطوير, ووردبريس

تعريب ملفات ووردبريس: الدرس الرابع – Sidebar.php

ووردبرس بالعربي — Wed, 05 Aug 2009 10:29:12 +0000

هذا هو الدرس الرابع من سلسلة تعريب ملفات ووردبرس. وقد شرحت لك في الدرس الأول كيف تقوم بتعريب ملف الهيدر header.php. أما الدرس الثاني فكان حول ثاني أهم ملفات ال php لووردبرس – index.php. أما في الدرس الثالث فقمت بشرح ملف التعليقات comments.php. سأقوم في هذا الدرس شرح طريقة تعريب ملف sidebar.php. وكما هو الحال مع الملفات الأخرى، تختلف محتويات هذا الملف بإختلاف القالب. ولهذا، وكما قلت، سأعتمد في شرحي على نظرة عامة لدور ومحتويات كل ملف. الهدف هو شرح التقنية المستخدمة بطريقة سهلة تسمح لك بتعديل هذه الملفات لما يناسبك.

ملف sidebar.php هو الملف الخاص بالقائمة الجانبية ومحتوياتها.

يبدأ الملف عادة بالجملة الشرطية التالية (لاحظ أني وضعت أكثر من فاصلة علوية):

 if ( !function_exists(''dynamic_sidebar'')
|| !dynamic_sidebar(1) ) : ?>

هذه الجملة تقول: إذا كان هناك مربعات وجدت في القائمة الجانبية (أنظر هذه التدوينة لمزيد من التفاصيل) فأعرضها، وإلا أعرض ما يلي…

أما ما يأتي بعد هذا الشرط فهو يختلف بحسب القالب.

أنظر المثال المعّرب التالي وأدرسه. ستلاحظ الكثير من الأشياء المشابهة لقالبك.

تحميل المثال

الأوسمة: تعريب القوالب, ووردبريس

تعريب ملفات ووردبريس: الدرس الثالث – Comments.php

ووردبرس بالعربي — Sat, 25 Jul 2009 12:30:21 +0000

هذا هو الدرس الثالث من سلسلة تعريب ملفات ووردبرس. وقد شرحت لك في الدرس الأول كيف تقوم بتعريب ملف الهيدر header.php. أما الدرس الثاني فكان حول ثاني أهم ملفات ال php لووردبرس – index.php. سأقوم في هذا الدرس شرح طريقة تعريب ملف التعليقات comments.php. وكما هو الحال مع الملفين الأولين، تختلف محتويات هذا الملف بإختلاف القالب. ولهذا، وكما قلت، سأعتمد في شرحي على نظرة عامة لدور ومحتويات كل ملف. الهدف هو شرح التقنية المستخدمة بطريقة سهلة تسمح لك بتعديل هذه الملفات لما يناسبك.

ملف comments.php هو الملف الخاص بالتعليقات – إستمارة التعليق وطريقة عرض التعليقات ذاتها.

يبدأ الملف عادة بتحديد طريقة عرض عدد التعليقات والتعليمات اللازمة في حالة كانت التدوينات بحاجة إلى كلمة سر أو موافقة المدير من أجل نشرها. كما يمكنك تحديد طريقة عرض صورة المعّلق gravatar أو إذا كان التعليق غير مسموح (في حالة كانت صفحة بدل تدوينة مثلاً).

بعد ذلك يحدد الملف إذا كان المعلق قد سجّل الدخول من أجل التعليق (إذا كان يحتاج ذلك) ويحدد خانات إستمارة التعليق وخصائصها كالحجم والموقع إلخ.. عبر الدوّال المخصصة في ملف الستايل style.css.

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

تحميل المثال

الأوسمة: تعريب القوالب, ووردبريس

تعريب ملفات ووردبرس: الدرس الثاني – index.php

ووردبرس بالعربي — Fri, 12 Jun 2009 14:29:06 +0000

هذا هو الدرس الثاني من سلسلة تعريب ملفات ووردبرس. وقد شرحت لك في الدرس الأول كيف تقوم بتعريب ملف الهيدر header.php. سأقوم في هذا الدرس شرح طريقة تعريب ثاني أهم ملفات ال php لووردبرس – index.php. وكما هو الحال مع ملف الهيدر، تختلف محتويات هذا الملف بإختلاف القالب. ولهذا، وكما قلت، سأعتمد في شرحي على نظرة عامة لدور ومحتويات كل ملف. الهدف هو شرح التقنية المستخدمة بطريقة سهلة تسمح لك بتعديل هذه الملفات لما يناسبك.

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

محتوى ملف index.php

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

1-دوّال (جمع دالة) لمحتويات الصفحة الأخرى (مثل الهدر والقائمة الجانبية)

2- الحلقة أو Loop باللغة الإنجليزية ومهمتها إخراج وعرض التدوينات من قائمة البيانات

3- جملة “If” الشّرطية

لنعالج هذه المحتويات بالتفصيل:

1- دوّال المحتويات الأخرى

يبدأ كل ملف index.php بالدالة التالية:

 get_header(); ?>

سطر الكود هذا يقوم بإخراج جميع المعلومات الموجودة في ملف header.php التابع لمدونتك ويعرضها. من دون هذا السطر فإن موقعك لن يعرض إسم المدونة أو الوصف الذي تستخدمه ولن يتبع الألوان والخلفيات كما هو محدد في ملف التصميم style.css.

لاحظ أيضاً أن كل ملف ينتهي كالتالي:

‭‬
 get_sidebar(); ?>      
 get_footer(); ?>
‭‬

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

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

أو التصنيفات أو عرض بقائمة أفقية للصفحات. مثلاً قد تجد كود كالتالي:

<div class="nav">
<ul>
......
ul>
div>

إلا إذا إحتوى الكود على كلمات نصية أو كنت تعرف ماذا تعمل فأنا أنصحك بتركها كما هي.

2- الحلقة أو Loop

ثم يحتوي هذا الملف عادة على ما سأسميه “الحلقة” – Loop. هذا الكود مسؤول عن عرض جميع التدوينات أن وجدت.

إذا كنت من مستخدمي ووردبرس فلا بد أنك لاحظت أن الكثير من الإضافات والأكواد تعطيك تعليمات يجب وضعها داخل ال loop أو خارجها. المقصود هو أكواد هذه “الحلقة” التي سأشرحها هنا. وبالتالي فإن فهم الكود هذا أمر حيوي لفهم تعريب القوالب وتصميمها، لذا أنصحك بالتركيز والمتابعة!

في الحقيقة هناك عدة طرق أو أكواد يمكنك إستخدامها ولكني سأشرح الأكثر إستخداماً. لنأحذ الكود المستخدم في تصميمنا – وهو الأكثر إستعمالاً:

 while (have_posts()) : the_post(); ?>

وبعد عدة أسطر، ستجد الكود التالي الذي ينهي الحلقة:

 endwhile; ?>

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

في العادة، هناك خمسة خصائص على الأكثر يتم عرضها في الصفحة الرئيسية:

- تاريخ التدوينة (أنظر المثال أو راجع هذه التدوينة)

- خدمة “إقرأ المزيد” (أنظر المثال)

- عدد التعليقات (أنظر المثال)

- التصنيفات / الأوسمة (أنظر المثال)

3- جملة “if” الشّرطية

لاحظ أن هذه الحلقة تأتي داخل ومباشرة تحت ما يعرف بجملة if الشّرطية. هذه الجملة تعمل كالأتي: إذا (شيئ ما) –> (إفعل هذا) –> وإلّا (إفعل هذا).

بكلمات أخرى، يسأل هذا الكود ووردبرس: “هل هناك تدوينات”؟ إذا نعم إفعل الحلقة (loop) وإذا لا:

‭
<h2‭ ‬class‭="‬center‭">Not Found‭‬h2‭>‬
<p class‭="‬center‭">‬Sorry‭, ‬but you are looking for something that is not here‭.‬p‭>‬
‬

حيث يعلن لك وجود خطأ “غير موجود”. عليك بالطبع تعريب كلمات الخطأ هذه.

لاحظ أخيراً أن هذا الوسم مثل “الحلقة” كما له بداية له نهاية:

 endif; ?>

مثال توضيحي

لنقوم الآن بتعريب هذا الملف. سأستخدم مثال الكود التالي…

تحميل المثال

الأوسمة: برمجة و تطوير, تعريب القوالب, ووردبريس

تعريب ملفات ووردبريس: الدرس الأول – header.php

ووردبرس بالعربي — Tue, 09 Jun 2009 09:48:21 +0000

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

المحتويات

الملف الذي سنتحدث عنه في هذه التدوينة هو ملف أعلى الصفحة أو الهيدر header.php. ولكن قبل أن نبدأ دعنا نتأمل التصميم العام لمدونات ووردبريس. أنظر الصورة التالية:

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

مقدمة لا بد منها

قبل أن نبدأ “باللعب” في ملفات ال php، من الضروري أن تفهم بعض الأمور الأساسية: لغة ال php تحتوي على تعليمات لإستخدام المواد المحفوظة في قاعدة البيانات MySQL. كل ملف يبدأ بوسم بداية ال php وينتهي بدوسم النهاية. ما بين هذين الوسمين تتواجد تعليمات طلب المواد من قاعدة البيانات التي تود عرضها:

حيث:

هي وسم البداية، و:

?>

هي وسم النهاية. أما:

get_info()

فهي “الدالة” الخاصة بالمحتوى الذي تريد عرضه. بالطبع يختلف المحتوى بإختلاف الدالة هذه.

محتوى ملف header.php

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

في كل ملف header.php لا بد وأن تجد المعلومات التالية:

1- عنوان مدونتك

2- موقع ملف التصميم

3- مسار مدونتك (URL)

4- وصف مدونتك (tagline/description)

جميع هذه المعلومات محتوية في الكلاس ;( )bloginfo… ولكن ما يحدد المعلومة أو المحتوى الذي تريد إستخراجه من قاعدة البيانات هو الدالة التي تأتي بين أقواس الكلاس هذا. في العادة، المعلومات التي يحتويها هذا الكلاس هي نفس المعلومات الموجودة في صفحة القسم “عام” في قائمة الإعدادات. يمكنك إستخراجها بإستخدام الدوّال (جمع دالة!) التالية (لاحظ أني لم أظهر الفواصل العلوية- ضع واحدة على كل جهة للكلمة داخل الأقواس):

عنوان المدونة وصف المدونة المسار ملف التصميم خدمة الخلاصات مجلد التصميم

مثال توضيحي

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

تحميل المثال

الأوسمة: برمجة و تطوير, تعريب القوالب, ووردبريس