معهد دعم اتش فى اى بى اس لحلول الويب - Powered by vBulletin


 
 
صفحة 3 من 3 الأولىالأولى 123
النتائج 21 إلى 28 من 28

الموضوع: كيف تصمم قالبا للوردبريس من نقطة الصفر

  1. #21
    أدارى
    الصورة الرمزية HVIPS4


    تاريخ التسجيل: Jun 2011
    رقم العضوية: 6
    الدولة: Cairo
    المشاركات: 1,979
    HVIPS4 غير متواجد حالياً

    رد: كيف تصمم قالبا للوردبريس من نقطة الصفر


    اليوم سنبدأ بجسم المدونة :

    افتح ملفي index.php – style.css واتركهما مفتوحين :

    في ملف index.php و بعد الكود :


    كود:
    </head>
    نكتب التالي :

    كود:
    <!-- ملاحظات المصمم - جسم المدونة --> <body>
    البودي هنا معناها كل ما سيظهر في المتصفح ... من مكونات .

    وبما اننا فتحنا ال <body> فعلينا اذا تعريف شكله ومميزاته في ملف style.css

    نفتح ملف style.css ونضيف فيه التالي :

    كود:
    body { text-align: center; background: url(images/body.gif); margin: 0px 0px 10px 0px; direction: rtl; }
    لقد حددنا للبودي التالي :

    1 – الخط في الوسط
    2 – الصورة الخلفية هي body.gif وسبق أن أعطيتكم اياها للتحميل .
    3 – ال margin هي وهي أبعاد الهوامش .

    هام جدا : عندما ترى هذا الكود :

    كود:
    margin: 0px 0px 10px 0px;
    فهذا يعني أن الهوامش هي :
    1 – الهامش العلوي قيمته 0
    2 - هامش اليمين قيمته 0
    3 – الهامش السفلي قيمته 10
    4 – هامش اليسار قيمته 0

    اذا الترتيب دائما بهذا التسلسل : فوق – يمين – تحت – يسار

    ملاحظة : ترتيب الحشوة ( padding ) ايضا بهذا الترتيب .

    أخيرا التسلسل المنطقي لجهة الكتابة هو rtl أي right to left يعني من اليمين إلى اليسار .

    وهكذا حددنا في ملف style.css خواص جسم المدونة .

    وبما أننا فتحنا وسم body فإننا نغلقه فورا كي لا ننساه ونزيحه إلى أسفل الصفحة

    كود:
    </body>
    تصبح مكونات ملف index.php كالآتي :

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="ar" lang="ar"> <!-- ملاحظات المصمم - رأس المدونة --> <head profile="http://gmpg.org/xfn/1"> <title><?php bloginfo('name'); ?><?php wp_title(); ?></title> <meta http-equiv="Content-Type" content="text/html; charset=<?php bloginfo('charset'); ?>" /> <meta name="generator" content="WordPress <?php bloginfo('version'); ?>" /> <meta name="author" content="khaledtrm" /> <link rel="stylesheet" type="text/css" media="print" href="<?php echo get_settings('siteurl'); ?>/print.css" /> <style type="text/css" media="screen">@import url( <?php bloginfo('stylesheet_url'); ?> ); </style> <link rel="alternate" type="application/rss+xml" title="RSS 2.0" href="<?php bloginfo('rss2_url'); ?>" /> <link rel="alternate" type="text/xml" title="RSS .92" href="<?php bloginfo('rss_url'); ?>" /> <link rel="alternate" type="application/atom+xml" title="Atom 0.3" href="<?php bloginfo('atom_url'); ?>" /> <link rel="pingback" href="<?php bloginfo('pingback_url'); ?>" /> </head> <body> كود:
    الاضافات القادمة
    </body> </html>


    نكمل الآن ملف الستايل فنعرف تتمة مكونات وخصائص ال body فلنعرف لون الوصلات فيه ولون الوصلات عندما تمر الفأرة فوقها

    في ملف الستايل نكتب التالي بعد ما كتبناه : وسنشرح كل جزء خطوة خطوة :

    نكتب التالب :

    كود:
    a { color: #295F9A; text-decoration: none; }
    الحرف a يعني الوصلات :

    هنا كتبنا ما يلي : أن لون الوصلات هو ما ذكرناه
    وان شكل الوصلة : بلا أي تأثير .

    يعني ببساطة لو كتبنا مثلا :
    text-decoration: underline

    فهذا معناه أن الوصلات سيكون تحتها خط .




    ثم نضيف التالي :

    كود:
    a:hover { color: A72323; text-decoration: none; }
    هنا عرفنا الوصلة عندما تمر فوقها الفأرة فاخترنا لونا ثانيا ( كي يحدث تباين وبالتالي يضفي حركة أن هذا لينك قابل للضغط ...

    ( لا تنسوا أننا اخترنا الألوان سابقا )

    نضيف بعدها التالي :

    كود:
    hr { display: none; }  img { border: none; }  ins { text-decoration: none; border-bottom: 5px dashed #eeeeee; }   upon1 { border-bottom: 1px dashed #eeeeee; font-style: normal; }   blockquote { border-right: 5px solid #D8D8D8; margin: 10px 0 0 0; padding: 10px; width: 430px; color: #505050; }    .center { text-align: center; }  .search-button { font-family: tahoma,arial ; font-size: 10px; border: 1px solid #800000; background: #A72323; color: #FFFFFF; padding: 2px 2px; }
    عرفنا التالي :

    الخط الأفقي = 0 أي لا يظهر
    الصور بلا حدود ( بدون خط خارجي حولها )

    الخ الخ الخ




    في ملف : index.php

    نضيف بعد وسم <body> مباشرة الكود التالي :

    كود:
    <div id="case">
    هنا نحن فتحنا الصندوق الداخلي للمدونة : الصندوق الداخلي للموقع :

    مثال : صورة :

    نقره لتكبير أو تصغير الصورة ونقرتين لعرض الصورة في صفحة مستقلة بحجمها الطبيعي


    بما أننا أدخلنا الصندوق فإن علينا تعريفه في ملف الستايل : style.css
    كود:
    #case { margin: 0 auto; text-align: right; width: 730px; border-bottom: 10px solid #002F64; background: url(images/case.gif); line-height: 100%; font: bold; color: #295F9A; }
    شرحها كالآتي :

    الكايس :
    هوامشه العلوي صفر – بقية الجهات أوتوماتيكي ( أي يأخذ أبعاد الهوامش تلقائيا )
    الخط من اليمين الى اليسار
    عرض الصندوق : 730
    الخط السفلي للصندوق عرضه 10 بيكسل مستقيم – لونه 002F64
    الخلفية : هي الصورة متكررة ومصفوفة شاقوليا .
    الخط ضمن الكايس : عريض .
    لون الخط هو : .....


    ننتهي اليوم :

    تذكير :

    أصبح ملف index.php يحوي التالي :

    كود:
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="ar" lang="ar"> <!-- ملاحظات المصمم - رأس المدونة --> <head profile="http://gmpg.org/xfn/1"> <title><?php bloginfo('name'); ?><?php wp_title(); ?></title> <meta http-equiv="Content-Type" content="text/html; charset=<?php bloginfo('charset'); ?>" /> <meta name="generator" content="WordPress <?php bloginfo('version'); ?>" /> <meta name="author" content="khaledtrm" /> <link rel="stylesheet" type="text/css" media="print" href="<?php echo get_settings('siteurl'); ?>/print.css" /> <style type="text/css" media="screen">@import url( <?php bloginfo('stylesheet_url'); ?> ); </style> <link rel="alternate" type="application/rss+xml" title="RSS 2.0" href="<?php bloginfo('rss2_url'); ?>" /> <link rel="alternate" type="text/xml" title="RSS .92" href="<?php bloginfo('rss_url'); ?>" /> <link rel="alternate" type="application/atom+xml" title="Atom 0.3" href="<?php bloginfo('atom_url'); ?>" /> <link rel="pingback" href="<?php bloginfo('pingback_url'); ?>" /> </head> <!-- ملاحظات المصمم - جسم المدونة --> <body > <div id="case"> كود:
    التعديلات القادمة والاضافات – هذا السطر لاتنقلوه فقط هو للتذكير أن الكتابات سنكتبها هنا ,
    </div> </body> </html>

    وأصبح ملف ال style.css يحتوي على التالي :

    كود:
    /* Theme Name: ar-wp Theme URI: http://www.ar-wp.com Author: khaledtrm Description: this theme made for http://www.ar-wp.com as lesson Author URI: http://www.khaledtrm.net/ Version: 1 */ body { text-align: center; background: url(images/body.gif); margin: 0px 0px 10px 0px; direction: rtl; } a { color: #295F9A; text-decoration: none; } a:hover { color: A72323; text-decoration: none; } hr { display: none; } img { border: none; } ins { text-decoration: none; border-bottom: 5px dashed #eeeeee; } blockquote { border-right: 5px solid #D8D8D8; margin: 10px 0 0 0; padding: 10px; width: 430px; color: #505050; } .center { text-align: center; } .search-button { font-family: tahoma,arial ; font-size: 10px; border: 1px solid #800000; background: #A72323; color: #FFFFFF; padding: 2px 2px; } #case { margin: 0 auto; text-align: right; width: 730px; border-bottom: 10px solid #002F64; background: url(images/case.gif); line-height: 100%; font: bold; color: #295F9A; }
    يتبع

  2. #22
    أدارى
    الصورة الرمزية HVIPS4


    تاريخ التسجيل: Jun 2011
    رقم العضوية: 6
    الدولة: Cairo
    المشاركات: 1,979
    HVIPS4 غير متواجد حالياً

    رد: كيف تصمم قالبا للوردبريس من نقطة الصفر


    اليوم سنكمل :

    افتح ملف index.php وبعد الكود : <div id="case">

    مباشرة نكتب التالي :


    كود:
    <div id="header">                                   <h1><a href="<?php bloginfo('url'); ?>"><?php bloginfo('name'); ?></a></h1>        </div>
    هنا ثبتنا صورة ووصلة الهايدر

    وبما اننا وضعنا صورة ووصلة الهايدر فإننا يجب ان نثبت شكل الهايدر وملحقاته في ملف ال style.css

    نفتح ملف الستايل : ونضيف فيه الأكواد التالية :


    كود:
    #header { height: 280px; background: url(images/header.jpg) no-repeat; border-bottom: 10px solid #002F64; font: bold; color: #FF0C13;
    }
    شرح الكود : أضفنا التالي :
    الرأس
    علو الرأس 280 بيكسل
    صورة الرأس : (عنوانها لكي يجلبها المتصفح ) وبدون تكرار
    أسفل الرأس نريد خطا بسماكة 10 بيكسل ( ناحية تجميلية )
    الخط لاسم المدونة : عريض
    لون الخط : FF0C13


    ثم نضيف الكود التالي :


    كود:
    #header h1 { font: bold 40px arial; color: #F60013; text-align: center; line-height: 50px; padding:  4px 4px; }
    شرح الكود الذي أضفناه :
    الرأس – وسم h1
    الخط : نوعه - قياسه - شكله
    لون الخط
    محاذاة النص
    ارتفاع الخط بالنسبة للرأس ( علوه ضمن الرأس )
    الحواشي
    الآن نضيف : الكود التالي :


    كود:
    #header h1 a { color: #FE0103; text-decoration: none; }
    شرح ما أضفناه

    الرأس_h1_الروابط
    لون الخط
    تزيين الخط – بدون تزيين .

    وهكذا نكون وضعنا تفصيلات الهيدر

  3. #23
    أدارى
    الصورة الرمزية HVIPS4


    تاريخ التسجيل: Jun 2011
    رقم العضوية: 6
    الدولة: Cairo
    المشاركات: 1,979
    HVIPS4 غير متواجد حالياً

    رد: كيف تصمم قالبا للوردبريس من نقطة الصفر


    نعود إلى index.php

    بعدها نضيف ما يلي :



    كود:
    <!-- ملاحظات المصمم -   بداية السايد بار هنا ويمكن أن نضعها بملف منفصل ونستدعيها هنا بأمر get -->  <div id="sidbar">
    وبما اننا فتحنا sidbar
    فإننا نعرف شكل القائمة الجانبية في ملف الستايل .

    فنكتب في ملف style.css الأكواد التالية :


    كود:
    #sidbar { float: right; width: 200px; color: #BABABA; }
    شرح ما سبق وأضفناه
    القائمة الجانبية
    جهتها نحو اليمين
    عرضها 200 بيكسل
    لونها :


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

    في ملف index.php نفتح حيز جديد بأمر div ولنسمي الحيز بأي اسم أنا هنا سميته : sidbar-kh

    نكتب الكودات التالية :



    كود:
    <div id="sidbar-kh">
    نضيف فيه الأمور التي ستلزمنا في القائمة الجانبية :




    كود:
    <h2><?php _e('صفحات'); ?></h2> <ul> <?php wp_list_pages ('title_li= '); ?> </ul>
    الشرح : أدرجنا هنا
    كتابة كلمة صفحات .
    تحتها أمر جلب الصفحات ( سابقا أخذناه فيالأكواد التي درسناها في أول الدروس )


    نضيف الكود التالي :


    كود:
    <h2><?php _e('Categories'); ?></h2>                 <ul>                   <?php wp_list_cats('sort_column=name&optioncount=1'); ?>                     </ul>
    الشرح : أدرجنا هنا :
    كتابة كلمة الأقسام او التصنيفات
    أمر جلب الأقسام وبجانبه عدد المواضيع في كل قسم .


    نضيف الكود التالي :


    كود:
     <h2><?php _e('Archives'); ?></h2>                        <ul>                               <?php wp_get_archives('type=monthly&show_post_count=1'); ?>                       </ul>
    الشرح : أدرجنا هنا
    كلمة الأرشيف
    أمر جلب الأرشيف الشهري وبجانبه عدد المشاركات في كل شهر .



    نضيف الكود التالي :

    كود:
     <h2><label for="s"><?php _e('Search'); ?></label></h2>                         <ul>                              <form id="searchform" method="get" action="<?php echo $PHP_SELF; ?>">                               <input type="text" name="s" id="s" size="17" class="sidbar-search" /><br />                              <input type="submit" name="submit" value="<?php _e('Search'); ?>" class="search-button" />                              </form>                        </ul>
    الشرح : أضفنا ما يلي :
    أضفنا كلمة البحث
    أضفنا نموذج ( فورم ) للبحث وحددنا من أين يأتي البحث .. وعرض الفورم كما حددنا صفا جديدا لشكل البحث ضمن ملف الستايل .




    نضيف الكود التالي :
    <h2> روابط</h2>
    <ul>
    <?php wp_get_links(1); ?>
    </ul>
    [/code]

    الشرح : أضفنا كلمة روابط
    أضفنا : امر جلب الروابط ( التي أضافها صاحب المدونة في لوحة التحكم .

  4. #24
    أدارى
    الصورة الرمزية HVIPS4


    تاريخ التسجيل: Jun 2011
    رقم العضوية: 6
    الدولة: Cairo
    المشاركات: 1,979
    HVIPS4 غير متواجد حالياً

    رد: كيف تصمم قالبا للوردبريس من نقطة الصفر


    نضيف الكود التالي :
    كود:
    <h2><?php _e('منوعات'); ?></h2> <ul> <?php wp_register(); ?> <li><?php wp_loginout(); ?></li> <li><a href="feed:<?php bloginfo('rss2_url'); ?>" title="<?php _e('Syndicate this site using RSS'); ?>"><?php _e('<upon1 title="Really Simple Syndication">RSS</upon1>'); ?></a></li> <li><a href="feed:<?php bloginfo('comments_rss2_url'); ?>" title="<?php _e('The latest comments to all posts in RSS'); ?>"><?php _e('Comments <upon1 title="Really Simple Syndication">RSS</upon1>'); ?></a></li> <p> <?php wp_meta(); ?> </p> </ul>
    الشرح : أضفنا هنا عدة ملاحق سنشرحها بالتفصيل :
    أضفنا كلمة منوعات
    أضفنا : رابط دخول الأدمين
    أضفنا رابط الخروج
    أضفنا روابط rss + rss2



    نضيف الكود التالي :
    كود:
    <?php if (function_exists('wp_theme_switcher')) { ?> <h2>تغيير الثيم</h2> <?php wp_theme_switcher(); ?> <?php } ?>
    الشرح أضفنا :
    كلمة تغيير الثيم
    ورابط الثيمات الموجودة

    الآن نحن انتهينا من القائمة الجديدة لم يبق علينا سوى اغلاق ال div sidbar-kh

    نكتب الأمر التالي :

    كود:
    </div>
    ونغلق بعدها حيز div sidbar

    كود:
    </div>

    نكتب بعدها :
    كود:
    <hr /> <!-- ملاحظات المصمم - نهاية السايد بار -->
    الآن افتح ملف style.css

    الآن علينا تثبيت div sidbar-kh وملحقاته في الملف .

    نضيف التالي :



    كود:
    #sidbar-kh { padding: 20px 0px 0px 0px; color: #757575; }
    أضفنا الحواشي الداخلية وهي فوق 20 بيكسل و صفر لبيقية الجهات


    ونضيف التالي :



    كود:
    #sidbar h2 { font-family: arial, tahoma ; font-size: 16px; font-weight: bold;  margin: 20px 14px 0px 0px ; padding: 5px; text-align: right; color: #A72323; }
    وسم h2 في القائمة الجانبية
    نوع الخط
    حجمه
    شكله
    الهوامش
    الحواشي
    محاذاة النص
    لون الخط


    ونضيف التالي :


    كود:
    #sidbar ul { font-family: tahoma, arial; font-size: 11px; font-weight: normal;  list-style: none; margin: 0px 20px 0px 0px ; padding: 0; }
    وسم ul في القائمة الجانبية
    نوع الخط
    حجم الخط
    نوع الخط
    نوع القوائم
    الهوامش
    الحواشي .


    ونضيف التالي :


    كود:
    #sidbar ul li ul { font-family: tahoma, arial; font-size: 11px; font-weight: normal; margin: 0px 10px 0px 0px ; }
    وسم ul – li – ul في القائمة الجانبية
    نوع الخط
    حجمه
    شكله
    الهوامش


    ونضيف التالي :

    كود:
    #sidbar a { text-decoration: none; font-weight: normal; color: #444444; }
    الروابط في القائمة الجانبية
    شكل الروابط ( بدون )
    شكل الخط
    لون الخط
    ( وبما اننا لم نوع الخط فإنه سيأخذها تلقائيا من القائمة ألأساس وهي السايدبار )


    ونضيف الكود التالي :

    كود:
    #sidbar .sidbar-search { margin-bottom: 3px; background: #eee; font-size: 1em; width: 150px; border: 1px solid #300000; }
    ميزات البحث في السايد بار
    الهوامش
    لون الخلفية
    حجم الخط
    عرض مربع البحث
    الاطار لمربع البحث ( قياسه 1 – ولون خط الاطار ) .

  5. #25
    أدارى
    الصورة الرمزية HVIPS4


    تاريخ التسجيل: Jun 2011
    رقم العضوية: 6
    الدولة: Cairo
    المشاركات: 1,979
    HVIPS4 غير متواجد حالياً

    رد: كيف تصمم قالبا للوردبريس من نقطة الصفر


    للتذكير :

    حتى اليوم أصبحت محتويات ملف index.php

    كالتالي :

    كود:
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="ar" lang="ar">  <!-- ملاحظات المصمم -   رأس المدونة -->  <head profile="http://gmpg.org/xfn/1">      <title><?php bloginfo('name'); ?><?php wp_title(); ?></title>      <meta http-equiv="Content-Type" content="text/html; charset=<?php bloginfo('charset'); ?>" />     <meta name="generator" content="WordPress <?php bloginfo('version'); ?>" />     <meta name="author" content="khaledtrm" />      <link rel="stylesheet" type="text/css" media="print" href="<?php echo get_settings('siteurl'); ?>/print.css" />      <style type="text/css" media="screen">@import url( <?php bloginfo('stylesheet_url'); ?> );     </style>       <link rel="alternate" type="application/rss+xml" title="RSS 2.0" href="<?php bloginfo('rss2_url'); ?>" />      <link rel="alternate" type="text/xml" title="RSS .92" href="<?php bloginfo('rss_url'); ?>" />      <link rel="alternate" type="application/atom+xml" title="Atom 0.3" href="<?php bloginfo('atom_url'); ?>" />      <link rel="pingback" href="<?php bloginfo('pingback_url'); ?>" />   </head>     <!-- ملاحظات المصمم -   جسم المدونة -->  <body >         <div id="case">                            <div id="header">                                   <h1><a href="<?php bloginfo('url'); ?>"><?php bloginfo('name'); ?></a></h1>        </div>   <!-- ملاحظات المصمم -   بداية السايد بار هنا ويمكن أن نضعها بملف منفصل ونستدعيها هنا بأمر get -->  <div id="sidbar">   <div id="sidbar-kh">   <h2><?php _e('صفحات'); ?></h2> <ul> <?php wp_list_pages ('title_li= '); ?> </ul>  <h2><?php _e('Categories'); ?></h2>                 <ul>                   <?php wp_list_cats('sort_column=name&optioncount=1'); ?>                     </ul>                <h2><?php _e('Archives'); ?></h2>                        <ul>                               <?php wp_get_archives('type=monthly&show_post_count=1'); ?>                        </ul>                    <h2><label for="s"><?php _e('Search'); ?></label></h2>                         <ul>                              <form id="searchform" method="get" action="<?php echo $PHP_SELF; ?>">                               <input type="text" name="s" id="s" size="17" class="sidbar-search" /><br />                              <input type="submit" name="submit" value="<?php _e('Search'); ?>" class="search-button" />                              </form>                        </ul>              <h2> روابط</h2>                         <ul>                               <?php wp_get_links(1); ?>                         </ul>              <h2><?php _e('منوعات'); ?></h2>                      <ul>                           <?php wp_register(); ?>                           <li><?php wp_loginout(); ?></li>                           <li><a href="feed:<?php bloginfo('rss2_url'); ?>" title="<?php _e('Syndicate this site using RSS'); ?>"><?php _e('<upon1 title="Really Simple Syndication">RSS</upon1>'); ?></a></li>                           <li><a href="feed:<?php bloginfo('comments_rss2_url'); ?>" title="<?php _e('The latest comments to all posts in RSS'); ?>"><?php _e('Comments <upon1 title="Really Simple Syndication">RSS</upon1>'); ?></a></li>                          <p>                              <?php wp_meta(); ?>                         </p>                     </ul>                          <?php if (function_exists('wp_theme_switcher')) { ?>             <h2>تغيير الثيم</h2>                           <?php wp_theme_switcher(); ?>                         <?php } ?>     </div> </div>  <hr /> <!-- ملاحظات المصمم -  نهاية السايد بار -->                     </div>      </body> </html>
    كود:
    /*    Theme Name: ar-wp Theme URI: http://www.ar-wp.com Author: khaledtrm Description: this theme made for http://www.ar-wp.com as lesson Author URI: http://www.khaledtrm.net/ Version: 1 */   body { text-align: center;  background: url(images/body.gif); margin: 0px 0px 10px 0px; direction: rtl; }  a { color: #295F9A; text-decoration: none; }  a:hover { color: A72323; text-decoration: none; }  hr { display: none; }  img { border: none; }  ins { text-decoration: none; border-bottom: 5px dashed #eeeeee; }  blockquote { border-right: 5px solid #D8D8D8; margin: 10px 0 0 0; padding: 10px; width: 430px; color: #505050; }  .center { text-align: center; }  .search-button { font-family: tahoma,arial ; font-size: 10px; border: 1px solid #800000; background: #A72323; color: #FFFFFF; padding: 2px 2px; }   #case { margin: 0 auto; text-align: right; width: 730px; border-bottom: 10px solid #002F64; background: url(images/case.gif); line-height: 100%; font: bold; }   #header { height: 280px; background: url(images/header.jpg) no-repeat; border-bottom: 10px solid #002F64; font: bold; font-color: #f8f8f8; }  #header h1 { font: bold 32px arial; text-align: right; line-height: 50px; padding:  6px 10px; }  #header h1 a { color: #f8f8f8; text-decoration: none; }  #sidbar { float: right; width: 200px; color: #BABABA; }  #sidbar-kh { padding: 20px 0px 0px 0px; }  #sidbar h2 { font-family: arial, tahoma ; font-size: 16px; font-weight: bold;  margin: 20px 14px 0px 0px ; padding: 5px; text-align: right; color: #A72323; }  #sidbar ul { font-family: tahoma, arial; font-size: 11px; font-weight: normal;  list-style: none; margin: 0px 20px 0px 0px ; padding: 0; }  #sidbar ul li ul { font-family: tahoma, arial; font-size: 11px; font-weight: normal; margin: 0px 10px 0px 0px ; }  #sidbar a { text-decoration: none; font-weight: normal; color: #444444; }  #sidbar .sidbar-search { margin-bottom: 3px; background: #eee; font-size: 1em; width: 150px; border: 1px solid #300000; }   لهون انتوا معي ؟؟؟

  6. #26
    أدارى
    الصورة الرمزية HVIPS4


    تاريخ التسجيل: Jun 2011
    رقم العضوية: 6
    الدولة: Cairo
    المشاركات: 1,979
    HVIPS4 غير متواجد حالياً

    رد: كيف تصمم قالبا للوردبريس من نقطة الصفر


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

    افتح ملف index.php

    اضف فيه الكود التالي :



    كود:
    <!-- ملاحظات المصمم -  بداية الصفحة الرئيسية  -->  		<div id="content"> 			<?php if ($posts) : foreach ($posts as $post) : start_wp(); ?> <!-- ملاحظات المصمم -  أمر عرض المواضيع  --
    >
    الشرح : وكتبنا فيه أمر لكل واحد
    الأمر if هو اداة الشرط في لغة ال php
    الأمر foreach هو أمر يساعدك على معرفه عناصر مصفوفه معينه او طباعه محتوياتها على الشاشة : وهو يعد من اوامر التكرار في لغة php
    لاحظ اشتراط وجود مشاركات وامر عرضها واحدا اثر واحد .
    نذهب الآن إلى ملف style.css

    نفتحه ونضيف فيه مواصفات الحيز الذي فتحناه .



    كود:
    #content { 	margin: 50px 220px 10px 20px; 	font-family:  tahoma, arial ; 	font-size: 11px; 	font-weight: normal;  	color: #444444; }
    الشرح :
    حيز المقالات
    هوامش المقالات : فوق 50 بيكسل اليمين 220 – تحت 20 – يسار 20 ( لاحظوا كبر الهامش اليمين وها الأمر لترك المجال للقائمة الجانبية التي حددناها سابقا بعرض 200 ) .
    خط المقالات تهوما 11
    شكل الخط عادي
    لون الخط

    ثم نضيف الكود التالي:

    كود:
    #content h2 { font-family: arial ; font-size: 16px; font-weight: bold; text-align: right; margin: 5px 5px; color: #A72323; }
    أضفنا تعليمة h2 الى المقالات بهدف تمييز خط العناوين .
    الشرح :
    المقالات h2
    نوع الخط اريال
    حجم الخط 16
    شكل الخط عريض
    محاذاة النص يمين
    هوامش الخط
    لون الخط .


    ثم نضيف الكود التالي :


    كود:
    #content h2 a { 	text-decoration: none; 	color: #A72323; }  #content .date { 	font-family: tahoma, "MS Sans Serif", Arial, Helvetica, sans-serif; 	font-size: 11px; 	text-align: right; 	font-weight:normal; 	color: #002F64; }   #content .feed { 	margin: 15px 30px 40px 30px; 	text-align: right; 	padding-bottom: 10px; 	border-bottom: 1px solid #700000; 	color: #444444; }
    أضفنا هنا 3 أمور للمقالات.
    1 – أضفنا شكل الروابط في المقالات
    2 – أضفنا طريقة عرض التاريخ والتوقيت في المقالات
    3 – أضفنا مواصفات التعليق

  7. #27
    أدارى
    الصورة الرمزية HVIPS4


    تاريخ التسجيل: Jun 2011
    رقم العضوية: 6
    الدولة: Cairo
    المشاركات: 1,979
    HVIPS4 غير متواجد حالياً

    رد: كيف تصمم قالبا للوردبريس من نقطة الصفر


    نعود الآن إلى index.php

    ونضيف إلى ما سبق :



    كود:
    <h2 id="post-<?php the_ID(); ?>"><a href="<?php the_permalink() ?>" rel="bookmark" title="Permanent Link: <?php the_title(); ?>"><?php the_title(); ?></a></h2>                			<div class="date">                 <?php the_time('j F Y'); ?> 			</div>  			<div class="date">                 <?php _e("تابع لقسم"); ?> <?php the_category(',') ?> بقلم  <?php the_author() ?> في <?php the_time() ?> 			</div>
    الشرح :
    1 - أمر جلب معرف العنوان ( id المقال ) من قاعدة البيانات بالاضافة إلى جلب العنوان
    2 – أمر جلب تاريخ المشاركة بالطريقة التي نريدها
    3 – أمر جلب التبعية لأي قسم + اسم كاتب المقال من قاعدة البيانات .


    نضيف الكود التالي :


    كود:
    <div class="storycontent">                   <?php the_content(__('(اقرأ كامل الموضوع)')); ?> 			</div>   			<div class="feed">                 <?php wp_link_pages(); ?>                 <?php comments_popup_link(__('تعليق 0'), __('تعليق 1'), __('تعليقات %')); ?> - <?php edit_post_link( تعديل ); ?> 			</div>
    الشرح :
    1 - أضفنا وصلة الاطلاع على كامل الموضوع
    2 – أضفنا عدد التعليقات + وصلة التعديل ( للمدير العام )

  8. #28
    أدارى
    الصورة الرمزية HVIPS4


    تاريخ التسجيل: Jun 2011
    رقم العضوية: 6
    الدولة: Cairo
    المشاركات: 1,979
    HVIPS4 غير متواجد حالياً

    رد: كيف تصمم قالبا للوردبريس من نقطة الصفر


    نكمل اليوم تتمة الملف الرئيسي للمدونة :

    نفتح ملف index.php ونضيف فيه :




    كود:
    <!-- ملاحظات المصمم - أمر ادراج  صفحة المقال كاملا والتعليق عليه -->			             <?php comments_template(); ?>             <?php endforeach; else: ?>             <p><?php _e('Sorry, no posts matched your criteria.'); ?></p>             <?php endif; ?> 		<!-- ملاحظات المصمم - نهاية صفحة المقال كاملا والتعليق عليه -->
    الشرح : أضفنا هنا :
    أمر استدعاء صفحة المقال كاملا والتعليق عليه .
    نلاحظ هنا أننا أغلقنا أمر foreach الذي بدأنا فيه عرض الصفحة من خلال الأمر الذي كتبناه سابقا .

    <?php if ($posts) : foreach ($posts as $post) : start_wp(); ?>

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

    ثم نكتب :



    كود:
    			<div class="center">                 <?php posts_nav_link('&nbsp;&nbsp;', __('&laquo; السابق'), __('الآتي &raquo;')); ?>                 <br /><br /><br /><br />  <!-- ملاحظات المصمم -  نهاية الصفحة الرئيسية  -->
    الشرح هنا :
    من الأكواد التي سبق التطرق لها نختار امر السابق والتالي : ونضعه في مكانه في أسفل الصفحة
    ( يجب أن لا ننسى ان التحكم بعدد المواضيع في الصفحة الواحدة موجود تلقائيا في برمجة الورد بريس ويمكن التحكم به من خلال لوحة التحكم )


    ثم نضيف :


    كود:
    <!-- ملاحظات المصمم -  أسفل المدونة  -->                 <div align="center">                        تصميم  <a href="http://www.khaledtrm.net"> خالد ترمانيني  </a> خاص كتجربة لمنتدى : <a href="http://www.ar-wp.com"> عرب وردبريس  </a><br /> يسمح باستخدامه مجانا لأعضاء المنتدى فقط                 </div>           			</div> 		 		</div>
    الشرح : فتحنا حيز جديد ووسطنا أسفل المدونة وكتبنا فيها المعلومات التي نريد اظهارها بالفوتر ...

    أغلقنا الحيز الذي بدأناه قبل الآتي والسابق <div class="center">
    ثم أغلقنا الحيز div الذي بدأناه <div id="content">

    وبهكذا نكون قد أنهينا صفحة index.php

    نفتح ملف ال style.css ونكمل بقية أكواده .


    نكتب فيه التالي :


    كود:
    #commentlist li { 	margin:5px 0; 	padding: 12px; 	background: #f8f8f8; 	border: 1px solid #777777; 	margin-bottom: 2px; 	padding-bottom: 2px; 	border-bottom: 1px solid #777777; }  #commentform { 	margin:5px 0; 	padding: 10px; 	border: 1px solid #777777; 	background: #eeeeee; 	font: bold; 	color: 002F64; }  #commentform textarea { 	background: #f8f8f8; }  #commentform #email, #commentform #author, #commentform #url { 	font-size: 11px; 	background: #eeeeee; 	border: 1px solid #777777; 	width: 180px; }
    الشرح : أضفنا هنا تشكيل صفحة المقال كاملا الذي لم ننشئه بعد :
    1 – سمات جدول التعليقات المضافة إلى المشاركة
    2 – سمات شكل صندوق النموذج الذي سيضيف فيه الزائر تعليقه
    3 – سمات شكل الصندوق لكل من الزائر وللعضو المسجل



    ثم نضيف :

    كود:
    #footer { 	clear: both; 	margin: 15px 15px 0 15px; 	padding: 5px; 	text-align: center; }  upon1 { 	border-bottom: 1px dashed #eeeeee; 	font-style: normal; }
    أضفننا هنا سمات الفوتر من ناحية الهوامش والحواشي والتوسيط .

    ثم أضفنا سمة احتياطية سميناها upon1 وذلك ان احتجنا فيما بعد اليها .

    ملاحظة تستطيع اضافة عدد لا نهائي من الوسوم الاحتياطية .

    أنهينا حتى الآن :

    الملف index.php وملف الستايل ....

    وبقي علينا صفحة المقال الرئيسي ال commentes.php

 
صفحة 3 من 3 الأولىالأولى 123

ضوابط المشاركة

  • لا تستطيع إضافة مواضيع جديدة
  • لا تستطيع الرد على المواضيع
  • لا تستطيع إرفاق ملفات
  • لا تستطيع تعديل مشاركاتك
  •