• Dubai, UAE
  • +971 54 408 4441
  • moe.rayan@gmail.com
الدرس الثالث والأخير: كيفية تصميم قالب وورد بريس

الدرس الثالث والأخير: كيفية تصميم قالب وورد بريس

السلام عليكم

مرحباً واهلا سهلا بكم في درس “كيفية تصميم قالب وورد بريس الجزء الثالث والاخير
في البداية

اذا كنت لم تطبق الدرس الأول والثاني

الدرس الاول

الدرس الثاني

نزل قالب starkers
اضغط هنا


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

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

وهذه هي الملفات الموجودة

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

الان افتح ملف الستايل الخاص بالقالب
راح تكون بهذا الشكل

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

امسح كل الاكواد في داخل ملف الستايل
واعمل كوبي لملف الستايل اللي سوينا في الدرس الثاني
والصقه داخل ملف ستايل القالب واحفظه
افتح ملف header.php
اول شيء راح نعمله هو مسح الكود بداية من الاعلى الى وسم الtitle

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

وافتح ملف الhtml اللي سوينا..وانسخ الكود من الاعلى الى وسم الtitle
كيفية تصميم قالب ووردبريس

اذا اردت ادخل عنوان الموقع ديناميكياُ تستيع ان تبدل مافي داخل وسم الtitle بهذا الكود

<?php bloginfo('name'); ?>

التالي..في داخل ملف الheader.php اسفل الصفحة..امسح كل الكود بداية من اسفل وسم body
يبقى لدينا الكود التالي

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
 
كيفية عمل قالب ووردبريس
 
<?php
/* We add some JavaScript to pages with the comment form
* to support sites with threaded comments (when in use).
*/
if ( is_singular() &amp;&amp; get_option( 'thread_comments' ) )
wp_enqueue_script( 'comment-reply' );
 
/* Always have wp_head() just before the closing * tag of your theme, or you will break many plugins, which
* generally use this hook to add elements to  such
* as styles, scripts, and meta tags.
*/
wp_head();
?>

انسخ ملف الصورimages الذي تكون عندنا من الدرس الثاني
الى مجلد القالب starkers
افتح ملف header.php
وغير الencoding كما في الصورة

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

اعد كتابة العنوان في العربي
……………………..

افتح ملف الhtml وانسخ الكود من


الى

والصقه بملف header.php
ليكون كالتالي

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

احفظه

نفتح الموقع بالمتصفح سوف يكون كالتالي

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

نرجع لملف الheader.php
بقي لدينا بعض التعديلات على ملف الهيدر..وسننتهي من الهيدر انشاءالله
نعدل على كود القائمة..حتى يكون ديناميكياً

نعدل على الكود القائمة ليكون كالتالي

<div id="navigation">
<!--navigation starts-->
 
<ul class="nav_links">
 
<li><a href="http://localhost/ar2/wordpress/">الرئيسية</a></li>
 
 
<li class="withdiv"><?php wp_list_pages('sort_column=menu_order&amp;title_li='); ?></li>
 
</ul>
</div>
 
 
<!--navigation ends-->

