الدورة الشاملة لـ سكربت الووردبريس + تصميم وتركيب قوالب ووردبريس [ PSD ---> HTML ---> WP ]

[يوسف العتيبي]

مرحباً أحبتي الكرام,, رمضان كريم, وتقبل الله منَّا ومنكم الصيام والقيام وصالح الأعمال,, أللهم أمين..

حيآآكم الله جميعاً في هذه الدورة المباركة بإذن الله تعالى,, وأتمنى أن تحوز على رضاكم..

إخواني الكرام سأقدم بإذن الله تعالى دورة تتعلق بشيء قليل ما نجده في المواقع العربية, ألا وهو الووردبريس أو سكربت الووردبريس للتدوين!

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

​

الفهرس:

العنوان: دورة تصميم وتركيب قوالب ووردبريس [ PSD ---> HTML ---> WP ]:
​

- المقدمة.
---

يجب عليك تسجيل الدخول او تسجيل لمشاهدة الرابط المخفي

[إنتهى]
---

يجب عليك تسجيل الدخول او تسجيل لمشاهدة الرابط المخفي

[إنتهى]
---

يجب عليك تسجيل الدخول او تسجيل لمشاهدة الرابط المخفي

[إنتهى]

- إنشاء مدونة ووردبريس:
---

يجب عليك تسجيل الدخول او تسجيل لمشاهدة الرابط المخفي

[إنتهى]
---

يجب عليك تسجيل الدخول او تسجيل لمشاهدة الرابط المخفي

[إنتهى]
---

يجب عليك تسجيل الدخول او تسجيل لمشاهدة الرابط المخفي

. [إنتهى]

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

يجب عليك تسجيل الدخول او تسجيل لمشاهدة الرابط المخفي

. [إنتهى]
---

يجب عليك تسجيل الدخول او تسجيل لمشاهدة الرابط المخفي

. [إنتهى]
------

يجب عليك تسجيل الدخول او تسجيل لمشاهدة الرابط المخفي

. [إنتهى]
------

يجب عليك تسجيل الدخول او تسجيل لمشاهدة الرابط المخفي

. [إنتهى]
---

يجب عليك تسجيل الدخول او تسجيل لمشاهدة الرابط المخفي

. [إنتهى]
---

يجب عليك تسجيل الدخول او تسجيل لمشاهدة الرابط المخفي

. [إنتهى]
--- التركيب أو التكويد.
-----

يجب عليك تسجيل الدخول او تسجيل لمشاهدة الرابط المخفي

يجب عليك تسجيل الدخول او تسجيل لمشاهدة الرابط المخفي

[إنتهى]
----- التكويد الأساسي بأكواد الووردبريس. [قريباً]
----- إستخدام مكتبة الـ jQuery الجيكويري. [قريباً]

- الخاتمة.
--- القالب الذي تم إنشائه في الدورة + الخاتمة. [قريباً]

سيكون طرح الدروس يومياً حسب ترتيب التصنيف..
هذا واسأل الله التوفيق والسداد..

هناك مقابل للدورة ألا وهي دعوة صالحة لي ولوالدي وللمسلمين بظهر الغيب..

​

 

[يوسف العتيبي]

[ المقدمة ]

ووردبريس:
ووردبريس (WordPress): هو نظام لإدارة المواقع بشكل عام والمدونات بشكل خاص وتم بناءه باستخدام لغة PHP وقواعد بيانات MySQL، وهو مفتوح المصدر وقام ببرمجته مجموعة من المطورين المتطوعين.
14.7% من أفضل 1 مليون موقع يستخدم ووردبريس حسب إحصائيات أليكسا إنترنت ، و 22% من المواقع الجديدة تستخدم ووردبريس.

​

 

[يوسف العتيبي]

[ الخصائص والمميزات]

مما يميز الووردبريس مايلي:
- نظام القوالب: حيث يمكنك تغيير التصميم بسهولة وإبتداءاً من الإصدار 3.4 تم دعم تعديل القالب والمعاينة بشكل حي ومباشر.
- إدارة متكاملة للنظام: توفر لوحة تحكم لإدارة النظام بشكل متكامل.
- روابط صديقة لمحركات البحث.
- تدعم الإضافات Plugins،وهي أحد أهم الميزات التي تتمع بها الووردبريس وتضم أكثر من 22200 إضافة.
- إمكانية إنشاء التصنيفات بشكل شجري (متداخل).
- التنبيهات والتعقيبات: تنبهيك في حال تم ربط موضوع مع موقع آخر.
- إمكانية إنشاء صفحات ثابتة.
- إمكانية مشاركة الكتابة مع أكثر من الأشخاص.
- إنشاء قائمة بالزوار الذين كتبوا تعليقات في المدونة.
- يمكن إيقاف IP محدد من كتابة أي تعليق.
- دعم للوسوم (Tag).
- إمكانية إنشاء مربعات في القائمة الجانبية بسهولة.
- تطبيقات خاصة لأنظمة الجوالات والأجهزة اللوحية.

​

 

[يوسف العتيبي]

[ التدوين المتعدد ]

ان الووردبريس يمكنه تقديم خدمة المدونات المتعددة أو ووردبريس ملتي يوزر تسمي بـ Wordpress MU وتم دمج هذه الميزة مع ووردبريس بشكل مباشر بدأً من الإصدار 3.0, وأصبح بإمكانك إنشاء أكثر من مدونة على موقع واحد وعلى نفس قاعدة البيانات وعلى نطاق فرعي فهي تعتبر الحل الامثل إذا كنت تريد إنشاء استضافة مدونات خاصة بك وتقدمها كخدمة لزوارك ويمكنك مراقبة المدونات والتعديل بمحتواها بحرية تامة بصفتك المدير العام للخدمة المقدمة وكل ذلك من لوحة تحكم واحدة.

يجب عليك تسجيل الدخول او تسجيل لمشاهدة الرابط المخفي

يجب عليك تسجيل الدخول او تسجيل لمشاهدة الرابط المخفي

يجب عليك تسجيل الدخول او تسجيل لمشاهدة الرابط المخفي

​

 

[يوسف العتيبي]

- إنشاء مدونة ووردبريس:
--- حجز دومين.
- - - - - -
مرحباً إخواني الكرام,, نواصل معكم هذه الدورة..
إذا أعجبك الووردبريس وتريد إنشاء مدونة خاصة بك, تكتب بها ما تشاء, وتضع فيها ما تريد, فلا بد لك من مسآحة خاصة بك, تضع فيها مدونتك كي يراها الناس في الشبكة العنكبوتية,,

أول شيء تقوم به هو حجز دومين:

ما هو الدومين؟؟
الدومين هو العنوان الخاص بك على شبكة الإنترنت, بمعنى أن لكل موقع عنوان خاص به, ولا بد أن تحصل على عنوان خاص بك أيضاً حتى يزورك الناس وتتمكن من نشره!.

مثال ذلك: لمنتديات زيزوووم الغالية عنوان خاص بها هو: www.zyzoom.org
حيث: zyzoom.org هو عنوانك فتكتب فيه ما تريد: www.yourname.com

إذاً كيف تحصل على عنوان خاص بك؟

الطريقة سهلة للغاية وليست معقدة كما يظن الكثير!!
أول خطوة تقوم بها هي الذهاب إلى موقع معين لتسجيل العنوان عندهم ثم تقوم بربط عنوانك على المساحة التي سنقوم بحجزها لاحقاً,, هذا كل ما يتعلق بالدومين أو العنوان..

** تابع الشرح لتحصل على دومين خاص بك! **

1) إذهب إلى موقع CO.CC لتحصل على دومين مجاني خاص بك:

يجب عليك تسجيل الدخول او تسجيل لمشاهدة الرابط المخفي

بعد الدخول إلى الموقع تابع الشرح:

أكتب في مربع النص الموجود بين www. و .co.cc أكتب فيه العنوان الذي تريده

هكذا:

لقد إخترت عنوان: zyzblog وأنت أكتب ما تريده وما يناسب تخصص مدونتك!
بعد كتابتك للعنوان إضغط على زر: التحقق من التوفر.

ستظهر لك هذه الشاشة:

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

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

أكمل البيانات المطلوبة منك وأدخل بريد الالكتروني الصحيح حتى يتم إرسال المعلومات إليك
ثم إقبل الشروط واضغط على زر مواصلة: contiue
ثم تابع:

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

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

وتابع الشرح:

مبروووك أخي العزيز, لقد حصلت على عنوان خاص بك, وسيتم تفعيله في أقل من 48 ساعة!

الآن إضغط على زر: الإعداد, وتابع الشرح:

ستخرج لك هذه الصفحة وفي الإسفل شرح لكيفية التعامل مع الدومين إلخ..

لكن إضغط على زر الإعداد
وتابع:

عليك إختيار الخيار الأول: Name Servers (DNS)
وهي تسمح لك بربط العنوان بالمساحة التي سنشرحها لاحقاً.

وهذه صورة لمربع إدخال الـ DNS الخاص بمساحتك حتى يتم ربطها مع الدومين أو العنوان!

إلى هنا وصلنا للنهاية,, وسنشرح في الجزء القادم بإذن الله تعالى حجز مساحة وربطها بالعنوان أو الدومين.

والله ولي التوفيق.

​

 

[يوسف العتيبي]

- إنشاء مدونة ووردبريس:
----- حجز مساحة + ربط الدومين ( العنوان ) بالمساحة الجديدة.
- - - - - -
مرحباً إخواني الكرام,, نواصل معكم هذه الدورة..

كما ذكرنا سابقاً لابد لك من دومين و مساحة خاصة بك, وهناك كثير من الشركات تقدم إستضافة لمدونتك بمساحات مختلفة.

سأشرح الآن بأذن الله طريقة حجز مساحة مجانية, الطريقة سهلة للغاية.

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

لنفترض أن حجم تبادل البيانات أو الباندويث لديك هو 100 ميقابت.
ولديك ملفين أو برنامجين حجم كل واحد منها 50 ميقابت,,
وقام الزائر بتحميل كل الملفين, أصبح المجموع حجم الملفين 100 ميقابت,,
وهي المساحة القصوى للباندويث, عند ذلك سيتم إغلاق الموقع,, لأنك إستهلكت الـ 100 ميقابت من الباندويث.

