หนทางสู่การเป็นนักพัฒนาเว็บของทุกคนดูแตกต่างออกไปเล็กน้อย สำหรับฉัน สำหรับคนจำนวนมาก ฉันเริ่มเป็นนักออกแบบ WordPress ทำให้ง่ายต่อการสร้างไซต์ที่ดูดีและใช้งานได้โดยไม่ต้องรู้รหัสใดๆ ในฐานะนักออกแบบ คุณสามารถเปลี่ยนธีม ปรับการตั้งค่า เพิ่มปลั๊กอิน และทำสิ่งต่างๆ มากมายเพื่อควบคุมลักษณะที่ปรากฏของไซต์ แต่ในท้ายที่สุด นักออกแบบจำนวนมากต้องการก้าวไปอีกขั้นและกำหนดพิกเซลสำหรับพิกเซลว่าไซต์มีลักษณะอย่างไร

มีสองวิธีในการทำสิ่งนี้ให้สำเร็จ: จ้างนักพัฒนาเพื่อใช้การออกแบบของคุณหรือเรียนรู้ทักษะการพัฒนาด้วยตัวคุณเอง แม้ว่าคุณจะจ้างนักพัฒนา แต่ก็มีบางครั้งที่การรู้วิธีพัฒนาบางอย่างถือเป็นทรัพย์สินที่ดี นอกจากนี้ เมื่อคุณสามารถจัดการกับความต้องการด้านการพัฒนาสำหรับลูกค้าของคุณ คุณจะมีค่ามากขึ้นสำหรับพวกเขาและสามารถเพิ่มอัตราของคุณได้ตามนั้น

การก้าวกระโดดจากนักออกแบบสู่นักพัฒนาถือเป็นงานใหญ่ ฉันจะแนะนำขั้นตอนง่ายๆ ในการดำเนินการ เพื่อให้คุณสามารถเริ่มต้นเปลี่ยนจากผู้สร้างการออกแบบเว็บไซต์ไปเป็นคนที่สามารถสร้างและใช้การออกแบบเหล่านั้นได้เช่นกัน

ข่าวดี คุณมาถูกที่แล้ว

เป็นไปได้ว่าถ้าคุณกำลังอ่าน The Layout อยู่ อย่างน้อยคุณก็คุ้นเคยกับ WordPress บ้างเล็กน้อย WordPress เปิดประตูให้ใครสักคนเปลี่ยนจากนักออกแบบมาเป็นนักพัฒนาได้ดีกว่าแพลตฟอร์มอื่นๆ บนเว็บ วิธีหนึ่งที่จะทำให้สำเร็จคือตัวแก้ไข ซึ่งสามารถพบได้ในแดชบอร์ด WordPress ภายใต้ ลักษณะที่ปรากฏ > ตัวแก้ไข

คุณสามารถดูโค้ดของธีมทั้งหมดได้จากแดชบอร์ดของ WordPress โดยไม่ต้องใช้เครื่องมือพิเศษหรือการเข้าถึงเซิร์ฟเวอร์ มันมีความสามารถในการแก้ไขโค้ดเช่นกัน อย่างไรก็ตาม ฉันจะไม่แนะนำให้ทำอย่างนั้นที่นี่ (เราจะพูดถึงวิธีที่ดีกว่าที่จะทำในภายหลัง) นี่เป็นสถานที่ที่ยอดเยี่ยมสำหรับคุณในการแอบดูและดูว่าเกิดอะไรขึ้น ไปข้างหน้าและดูภายใต้ประทุนของธีมของคุณและดูว่าคุณสามารถเริ่มทำความเข้าใจกับสิ่งที่อยู่ได้หรือไม่

โดยปกติคุณจะเห็นไฟล์สามประเภทที่แตกต่างกันที่นี่ เพื่อลดความซับซ้อนของสิ่งต่าง ๆ ให้นึกถึงไฟล์เหล่านี้เช่น "เนื้อหา" ของเว็บไซต์ของคุณ ไฟล์ PHP (.php) มี HTML (กระดูก) และ PHP (เส้นประสาทที่เชื่อมต่อทุกอย่างกับสมอง ฐานข้อมูล) สไตล์ชีต (.css) คือสกินของไซต์ของคุณ ซึ่งจะกำหนดลักษณะที่ปรากฏ JavaScript (.js) ถือได้ว่าเป็นกล้ามเนื้อของไซต์ โดยทั่วไปแล้วจะควบคุมส่วนที่เคลื่อนไหวและตอบสนองและตอบสนองต่อวิธีการใช้และโต้ตอบกับไซต์ ไปข้างหน้าและสำรวจเล็กน้อย คุณเห็นคำอธิบายใดๆ ที่ระบุส่วนใดของไซต์ที่ใช้โค้ดนี้ หรือคำที่อธิบายลักษณะการมองเห็นบางส่วนของเว็บไซต์?

