الخطوات السبع لصنع موقع 1

النسخ

1 1

2 الفهرس المقدمة... 3 البداية و ملخص عن الخطوات... 4 الخطوة األولى: الحصول على إستضافة و حجز الموقع الخطوة الثانية: تثبيت الووردبرس... الخطوة الثالثة: تثبيت القالب أو الثيم الخطوة الرابعة: إنشاء الصفحات الخطوة الخامسة: إنشاء و ترتيب القائمة الخطوة السادسة: تعديل الصفحة الرئيسية الخطوة السابعة: دخول عالم االحترافية

3 بسم هللا الرحمن الرحيم # مقدمة: مع مباشرتك لقراءة هذا الكتاب, فاعلم أنك تدخل عالم جديد, عالم افتراضي, تزدهر فيه التجارة يوما بعد يوم, تتعارف مختلف شعوب و طوائف العالم مع بعضها, تتبادل الخدمات و السلع بمقابل أو بدون مقابل, و لكن الشيء األكبر و المثير في هذا العالم, أن الناس فيها تتبادل المعلومات, بل و مجانا. عندما تقوم بإنشاء موقع, إن كان عبارة عن مدونة بسيطة,أو موقع أنباء أو متجر لبيع القمصان, فاعلم أنه يمكنك من خالل جرأتك و مهارتك في تدبير األمور, أن تجعل من هذا الموقع بمرتبة محل من المحالت الضخمة في وسط أجمل المدن و أكثرها ازدهارا كاسطنبول أو جدة أو دبي أو لندن. # هذا الكتاب يحتوي على مفاجآت, فال تتهون بالمكتوب في الخط األحمر هذا الكتاب خصص للناس الجادين في تطوير مجال عملهم و هوايتهم, الذين يتحلون باإلصرار على معرفة المزيد و تحقيق ما يريدونه. كذلك هو عبارة عن ملخص ألهم ما يجب أن تعرفه حتى تقوم بإنشاء و إدارة موقع احترافي يعمل على جميع األجهزة و ذلك باستخدام برنامج مجاني, سهل االستخدام, بل و يستخدم من قبل أكبر الشركات و المؤسسات و هو الووردبرس! هذا الكتاب باللغة العربية هو دليلك األول للحصول على موقع في كامل االحترافية قد يكلفك حوالي 0222 دوالر, وهذا بدون أن تكون لك معرفة مسبقة بتصميم المواقع أو البرمجة أو غيرها. مواقع مثل البوابة العربية لألخبار التقنية, سوق,ebay مجلة Forbes و أشهر المواقع تستخدم الووردبرس رغم بساطته. فهل أنت جاهز لتعلمه فلنبدأ # 3

4 البداية و ملخص عن خطوات العمل مع اتبعاكم للخطوات الستة األولى هذا هو الموقع الذي سوف تحصلون عليه هذا الموقع يحتوي على عديد من األشياء كالتالي: الصفحة الرئيسية صفحة من نحن صفحة فيديوهات صفحة مراسلة صفحة اتصل بنا مع خريطة نافذة إلى صفحة الفيسبوك وهو يوفر العديد والعديد من الخدمات والمزايا التي ستجدها في أحدث وأفضل المواقع. واآلن فلنبدأ بالخطوات التي تتكون منها عملية إنشاء موقع: الحصول على استضافة واالستضافة هي: أجهزة حاسوب تعمل بشكل دائم بحيث أن الزوار لديهم القدرة لزيارة موقعك في أي وقت ومن أي مكان كان. هذه الحواسب تخدم آالف المواقع وهناك شركات عالمية كثيرة و في درسنا سنسجل في شركة بلوهوست وهي من أكثر شركات االستضافة من حيث دعمها للووردبرس والجودة وفي حالتنا ستكلف االستضافة 9,6 دوالر شهريا. -7 4

5 تسجيل الموقع أو الدومين Domain والمقصود إذا كان لديك شركة تسمى mycompanyname وتريد ان تسمى موقعك أو أو حيث يكمنك التسجيل بهذا اإلسم في موقع بلوهوست عندما تحصل على االستضافة بل يمكنك نقل الموقع من شركة أخرى قد سجلت بها إلى بلوهوست, وحجز الموقع مجاني لدى بلوهوست! # سجل من خالل تصميم ويب و احصل على تركيب مجاني من فريق احترافي, للمزيد اضغط هنا تثبيت الوردبرس الوردبرس: هو برنامج إلدارة محتوى المواقع والمدونات, حيث ال حاجة لمعرفة أي لغة البرمجة. هناك مواقع عالمية تستخدم الوردبرس ومنها CNN و New York Times والكثير من المواقع العالمية. وسوف نتعلم معا كيفية استخدام الوردبرس. تثبيت القالب الموقع يتألف من قالب و الذي يعطي الشكل الخارجي للموقع و كذلك المحتوى الداخلي و الذي من خالله يمكن إدارة الموقع و من عدة أجزاء. هنا سوف نحصل على قالب مجاني يمكن الزوار من تصفح الموقع إن كان على الحاسوب أو ipad أو iphone أو أجهزة األندرويد. إضافة الصفحات حيث سنتعلم كيفية إنشاء صفحات أساسية مهمة مثل اتصل بنا, كذلك سيتمكن الزوار من إرسال رسالة لك من دون الحاجة إلى الذهاب إلى اإليميل وسوف نتعلم أيضا كيفية إنشاء صفحة وإضافة فيديوهات من YouTube و إظهار خريطة غوغل في الموقع و غيرها من األمور األساسية. إضافة و ترتيب القائمة الرئيسية القالب يتيح لنا عمل عدة أنواع من القوائم في الموقع و التي تحتوي على صفحات الموقع الرئيسية و الفرعية. سنقوم بترتيب القائمة الرئيسية أسفل الشعار, و شرح مسألة القوائم. تعديل الصفحة الرئيسية حيث أن الصفحة الرئيسية لها أهمية كبيرة بحيث تعطي لمحة أولية عن الموقع, فإن كانت جيدة سوف يقرر الزوار دخول موقعك وتصفح الصفحات األخرى من موقعك. دخول عالم اإلحتراف هذه الخطوة هي األهم لدخول عالم اإلحتراف و التنافسية # واآلن دعنا نبدء بالخطوات السالفة الذكر 5

