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

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

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

أخبار سارة ، أنت في المكان الصحيح

هناك احتمالات إذا كنت تقرأ The Layout ، فأنت على الأقل معتاد على WordPress. يفتح WordPress الباب أمام شخص ما للانتقال من مصمم إلى مطور أفضل من أي نظام أساسي آخر على الويب. إحدى الطرق لتحقيق ذلك هي المحرر ، والذي يمكن العثور عليه في لوحة معلومات WordPress ضمن المظهر> المحرر.

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

سترى عادةً ثلاثة أنواع مختلفة من الملفات هنا. لتبسيط الأمور ، فكر في هذه الملفات مثل "جسم" موقع الويب الخاص بك. تحتوي ملفات PHP (.php) على HTML (العظام) و PHP (الأعصاب التي تربط كل شيء بالدماغ ، وقاعدة البيانات). أوراق الأنماط (.css) هي مظهر موقعك ، وتحدد شكله. يمكن اعتبار JavaScript (.js) بمثابة عضلات الموقع ، وعادة ما تتحكم في الأجزاء المتحركة وتتفاعل وتستجيب لكيفية استخدام الموقع والتفاعل معه. انطلق واستكشف قليلاً. هل ترى أي كلمات وصفية تشير إلى أي قسم من الموقع يستخدم الرمز؟ او كلمات تصف بعض الجوانب المرئية للموقع؟

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

لا تخافوا

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

نصيحة احترافية: بمجرد أن تشعر براحة أكبر مع الكود ، أود أن أشجعك على استكشاف التحكم في الإصدار ، إما Git أو SVN ، كطبقة ثالثة من الأمان والخط الأمامي لتتبع التغييرات والتقاط الثغرات قبل بدء تشغيل التعليمات البرمجية الخاصة بك.

من أين نبدأ؟

الآن بعد أن تناولنا بعض العقبات العقلية الأولية ، من أين يجب أن تبدأ؟ إذا كنت مصممًا ، فإن CSS هو المكان الأكثر طبيعية لبدء العمل مع الكود. كما ذكرنا من قبل ، هذا هو مظهر موقعنا ؛ يتحكم في شكل الموقع وكيفية تخطيطه. قبل أن نتمكن من تشريح CSS ، نحتاج إلى فهم كيفية عملها مع HTML. تحتوي HTML على مجموعة متنوعة من العلامات لتمييز المحتوى بداخلها. يمكن أن تحتوي هذه العلامات على العديد من السمات المختلفة ، والتي توفر بعض المعلومات الإضافية حول العلامة ومحتواها. السمتان اللتان سنلقي نظرة عليهما هما id class . فيما يلي مقتطف الشفرة بثلاث علامات HTML مختلفة. ستلاحظ أنه ليس كل علامة لها معرّف أو فئة. إنها ليست مطلوبة ، لكنها تساعد في تمييز العلامات الموجودة على نفس الصفحة عن بعضها البعض. يجب استخدام المعرفات مرة واحدة فقط على الصفحة ، بينما يمكن تكرار الفئات واستخدامها عدة مرات.

<article id="post-1" class="inset">
	<p class="highlight">Hello, <span>world!</span></p>
</article>

لذلك لدينا العلامات ، <article> ، <p> ، و <span> . المقالة لها معرف post-1 وفئة أقحم. تحتوي العلامة p على فئة تمييز ولا تحتوي علامة span على معرف أو فئة.

قد يبدو CSS المتوافق مع HTML أعلاه كما يلي:

/* This is a comment, it doesn't affect the code. We can use it to make notes or write instructions */
article { /* These styles will apply to every <article> tag on the page */

background: #eaeaea;  /* This makes the background gray using a HEX color code */

padding: 20px; /* give the article 20 pixels of space around the inside */

margin: 10px; /* give the article 10 pixels of space around the outside */

}

#post-1 { /* These styles will apply to only the tag with id of post-1 */

border: 1px solid green; /* green solid line around the container */

}

.highlight { /* These styles will apply to anything with a class of highlight */

background: yellow; /* give this text a yellow background */

}

span { /* These styles will apply to every <span> tag on the page */

font-weight: bold; /* bold this text */

text-transform: uppercase; /* make this text ALL CAPS */

}

