أكمل قراءة التدوينة »

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

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

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

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

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

<?php bloginfo(′name′); >

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

<img alt="<?php bloginfo(′name′); ?>" src="<?php bloginfo(′stylesheet_directory′); ?>/images/logo.png" />

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

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

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

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

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

حقوق النشر محفوظة © 2009
]]> http://wordpressinarabic.com/2009/11/19/replace-gheader-with-pic/feed/ 11 http://wordpressinarabic.com/2009/11/09/replace-header-css/ http://wordpressinarabic.com/2009/11/09/replace-header-css/#comments Mon, 09 Nov 2009 18:42:24 +0000 ووردبرس بالعربي http://wordpressinarabic.com/?p=4248

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

أكمل قراءة التدوينة »

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

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

حقوق النشر محفوظة © 2009
]]>

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

مما يساهم في تسهيل تعريب العنوان أنه دائماً يكون من نوعين لا ثالث لهما: إما صورة أو نص “تكست”. لذلك أول شيئ عليك أن تقوم به هو أن تحدد إذا كان “اللوجو” صورة أم نص عادي. لنعالج الآن هذين النوعين بالتفصيل:

إذا كان صورة…

إذا كان صورة فلا بد من وجود رابط لها في ملف التصميم.  تعرّف على إسم رابط الصورة.. إبحث عنه.. عادة ما يكون في أول ملف الستايل. إن لم تجده فلا بد أن يكون في ملف header.php أو functions.php. قم الآن بالخطوات التالية:

• إرفع صورة تصميمك إلى مجلد images للقالب
• غيّر رابط الصورة إلى صورتك

بالطبع، الصورة لا زالت على اليسار.. بل قد تجد أنها خرجت عن الصفحة تماماً! لا تقلق! هذا عادة متعلق بالمسار (float , direction) و الفراغات (margin) أو الخانات (padding). ستجد حميع هذه الدوال وخصائصها وقيمها – بما في ذلك رابط الصورة- مندرجة تحت كلاس “اللوجو” في ملف الستايل style.css. أنظر هذه التدوينة حول هذه الأوامر الإنسيابية المهمة.

كما شرحت في التدوينة، قم الآن بالتعديلات التالية:

• غيّر أي كلمة left إلى right
• أضف

 direction:rtl;

• إستبدل حواشي وفراغات جهة اليسار بجهة اليمين كما هو موضح في الصورة التالية:

© عبدالملك الثاري – عالم التقنية

هذه هي الفكرة الرئيسية. إفحص نتائج التعديلات هذه و عدّلها كما يناسب قالبك. أنظر المثال التالي:

إذا كان نص…

أما إذا كان العنوان هو عبارة عن نص فستجد في ملف ال css خصائص الخطوط مثل h1 و h2 كما قد يكون هناك كلاس خاص بجملة ” الوصف” description التي عادة ما تأتي تحت العنوان مباشرة. إستبدل الخطوط والأحجام لما يناسبك.

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

يمكنك كذلك أن تستبدل نص العنوان بصورة عبر إضافة رابطها. أنظر هذه التدوينة لمزيد من التفاصيل.

أنظر المثال التالي:

لمزيد من التفاصيل، راجع التدوينات التالية:

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

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

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

حقوق النشر محفوظة © 2009
]]> http://wordpressinarabic.com/2009/11/09/replace-header-css/feed/ 8 http://wordpressinarabic.com/2009/10/10/feature-me/ http://wordpressinarabic.com/2009/10/10/feature-me/#comments Sat, 10 Oct 2009 09:00:00 +0000 ووردبرس بالعربي http://wordpressinarabic.com/?p=3801

سألني أحد القراء عن إضافة FeatureMe التي أستخدمها في قالب BlueMania. تسمح لك هذه الإضافة بعرض “التدوينات المميّزة” أو “أهم المواضيع” على شكل شاشة دينماكية متحركة. أنظر الصورة أعلاه أو أعلى الصفحة في هذا القالب للمعاينة. بالطبع، هنا أنا أستخدمها في ضمن إطار خاص بالقالب ولكنك تستطيع إستخدامها على حدة. سأشرح لك في هذه التدوينة كيف تقوم بذلك بالضبط.