لذلك يجب عليك التفكير جيداً حتى تختار الخطة الأنسب لموقعك.

نبدأ على بركة الله بحجز مساحة مجانية:

إذهب إلى موقع:

يجب عليك تسجيل الدخول او تسجيل لمشاهدة الرابط المخفي

لحجز إستضافة مجانية.

وتابع الشرح:

في الأعلى إضغط على وصلة: Free Hosting.

هنا مواصفات الأستضافة:
المساحة: 100 ميقا ( 1 جيجا ).
حساب FTP مهم لنقل الملفات إلى موقعك - سنشرحه لاحقاً -.
لوحة تحكم للمساحة.
يدعم الـ PHP و قواعد البيانات mysql.
وأيضاً إضافة دومين فرعي أو ربط المساحة مع الدومين, وهذه مهمه جداً في دورتنا هذه.
وأخيراً بدون إعلانات,
في أسفل الصفحة تجد بعض المواصفات
ومنها الباندويث أو حجم تبادل الملفات التي شرحناها في الأعلى, يسمح لك بـ 5 جيجا, وهي مناسبة جداً.

تابع بقية الشرح:

في أعلى الصفحة إضغط على: click here to sign up for free hosting.

الآن يطلب منك إدخال بياناتك.. ولاحظ أن الإسم سيكون هو الدومين! أكتب ما تريد لأننا سنقوم بتغييره!
لكن لا تنساه لأنك ستحتاج إليه!.
أدخل الإسم - البريد الألكتروني الصحيح لإستقبال بيانات الموقع الجديد,
تم إختر تصنيف موقعك [هواية] - وادخل كود الحماية.

بعد إكمال البيانات كما هو موضح في الصورة إضغط على: register للتسجيل!
وتابع الشرح:

هذه الصفحة تقول لك لقد تم إرسال البيانات على بريدك الألكتروني.
الآن إفتح بريدك وستجد فيه المعلومات

هذه الرسالة.. إذا لم تجدها في صندوق الرسائل ستجدها في البريد الغير هام., وقم بفتح الرسالة.

إضغط على الرابط الموجود لديك في الرسالة, ستذهب إلى صفحة التفعيل.

إضغط على هذا الزر.

هذه الصفحة تقول لك: مبروووك لقد تم إنشاء موقعك بنجاح..
الرابط الأزرق خاص لدخول لوحة التحكم للموقع السي بانل.
وبيانات الدخول: إسم المستخدم الذي تم حجبه بالأسود.
والرمز السري كما أدخلته سابقاً.

وسيتم إرسال رسالة اليك وفيها رابط موقعك ومعلومات مهمة جداً للموقع:

كما هو موضح في الصورة. ويجب عليك حفظ هذه المعلومات وتسجيلها في ورقة خارجية.

وأخيراً إنتيهنا من حجز مساحة خاصة بنا وتفعيلها بنجاح.
لكن هناك مشكلة.. ألا تلاحظ أن اسم المستخدم أصبح هو الدومين!! وهو طويل جداً !!

كود:

يجب عليك تسجيل الدخول او تسجيل لمشاهدة الرابط المخفي

ما الحل؟؟

الحل سهل جداً.. سنقوم بربط الدومين أو العنوان الذي حجزناه مسبقاً بالمساحة. وهي عملية سهلة جداً.

تابع الجزء الثاني الآن...

[ربط الدومين ( العنوان ) بالمساحة الجديدة]

الآن سنقوم بربط الدومين الذي قمنا بحجزة مسبقاً بالمساحة الجديدة..

تابع معي الشرح:

إذهب إلى موقع CO.CC الذي حجزنا فيه الدومين:

يجب عليك تسجيل الدخول او تسجيل لمشاهدة الرابط المخفي

بعد الدخول إلى الموقع:

إضغط على [ ضبط النطاق ] أو

يجب عليك تسجيل الدخول او تسجيل لمشاهدة الرابط المخفي

أضغط على [ مستخدم عائد ] لتسجيل الدخول.

يجب عليك تسجيل الدخول او تسجيل لمشاهدة الرابط المخفي

سجل دخولك ببياناتك التي سجلت بها سابقاً عند حجز الدومين.

ستظهر لك هذه الصفحة

وهذا هو الدومين الذي تم حجزه مسبقاً.
إضغط على كلمة: الإعداد.

أيضاً إضغط على زر: الإعداد.

عليك إختيار الخيار الأول: Name Servers (DNS)

ستظهر لك هذه النافذة,,

الآن توقف هنا وإفتح صفحة جديدة في متصفحك وتابع الشرح,,

الآن سندخل إلى لوحة تحكم الموقع,, إدخل من هنا:
كود:

يجب عليك تسجيل الدخول او تسجيل لمشاهدة الرابط المخفي

- قم بإدخال إسم المستخدم المُرسل إليك في الرسالة عند حجز المساحة, وهو عبارة عن رموز
هكذا: b7_100000000
- أدخل الرمز السري الذي أستخدمته في التسجيل.

المعلومات مرفقة في رسالة التسجيل:
المطلوب:
Cpanel Username
Cpanel Password
ثم إضغط على تسجيل الدخول: Login.
ويمكنك تبديل اللغة الى العربية.
بعد تسجيل الدخول ستظهر لك هذه الصفحة:

إضغط على: أسماء النطاقات الإضافية.

الآن ركز جيداً في هذه الخطوات:

الخطوة الإولى:
أكتب عنوان أو دومين موقعك في مربع النص عند رقم 1.

العنوان الذي حجزته مسبقاً هو zyzblog.co.cc

أكتب عنوانك الذي حجزته لكن بدون .http://www .

ثم إضغط على زر: إنشاء الحقول.
بعد الضغط على الزر ستخرج لك هذه الرسالة:

وتعني أنه تم الربط بنجاح, لكن إنتظر.. ويطلب منك إدخال عنوان الـ DNS في حسابك على الدومين حتى يتم الربط.


الخطوة الثانية: إدخال الـ DNS .

المطلوب الآن هو رقم 2 في الصورة

إنسخ العنوان الموجود في أسفل الصورة على اليسار:
ns1.byet.org
ns2.byet.org
ns3.byet.org
ns4.byet.org
ns5.byet.org

إنسخها إلى الفراغات في صفحة إعداد الدومين على موقع co.cc
هكذا..

بعد النسخ واللصق في الخانات إضغط على: الإعداد.

وستخرج لك هذه الرسالة:

تم التقديم بنجاح.

إضغط موافق أو OK.
---

الآن حاول الدخول إلى موقعك بالعنوان أو الدومين الذي تم ربطه
سأدخل على عنواني.

كود:
zyzblog.co.cc

سنرى إذا تم الربط أو لأ...

إنظر إلى العنوان في الأعلى!!
وأنظر إلى ملفات الموقع - الموقع فارغ.!!

إذا ظهر لك كما في الصورة فمبروووك عليك تم الربط بنجاح!!

الآن إنتهينا من حجز العنوان و حجز المساحة وربط العنوان بالمساحة..

وأسصبح لديك موقع فارغ في النت.. :d:

تستطيع وضع ما تشاء من ملفات وصفحات إلخ...

لكن إنتبه لهذه النقطة المهمة:
إذا دخلت على ملفات الموقع ببرنامج الـ FTP أو بمدير الملفات عن طريق السي بانل ستجد مجلد بأسم الدومين الجديد:

كما هو ظاهر في الصورة مجلد بأسم الدومين تماماً zyzblog.co.cc
هذا المجلد تضع فيه جميع ملفاتك والسكربتات لأنه أصبح العنوان الرئيسي الآن,, فتضع كل شيء بداخله

الملفات توضع بداخل هذا المسار تماماً:
/zyzblog.co.cc/htdocs/

حيث أن:
zyzblog.co.cc مجلد للدومين الجديد, وبداخله مجلد آخر أسمه htdocs وهو الذي تضع فيه كافة الملفات والسكربتات.


وهذا سيكون درسنا في الجزء القادم [ تنزيل وتركيب الووردبريس ]..

ونراكم على خير بإذن الله تعالى في الجزء القادم...

*** *** *** *** *** *** *** *** *** ***
*** هااام جداً ***
يجب عليك المُحافظة على بيانات الموقع بشكل كامل [ بيانات حسابك في co.cc الخاص بالدومين - بيانات جميع موقعك إسم المستخدم وكلمة المرور إلخ.. ] ولا تنشرها لإحد, لأنه سيستطيع الإضرار بموقعك.
ولاتنسى تسجيلها في ورقة خارجية وحفظها بمكان آمن..

*** *** *** *** *** *** *** *** *** ***

​

 

[يوسف العتيبي]

- إنشاء مدونة ووردبريس:
--- تنزيل وتركيب الووردبريس.
- - - - - -
مرحباً إخواني الكرام,, نواصل معكم هذه الدورة..

اليوم بأذن الله تعالى سنبدأ معكم شيء جديد ومميز, وهو تنزيل سكربت الووردبريس Woordpress المعربة.

[[ الجزء الأول ]]
::إنشاء قاعدة بيانات للمدونة::

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

إذهب إلى لوحة تحكم الموقع ( السي بانل - Cpanel ) عن طريق هذا الرابط:
كود:

يجب عليك تسجيل الدخول او تسجيل لمشاهدة الرابط المخفي

و إدخل ببياناتك التي تم إرسالها لك عند تسجيلك.


بعد تسجيل الدخول إختر قواعد البيانات mysql

ستظهر لك هذه الصفحة:

أكتب إسم قاعدة البيانات التي ترغب بإنشائها..
أنا قمت بتسميتها بـ blog

ثم إضغط على: إنشاء قاعدة بيانات.

تم إنشاء قاعدة البيانات كاملة.

وإسمها لدي: b7_1010101001_blog

الآن إنتهينا من جزء قاعدة البيانات.

وسنقوم بتنزيل سكربت الووردبريس وتعديل ملف الـ config ثم نرفعه بـ FTP إلى الموقع.

[[ الجزء الثاني ]]
::تعديل ملف الكونفيج::