วิธีที่ยอดเยี่ยมอีกอย่างหนึ่งที่ WordPress ปิดช่องว่างระหว่างนักออกแบบและนักพัฒนาก็คือ มันแบ่งสิ่งต่าง ๆ ออกเป็นชิ้น ๆ ทำให้คุณสามารถระบุส่วนที่คุณต้องการแก้ไขและทำการเปลี่ยนแปลงเพียงส่วนหนึ่งของเว็บไซต์ได้อย่างง่ายดาย WordPress แยกเนื้อหาออกจากเทมเพลตจากฟังก์ชันของเว็บไซต์ นอกจากนี้ยังใช้โครงสร้างที่สอดคล้องกันระหว่างไฟล์ต่างๆ ดังนั้นคุณจึงสามารถข้ามไปมาระหว่างไซต์ต่างๆ และยังค้นหาไฟล์ที่คุณต้องการแก้ไขได้อย่างง่ายดาย

ไม่ต้องกลัว

วลีหนึ่งที่ฉันใช้บ่อยที่สุดเมื่อฝึกผู้อื่นคือ “อย่ากลัว คุณไม่สามารถทำสิ่งนี้ให้ยุ่งเหยิงในแบบที่ฉันแก้ไขไม่ได้” มีน้อยมากในโลกที่ไม่สามารถยกเลิกได้ แน่นอน คุณจะต้องการใช้ประโยชน์จากเครื่องมือที่จะช่วยให้คุณเลิกทำได้ง่าย หากการแก้ไขของคุณไม่เป็นไปตามแผนที่วางไว้ เครื่องมือที่ยอดเยี่ยมสองอย่างที่ Flywheel มีให้คือคุณสมบัติ Staging และความสามารถในการสำรองข้อมูลและกู้คืนได้อย่างง่ายดาย เมื่อคุณตัดสินใจที่จะข้ามไปยังโค้ด ให้ใช้ไซต์การแสดงละครเพื่อทำการแก้ไข วิธีนี้ทำให้คุณไม่ต้องเสี่ยงกับไซต์ที่ใช้งานอยู่ และสามารถรีเซ็ตสภาพแวดล้อมการแสดงละครของคุณได้อย่างง่ายดาย หากจำเป็น หากคุณทำการเปลี่ยนแปลงโดยไม่ได้ตั้งใจบนไซต์ที่ใช้งานจริง ไม่ต้องกลัว เพียงกู้คืนข้อมูลสำรองล่าสุดและภายในเวลาไม่ถึงห้านาที คุณก็กลับมาดำเนินการได้ตามปกติ เครื่องมือเหล่านี้ควรให้ความมั่นใจแก่คุณในการเริ่มต้นแก้ไขโค้ดบางส่วน!

เคล็ดลับจากมืออาชีพ: เมื่อคุณคุ้นเคยกับโค้ดมากขึ้นแล้ว เราขอแนะนำให้คุณสำรวจการควบคุมเวอร์ชัน ไม่ว่าจะเป็น 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 ไม่มี id หรือคลาส

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, codeschool.coma, codecademy.com, lynda.com, css-tricks.com และ wpbeginner.com ทรัพยากรเหล่านี้แต่ละอย่างแตกต่างกันเล็กน้อย บางส่วนเสนอแบบทั่วไป เรียนรู้วิธีการพื้นฐาน และบางส่วนเน้นที่กรณีการใช้งาน และจะให้ข้อมูลโค้ดหรือบทช่วยสอนเฉพาะสำหรับงานเฉพาะ ทุกคนเรียนรู้ในหลากหลายวิธี ดังนั้นจงค้นหาสิ่งที่ใช่สำหรับคุณ

ดูโค้ด “In the Wild”

ก่อนหน้านี้เราได้พูดถึงวิธีหนึ่งในการ "แอบดู" แต่อีกวิธีหนึ่งคือการใช้เครื่องมือการพัฒนาที่มีอยู่ในเบราว์เซอร์ของคุณ เบราว์เซอร์ส่วนใหญ่จะให้คุณสำรวจโค้ดบนหน้าเว็บได้ ไปข้างหน้าและคลิกขวาหรือ ctrl คลิกที่ข้อความนี้แล้วเลือก "ตรวจสอบ" หรือ "ตรวจสอบองค์ประกอบ" หน้าต่างจะปรากฏขึ้นเพื่อแสดงแท็ก HTML และ CSS ที่เกี่ยวข้อง คุณยังสามารถแก้ไขคุณสมบัติและดูว่าเมื่อเปลี่ยนแปลงแล้วจะมีลักษณะอย่างไร

Google คือเพื่อนของคุณ

เมื่อมีข้อสงสัย Google! จริงๆ แล้ว มีคนจำนวนมากที่เขียนเกี่ยวกับโค้ด มีโอกาสที่ใครบางคนจะเขียนเกี่ยวกับสิ่งที่คุณพยายามจะทำ ดังนั้น 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 และคุณสามารถปลูกฝังความสัมพันธ์และเรียนรู้ไปพร้อมกัน คนที่ฉันชอบให้ติดตามบางคนที่ช่วยฉันในเส้นทางการพัฒนาคือ Carrie Dils, Tom McFarlin และ John Regan

ฉันควรไปจากที่นี่ที่ไหน?

เมื่อคุณรู้สึกว่าจัดการ HTML และ CSS ได้ดีแล้ว ขั้นตอนต่อไปคือ JavaScript หรือคุณสามารถดำเนินการต่อไปอีกขั้นและเจาะลึกใน WordPress Codex เพื่อเรียนรู้วิธีดึงเนื้อหา WordPress ลงในโค้ดของคุณ มีความสุขในการเข้ารหัส!