أكمل قراءة التدوينة »

الأوسمة: إضافات معرّبة, برمجة و تطوير

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

حقوق النشر محفوظة © 2009
]]>

سألني أحد القراء عن إضافة FeatureMe التي أستخدمها في قالب BlueMania. تسمح لك هذه الإضافة بعرض “التدوينات المميّزة” أو “أهم المواضيع” على شكل شاشة دينماكية متحركة. أنظر الصورة أعلاه أو أعلى الصفحة في هذا القالب للمعاينة. بالطبع، هنا أنا أستخدمها في ضمن إطار خاص بالقالب ولكنك تستطيع إستخدامها على حدة. سأشرح لك في هذه التدوينة كيف تقوم بذلك بالضبط.

إضافة FeatureMe

هدف الإضافة

عرض شاشة متحركة بالتدوينات المميّزة.

مثال حيّ

أنظر أعلى الصفحة في هذا القالب.

تعريب

لا تحناج. هذه إضافة بسيطة جداً.

طريقة العمل

1- حمّل الإضافة واستخرج محتواها

2- إرفع مجلد الإضافة إلى مجلد wp-content>plugins بإستخدام برنامج FTP (لمزيد من التفاصيل راجع تدوينتي هذه)

3- إذهب إلى قسم الإضافات (Plugins) في لوحة التحكم وقم بتفعيلها (Activate)

4- إذهب إلى صفحة التدوين في محرر ووردبرس وأضف تدوينة

• إذهب إلى قسم الخصائص الإضافية وقم بصنع خاصية إسمها thumbnail وقيمتها تساوي مسار الصورة الخاصة بالتدوينة على موقعك.
• أنقر على أو إختار مربع “This is a cool entry, feature it” في أسفل صفحة محرر التدوينة.

<?php show_featured_posts([max_posts]); ?>

حيث max_posts تساوي عدد التدوينات المميّزة التي تريد عرضها.

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

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

الأوسمة: إضافات معرّبة, برمجة و تطوير

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

حقوق النشر محفوظة © 2009
]]> http://wordpressinarabic.com/2009/10/10/feature-me/feed/ 28 http://wordpressinarabic.com/2009/09/22/ie6-nomore/ http://wordpressinarabic.com/2009/09/22/ie6-nomore/#comments Tue, 22 Sep 2009 13:20:33 +0000 ووردبرس بالعربي http://wordpressinarabic.com/?p=3579

لا زال العديد من روّاد الإنترنت العرب يستخدمون متصفح إنترنت إكسبلورر 6 الغبي رغم أن النسخة 8 قد صدرت حديثاً! فعلى سبيل المثال 7% من زوار ووردبرس بالعربي يستخدمون هذا المتصفح العتيق. وبالرغم من أن معظم المدونون والمبرمجون يعرفون عن قرب مدى تعاسة هذا المتصفح مقارنة مع المتصفحات الأخرى مثل فايرفوكس الذي يطالبون بإستخدامه، إلا أني أرى أنه حان الوقت لنوصل هذه الرسالة إلى جميع الزوّار وبقوة أكبر. وخلال تصفحي لبعض مواقع التصميم الإنجليزية وجدت موقع ie6nomore الذي يطالب بالتوقف عن إستخدام متصفح IE6 ويوفر كود خاص لحث الزوار منذ دخولهم الموقع إلى إستخدام متصفح آخر أو الترقية إلى IE8.

أكمل قراءة التدوينة »

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

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

حقوق النشر محفوظة © 2009
]]>

لا زال العديد من روّاد الإنترنت العرب يستخدمون متصفح إنترنت إكسبلورر 6 الغبي رغم أن النسخة 8 قد صدرت حديثاً! فعلى سبيل المثال 7% من زوار ووردبرس بالعربي يستخدمون هذا المتصفح العتيق. وبالرغم من أن معظم المدونون والمبرمجون يعرفون عن قرب مدى تعاسة هذا المتصفح مقارنة مع المتصفحات الأخرى مثل فايرفوكس الذي يطالبون بإستخدامه، إلا أني أرى أنه حان الوقت لنوصل هذه الرسالة إلى جميع الزوّار وبقوة أكبر. وخلال تصفحي لبعض مواقع التصميم الإنجليزية وجدت موقع ie6nomore الذي يطالب بالتوقف عن إستخدام متصفح IE6 ويوفر كود خاص لحث الزوار منذ دخولهم الموقع إلى إستخدام متصفح آخر أو الترقية إلى IE8.