أولاً قم بتحميل سكربت الووربربس من هنا:

يجب عليك تسجيل الدخول او تسجيل لمشاهدة الرابط المخفي

الحجم: 5 ميقابت.

ثم فك الضغط عن السكربت:

ستجد ملف بإسم wp-config-sample.php

قم بتغيير إسمه إلى: wp-config.php

ثم إفتح الملف ببرنامج المفكرة,, وتابع الشرح:

هذه الخطوة مهم جداً و يجب الإنتباه عند تغيير أي شيء

- - إسم قاعدة البيانات: قم بنسخ إسم قاعدة البيانات التي أنشأتها في سابقاً وضعها بين الأقواس. 'هنا' بدون مسافات أو أي رموز أخرى.

- - إسم المستخدم: ضع إسم المستخدم الذي تدخل به إلى لوحة تحكم الموقع ( السي بانل ) بين الأقواس 'هنا' بدون مسافات أو رموز أخرى.

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

- - عنوان خادم قاعدة البيانات:
عنوان الخادم تجده في اليسار, هنا:

طبعاً كل شركة إستضافة تختلف عن الإخرى.

قم بنسخ عنوان الخادم بين الأقواس 'هنا' بدون مسافات أو رموز أخرى.

والباقي أتركه كما هو,,
هكذا, لكن غير البيانات إلى بياناتك

البيانات التي في الصورة وهمية فقط ليست صحيحة :d:

ثم أغلق الملف ووافق على التعديل.
--------------------------------------
في هذا الجزء شرحنا تعديل ملف الكونفيج الخاص بالووردبريس,
وسننتقل الآن إلى رفع السكربت الى الموقع عن طريق برنامج الـ FTP.

تابع الشرح..

[[ الجزء الثالث ]]
::رفع سكربت الووردبريس إلى الموقع وتثبيته::

لرفع السكربت إلى الموقع نحتاج إلى برنامج مهم جداً لإصحاب المواقع..
برنامج الـ FTP
إسم البرنامج: LeapFTP
الإصدار: 3.1.0.50
الحجم: 2 ميقابت

يجب عليك تسجيل الدخول او تسجيل لمشاهدة الرابط المخفي

قم بتثبيت البرنامج ثم تابع الشرح:

قم بتشغيل البرنامج, وهذه أيقونته:

وهذه نظرة سريعة على البرنامج:

أولاً: قم بإدخال عنوان المضيف أو الخادم,, وتجده في السي بانل يسار الشاشة,, هنا بالضبط:

المحاط بالمربع الأحمر,, أنسخه ثم ضعه هنا:

وبجانبه: User ضع فيه أسم المستخدم الخاص بدخولك إلى لوحة التحكم ( السي بانل ).
والـ Pass: ضع فيه كلمة المرور الخاصة بدخول لوحة التحكم ( السي بانل ).

و الـ Port: فدعه كما هو, الإفتراضي = 21.

الآن إضغط على زر الإتصال:

الآن ستظهر لك ملفات موقعك:

هذه ملفات الموقع!,, وسنضع جميع الملفات داخل المربع الأحمر (لا يهمك الإسم, فهو يختلف بحسب الدومين لديك)

الآن أدخل داخله, ستجد مجلد بإسم: htdocs أدخل بداخله أيضاً..

الآن إنتبه لهذه النقطة جيداً..

إذا كنت تريد مدونتك تظهر بشكل مباشرة بالموقع,, أي هكذا
www.youname.com
إذا تم الدخول على العنوان مباشرة تظهر مدونتك

فقم برفع محتويات مجلد wordpress فقط,, ولا ترفع المجلد نفسه wordpress معها.
--
أما إذا كنت ترغب بأن تكون المدونة داخل مجلد داخل الموقع, أي هكذا
www.youname.com\blog

blog = مجلد يمكنك تسميته بما تشاء.

فقم بتغيير مجلد wordpress إلى blog أو أي إسم تريده يظهر بعد عنوانك ثم إرفع المجلد كاملاً إلى الموقع

يعني هكذا:
إذا كنت تريد المدونة تظهر بهذا الشكل:
www.youname.com = قم برفع محتويات المجلد فقط.
www.youname.com/blog = قم بتسمية المجلد إلى blgo ثم إرفعه كاملاً.
----
وطريقة الرفع هكذا:

على اليسار: الملفات في جهازك تضغط عليها بالزر الأيمن ثم تختار upload
وسيتم رفعها,, وبإمكانك تحديد مجموعة من الملفات ورفعها..

وعلى اليمين: الملفات الموجودة بموقعك.

ولاحظ أن المدونة لدي سيكون الدخول إليها هكذا:
www.zyzblog.co.cc/wordpress
لأني وضعت ملفات سكربت ووردبريس داخل مجلد wordpress.

قد تتأخر عملية الرفع على حسب سرعة الإتصال لديك..

إذا تم رفع المدونة بنجاح,, أكمل المتابعة لشرح تثبيت الووردبريس على الموقع.

[[ الجزء الرابع]]
::تثبيت سكربت الووردبريس::

يبدوا أن من هذه النقطة إلى نهاية الدورة ستكون الدروس شيقة جداً,, وإن كانت الدروس التي ستلي هذا الجزء متعبة للغاية وتحتاج إلى جهد في التطبيق لكنها ممتعه للغاية ,, لإنك ستتعامل مع تصميم + تقطيع + برمجة قالب الووردبريس :q:..

نتابع الآن الجزء الأخير من درس هذا اليوم:

سنقوم بتثبيت السكربت على الموقع:
قم بالدخول على العنوان التالي:

كود:
http://zyzblog.co.cc/wordpress/wp-admin/install.php



zyzblog.co.cc = ضع بداله عنوان موقعك.
wordpress = إذا وضعت مجلد للمدونة إكتب إسمه بدال wordpress
وإذا لم تضع مجلد [ أي الموقع مباشر ] فقم بمسح: /wordpress .

الآن سنبدأ بالتنصيب..
تابع الصورة والشرح عليها..

واضحة جداً:d:

قم بوضع بياناتك ثم إضغط على: تنصيب ووردبريس.

مبروووك المدونة الجديدة :d:
إضغط على زر: دخول.

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

وإستمتع بمدونتك الجديدة.

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

إلى هنا إنتها هذا الدرس لهذا اليوم كاملاً,, والحمد لله أولاً وأخيراً..

غداً بإذن الله تعالى سنتجه إلى دروس مختلفه تماماً وتتطلب منك جهد ووقت وتركيز كبير,,
لكن ليست صعبة مع الممارسة.

..آراكم على خير..

​

 

[يوسف العتيبي]

- الإنطلاق في عالم تصميم وتقطيع وتركيب وبرمجة قوالب الووردبريس:
--- مقدمة.
- - - - - -
مرحباً بكم إخواني الكرام في جزء جديد من دورتنا هذه,, اسأل الله أن ينفعنا بها.

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

لكن أحب في البداية أن انوه على أنت التركيب لا اقصد به تركيب القالب..

وإنما أقصد به تحويل التصميم إلى صفحة HTML بالأكواد الخاص به ثم من HTML إلى

قالب ووردبريس وفي هذه النقطه سنقوم بإستخدام الأكواد الخاصه بالووردبريس,,
وسنشرحها بالتفصيل!!..

​

 

[يوسف العتيبي]

- الإنطلاق في عالم تصميم وتقطيع وتركيب وبرمجة قوالب الووردبريس:
--- البرامج المعتمدة في الدورة.
- - - - - -
مرحباً بكم إخواني الكرام..

بإذن الله تعالى سنتعامل مع أكثر من برنامج وهي كالتالي:

برنامج الفوتوشوب للتصميم.

يمكنك إستخدام اي إصدار..
بعض المواضيع للبرنامج مع رابط التحميل..

يجب عليك تسجيل الدخول او تسجيل لمشاهدة الرابط المخفي

وهنا مجموعة من الإصدارات في برنامج واحد:

يجب عليك تسجيل الدخول او تسجيل لمشاهدة الرابط المخفي

من مواضيع الأخ الغالي: maax جزاه الله خير.

برنامج لتحرير نصوص الويب.

موضوع للأخ maax جزاه الله خير:

يجب عليك تسجيل الدخول او تسجيل لمشاهدة الرابط المخفي

أو يمكنك إستخدام هذا البرنامج الخفيف: Notepad++

للتنزيل من موقع الشركة:

يجب عليك تسجيل الدخول او تسجيل لمشاهدة الرابط المخفي

الحجم: 5 ميقابت.

وأخيراً برنامج السيرفر الشخصي,,
وهذا ما سنشرحه في الجزء التالي.

​

 

[يوسف العتيبي]

- الإنطلاق في عالم تصميم وتقطيع وتركيب وبرمجة قوالب الووردبريس:
--- البرامج المعتمدة في الدورة.
------ تنزيل وتثبيت السيرفر الشخصي.

-------------

مرحباً أخواني الكرام...

سنتطرق في هذا الجزء الى تنزيل وتنصيب برنامج السيرفر الشخصي.

لكن ما هو السيرفر الشخصي؟

هو برنامج تستطيع من خلاله تشغيل السكربتات عليه أو برامج الـ php و mysql التي لا تعمل إلى على الأنترنت..

ببساطه لو قمت بصنع ملف php فلن يعمل لديك, إلا إذا توفر السيرفر المحلي..

وكذلك تستطيع من خلاله تجربة وإختبار برامجك الخاصه بالويب..

فنحن سنحتاجه جداً في هذه الدورة,,

تنزيل البرنامج:
تتوفر برامج متعددة لكن آرى أن افضلها هو AppServ
.. لذلك سنستعمله هنا بإذن الله..

يجب عليك تسجيل الدخول او تسجيل لمشاهدة الرابط المخفي

الحجم: 16 ميقابت.
----------------------------

طريقة التثبيت:
بعد تحميل البرنامج قم بتشغيله ثم تابع الشرح:

إضغط: Next

أضغط: IAgree

اتركه كما هو
إضغط: Next

ضع علامة "صح" عليها كلها ثم أضغط Next

الخانة الأولى: أتركه كما هو.
الخانة الثانية: ضع بريد الألكتروني.
الخانة الثالثة: اتركه كما هو.

