تلميحات تطوير الويب 8

تلميحات تطوير الويب ( 1 | 2 | 3 | 4 | 5 | 6 | 7 ) 8

بمناسبة مرور شهرين على تلميحات تطوير الويب وقبول العديد عليها والحمد لله تم تغيير شعار التلميحات إلى شعار جديد , أرجوا أن ينال على إعجابكم

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

18/ طريقة إختبار موقعك في متصفح إكسبلورر بالإصدار الخامس والسادس والسابع باستخدام أداة IETester الرائعة

19/ طريقة إضافة أماكن ومواقع مربعات القوائم الجانبية في ووردبريس Wordpress Widget Positions

20/ إضافات شيقة لمربعات القوائم الجانبية في ووردبريس Wordpress Widget

    – إضافة أكواد PHP في مربعات القائمة الجانبية الدينماكية
    – التحكم بعرض روابط الصفحات بمرونة عالية وبعدة قوائم مختلفة في مربعات القائمة الجانبية الدينماكية
    – نفس اللي قبلها لكن التحكم في روابط الروابط وليس روابط الصفحات

نبدأ بسم الله بأول التلميحات :

18/ طريقة إختبار موقعك في متصفح إكسبلورر بالإصدار الخامس والسادس والسابع والثامن باستخدام أداة IETester الرائعة

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

عموماً يمكنك مشاهدة صورة من البرنامج هنا :

ويمكنك تحميل IE Tester من هنا وهي أداة مجانية

وأحب أشكر أخوي وصديقي المبدع نعيم صاحب موقع CSSbit.com و CSSGuy.net لأنه هو الذي دلاني عليها

19/ طريقة إضافة أماكن ومواقع مربعات القوائم الجانبية في ووردبريس Wordpress Widget Positions

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

هذا مثال بسيط يوضح عملية توزيع القوائم الجانببية :

هل ستحتاج لمثل هذا النوع من ترتيب أو توزيع القوائم الجانبية عند تطوير مواقع الويب ؟ نعم وبكل تأكيد

كيف سيتم إستخدامها ؟ شاهد المثال التالي في موقعي الشخصي http://www.althari.ws في صندوق الـ Dashboard الذي يقع في القائمة الجانبية العلوية تحت الهيدر مباشرة

هذا بالنسبة للقائمة الجانبية فيمكنك إضافة فيها آخر المقالات آخر التعليقات الأكثر زياره او حسب ما تراه مناسب

طيب والقائمة الجانبية الرئيسية ؟ هذه بإمكانك وضعها لعرض الإعلانات أو مقدمه للموقع ;) .. ألخ

طيب بالنسبة للقائمة الجانبية السفلية ! وش بتسوي فيها شاهد هذا الموقع وكيف استغل القائمة السفلية بذكاء http://csstricks.com

عموماً نبدأ في توزيع القوائم , لمعرفة طريقة توزيع أماكن القوائم الجانبية افتح ملف خصائص القالب (functions.php)

مباشرة راح تجد

if ( function_exists('register_sidebar') )
    register_sidebar(array(
        'before_widget' => '<li id="%1$s" class="widget %2$s">',
        'after_widget' => '</li>',
        'before_title' => '<h2 class="widgettitle">',
        'after_title' => '</h2>',
));

حيث أن الدالة register_sidebar هي دالة تقوم بتسجيل قائمة جانبية فكل مره تقوم بإضافتها تقوم بتسجيل قائمة جانبية فلذالك إذا كانت موجوده مره واحده فسيكون لديك قائمه جانبيه واحده فقط في مربعات القائمة الجانبية :

وتحتوي الدالة على الخصائص التالية :

• before_widget
  هنا يوضع اي شي قبل القائمه مثلاً وسم بداية القائمة <li> وأي شي زياده تريده
• after_widget
  هنا يوضع اي شي بعد القائمة مثلاً تسكيرة الوسم الذي في قبل بداية القائمة </li> او أي شي زياده كذالك
• before_title
  هنا يوضع في قبل بداية عنوان القائمة مثلاً <h2>
• after_title
  هنا يوضع اي شي بعد عنوان القائمة مثلاً التسكيرة </h2>

فإذا أردنا زيادة القائمة الجانبية كاتالي :

if ( function_exists('register_sidebar') ) {
    register_sidebar(array(
        'before_widget' => '<li id="%1$s" class="widget %2$s">',
        'after_widget' => '</li>',
        'before_title' => '<h2 class="widgettitle">',
        'after_title' => '</h2>',
    ));
    register_sidebar(array(
         'before_widget' => '<li id="%1$s" class="widget %2$s">',
         'after_widget' => '</li>',
         'before_title' => '<h2 class="widgettitle">',
         'after_title' => '</h2>',
     ));
 }