الكود بسيط جداً وقد قمت بتعريبه. كل ما عليك القيام به هو وضع هذا الكود في ملف header.php للقالب الذي تستخدمه. تأكد من وضع الكود قبل دالة ووردبرس للهيدر (لا تنسخ فقط! لاحظ أني وضعت أكثر من فاصلة علوية – ضع واحدة فقط):

 <!--[if lt IE 7]>
  <div style=''border: 1px solid #F7941D; background: #FEEFDA; text-align: center; clear: both; height: 75px; position: relative;''>
    <div style=''position: absolute; right: 3px; top: 3px; font-family: courier new; font-weight: bold;''><a href=''#'' onclick=''javascript:this.parentNode.parentNode.style.display="none"; return false;''><img src=''http://www.ie6nomore.com/files/theme/ie6nomore-cornerx.jpg'' style=''border: none;'' alt=''إغلاق التنبيه''/></a></div>
    <div style=''width: 640px; margin: 0 auto; text-align: right; padding: 0; overflow: hidden; color: black;''>
      <div style=''width: 75px; float: right;''><img src=''http://www.ie6nomore.com/files/theme/ie6nomore-warning.jpg'' alt=''!تنبيه''/></div>
      <div style=''width: 275px; float: right; font-family: tahoma; text-align : right ;	 ''>
        <div style=''font-size: 14px; font-weight: bold; margin-top: 12px;''>!أنت تستخدم متصفح قديم</div>
        <div style=''font-size: 12px; margin-top: 6px; line-height: 15px;''>.لأفضل تصفح، إستخدم متصفح أحدث</div>
      </div>
      <div style=''width: 75px; float: right;''><a href=''http://www.firefox.com'' target=''_blank''><img src=''http://www.ie6nomore.com/files/theme/ie6nomore-firefox.jpg'' style=''border: none;'' alt=''فايرفوكس''/></a></div>
      <div style=''width: 75px; float: right;''><a href=''http://www.browserforthebetter.com/download.html'' target=''_blank''><img src=''http://www.ie6nomore.com/files/theme/ie6nomore-ie8.jpg'' style=''border: none;'' alt=''اكسبلورر 8''/></a></div>
      <div style=''width: 73px; float: right;''><a href=''http://www.apple.com/safari/download/'' target=''_blank''><img src=''http://www.ie6nomore.com/files/theme/ie6nomore-safari.jpg'' style=''border: none;'' alt=''سفاري 4''/></a></div>
      <div style=''float: right;''><a href=''http://www.google.com/chrome'' target=''_blank''><img src=''http://www.ie6nomore.com/files/theme/ie6nomore-chrome.jpg'' style=''border: none;'' alt=''قوقل كروم''/></a></div>
    </div>
  </div>
  <![endif]-->

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

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

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

حقوق النشر محفوظة © 2009
]]> http://wordpressinarabic.com/2009/09/22/ie6-nomore/feed/ 19 http://wordpressinarabic.com/2009/09/08/sidebar-ads-code/ http://wordpressinarabic.com/2009/09/08/sidebar-ads-code/#comments Tue, 08 Sep 2009 16:55:29 +0000 ووردبرس بالعربي http://wordpressinarabic.com/?p=3476

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

أكمل قراءة التدوينة »

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

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

حقوق النشر محفوظة © 2009
]]>