من الأفضل تركه فارغ.

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

أخيراً أضغط على: Finish

شرح إستخدام البرنامج:

ستلاحظ أنه تم إضافة مجلد في القرص الصلب C

هذا المجلد هو السيرفر الشخصي

وتضع ملفاتك داخل مجلد www .

وتفتح الصفحة عن طريق كتابة هذا الرابط:
كود:

http://localhost/index.html

أنا لدي الصفحة: index.html داخل هذا المسار:

C:\AppServ\www

فإذا أردت تشغيله أذهب إلى:
إبدأ --> تشغيل, ثم أكتب هذا الرابط:

كود:

http://localhost/index.html

حيث أن: index.html هو اسم الصفحة المراد فتحها.


-----------------

دخول لوحة التحكم:
للدخول الى لوحة تحكم قاعدة البيانات

أكتب هذا الرابط في مربع "تشغيل" عن طريق ابدأ:

كود:

http://localhost/phpmyadmin/

ستظهر لك نافذه تطلب منك إدخال إسم المستخدم وكلمة المرور:
إسم المستخدم هو: root
كلمة المرور: إفتراضياً تكون فارغة,
لكن إذا وضعت لها كلمة مرور اثناء التنصيب فضعها.
..............

​

 

[يوسف العتيبي]

- الإنطلاق في عالم تصميم وتقطيع وتركيب وبرمجة قوالب الووردبريس:
--- البرامج المعتمدة في الدورة.
------ تركيب المدونة على السيرفر الشخصي.

-------------

مرحباً إخواني الكرام..

في الجزء السابق قمنا بتنزيل السيرفر الشخصي وتثبيته..
والآن سنقوم بتركيب سكربت الووردبريس على السيرفر الشخصي,,

حتى يكون العمل على تكويد القالب سريع وتأخذ راحتك في الشغل حتى إذا انقطع النت :d:

كما تتذكرون في السابق قمنا بتركيب الووردبريس على موقعنا الشخصي,, الطريقة لا تختلف كثيراً
بل أسهل,,

نبدأ مع بإذن الله تعالى:
------------------------

سنستخدم طريقة جديدة لتثبيت الووردبريس بدون التعديل على ملف الكونفيج config ..
تستطيع إستخدامها في موقعك..

أولاً: أدخل على لوحة تحكم قواعد البيانات:

ثم أعمل كما في الصورة:

1) أكتب أسم قاعد البيانات: وهي لدي: wp_zyzblog .
2) إضغط على زر: تكوين .

تم تكوين قاعدة البيانات wp_zyzblog بنجاح.

-----------------

ثانياً: إذهب إلى هذا المسار:
C:\AppServ\www
وهو المسار الذي تضع فيه الملفات لعرضها على السيرفر الشخصي كما تتذكرون,,

قم بلصق مجلد الووربريس كاملاً داخله,, [ تستطيع تغيير إسم المجلد إلى ما تريد ]

ملاحظة: من الأفضل عدم التغيير على ملف الكونفيج ويكون جديد,, لتفادي الأخطاء
وأنصحك تحمل الووردبريس ثم تفك الضغط وتنسخه مباشره الى السيرفر المحلي داخل www حتى لا تحدث أخطاء.

يمكنك تحميله من هنا:

يجب عليك تسجيل الدخول او تسجيل لمشاهدة الرابط المخفي

وتابع الشرح:
طبعاً نفتح المتصفح أو مربع التشغيل من قائمة ابدأ,, ثم تكتب العنوان:
http://localhost/wordpress

حيث أن wordprees هو إسم المجلد.

يخبرك أن ملف الكونفيج غير موجود.. لكن سينشئه..
إضغط: إنشاء ملف الإعدادات.

سطلب منك المعلومات الموجودة..
إضغط: ابدأ الآن.

إسم قاعدة البيانات: أكتب إسم قاعدة البيانات التي أنشأتها في الأعلى,, .
أسم المستخدم لقاعدة البيانات: root ( ثابت ).
كلمة المرور لقاعدة البيانات: لدي root. أكتب كلمة المرور التي وضعتها أثناء تنصيب السيرفر المحلي..
وإذا لم تضع كلمة مرور فدعها فارغه,

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

أنتهينا من المعلومات الأساسية بدون كتابتها في ملف الكونفيج config .

إضغط على: البدء بالتنصيب .

أكمل المعلومات كما في السابق,,

أنتهينا من التثبيت بنجاح.. واعطاك اسم المستخدم..
إضغط على زر: دخول , حتى تدخل الى لوحة تحكم الووردبريس !:d:

***********

غداً بإذن الله تعالى سنشرح التصميم,, طبعاً الملف PSD جاهز :d:

ونراكم على خير..

​

 

[يوسف العتيبي]

- الإنطلاق في عالم تصميم وتقطيع وتركيب وبرمجة قوالب الووردبريس:
--- التصميم.

-------------

مرحباً بكم أخواني الكرام..

اليوم موضوعنا عن تصميم القالب للووردبريس..

وأحب أن أقول لكم أن الووردبريس مرن جداً تستطيع وضعه كما تشاء..

كما تستطيع تصميم قالبك الخاص كيفما شئت,,, وستسطيع تركيبه على الووربريس !!

تريد موقع إخباري بقالب خااص؟؟ الووردبريس يوفر لك ذلك..

تريد موقع برامج؟؟ الووردبريس يوفر لك ذلك..


بكل سهوله تستطيع التلاعب بالووردبريس لتعمل به ما تشاء وكذلك القوالب,,

لذلك تجده الأشهر بين المدونين وكذلك بعض مواقع الأخبار تستخدم الووردبريس !!

-------

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

الووردبريس ليس مثل سكربت المنتديات له نمط معين في التصميم!!
-------

طبعاً اخواني التصميم جاهز,, قمت بتصميمه قبل البدء بهذه الدورة

وراعيت فيه أنه يكون قالب عادي جداً وبسيط لآخر درجه.. لأن دورتنا ليست عن التصميم, فالكل يستطيع أن يصمم بطريقته الخاصة.. بل الدورة عن كيف تركيب أو تكويد القالب بعد التصميم..

صورة للقالب الذي سنعمل عليه إن شاء الله:

هذا هو القالب بالشكل الكامل الذي ستكون عليه المدونة في نهاية الدورة بإذن الله تعالى ...

طبعاً القالب له أجزاء معينه لها تسميتها وهي:
1- الهيدر: وهو الجزء العلوي من القالب
2- الجزء الأوسط, ويشمل الـ sidebar و singel .
3- الفوتر وهو الجزء الأسفل من القالب.

سيتم شرحها بالتفصيل في الجزء القادم.


صورة لنافذة الليرات:
قمت بتلوين الليرات بألوان مختلفة حتى ما تتعبون تبحثون عن لير معين :d::d:

يجب عليك تسجيل الدخول او تسجيل لمشاهدة الرابط المخفي

الحجم: 119 كيلوبايت.

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

الشرح سيكون بالفيديو بإذن الله تعالى..

وإلى اللقاء في الجزء القادم..

​

 

[يوسف العتيبي]

- الإنطلاق في عالم تصميم وتقطيع وتركيب وبرمجة قوالب الووردبريس:
--- التقطيع.

-------------

مرحباً بكم أخواني الكرام من جديد..

اليوم بإذن الله تعالى سنبدأ بشيء جديد ويحتاج إلى الدقه أيضاً.. وهو سهل,,

تقطيع التصميم الذي أرفقته لكم في الجزء السابق..

لن نستخدم أداوت أو طرق معقده,, كل ما سنستخدمه هو أداة التحديد العاديه,,

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

وقد قسمت الدرس إلى 3 أقسام:

[1]: تقطيع الهيدر:

للتحميل برابط مباشر:

يجب عليك تسجيل الدخول او تسجيل لمشاهدة الرابط المخفي

حجم الملف: 27.37 MB

وبعد فك الضغط: 37.9 MB

مدة الفيديو: 25 دقيقه و 56 ثانيه.

[2]: تقطيع الكونتنت (الجزء الأوسط):

للتحميل برابط مباشر:

يجب عليك تسجيل الدخول او تسجيل لمشاهدة الرابط المخفي

حجم الملف: 16.20 MB

وبعد فك الضغط: 22.6 MB

مدة الفيديو: 17 دقيقه و 38 ثانيه.

[3]: تقطيع الفوتر:

للتحميل برابط مباشر:

يجب عليك تسجيل الدخول او تسجيل لمشاهدة الرابط المخفي

حجم الملف: 10.95 MB

وبعد فك الضغط: 15.1 MB

مدة الفيديو: 12 دقيقه و 11 ثانيه.

بعد متابعتك للدرس الأول ستكون قادراً على تقطع الإستايل بشكل ممتاز بإذن الله تعالى

في الجزء القادم: سنبدأ بتحويل التصميم إلى HTML بإذن الله تعالى..

وإلى اللقاء في الجزء القادم...

​

 

[يوسف العتيبي]

- الإنطلاق في عالم تصميم وتقطيع وتركيب وبرمجة قوالب الووردبريس:
---- التركيب أو التكويد.
----- التكويد بـ Html و Css

-------------


مرحباً بكم أخواني الكرام من جديد..

في هذا الجزء الجديد والمختلف كلياً عن الأجزاء السابقه, سنقوم بتركيب (تكويد) القالب الذي قمنا بتقطيعه في الجزء السابق..

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

HTML + CSS

آخر إصدار للـ HTML هو الخامس,,

وآخر إصدار للـ Css هو الثالث..

الـ Html خاص ببناء صفحة الأنترنت من نصوص ونماذج وجداول ... ألخ.
والـ Css لغه تنسيقيه خاصه لتنسيق ما بنيته بـ الـ Html .
بمعنى آخر: تحديد الطول والعرض وتركيب الصورة بماكنها المطلوب وتحديد الخط وحجمه وشكله وتغيير الخلفيه... ألخ.

وكلا اللغتان لهما دروس كثيره في الأنترنت تستطيع البحث عنها..

لذلك سأقتصر على الأشياء المهمه في الدورة..

