كيفية إنشاء موقع ويب للأعمال – دليل فيديو كامل خطوة بخطوة!

عروض وورد


لن أقوم عادةً بنشر مشاركة بشكل مثير للغاية ، ولكن DAMN لدينا شيء خاص لك اليوم: مكتمل خطوة بخطوة دليل الفيديو (مع عدم تخطي أي شيء) إلى إنشاء موقع ووردبريس احترافي للأعمال الصغيرة!

ما يجعل هذا الفيديو خاصًا للغاية ، على الرغم من ذلك ، هو في الأساس ثلاثة أشياء: 1. حقيقة أن هذه هي الطريقة التي سنقوم بها بأنفسنا بالضبط (ونحن ، مهمون ، خبراء في هذا الأمر) ؛ 2. مستوى التفاصيل التي ننتقل إليها – الفيديو هو ضخم لمدة ساعة ونصف الساعة ، وننشئ مثالًا لموقع ويب للأعمال التجارية الصغيرة من البداية إلى النهاية ؛ و 3. أن الفيديو يستهدف المبتدئين – الأشخاص الذين من المحتمل جدًا أنهم لم يفعلوا أي شيء من هذا القبيل من قبل (وما زالوا يرون فكرة إنشاء موقع لأنفسهم كشيء مرعب حقًا).

من خلال المتابعة ببساطة ، من خلال النقر على المكان الذي ننقر عليه ، ومع التفكير قليلاً في تغيير بعض الجوانب لتناسب عملك الخاص ، نأمل أن تكون قادرًا على إنشاء موقع WordPress رائع مماثل (ورائع تقنيًا)!

فما تنتظرون؟ البدء!

كيفية إنشاء موقع ويب احترافي للأعمال باستخدام WordPress:

رابط مباشر لمشاهدة الفيديو على Vimeo.