لقد شرحت لك في تدوينة سابقة كيف تعرض الإعلانات المصوّرة (حجم 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>

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

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

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

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

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

حقوق النشر محفوظة © 2009
]]> http://wordpressinarabic.com/2009/09/08/sidebar-ads-code/feed/ 8 http://wordpressinarabic.com/2009/08/31/wp-125/ http://wordpressinarabic.com/2009/08/31/wp-125/#comments Mon, 31 Aug 2009 11:26:43 +0000 ووردبرس بالعربي http://wordpressinarabic.com/?p=3369 تحديث: تم تعريب هذه الإضافة بالكامل. إقرأ الشرح أو حمّلها من أسفل التدوينة.

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

أكمل قراءة التدوينة »

الأوسمة: إضافات معرّبة, برمجة و تطوير

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

حقوق النشر محفوظة © 2009
]]> تحديث: تم تعريب هذه الإضافة بالكامل. إقرأ الشرح أو حمّلها من أسفل التدوينة.

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

إضافة WP125

هدف الإضافة

عرض الإعلانات المصوّرة بحجم 125×125 في القائمة الجانبية.

تعريب

لا تحتاج! هذه إضافة بسيطة جداً.

طريقة العمل

1- حمّل الإضافة (لمزيد من التفاصيل راجع تدوينتي هذه)

2- إذهب إلى قسم الإضافات (Plugins) في لوحة التحكم وقم بتفعيلها (Activate)

3- أضف مربع الودجت الخاص بالإضافة إلى القائمة الجانبية (راجع تدوينتي هذه) أو إستخدم الكود التالي لوضع الإعلانات في أي مكان آخر:

<?php wp125_write_ads(); ?>

4- أولاً إذهب إلى صفحة إعدادات الإضافة في لوحة التحكم:

-  إذهب إلى قسم الإعدادات Settings وقم بتحديد الإعدادات كما هو موضح في الصورة التالية:

لاحظ أنك حددت إستخدام ملف الستايل ال css الخاص بالإضافة. إذا أردت تحديد طريقة عرض الإعلانات بنفسك (الألوان و الفراغات والحواشي…إلخ) إلغي مربع الإختيار هذا.

- إذهب الآن  إلى قسم إضافة الإعلانات Add/Edit وقم بتحديد الإعدادات كما هو موضح في الصورة التالية:

قم بإضافة أي عدد من الصور الذي تريد (حسب ما حددت في قسم الإعدادات). لا تنسى حفظ الإعدادات.

لاحظ أنه بإمكانك إلغاء أو محي الإعلانات يدوياً عبر تحديد الإختيار I ll remove it manually.

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

هذا كل شيئ. أرجو أن تستفيدوا من هذه التدوينة.

الأوسمة: إضافات معرّبة, برمجة و تطوير

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

حقوق النشر محفوظة © 2009
]]> http://wordpressinarabic.com/2009/08/31/wp-125/feed/ 9 http://wordpressinarabic.com/2009/08/27/foooter-links/ http://wordpressinarabic.com/2009/08/27/foooter-links/#comments Thu, 27 Aug 2009 13:54:15 +0000 ووردبرس بالعربي http://wordpressinarabic.com/?p=3316

سأشرح لك في هذه التدوينة كيف تقوم بتعريب و تعديل ملف “الفووتر” footer.php أو أسفل صفحة المدونة.. ووضع ما تبتغي من روابط أو نصوص – مثل نص حقوق الملكية.. إلخ. أنظر في أسفل مدونتي. كما تشاهد، هناك نص حقوق الملكية وهناك روابط لصفحات المدونة الأخرى. لاحظ كذلك أن المعلومات والروابط تأتي في منتصف الصفحة ولها خلفيات سوداء حين تحوم حولها. هذه الأمور – الشكل والخط وما إلى ذلك – هي بالطبع من إختصاص ملف الستايل الذي يُعرّف “الكلاس” أو “الكلاسات” المختصة بأسفل الصفحة. ليس هذا ما يهمنا. ما يهمنا في هذا الدرس هو ملف ال “بي أتش بي” الذي يحدد محتويات و روابط أسفل الصفحة – وليس شكل أو طريقة العرض. بكلمات أخرى، يمكنك أن تعتبر أن هذا هو الدرس الخامس من سلسلة تعريب ملفات ووردبريس.

أكمل قراءة التدوينة »

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

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