للتعمق أكثر في CSS وكيف تعمل ، هناك الكثير من الموارد الرائعة. بعض الأماكن الرائعة للبدء منها هي A List Apart Books و codechool.coma و codecademy.com و lynda.com و css-tricks.com و wpbeginner.com. كل من هذه الموارد مختلفة قليلاً ؛ يقدم البعض منهجًا عامًا ، ويتعلم منهج الأساسيات ، ويركز البعض الآخر على حالات الاستخدام وسيقدم مقتطفات تعليمات برمجية محددة أو دروسًا تعليمية حول مهمة محددة. يتعلم الجميع بطرق مختلفة ، لذا ابحث عن ما يناسبك.

انظر إلى الكود "In the Wild"

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

جوجل هو صديقك

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

وضعه موضع التنفيذ

لا يتعين عليك إنشاء موضوع من البداية للاستفادة من بعض مهارات المطورين الجديدة التي تم العثور عليها. أنا أشجعك على أن تبدأ صغيرة. حاول إجراء بعض التعديلات على سمة موجودة ، مثل تغيير بعض الألوان أو استخدام خط مختلف. كما أشرت من قبل ، هناك طرق أفضل لتعديل رمز القالب بدلاً من استخدام المحرر. تقدم السمات تحديثات ، وإذا قمت بتحرير ملفات النسق مباشرةً ، فسيتجاوز تحديث السمة تغييراتك. تعد إحدى أسهل الطرق لإضافة بعض التعليمات البرمجية المخصصة إلى سمة موجودة عبر مكون إضافي. والمكوِّن الإضافي المثالي لـ CSS هو Simple Custom CSS بواسطة John Regan و Danny van Kooten. يتيح لك هذا إضافة بعض CSS الخاصة بك إلى موقعك دون العبث بملفات السمات ، وهو أمر رائع لإجراء تغييرات مرئية صغيرة على موقع WordPress الخاص بك.

إضفاء الطابع الرسمي على سير العمل الخاص بك

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

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

حاول إنشاء موضوع فرعي

الآن بعد أن أصبحت لديك بيئة تحرير أكثر رسمية ، حاول إنشاء سمة فرعية. هذا سمة مخصصة تستند إلى سمة أخرى. يجب تثبيت كلا الموضوعين على موقعك حتى يعمل ، ويجب أن يكون الموضوع الفرعي هو الذي تم تنشيطه. الشيئين المطلوبين للقالب الفرعي هما ملفات style.css و functions.php . يستفيد إطار عمل Genesis من هذه الوظيفة بشكل جيد للغاية وهو مكان رائع للانطلاق فيه والبدء في بناء بعض مهارات التطوير لديك. قامت Carrie Dils بالعديد من دورات lynda.com حول استخدام السمات الفرعية مع Genesis. إنها خطوة تالية رائعة في رحلتك من مصمم إلى مطور.

لا تثبط عزيمتك

من الطبيعي أنك عندما تقفز إلى تعلم الكود ، ستصاب بالإحباط في مرحلة ما ، لكن لا تفعل ذلك. كان الجميع هناك. حتى المطورين ذوي الخبرة لديهم أيام يشعرون فيها بأنهم لا يعرفون شيئًا. تتمثل بعض أفضل الطرق لتجاوز هذه الحدود في البقاء على اتصال مع الآخرين في نفس رحلتك. Twitter و Slack والمشاركة في منتديات WordPress.org كلها طرق رائعة للبقاء على اتصال. اتبع بعض المدونات مثل Layout ، ويمكنك تنمية العلاقات والتعلم على طول الطريق. بعض الأشخاص المفضلين لدي الذين يجب متابعتهم والذين ساعدوني في رحلة التطوير الخاصة بي هم كاري ديلز وتوم ماكفارلين وجون ريجان.

إلى أين أذهب من هنا؟

بمجرد أن تشعر أن لديك تعاملًا جيدًا مع HTML و CSS ، فإن الخطوة المنطقية التالية هي JavaScript ، أو يمكنك أن تأخذها خطوة إلى الأمام وتبحث في WordPress Codex لتتعلم كيفية سحب أجزاء من محتوى WordPress إلى التعليمات البرمجية الخاصة بك. ترميز سعيد!