طبعاً راح يكون عندك قائمة جانبية أخرى كالتالي ( القائمة الجانبية 2 ) :

طيب لو تبغى تسميهم عشان تكون أوضح لك ولغيرك مثلاً نبي نغير اسم القائمة الجانبية 1 إلى القائمة الجانبية اليمنى والقائمة الجانبية 2 إلى القائمة الجانبية اليسرى

وذالك كالتالي :

if ( function_exists('register_sidebar') ) {
    register_sidebar(array(
        'name' => 'القائمة الجانبية اليمنى',
        'before_widget' => '<li id="%1$s" class="widget %2$s">',
        'after_widget' => '</li>',
        'before_title' => '<h2 class="widgettitle">',
        'after_title' => '</h2>',
    ));
    register_sidebar(array(
        'name' => 'القائمة الجانبية اليسرى',
        'before_widget' => '<li id="%1$s" class="widget %2$s">',
        'after_widget' => '</li>',
        'before_title' => '<h2 class="widgettitle">',
        'after_title' => '</h2>',
    ));
}

لتكون صفحة مربعات القائمة الجانبية كالتالي :

الحين نكمل نضيف باقي القوائم الجانبية ( القائمة الجانبية العلوية ) ( القائمة الجانبية السفلية ) ( القائمة الجانبية الرئيسية )

if ( function_exists('register_sidebar') ) {
    register_sidebar(array(
        'name' => 'القائمة الجانبية اليمنى',
        'before_widget' => '<li id="%1$s" class="widget %2$s">',
        'after_widget' => '</li>',
        'before_title' => '<h2 class="widgettitle">',
        'after_title' => '</h2>',
    ));
    register_sidebar(array(
        'name' => 'القائمة الجانبية اليسرى',
        'before_widget' => '<li id="%1$s" class="widget %2$s">',
        'after_widget' => '</li>',
        'before_title' => '<h2 class="widgettitle">',
        'after_title' => '</h2>',
    ));
    register_sidebar(array(
         'name' => 'القائمة الجانبية العلوية',
         'before_widget' => '<li id="%1$s" class="widget %2$s">',
         'after_widget' => '</li>',
         'before_title' => '<h2 class="widgettitle">',
         'after_title' => '</h2>',
     ));
     register_sidebar(array(
         'name' => 'القائمة الجانبية السفلية',
         'before_widget' => '<li id="%1$s" class="widget %2$s">',
         'after_widget' => '</li>',
         'before_title' => '<h2 class="widgettitle">',
         'after_title' => '</h2>',
     ));
     register_sidebar(array(
         'name' => 'القائمة الجانبية الرئيسية',
         'before_widget' => '<li id="%1$s" class="widget %2$s">',
         'after_widget' => '</li>',
         'before_title' => '<h2 class="widgettitle">',
         'after_title' => '</h2>',
     ));
}

الأن أضفنا القوائم لكن ماذا عن توزيع أماكنهم في الموقع أو المدونة ؟

نذهب إلى المكان الذي سنضع فيه أول مكان للقوائم مثلاً ( القائمة الجانبية اليسرى ) نذهب إلى sidebar.php

 ثم نضيف في المكان الذي نريد وضع القائمة الجانبية اليسرى بكل سهوله كالتالي :

<?php if (function_exists('dynamic_sidebar')) dynamic_sidebar('القائمة الجانبية اليسرى'); ?>

 حيث يمكنك بهذا الكود وضع مكان وموقع أي مربعات دينماكيه باستدعاء اسمه مثل ‘القائمة الجانبية العلوية’ او باستخدام الآي دي الخاص به حيث انه يبدأ الآي دي من أول قائمه برقم 1 ثم 2 ثم 3 فمثلاً لو أردنا استدعاء القائمة الجانبية اليسرى نكتب التالي :

<?php if (function_exists('dynamic_sidebar')) dynamic_sidebar(2); ?>

 تمام ؟ خلااص خلصنا

20/ إضافات قوائم شيقه للوردبريس

1- PHP Code Widget

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

لتحميل إضافة PHP Code Widget من هنا

2- Flexi Page Widget

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

الدروس

• الدرس الأول
• الدرس الثاني
• الدرس الثالث

ومن ثم قائمة أخرى في مكان آخر مختلف …

القائمة الرئيسية

• من نحن
• خدماتنا
• اتصل بنا

مثال لاستخدامها :

لتحميل إضافة Flexi Page Widget من هنا

3- Multiple Blogroll Widget

هذه الإضافة نفس عمل الإضافة التي قبلها لكن لتوزيع الروابط وليس الصفحات

ويمكنك تحميل إضافة Multiple Blogroll Widget من هنا

اطيب تحياتي