حقوق النشر محفوظة © 2009
]]>

سأشرح لك في هذه التدوينة كيف تقوم بتعريب و تعديل ملف “الفووتر” footer.php أو أسفل صفحة المدونة.. ووضع ما تبتغي من روابط أو نصوص – مثل نص حقوق الملكية.. إلخ. أنظر في أسفل مدونتي. كما تشاهد، هناك نص حقوق الملكية وهناك روابط لصفحات المدونة الأخرى. لاحظ كذلك أن المعلومات والروابط تأتي في منتصف الصفحة ولها خلفيات سوداء حين تحوم حولها. هذه الأمور – الشكل والخط وما إلى ذلك – هي بالطبع من إختصاص ملف الستايل الذي يُعرّف “الكلاس” أو “الكلاسات” المختصة بأسفل الصفحة. ليس هذا ما يهمنا. ما يهمنا في هذا الدرس هو ملف ال “بي أتش بي” الذي يحدد محتويات و روابط أسفل الصفحة – وليس شكل أو طريقة العرض. بكلمات أخرى، يمكنك أن تعتبر أن هذا هو الدرس الخامس من سلسلة تعريب ملفات ووردبريس.

لعرض المادة التي تشاهدها في “الفووتر” على هذه المدونة، أستخدم الكود التالي:

</div>
<div id="footer">
<div id="footer_credit">
<a href="http://wordpressinarabic.com/">الرئيسية</a>  ¦
<a href="http://wordpressinarabic.com/premium-ar-themes/">قوالب إحترافية</a> ¦
<a href="http://wordpressinarabic.com/cool-plugins/">إضافات معرّبة</a> ¦
<a href="http://wordpressinarabic.com/archive/">الأرشيف</a> ¦
<a href="http://wordpressinarabic.com/faq/">الأسئلة المتكررة</a> ¦
<a href="http://wordpressinarabic.com/contact/">راسلني</a> ¦
<a href="http://wordpressinarabic.com/about">عنّي</a>
 &copy; 2009 - بعض الحقوق محفوظة. شاهد<a href="http://wordpressinarabic.com/terms-of-use/"> شروط إستخدام الموقع</a>.
</div>
  <?php wp_footer(); ?>
</div>
</body>
</html>

لنلقي الآن نظرة سريعة على هذا الكود. يبدأ ملف footer.php عادة بتسكير <div/> وتعريف القسم الجديد الخاص بأسفل الصفحة. لاحظ كذلك أن كل ملف مثل هذا لا بد وأن يحتوي على دالة ووردبريس للملف:

  <?php wp_footer(); ?>

كما تلاحظ، كود الروابط هو:

   <a href="http://xyzxyz">إسم الرابط</a>

أما إشارة حفظ الحقوق فالكود الخاص بها هو:

©

أخيراً، لاحظ أنه كون هذا الملف هو الأخير عادة فلا بد من تسكير تعليمات ال html كما يلي:

</body>
</html>

أعتقد أن هذا كل شيئ! إذا فهمت هذه التعليمات فإنك تستطيع تعديل وتعريب أسفل الصفحة كما تشاء! بالتوفيق…

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

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

حقوق النشر محفوظة © 2009
]]> http://wordpressinarabic.com/2009/08/27/foooter-links/feed/ 9 http://wordpressinarabic.com/2009/08/02/blockquote/ http://wordpressinarabic.com/2009/08/02/blockquote/#comments Sun, 02 Aug 2009 09:44:22 +0000 ووردبرس بالعربي http://wordpressinarabic.com/?p=2992

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

أكمل قراءة التدوينة »

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

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

حقوق النشر محفوظة © 2009
]]>

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

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

1- تعديل خصائص دالة blockquote

2- تحديد الإقتباس في المحرر

1- تعديل خصائص دالة blockquote

إذهب إلى ملف style.css و عدّل خصائص دالة blockquote (أو أضفها) لتصبح كما يلي: (تأكد من حفظ الملف)