ملاحظه هامه جداً:: المتصفح المستخدم في الدورة هو متصفح الفايرفوكس.. قد تواجه بعض المشاكل في التنسيق اذا استخدمت متصفح آخر..

[ توضيح بعض أهم العناصر التي سنستخدمها في هذا الجزء ]


نبدأ بـما يسمى بـ "وَسم":
الوسم هو الكود بذاته , مثل:

<a href="#">Zyzoom</a>

هذا يسمى وسم رابط نصي,, لأنه يحتوي على النص"Zyzoom"
والرابط تضعه بدل رمز # .

وسم الفتح هنا هو:

<a href="#">

وَ وسم الإغلاق:

</a>

وهناك وسوم كثيره في الـ HTML وكل وسم له وظيفته المعينه, مثل الوسم السابق خاص بوضع رابط لما بداخله.
وايضاً هناك وسوم للنماذج و وسوم للجداول و وسموم للقوائم النصيه و وسوم للنصوص.

سنتعرف عليها أكثر في دورتنا هذه..
----------

سيمر علينا في هذا الجزء وسوم عامه وتسمى وسم div .

ويكون هكذا:

<div id="zyzoom"><!--بداية فتح الوسم-->
<a href="#">Zyzoom</a>
</div><!--إغلاق الوسم-->

كما تلاحظ " div " وهو عام تضع بداخله ما تشاء من وسوم,,

و وظيفته أنه يكون كـ إطار لما بداخله كي تتحكم بسهوله بها بسهوله تامه..

وهناك أمر أحب أن أنوه عليه قبل البدء وهو:

<div [COLOR=Blue]id[/COLOR]="[COLOR=Red]name[/COLOR]">
</div

أو

<div [COLOR=Blue]class[/COLOR]="[COLOR=Red]name[/COLOR]">
</div

كما ترى نفس الوسم لكن الإختلاف في شيء واحد وهو:
الـ "id" و الـ "class"

تستخدمان في تحديد إسم معين للوسم.. حتى إذا اردت تنسيقه بـ Css تكتب إسم الوسم ثم التنسيقات الخاصه به.

وهناك إختلاف بسيط بين الـ "id" وَ "class" هو أن:

الوسم المبدوء بـ "id" لا يمكن تكراره في نفس الصفحه.
والوسم المبدوء بـ "class" يمكن تكراره بنفس الأسم, وتنسيق وسم واحد منها يطبق على كل الوسوم إذا كان لها نفس الأسم والخاصيه "class".
----

مع الشرح سأتطرق لشرح أكثر الوسوم إستخداماً في هذا الجزء:

أعددت 105 صور للشرح في هذا الجزء فقط!!!

الله يعينكم علي:d:
وسأضع الصور بالترتيب في مجلد آخر الموضوع بإذن الله تعالى..

نبدأ على بركة الله...

(1)

أولاً: قم بإنشاء مجلد جديد على سطح المكتب, وقم بتسميته ما تشاء.

(2)

إفتح المجلد ثم قم بإنشاء مجلدين آخرين:
قم بتسمية المجلد الأول إلى: image وهذا المجلد نضع فيه الصور التي تم تقطيعها من القالب.
وقم بتسمية المجلد الثاني إلى: js : وهو مجلد سنحتاجه, وسنشرحه في جزء خاص به.

(3)

قم بنقل صور القالب الذي تم تقطيعه إلى مجلد image.

(4)

قم بفتح محرر النصوص (تم وضعها في جزء سابق ), وسأختار الدريم ويفر,
ثم إختر HTML .
إذا كنت تستخدم notebad++ أختر من قائمة language أختر منها Html . وإذا كانت القائمه مُفهرسه أختر رمز H ثم من القائمه المنسدله HTML.

(5)

لاحظ الكود المُحاط بالمربع الأسود, الكود في الأعلى: أكتب إسم الصفحه بدل: "untitlred Ddocument".
وفي المربع الأسفل يظهر لك "وسمين" أسفل بعضهما, وسيتم بناء الموقع بينهما.

(6)

أكتب هذه الأكواد.
لاحظ الوسم "<body>" في أول السطر, وفي آخر السطر: "</body>" تم كتابة الأكواد بينها.

هنا نبدأ الآن بكاتبة أجزاء الموقع الرئيسيه, وهي: الهيدر Header - الكونتنت Content - الفوتر Footer .


لاحظ أننا وضعنا لهم نفس الوسم لكن يختلفون في الأسماء, والـ Html حساسه لحالة الأحرف..
الـ id : يعني أن هذا الوسم لا يتكرر إلا مره واحده في الصفحه فقط..
حيث سيكون لدينا هيدر واحد وكذلك كونتنت وفوتر 1.

طبعاً يفضل وضع تعليق بعد نهاية الوسم لكي تعرفه عندما تكثر الأكواد..
والتعليق هكذا:

<!--هنا التعليق-->

طبعاً لا يظهر في الصفحه.

(7)

الآن قم بحفظ الصفحه لاكن لا تغلقها!
إحفظها بإسم: index.html .

[1] تكويد وتنسيق الهيدر.
====================

(8)

كما ترى بدأنا بتكويد أول جزء من أجزاء الهيدر,, كما هو ظاهر في الصورة.

داخل وسم "Header" كتبنا وسم جديد بإسم "H-top" وطبعاً "id" لانه غير متكرر.

وبداخله وسم نصي وهو:

[COLOR=Black]<p id="Welcome">[/COLOR]

وهذا الوسم يأخذ عرض الصفحه كامله إلا إذا حددت له عرض مُعين كما سنبينه .

وأسمينها بـ "Welcome".

أيضاً كتبنا وسم جديد داخل وسم "H-top" وهو وسم "Clock" للوقت والتاريخ,
و "span" وسم نصي حر.. أي أنه يأخذ طول الكتابه فقط, ويتمدد معها.

أكتب الأكواد السابقه..

(9)

الآن نكتب وسم جديد للشعار, ونكتبه داخل وسم "Header" بعد نهاية وسم"Clock" .
الوسم أسميناه "logo" وداخل هذا الوسم وسم رابط وهو

[COLOR=Black] <a href="#">[/COLOR]

وداخل وسم الرابط وسم صورة

[COLOR=Black]<img src..../>[/COLOR]

وضعنا وسم الصورة داخل وسم الرابط كي تصبح الصورة قابله للضغط,, أي انها مربوطه بموقع.

src: لتحديد الصورة.
title: إذا لم تظهر الصورة ستظهر عنوانها.
alt: عند وضع المؤشر على الصوره سيخرج العنوان.

ووضعنا هذه الوسوم داخل وسم "logo" حتى نتحكم في الصورة بشكل سهل جداً.

(10)

الآن سنكتب وسم جديد خاص لأيقونات الـ Rss و المشاركه مع المواقع الإجتماعيه.

كما في الصورة السابقه,, وسم جديد بإسم "site_share" يحتوي على 3 وسوم للصور مربطوه بوسم الرابط.

(11)

هنا كتبنا وسم الصفحات,, الوسم بإسم "pages" وداخل هذا الوسم وسوم قوائم نصيه وهي:
<ul> : هذا يعني المكان الذي سيحتوي على الـ <li>.
<li> : هذه هي القائمه وتكتب العنوان داخلها.
طبعاً داخل الـ <li> وسم رابط.. لجعل عنوان الصفحه قابل للضغط للإنتقال إليه.

(12)

هنا تكويد "خريطة الزائر", والوسم أسميناه بـ "map" وبداخله وسم نصي كما شرحته سابقاً.

(13)

هنا تكويد لنوذج البحث.. طبعاً هناك وسم خاص فيه لا يمكن مشاركته مع غيره.
لاحظ أن فورم "نموذج" البحث داخل وسم عادي وهو "search"
وبداخله وسم خاص للنماذج وهو: <form> :
name: تعني إسم النموذج.
method: وتعني ماذا تريد أن تفعل بالبيانات المدخله؟؟ ولها خيارين:
1- post = إرسال البيانات.
2-get = جلب البيانات.

وطبعاً في البحث نريد إرسال بيانات لذلك سنستخدم الـ "post" .

بداخل وسم <form> وسمين "input" وهما لإستخدام الإداوات:

الأول: input ونوعه "text" أي اداة النص - title = العنوان للاداة - value = قيمة الأداة - id = مُعرف الأداة, وتستطيع إستخدامها في التنسيق بـ css .

الثاني: وسم input ونوعه "button" أي زر , وباقي الخصائص تم شرحها أعلاه.

(14)

الآن إنتهينا من تكويد الجزء الأول وهو الهيد.

ولاحظ هذا الشكل الغير مرغوب لدى الجميع,, بدون أي تنسيق أو ترتيب !!
---------
الآن سنقوم بإستخدام اللغه الثانيه وهي الـ Css لتنسيق الهيدر حتى يصبح كما في التصميم..

نبدأ الآن:

(15)

أفتح ملف جديد بالبرنامج الذي تستخدمه.

(16)

أختر لغة: Css . بالدريم ويفر,,

أما اذا كنت تستخدم الـ notepad فأختر من قائمة
language > C > CSS

(17)

الآن قم بحفظ الصفحه: File > save As و قم بتغيير إسم الصفحه إلى: Style.css.

(18)

كل متصفح من المتصفحات الخاصه بالأنترنت مدموج معها تنسيقات إفتراضيه للغة الـ Html .

لذلك ستجد الفورم الأفتراضي بدون تنسيق في متصفح يختلف عن الفورم بدون تنسيق في المتصفح الآخر,,

لذلك حتى نقوم بتنسيقنا الخاص, لابد من إرجاع قيم التنسيق إلى الصفر مثل ما يُقال.

وهذه الطريقه تمسى: Reset Css وهو كود Css طبيعي جداً موجود بداخله وسوم Html تم تصفيرها وإرجاعها إلى الوضع العادي.

أدخل على الموقع الموضح أعلاه, ثم تابع الشرح.

(19)

قم بنسخ ما بين الخطين الأفقيين .

(20)

قم بلصقها في بداية صفحة الـ Style.css.

(21)

الآن توجه إلى صفحة الـ Html السابقه, ثم أكتب هذا الكود فوق <title>... .