6 الخطوة األولى: الحصول على إستضافة و تسجيل الموقع أو الدومين Domain واآلن فلنذهب إلى شركة بلوهوست من خالل هذا الرابط ثم ننقر على Sign Up Now أي التسجيل اآلن. # سجل من خالل تصميم ويب و احصل على تركيب مجاني من فريق احترافي, للمزيد اضغط هنا س ظت هر لك خانة I Need a Domain )أي أنا بحاجة إلى موقع( حيث يمكنك الحصول على موقع مجانا فال تضيع هذه الفرصة. بعد عن أن تغطت على Next سوف تظهر لك صفحة إدخال المعلومات الشخصية. الجدير بالذكر أن بلوهوست تضمن لك إعادة نقودك في حالة أن خدمتهم لم تعجبك, في أي وقت تريد. 6

7 و يليها كما في الصورة أدناه, يمكنك إختيار الدفع, إما لسنة, سنتان أو ثالثة. السعر في حالة سنة أو 20 شهر يكون 9,66 دوالر, و في حال سنتين أي 02 شهر فهو 6,66 دوالر, أما في حال 3 سنين فهي 2,66 دوالر في الشهر. أسفلها يوجد خدمات إضافية يعرضها البلوهوست تلقائيا, حيث يمكنك إزالة عالمة صح منها حتى ال تتكلف زيادة. ثم نأتي إلى الدفع, حيث هنا يمكنك الدفع باستخدام بطاقة اإلئتمان, أو بالبي بال PayPal و ذلك من خالل الضغط على More payment options أي المزيد من خيارات الدفع. طبعا الدفع ال يتم إال من خالل بطاقات اإلئتمان ذات الصالحية للدفع على اإلنترنت و التي هي موجودة عند اختيار نوع البطاقة في خانة.Card Type حيث بطاقات مثل Visa Electron و Maestro ال تصلح للدفع على اإلنترنت. و في النهاية علىك اإلشارة بعالمة صح لقبول شروط التسجيل. 7

8 وبعد ذلك سوف تحصل على ايميل من بلوهوست بالمعلومات التي قمت بالتسجيل بها حيث ستجد المعومات التالية: 8

9 الخطوة الثانية: تثبيت و تهيأة الووردبريس تنزيل الووردبريس: فلنقوم اآلن بالدخول في لوحة التحكم و ذلك بالذهاب إلى بلوهوست, و الضغط على Control Panel Login في األعلى من الموقع و ذلك للدخول في لوحة التحكم. ثم نقوم بإدخال الموقع و كلمة السر التي أنشأناها, ثم نضغط على Login وتعتبر Bluehost هي إحدى شركات االستضافة العديدة على شبكة اإلنترنت والتي توففر تثبيوت الوفود روريب رضو وة واحودة راستخدام.SimpleScripts وسفف تالحظ ذلك عند تسجيل خفلك إلى لفحة التحكم الخاصة رهم. ارحث عن أيقفنة مثل هذه: وسفف يتم تحفيلك إلى صفحة SimpleScripts مثل هذه: 9

10 ثم نض ط على Install ويمكنك اختياد المفقع الذي تريد تثبيت الفود رريب فيه ( يأ مفقعك الرئيسي أو ليلك الفرعي(. وسفف تختاد عنوفا مودونتك هنا )ال تقلق حيث سيمكنك وما ت ييره في وقت الحق(. ولديك أيضا خياد الختياد شها ات اعتما المستخدم الخاصة رك. إسم االدمن حيث يمكنك اختيار اإلسم الذي تريده, في هذا الدرس سوف نختار Admin و لكن ال أنصحك بهذا اإلسم كلمة السر اإليميل سوفف تههور لوك رعود ذلوك اللمحوات اوولوى مون مفقعوك ا Site URL هوف داروط مفقعوك ا Login URL هوف للودخف فوي الفود رريب ثم اسم المستخدم و كلمة السر. 10

11 سيظهر لك بعد ذلك الموقع كما في الصورة أدنى. هو موقع بسيط جدا يحتوي على عديد من الصفحات لكن ال تنس أننا وفرنا كثير من المال وأننا سنقوم بإضافة وتغيير كثير من األشياء حتى يعمل الموقع على جميع األجهزة كما ذكرنا في وقت سابق. االستخدام األول: واآلن علىنا الدخول كأدمن للموقع وذلك بكتابة /wp-admin بعد إسم الموقع كالتالي ستظهر لك خانة إلدخال إسم األدمن وأخرى الدخال كلمة المرور المعطاه لنا سابقا حيث سيكون علىك ادخال إسم المستخدم وكلمة السر ثم الضغط على.Log in 11

12 سيظهر لك ال WordPress وبشكل عام هو سهل و مفهومه كنظام قريب من Windows ويتيح لك العديد من األشياء حيث يمكنك من تنزيل برامج إضافية أو Plugins و التي يمكنك من خاللها الحصول على مزايا للموقع غير محدودة )مثل, برنامج لتهيئة الموقع لمحركات البحث.)All in One SEO تنزيل اللغة العربية: وأول شئ سنقوم به هو إضافة برنامج يمكننا من اعتماد اللغة العربية لل WordPress حيث سنذهب إلى ال Plugins ثم نضغط على Add New ثم نقوم بالبحث عن Wordpress Language والضغط على,Search Plugins سيظهر لك عديد من النتائج وستكون النتيجة األولى مناسبة لنا ثم نضغط على Install Now 12

