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

تلميحات تطوير الويب ( 1 | 2 ) 3

7/ استخدم FeedBurner للزوار في موقعك أفضل من RSS الخاص بموقعك!

طبعاً لا أخفيكم بأنه أخترق السيرفر اللي على مدونتي الشخصيه وحذفت قاعدة البيانات كامله , لكن صراحه FeedBurner و RSS أفادني كثير, اولاً رجعت جميع مواضيعي من Google Reader وفي دومين جديد http://www.althari.ws طيب بتقولي وش دخل FeedBurner انا غيرت الدومين إلى althari.ws بعدها تحسفت عندي ناس مسجله بالـ RSS قلت مالها داعي اعطيهم رابط ثاني وينعاد من جديد يسجلون فيه , لكن اكتشفت اني ما حطيت الـ RSS لزوار موقعي الا الخاص بـ FeedBurner اللي هو هذا http://feeds.feedburner.com/althari بعدما غيرت الدومين قدرت اني ادخل لوحة تحكم FeedBurner واغير الدومين الخاص بالـ RSS من althari.com إلى althari.ws !!! وبكذا كل اللي مشاركين بالآر اس اس ما راح يلاحظون اي شي ولا راح يحتاج انهم يشاركون مره ثانيه , فلو اني مستخدم الآر اس اس الخاص بموقعي مثل كذا http://www.althari.com/?feed=rss2 وخليت الزوار يشاركون عن طريقه فاذا غيرت الدومين لا قدر الله مثل ما صار لي راح يضطرون كل اللي مشاركين قبل انهم يشاركون من جديد لأن الدومين القديم وقف , فسارع وشارك الأن وأستفد من خدمات FeedBurner الأن , طبعاً هناك العديد من المميزات لـ FeedBurner وهي عرض المشاركين في الـ RSS لديك مثل ما هو موجود في عالم التقنية , ما شاء الله أكثر من 1000 قارئ (في الوقت الحالي) لا تنسى أخي القارئ المشاركة في الـ RSS

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

وللتسجيل في FeedBurner من هنا

8/ حمل ملفاتك بسرعه ومن دون ان تغادر المتصفح بإضافة FireFTP

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

الأن نأتيكم بإضافه قويه جداً وهي إضافه انا استخدمها من مده طويله جداً وهي عباره عن إضافة لبرنامج FTP اسمه FireFTP وهذا البرنامج يتميز بسرعه عالييييه في الأداء , وكذالك بخفته وجودته , ويتميز بأنه لا يجعلك تغادر المتصفح والبرنامج يعرضه لك كأنها صفحة ويب, وفيه تصنيفات للمواقع التي تضيفها مثل ( مواقع شخصية , مواقع العملاء , مواقع الأصدقاء , مواقع الشركات …. الخ ) وفي كل تصنيف توجد حسابات الـ FTP … ادعك لتكتشفه وتجرب استخدمه واعتقد انها لن تكون التجربة الأخيرة

حمله من هنا الأن

9/ كيف تجعل الأقسام لمدونة Wordpress في قائمة منسدله خاصه بتصميم خاص بك

هذه التلميحة خاصه للأخ الغالي sebastian989 حيث طلبها مني في تلميحات الأسبوع السابق, وسأنفذ طلبها وان شاء الله يستفيد منها الجميع ,

قبل و بعد مرور الفأرة على التصنيفات ( كقائمة منسدله بتصميمك الخاص )

لعمل قائمه منسدله وذالك "اتوماتيكياً" هذه نقطه مهمه جداً فأتوماتيكياً تعني أنه عندما تضيف او تحذف أصناف من التصنيفات فستتأثر القائمه دون التعديل فيها مباشره

بسم الله نبدأ , طبعاً سنستخدم مكتبة JQuery لعمل هذه القائمه لسهولة عملها والوصول إلى العناصر التي نريد جعلها كقائمة منسدلة

بعد تحميل مكتبة JQuery نضعها في مجلد القالب مباشره wp-content/themes/HereIsTemplate/jquery-1.2.6.min.js

 نذهب في قالبنا إلى header.php الجزء العلوي من المدونة ثم نضيف داخل وسم head التالي :

<script src="<?php bloginfo(‘stylesheet_directory’); ?>/jquery-1.2.6.min.js" type="text/javascript"></script>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.2.6/jquery.min.js"></script>
<script type="text/javascript">
var timeout    = 500;
var closetimer = 0;
var ddmenuitem = 0;

function ddmenu_open()
{  ddmenu_canceltimer();
   ddmenu_close();
   ddmenuitem = $(this).find(‘ul’).css(‘visibility’, ‘visible’);}

function ddmenu_close()
{  if(ddmenuitem) ddmenuitem.css(‘visibility’, ‘hidden’);}

function ddmenu_timer()
{  closetimer = window.setTimeout(ddmenu_close, timeout);}

function ddmenu_canceltimer()
{  if(closetimer)
   {  window.clearTimeout(closetimer);
      closetimer = null;}}

$(document).ready(function()
{  $(‘.categories’).bind(‘mouseover’, ddmenu_open)
   $(‘.categories’).bind(‘mouseout’,  ddmenu_timer)});

document.onclick = ddmenu_close;

</script>

لقد قمت بتعديل الأسطر السابقة بوضع شخط واستخدمت ملف JQuery من موقع Google وذالك لعمل أفضل طريقه لإستدعاء ملف مكتبة JQuery إستناداً على هذه المقالة

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

<?php wp_list_categories(‘show_count=0&title_li=<a href="#">التصنيفات</a>’); ?>

مهم جداً ان يكون الكود داخل وسم <ul> إذا لم يكن الكود داخل وسم <ul> يرجى إضافتها كالتالي

<ul><?php wp_list_categories(‘show_count=0&title_li=<a href="#">التصنيفات</a>’); ?></ul>

إذا كانت داخل وسم ul مسبقاً تأكد بأن الوسم السابق ul في ملف الستايل style.css او rtl.css يتحوي على margin:0px و padding:0px او يمكنك جعله هكذا وستكون القائمه فيها مسافات

الأن إذهب إلى ملف الستايل style.css وأضف في نهايته

    .categories
    {    float: right;
        list-style: none;
        font: 12px Tahoma, Arial}

    .categories a
    {    display: block;
        background: #20548E;
        padding: 5px 12px;
        text-decoration: none;
        border-right: 1px solid white;
        width: 100px;
        color: #EAFFED;
        white-space: nowrap}

    .categories a:hover
    {    background: #1A4473}

        .categories ul
        {    margin: 0;
            padding: 0;
            position: absolute;
            visibility: hidden;
            border-top: 1px solid white}

        .categories ul li
        {    float: none;
            display: inline}

        .categories ul li a
        {    width:100px;
            background: #9F1B1B}

        .categories ul li a:hover
        {    background: #7F1616}

ومبروك عليك القائمه المنسدله والان يمكنك تحريرها على كيفك بجعل لها خلفيه صوره جميله سواء لعنوان القائمه او عناصر القائمه