<link media="screen" type="text/css" rel="stylesheet" href="style.css" />

هذا الكود مهم جداً وهو يقوم بربط ملف الـ Style.Css بـ Html حتى يتم تطبيق التنسيقات التي تجريها على ملف Style.css .

href = إسم ملف التنسيق Style.css .

(22)

الآن قم بفتح صفحة الـ index.html بمتصفح الويب.. ستلاحظ أن المسافات الزائده قد إختفت,, وهذا عمل كود reset css .

(23)

الآن سنقوم بتنسق جسم الصفحه وهو وسم "body" [راجع الصورة رقم 5 ].

أولاً طريقة كتابة أسم الوسم المراد تطبيق التنسق عليه:

** إذا كان الوسم بدون "di" أو "class" أو مُعرف, مثل الـ "body" تماماً:
هذا تكتب إسم الوسم مباشره بدون أي رموز قبله.

وبقية الأنواع سيتم التطرق لها عند ذكرها.

أسم العنصر هو "body" ثم نفتح التنسيق بـ "قوس معكوف" }

ونغلقه بـ {

أي هذا:

xxxxx {
هنا الخصائص
}

حيث أن "xxxxx" هو أسم العنصر, والقوس الأول فتح بداية التنسيق, والقوس الآخر إغلاق التنسيق.

وطريقة كتابة الخصائص هكذا:
الخاصيه:(نقطتان رأسيتان) القيمه ; (فاصله منقوطه)

الآن سأشرح الخصائص:
width = العرض.
height: الطول.
direction: إتجاه الصفحه, وتحتوي على 3 قيم:
--- inherit = أظنها الوضع الإفتراضي!! والله أعلم.
--- RTL = جهة الصفحه من اليمين إلى اليسار.
---LTR = جهة الصفحه من اليسار إلى اليمين.
backgraound = خلفية الصفحه: تستطيع وضع صورة (سنشرحها) أو خلفية لون ويكون هكذا:
علامة "#" ثم رمز اللون.
وأيضاً تستطيع وضع صورة و لون.
border-right: خط من جهة اليمين, وكتابتها هكذا:
border-right: حجم الخط (مسافه) نوع الخط (مسافه ) لون الخط;
و solid = نوع الخط متصل.

border-left: جهة الخط من اليسار,, وبقية الخصائص كما في السابق.
margin: الهوامش التي تكون خارج العنصر.
padding: الهوامش التي تكون داخل العنصر.
font-family: نوع الخط.
font-size: حجم الخط بالبكسل.
color: لون الخط.

هذه أغلب الخصائص التي سنستعملها في التنسيق, بقي القليل سأشرحها عند المرور عليها.

(24)

text-decoration: شكل النص, هل تريد خط أسفله أو فوقه أو في المنتصف.
none: لا شيء.
وباقي الخصائص تم شرحها أعلاه..

أما العناصر:
فإن "a" إشاره إلى وسم الروابط سواء نصيه أو صورة, لكن خصائص الخط لا تنفع إلا في الروابط النصيه.

a:hover = النص عند مرور الماوس فوقه, أي سيتم تنفيذ هذه الخصائص إذا تم مرور الماوس من فوقه.

(25)

أعلاه تم تنسيق جسم الصفحه.. الآن سنبدأ بتنسيق الأجزاء الرئيسية الثالث, وهي: الهيدر, الكونتنت, الفوتر.

[||||]: بداية تنسيق الهيدر:

لاحظ الصورة أعلاه: سنقوم بتنسيق الهيدر ثم تنسيق ما يحتويه الهيدر من وسوم..

لاحظ أننا أستخدمنا الرمز "id" ثم إسم الوسم,, إذاً كيف نكتبه بـ CSS:

** إذا كان الوسم يحتوي على الرمز "id" نستخدم رمز"#" للإشاره إلى أنه "id" ثم إسم الوسم, مثال:

#Name {
هنا الخصائص
}

لاحظ أننا كتبنا رمز "#" ثم إسم العنصر ثم الأقواس.
وإسم العنصر هنا هو: Header.
يجب الأنتباه إلا أن الـ HTML و الـ CSS حساسه لحالة الأحرف.

(26)

هنا إستخدمنا خاصيه جديده في الـ CSS:
position: أي الموضع ( موضع العنصر).
والقيمه: relative: وظيفتها أنها تسمح لك بتحريك العناصر التي تكون داخل هذا العنصر.

backgraound: هنا الخلفيه كما أشرت أليها سابقاً. - url = رابط الصورة (الرابط بين قوسين), no-repeat = بدون تكرار الصورة.

ولاحظ أننا أخذنا قيمة الـ width من عرض الصورة. وقيمة الـ height من طول الصورة, ولا بد أن تكون القياسات مطابقه لقياسات الصورة و بالبكسل.

(27)

الآن تم وضع الخلفيه للهيدر,,

لماذا أصبحت النصوص في الجهه اليمنى من الصفحه؟؟ لأننا إستخدمنا القيمة RTL والتي تعني Right To Left إستخدمناها في العنصر body في الخاصيه direction.[إرجع للخطوه رقم 33].

(28)

في النقطه السابقه إنتهينا من الهيدر, والأن نُنسق ما بداخل الهيدر.
هذا الجزء الذي يكون في الأعلى ويحتوي على محتويين نصيين, أحدهما كلمة ترحيبيه أو أي كلمة ترغب بها. والثانيه تقوم بعرض التاريخ والوقت.
الوسم: H-top لتنسق الشكل والخلفيه, ويحتوي على وسمين هما:

Welcome : العباره الترحيبيه.
Clock : تعرض الساعه

ولاحظ أننا كتبنا الوسم الرئيسي (H-top) ثم كتبنا الوسم الفرعي (Welcome) و (Clock), من الأفضل كتابتها هكذا,, الوسم الرئيسي أولاً ثم بجانبه الوسم الفرعي.

وهنا إستخدمنا خاصيه جديده من خصائص الـ css وهي :
float: وتعني الإزاحه, وتحتوي على 3 قيم:
inhehirt: أظنها الوضع الطبيعي.
none: بدون.
Right: إزاحه بإتجاه اليمين.
Left: إزاحه بإتجاه اليسار.

وأيضاً إستخدمنا: text-align = إتجاه النص والقيم هي:
Right: يمين.
Left: يسار.
Center: توسيط.
justify: محاذاة النصوص من الجانبين اليمن واليسار.

(29)

الآن سنقوم بتنسيق شعار الموقع..
أستخدمنا العرض والطول للصورة.
position: وتعني الموضع كما شرحناها,
وقيمه جديده وهي: absolute: وتعني أن العنصر حر وقابل للتحرك داخل الوسم التي تكون خاصية "position" فيه = "relative"

ونقوم بتحريكها في الأتجاهات الأربع:
Right: يمين.
Left: يسار.
Top: أعلى.
bottom: أسفل.
ثم نضع القيمه بعد الخاصيه بالبكسل.

هنا حركنا شعار الموقع من الأعلى 39 بكسل و إلى اليمين 50 بكسل.

(30)

هنا قمنا بتحريك الوسم الذي يحتوي على الأيقونات إلى مكانه الصحيح بإستخدام الـ Top و Left بعدما وضعنا له القيمه absolute لخاصية الـ posiition.

(31)

وهنا نقوم بتحريك الأيقونات ووضع مسافه بينها كما في التصميم.. والقياسات تم أخذها من التصميم.
ولاحظ أن وسوم الأيقونات ذاتها هي فرعيه داخل وسم رئيسي وهي site_share .

(32)

هنا تنسيق وسم الصفحات ( ليس النصوص وإنما الوسم المحتوي على النصوص ).

وضعنا له خلفيه و الـ width + height هي طول وعرض الخلفية.

(33)

الآن نقوم بتنسيق النصوص.. لو تذكر معي أننا جعلنا النصوص داخل وسوم خاصه بالقوائم النصيه [راجع الخطوه رقم 11].

هنا سأشرح لكم الوسوم المستخدمه:
pages ul:
أولاً pages : هذا الوسم الرئيسي لجزء الصفحات.
و الـ ul هذا وسم ( كتبناه هكذا لأننا لم نضع له معرف أو رمز ) الـ ul يكون بداخله (يحوي على ) الـ li.

pages ul li:
الـ pages و الـ ul شرحناها أعلاه,, و الـ li هو الذي يكون داخل الـ ul وهو يحتوي على النصوص التي تريدها كـ قوائم.

أدري أنكم مافهمتم علي:d:

أحس أني ما أعرف أشرح:f:

pages ul li a :

الـ a تعني الرابط الذي يحتوي على الـ li الذي يحتوي على ul :hh:

تقوم بتنسيق النص المضاف له رابط.

الخصائص الجديده هنا:
display: شكل النص من ناحية التجانب.
أي تريد النص أسفل بعضه أو بجانب بعضه؟.. طبعاُ في التصميم القوائم بجانب بعضها.. لذلك إستخدمنا القيمه:
inline: وتعني القوائم على خط واحد.

font-weight:bold: وتعني شكل الخط,, وهنا أخترنا الخط يكون عريض.

(34)

هنا قمنا بتنسيق جزء خريطة الزائر أو أين أنا؟ ..

والخصائص تم شرحها في الأعلى..
لكن لحظ خاصية الـ margin : تحوتي على قيميتن:
الأولى: 6px = تضيف مسافه بمقدار 6 بكسل من الأعلى والأسفل.
والثانيه: 8px = تضيف مسافه بمقدار 8 بكسل من اليمين واليسار.

وتستطيع كتابة الجهات الأربع في سطر واحد هكذا:

#mm {
margin: 1px 2px 3px 4px;
}

وتكون هكذا: فوق = 1 بكسل يمين 2 بكسل أسفل 3 بكسل يسار 4 بكسل.

وإذا كانت قيمة margin تساوي auto فهي تقوم بتوسيط العنصر تلقائياً في الصفحه.

(35)

تنسيق البحث:
الوسم الأول هو الذي يحتوي على نموذج البحث.

الوسم الثاني هو لمربع النص الخاص بالبحث: وتم تنسيق موضعه والخط وإضافة الصورة كـ خلفية وتصفير الحدود.