13 ل ق د ت م ت ن ز ي ل Activate Plugin ن ق وم بتفعيل البرنامج وذلك بالضغط على لقد تم تفعيل البرنامج وستظهر لنا قائمة تحتوي على عديد من اللغات ولمشاهدة لغات أخرى نضغط ع ىل More Languages 13

14 ثم نقوم باختيار اللغة العربية. ستظهر لك رسالة تسألك هل تريد تغيير لغة الموقع إلى اللغة العربية نضغط على Switch Language أي تغيير اللغة. تعديل كلمة السر: واآلن فلنقوم بتغيير كلمة السر, أوال نذهب إلى زر األعضاء. ثم نضغط على Edit أي تعديل والموجودة أسفل كلمة Admin ونقوم في األسفل بكتابة كلمة سر جديدة وإدخالها مرة أخرى للتأكيد 14

15 ثم نضغط على Update Profile tasmeemweb.com مثل باقي المواقع لكنه www. إضافة www إلى الموقع: سنتحدث عن شئ آخر وهو أن موقعنا حتى اآلن موجود من غير كما هو موضح في الصورة. ومن سابق معرفتي أن إضافة www. للموقع تساعد جدا على التسويق ويكون الموقع معروف بصورة أكثر فلنذهب اآلن لحل هذه المشكلة ولنضغط على زر الرئيسية أسفل إسم الموقع كما هو موضح بالصورة. ثم نذهب إلى إعدادت في القائمة ونختار كلمة General كما هو موضح في الصورة. 15

16 ثم نقوم بإضافة www. قبل إسم الموقع في الخانتين الموضحتين في الصورة. فيصبح إسم الموقع بدل من وعلىنا اإلنتباه جيدا لعدم حدوث أي خطأ عند إضافة www. ألن وجود خطأ ممكن أن يؤدي إلى مشاكل كثيرة نحن في غنى عنها. نقوم بعد ذلك بالضغط على Save Changes والتي ستجدها في أسفل الصفحة وذلك لحفظ التعديالت التي قمنا بها. واآلن سيطلب منك إدخال إسم المستخدم وكلمة السر مرة أخرى كما فعلنا هذه الخطوة سابقا وبعد إدخال إسم المستخدم كلمة السر ستجد أنه تم إضافة www. إلسم الموقع. 16

17 الخطوة الثالثة: إختيار و تنزيل القالب واآلن نريد تغيير شكل الموقع فنذهب إلى Appearance ثم نضغط على قوالب كما هو موضح في الصورة. ثم نضغط على Install Themes كما هو موضح بالصورة. ثم نقوم بإدخال إسم ال Theme الذي نريده وهو في حالتنا responsive ثم نضغط على بحث كما هو موضح في الصورة. سيظهر لك Theme نضغط على كلمة Install Now كما هو موضح في الصورة, لتحميل القالب. ثم نضغط على كلمة تفعيل كما في الصورة. لقد تغير اآلن شكل القالب لموقعنا واآلن فلنضغط على زيارة الموقع أسفل إسم الموقع كما هو موضح في الصورة. ثم نضغط Refresh في المتصفح, حتى يتم إعادة تحميل الموقع, سنجد أنه تغير الموقع إلى القالب الجديد الذي قمنا باختياره كما هو موضح في الصورة. 17

18 والفكرة من هذا القالب أن الموقع يتغير حجمه و يتأقلم مع حجم النافذة أو المتصفح أو الجهاز. 18