blockquote p‭{‬
color‭:#‬333399‭;‬
background-color‭:#‬F5F8FA‭;‬
width‭: ‬150px‭;‬
‭margin‭: ‬5px 15px 0px 0‭;‬
‭‬padding‭: ‬5px 0‭ ‬0‭ ‬0‭;‬
border-bottom‭:#‬4C739E 3px solid‭;‬
border-top‭:#‬4C739E 3px solid‭;   ‬
‭font-size‭: ‬1.15em‭;‬
‭‬font-weight:strong‭;‬
‭‬text-align‭: ‬center‭;‬
‭float‭: ‬left‭;‬
‭}‬

2- تحديد الإقتباس في المحرر

قم بتحديد الجملة (أو الجمل) التي تريد عرضها كإقتباس عبر تحديدها و النقر على زر الإقتباس في المحرر كما هو موضح في الصورة التالية:

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

هذا كل شيئ! إحفظ التدوينة أو عاينها. ستجد الآن الجملة التي حددتها معروضة كإقتباس.

بالتوفيق، وما عليكم إلا السؤال إن إحتجتم أي مساعدة.

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

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

حقوق النشر محفوظة © 2009
]]> http://wordpressinarabic.com/2009/08/02/blockquote/feed/ 9 http://wordpressinarabic.com/2009/07/01/related-css/ http://wordpressinarabic.com/2009/07/01/related-css/#comments Wed, 01 Jul 2009 16:28:55 +0000 ووردبرس بالعربي http://wordpressinarabic.com/?p=2713 سأشرح في هذه التدوينة كيف تقوم بتعديل ملف الستايل css من أجل عرض التدوينات المتعلقة في أسفل كل تدوينة. بالأخص، سيعلمك هذا الدرس الكود المطلوب لعرض التدوينات المتعلقة بالضبط كما هو على موقع مقطوعات.  بالطبع، سأفترض أنك تقدم هذه الخدمة أصلاً. أما إذا كنت لا توفّر هذه الميّزة لزوارك فأنصحك بإستخدام أحد إضافات ووردبرس المختصة بذلك مثل إضافة WordPress Related Posts التي عرّبتها لك.

أكمل قراءة التدوينة »

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

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

حقوق النشر محفوظة © 2009
]]> سأشرح في هذه التدوينة كيف تقوم بتعديل ملف الستايل css من أجل عرض التدوينات المتعلقة في أسفل كل تدوينة. بالأخص، سيعلمك هذا الدرس الكود المطلوب لعرض التدوينات المتعلقة بالضبط كما هو على موقع مقطوعات.  بالطبع، سأفترض أنك تقدم هذه الخدمة أصلاً. أما إذا كنت لا توفّر هذه الميّزة لزوارك فأنصحك بإستخدام أحد إضافات ووردبرس المختصة بذلك مثل إضافة WordPress Related Posts التي عرّبتها لك.

بالطبع تستطيع إستخدام الكود التالي كما هو، لكن الهدف من هذا المثال هو السماح لك بتعديل الكود في القالب الذي تستخدمه لما يناسبك.

بعد تفعيل الإضافة وتحديد الإعدادات إفتح ملف ال css وأدخل الكود التالي:

.‬related
‭{‬
background‭:#‬F5F8FA‭;‬
background-repeat:repeat‭;‬
border:1px solid‭ #‬467AA7‭;‬
float‭: ‬right‭;‬
margin-bottom‭: ‬22px‭;‬
font-size‭: ‬11px‭;‬
text-align:right‭;‬
width:100%‭;‬
‭}‬

لنلقى نظرة على الكود سطر بسطر:

أولاً نصنع دالة جديدة. حددنا إسم الدالة الجديدة أنه related ثم حددنا لون الخلفية background (وجعلناها ير مكررة). بالطبع يمكنك تغيير هذا اللون لما يناسب قالبك وألوانه. بعد ذلك، قمنا بوضع خط حول مربع اللائحة حجمه 1px وحددنا لونه. ثم قمنا بإستخدام خاصيات float و margin و text-align و font-size من أجل تحديد موقع، حواشي، مسار وحكم الخط (على التوالي). أخيراُ قمنا بتحديد عرض المربع. لمزيد من التوضيح، أنظر الصورة التالية:

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