و الـ stext هي قيمة الـ id في الـ html [راجع الخطوة رقم 13].

الوسم الثالث: لتنسيق ( زر ) البحث.

واستخدمنا خاصيه جديده هي:
Cursor: وتعني شكل أيقونة مؤشر الماوس عند مرور الماوس على العنصر.
والقيمه: pointer = تعطي الماوس شكل إصبع يد.

(36)

بحمد الله تم تكويد الهيدر بـ Html و تنسيقه بـ Css .. وأصبح مطابقاً للتصميم بفضل الله تعالى.


وبهذه الطرق والخصائص سننهي الجزئين الباقيين وهما الـ Content و الـ Footer بإذن الله تعالى.

[2] تكويد وتنسيق الكونتنت.

(37)

كما ترى في الصورة أن الكونتنت ينقسم إلى قسمين:
على اليمين: البوست Posts هو لعرض التدوينات والأرشيف وصفحة الخطأ 404 والبحث ... ألخ.
على اليسار: السايدبار Sidebar أو القوائم الجانبيه, ويعرض قوائم تختارها في لوحة التحكم الخاصه بالووردبريس, حيث تستطيع منها عرض قائمة الإرشيف و أقسام الموقع (التصنيفات) و تستطيع وضع بنرات إعلانيه... ألخ.

(38)

الآن سنبدأ بجزء التدوينات (Posts) لكن أحب أن أنوه على ان هذا الجزء يحتوي على 3 أجزاء وهي:
جزء العنوان.
جزء نص التدوينه.
نص معلومات التدوينه.

(39)

هذا وسم جديد يحوي جميع التدوينات قمنا بكتابته في الجزء الثاني من الأجزاء الرئيسية وهو الـ "Content",,
ولاحظ أننا قمنا بتسمة الوسم بـ "Posts" ووضعنا الـ "id" لأننا لا نريده متكرر,, لماذا؟؟ لأن الذي سيتكرر هو وسم آخر بداخله أسمه "Psot" وسنضع له "class".
يعني أن وسم الـ "Posts" هو وسم يحوي جميع التدوينات.. وهذا الوسم كـ إطار يُحيط بـ الـ "Post".

(40)

الآن قمنا بكتابة وسم الـ "Post" داخل وسم "Psots" ووسم الـ "Post" يعرض تدوينه واحده..
لكننا إستخدمنا الـ "Class" كي تتكرر وتعرض التدوينات بشكل متتالي.

(41)

الآن نبدأ بالجزء الأول, وهو كتابة وسم العنوان
أسمينا الوسم "Post_h1" إشارة إلى عنوان التدوينه, ووضعنا الـ "class" لأننا نريده أن يتكرر مع كل تدوينه.
أكتب الوسم الموجود في الصورة داخل وسم الـ "Post" وليس "Posts"
أنا أستخدمت وسم النص <p>,, ومن الأفضل إستخدام الوسم الخاص بالعنواين وهو وسم

<h1>هنا العنوان</h1>

لكن في التنسيق لا تنسى أن تكتب h1 بدل p .

طبعاُ وضعنا النص كـ رابط بإستخدام وسم الرابط:

<a href"#">رابط نصي.</a>

(42)

وسم جديد بإسم "entry" لعرض المقال أو محتوى التديونه من صور أو نصوص.. وهذا الوسم يكون داخل وسم "Post" و أسفل وسم العنوان "Post_h1" بعد وسم غلقه مباشره.

و وضعنا وسم نصي جديد وهو الوسم "<p>" لكي ننسق النصوص بـ CSS وأيضاً أن النصوص لا من الأفضل وضعها داخل الوسوم الخاصه بها.

(43)

هذا وسم خاص بمعلومات التدوينه مثل: الكاتب والتاريخ وعدد الزوار والطباعه ...
أسمينا الوسم بـ "Post_meta" وبداخله وسم نصي وهو "<p>" وبداخله نكتب المعلومات كتابه عادية..
والكلمات التي تريدها في رابط ضعها داخل وسم الرابط:

<a href="#">هنا النص برابط.</a>

(44)

الآن قم بحفظ صفحة الـ Html .
إنتيهنا من تكويد الجزء الأول داخل الكونتنت وهو الجزء الخاص بالتدوينات أو المقالات..



(45)

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

طبعاً هكذا إنتيهنا من الجزء الأول وبقي الجزء الثاي وهو الـسايدبار أو القوائم الجانبيه "sidebatr" .

(46)

وسم السايدبار أو القوائم الجانبيه يكون أسفل الوسم "Posts" الذي أنتيهنا منه.
لاحظ: يكون أسفل وسم الـ "Posts" وليس الـ "Post" يعني بعد وسم الإغلاق لـ "Posts" وقبل إغلاق وسم "Contnent" أكتب هذا الوسم.

أسمينها بـ "Sidebar" و وضعنها له "id" لأنه لن يتكرر بل الأقسام التي بداخله ستتكرر.



(47)

الآن نبدأ بكتابة وسم القائمه, أسمينا الوسم بـ "widget" وجعلنها "class" لأنه سيتكرر بنفس الأسم.

بداخل هذا الوسم سنضع ثلاث وسوم:
وسم للعنوان: "widget_h1"
وسم لمحتوى القائمه: "widget_content"
وسم لإضافة الصورة الجماليه:"widget_bottom"



(48)

الوسم الذي داخل وسم "widget" وهو "widget_h1" هذا هو وسم العنوان..

ووضعت العنوان "التصنيفات" داخل الوسم النصي "<p>" .

بإمكانك وضع العنوان داخل الوسم الخاص بالعناوين:

<h1>هنا العنوان</h1>

(49)

الآن نكتب الوسم الخاص بمحتوى القائمه الجانبيه. أسميناه بـ "widget_content"
ووضعنا القوائم النصيه داخل وسمين هما:

<ul>
<li><a href="#">نص القائمه</a></li>
</ul>

(50)

هذا وسم نهاية القائمه الواحدة "widget" .

أسميناه بـ "widget_bottom" ..

لن نضع بداخلها شيء.. سنستفيد منه عند التنسيق بـ css لإضافة الصورة الجماليه التي تكون آخر القائمه, وهي المشار إليها بسهم أسود في الصورة أعلاه.

الآن سنقوم بتنسيق الوسوم السابقه..





(51)

قبل البدء بالتنسيق.. كيف نأخذ مساحة جزء الكونتنت و جزء القوائم الجانبيه؟؟

عن طريق المسطره (من أداوت الفوتوشوب )

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

الآن نقوم بعمليه حسابيه بسيطه وهي:

عرض التصميم كاملاً - عرض القائمة الجانبيه = عرض الكونتنت k:

لدينا عرض التصميم كاملاً = 1000 بكسل.
وعرض القائمه الجانبيه كما قسناها = 227 بكسل.
إذاً:
1000 بكسل -(ناقص) 227 = 773 بكسل.
وهكذا أصبح الناتج (773 بكسل) هو العرض المناسب لجزء الكونتنت أو التدوينات.




(52)

الآن نبدأ التنسيق بـ Css

ونبدأ بالجزء الذي يشمل على جزء التدوينات وجزء القوائم الجانبيه. وهو الـ"Content".

قمنا بحذف المسافات الزائده.

(53)

الآن نبدأ بتنسيق الجزء الأول داخل الـ "Contnet" وهو وسم الـ "Posts".

وضعنا علامة الـ "#" لأننا إستخدمنا الـ "id" مع الوسم في الـ HTML.

قمنا بتحديد عرض الـ "Posts" بعد إجراء العمليه الحسابيه السابقه.
والطول 100%.

ثم عملنا إزاحه للـ "Posts" بإتجاه اليمين.. لأننا نريد الـ "sidebar" القوائم الجانبيه تكون يسار.



(54)

تنسيق الجزء الثاني داخل الـ "Content" وهو "Sidebar" القوائم الجانبيه.

وضعنا له الإزاحه "float" بإتجاه اليسار.



(55)

الآن هذا هو الناتج.. تم التنسيق الجزئين ووضع أحدهما يمين والآخر في اليسار بإستخدام الخاصيه "flaot".

سننتقل إلى تنسيق الأجزاء التي يحويها الـ "Posts".




(56)

هذا تنسيق الوسم "Post" وهو للتدوينه نفسها.
وضعنا " . " قبل الوسم لأننا إستخدمنا "class" في الـ HTML.
Padding: القيمه الأولى تضيف مسافه 7 بكسل من فوق وتحت, والقيمه الثانيه لا تضيف مسافه من اليمين واليسار.

(57)

تنسيق وسم عنوان التدوينه, وليس نص العنوان.
بقية الخصائص تم شرحها في الأعلى.

(58)

تنسيق نص العنوان.. المشتمل على رابط.

(59)

تنسيق وسم محتوى التدوينه والمقال.. وليس تنسيق لـ نص التدوينه أو المقال.

"line-height" = تباعد الإسطر عن بعضهما.

(60)

هنا تنسيق نصوص التدوينه.

(61)

تنسيق وسم معلومات التدوينه.
تم أخذ الطول والعرض من الخلفيه الخاصه بها.

(62)

تنسيق نص معلومات محتوى التدوينه.

(63)

الآن أفتح صفحة index.html أو اعمل لها تحديث إذا كانت مفتوحه.
تم التنسيق كما في التصميم..


(64)

الآن قمت بتكرار التدوينه.. ولاحظ النتيجه..

ولتكرارها أعمل الآتي:

قم بتحديد أكواد الـ HTML من بداية وسم:

<div class="Post">

إلى نهاية الوسم ( أي الى وسم إغلاق الـ "Posts" ).





(65)

سنقوم بتنسيق السايدبار أو القوائم الجانبيه..




(66)

هذا التنسيق كتبناه سابقاً في الأعلى,,
..

(67)

هنا تنسيق القائمه نفسها.
حددنا عرض القائمه..
ووضعنا مسافه بمقدار 7 بكسل فوق واسفل, حتى يتم تباعد القوائم عن بعضها.


(68)

تنسيق مكان العنوان وليس العنوان. k:
وضعنا خلفيه للعنوان و الطول والعرض هي أبعاد الخلفية.. والخلفيه غير متكرره.