– (ملاحظة: أرصدة الفيديو لـ Topher DeRosia – منشئ HeroPress

نص الفيديو:

في هذا الفيديو ، سأوضح لك كيفية إنشاء موقع ويب احترافي للأعمال باستخدام WordPress. سنذهب خطوة بخطوة ، ولن أترك أي شيء. العمل الذي سنستخدمه كنموذج هو مساحة عمل مشتركة. إذا كنت ترغب في إلقاء نظرة على النسخة النهائية من هذا الموقع ، يمكنك الذهاب إلى coworkerpro.com. يمكن استخدام العناصر التي سنضعها في هذا الموقع على أي موقع عمل. هناك دعوة للعمل. القليل عنا. بعض الموظفين والشهادات واستمارة الاتصال ، بالإضافة إلى العديد من الصفحات الأخرى. لذا مهما كان نشاطك التجاري ، في نهاية هذا الفيديو ، يجب أن يكون لديك موقع ويب متميز. سنستضيف موقعنا في Siteground. وسنلقي نظرة على كل ما يقدمونه ، ومدى سهولة الحصول على الأشياء. سنقوم بتثبيت بعض المكونات الإضافية الإضافية للمساعدة ، وسنستخدم موضوع Hestia من Themeisle. تتيح لنا Hestia استخدام أداة التخصيص المضمنة في WordPress لتحرير كل جزء من الصفحة ، مباشرة من الواجهة الأمامية. سننظر أيضًا في العديد من الأدوات التي يمكن أن تساعد في جعل موقعنا يعمل بشكل أسرع وأفضل. سنلقي نظرة على محسِّن Siteground الخاص. سنقوم بربط Google Search Console و Google Analytics ، بالإضافة إلى Yoast SEO ، لتحسين محرك البحث. ثم سنستخدم المكون الإضافي Jetpack من Automattic لإدارة الرسائل غير المرغوب فيها والنسخ الاحتياطية وبعض الإحصاءات الإضافية. إذا تابعت في غضون ساعتين فقط ، فيجب أن يكون لديك موقع ويب كامل وجميل وفعال للأعمال جاهز للاستخدام. لذلك دعونا نبدأ. أول شيء نريد إعداده هو استضافة الويب. الآن استضافة الويب هي المكان الذي سيكون فيه موقعك على الإنترنت. يشبه الحصول على مرآب تأجير لتخزين أغراضك. تستأجر مساحة صغيرة ، وتضع موقع الويب الخاص بك عليه ، ويمكن للناس زيارته. الموقع الذي سنستخدمه يسمى Siteground. إنهم مضيفون ممتازون وبأسعار رائعة والعديد من الميزات التي تعجبني حقًا. ولكن قبل أن نبدأ هنا ، أود أن أريكم شيئًا على WinningWP.com. لكل من Siteground و WinningWP ترتيب يمكنك من خلاله توفير٪ من الاستضافة في Siteground. بالإضافة إلى ذلك ، يحصل WinningWP على جزء صغير من المال الذي ستدفعه. يذهب هذا المال لإنشاء مقاطع فيديو كهذه ، لذا فهو في الواقع وضع مربح للجانبين ، حيث تحصل على استضافة غير مكلفة ومحتوى رائع ، ويحصل WinningWP على القليل أيضًا. الآن ، لاستخدام هذه الصفقة ، كل ما عليك فعله هو الذهاب إلى هذه الصفحة ، سيكون هناك رابط أسفل الفيديو. وانقر فوق تطبيق القسيمة. وهناك ، كما تقول ، صفقة خاصة لزوار WinningWP.com. وسنختار خطة. الخطة التي سوف نتبعها هي خطة جروبج. لديها فقط ميزات إضافية كافية على StartUp أحبها حقًا. لكن GoGeek حقًا للمواقع الأكبر قليلاً مما سننشئه. لذلك دعونا نختار جروبج. وسننقر على البدء. الآن جزء من عملية هذا الفيديو هو تسجيل اسم نطاق جديد. إذا كان لديك بالفعل اسم مجال مسجل ، فإن Siteground لديها بعض الوثائق الممتازة هنا حول كيفية توجيهه إلى موقعك ، أو نقل الاسم بالفعل إلى Siteground. يعمل أحدهما بشكل جيد للغاية ، ولديهم معلومات جيدة حول كيفية القيام بالأمرين هنا. سنحصل على واحدة جديدة ، وستكون coworkerpro.com. الآن ، يكلف هذا المجال $. سنة. وعندما تفكر في الأمر ، كسعر سنوي ، فهذا ليس كثيرًا حقًا. دعنا نضغط على المضي قدما. هنا تقول ، تهانينا ، اسم نطاقنا متاح. الآن ، سنقوم بإنشاء حساب على Siteground. أولاً ، أدخلنا عنوان بريد إلكتروني ، ثم كلمة مرور لـ Siteground. هذه ليست كلمة مرور لاسم المجال الخاص بك ، أو FTP أو أي شيء من هذا القبيل ، هذا فقط لتسجيل الدخول إلى Siteground. بعد ذلك ، نضع بعض المعلومات الشخصية. بعد ذلك ، سنضع معلومات بطاقة الائتمان الخاصة بنا. وهنا ، سنقول إن عنوان إرسال الفواتير هو نفس العنوان الوارد في معلومات الاتصال أعلاه. والآن ، سنراجع ما نشتريه. نحن نحصل على خطة جروبج. سيكون مركز البيانات لدينا في شيكاغو. هذا قريب جدًا من مكاني. ولكن لديك خيار ، يمكن أن يكون أماكن أخرى ، كل ما عليك فعله هو النقر فوق هذا الزر. سأشتري خطة شهرية مقابل $. في شهر واحد ، لذا في الوقت الحالي ، سيتم محاسبتي على $ .. أضف إلى ذلك تسجيل اسم النطاق لـ $ .. بالإضافة إلى ذلك ، نحن نريد حقًا خصوصية النطاق. يمنع ذلك مرسلي البريد العشوائي من الزحف إلى تسجيل النطاق بحثًا عن عناوين البريد الإلكتروني. أخيرًا ، هناك ماسح ضوئي لموقع Siteground. هذا يراقب موقعك بحثًا عن الاختراقات والهجمات وأشياء من هذا القبيل. إنه يستحق ذلك ، فهو يجعلك تتقدم خطوة على الأشرار. إذاً ، سيكون إجمالي المبلغ هو $ .. ولكن الشيء الجميل هو أن هذا يدفع لكامل العام ، لذلك لا داعي للتفكير في الأمر مرة أخرى لمدة عام. نؤكد شروط الخدمة ، ونضغط على الدفع الآن. وقد تم تقديم طلبنا. يمكننا تسجيل الدخول إلى منطقة عملائنا على الفور. ومع ذلك ، يمكن أن يستغرق تسجيل أسماء النطاقات ما يصل إلى ساعات. لذلك لن يعمل اسم المجال الخاص بنا على الفور. الآن بعد أن أنشأنا حساب Siteground ، يمكننا الانتقال إلى اسم النطاق الذي أنشأناه ورؤية العنصر النائب. تحصل جميع أسماء النطاقات الجديدة في Siteground على عنصر نائب مثل هذا ، وسيبقى هناك حتى نقوم بتثبيت موقع الويب الخاص بنا. لذا لخطوتنا التالية ، دعنا نمضي قدمًا ونثبت WordPress. أولاً ، دعنا نذهب إلى Siteground.com ، وقم بتسجيل الدخول باستخدام الحساب الذي أنشأناه سابقًا. الآن بعد أن قمنا بتسجيل الدخول ، هنا مباشرة على اللوحة الرئيسية ، هناك تنبيه صغير يقول أن لديك حساب استضافة جديدًا لم تقم بإعداده بعد. وإذا نقرنا على عرض ، فهذا يعطينا عدة خيارات. يمكننا بدء موقع ويب جديد ، أو نقل موقع ويب ، أو القول إننا لسنا بحاجة إلى المساعدة الآن. أو يمكننا النقر على هذا السهم الصغير وسيعود هذا لاحقًا. لكننا سنمضي قدمًا ونبدأ موقعًا إلكترونيًا جديدًا. نريد وورد. والآن نضع بعض معلومات حساب WordPress. لذلك سيكون هذا لـ WordPress على موقعنا. وسننقر فوق تأكيد. والآن تقول ، لقد طلبت تثبيت WordPress على حسابك. ثم نحتاج إلى تأكيد أننا قد قرأنا ووافقنا على شروط خدمة Siteground. سأترك ذلك كتمرين لك. والآن سنضغط على الإعداد الكامل. والآن ما تقوم به هو إنشاء قاعدة بيانات لنا ، وتثبيت WordPress ، وربط الاثنين ، باستخدام المعلومات التي وضعناها للتو. يمكننا المضي قدما في منطقة عملائنا. ولكن الآن ، إذا عدنا إلى صفحة الويب الخاصة بنا وقمنا بإعادة التحميل ، فسترى أن لدينا مدونة. ستلاحظ أيضًا أننا ندير HTTPS ، مما يعني أنهم أنشأوا شهادة SSL لنا. سأوضح لك أين يحدث ذلك ، حتى تعرف كيف تفعل ذلك إذا احتجت مرة أخرى. في منطقة مستخدم Siteground ، نذهب إلى حساباتي. ثم انتقل إلى cPanel. نريد دائمًا الوصول إلى cPanel بأمان ، لذا استمر في اختياره وتذكره. الآن هناك أشياء كثيرة رائعة في هذه الصفحة ، ولكن هناك أيضًا هذا البحث الرائع هنا. شهادة SSL التي حصلنا عليها تأتي من Let’s Encrypt. لذلك سنكتب L-E-T ، وها نحن ، تم تصفيتنا لأسفل. وهنا يمكنك رؤية شهادة SSL الخاصة بنا لـ coworkerpro. لكن Siteground هيأها لنا ، لذلك لا داعي للقلق حيال ذلك. أردت فقط أن تكون قادرًا على رؤية مكانه ، لأنه مهم. لذا الآن ، دعنا ندخل إلى WordPress ونقوم ببعض التهيئة البسيطة. هذا هو اسم المستخدم وكلمة المرور اللذين أنشأتهما قبل لحظات قليلة. الآن شيء آخر فعله Siteground لنا هو تثبيت Jetpack. سننظر في تكوين ذلك في وقت لاحق. سأقوم بإغلاق شريط الترحيب وشريط Jetpack ، والآن لدي تثبيت WordPress فانيليا للغاية. لذلك ، من أول الأشياء التي نرغب في القيام بها هي الانتقال إلى الإعدادات → الروابط الثابتة ، ونريد اسم المشاركة ، لأنها تجعل عناوين URL أبسط وأكثر سهولة للقراءة. إنه أيضًا أفضل بكثير لتحسين محرك البحث ، ويمكن أن يكون ذلك مهمًا حقًا. بعد ذلك ، سننتقل إلى المناقشة ، وفي الوقت الحالي ، سنقوم بإيقاف التعليقات ، لأننا لا نريد أي شخص يعثر على هذا الموقع ويستخدم التعليقات ، لأنهم ربما يكونون رسائل غير مرغوب فيها. سنذهب إلى ريدينج. وسنثبط عزلة ظهور محرك البحث في الوقت الحالي ، لأننا لسنا مستعدين للعامة. لا تنس الآن ، بمجرد الانتهاء من موقعك ، وأصبح جاهزًا لبدء البث المباشر ، ارجع إلى هذه الإعدادات ← صفحة القراءة ، وقم بإلغاء تحديد عدم تشجيع محركات البحث على فهرسة هذا الموقع. لأنه بعد ذلك ، ستتمكن Google من العثور عليك. بعد ذلك ، نريد حذف المحتوى الافتراضي الذي يأتي مع WordPress. هناك منشور واحد مع تعليق واحد. وإذا قمنا بتفريغ هذا المنشور ، وقمنا بإفراغ سلة المهملات ، فإن التعليق يذهب معها ، لذلك لا نحتاج للبحث عن هذا التعليق وحذفه. ولكن الآن دعنا نذهب إلى الصفحات ، ولم يتم العثور على صفحات. لذا الآن ، إذا نظرنا إلى صفحتنا الرئيسية ، فيجب أن تبدو لطيفة جدًا. وجدت شيئا. هناك بعض الأشياء في الشريط الجانبي ، دعنا نذهب لرعاية ذلك. سنقوم فقط بتفريغ هذا الحق ، وبعد ذلك ، سيكون لدينا قائمة نظيفة. و هاهو. موقع فارغ ، تمامًا لملء المحتوى الخاص بنا. الآن ، لن تحتوي صفحتنا الرئيسية على مدونة. سيكون هذا جزءًا منفصلاً من الموقع. ولكن الآن ، صفحتنا الرئيسية هي مدونة. لذا دعنا نغير ذلك. أول شيء سنقوم به هو إنشاء صفحتين. سوف نسمي هذا المنزل وننشره ببساطة. ثم سننشئ واحدة أخرى ، ولن يكون لموقعنا مدونة ، بل سيكون له قسم أخبار ، لذلك سنطلق على هذا الخبر. لدينا الآن صفحتان ، الصفحة الرئيسية والأخبار. ولكن الآن نحتاج إلى إخبار WordPress بكيفية استخدامها. الآن ، نذهب إلى الإعدادات → القراءة. وهنا ، تظهر صفحتك الرئيسية ، وهي الآن أحدث مشاركاتك. ولكن بدلاً من ذلك ، سنختار صفحة ثابتة. وبالنسبة إلى الصفحة الرئيسية ، سنختار الصفحة الرئيسية ، وبالنسبة لصفحة المنشورات ، سنختار الأخبار ، ونحفظ التغييرات. الآن ، إذا ألقينا نظرة على صفحة الويب ، فهناك صفحتنا الرئيسية. ولا يزال موقعنا يسمى مدونتي ومدونة WordPress الخاصة بي ، ولكننا سنقوم بتغيير ذلك في بضع دقائق فقط. الآن بعد أن قمنا بالتكوينات الأساسية على موقعنا ، سنقوم بتثبيت بعض المكونات الإضافية التي ستساعدنا على المضي قدمًا. الأول يسمى TinyMCE Advanced. الآن TinyMCE هو اسم المحرر الذي يستخدمه WordPress. إذا كنت قد قمت بإنشاء صفحة أو مشاركة ، فقد استخدمت TinyMCE. إذا قمنا بتعديل هذه الصفحة ، فسوف تراها هنا. بشكل افتراضي ، يحتوي هذا الشريط على شريط واحد. إذا قمت بالنقر فوق هذا الزر ، يسمى تبديل شريط الأدوات ، نحصل على شريط ثانٍ. لكن TinyMCE Advanced يضيف المزيد. توجد قائمة منسدلة هنا لأنواع مختلفة من الرؤوس ، وهناك قائمة تنقل هنا لجميع أنواع الأدوات الأخرى. فلنقم بتثبيت هذا بسرعة. نذهب إلى الإضافات ، ونضيف جديدة ، ويمكننا البحث عن الإضافات ، وهناك. سننقر فوق التثبيت الآن ، وننشط. والآن ، إذا عدت إلى الصفحات وعدلت الصفحة الرئيسية ، فسترى أنه لدينا قائمة منسدلة للخطوط والعناوين ، ويمكننا استخدام الجداول وجميع أنواع الأشياء الأخرى. وسيأتي هذا مفيدًا لاحقًا. الآن المكون الإضافي الآخر الذي سنقوم بتثبيته يسمى My Eyes Are Up Here. وهذا مكوّن إضافي رائع يساعد في اقتصاص الصور. عادة ، إذا كان لديك صورة طويلة وضيقة ، وتطلب من ووردبريس إنشاء مربع ، فإنه يقطع المربع مباشرة من المنتصف. ومع ذلك ، مع My Eyes Are Up Here ، فإنها تكتشف بذكاء الوجوه البشرية. مثله. ثم ينشئ صورًا مصغرة مناسبة. بالإضافة إلى ذلك ، إذا لم يكن هناك أشخاص ، فلديك خيار وضع هذه النقطة الوردية في أي مكان تريده ، وتأكد من أن هذا الجزء من الصورة موجود دائمًا في الصورة. لذلك إذا كان لديك صورة مع الجبال وطريق سريع ، وتريد اقتصاصها حتى ترى الجبال فقط ، يمكنك ببساطة تحديد المنطقة الجبلية ، وعندما تحصد WordPress ، فإنها ستحافظ على الجبال. هذا المكون الإضافي مفيد حقًا عند إنشاء أرشيفات الموظفين ومعارض الأشخاص ، لأن WordPress سيحصل دائمًا على وجوههم. لذلك دعونا تثبيت هذا. هناك ، تم تثبيته الآن. الآن هناك بعض المكونات الإضافية الأخرى التي أود أن أتناولها بسرعة حقيقية. يأتي Hello Dolly مع كل تثبيت لـ WordPress ، ولا نحتاج إليه. لذا سنقوم فقط بالتخلص منه. Akismet سنستخدمه لاحقًا في الفيديو. يتم استخدامه لمكافحة البريد الإلكتروني العشوائي. يأتي Jetpack أيضًا مع عدد من الأدوات ، وسنستعرض تلك الأدوات لاحقًا. ثم ، SG Optimizer هو تسريع موقعك على Siteground. يحتوي على مكون إضافي رائع للتخزين المؤقت ، وعدد من الأشياء الأخرى التي سننظر فيها لاحقًا. بعد ذلك ، سنقوم بتثبيت موضوعنا. السمة التي سنستخدمها تسمى هيستيا. ويأتي من Themeisle. هذه هي الصفحة الخاصة به على Themeisle.com. ويأتي في نسختين ، إصدار مدفوع ونسخة مجانية. في هذا الفيديو ، سنستخدم الإصدار المجاني. لكني أردت أن أريكم بعض الأشياء التي يمكنها القيام بها. هذه هيستيا التي ننظر إليها. وقد تم إنشاء هذه الصفحة الرئيسية بدون أي ترميز. إنه متوافق تمامًا مع أدوات إنشاء الصفحات ، لكننا لن نستخدم واحدة في هذا الفيديو ، لأننا لن نحتاج إليه. هيستيا رائعة بدونها. يعمل بشكل رائع مع التخصيص. وهي شائعة للغاية. سنحصل عليه من WordPress.org ، ونستخدم الإصدار المجاني. هناك أكثر من تثبيت الإصدار المجاني. لذلك سنذهب إلى لوحة القيادة ، ثم المظهر ، ثم الموضوعات. أضف موضوع جديد. وابحث عن هيستيا. و هاهو. نضغط على التثبيت والتفعيل. وها نحن. دعنا نذهب لزيارة الصفحة الرئيسية ونرى كيف يبدو. إليك عنوان الموقع. وهذا عنوان صفحة ، ويمكننا تغييره في أداة التخصيص. يأتي مدمجًا مع بعض الأشياء ، مثل منطقة المدونة هذه ، وتذييل مملوء ببعض الصور. سنقوم بتغيير شكلها ، وسنضيف قائمة ، وسنقوم بعمل عدد من الأشياء لها. ولكن أولاً ، أثناء وجودنا هنا في منطقة الموضوع ، سنحذف جميع السمات الإضافية باستثناء واحدة. لذلك دعونا نحذف و. والسبب الذي من أجله نحذف البعض هو أنه إذا كانت هناك مشكلة أمنية ، فقد نكون عرضة لها ، على الرغم من أننا لا نستخدم السمة. الآن من غير المحتمل أن تكون هناك مشكلة أمنية في تلك التي لم يتم إصلاحها بسرعة. ولكن من ناحية أخرى ، إذا لم يكن لدينا على الإطلاق ، فلا داعي للقلق حيال ذلك. فلماذا احتفظنا بواحد إضافي؟ تريد دائمًا موضوعًا إضافيًا واحدًا ، لأنه إذا حدث شيء ما لموضوعك الرئيسي ، مثل حذفه أو إتلافه ، فسيعود موقعك إلى المظهر الثانوي. ثم ستتمكن من رؤيته والدخول إلى منطقة المشرف. لذلك دعونا نبدأ في بناء صفحتنا الرئيسية. أول شيء سنفعله هو النقر لبدء استخدام Hestia. وما يفعله هذا في الواقع هو أخذنا إلى هذه الصفحة تحت المظهر. ولديها بعض المعلومات حول كيفية البدء ، ولكن لديها إجراءين موصى بهما. وسنقوم بكل منهما. يعد Orbit Fox Companion مكونًا إضافيًا يضيف بعض ميزات الصفحة الأولى. إنه مجاني ، ويمكننا تثبيته هنا. وها نحن. المرحلة التالية تسمى نماذج القراصنة ، وهذا يجعل نموذج الاتصال. الآن ، Pirate Forms ليست كبيرة ومعقدة مثل الأشكال الأخرى مثل Gravity Forms أو Ninja Forms. ولكن لأغراضنا ، سنقوم بعمل نموذج اتصال صغير رائع. الآن بعد أن قيل ، Hestia Pro متوافق تمامًا مع جميع المكونات الإضافية الأكبر حجمًا. لذلك إذا كنت بحاجة إلى هذه ، يمكنك بالتأكيد استخدامها مع هيستيا. تحت الإضافات المفيدة ، نرى أشياء مثل مُنشئي الصفحات والمكونات الإضافية للترجمة. لن نستخدم أيًا منها لتصميمنا هنا. لذا فإن الشيء التالي الذي نريد القيام به هو الانتقال إلى الصفحة الرئيسية. وكل شيء نقوم به على الصفحة الأولى سيتم من خلال أداة التخصيص ، والتي يمكنك العثور عليها هنا. سنضغط تخصيص. والآن ، يمكننا تصفح القائمة هنا على اليسار ، أو يمكننا النقر على كل أقلام الرصاص الزرقاء الصغيرة لتغيير الأشياء. أقلام الرصاص تجعل من اللطيف العثور على أشياء في القائمة المعقدة. من أول الأشياء التي سنفعلها هو تغيير تنسيق الموقع. الآن ، إنه محاصر ، ولديه هذه الحدود هنا على اليمين. إذا ذهبنا إلى إعدادات المظهر ، تحت عام ، يمكننا إلغاء تحديد التخطيط المحاصر. والآن يذهب العرض الكامل. سنستمر في مشاركة رموز المشاركة ، ونريد تمكين التمرير إلى الأعلى. هذا يضع زرًا صغيرًا هنا ، لمساعدتنا في الضغط مرة أخرى إلى الأعلى. الآن الشيء التالي الذي نريد القيام به هو تغيير هوية موقعنا. الآن ، إنها ببساطة مدونتي. سنقوم بتغييره إلى Coworker Pro. وبهذه الطريقة ، فقد تغير. ثم بالنسبة إلى سطر الوصف ، الذي لن نراه في الصفحة الرئيسية ولكن سيظهر هنا في شريط الأدوات ، سنكتب Coworking في أفضل حالاته. ثم سنضغط على نشر. النشر مثل حفظ عملك. الآن ، ستلاحظ أنه لم يحدِّث شريط العنوان بهذا ، لأن المُخصص يمكنه إعادة تحميل الصفحة الرئيسية فقط. لذلك دعونا نغلقه بسرعة حقيقية. والآن يمكنك أن ترى ، Coworking في أفضل حالاتها ، هناك. وسنعود إلى أداة التخصيص. الآن دعنا نغير خلفيتنا ، وهذا هو قلم الرصاص هنا. يمكننا تغيير الصورة. وسأقوم بتحميل واحد. جميع الصور التي أستخدمها لهذا الفيديو تأتي من unsplash.com ، وهو مكان رائع للحصول على صور بدون حقوق ملكية. لذا سأضغط على فتح. وسأخرج العنوان لأنه ليس جيدًا لقراء الشاشة. لكنني سأضع بعض النص البديل هنا. تريد دائمًا وضع نص بديل على جميع صورك. ثم انقر فوق اختيار صورة. وها نحن. الآن دعنا نغير هذا النص. ثم سيكون السطر التالي ، تعال للعمل معنا. ها نحن. الآن دعنا نغير هذا الزر. انقر هنا ، وسيأخذنا هنا. هناك الآن تقول تعلم المزيد. نحن نحب التوسيط ، وبالنسبة لعنوان URL ، سنتركه بمفرده لمدة دقيقة. سنقوم في الواقع بإنشاء ارتباط إلى مكان أسفل لأسفل في الصفحة لاحقًا. لكن في الوقت الحالي ، سنتركه وحده. لكننا لا نريد أن يكون هذا الزر ورديًا ، نريده أن يكون أزرق. لذا سأعود من هنا ، وسوف نذهب إلى الألوان ، ونغير لون التمييز إلى اللون الأزرق. يمكنك اختيار أي لون تريده. لقد اخترت هذا للتو لأنني أحب ذلك. ثم سننقر فوق نشر. وسنغلق هذا. والآن انتهينا من الجزء العلوي. خطوطنا جريئة قليلاً هنا. دعنا نصلح ذلك. سنعود إلى التخصيص. الآن ، دعنا نذهب إلى إعدادات المظهر والطباعة ، وبعد ذلك سأختار حجم الخط. وإليك أقسام الصفحة الأولى ، وإليك قسم العنوان الكبير. سنقوم فقط بتصغيره قليلاً. ناقص ثلاثة ، دعنا نضرب النشر. أغلق هذا. هناك الآن كل شيء على خط واحد ، تمامًا كما نريد. الآن قبل أن ننشئ قائمة ، سنعمل على بناء بقية هذه الأقسام. الآن بعد أن انتهينا من القسم العلوي ، دعنا ننتقل إلى القسم الثاني. نحن الآن بصدد إنشاء موقع لمكان عمل مشترك ، لذلك نريد إقناع الناس بضرورة العمل هنا. لذا دعنا نغير هذه العناصر إلى الأشياء التي نريدهم أن يقولوها. سننقر على تخصيص ، ثم سننقر على هذا القلم الرصاص في الرأس. وهنا يمكننا وضع مجموعة كاملة من النصوص. بشكل اختياري ، يمكن تعطيل أي من هذه الأقسام. يمكننا التخلص من كل ذلك معًا ، وسنفعل ذلك لاحقًا مع اثنين منهم. فلنغير هذا العنوان. هناك. ثم سنقوم بتغيير النص أدناه أيضًا. الحياة المستقلة لديها الكثير من الامتيازات ، والعمل من المنزل في ملابس النوم الخاصة بك هو واحد منهم. فلماذا تأتي للعمل معنا؟ ثم لدينا ثلاثة أقسام هنا ، وهنا المجالات الإدارية الثلاثة لتلك الأقسام. لذلك دعونا نفتح الأول ، ويتم التحكم في الرموز بخط. الآن ، أحد الأسباب التي تجعلك ترغب في العمل في مكتب زميل في العمل هو الأشخاص. لذا دعنا ننقر هنا ، ونعثر على أشخاص. قد يعمل أحدهما. دعنا نختار هذا. وسنترك هذا اللون الأحمر ، لكننا سنغير هذا ليكون الناس. وسنقوم بتغيير هذا النص لنقول ، الأشخاص الذين يعملون هنا أذكياء ومساعدون ومهتمون. نحن نساعد بعضنا البعض على حل المشاكل والتعامل مع العملاء الغاضبين. ويمكننا أن نجعل هذا الرابط في مكان ما ، لكننا لن نقوم بذلك ، سنتركه وحده. لذلك سنغلق هذا ، وسوف نفتح التالي. هناك سبب آخر لرغبتك في العمل في مكتب عمل جماعي وهو المعدات. لا تريد جهاز فاكس في المنزل ، من يفعل؟ ولكن في يوم من الأيام ستحتاج إلى واحد. لذا دعنا نغير هذا إلى صندوق أدوات. تسمى حقيبة الملفات ، لكنها تبدو كصندوق أدوات. وهذا جيد بالنسبة لي. سنتركها زرقاء ، وسنكتب المعدات هنا. وسنضع بعض النص الجديد. لدينا جهاز فاكس وطابعة ليزر لطيفة وغرفة مؤتمرات بها هاتف مؤتمر. الأشياء التي لا تملكها أو لا تريدها في المنزل. ومرة أخرى ، سنترك هذا بدون رابط. وستظل الميزة الثالثة الدعم. باستثناء أنه ليس دعمًا فنيًا. نحن لا نتحدث عن الدعم الفني ، بل الدعم العاطفي. يحتاج الناس من حولهم للبقاء عاقل. نحن جميعا عاقلون. معظم الوقت. أود الآن أن أشير هنا إلى أنه يوجد زر حقل حذف هنا في كل واحد من هذه ، لذا يمكنك القيام باثنين ، أو واحد فقط إذا كنت ترغب في ذلك. وهناك أيضًا ميزة جديدة ، لذا يمكنك إضافة رابع أو خامس أو سادس ، إلخ. وسنغلق هذا. وهناك لدينا ، لماذا يجب أن تأتي للعمل معنا. تأثيرات صغيرة على كل أيقونة ، والنص يبدو جميلًا. الآن قبل أن نبدأ القسم التالي على الصفحة ، أود إعداد الخط الافتراضي للموقع بالكامل. وهي بسيطة للغاية. سنذهب للتخصيص وإعدادات المظهر والطباعة. وسأختار المقصورة. وسأختار نفس الشيء هنا. والآن ، كل شيء يستخدم المقصورة. الفرق دقيق ، لكنه موجود. الآن القسم التالي الذي سنعمل عليه هو القسم about ، وهو الشظية الصغيرة هنا. الآن يسحب هذا القسم بالفعل محتواه من الصفحة الرئيسية ، وتسمى الصفحة في WordPress الصفحة الرئيسية. لذلك سنذهب إلى لوحة التحكم وسحب تلك الصفحة لأعلى. والآن ، إنها فارغة. الآن ، كما لاحظت ، لا يتم استخدام عنوان الصفحة في أي مكان هنا ، لذلك لا يهم حقًا ما هو. لذلك دعونا نضع بعض النص هنا. والآن ، أريد أن أجعله بحجم رأس واحد ، وأن أتوسطه. ثم دعنا نضع بعض النص تحتها. نريد بعض النص الذي سيجعل الناس يشعرون أنهم يريدون أن يصبحوا جزءًا من مجتمعنا. لذا سنضع هذا النص فيه. كل يوم جمعة نقوم بغداء جماعي ، ويشارك العديد من الأشخاص في الطهي في مطبخنا في الموقع. نحن نأكل معا كمجموعة متماسكة من الأصدقاء الذين يبنون بعضهم البعض ويساعد بعضهم البعض على النمو. الآن ، دعنا نجعل هذا أكبر قليلاً. وتوسيطها. ستلاحظ الآن أن أحجام الخطوط لدينا بالنقاط بدلاً من البكسل. نريد في الواقع بكسل. لذلك سنذهب إلى الإعدادات ، ونفتح إعدادات TinyMCE المتقدمة في علامة تبويب جديدة. ثم هنا ، سننقر فوق أحجام الخطوط ، وسوف نستخدم بكسل. حتى الآن انقر فوق حفظ التغييرات. وسأقوم بتحديث هذا ، الأمر الذي سيؤدي إلى تحديث الصفحة. والآن ، يمكننا تمييز كل هذا النص واختيار px. وهذا بالضبط ما نريده هناك. فلننقر الآن على التحديث وسنلقي نظرة على الصفحة. هذا رائع جدًا ، لكننا نريد المزيد من النص أسفل هذا. لذا دعنا نعود إلى محررنا ، وأريد مساحة صغيرة جدًا ، لذا سأقوم فقط بذلك ولصقه هنا. والآن ، سنقوم بعمل هذا أيضًا. وتركز أيضًا ، ولن ننشئ هذا الرابط حتى الآن ، لأن الصفحة التي ستكون عليها غير موجودة. لكننا ما زلنا نريد حشوًا أكثر تحته. حتى الآن انقر فوق التحديث. وها نحن ذا. لكني أريدها أن تكون أكبر قليلاً. لذلك دعونا ببساطة نجعل هذا H. حسنًا ، دعنا نوضح التنسيق ونبدأ من جديد. إذاً الآن هي H 3 ، وسنقوم بتوسيطها مرة أخرى. وأنا انقر فوق التحديث. والآن ، فلنعد التحميل. هناك نذهب. وبعد ذلك ، بمجرد إنشاء بعض الصفحات الفرعية الأخرى ، سنعود ونجعل هذا رابطًا إلى الصفحة حول. لذلك هذا هو قسمنا. يريد كل مجتمع وموقع عمل جماعي إظهار بعض أعضائه. يمكن أن يساعد الناس على الشعور بالترحيب. لذلك سنقوم بتغيير صفحة الموظفين هذه إلى صفحة أعضاء. وسنقوم بذلك عن طريق النقر على تخصيص ، ثم ننتقل إلى ذلك القسم مرة أخرى ، وسننقر على لقاء فريقنا. والآن ، نقوم بتحرير هذا القسم. دعنا نغيرها لمقابلة البعض منا. ثم سنضع ترجمة مختلفة. أعضاؤنا هم مجموعة متنوعة من المطورين والمصممين ومديري المشاريع والعديد من الحرف الأخرى. قائمة الأعضاء لدينا هي حوالي٪ من النساء ، ولدينا مجموعة واسعة من الأعراق ممثلة. إذن لدينا أربعة افتراضيات هنا ، وهنا يمكنك رؤية الأقسام الأربعة. وهناك رابط لإضافة عضو جديد في الفريق. لذلك دعونا نفتح الأول. دعنا نغير الاسم إلى تينا. وستكون الترجمة المصممة فنانة مائلة ، وسنغير صورتها أيضًا. ونزيل العنوان ونضع دائمًا نصًا بديلًا على أي صور تحمّلها. وتتذكر أننا قمنا بتثبيت My Eyes Are Up هنا؟ هناك نوعان من المعاينات المختلفة التي قام بها. الآن في هذه الحالة بالذات ، كان وجهها بالفعل في المركز ، لذا لم يكن الأمر مهمًا حقًا. ولكن سيؤثر ذلك على الصور الأخرى التي نقوم بتحميلها. لا نحتاج إلى اختيار محاذاة أو حجم أو أي شيء ، لأن السمة تختار ذلك لنا. لذا سنضغط على “إدراج” في المنشور ، وهناك “تينا”. دعونا نضع وصفًا أفضل لتينا. ستلاحظ الآن ، هذه منطقة نصية ، لذا يمكنك الإمساك بهذا الشيء الصغير هنا وتحريكه لأسفل إذا كنت بحاجة إلى ذلك. تقضي تينا أيامها في إنشاء أعمال فنية رقمية. تم عرض فنها في قاعة كارنيجي ومتحف لندن للفنون. أود أن أشير إلى أن كل شخص سوف أطرحه هنا مصنوع. وأكرر مرة أخرى أن جميع صوري جاءت من Unsplash. يمكننا الآن إنشاء رابط إذا كان لدى تينا صفحتها الخاصة ، لكنها لا تملكها ، ولذا سنترك الرابط فارغًا. وبعد ذلك ، سنختار شبكاتها الاجتماعية. يمكننا الاختيار من أيقونة ، ثم نضعها في عنوان URL. وسأترك هذه بشكل افتراضي ، لأن تينا ليس لديها شبكات اجتماعية حقًا ، لأنني اختلقتها. ولكن إذا كنت تريد التخلص من واحدة ، فيمكنك النقر فوق إزالة الرمز ، والآن ينحرف LinkedIn عن Tina. إذا كنت ترغب في إضافة شيء آخر ، يمكنك النقر فوق إضافة رمز والعثور على بعض الشبكات الاجتماعية الأخرى. هذه تينا. سأريكم واحدة أخرى. ثم ، من خلال سحر التحرير ، قم بالاثنين الآخرين من أجلك ، لأنهما سيفعلان الشيء نفسه تمامًا. شعبنا القادم سيكون في الواقع شركة من ثلاث شقيقات. وهنا مرة أخرى ، يمكننا اختيار ما نريد أن نكون محور الصورة. سننقر على “إدراج في مشاركة” ، وهناك أخواتنا الثلاث. هم شركة تسويق. والآن تقول خوانيتا ، وجولييت ، وجاكلين ثلاث شقيقات بدأوا شركة تسويق خاصة بهم. يعملون في المقام الأول مع الفنانين والموسيقيين الشباب داخل المدينة. ستلاحظ الآن أن كل هذه الصور الأخرى مربعة ، لكن هذه ليست كذلك ، فهي أقصر قليلاً. حسنا. كلهم بنفس العرض ، على الرغم من أن موضوعنا سيقيد ذلك. يجب أن تكون جميعها بنفس العرض ، ولكن يمكن أن تكون أطول أو أقصر قليلاً. لذا ، سأقوم بالاثنين التاليين. الآن لدي قسم يستعرض بعض أعضاء مجتمعنا. كما ترى ، من السهل إضافة المزيد ، وكل واحدة مرنة للغاية. الآن ، لننقر على النشر ، ونغلق أداة التخصيص ، ونتأكد من أنها تبدو جيدة العرض الكامل. بالتأكيد. والآن بعد أن انتهينا من هذا القسم ، يمكننا الانتقال إلى القسم التالي. في أي وقت تبيع فيه منتجًا ، سيرغب الأشخاص في الاطلاع على الشهادات. يريدون أن يسمعوا من الأشخاص الذين أجروا عملية الشراء ، وأن يروا رأيهم. لذا سيكون القسم التالي هو قسم الشهادات. ويسمى الافتراضي ، ما يقوله العملاء ، لكننا سنغير عملنا. سنبدأ بالنقر فوق تخصيص ، وسنقوم بالتمرير لأسفل مرة أخرى. وسنضغط هنا ، ما يقوله العملاء. على غرار جميع الأقسام الأخرى ، يمكنك تعطيله. وبشكل افتراضي ، هناك ثلاث شهادات ، ولكن يمكنك إضافة المزيد. لذا دعنا نغير نظرتنا من ما يقوله العملاء إلى ما يقوله الأعضاء. وبعد ذلك ، بالنسبة لعنوان فرعي لقسمنا ، نادرًا ما نحتاج إلى التسويق ، حيث يميل أعضاؤنا إلى إخبار الجميع أنهم يعرفون مكانًا رائعًا للعمل. والآن ، دعونا نحصل على شهاداتنا الخاصة. ذاهب إلى تبديل الصور. وستلاحظ أنه يضعها تلقائيًا في دائرة لنا. كانت صورتنا الأصلية مربعة. اخترت الاحتفاظ بالاسم الأول ، وحتى العنوان الفرعي ، لأنه يناسب. لكننا سنضع في نصنا. أحب أن أحظى باحترام من حولي. غالبًا ما تعني كونك امرأة في مجال الأعمال التعامل مع أشخاص لا يعتقدون أنني يجب أن أكون هنا. ولكن في Coworker Pro أنا مناسب. ثم مرة أخرى ، يمكن أن يكون هناك رابط ، لكننا لا نربط أي مكان ، لذا يمكننا تركه فارغًا. فلنقم بشخصنا التالي. لقد اخترنا الآن هانسون. وسنضع اسمه. وإدراجها في البريد. ومرة أخرى ، سنستخدم الأسماء الأولى فقط ، وبدلاً من جعله فنانًا مستقلاً ، سنطلق عليه مهندس صياغة. وبعد ذلك سنضع في نصنا. أجواء الشباب والإثارة في هذا الفضاء هي مسكرة. هؤلاء الناس يغيرون العالم ، وأكون هناك لأرى ذلك يحدث. ثم سنغير الثالث. سنقوم بتغيير الصورة. تصفح هنا. ذاهب لوضع نص بديل لدينا. وإدراجها في البريد. سنترك ناتاليا للعمل لحسابهم الخاص. إزالة الاسم الأخير ، ووضع نصنا الخاص. وجبات الغداء يوم الجمعة مع المجموعة هي الأفضل. أحب الطبخ الجماعي وشعور الأسرة الذي يأتي من الجميع حول الطاولة. هذا كل شيء ، لدينا الآن منطقة شهادات لدينا. سنقوم بنشر وإغلاق التخصيص. ثم قم بالتمرير لأسفل لرؤية ما يبدو عليه في الشاشة العريضة. وتبدو رائعة. هناك قسم آخر علينا القيام به ، وهو التذييل. ولكن أولاً ، سأشير إلى أنه نظرًا لأننا لا نريد مدونة على هذه الصفحة ، يمكننا الانتقال إلى أداة التخصيص ، وسنذهب إلى أسفل إلى منطقة المدونة ، وسننقر فوق عين صغيرة هنا. والآن ذهبت. والآن لدينا هذا التذييل الذي تم إعداده في الغالب لنا. لكن دعنا ننشر. وأغلق هذا ، وانظر كيف يبدو. يذهب الحق من الشهادات إلى التذييل. تحرير التذييل في هيستيا يختلف قليلاً عن الأقسام الأخرى. لا يزال يستخدم أداة التخصيص ، ولكن لديه بعض الأدوات المختلفة. لنلقي نظرة. سننقر على تخصيص ، ثم ننتقل إلى الأسفل. وهناك رابط تعديل واحد فقط على هذا التذييل بأكمله. لذا دعنا نضغط عليه. هنا ، يمكنك تغيير صورة الخلفية تمامًا مثل جميع الصور الأخرى التي قمنا بتغييرها. سأترك هذا لأنني أحب منظر المدينة ، ولكن يمكنك وضع أي شيء في الخلفية هناك ترغب فيه. هناك العنوان ، تواصل معنا ، سنترك هذا ، لأن ذلك يناسب. ولكن بعد ذلك ، سوف نضع الترجمة في المنضدة الأمامية من الساعة: صباحًا إلى: مساءً. التوقيت الشرقي. ثم لدينا هنا عنوان نموذج ، وهذا هنا. But to determine what form goes right here, we click this little tab right here. And it’s simply a short code. Which means you could put in any short code, and it could render any number of things there. It could render another form or a bunch of information. You may recall near the beginning of this video that we installed the Pirate Forms plugin to go with Hestia. That’s because it’s using it right here. And as you can see, it is a perfectly functional small simple form. So we’re going to leave it. But now, we want to edit this content. So we’re going to click right here, edit. And it pops up here. I’m going to put in a different address, because I’m not in Romania. And I’m going to put in different contact information. But I like give us a ring and find us at the office, those fit nicely. And then, when we’re done, we click edit again, and it goes away, and you can see our new information here. And that’s it for the footer, just like that. Just a little bit of text touch-up, and we left the form alone, and we’re all set. So let’s publish. And close the customizer, and see how it looks. Just great. Now that we have the footer done, let’s look at adding a menu right up here. And most of the menu right now is going to link to various parts of the homepage. In a few minutes, we’ll add some actual pages, and we’ll add those to the nav then. But for now, we’re merely going to make a nav that lets us move around the homepage. Now, the first thing we want to do is get a list of the links that we’re going to use in our nav. And I’ll show you how we’re going to do it. Scroll to the second section. Why you should come work with us. Now this is the only part of the whole video that even looks at code. In your browser, we’re going to right click, right here in this white space, and go to inspect. And the first thing it comes up to is a section. And these sections right here, there’s a list of them, are the things we’re looking for. They’re just under the main div. Now, each section has an ID. This one that we clicked on is features. Next is about. Then there’s team, then there’s testimonials, and lastly, there’s contact. If this all sounds familiar, it’s because it’s the sections of the homepage. So you want to write down on a piece of paper, or a text file on your computer, the names of these IDs. Go ahead and hit pause and write them down. Once you’ve gotten them written down, let’s go back to our browser. Now we’re going to use the customizer. So we click customize. And one of our options right here is menus. Right now, there are only two menus. There’s a default top bar, currently set to very top bar menu, which actually isn’t being used on our theme right now. It has a phone number and an email address that we could use if we wanted. But we’re not going to. And there’s also a socials top menu, and so you could put social networks in the top bar. And we’re not going to do that right now either. We’re going to create a new menu, and we’re going to call it primary menu. And we’re going to click the primary menu checkbox. And that’s what’s going to make it appear right here. So let’s click next. And now we can add items. Now, rather than use the suggested pages and links that we have here, we’re going to create custom links. And we’re going to link to the various sections of our page. Now the first one was called features. And we’re going to use the ID that we pulled out of the code. We’re going to start with a slash, which means, on the homepage, then we’re going to put in a hashtag, which means, go to an ID. And we’re going to type features. And then we’ll click add to menu. So let’s look at just that one for right now. Click publish, and we’ll leave the customizer. So now we have features, and if we click it, it beautifully scrolls right down to the features section. So now, all we need to do is the same thing for all the other sections. So let’s go back to the customizer again. We’ll go back to the menus. We’ll edit our primary menu. And add items. All of these are going to be custom. Now the next ID we have is about. However, we really called that section community. So the link text is going to be community. Add to menu. The next one had an ID of team, but again, we’re going to deviate just a little bit and call it members in the menu. Then we’ll add to menu. The next one is testimonials. And we’ll leave that one called testimonials. And lastly, we’re going to have contact. So now, let’s click publish. And there’s our nav. We can even click while in the customizer, and have it jump around. Now one more thing we want to add to the nav is a little search option off here to the right. So we’re going to actually leave the primary menu, and go to header options. And under navigation, we can enable search in menu. And now, we have a little glass here. So now, we’ll click publish. And close the customizer. And here we have a beautiful nav that lets us jump around the homepage. Now, we’re also going to create some subpages that are actually different pages from the homepage, and we’ll come back to the nav and add those to it when we do that. Now that we are nearly finished with the homepage, let’s build the news page. Before we get started, I want to remind you of a couple things. We’ll go to settings, reading, and I’ll point out that our posts page is actually a news page. So let’s go to pages, and edit the news page. And you’ll note that we can’t put any text in here, because it’s supposed to be an archive. But let’s view it. The posts will go here, and we have this horrible pink bar at the top. We are using the page’s title, and fortunately, we can also use the featured image. So let’s upload a nice featured image. There’s our alt text, and we set the featured image, and update. And now, we’ll go look at it. And there we are. Now as long as we’re here, let’s add it to the menu. We’ll go to customize, menus, primary menu. Add items. And we’ll add our news page, except we want it here at the top. Then we hit publish, and close the customizer, and now we have a news item. And it goes to this page. So let’s create our first post. We’ll click add new, and there is nothing unique about posts in Hestia. This is % stock WordPress. So if you’re familiar with WordPress, you know how this works. Let’s go ahead and make one. Our coworking space has a new refrigerator. The old one saw its last ham sandwich last Friday. And we’ll put an image at the top of the post. And put in our alt text. And that’s too small, so we’ll click the pencil, and we’ll go to large. And we’ll center it. And click update. And there we are. I’m also going to set it as the featured image, and you’ll see why in a moment. So I don’t need to upload it again, it’s already there. We’ll add a new category called kitchen. Publish. And now, when we reload our news archive, there we are. Now this image is the featured image. If we hadn’t set one, then this text would slide all the way to the left, which is usually fine, but it looks really sharp with a featured image. If we click, it also puts the featured image in the bar at the top, so that’s something to remember. Now, you’ll note that it says uncategorized, and we made one for kitchen, so let’s go back. And there we are, we have proper category right there. Now, before we get too much farther, I want to fix the nav in the footer. I want it to replicate what’s in the header, so I’m going to go to customize, and go to menus, and click on primary. And you’ll note that it’s already set to primary, but if I also set it to footer, you can see that it’s now down there at the bottom. So now, I’ll publish and close this, and there, now we have the same nav at the top and the bottom. I’d like to show you one more option with the blog page. And then we’re going to create an about page. Right here on the homepage, we’re going to click customize. And then we’re going to go to front page sections. The sections that are bolded are the sections that we have built. The ones that are grayed out are sections that could exist, but don’t, because we never turned them on. The ribbon simply gives you a background image, and a place to put in some text and a button. The clients bar allows you to post icons of your clients. Subscribe allows you to put in a subscribe form, and then blog is where I was headed here, allows you to put in a blog section. So I’m going to unclick disable section, and we’ll scroll down. And while you were away, I added a second blog post. So we have one here for the kitchen, and a new member. And we can make this say news. And there we are, now we have a news section on our homepage. And if we decide we don’t want that, we click the little I, which checks this, and I’m going to click publish. And now we’re back to where we were, but now you’ve seen how easy it is to add a news section to the homepage. But now, let’s create an about page. Again, there’s very little custom about pages in Hestia. So if you’ve ever built a page, you know how it works. Here’s our about text. We’ll create a featured image, and I’m going to use the same image as the homepage header, for some continuity. And now, let’s view that page. And there it is. And now, let’s put it in the menu. We’ll go to customize. Menus, primary menu. Add items, and we’ll add this about page. We want about way up here at the top. So then we’ll publish, and then close the customizer bar. And there we have about. So let’s test these items. We’ll go first to contact. Which takes us to the homepage, and the footer. Then there’s testimonials, members, community, features, news, and about. And if we want the top of the homepage, we simply click the logo, and there we are. Now, our site is essentially finished. The next things we’re going to do all relate to maintenance items, like setting up stats, SEO things, etc. But our site is built and our content is done. So let’s get started on our maintenance. The first maintenance thing we’re going to look at relates to caching, which helps your site go faster. Caching typically means keeping a copy of your page stored on the server, so that it can serve it faster without having to build it all from the database. Normally, I prefer a plugin called WP Rocket. It’s really excellent. However, many hosts, including Siteground where we’re hosting, cache for you, and you don’t need a plugin at all, and I’d like to go over that with you. If we go to dashboard, then at the bottom, there’s SG Optimizer. And there are several things here that we can do. Let’s configure the SuperCacher Config. Right now, Dynamic Cache is on, and that means when it builds a page and sends it out, it keeps a copy, so that the next person doesn’t have to build the page. The cache is also automatically flushed at the right times, so that if you make a change to a page, it doesn’t keep serving the old one. And you have a button here to manually purge it if you want to. You can choose to exclude some URLs from dynamic caching. But then there’s a section here called Memcached settings, and this stores in the server’s memory some of the frequently executed queries to the database. So we’re going to turn this on, and you’ll note that it says, you must enable Memcached from your cPanel. So let’s go to cPanel. We’ll go to Siteground.com and click login. Then we go to my accounts. Go to cPanel. And then over here in the search bar, we’re going to hit cache. And then click SuperCacher. And right here is level three, Memcached. And we’re going to turn it on, by clicking right here. And now, we’ll simply reload this page rather than click the button again, and now we’ll click the button. And now it’s enabled for our site. There’s a button here to test caching for the site, if we click test URL, it says it’s cached. So now we have two different layers of caching enabled, and it should make the site go much, much faster. But in addition to caching, there’s HTTPS Config. And this is already set properly, and you probably should never touch it. This requires that your site operate on HTTPS. Without this, it could operate on either HTTP or HTTPS. But we never want it on HTTP only. So we’re going to leave this just the way it is. Lastly, there’s PHP Config. We want to be running on at least PHP seven. Right now, we’re at ., and we’re going to leave it there, because that’s better than PHP seven. PHP seven is worlds faster than PHP five. And PHP five is pretty common on a lot of servers. So if your server’s on five, ask your host about moving to seven. Or, if you’re here on Siteground, you can switch. So now we’ve gone through the sections of the Siteground optimizer, and the only thing we changed was, we turned on Memcached. Next, let’s talk about getting the site connected to the search engines. First, we’re going to connect the site to various Google properties. Within WordPress, we’re going to use plugins to do that, but before we can use the plugins, we actually have to create the accounts in Google. If you already have an account in Google, you can use it. I’m going to start from scratch. You can use a single Google account across all of Google’s properties. So it doesn’t matter which one you start with. We’re going to start here with Google Analytics. So I click sign in, and then analytics, and we’re going to create an account. And here you can use either an existing email address, or create a Gmail account. I’m going to create a Gmail account. Then we’ll put in our password, and click next. I would recommend putting in your phone number and recovery email address, but you don’t have to. You do need to tell them when you were born. Then there’s their privacy and terms, and click I agree, and now we have a Google account, and now we can sign up for Google Analytics. We’re doing a website, not a mobile app. We’re going to create an account name and a website name, and then we have to tell it where our site is. Choose an industry category, and time zone. And then we have some data sharing options. You’ll want to read these over and decide for yourself if you wanna share this data with Google. I’m going to say okay, and I’m going to click to get tracking ID. But before we can do that, we have to agree again to the terms and services, and click I accept. Now this is our tracking ID. And in the bad old days, you would have to copy either this or all of this code, and figure out how to wedge it into your website somehow. But we’re going to use a cool plugin in just a few minutes. But before we get there, I’m also going to connect with Google Search Console. It used to be called Google Webmaster Tools, but now they call it Search Console. Now, because we’re already logged in with Analytics, we can simply click search console. And they want our password again. And they really want us to give them a recovery phone number and email, which I recommend you do, but I’m not going to bother, because I’m not going to be using this domain very long. And then we tell them where our website is. And click add a property. Now, in order to verify to the Search Console that we own this property, we need to do any number of several things. The recommended method is uploading an HTML file. Among the alternate methods is Google Analytics, and we’re going to use that in just a few minutes, once we connect our Analytics account. So as of right now, we have created a Gmail account and connected it with Google Analytics and Search Console. Now we need to connect those two things to our website. So let’s get going on that. The first plugin we’re going to connect is called MonsterInsights. We’ll go to our dashboard, plugins, add new. And there it is, Google Analytics for WordPress by MonsterInsights. We’ll install and activate. And right at the top, it says that we should configure the settings. The first thing we’re going to do is authenticate with our Google account. If you ever connected your Twitter account to any other site or anything like that, this is very similar. We choose our account. We tell it what it’s allowed to do. And then we pick the profile that we have under that username. Right now, there’s only the one, so we’re going to choose all website data. And if at any time, you don’t want to do this, you can click cancel, but we’re going to complete authentication. And now, our profile is active, with this UA code. You can click verify credentials, and it will say that it is done. And now our site is set up with Google Analytics, just like that. There are some other things that can be done. You can pay for a version of MonsterInsights Pro, and get some added features. If you wish, you can allow them to do usage tracking. And you can optionally have it do automatic updates. Now, if we go over to tracking, we have some options. For example, if an administrator or editor is logged in, then they are not tracked. That way, you don’t artificially boost your own traffic. You can enable demographics, and you can do things with link attribution and file downloads, etc. I’m not going to change any of the defaults, they’re great. The defaults are perfect in MonsterInsights. Now that we’ve connected our site to Google Analytics with MonsterInsights, we’re going to connect it to Search Console with Yoast SEO. So let’s go to plugins and add new. And search. And there it is, we’ll click install now, and activate. Now the first thing you’ll note is that there are some notifications at the top. The first thing it says is that we’re blocking Google, which is true, and is fine for now, we want to do that. But right here, the next thing they want us to do is connect with Google Search Console, so let’s click that. To allow Yoast SEO to fetch your Google Search Console information, please enter your Google authorization code. Click this button. Choose the account that we are working with. And then, we’re going to allow Yoast. And it gives us this big long code. Then we can close this window, and paste it here. And authenticate. And now, we have authenticated, and we don’t need to do any of these methods. Now that our site is connected to Google Search Console, Google can know much, much more about our website, and all of the tools built into Yoast will work even better. So we’ll take a look at those tools next. The next plugin we’re gonna look at here is called Jetpack. Now Jetpack was installed for us by Siteground. But it’s just a regular plugin. If you go to installed plugins, you’ll see it right here, and if you don’t have it, you can simply install it like a regular plugin. Now Jetpack is a little but different from most plugins. It’s actually a collection of plugins. And what makes it unique is that most of the things that Jetpack does is heavy lifting, heavy work, and it does it out on the WordPress.com servers, so that it doesn’t weigh down your server. It can do things like website statistics, image compression, spam fighting, comments filtering, etc. The first thing we need to do is connect Jetpack to a WordPress.com account. Now you might think that creating a WordPress.com account means getting a blog there, but it doesn’t have to. You can simply have an account there to use with Jetpack. So let’s click set up Jetpack. And here, we can either log into an existing .com account, or create a new one. We’re going to create a new one right now, and we’re going to click sign up here in the top right. We’ll put in our email address, choose a username, and then a password, and then we’ll create our account. And then it immediately begins connecting our website with Jetpack. Now by default, Jetpack is free. But there are upgrades available. Down at the bottom here is a button that says start with free. And there we are, now we’re connected. By default, nothing is turned on. But they recommend that all of these things be turned on. Many of them are good, and I like them. But I recommend reading through them, and making sure that you want what’s there. For example, we don’t need a contact form. We have Pirate Forms from Themeisle. So I’m not going to click activate recommended features. I am going to go to site stats, and it’s automatically set up. We could click configure, and set up some settings. We can have a chart showing hours of views in the admin bar. We can decide who gets counted, even if they’re logged in. One of the ways it works is by putting this little tiny image on the page. It’s not required, but it’s helpful, so I tend to leave it there. And then, here we get to decide who’s allowed to view stats. Right now, it’s only the administrator. Because we just set this up, there’s nothing to display yet. But it says your stats will begin to appear here within minutes, and that’s one of the reasons that I like including Jetpack stats in addition to Google Analytics. With Google Analytics, you get to either watch real-time stats, or you wait until tomorrow to find out what today’s stats are. You can’t look hour by hour today, and see how you’re doing as the day goes on. With Jetpack stats, you can do that. You can look every minutes, and see how your stats are growing. This can be useful when you’re doing a large push on your website. Another great thing that Jetpack can do is filter spam, and it does it using the companion plugin called Akismet. If we go to plugins, you’ll see that it’s right here. Akismet comes with WordPress. Now Akismet is also a service. It processes the spam on an outside server, so that it doesn’t bog your server down. So let’s activate Akismet. And then, right at the top here, we can set up our account. Now because we’re connected with Jetpack, we can simply click connect. Otherwise, we could sign up with a different email address, or get an API key. So I’m just going to connect with Jetpack. Now Akismet has a variety of pricing models. There’s enterprise, for larger sites. There’s $ per month per site for smaller commercial sites. And then, there’s name your price. And what’s interesting is that you can name a price of zero, if you wish. So let’s click get personal. And then right up here is the slider. If we drag this down to zero, the credit card information goes away. Now it says, you may not do this if you have advertising, you sell products, or you publish information about your business or service. Now something very important to note here is that this only works if you do not have advertising, you do not sell products, and you don’t publish information about your business or service. Our site is advertising a commercial space, that’s what it is. So we’re not going to do the free one. But we can choose $ a year, which is $ a month, which is not very much. If you find that it’s blocking lots and lots of spam for you, I would recommend paying more for the service. They’re nice enough to allow you to choose, and they’re providing you great service. So give them what you can. Now because our site is not a real site for a real service, I’m going to choose the free one. But if you’re building a site for a real business, you’ll need to pay for Akismet. Now that it’s processed, we can activate this site. In the background here, you can see the API key that was an option earlier, and it put it into our site for us. Now optionally, it can also show the number of approved comments beside each comment author. So not only does it block spam, it approves quality posts. By default, Akismet takes your spam and puts it in the spam folder. Right now, our setting is that the most egregious spam gets automatically deleted, and does not go into the spam folder. If you really need to see all of it, then you can click this option right here. And now that Akismet is set up, we shouldn’t get any spam at all on our website. If we do, then we have the option to mark it as such, and it will communicate to Akismet, hey, you missed this one, and Akismet learns. That’s how it gets so good. Next, let’s look at backups. For backups, we’re going to use the backup system built into Jetpack. And it used to be called VaultPress, but now it’s just called Jetpack backups. But you may still see VaultPress around. Let’s go to the Jetpack dashboard. And here at the top, there’s a tab that’s called plans. Now the backups for Jetpack are not free. However, their personal plan, the cheapest one, does include full off-site backups. Now these are nightly backups, you get one a day. If you go to the more expensive plans, then you can get real-time backups, where you just push a button and it does a backup right there when you ask. We’re going to do the personal one, and it comes with priority email support, which is pretty useful. So let’s click upgrade to personal. Now this took us to our account on WordPress.com. You may recall, we had to create this account in order to connect Jetpack to our site. So this is the same site. Now I’m going to fill out this form, and click pay. Now that we’ve clicked purchase, it’s setting up a number of things for us. It set up the daily offset backups, with a -day backup archive. That means you can recover your site up to days back, but not , so if you miss something for days, too bad. Unlimited backup storage space, that’s really important. If you are a musician or a photographer and you have a ridiculous amount of data, unlimited storage space is a big deal. Automated restores, which means you don’t have to do anything really, if you just want to restore, you click a button and it does its thing. You don’t have to download zip files and mess around with things. It comes with spam protection, easy site migration, if you’re going to move somewhere, and priority support. So now let’s go back to our site. Now we’ll still here in our dashboard, and we’re still looking at the plans. But now, there’s an option to manage your plan. Remember how I said Jetpack backups were called VaultPress? With here we are, we have a VaultPress menu item. If we click it, you’ll see that VaultPress is backing up my data right now. It’s done with uploads, and it’s going to work on the rest next. Something important to note. The first backup backs up everything, but in the future, it only backs up changes. So the first one is probably going to be quite slow. But from then on, they should be very speedy. The next thing important to know is that you can close this window. It’s not dependent on your browser being open. It’ll do its thing. And they’re going to email us when it’s done. Another cool thing is we can set up remote access, so that you don’t have to be at your computer to restore your site. Right now, we have a license for one site. It says we’ve never backed up, ’cause it’s still in process. If we upgrade our plan, then they will do a security scan on the backup, and let us know if it finds anything wrong. Let’s go to settings. And there’s a wide variety of things that you can do here. We’re not going to cover them all, because it could get really deep. But you can set up SSH access, so that VaultPress can access your site’s server. Now Siteground does offer SSH, but not all sites do. If not, you could set up SFTP, or regular FTP. Or you could say, “I want to restore my site to some other server.” This is really handy when actually moving servers. If we were to leave Siteground and go to some other host, we could say to VaultPress, hey, go install my site over there, and it could do that. It also knows who we are, what account this is. If we go to activity, it tells us that it’s done a full sync of uploads. We’ll look at our backups, and there probably isn’t any yet. You can still see this icon spinning. Now we need to set up access for VaultPress to access our server better, and that takes us right back to here. Now to allow VaultPress to access our website, we’re going to enable SSH. That stands for secure shell, and it’s a secure way for VaultPress to log in to our site and work on it. So we’re going to click right here, and then we need to fill in our server information. Now some of this we’re going to get from Siteground, because that’s where our site is hosted. So let’s go to Siteground, and log in. Now, setting up SSH isn’t very difficult, but there are a number of steps. So if you follow closely, it should work just great. I’m going to click on my accounts, and go to cPanel. Now in this search right here, we’re going to type SSH. And there’s one icon left. Click that. Now what we want to do is upload a public key. If we go back to VaultPress, and click show public key, it’s right here. We just copy everything in the black here, and on Siteground, paste it here. We don’t put anything in the allowed IP address field. Then click upload. And now our key has been successfully added to our account. If we go back, you can see it right here. So now, we need to go back to our cPanel home. Now to find our username and password, we’re going to go back to my accounts. Which actually leaves cPanel, and we’re going to click right here, information and settings. Now, VaultPress wants a server address, port number, and a username and password. For the server address, we’re going to use our FTP server. Our port number is . This is not standard for SSH, it’s custom to Siteground. And you can find that information in the Siteground documentation. Our username is our cPanel username. Because we’re using a public key, we shouldn’t need a password. So let’s click save. And now it works. I’d like to reiterate that because we used our public key, we don’t need to put our password in. That’s the way keys work. So now, VaultPress can connect directly to our server, and work with the files that it finds there. So just a quick review of what we did here at VaultPress. We went to settings, and we set up SSH, so that it can log in. The other things are interesting, but not vital. We can look at our backups, we can look at our activity. And you can see what it did and when it did it. But let’s go back to our website. Then we’ll go into the admin area, and we’ll go to Jetpack, VaultPress, and on this page, you can see an ongoing progress of how it’s doing. Now that we have finished backups, our site is complete. Everything is done. Let’s do a quick summary of what we’ve built. The first thing we did is set up an account on Siteground. Then they walked us through a wizard which set up our hosting, installed WordPress, set up SSL for secure browsing, and helped us buy a domain name. At that point, we had a plain WordPress site, with default theme and original content. The next thing we did is install some plugins that we knew we were going to need. We installed TinyMCE, so that we had a few extra buttons here, and then we also installed My Eyes Are Up Here, so that we could install images of people and make sure their faces were in the pictures. The next thing we did is pick our theme, and we chose Hestia from Themeisle. It proved to be pretty flexible, and I’m very happy with it. Then we built our homepage, and we went through section by section and used the customizer to create each of these elements. We didn’t have to do any coding to build this entire site. We also made a couple of regular pages with normal content on them. Once we were done building the site, we added on some extra tools. We went through the Siteground Optimizer. Most quality WordPress hosts these days have something similar, so if you host somewhere else, make sure you look for a tool similar to this. We connected to the Google Search Console, as well as Google Analytics. And then we also hooked up Yoast SEO, so that we would have good search engine optimization. Then lastly, we configured Jetpack. Siteground installed it for us. If your host does not, you can install it like a regular plugin. But Jetpack gave us Akismet for spam, its own built-in stats program, and lastly, VaultPress for backups. So now we have a complete site, it’s fully functional, and has a robust back end to keep it working smoothly. I hope you enjoyed building your site as much as I enjoyed building this one. Remember to check out the links in the description for discounts, as well as locations for each of the pieces of software we used. And if you’re interested in learning more about WordPress, and further improving and progressing your site, come take a look through some of the other content we offer over on WinningWP.com.

عرض المزيد من رالفيديو…

أي شيء لإضافته?

Jeffrey Wilson Administrator
Sorry! The Author has not filled his profile.
follow me