19 الخطوة الرابعة: إنشاء الصفحات صفحة من نحن: فلنعود إلى الموقع بالضغط على كلمة الرئيسية كما فعلنا سابقا واآلن نريد إضافة صفحة جديدة نضغط على صفحات ثم نختيار أضف جديد كما هو موضح في الصورة. ستظهر لك صفحة جديدة نقوم بإدخال إسم الصفحة و في حالتنا ستكون )من نحن( ثم نقوم بإدخال وصف للصفحة في الخانة التالية لإلسم كما هو موضح في الصورة. ويمكننا أيضا إدخال صورة وذلك بالضغط علىUpload, ستفتح نافذة جديدة نقوم من خاللها بالضغط على Select Files كما هو موضح في الصورة. ثم تقوم باختيار الصورة التي تريد إضافتها كما في الصورة. 19

20 وسيقوم برفع الصورة أمامك كما في الصورة وبعد رفع الصورة ستظهر لك بالتفاصيل مثل Dimensions وهو في حالتنا 982*2202 وهو الطول والعرض وتعتبر هذه الصورة كبيرة بالنسبة لحجم الصفحة وللتغير نضغط على تحرير الصورة كما هو موضح في الصورة. ثم نضغط Scale Image أو التحجيم كما هو موضح في الصورة ثم نقوم بأدخال العرض ومثال سندخل 902 للعرض وستالحظ أنه تم تغير الطول تلقائيا إلى 220 كما هو موضح في صورة. ثم نضغط على تغيير مقاسات الصورة كما هو موضح في الصورة. ثم يممكننا أيضا تحديد المجال الظاهر في الصورة وذلك بالضغط والسحب على الجزء الذي نريد ظهوره كما هو في الصورة. 20

21 ثم نضغط على زر ال Crop والذي ستجده أعلى الصورة كما هو موضح في الصورة كما يمكنك أيضا تغير محاذاة الصورة بين : بدون يسار وسط يمين وفي حالتنا سوف تقوم باختيار كما أيضا يمكننا تغيير الحجم إلى: صورة مصغرة متوسط Large أو كبيرة الحجم الكامل سنقوم باختيار الحجم الكامل كما هو موضح في الصورة ثم نضغط على Insert Into Post أو وضع الصورة في الصفحة كما في الصورة 21

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

23 ويظهر لنا هذا الشريط الموضح في الصورة ألننا داخلون في ال Wordpress كذلك يظهر زر ال Edit ألننا داخلون في ال Wordpress فلنخرج اآلن وذلك بالضغط على اإلسم وهو في حالتنا Admin ثم نختار تسجيل الخروج كما هو موضح في الصورة. ثم نذهب إلى صفحتنا بشكل طبيعي كما فعلنا سابقا و نذهب إلى الصفحة التي قمنا بأضفاتها والتي هي من نحن وسنشاهد الصفحة بدون الشريط صورة وكلمة Edit 23

24 صفحة إتصل بنا: واآلن نريد إضافة صفحة إتصل بنا و التي تحتوي على خريطة غوغل نقوم بتسجيل الدخول مرة أخرى كما فعلنا سابقا. وبعد الدخول نذهب إلى صفحات ثم نضغط على أضف جديد كما هو موضح سابقا. ثم ندخل إسم الصفحة إتصل بنا كما هو موضح في الصورة ثم ندخل بعض البيانات مثل رقم الهاتف واإليميل كما هو موضح في الصورة ثم نقوم بإضافة خريطة Google عن طريق الذهاب إلى ثم نختار Maps 24

25 ثم نقوم بإدخال إسم المكان مثل Budapest كما هو موضح في الصورة # لمعرفة المزيد عن مدينة بودابست الرائعة اضغط هنا ثم نضغط على زر الرابط أو Link كما هو موضح في الصورة ثم نقوم بتعديل قياسات الخريطة بالضغط على Customize and preview embedded map كما هو موضح في الصورة. ثم نقوم بأختيار األختيار Custom ثم نغير الطول والعرض مثلما فعلنا سابقا في تغير حجم الصورة فنقوم مثال بأدخال 902 للعرض و 682 للطول كما هو موضح في الصورة. وستتعلم كيف يكون حجم الصورة مناسب لموقعك مع مرور الوقت. ثم نقوم بنسخ الرابط كما هو موضح في الشكل 25

26 ونعود إلى صفحه إتصل بنا )في الووردبرس( ونقوم باختيار HTML والذي بجانب األختيار المرئي كما في الصورة. والفرق بين مرئي و HTML هو أن مرئي هو ما يظهر للقارء أو المتصفح مرئيا أما HTML هو كود. ثم نقوم بلصق الرابط الذي قمنا بنسخه كما هو موضح في الصورة. ثم نضغط على نشر ثم نقوم بمعاينة الصفحة وذلك بالضغط على Preview Changes واآلن يمكننا أن نري الصفحة بعد إضافة البيانات والخريطة. 26

27 وقد نحتاج إلى الضغط على زر Refresh كما فعلنا سابقا وذلك ألن تغيير الصفحة قد يحتاج إلى وقت واآلن فلنعد إلى ال Wordpress لكي نكمل العمل. وللعوده أضغط على إسم الموقع ثم كلمة الرئيسية كما في الصورة التالية. صفحة مراسلة: واآلن سنقوم بعمل صفحة بها إستمارة مراسلة يتمكن الشخص من خاللها إرسال رسالة للموقع. نضغط على Plugins كما هو موضح في الصورة. ثم نختار Add New كما موضح في الصورة التالية, ثم نكتب contact form 7 في خانة البحث ثم.Search Plugins سيظهر لك نتيجة البحث فنقوم وسيكون أول Plugin يظهر في النتائج نضغط على,Install Now ثم ستظهر لنا رسالة نضغط على OK أو موافقة على تنزيل ال Plugin كما هو موضح في الصورة. 27

28 ثم نضغط على,Activate Plugin ويمكننا أن نرى أن هذه الخطوة تمت بنجاح عن طريق رؤية ميزة جديدة في الووردبرس وهي مراسلة. ثم نضغط على مراسلة ويمكننا تعديل استمارة المراسلة ولكن ليس بحاجة لهذا اآلن, فقط سنقوم اآلن بنسخ هذا الرابط والموضح في الصورة. ثم نقوم بعمل صفحة جديدة وسيكون إسم الصفحة أرسل سؤال, ونقوم بالتعديل من مرئي إلى HTML كما فعلنا سابقا ونقوم بلصق الرابط أو الكود الذي قمنا بنسخه كما هو موضح في الصورة ثم نضغط على نشر, ثم على Preview Changes أو معاينة الصفحة, ستظهر لك صفحة جديدة يمكن من خاللها المستخدم أن يرسل لنا أي سؤال كما هو موضح في الصورة. 28

29 فلنجرب هذه الصفحة اآلن حيث نقوم بإدخال بعض البيانات مثل: إسم الشخص البريد األلكتروني العنوان الرسالة أو السؤال و نقوم بإرسال الرسالة إلى أنفسنا. ستظهر لك رسالة تفيد بأنه تم إرسال رسالتك بنجاح, ثم نذهب إلى االيميل لنتأكد من وصول الرسالة, وبفحص الرسائل سنجد أن الرسالة قد وصلت بنجاح. إزالة مكان التعليق: واآلن نقوم بالذهاب إلى موقعنا ثم نضغط على صفحة أتصل بنا وسنجد أسفل خريطة Google مكان يمكن من خالله أن يضيف الزائر تعليق كما هو موضح في الشكل. حيث يقوم الشخص بإضافة تعليق ثم الضغط على زر إضافة تعليق ثم سنالحظ أنه تم إضافة التعليق. ويمكن أن نكون في غير الحاجة إلى هذه اإلضافة فنقوم بإلغائها. 29

30 نذهب إلى صفحات ثم نختار كافة الصفحات, ولنضغط مثال على صفحة أرسل سؤال, ثم نضغط في الطرف األعلى على Screen Options ثم عند Discussion نلغي ميزة إرسال التعليق كما هو موضح في الصورة, و ذلك بإزالة إشارة صح. ثم نضغط على تحديث كما في الصورة نقوم بفحص التغييرات Preview Changes كما فعلنا سابقا, وستشاهد أنه تم إلغاء ميزة إرسال تعليق. ونقوم بعمل نفس الخطوات في جميع الصفحات إذا أردنا أن نلغي هذه الميزة في جميع الصفحات ولكن سنالحظ أننا بعد عمل هذه الخطوات أن التعليقات التي قمنا بإدخالها سابقا الزالت موجودة كما في الصورة. ولنقوم بإلغاء التعليقات نضغط على Comments كما في الصورة ثم نختار جميع التعليقات الموجودة أو التعليق الذي تريد حذفة 30

31 ثم نختار Move To Trash من القائمة, إي االرسال إلى سلة المهمالت ثم نضغط على تطبيق. وتقوم بهذه الخطوات السابقة في حالة أنك تريد حذف التعليقات. واآلن نذهب إلى صفحات ثم نختار كافة الصفحات, حيث سنلغي التعليقات في صفحة من نحن كما فعلنا في هذه الصفحة وذلك باتباع نفس الخطوات. واآلن وبعد تنفيذ هذه الخطوات ومراجعة صفحة من نحن سنالحظ أنه تم حذف التعليقات التي كانت أسفل الصورة. وكذلك في جميع الصفحات التي قمنا بنفس هذه الخطوات بها. صفحة تحتوي على فيديو: واآلن فلنقوم بالخطوة األخيرة من إنشاء الصفحات وهو إنشاء صفحة تحتوي على فيديو من اليوتيوب.YouTube نذهب إلى ال WordPress ثم نختار صفحات ونضغط على أضف جديد وليكن إسم الصفحة فيديوهات. ثم نذهب إلى موقع اليوتيوب ونختار الفيديو الذي نريد وضعة في الموقع ونضغط أسفل الفيديو على زر Share كما هو موضح في الصورة التالية ثم نضغط على Embed وللنسخ هذا الكود والموضح في الصورة. ثم نعود إلى صفحة فيديوهات ونتأكد أننا نختار HTML ثم نقوم بلصق الكود كما في الصورة التالية, كما يمكننا أيضا كتابة أي شئ نريده فوق الفيديو. 31

32 ثم نضغط على نشر, ثم على Preview Changes وكما نرى فقد تم إضافة الفيديو وفي حالة تأخر إضافة الفيديو نضغط على زر Refresh عدة مرات 32

33 الخطوة الخامسة: إنشاء و ترتيب القائمة الرئيسية في البداية فلنقوم بإلغاء صفحة ال نريدها في موقعنا و التي هي موجودة في القالب بشكل افتراضي Page( )Sample نعود إلى الوودربرس, ثم نذهب إلى صفحات و نختار تلك الصفحة ونضغط على كلمة Trash أي قمامة والموجودة أسفل إسم الصفحة التي نريدها. سنشاهد أنه تم حذف الصفحة بنجاح وللتأكد نذهب إلى الموقع مرة أخرى حيث نالحظ أنه تم حذف الصفحة من الشريط الموجود أعلى الصفحة. واآلن بعد أن انتهينا من أنشاء الصفحات التي نريدها نريد أن نعيد ترتيب الشريط,فممكن أن يكون الترتيب غير منطقي أو غير مناسب لموقعك فمثال ممكن أن تكون )صفحة البداية( هي أول شئ ثم )من نحن( ثم صفحة )أرسل سؤال( وهكذا. نذهب إلى Appearance ثم نختار قوائم كما هو موضح في الصورة ولنقوم بأنشاء قائمة جديدة وليكن إسمها Menu ثم نضغط على Create Menu كما هو موضح في الصورة حيث سنجد أن إسم القائمة الجديدة Menu قد تم أدراجه أسفل Header Menu و التي هي القائمة الرئيسية كما هو موضح في الصورة 33

34 واآلن فلنضيف الصفحات في هذه القائمة الجديدة كما هو موضح في الصورة ثم نضغط على Add to Menu وستالحظ أنه تمت إضافة الصفحات إلى القائمة كما هو موضح في الصورة ولكن هناك شئ أخر فأذا قمنا بالضغط على Save Menu ثم عندنا إلى الموقع وشاهدنا ما حدث سنالحظ أنه تم إضافة القائمة, وأيضا سنالحظ أنه تم أختفاء الصفحة الرئيسية ألنها غير موجودة بهذه القائمة. فلنعود مرة أخرى إلى ال Wordpress ونقوم بإضافة الصفحة الرئيسية حيث سنقوم بإدخال الرابط و إسم الصفحة ونضغط على Add to Menu كما هو موضح في الصورة. وسيكون الرابط في حالتنا والرابط أو ال Label الرئيسية ثم نضغط على زر Save Menu حتى يتم حفظ التعديالت وسنالحظ أنه تمت إضافة الصفحة إلى القائمة. 34

35 و اآلن نقوم بإعادة ترتيب الصفحات حيث نضغط على إسم الصفحة ثم السحب إلى المكان الذي نريده فمثال إذا كنا نريد أن نجعل الصفحة الرئيسية هي أول صفحة في القائمة نضغط على الصفحة الرئيسية ثم نسحبها إلى أول مكان وهكذا في باقي الصفحات كما هو موضح في الصورة. ثم نقوم أيضا بالضغط على Save Menu كما فعلنا سابقا واآلن فلنذهب إلى الموقع ونضغط على Refresh حيث سنالحظ أنه تمت أعادة ترتيب القائمة كما نريد. 35

36 الخطوة السادسة: تعديل الصفحة الرئيسية سوف نبدأ في هذا القسم بتعديل النصوص والصورة في الصفحة الرئيسية حيث نذهب إلى ال Wordpress واآلن فلنضغط على Appearance ثم نختار Theme Options كما هو موضح في الصورة التالية. وهي الصفحة التي يمكن من خاللها التحكم في الكثير من أمور القالب واآلن فلنضغط على Home Page أي الصفحة الرئيسية, ولنقوم بإدخال النصوص التي نريدها فمثال سنقوم بتغيير ال Headline )العنوان( إلى أهال وسهال بك ثم نغير ال Subheadline )العنوان الثاني( ثم نغير ال Content Area )المحتوى( وهكذا. واآلن فلنقوم بتعديل هذا الزر الموجود في الموقع لدينا والموضح في الصورة. والتعديل الذي سنقوم به هو إدخال رابط الصفحة التي نريد أن يذهب إليها الزائر عند الضغط على هذا الزر وفي حالتنا مثال نريد أن يذهب الزائر إلى صفحة فيديوهات. نضغط على الصفحة فيديوهات" ثم نقوم بنسخ الرابط الموجود أعلى المتصفح. ثم نعود إلى إعدادات الصفحة الرئيسية Page Home ونقوم بلصق الرابط في خانة Call to Action URL ويمكنك تغيير إسم الزر فمثال نريد أن نسميه )تعلم مجانا ( بدل من Call to Action فنقوم بإدخال النص الذي نريده في خانة Call to Action Text 36

37 ونلقوم اآلن بالضغط على زر Save Options فلنعود إلى الموقع ونضغط على زر Refresh وسنشاهد أنه تم تعديل النصوص والزر كما هو موضح في الصورة. واآلن فلنضغط على زر تعلم مجانا وسنشاهد أنه قد ذهب إلى الصفحة التي نريدها والتي كانت صفحة الفيديوهات. واآلن نريد أن نعدل الصورة الظاهرة في الصفحة الرئيسية: فلنعود إلى ال Wordpress ثم نذهب إلى وسائط و نختار Add New أي إضافة جديد, حيث يمكننا أن نقوم بتحميل الوسائط التي نريدها مثل الصور والفيديوهات والملفات الصوتية فلنضغط على Select Files ولنختار الصورة التي نريدها 37

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

39 حيث ستنقلب الصورة إلى اإلتجاه المعاكس كما هو موضح في الصورة. ثم نضغط على زر حفظ الموجود أسفل الصورة ولنقوم بنسخ رابط الصورة مرة أخرى كما فعلنا سابقا ثم نضغط على Home Page ثم نختار ال Theme Options ونختار Appearance ثم نذهب إلى جزء Featured Content و نجعل الكتابة من اليسار إلى اليمين وذلك بالضغط على زر Ctrl في لوحة المفاتيح باستمرار ونضغط على زر,Shift طبعا نضغط الزرين في الطرف اليسار حتى تنتقل الكتابة إلى اليسار. ونقوم بكتابة هذا النص: </ "رابط الصورة الذي قمنا بنسخة = src <img كما هو موضح في الصورة التالية ولنضغط على زر Save Options ولنعود اآلن إلى الصفحة الرئيسية ثم نضغط على Refresh وسنالحظ تغير الصورة في الصفحة الرئيسية. 39

40 حيث سنجد أن رأس البطة يتجه إلى زر تعلم مجانا تعديل مربعات الصفحة الرئيسية: واآلن نريد أن نعدل هذا الجزء الموضح في الصورة والمعروف بإسم Widgets أو ما تسمى بالعربي )مربعات القائمة الجانبية(. واآلن فلنعود إلى ال Wordpress و نذهب إلى Appearance و لنضغط على مربعات القائمة الجانبية, وكما نرى في يسار الصفحة سنالحظ وجود Home Widget 1,Home Widget 2, Home Widget 3 حيث في هذه المربعات يمكنك إضافة أي شئ تريده به ويمكنك إضافة بحث, روابط, نصوص,... وعديد من األشياء والموضحة في الصورة. واآلن فلنقوم بإضافة نص فنسحبها ونضعها عند Home Widget 1 كما هو موضح في الصورة. 40

41 سيظهر لك مربع يمكنك إدخال العنوان والمحتوى به ثم نضغط على زر حفظ. ثم نعود إلى الموقع حيث سنرى أنه تم تغير Home Widget 1 إلى العنوان والمحتوى الذي قمنا بإدخاله. ولكن المشكلة أن المربع الذي قمنا بإدخال نص به ال يتيح لنا إدخال أي شئ غير نص, فمثال ال يمكنك إضافة صورة أو فيديو أو تغيير لون,نوع, حجم الخط. والحل هو أن نقوم بتنزيل برنامج أضافي أو Plugin نختار Add New يمكنا من التحكم في ال Widget ولعمل ذلك نذهب إلى Plugin ثم فلنبحث عن كلمة BLACK ثم نضغط على Search Plugins ستظهر لنا بعض النتائج نقوم بأختيار Black Studio TinyMCE Widget منها حيث نضغط على Install Now وبعد تنزيل البرنامج نضغط على Activate Plugin واآلن فلنعود حيث كنا باختيار Appearance ثم مربعات القائمة الجانبية. يمكننا أن نرى أنه تم إضافة ال Plugin بنجاح. ثم نذهب إلى Home Widget 1 ونقوم بحذف النص الذي قمنا بإدخاله وذلك بالضغط على Delete كما هو موضح في الصورة التالية. 41

42 فلنقوم بسحب الPlugin الذي قمنا بإضافته Black Studio ثم نقوم بتركه في Home Widget 1 كما فعلنا سابقا والموضحة أيضا في الصورة حيث ستظهر لك خانه إدخال العنوان والنص مع إمكانية إضافة بعض األشياء لها مثل كود HTML و الصور والفيديوهات وعمل تغيير بالكتابة كما هو موضح في الصورة التالية 42

43 الحصول على أيقونات: ونريد اآلن أن نقوم بإدخال صور فلنحصل على أيقونات اآلن من موقع ولنضغط على Free Icons كما هو موضح في الصورة التالية ثم نقوم بالبحث عن شكل األيقونات التي نريدها ثم نضغط على View/Download لتحميل هذه األيقونات كما هو موضح في الصورة. ثم نختار PNG ألنها تتميز بالشفافية و صغر الحجم. واآلن بعد تحميل الملف نقوم بفك ضغط الملف وذلك بالضغط بالزر األيمن للماوس واختيار Extract Here 43

44 وقد يستغرق فك الملف بعض الوقت ألنه يحتوي على كثير من الصور. واآلن فلنعود إلى الموقع ونقوم باختيار األيقونات بالضغط على Upload/Insert )أو تحميل( وذلك إلضافة الصورة التي نريدها. ثم نضغط على Select files ثم نختار الصورة التي نريدها من الملف الذي قمنا بفك ضغطه ثم ستظهر لنا صفحة تمكننا من التحكم في الصورة فنقوم مثال بجعل المحاذاة في اإلتجاه اليمين. ولنجعل الحجم كامل ثم نضغط على Insert into Post وكما ترى فقد تم إضافة الصورة التي تريدها بالمواصفات التي تريدها. ثم قم بالضغط على زر حفظ واآلن فلنعود إلى الموقع لنشاهد ما حدث من تغير فسيظهر ما قمنا به من تعديل وذلك بعد الضغط على زر Refresh إلعادة تحميل الصفحة. 44

45 يمكننا إضافة رابط إلى الصورة بحيث عندما يقوم زائر الموقع بالضغط على الصورة يذهب تلقائيا إلى هذا الرابط ولعمل هذه الخطوة نضغط على الصورة ثم نضغط على عالمة الرابط كما هو موضح في الصورة. نقوم اآلن بإدخال الرابط وهو الصفحة التي سيذهب إليها الزائر عند الضغط على الصورة وفي حالتنا مثال سنجعل المستخدم يذهب إلى صفحتنا على موقع التواصل األجتماعي فيسبوك. وننصحكم جميعا بزيارة هذه الصفحة. ثم نقوم بإدخال العنوان وبعد ذلك نضغط على زر تحديث كما هو موضح في الصورة التالية. ثم نضغط على زر حفظ ونعود إلى الموقع ونضغط على زر Refresh واآلن عند ضغطك على الصورة سوف تذهب إلى الرابط الذي قمت بإدخاله. واآلن سنقوم بعمل نفس الخطوات مع Home Widget 2, Home Widget 3 فسنقوم بإدخال عنوان, نص ثم إضافة صورة كما فعلنا سابقا ويمكنك أيضا جعل الكلمة رابط بدل من الصورة فسنقوم بتحديد الكلمة ثم نضغط على عالمة الرابط ونقوم بتكرار نفس الخطوات السابقة. وبعد إجراء كافة التعديالت نذهب إلى الموقع ثم نضغط على زر Refresh وسوف نشاهد ما قمنا به من تعديالت كما في الصورة التالية. 45

46 تعديل الشعار: وما بقي اآلن هو تعديل الشعار الموجود في الصفحة الرئيسية والموضح في الصورة. # في موقع خمسات يمكنك شراء خدمة تصميم شعار احترااافي, كما في هذا الرابط. واآلن فلنعود إلى ال Wordpress ثم نختار Appearance ثم نضغط على Theme Options فلنضغط على Logo Upload ثم Click here وذلك لتحميل الشعار وسنالحظ أن الصفحة تعطينا بعض المعلومات وهو أنه يجب أن يكون عرض الصورة 322 بيكسل وارتفاع الصورة 222 بيكسل وأنه في حاله اختيار صورة ليست بهذه المواصفات فلن يتم قبول أو رفع الصورة والختيار صورة نضغط على Choose file فستظهر لنا نافذة يمكننا من خاللها اختيار الصورة التي نريدها كما هو موضح في الصورة. 46

47 وبعد اختيار الصورة نضغط على زر رفع, ثم نضغط على زر Crop and Publish كما في الصورة التالية ثم نضغط على Save Changes واآلن فلنعود إلى الموقع ونضغط على زر Refresh وسنالحظ أنه تم تغيير الشعار واآلن بقي شئ أخير حيث عند ذهابك إلى أي صفحة في موقعك ماعدا الصفحة الرئيسية فستالحظ وجود بعض المربعات التي ال تريدها والتي ترغب في حذفها. 47

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

49 ولنقوم بعمل هذه الخطوة مع جميع المربعات فيما عدا مربع البحث ولنضيف مربع الفيسبوك علىنا أن نضيف نص أسفل مربع البحث كما في الصورة التالية. وسوف نقوم بادخال كود في مربع النص سيمكننا من إضافة مربع الفيسبوك نذهب اآلن إلى موقع ولنبحث عن facebook like box widget ولنضغط على أول نتيجة حيث سيمكننا هذا الموقع من إضافة مربع الفيسبوك. في البداية نقوم بإدخال رابط صفحتنا في الفيسبوك عند Facebook Page URL ونقوم اآلن بإزالة عالمة صح من أمام Show Stream هو الذي يعرض لك الشرح الموجود كما في الصورة التالية. 49

50 فعند إزالة عالمة صح من Show Stream سيصبح المربع أصغر كما هو ظاهر في الصورة التالية. ولنقوم بتغير العرض إلى 062 بيكسل والطول إلى 322 بيكسل كما يمكننا أيضا تغيير كثير من األشياء واآلن فلنضغط على زر Get Code ستظهر لك نافذة جديدة نختار منها IFRAME كما في الصورة التالية 50

51 ونقوم بتظليل الكود ونسخة ثم نضغط على زر OK كما في الصورة التالية واآلن فلنعود إلى ال Wordpress الصورة التالية. ولنقوم بلصق الكود في مكان النص ثم نضغط على زر حفظ كما هو موضح في 51

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

53 # و اآلن أخيرا لقد أكلملنا الموقع في هذا الدرس # و اآلن فلنتابع إلى الخطوة األخيرة 53

54 الخطوة السابعة دخول عالم اإلحترافية أما في هذه الخطوة نود إعطاء لمحة أوسع بقليل عن قوالب الووردبريس, و كيفية اختيار القالب المناسب. كمبتدئ في عالم الووردبرس, هناك معلومات ضرورية يجب معرفتها عند اتخاذ القرار في تنزيل القالب, و البد التأكد من أن القالب يعمل بفعالية باستخدام اللغة العربية, أي من اليمين إلى اليسار. من األمر الصعب إيجاد القوالب التي تدعم العربية بالرغم من أن الووردبرس قد تم تعريبه منذ زمن بعيد, إال أنه اآلن الكثير من المصممين العرب و األجانب بدأوا يهتمون أكثر فأكثر في تطوير قوالب قابلة لإلستخدام من اليمين إلى اليسار. إن اختيار القالب المناسب يلعب كذلك دور أساسي في تهيئة الموقع لمحركات البحث. لذلك هي هذا القسم نهدف إلى تقديم اإلرشادات الضرورية الختيار القالب. اإلرشادات األساسية في اختيار القالب: تأكد من أن القالب الذي تختاره يدعم اللغات من اليمين إلى اليسار, ابحث على القوالب التي تدعم RTL و هي اختصار ل right to left أي من اليمين إلى اليسار. ال يغرك الشكل الخارجي في القالب و الحركات و غيرها, أوال ألنها قد تكون سببا في تطفيش الزوار, ثانيا ألنها قد تحتوي على تعقيدات و ال تكون جيدة لإلستخدام اليومي. حاول التركيز على القالب الذي يتناسب مع اختصاصك, أي إذا كنت تعمل موقع أخبار محلية فعليك اختيار قالب لألخبار. الكثير من الناس يحاولون أيجاد أبسط نوع من القوالب و الذي ال يحتاج إلى أي تعديل سوى تحميل الشعار. إذا كنت تريد الحصول على قوالب مجانية فال بأس, و لكن حاول اختيارها من مصادرها األصلية, فبعض القوالب المجانية التي تقدمها بعض المواضع مليئة بالروابط لمواقع أخرى. ابتعد عن القوالب المخترقة و التي بعض المواقع تعرض تنزيلها بالمجان بالرغم من أن مصمميها األصليين قد عملوا جاهدين للرزق من ورائها. أوال هذه ال تفرق عن السرقة شيء, ثانيا أن أغلبها نسخ قديمة و لم يتم تحديثها و غير آمنة. إختر القالب الذي بتطابق مع جميع أنواع المتصفحات ماذا يميز القوالب االحترافية أي المدفوعة عن المجانية القوالب المجانية يستخدمها آالف من الناس و هي معروفة بشكل عام على أنها مجانية, حيث أكبر مصدر للقوالب المجانية هي مؤسسة الووردبريس نفسها. عادة يعرض المصممون بعض أعمالهم للتنزيل مجانا على موقع ووردبرس, و ذلك حتى تتعرف الناس على تصاميمهم, و في أغلب األحيان, يعرضون النسخة االحترافية من نفس القالب و لكن بمبلغ. بالتأكيد هذه القوالب تكون ذات مزايا أقل و مستخدميها ال يحظون بالدعم من مطوريها. أما القوالب االحترافية فأهم مزاياها هي حصولك على الدعم من مطوريها باإلضافة إلى التحديثات المستمرة للقالب و التي تساعد على تحسين القالب و أمنه, حيث أنك ما دام اشتريت قالب إن كان سعره 22 أو 92 دوالر فهو في أغلب األحيان يصلح إلى العمر كله. 54

55 إقتراحات تصميم ويب الختيار القالب: قوالب مجانية مقدمة من ووردبرس, و هذه الصفحة تحتوي على بعض القوالب التي تدعم RTL قوالب احترافية من موقع ثيم فورست, أكبر سوق للقوالب في العالم, و هذا الرابط يحتوي على قوالب تدعم,RTL و كثير من هذه القوالب من عمل مصممون عرب قوالب احترافية من موقع غود ثيمز العربي %222 و الذي يقدم دعم باللغة العربية و أسعار جيدة جدا, إليك الرابط قوالب احترافية من موقع موجو ثيمز, كذلك أحد أكبر األسواق للقوالب, إليك الرابط قوالب احترافية من موقع أليغنت ثيمز, ادفع اشتراك لمدى العمر قيمته تقل عن 22 دوالر و احصل على جميع القوالب و التي عددها 02 قالب بل و قمة االحترافية, بالفعل أفضل عرض في سوق القوالب حاليا, إليك الرابط! تثبيت القالب: عملية تثبيت القالب سهلة جدا. بعد أن اخترت القالب الذي تريده, هناك طريقتان لذلك و هنا نشرح الطريقة األسهل: قم بتنزيل القالب, حيث عند تنزيله يكون على شكل ملف مضغوط في الووردبرس, عند القائمة الجانبية إذهب إلى القوالب, تظهر لك القوالب الموجودة في حاليا في موقعك في األعلى إضغط على على Install Themes ثم إضغط على رفع حتى تتمكن من رفع القالب

56 6. قم بتحميل الملف المضغوط الذي قمت بتنزيله قبل قليل, ثم اضغط على Install Now أي التثبيت اآلن 9. بعد أن تم التثبيت, إذا كنت تريد استخدام هذا القالب اضغط على تفعيل بعدها يمكنك استخدام القالب الذي قمت تنزيله, بل و يمكنك االطالع على جميع القوالب التي قمت بتنزيلها و التي كانت موجودة باألساس عند ذهابك إلى القوالب.0 أخيرا و ليس آخرا, نتمنى أن يكون هذا الكتاب قد نفعك و زاد قناعتك بأنك يمكنك أن تحقق مشروعك على اإلنترنت مع الفرص المتاحة حاليا. و ال تنسى أن تتابع دروس و مواضيع تصميم ويب و التي تتجدد باستمرار. مع تمنياتي لك بالتوفيق أحمد اآلغا 56