———————————————-

  • الرئيسية
  • http://localhost/ar2/wordpress … اكتب رابط موقعك للصفحة الرئيسية
    شيء آخر نعدله..وهو فورم البحث
    امسح كود البحث اللي في ملف header.php

    واكتب الكود التالي

    <div id="search"><!--search starts-->
    <?php include (TEMPLATEPATH . "/searchform.php"); ?></div>
     
     
    <!--search ends-->

    (ملاحظة..لقد قمت بعمل ملف searchform وضفته مع ملفات القالب)
    نفتح موقعنا بالمتصفح
    فعلاً الهيدر جاهز! 100%
    لاحظ الصورة

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

    لكن هنالك فورم بحث آخر
    لا تقلق
    لإزالته..اذهب الى لوحة التحكم>>المظهر>>المربعات الجانبية وازيله
    نكمل عملنا
    اغلق ملف header.php
    وافتح index.php
    هذه هي اهم صفحة..وهي اول صفحة سيراها الزائر لدى دخوله للموقع
    امسح الكود كامل بداخلها..وانسخ هذا الكود

    <?php get_header(); ?>
     
    <div id="content">
    <!--content starts-->
     
    <div id="content-right"><!--content right starts-->
    <?php if (have_posts()) : ?>
    <?php while (have_posts()) : the_post(); ?>
     
    <div class="a-post">
    <!--wordpress post starts-->
     
    <div id="post-<?php the_ID(); ?>" class="post">
     
    <div class="post-img">
    <a href="<?php $values = get_post_custom_values(">" title="<?php the_title(); ?>">
    <img src=" <?php $values = get_post_custom_values(" alt="" />" alt="<?php the_title(); ?>" /></a></div>
     
     
    <div class="post-title">
     
    <h1><a title="Permanent Link to <?php the_title_attribute(); ?>" rel="bookmark" href="%3C?php%20the_permalink%28%29%20?%3E"><?php the_title(); ?></a></h1>
     
     
    <?php the_time('F jS, Y') ?> <!-- by  --></div>
     
     
    <div class="post-desc">
    <?php the_content('Read the rest of this entry »'); ?></div>
     
     
    <?php comments_popup_link('No Comments »', '1 Comment »', '% Comments »'); ?></div>
    </div>
     
     
    <!--wordpress post ends-->
    <?php endwhile; ?>
     
    <ul>
     
    <li><?php next_posts_link('« Older Entries') ?></li>
     
     
    <li><?php previous_posts_link('Newer Entries »') ?></li>
     
    </ul>
     
     
    <?php else : ?>
     
    <h2>Not Found</h2>
     
     
    Sorry, but you are looking for something that isn't here.
     
    <?php endif; ?></div>
     
     
    <!--content right ends-->
    <?php get_sidebar(); ?>
    <?php get_footer(); ?></div>

    لاحظ هذا الكود

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

    الان باستطاعتنا اضافة صورة التدوينة ديناميكياً
    كيف؟
    بلوحة التحكم >>تدوينة جديدة او تدوينة موجودة من قبل >> في الاسفل اضف الحقول التالية

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

    في خانة image ضيف مكان الصورة
    في خانة url ضيف رابط التدوينة

    ننتقل للشريط الجانبي

    افتح ملف الsidebar.php
    امسح جميع الاكواد بداخله..ونبدأ بكتابته من جديد
    قبل اي شيء..
    لاتنسى تغيير الencoding الى utf without DOM

    سوف نكتب الكود كامل..:D

    <ul>
    <?php 	/* Widgetized sidebar, if you have the plugin installed. */ 					if ( !function_exists('dynamic_sidebar') || !dynamic_sidebar() ) : ?>
     
    <div class="side-bar">
    <!--sidebar starts-->
     
    <?php wp_list_pages('title_li=
     
    <h1>الصفحات' ); ?>
     
    <li></li>
    </h1>
     
     
    <h1>الأرشيف</h1>
     
     
    <ul>
    <?php wp_get_archives('type=monthly'); ?>
    </ul>
     
     
    <?php wp_list_categories('show_count=1&amp;title_li=
     
    <h1>التصنيفات'); ?>
     
    <?php /* If this is the frontpage */ if ( is_home() || is_page() ) { ?>
    <?php wp_list_bookmarks(); ?>
     
    <li></li>
    </h1>
     
     
    <h1>الكلمات المفتاحية</h1>
     
     
    <ul>
    <?php wp_register(); ?>
     
    <li><?php wp_loginout(); ?></li>
     
     
    <?php wp_meta(); ?>
    </ul>
     
     
    <?php } ?>
     
    <?php endif; ?></div>
     
    </ul>
     
     
    <!--sidebar ends-->
     
    <!--content ends-->

    ننتقل للفوتر
    افتح footer.php
    حدد الكل..واضغط ديليت 😀
    نرجع لملف الhtml

    وننسخ هذا الكود

    <!--container ends-->
     
    <div id="footer">
    <!--footer starts-->
     
    <h2>معهد الويب</h2>
     
     
    Copyright © www.m3had.net | All Rights Reserved</div>
     
     
    <!--footer ends-->

    ونلصقه ب footer.php
    ونحفظه

    تقريباً انتهينا..بقي القليل
    القليل من التكويد..وننتهي بإذن الله

    افتح archive.php

    ضيف هذا الكود بعد get header.php

    <div id="content">
    <!--content starts-->
     
    <div id="content-right">
    <!--content right starts-->
     
    </div>
    </div>

    وبالاخير فوق get sidebar.php
    ضيف

    احفظها

    آخر ملفين خليىتهم للأخير نعدلهم ومن بعدها ننتهي
    افتح single.php

    ضيف الكود التالي بعد get header.php

    <div id="content">
    <!--content starts-->
     
    <div id="content-right">
    <!--content right starts-->
     
    <div class="a-post"><!--wordpress post starts--></div>
    </div>
    </div>

    ومن ثم ضيف

    ليصبح الكود هكذا

    <?php endwhile; // end of the loop. ?>
     
    <?php get_sidebar(); ?>
    <?php get_footer(); ?>

    الان اذا اخذت نظره على التعليقات..تظهر بشكل مخربط..من دون تنسيق

    للتعديل والتنسيق
    افتح ملف الfunctions.php
    وتقدر تعدل كما تريد
    لاحظ الكلاس comment-body

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

    للتغير عليها
    الذهاب لملف الستايل
    واضافة الكود التالي

    ul, ol {
    list-style:none;
    }
    .comment-body {
    margin-bottom: 10px;
    padding: 5px;
    float: right;
    text-align: justify;
    width: 565px;
    }
    .comment-body p {
    margin: 5px 0 10px;
    padding: 0;
    }

    هذا هو القالب الذي عملناه
    اضغط هنا

    وبالتالي نكون انتهينا والحمدلله

    اللي يواجه أي مشكلة لايتردد بالسؤال.. 😀
    تحياتي

    24 رأي على “الدرس الثالث والأخير: كيفية تصميم قالب وورد بريس”

    1. السلام عليكم ورحمة الله

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

    2. ahmadssb قال:

      جزاك الله الف خير على هذا الشرح المميز

      عندي استفسار سريع انا الحين عملت تصميم نفس اللي في الشرح عدلت فيه شوي
      اولا الهيدر او منطقة الشعار (المستطيل الكبير) ابغاه يكون في الخلفية (غير خلفية الصفحة بالكامل) عشان زي اللي في الشرح الالوان نفسها لكن انا خليت اللي في الستطيل الكبير عدة الوان ونفس الشي في القائمة و الكلام اللي يطلع تحت اسم الموضوع

      شوف هذه الصورة عشان يوضح معك التصميم اللي قمت به
      http://imageshack.us/photo/my-images/84/bloget.jpg/

      ياليت تساعدني وشكرا

    3. ربي يجازيك كل خير اخي على الدروس الرائعة
      والشرح الممتاز
      تحياتي اخي الكريم

    4. LOSH قال:

      اهَـا !!! . .
      شكليّ برجع اعيّـده ، ع كل حال ارسلت الملف ، لو ماقدرت تعدله بعيّـد ==”
      شكراً أخيّ الكريّـم 333>

    5. LOSH قال:

      يب طبقتها ، طلعت لي صفحه ويّـب ،
      بس الكلمات او الحروف العربيه طالعه ع شكل [ ؟ ] < علامة استفهام داخل معين . .
      أتوقع فيه شيء غلط 🙁
      والستايل ماطلع 🙁 . .
      شكلي برجع اعيد من اول 🙁
      ما أقدر ارسل لك ملف الـ html تشوف لي الخلل وين 🙁 ؟
      و ع فكره انا مالي خبره ف الاكواد التابعه لِـ css ، فَـ أكتب نصيّـاً ما تقوله ،
      لو شفت مساحه " بيكسل " ، أو اكواد ألوان غيّـرتها لتناسب ستايل القالب !!
      فَ ياليت تساعدني فَـ هَـ القالب ع الأقل ،
      لأن محتاجته ضروري ولازم اخلصه بأسرع وقت ،
      وبعدين لا إنتهيت منه راح ارجع اتعلم اللغه من اساسياتها ^.^
      ماعندي وقت يساعدني اتعلم الاساسيات وكذا 🙁

      1. محمد ريان قال:

        علامات الاستفهام، مشكلة ترميز ولقد ذكرت كيفية عمل الترميز في الدرس
        على كل حال، ارسلي لي الملف الى moe.rayan@gmail.com

    6. LOSH قال:

      هممممم . .
      فاهمه هَـ النقطة بس اللي ابيّ اقوله . .
      إن الكود اللي حطيناه اول مابدينا شغلنا . . ف الـ HTML . . -” اقصد الدرس الأول “-

      مختلف تماماً عن الكود المنسوخ ف الحركه هذي . . !
      يعني لو تلاحظ الكود اللي حطيناه ف الـHTML لا توجد به كلمه [ تيتل ] ف النهايه وغير غير ششكله والأكواد مختلفه تماماً . .
      واللي انت ناسسخه وحاطه شكله غير كمان عن الكود الموجود ف الـ MHTL . .!
      SOOOO
      وت الحل 🙁 ؟
      +
      سوري تعبتك معاي 🙁

      1. محمد ريان قال:

        يمكن انا مغلط؟ ولكن الكود لا يهم سواء نفسه 100% أم لا
        أهم شيء انشاء صفحة ويب 😀

        هل طبقتي الخطوات؟

    7. عنكبوت قال:

      لا، اختي الكريمة الصورة توضح ملف header.php وليس الملف الذي عملناه من قبل

      انا أريكي في الصورة النتيجة، يعني بعد ماتنسخي كود الhtml اللي عملتي سابقاً وتلصقيه في ملف header.php ستكون النتيجة كما في الصورة

    8. LOSH قال:

      اخوي :(. .
      ف مرحلَـة [ وافتح ملف الhtml اللي سوينا..وانسخ الكود من الاعلى الى وسم الtitle ] . .
      كود html اللي قلت لي اكتبه ف الدرسه الأول يختلف تماماً عن اللي مصوره :(. .
      اللي قلت لي اكتبه هذا هو . .

      [ 01
      02
      03 كيفية عمل قالب ووردبريس
      04
      05
      06
      07
      08
      09
      10
      11
      12
      13
      14
      15
      16 ]
      < يعني راح يبدأ ملف الـ html بهَـالكلام ، ومافي كلمة تايتل . .
      فَـ يّ حبذا تشوف هَـ الموضوع 🙁 . .
      + مشششكور حملت البرنامج وضبط معاي ^.^
      باقي لي شوي تحمسست اخلص اسسرع ^.^

    9. محمد ريان قال:

      اي اصدار يفي بالغرض، حتى معالج النصوص اللي يأتي مع الويندوز يفي بالغرض، اضغطي الزر الايمن على ملف header.php فتح باستخدام معالج النصوص

    10. LOSH قال:

      حاولت احمله نفس الحكايه 🙁 ،
      اتوقع الإتصال اللي ف العمل ضعيف . .
      إن شششا الله أرد البيت وأجرب مارا 2 . .
      طيّـب فيه اصدار معيّـن ولا كل الإصدارات تفيّ بِـ الغرض ؟

    11. محمد ريان قال:

      هذا الرابط : http://download.tuxfamily.org/notepadplus/5.9.2/npp.5.9.2.Installer.exe

      اسم البرنامج : notepad++

      العفو 🙂

    12. LOSH قال:

      اخويّ كِـل ما أضغط داون لود ، تطلع لي صفحة [ مشكلة ف التحميل ]
      مادري هو الخلل من النت عندي أو من الرابط نفسسه . .
      فَ يَ حبذا تتأكد لي من الرابط ، + لو الرابط أوكِ يّ ليت تقولي اسم البرنامج وانا احمله من مكان 2 ^.^

      وشششكراً مقدماً . .

    13. LOSH قال:

      اخويّ كِـل ما أضغط داون لود ، تطلع لي صفحة [ مشكلة ف التحميل ]
      مادري هو الخلل من النت عندي أو من الرابط نفسسه . .
      فَ يَ حبذا تتأكد لي من الرابط ، + لو الرابط أوكِ يّ ليت تقولي اسم البرنامج وانا احمله من مكان 2 ^.^
      وشششكراً مقدماً . .

    14. محمد ريان قال:

      بدايةً، أرحب بكي في عنكبوت، يتوجب علي معرفة المشكلة أولاً ليتسنى لي المساعدة

      واجهتي مشكلة في فتح header.php
      لم تستطيعي تحرير الملف؟

      هذا رابط المحرر الذي أستخدمه download

      بعد تستطيبه، اضغطي بالزر الايمن على header.php ومن ثم تحرير بواسطة notepad++ (edit via notepad++)

    15. LOSH قال:

      السلام عليكم ورحمَـة الله وبركَـآته ،
      بدايّـةً أخيّ : أود شكرك ع شرحك الراقي ، والمفهوم ^.^
      استطيع القول بأنكَ قد أبدعتَ حقَـاً بما سردت =)
      ولكن !
      واجهتنيّ مشكله واتمنى أن تفيدنيّ فيها 🙁 ، ف أسرع وقتٍ ممكن . .
      فَ عمليّ كلُـهُ يتوقف على هذهِ المعضله . .
      سأتطرق لهَـا :
      بِـ التسبة لمفكرتك أخي 🙁 ، فَ هي تختلف تمام الإختلاف عن مفكرتي 🙁
      فَ مفكرتي غير مدعومه بِـ البرنامج ” ع حسب ظني ” ، يساعد ع تصنيف الأكواد بـ الطريقه التي تكتبها !
      حاولت التغاضي عن الامر ولكن ! ، واجهتني مشكله ف فتح [ header.php ] . .
      فَ يّ حبذا أن تحل ليّ هذهِ المشكله وسأكون لك من الشاكرات 33> . .

    16. pc portable قال:

      ممتاز جدا اخي الكريم

    17. هند قال:

      شكرا اخوي على هذا الموضوع و الشرح الكافي ما قصرت

    18. أبو سعود قال:

      مرحبا بالجميع.
      يسلمو أخي محمد على الدروس الرائعة، ولكن كنت أتمنى لو تحدثت عن المعايير القياسية للتصفح، فكثير من المواقع لا تراعي هذه المعايير للأسف، ويؤسفني أيضا إن مدونتك منها.
      اعذرني أخي، ربما لا يحق لي نقدك ولكن هو واجب علي؛ فأنا أحب الخير لك كما أحبه لنفسي، وأتمنى أن يزور مدونتك كل الناس من جميع الأصناف والأشكال.
      ولكن التصميم الحالي لا يُخَوِّل كفيف بدأ للتو بالتصفح ولا يعرف أصوله جيدا من تصفح موقعك.
      1% من المكفوفين يُعَدُّونَ محترفين في مجال التصفح، ويستطيعون الوصول إلى المعلومة النصية أينما كانت، وأحمد الله إنني منهم.
      ولكن، ماذا عن الباقي؟
      نصيحة من أخ محب: اقرأ في إمكانية الوصول لذوي الإعاقة البصرية إلى مواقع الإنترنت وحاول تطبيق ما قرأت.
      وأنا جاهز لأي مساعدة.
      أنتظر ردك ويسلمووووووو على المواضيع الحلوة.
      تحياتي لك وفي أمان الله.

      1. محمد ريان قال:

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

    19. لطخات قال:

      سوف أقرأ الأجزاء الباقية لأتعلم تصميم قالب شكرا لك على مواضيعك المميزة بارك الله فيك

      1. محمد قال:

        يشرفني وجودك أخي..وتأكد اني راح أساعدك بأي شكل كان 🙂

    أضف تعليقاً

    لن يتم نشر عنوان بريدك الإلكتروني. الحقول الإلزامية مشار إليها بـ *