كل ماعليك القيام به الآن هو التأكد من ربط الدالة مع الإضافة باستخدام الكود التالي في المكان الذي يناسبك (كملف عرض تدوينة منفردة – single.php):

<div class="related">
     <?php wp_related_posts(); ?>
</div>

هذا كل شيئ. يمكنك تحديد طريقة عرض لائحة التدوينات المتعلقة عبر الكود الذي وفرته لك.

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

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

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

حقوق النشر محفوظة © 2009
]]> http://wordpressinarabic.com/2009/07/01/related-css/feed/ 0 http://wordpressinarabic.com/2009/06/19/css-boxes-2/ http://wordpressinarabic.com/2009/06/19/css-boxes-2/#comments Fri, 19 Jun 2009 07:47:17 +0000 ووردبرس بالعربي http://wordpressinarabic.com/?p=2520 لقد سبق أن تحدثت عن مربعات ال css. كما قلت، سأشرح لك في هذا المقال كيف تزيد من جاذبية مدونتك أو موقعك وكيف تثري تجربة زوّارك عن طريق إستخدام المربعات والصور الملائمة. لنفرض مثلاً أنك تريد لفت إنتباه الزائر إلى ملاحظة أو تحذير ما أو لتحميل ملف أو لكود في المدونة. يمكنك أن تستخدم تقنية css وأن تضع هذه الأمور في مربعات خاصة لها، ذات لون معيّن و تحتوي على صور مناسبة. لمزيد من التفاصيل شاهد مثلاً صفحة إضافات معرّبة على هذا الموقع. ستلاحظ في أسفل كل تدوينة مربعان واحد لخدمة التحميل وآخر للترابط. هذه المربعات هي ما أقصد بالضبط.

أكمل قراءة التدوينة »

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

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

حقوق النشر محفوظة © 2009
]]> لقد سبق أن تحدثت عن مربعات ال css. كما قلت، سأشرح لك في هذا المقال كيف تزيد من جاذبية مدونتك أو موقعك وكيف تثري تجربة زوّارك عن طريق إستخدام المربعات والصور الملائمة. لنفرض مثلاً أنك تريد لفت إنتباه الزائر إلى ملاحظة أو تحذير ما أو لتحميل ملف أو لكود في المدونة. يمكنك أن تستخدم تقنية css وأن تضع هذه الأمور في مربعات خاصة لها، ذات لون معيّن و تحتوي على صور مناسبة. لمزيد من التفاصيل شاهد مثلاً صفحة إضافات معرّبة على هذا الموقع. ستلاحظ في أسفل كل تدوينة مربعان واحد لخدمة التحميل وآخر للترابط. هذه المربعات هي ما أقصد بالضبط.

كل ما عليك القيام به هو أن تعطي خصائص المربع (اللون والخلفية والخط .. إلخ) أو أن تصنع دالة جديدة للمربع وتعطيها الخصائص التي تريد. أنظر المثال التالي:

.box {‬
   padding: 12px 40px 12px 3px;
   clear: both;
   width: 100%;
   margin-top: 20px;
   margin-bottom: 30px;
   float:center;
   text-align:justify;
   direction:rtl;
   border: 1px solid #bae2f0;
   font-size: 13px;
   line-height: 17px;
   background-color: #e3f4f9;
   font-weight: 500;
   -moz-border-radius: 10px;
   border-radius: 10px;
 }‬
‬

لعرض هذه المربع عليك أن تضيف إلى التدوينة (في محرر ال html) الكود التالي:

<div class="box">هذا مثال مربع. ضع هنا المعلومات التي تريد. حاول أن تستخدم لون يلائم مدونتك والمعلومة التي تريد أن تعطيها للقارئ. إستخدم كذلك الصور والإيقونات المناسبة</div>

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

background: url(images/icon.png) no-repeat right 1px;

حيث icon.png يساوي إسم الصورة. بالطبع، يجب أن ترفع الصورة إلى مجلد images داخل مجلد القالب.

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

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

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

حقوق النشر محفوظة © 2009
]]> http://wordpressinarabic.com/2009/06/19/css-boxes-2/feed/ 12