(69)

هنا تنسيق العنوان نفسه..
قلت في الأعلى أنه من الأفضل وضع وسم العنوان "<h1>" بدلاً من الوسم "<p>",, إذا وضعت "<h1>" ضع في التنسيق بدل "p" الموجود في الصوره أستبدلها بـ "h1".

وإذا مشيت معي لا تغير شيء دعها "p"

(70)

تنسيق محتوى القائمه الجانبيه .

أستخدمنا "reapate-y" في "backgraound" لكي تتكرر الخلفيه بشكل عمودي.


(71)

تنسيق نصوص القائمه..

يمكنك كتابة تنسيق خاص للنصوص.. لكني أفضل التنسيق الذي استعملنها مع النصوص السابقه.


(72)

تنسيق محتوى"ul" التي تحتوي على القائمه "li".


(73)

هنا تنسيق القائمه نفسها.. وليس نصوصها..

وخاصية "list-style" تضيف رمز قبل كل قائمه نصيه.. والرمز هنا هو دائره صغيره..
والقيمه الآخرى "inside" تعني أن الرمز يكون داخل القائمه وليس خارجها.


(74)

تنسيق أسفل القائمه.. وهدفنا هو وضع صوره جماليه فقط..
الطول والعرض للخلفيه.. والخلفيه غير متكرره.


(75)

هكذا أصبت القائمه الجانبيه .. كما في التصميم تماماً k:

ولاحظ أن الرمز أو النقاط التي بجانب كل قائمه فهي في الداخل وليس الخارج.. لأننا إستخدمنا قيمة "inside".


(76)

لاحظ تم تنسيق الجزء الثاني من أجزاء الموقع الرئيسيه وهو الكونتنت "Content" تم التنسيق بنجاح والحمد لله..

وهو مطابق للتصميم..

إذا اردت تكرار القائمه قم بالتحديد من بداية الوسم "widget" إلى نهايته. وقم بلصقها أسفلها تماماً..
ثم غير محتواها إلى ماتريد..

أنا استخدمت وسم نصي:

<p>هنا النص</p>

ووضعت داخلها نص.

بحمد الله تم الأنتهاء من جزئين رئيسين وهما:
الهيدر: Header .
الكونتنت - منتصف الصفحه: Content .

وبقي الآن الفوتر: Footer .

[3] تكويد وتنسيق الفوتر.

(77)

سنبني الفوتر داخل الوسم "Footer".



(78)

الآن نبدأ بالجزء الأول داخل الفوتر, وهو القوائم السفليه..

أضفنا وسم جديد داخل وسم الفوتر وهو الوسم "F_widget" إشارة إلى القوائم السفليه.

ووضعنا له "class" لأنه سيتكرر بجانب بعضهما البعض.



(79)

الآن داخل الوسم "F_widget" نكتب وسم جديد لعنوان القائمه السفليه.

ولاحظ أني إستخدمت لأول مره وسم "<h1>" للعنوان بدل إستخدام وسم "<p>" .


(80)

الآن نكتب وسم محتوى القائمه السفليه وأسميناه بـ "F_widget_content".
ووضعنا بداخله وسم "<p>" نصي واضفنا له نص.



(81)

الآن نكتب وسم جديد للصورة الجماليه في أسفل القائمه.
أسمينا الوسم بـ "F_widget_bottom".



(82)

الآن إذهب إلى أعلى الفوتر وأكتب هذا الوسم قبل بداية وسم الفوتر "Footer" وبعد نهاية وسم "Content"

<div class="clear"></div>

نريد وظيفة هذا الوسم هو حذف تأثير خاصية الـ "Flaot" التي عملناها للـ "Posts" و "sidebar".

نريد هذا الوسم يحذف تأثيرها على منطقة الفوتر.

كيف؟؟ تابع النقطه التاليه.


(83)

الآن نكتب الخصائص للوسم "clear" .
تكتبها في ملف التنسيق.

وخاصيه جديده هي:
clear: والتي تعني تنظيف, ونضع لها القيمه "both".

فقط..

(84)

لاحظ أين أتى.. في المكان الصحيح.. لو لم نستخدم خاصية الـ "Clear" لكانت الكتابة تحت القائمة الجانبيه مباشره..




(85)

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

وأعذروني على الشرح اللي في الصورة ما انتبهت له:d::d: (كللللجه حلووووه):hh:




(86)

بعد تطبيقك للنقطه السابقه قم بحفظ الصفحه "CTRL + S" ثم أعمل تحديث للمتصفح..

وشاهد النتيجه.. لقد تكررت 3 مرات.. وفي التصميم لدينا 3 قوائم..

سنعمل الآن على تنسيقها,, لكن قبل ذلك دعنا نغير المحتوى.


(87)

طبق اللي في الصورة على القائمه الثانيه.


(88)

طبق اللي في الصورة على القائمه الثالث.



(89)

الآن نبدأ بتنسيق الفوتر.
تصفير المسافات الزائده..


(90)

تنسيق القوائم السفليه..

"width" العرض: حسب عرضها في التصميم.. قسها بأداة المسطرة.

أستخدمنا "margin" لوضع مسافة 20 بكسل من فوق وأسفل.. للفصل بين الـ "Contnet" ونهاية الفوتر.
و مسافه بمقدار 30 بكسل للتباعد بين القوائم الثلاث من جهة اليمين واليسار,, كي تصبح في منتصف الصفحه.

طبعاً علمنا لهم "float" لجهة اليمين..



(91)

تنسيق مكان عنوان القوائم السفليه,, وليس نص العنوان.
الطول والعرض حسب طول وعرض الخلفيه للعنوان...



(92)

هنا تنسيق نص العنوان.
والخصائص تم شرحها في الأعلى..




(93)

تنسيق محتوى القوائم السفليه..

"repeat-y" = تكرار الخلفية بشكل عمودي..



(94)

تنسيق نصوص القوائم التي تكون داخل وسم "<p>" .




(95)

تنسيق قائمة ul .




(96)

تنسيق القوائم النصيه li .




(97)

تنسيق الوسم الذي نريده أن يُظهر لنا صورة جماليه في نهاية القوائم السفليه.

واستخدمنا خاصية "margin" لوضع مسافه بين نهاية القوائم السفليه وبداية أسفل الفوتر بمقدار 15 بكسل.



(98)

الآن بحمد الله أنتهينا من الجزء الأول في الفوتر... تم تنسيق القوائم السفليه بشكل جميل.. ومطابق للتصميم..





(99)

الآن نكتب وسم أسفل الفوتر "E_Footer"
وبداخله وسم نصي لكتابة الحقوق "<span>" وهو للنص الحر ويتمدد مع النص.

وأيضاً كتبنا وسم داخل وسم أسفل الفوتر وهو وسم "<img>" لإضافة صورة.. ووضعنا هذا الوسم داخل وسم الرابط "<a>" ,, لجعل الصورة قابله للضغط..

<a href="#"><img src="هنا رابط الصورة" /></a>

(100)

هنا تنسيق وسم "E_Footer" وما بداخله من وسوم.

وضعنا عرض الفوتر هو عرض الصفحه 1000 بكسل.

وأستخدمت خاصية الـ "position:relative" لكي تسمح لي بتحريك العناصر التي داخلها بإستخدام "Right - Left - Top - Bottom" بعد وضع قيمة الـ " position" تساوي "absolute" في العناصر المراد تحريكها.





(101)

الآن بحمد الله إنتهينا من التنسيق كاملاً بفضل الله وحده..


وأصبح الفوتر هكذا.. مطابقاً للتصميم..

(102)

إضافه هامة نسيت أن اذكرها بداية التكويد :d:

أضف هذا الوسم فوق وسم الهيدر "Header" وتحت وسم "body"




(103)

الآن أغلق وسم "warp" الذي فتحناه في النقطه السابقه, أغلقه قبل (فوق) نهاية وسم:

</body>

(104)

الآن أضف هذه الخصائص باللون الأصفر أكتبها تحت الجزء الخاص بتنسيق body .

وقم بالتعديل على الكود المضلل بالأحمر: وأمسح مايلي:

[COLOR=Navy]border-right:1px sloid #333;
border-left:1px solid #333;[/COLOR]

طبعاُ الأكواد حذفتها ليست موجوده في الصورة أعلاه.. لكن عدل عليها لديك.





(105)

في النهااايه ,,

هذه هي النتيجه التي توصلنا لها خلال التكويد بـ Html و Css وهي مطابقه للتصميم بالكامل..

والحمد لله رب العالمين

لمن لم تظهر لديهم الصور..

الحجم: [5.59 MB]

يجب عليك تسجيل الدخول او تسجيل لمشاهدة الرابط المخفي

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

في الجزء القادم بأذن الله تعالى.. سنحول صفحة index.html إلى صفحه ديناميكيه بإستخدام أكواد الـ ووردبريس..


قد أضع الجزء القادم يوم السبت: 23 \ 9 \ 1433 هـ..
وذلك نظراً لظروفي في الأسبوع القادم..

إلى اللقاء...

​

 

[يوسف العتيبي]

قريباً:
- الإنطلاق في عالم تصميم وتقطيع وتركيب وبرمجة قوالب الووردبريس:
--- التركيب أو التكويد.
----- التكويد الأساسي بأكواد الووردبريس.
​

 

[يوسف العتيبي]

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

--- التركيب أو التكويد.
----- إستخدام مكتبة الـ jQuery الجيكويري.
​

 

[يوسف العتيبي]

-القالب الذي تم إنشائه في الدورة + الخاتمة.
​

 

[MAAX]

الله يعطيك العافية اخي يوسف
موضوع رائع جدا ومميز ومبسط


يبقى الموضوع مثبت بالقسم حتى اكتمال كل شرح الدورة

 

[مـوآدع]

وعليكم السلام ورحمة الله وبركاته

دورة مميزه

أسال الله ان يجعل لك بكل حرف مما كتب حسنه

ولايحرمك الاجر ان شاء الله
​

 

[رياق]

بارك الله فيك يوسف
تقبل مني دعائي ودعمي وتقييمي


وفي انتضار باقي الدروس بفارغ الصبر