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

เทมเพลตเว็บที่ดีมีความสวยงามและสบายตา ในทางกลับกัน เทมเพลตเว็บที่ยอดเยี่ยมผสมผสานความสวยงามแบบนั้นเข้ากับการใช้งานเพื่อสร้างเทมเพลตที่สะดุดตาและใช้งานง่ายที่สุด

ไม่ว่าคุณต้องการเทมเพลตเว็บพอร์ตโฟลิโอ เทมเพลตบล็อกส่วนตัว เทมเพลตอีคอมเมิร์ซ หรือเทมเพลตร้านอาหาร คุณจะพบว่ารายการเทมเพลต PSD ฟรีที่ดีที่สุดนี้มีประโยชน์มาก

ดาวน์โหลดไม่จำกัด: เทมเพลตเว็บไซต์และเนื้อหาการออกแบบมากกว่า 500,000 รายการ

เทมเพลตเว็บไซต์ทั้งหมดที่คุณต้องการ และองค์ประกอบการออกแบบอื่นๆ อีกมากมายพร้อมให้สมัครสมาชิก Envato Elements รายเดือนแล้ว การสมัครสมาชิกมีค่าใช้จ่าย $29 ต่อเดือน และจะให้คุณ เข้าถึงได้ไม่จำกัดสู่ห้องสมุดขนาดใหญ่และกำลังเติบโตของ 500,000+ รายการที่สามารถดาวน์โหลดได้บ่อยเท่าที่คุณต้องการ (มีรูปถ่ายสต็อกด้วย)!

ดาวน์โหลดเดี๋ยวนี้

เมื่อคุณมีการออกแบบพร้อมแล้ว ก็ถึงเวลาที่จะแสดงผลงานในลักษณะที่จะสร้างแรงบันดาลใจให้กับทุกคน แม้ว่าคุณสามารถใช้ภาพหน้าจอธรรมดา ๆ ได้ แต่คุณยังสามารถยกระดับสิ่งต่าง ๆ ไปสู่อีกระดับหนึ่งด้วยเทมเพลตเว็บไซต์ PSD ชุดรวมนี้ประกอบด้วยเจ็ดสไตล์ที่แตกต่างกันเพื่อให้คุณได้รับประโยชน์สูงสุด ตั้งแต่ iMac, Macbook และหน้าเดียวไปจนถึง iPhone สองเครื่องและ Macbook แบบครอบตัด ตัวเลือกคือที่นั่นเพียงปลายนิ้วสัมผัสของคุณ คุณยังสามารถแก้ไขพื้นหลังได้โดยทำให้มันโปร่งใสหรือเพิ่มสีหรือแม้แต่รูปภาพ สร้างสิ่งต่างๆ ในแบบที่คุณจินตนาการและนำเสนอผลงานของคุณภายใต้แสงที่ดีที่สุดเท่าที่จะเป็นไปได้

การจำลองอุปกรณ์ที่เรียบง่าย สะอาดตาและโดดเด่นเป็นพิเศษ ซึ่งคุณสามารถใช้เพื่อแสดงความยืดหยุ่นของเว็บไซต์ของคุณ ในชุดประกอบด้วยรูปแบบที่แตกต่างกัน 12 แบบ โดยแต่ละรูปแบบเป็นต้นฉบับ สร้างสรรค์ และดึงดูดความสนใจ นอกจากนี้คุณยังสามารถเลือกระหว่าง Macbook, iPad และ iPhone เพียงลากและวางโฆษณาของคุณ แล้วปล่อยให้เทมเพลตที่ต้องการแสดงทันที คุณสมบัติอื่นๆ ได้แก่ การซ้อนทับเงา 11 แบบ พื้นหลังที่ปรับแต่งได้ และตัวเลือกสีหลัก 6 แบบ ตอนนี้คุณมีโซลูชั่นที่สมบูรณ์สำหรับการนำเสนอที่ใครๆ ก็สนใจ หากคุณอยากทำอะไรที่เรียบง่ายและเรียบง่าย แพ็คเกจจำลองนี้เหมาะสำหรับคุณ

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

คอลเลกชันจำลองเว็บไซต์ที่หลากหลายซึ่งมีอุปกรณ์ต่างๆ ตอนนี้คุณสามารถผลักดันความยืดหยุ่นของเพจของคุณบน iPhone, iMac, Macbook และ iPad นอกจากนี้ คุณจะได้พบกับฉาก PSD ที่แตกต่างกันสิบสี่ฉากในขนาด 4000 x 2500 px คุณสามารถใช้สิ่งเหล่านี้กับการนำเสนอทุกประเภทที่นอกเหนือจากการแสดงการออกแบบเว็บไซต์ คุณสมบัติอื่นๆ ได้แก่ เงาและการปรับแสง วัตถุอัจฉริยะ (เพียงลากและวาง) ซูม 50% และอื่นๆ คุณยังสามารถเปลี่ยนสีพื้นหลังและเพลิดเพลินกับการปรับแต่งที่มีรายละเอียดมากได้ ด้วยการแก้ไขและปรับปรุงที่รวดเร็วเป็นพิเศษ คุณสามารถมีการนำเสนอที่แตกต่างกันหลายรายการพร้อมให้ใช้งานได้ในเวลาไม่กี่นาที

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

เอวีร์

Avire เป็นเทมเพลตหน้าเดียวที่ปรับแต่งได้สูงซึ่งมีการออกแบบสไตล์เรียบๆ มันใช้งานง่ายและปรับเปลี่ยนให้เหมาะกับความต้องการของคุณ ด้วยการปรับแต่งเล็กน้อยตรงนี้และตรงนั้น มันสามารถตอบสนองทุกความต้องการของคุณได้อย่างแน่นอน

เฮกซัล

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

การออกแบบพื้นผิว

คุณสามารถใช้ไฟล์ PSD ฟรีนี้เพื่อวัตถุประสงค์ส่วนตัวและเชิงพาณิชย์ เป็นเทมเพลตเว็บพอร์ตโฟลิโอหน้าเดียวที่เหมาะสำหรับคนที่มีความคิดสร้างสรรค์

สวิตช์

Switch เป็นเทมเพลตเว็บอเนกประสงค์ bootstrap 3D ซึ่งหมายความว่ามันสามารถเป็นอะไรก็ได้ที่คุณต้องการให้เป็น! มันทำหน้าที่เป็นเทมเพลตหน้าเดียวที่ยอดเยี่ยมที่นำเสนอโซลูชั่นที่หลากหลายสำหรับทุกความต้องการของคุณ

แคปเป้

Kappe เป็นเทมเพลตเว็บอเนกประสงค์ที่สร้างสรรค์ ด้วยการออกแบบแบบตาราง คุณสามารถแปลงเป็นบล็อกส่วนตัวหรือหน้าเว็บธุรกิจได้ด้วยการคลิกเมาส์เพียงไม่กี่ครั้ง

แจ้ง

Notify คือหน้า Landing Page ของแอปที่ดีที่สุดในเว็บ การออกแบบที่เพรียวบางและทันสมัยจะช่วยให้แน่ใจว่าข้อความของคุณจะถูกส่งออกไปอย่างที่คุณจินตนาการไว้

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

ในการสร้างเทมเพลต เราไม่จำเป็นต้องมีความรู้หรือความรู้มากนัก HTMLและ ซีเอสเอสเพียงอ่านบทความในหัวข้อในบล็อกนี้ ควรให้ความสนใจเป็นพิเศษกับการใช้แท็ก DIV และแท็ก SPAN

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

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

การสร้างเอกสาร

ตอนนี้เรามาเริ่มสร้างเค้าโครงและสร้างกัน เอกสารใหม่- เลือกไฟล์ - สร้าง เลือกขนาดสำหรับเอกสาร 960 บน 1600 พิกเซล

เราวาดไกด์สองตัวซ้ายและขวา ในการดำเนินการนี้ เพียงคลิกที่ไม้บรรทัดแล้วลากเส้น

ตอนนี้เราต้องปรับขนาดผืนผ้าใบ สำหรับสิ่งนี้เราเลือก รูปภาพ-ขนาด canvas และเลือกขนาดแคนวาส 1200 x 1600 พิกเซล หลังจากนั้น เติมพื้นที่นี้ด้วยสีขาวโดยใช้เครื่องมือ Paint Fill

กลุ่มสำหรับเทมเพลต

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

ส่วนหัวของไซต์

ตอนนี้เรามาเริ่มต้นด้วยการสร้างส่วนหัวสำหรับไซต์ สิ่งแรกที่คุณต้องทำคือเปิดพื้นผิวที่มีชื่อ "พื้นผิว 1"- และตอนนี้เราต้องครอบตัดพื้นหลังสีดำ ซึ่งทำได้ง่ายมาก เลือกเครื่องมือ « ไม้กายสิทธิ์» แล้วคลิกบนพื้นหลังสีดำ จากนั้นคลิกขวาที่บริเวณที่มีแสงแล้วเลือก “กลับพื้นที่ที่เลือก”

ขั้นตอนต่อไปคือการปรับแต่งขอบเขตของเราอย่างละเอียด เลือกปุ่มเมาส์ขวา และเลือก Refine Edge และตั้งค่าทั้งหมดตามภาพ

ตอนนี้เลือก " เลเยอร์ – ใหม่ – คัดลอกไปยังเลเยอร์ใหม่- ตอนนี้เราใช้เมาส์ลากเลเยอร์แล้วลากไปยังรูปวาดของเรา

ขั้นตอนต่อไปคือการพลิกภาพวาด เมื่อต้องการทำเช่นนี้ ให้เลือก แก้ไข-แปลง-หมุน 90 องศาทวนเข็มนาฬิกา หลังจากนี้ โดยการกดปุ่มซ้ายของเมาส์ คุณจะต้องย้ายเลเยอร์ของคุณ ดังแสดงในรูปด้านล่าง

ตอนนี้เราต้องเพิ่มความอิ่มตัวของภาพและด้วยเหตุนี้เราจึงไปที่แท็บ รูปภาพ - การปรับแต่ง - ฮิว/ความอิ่มตัว- ตอนนี้เราต้องลดความสว่างของภาพลงเป็น -100 และนี่คือสิ่งที่เราควรได้รับ:

ตอนนี้เรามาเขียนโลโก้เว็บไซต์ของเรากันดีกว่า ในการดำเนินการนี้ เราจำเป็นต้องติดตั้งแบบอักษรใหม่ ฉันคิดว่าคุณได้ดาวน์โหลดไฟล์ต้นฉบับแล้วและยังมีไฟล์ฟอนต์อยู่ในไฟล์เก็บถาวรด้วย สิ่งแรกที่คุณต้องทำคือแตกไฟล์แบบอักษร ตอนนี้เราต้องไปที่โฟลเดอร์ (ส่วนใหญ่มักจะเป็น Drive C:/windows - Fonts)
และคัดลอกไฟล์ฟอนต์ทั้งหมดที่นั่น ตอนนี้รีสตาร์ทโปรแกรมและแบบอักษรนี้จะพร้อมใช้งานสำหรับคุณ
ตอนนี้เลือกเครื่องมือข้อความแล้วเลือกแบบอักษรของเรา สีขาว และสร้างโลโก้ใกล้กับแถบนำทางด้านซ้าย นี่คือสิ่งที่ฉันได้รับ

ตอนนี้เรามาสร้างเมนูทางด้านขวากัน จะประกอบด้วยประเด็นหลักสามประเด็น ได้แก่ หน้าแรก รายชื่อติดต่อ และเกี่ยวกับผู้เขียน เลือกเครื่องมือข้อความอีกครั้งแล้วคลิกในตำแหน่งที่ต้องการ สีเป็นสีขาวและแบบอักษรเป็นแบบ Wide Latin และมีขนาด 18 พิกเซล

สร้างเลเยอร์ใหม่ ตอนนี้ใช้เครื่องมือบ่วงตรงแล้วเลือกปุ่มรอบป้ายกำกับใดป้ายหนึ่ง

และเติมพื้นที่ที่เลือกด้วยสี 2A2A2A ตอนนี้เราเปลี่ยนลำดับของเลเยอร์โดยย้ายเลเยอร์โดยมีการเติมคำจารึกไว้เหนือเลเยอร์ด้วยการเติม

เนื้อหาหลักของเว็บไซต์

และตอนนี้เรามีปุ่มเมนูหลังจากที่คลิกแล้ว ตอนนี้เราต้องไปที่โฟลเดอร์เนื้อหาและสร้างเลเยอร์ใหม่ในนั้น

กำลังเปิด รูปที่ 3และวางไว้ใต้ทุกชั้น เมื่อใช้การแปลงเราจะเพิ่มขนาดของภาพจนกว่าจะเต็มพื้นที่ทั้งหมด

ตอนนี้เราปรับความสว่างและคอนทราสต์ของพื้นผิว โดยกดปุ่ม Ctrl + Shift + U- เลือกรูปภาพ - การแก้ไข - เส้นโค้ง

เราตั้งค่าตามในรูป

มาสร้างเลเยอร์ใหม่กัน และตอนนี้เราจะเลือกพื้นที่เนื้อหากับคุณ พื้นที่เนื้อหาของเราจะเป็นสีขาวและมีขนาด 660 x 1200 พิกเซล ในการดำเนินการนี้ ให้เลือกเครื่องมือ "พื้นที่สี่เหลี่ยมและสไตล์ - สัดส่วนที่กำหนด" ซึ่งเราต้องป้อนขนาดของฟิลด์ จากนั้นเราจำเป็นต้องเติมฟิลด์ด้วยเครื่องมือ "เติม"

ตอนนี้เราต้องกำหนดจังหวะสำหรับสนามของเรา เลือกเลเยอร์ที่รูปภาพของเราอยู่และคลิกที่ปุ่ม "เพิ่มสไตล์เลเยอร์" เลือกเส้นขีดจากเมนูแบบเลื่อนลง

และตั้งค่าดังต่อไปนี้ - ความหนา 1 พิกเซล และสี c8c7c7

เปิดแล้ว ภาพที่ 4โดยใช้การปรับขนาด เราลดขนาด โดยควรจะใหญ่กว่าประมาณสิบพิกเซลจากฟิลด์สีขาวทางด้านขวาและซ้าย ด้านบนและด้านล่างจะต้องมีการเยื้อง 50-60 พิกเซล

ตอนนี้กดปุ่มรวมกัน Ctrl + Shift + Uเพื่อลดสีพื้นผิวและปรับความสว่างโดยใช้เส้นโค้ง การตั้งค่าตามภาพ

เลือกเลเยอร์ด้วยผ้าใบสีขาวของเรา คลิกขวาแล้วเลือก “ เลือกพิกเซล».

ตอนนี้เลือกเลเยอร์สีเทาแล้วคลิก การเลือก - การแก้ไข - การบีบอัดและตั้งค่าการย่อขนาดเป็นสามพิกเซล หลังจากนั้นเราจำเป็นต้องสลับการเลือกของเรา เราได้ทำสิ่งนี้แล้ว และเลือกทำได้ง่าย ๆ การผกผันการเลือกให้กดปุ่ม เดล- นี่คือสิ่งที่เราควรได้รับ:

ตอนนี้สร้างมาสก์สำหรับเลเยอร์สีเทาเดียวกัน

เลือกการไล่ระดับสีขาวดำ จากนั้นคลิกซ้ายแล้วลากจากตรงกลางไปยังขอบล่างของหน้า และทำให้การเปลี่ยนภาพราบรื่นขึ้น

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

ตอนนี้เรามาเปิดภาพด้วยไอคอนต่างๆ แล้วเพิ่มไว้ที่ด้านตรงข้ามของเมนูหลัก ตอนนี้เราต้องเยื้องเนื้อหาทั้งสองด้านด้วยยี่สิบพิกเซล ตอนนี้เราต้องเพิ่มชื่อเรื่องให้กับบทความแรกของเรา สีข้อความจะเป็นสีดำ สำหรับวันที่และจำนวนความคิดเห็น ฉันใช้สี cb8154

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

ตอนนี้เราจำเป็นต้องสร้างสถานที่สำหรับการดูตัวอย่าง เมื่อต้องการทำสิ่งนี้ ให้สร้างสี่เหลี่ยมผืนผ้าตามขนาดที่เราต้องการ ฉันตัดสินใจทำให้เป็น 165 x 165 พิกเซล แล้วเติมด้วยสีดำ ลองใช้การตั้งค่ากับมัน: เส้นขีดและเงา

จังหวะ.

เงา.

ตอนนี้เรามาเพิ่มข้อความที่กำหนดเองกัน นี่คือสิ่งที่เราควรได้รับ:

หลังจากเสร็จสิ้นบทความแล้ว คุณต้องแยก 30 พิกเซลและสีเทา (SSSSSS) จากนั้นวาดสี่เหลี่ยมสี่ช่องขนาด 32 x 32 พิกเซลแล้วเติมสีแดง 8E0A13

วาดแบบฟอร์มการค้นหา

ในการทำเช่นนี้เราเพียงแค่ต้องวาดพื้นที่สี่เหลี่ยมสีขาวแล้วใช้เงาด้านในลงไป

ตอนนี้เราวาดปุ่มสีแดงขนาดเดียวกัน 32 x 32 และสีแดงแล้วเขียนคำว่า "เป็นสีขาว" ค้นหา».

เมนูด้านข้าง.

บนเลเยอร์ใหม่ ให้วาดรูปสี่เหลี่ยมผืนผ้ากว้าง 270 พิกเซลแล้วเติมสี 1F1F1F นอกจากนี้เรายังเพิ่มส่วนหัวที่มีความกว้างเท่ากัน 270 พิกเซลและสูง 25 พิกเซล เติมด้วยสีดำ

ตอนนี้เราต้องเขียนหมวดหมู่สำหรับบล็อก ข้อความเป็นแบบอักษร Times New Roman และมีขนาด 16 พิกเซล คุณต้องเพิ่มรูปภาพลงในแต่ละรายการเมนู เลือก " รูปฟรี" และเลือกรูปร่างของจุดแรสเตอร์ " เครื่องประดับ 4"และเติมด้วยสี 818181

ส่วนท้ายของไซต์

เราจะไม่ยุ่งกับส่วนท้ายมากเกินไป เราจะเติมสีดำให้เต็มฟิลด์และเพิ่มเมนู แบบอักษร Times New Roman ขนาด 18 พิกเซล และสี E6E6E6

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

หากต้องการสร้างเว็บไซต์ของคุณบน WordPress คุณจะต้องเพิ่มธีมอย่างแน่นอน เรียกอีกอย่างว่าเทมเพลต นี่คือพื้นฐานของแหล่งข้อมูลบนเว็บ

บทความนี้จะกล่าวถึงขั้นตอนของการสร้างเทมเพลตและอธิบายเค้าโครงของไฟล์ psd

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

โปรดทราบว่าคู่มือนี้ไม่มีคำอธิบายการเพิ่มธีมสำเร็จรูป - นี่คือคู่มือสำหรับการสร้างเทมเพลตของคุณเอง หากคุณได้ดาวน์โหลดธีมแล้วแต่ไม่ทราบวิธีการติดตั้ง ให้ไปที่พื้นที่ผู้ดูแลระบบ WordPress ไปที่ส่วน “ลักษณะที่ปรากฏ” และเพิ่มหนึ่งในการออกแบบที่มีอยู่ที่นั่น ตอนนี้เรามาดูกันดีกว่าว่าธีมคืออะไร เหตุใดจึงจำเป็น และจะสร้างธีมด้วยตัวเองได้อย่างไร

ธีมที่สร้างขึ้นด้วยตนเองมีจุดประสงค์อะไร?

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

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

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

ต่อไปนี้คือเหตุผลหลักว่าทำไมคุณควรสร้างเทมเพลตเว็บไซต์ของคุณเอง:

• เรียนรู้ทุกอย่างเกี่ยวกับ HTML, CSS และบางอย่างเกี่ยวกับ PHP
• คุณจะสามารถสร้างได้ เพราะการออกแบบเว็บไซต์ก็เป็นศิลปะเช่นกัน
• เป็นไปได้ที่จะสร้างรายได้จากการขายธีม
• ค้นพบทักษะใหม่
• สร้างการออกแบบที่เหมาะกับเว็บไซต์ในอนาคตของคุณ 100%

ธีมนี้เป็นไปตามมาตรฐานอะไรบ้าง?

เมื่อเขียนเทมเพลต การปฏิบัติตามกฎเกณฑ์อย่างเป็นทางการเป็นสิ่งสำคัญมาก การละเมิดโค้ด การใส่แท็กผิดตำแหน่ง และการข้ามไปอาจส่งผลเสียต่อการออกแบบและทำลายรูปลักษณ์โดยสิ้นเชิง คุณควรทำความคุ้นเคยกับกฎการเขียนโค้ด PHP และ HTML อย่างละเอียดถี่ถ้วน หากคุณยังไม่คุ้นเคยกับภาษาเหล่านี้ นอกจากนี้ คุณจะต้องจัดการกับ CSS Cascading Style Sheets ดังนั้น โปรดจำข้อมูลพื้นฐานไว้ด้วย มีข้อมูลมากมายบนอินเทอร์เน็ต ข้อกำหนดสุดท้ายและสำคัญน้อยที่สุดคือการสร้างเว็บไซต์เหมือนนักออกแบบและไม่เหมือนเด็กนักเรียนเพื่อให้คุณได้โครงการที่จริงจัง มิฉะนั้นก็ไม่มีประโยชน์ที่จะรับเรื่องนี้

ธีม WordPress ทั้งหมดโฮสต์อยู่ในโฟลเดอร์ wp-content/themes/ ภายในโฟลเดอร์นี้จะมีโฟลเดอร์อื่นๆ ที่มีธีมแยกกัน ไฟล์ที่มีฟังก์ชันเพิ่มเติม (functions.php) ไฟล์สไตล์ และรูปภาพ หากต้องการค้นหาข้อมูลในหัวข้อใดหัวข้อหนึ่ง คุณต้องไปที่ไดเร็กทอรีที่เหมาะสม ดังนั้นธีม “ตะวันตก” จะถูกวางไว้ในโฟลเดอร์ wp-content/themes/western/

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

คุณจะสังเกตเห็นว่าเทมเพลตโดยทั่วไปประกอบด้วยรูปแบบไฟล์สามรูปแบบ:

1. Style.css เป็นไฟล์สไตล์ที่รับผิดชอบการออกแบบภายนอกของเว็บไซต์
2. Functions.php – ไฟล์ฟังก์ชันซึ่งเพิ่มคุณสมบัติต่างๆ ให้กับเพจ
3. ไฟล์ php อื่นๆ ที่รับผิดชอบคุณสมบัติในการแสดงเทมเพลตบนเว็บไซต์และรวมธีมเข้ากับ WordPress เป็นไฟล์เหล่านี้ที่ช่วยให้คุณสามารถแปลงเค้าโครง PSD ให้เป็นเทมเพลตเต็มรูปแบบได้

มาดูรายละเอียดแต่ละไฟล์เหล่านี้กันดีกว่าเพื่อทำความเข้าใจวิธีการสร้างธีม WordPress

กฎสำหรับการสร้างไฟล์ style.css

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

1. ชื่อเทมเพลต
2. URL ที่นำไปสู่หัวข้อ
3. คำอธิบายที่แสดงคุณสมบัติหลักของเทมเพลต สั้นๆ.
4. ชื่อผู้แต่ง. ในกรณีนี้กรุณาระบุชื่อของคุณ
5. ลิงก์ไปยังผู้เขียนนั่นคือถึงคุณ คุณสามารถระบุลิงก์ไปยังโปรไฟล์ของคุณบนโซเชียลเน็ตเวิร์กได้
6. ชื่อของธีมหลักเป็นทางเลือก
7. เวอร์ชันธีม หากคุณเพิ่งสร้างมันขึ้นมา v. 1.0.
8. คำอธิบายแบบเต็มของเทมเพลต คุณสามารถเขียนรายละเอียดได้

หากต้องการสร้างธีม WordPress ที่ง่ายที่สุด เพียงเพิ่มเวอร์ชันที่แก้ไขแล้วด้วยไฟล์ style.css ไฟล์เดียว ในไฟล์นี้ ถัดจากบรรทัด "เทมเพลต" ให้ระบุชื่อของธีมหลัก ตัวอย่างเช่น Classic หากคุณกำลังแก้ไขเทมเพลตมาตรฐาน ตอนนี้ธีมที่สร้างขึ้นจะสอดคล้องกับเทมเพลตคลาสสิกโดยสมบูรณ์ ดังนั้น คุณจะต้องอัปโหลดไฟล์ไปยังไดเร็กทอรี wp-content/themes/classic

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

คุณสมบัติของไฟล์ฟังก์ชันเพิ่มเติม Functions.php

เทมเพลตไม่ได้ใช้ไฟล์ function.php เสมอไป แต่ในกรณีส่วนใหญ่ก็จำเป็น จะต้องวางไว้ในไดเร็กทอรีที่มีธีมที่เหมาะสม โปรดทราบว่าหากไฟล์นี้มีอยู่ในโฟลเดอร์เทมเพลต ไฟล์นั้นจะถูกนำมาพิจารณาเมื่อมีการเตรียมใช้งานธีม มันทำงานเหมือนปลั๊กอิน และมันจะทำหน้าที่ตามที่คุณมอบให้

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

คุณสมบัติของไฟล์เทมเพลต php

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

หากคุณต้องการเพิ่มธีมแบบมินิมอลให้กับไซต์ของคุณ หรือทดสอบเลย์เอาต์ PSD ของคุณ คุณจะต้องมีไฟล์เพียงสองไฟล์ในไดเร็กทอรีเทมเพลต:

1. สไตล์.css.
2. Index.php.

เว็บมาสเตอร์ที่มีประสบการณ์จัดการเปลี่ยนไฟล์ index.php ในลักษณะที่เพียงพอที่จะทำการตั้งค่าสำหรับส่วนท้าย แถบด้านข้าง การค้นหา เก็บถาวร หมวดหมู่ หน้า ฯลฯ แต่คุณควรลองทำเทมเพลต WordPress ซึ่งจะดีกว่า แต่ละไฟล์จะทำหน้าที่ที่สอดคล้องกัน

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

• header.php – รับผิดชอบส่วนหัวของเว็บไซต์
• sidebar.php – คอลัมน์ด้านข้าง;
• footer.php – ส่วนท้ายของทรัพยากร (ส่วนล่าง);
• comment.php และ comment-popup.php – ความคิดเห็น

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

• เพื่อเพิ่มไฟล์ส่วนหัวของไซต์ (header.php) ให้เพิ่มแท็ก

  get_header() แท็กแทมเพลต;

• สำหรับส่วนท้ายก็เหมือนกัน แต่แทนที่จะระบุส่วนหัว ให้ระบุส่วนท้าย ฯลฯ

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

การเลือกฟังก์ชั่นเทมเพลต

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

ตัวเลือกแรกได้รับการพิจารณาแล้ว ไฟล์ทั้งหมด เทมเพลต PHP– นี่คือลำดับชั้นของเทมเพลต นั่นคือตามกฎของลำดับชั้นนี้ คุณจะค่อยๆ สร้างไฟล์โครงร่างแต่ละไฟล์ ดังนั้น คุณจะสร้างเทมเพลตที่ครบถ้วนจากส่วนประกอบ PHP ที่ใช้งานได้จำนวนหนึ่ง ลำดับชั้นในกรณีนี้ทำงานบนหลักการของการโหลดตามความต้องการ ตัวอย่างเช่น หากคุณมีไฟล์หมวดหมู่ (category.php) และผู้ใช้ร้องขอ ส่วนประกอบเฉพาะของไซต์นี้จะถูกโหลดในเบราว์เซอร์ หากไม่มีก็จะโหลด ไฟล์สำคัญเทมเพลต index.php

ด้วยวิธีนี้ คุณสามารถเปลี่ยนลักษณะที่ปรากฏของแต่ละส่วนของไซต์ได้โดยใช้หลักการลำดับชั้นของเทมเพลต แต่ละหน้ามีรหัสเฉพาะของตนเอง เพิ่มไฟล์ category-6.php ลงในไดเร็กทอรีธีม และเมื่อคุณขอหมวดหมู่ที่มี ID เท่ากับ 6 การออกแบบนี้จะเปิดขึ้น หากไม่มี การตั้งค่าจะยังคงเป็นมาตรฐาน - index.php จะขยายออก

บางครั้งหลักการลำดับชั้นของเทมเพลตอาจไม่เพียงพอที่จะรับประกันว่าจะแสดงเทมเพลตได้สะดวกที่สุด ในกรณีนี้โปรแกรมเมอร์หันไปใช้หลักการที่สอง - พวกเขาแนะนำแท็กแบบมีเงื่อนไข แท็กเหล่านี้จะตรวจสอบไซต์เพื่อดูว่าตรงตามเงื่อนไขบางประการหรือไม่ และหากไม่ตรงตามเงื่อนไขเหล่านั้น แท็กจะเปลี่ยนรูปลักษณ์ นั่นคือแท็กเหล่านี้ทำงานบนหลักการ if/else วิธีนี้จะทำให้คุณไม่ต้องเพิ่มไฟล์ php จำนวนมากพร้อมหมายเลขของแต่ละหมวดหมู่ แต่จะสามารถระบุเงื่อนไขสำหรับแต่ละ ID ได้เพียงครั้งเดียว

วิธีสร้างเค้าโครง PSD ใน WordPress

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

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

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

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

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

หากคุณกำลังอ่านบทความนี้ มีโอกาสที่คุณจะออกแบบเว็บไซต์ได้สวยงามมาก อาจอยู่ใน Adobe Photoshop และบันทึกเป็นรูปแบบ PSD, JPG, PDF, AI หรือ PNG ตอนนี้คุณต้องการแปลงไฟล์ภาพนี้เป็นธีม WordPress เพื่อให้คุณสามารถนำไปใช้กับเว็บไซต์หรือบล็อกที่สร้างขึ้นใหม่ได้ คุณอาจจะต้องการเช่นกัน เครื่องมือแปลงไฟล์ PSD เป็น WordPress -แต่จะเป็นอย่างไรหากคุณสามารถทำการเปลี่ยนแปลงทั้งหมดนี้ได้ด้วยตัวเองและทำสิ่งนั้นด้วย ฟรี!

หลายคนที่เก่งด้านการออกแบบกราฟิกมาถึงจุดนี้ด้วยการแปลงธีม PSD เป็น WordPress และพวกเขารู้สึกติดขัด! แต่มันไม่ใช่ความผิดของพวกเขา การสร้างเว็บไซต์ไม่เพียงแต่ต้องมีความสามารถในการสร้างการออกแบบที่ดูดีเท่านั้น แต่ยังต้องมีทักษะการเขียนโปรแกรมอีกด้วย คุณต้องเป็นผู้เชี่ยวชาญในอย่างน้อย HTML, CSS, JavaScript, JQuery และ การเขียนโปรแกรม PHPเพื่อเปลี่ยนไฟล์ PSD ของคุณให้เป็นหน้าเว็บ ปัญหาคือคนส่วนใหญ่เป็นนักออกแบบที่ดีหรือเป็นโปรแกรมเมอร์ที่ดี!

อย่างไรก็ตาม ไม่ต้องกังวล การแปลงธีม PSD เป็น WordPress ไม่ใช่เรื่องยากเลย สิ่งที่คุณต้องรู้คือขั้นตอนที่ถูกต้องในการดำเนินการ ในบทความนี้ฉันจะบอกคุณแบบเดียวกัน! มาเริ่มเรียนรู้กันเลย

ไฟล์ PSD คืออะไร??

พวกที่ไม่รู้ PSD ย่อมาจากเอกสาร Photoshopนี่คือรูปแบบไฟล์ที่ Adobe Photoshop บันทึกไฟล์ปฏิบัติการ คุณสามารถเปิดไฟล์ PSD ใน Photoshop และทำการเปลี่ยนแปลงการออกแบบเพิ่มเติมได้ตามที่คุณต้องการ ไฟล์ PSD บางครั้งจึงถูกเรียกว่า เปิดไฟล์ (หมายถึงไฟล์เหล่านี้สามารถแก้ไขได้)

หากคุณต้องการออกแบบเว็บไซต์ในฝัน คุณอาจเลือก Photoshop เพื่อทำให้เป็นจริง Photoshop เป็นเครื่องมือออกแบบกราฟิกที่ดีที่สุดและได้รับความนิยมมากที่สุดอย่างไม่ต้องสงสัย

เวิร์ดเพรสคืออะไร?

WordPress นั้นเป็นแพลตฟอร์มบล็อกฟรี มันเปิดอยู่ ซอร์สโค้ดโปรแกรมนี้อนุญาตให้แม้แต่ผู้ที่ไม่ใช่โปรแกรมเมอร์ก็สามารถสร้างเว็บไซต์หรือบล็อกของตนได้อย่างง่ายดาย WordPress มีความน่าเชื่อถือและปรับขนาดได้ และเขียนด้วยภาษา PHP

การออกแบบเว็บไซต์โดยใช้ WordPress เรียกว่า หัวข้อ(และบางครั้ง ตัวอย่าง).

แปลง PSD เป็นธีม WordPress

ขั้นตอนที่ 1: ตัดไฟล์ PSD

เมื่อไฟล์ PSD ของคุณพร้อม สิ่งแรกที่คุณต้องทำคือแบ่งออกเป็นส่วนๆ เพื่ออะไร? เพราะหนึ่งภาพจะมีขนาดใหญ่และใช้เวลาโหลดนานกว่า นอกจากนี้ คุณจะต้องเชื่อมโยงพฤติกรรมที่แตกต่างกันกับส่วนต่างๆ ของรูปภาพ ดังนั้นคุณต้องสับมัน

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

Adobe Photoshop ให้คุณใช้เลเยอร์ได้ มีสิ่งอำนวยความสะดวกในตัวเพื่อแบ่งไฟล์ PSD และบันทึกส่วนที่เป็นผลลัพธ์เป็นไฟล์รูปภาพแยกกัน คุณสามารถบันทึกภาพเหล่านี้ในรูปแบบ JPG หรือ PNG หากคุณต้องการความโปร่งใสในการทำงานในส่วนใดๆ เหล่านี้ คุณต้องบันทึกเป็น PNG เนื่องจาก JPG ไม่รองรับความโปร่งใส

เมื่อตัดภาพคุณต้องแม่นยำ แม้แต่ข้อผิดพลาดของพิกเซลเพียงตัวเดียวก็สามารถทำให้สองส่วนไม่สามารถใช้สำหรับแบบจำลองได้

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

วิดีโอ YouTube ต่อไปนี้แสดงวิธีการแบ่งไฟล์ PSD และบันทึกเป็นรูปภาพต่างๆ:

เอาล่ะ เมื่อคุณมีองค์ประกอบภาพต่างๆ ในการออกแบบเว็บไซต์แล้ว ก็ถึงเวลาไปยังขั้นตอนต่อไป

ขั้นตอนที่ 2: สร้างไฟล์ HTML และ CSS

ตอนนี้เริ่มต้นส่วนการเข้ารหัสหลักของกระบวนการแปลง PSD ให้เป็นเว็บไซต์ โดยทั่วไปคุณต้องสร้างหน้าเว็บและประกอบภาพที่หั่นไว้ทั้งหมดด้วยวิธีนี้เพื่อให้ดูเหมือนกับ PSD ของคุณทุกประการ

ก่อนอื่นคุณต้องสร้างไฟล์ HTML คุณสามารถเรียกมันว่าอะไรก็ได้ที่คุณต้องการ แต่โดยธรรมเนียมแล้วให้เรียกมันว่า index.htmในไฟล์นี้ คุณจะต้องเขียนโค้ด HTML หรือ XHTML เพื่อแสดงส่วนต่างๆ ของรูปภาพจาก PSD ของคุณ หากต้องการสร้างเค้าโครงพื้นฐาน คุณสามารถใช้องค์ประกอบ DIV องค์ประกอบ DIV มีความหลากหลายมาก คุณสามารถวางองค์ประกอบ DIV เคียงข้างกัน ซ้อนทับกัน บนกันและกันได้ คุณสามารถจัดตำแหน่งศูนย์กลางขององค์ประกอบ DIV ไปทางซ้ายและขวาได้ และคุณยังสามารถวางตำแหน่งองค์ประกอบเหล่านั้นโดยเฉพาะที่พิกัดเฉพาะบนหน้าเว็บได้อีกด้วย

ในองค์ประกอบ DIV เหล่านี้ คุณสามารถเรียกภาพที่บันทึกไว้และแสดงเป็นหรือเป็นพื้นหลังใน DIV ได้

หลังจากเสร็จสิ้นเค้าโครงพื้นฐานของหน้าเว็บของคุณแล้ว คุณควรทำ ตกแต่งมันเพื่อให้เหมือนกับ PSD ของคุณ สำหรับการจัดสไตล์ คุณต้องใช้กฎ Cascading Style Sheets (CSS) ด้วยกฎเหล่านี้ คุณสามารถใช้รูปแบบแบบอักษร ขนาด สี เงาข้อความ การปรับสีเทาของรูปภาพ เส้นขอบ ฯลฯ ได้

หากต้องการเขียนกฎการกำหนดสไตล์ CSS คุณต้องสร้างไฟล์อื่นชื่อ สไตล์.cssจากนั้นเรียกไฟล์ CSS นี้ไปที่ไฟล์ index.htmสไตล์ที่มีอยู่ใน สไตล์.cssจะนำไปใช้กับองค์ประกอบต่างๆ ในไฟล์ HTML ของคุณ

โอเค รอก่อน! หากคุณไม่รู้อะไรเกี่ยวกับการเขียนโค้ด HTML หรือ CSS ไม่ต้องกังวล! นี่เป็นภาษาสคริปต์ที่เรียบง่ายมากและคุณสามารถเรียนรู้ทางออนไลน์ได้อย่างง่ายดาย ด้านล่างนี้คือแหล่งข้อมูลออนไลน์บางส่วนที่คุณสามารถเรียนรู้ CSS และ HTML:

บทช่วยสอน HTML

1. บทช่วยสอน HTML ของ W3Schools
2. บทช่วยสอนPoint HTML
3. HTML.เน็ต
4. สุนัข HTML

บทช่วยสอน CSS

1. กวดวิชา CSS
2. บทช่วยสอน CSS ของ W3Schools
3. ทัทส์พลัส
4. พื้นฐาน CSS

ขั้นตอนที่ 3: แบ่งไฟล์ HTML ในไฟล์ธีม WordPress

ณ จุดนี้ในกระบวนการแปลงธีม PSD เป็น WordPress คุณจะมีไฟล์ HTML หนึ่งไฟล์ (index.htm)และไฟล์ CSS หนึ่งไฟล์ (styles.css)ในขั้นตอนที่สาม คุณจะต้องแบ่งไฟล์ HTML ตาม ธีมโครงสร้าง WordPressสับสน? WordPress มีชุดไฟล์ที่กำหนดไว้ล่วงหน้าซึ่งถูกเรียกรวมกันเพื่อสร้างเว็บเพจ ตัวอย่างเช่น เมื่อแสดงโพสต์ WordPress จำเป็นต้องมีเนื้อหาของไฟล์ส่วนหัว ไฟล์โพสต์ ไฟล์แถบด้านข้าง และไฟล์ส่วนท้าย และอื่นๆ แต่คุณมีโค้ดทั้งหมดอยู่ในไฟล์เดียว - index.htmดังนั้นคุณจะต้องแจกจ่ายรหัส index.htmในไฟล์ WP ต่างๆ โดยพื้นฐานแล้วมันเป็นงานตัดและวาง! นี่คือรายการไฟล์ธีมที่สำคัญบางส่วนสำหรับ WordPress:

• ไฟล์เก็บถาวร.php
• Category.php
• ความคิดเห็น.php
• footer.php
• header.php
• ดัชนี.php
• หน้า.php
• ค้นหา.php
• แถบด้านข้าง.php
• single.php
• สไตล์.css
• 404.php

ในการสร้างธีม WordPress พื้นฐาน คุณจะต้องสร้างอย่างน้อยที่สุด header.php, footer.php, แถบด้านข้าง.php, single.phpและ ดัชนี.php.

เพียงสร้างไฟล์ PHP เหล่านี้ในโปรแกรมแก้ไขข้อความในแผ่นจดบันทึก และคัดลอกโค้ดที่เกี่ยวข้องจาก index.htmไปยังไฟล์เหล่านี้ โค้ดสำหรับสร้างส่วนหัวจะเข้าไป header.php,เชิงอรรถรหัสจะไปที่ footer.php...ต่อๆไป..

หากคุณไม่คุ้นเคยกับ PHP มากนัก คุณอาจประสบปัญหาในการสร้างไฟล์เหล่านี้อย่างถูกต้อง มีบทเรียนออนไลน์ที่ดีและฟรีสำหรับการเรียนรู้ PHP อยู่มากมาย W3Schools และ PHP.net ให้ความช่วยเหลือเกี่ยวกับ PHP ที่เข้าใจง่าย คุณสามารถอ่านบทช่วยสอนเหล่านี้เพื่อทำความเข้าใจเกี่ยวกับ PHP

กำลังติดตาม วิดีโอยูทูปจะช่วยให้คุณเข้าใจวิธีการตั้งค่า "ธีม WordPress เปล่า" (โดยทั่วไปหมายถึงธีม WodPress เปล่าๆ

ขั้นตอนที่ 4: เพิ่มคุณสมบัติและแท็ก WordPress

ตอนนี้ได้เวลาแปลงไฟล์ PHP แบบธรรมดาเป็นไฟล์ธีม WordPress แล้ว ในการดำเนินการนี้ คุณจะต้องเพิ่มแท็ก WordPress ลงในไฟล์ แต่คุณอาจจะถาม แท็ก WordPress คืออะไรกันแน่?

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

ลองดูตัวอย่างเพื่อทำความเข้าใจให้ดีขึ้น บน หน้าแรก (ดัชนี.php)คุณสามารถแสดงรายการข้อความล่าสุดได้ รายการนี้ควรเปลี่ยนวิธีและเวลาที่คุณสร้างโพสต์ใหม่โดยอัตโนมัติ คุณสามารถเขียนของคุณเอง ฟังก์ชั่น PHPเพื่อดึงข้อมูลเมลจากฐานข้อมูลและแสดงบนหน้าหลัก แต่ผู้สร้าง WordPress ทำให้ชีวิตของคุณง่ายขึ้น! คุณไม่จำเป็นต้องเขียนฟังก์ชันโดยละเอียดของคุณเอง เพียงแค่ใช้ wp_get_recent_posts($args, $เอาท์พุท)จาก WordPress และดูรายการโพสต์ล่าสุดที่แสดง!

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

• แท็กเทมเพลต WordPress
• ลิงค์คุณสมบัติ WordPress

เมื่อไฟล์ธีมเหล่านี้พร้อมแล้ว คุณควรวางไว้ในโฟลเดอร์ซึ่งควรจะเหมือนกับชื่อธีมใหม่ของคุณ โฟลเดอร์นี้อาจมีโฟลเดอร์อื่นให้บันทึกด้วย ไฟล์ซีเอสเอส, ไฟล์ JavaScript และไฟล์รูปภาพ

คุณยังสามารถรวมรูปภาพในไฟล์ชื่อได้ ภาพหน้าจอ.jpgหรือ ภาพหน้าจอ.pngไฟล์นี้จะแสดงเป็นภาพขนาดย่อของธีมของคุณ การเรียนรู้วิธีถ่ายภาพหน้าจอเป็นเรื่องง่าย

รายการไฟล์ในธีม WordPress ทั่วไปอาจมีลักษณะดังนี้:

คุณต้องดาวน์โหลดโฟลเดอร์ธีมในโฟลเดอร์ / เนื้อหา WP / ธีมการติดตั้งเวิร์ดเพรส ตัวอย่างเช่น หากคุณตั้งชื่อธีม Minerva -แสดงว่าไฟล์ธีมควรจะอยู่ในนั้น / เนื้อหา WP / ธีม / Minerva

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

ดูวิดีโอต่อไปนี้เพื่อดูกระบวนการเพิ่มเติม:

ขั้นตอนที่ 5: เพิ่มฟังก์ชันการทำงานเพิ่มเติม เช่น ฟังก์ชันการค้นหาและผู้ใช้

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

ตัวอย่างเช่น คุณสามารถสร้าง ค้นหา.phpไฟล์ที่มีโค้ดที่แสดงผลการค้นหาจากเว็บไซต์ของคุณ

คุณยังสามารถสร้างฟังก์ชัน PHP ของคุณเองและใช้ในไฟล์ PHP อื่นๆ ได้ คุณต้องสร้างไฟล์ ฟังก์ชั่น.phpเพื่อเก็บฟังก์ชันแบบกำหนดเองไว้ในที่เดียว

เพื่อจัดการกับข้อผิดพลาด 404 (ไม่พบหน้า) คุณสามารถสร้างไฟล์ได้ 404.php. WordPress จะแสดงเนื้อหาของไฟล์นี้ทุกครั้งที่มีคนพยายามเข้าถึง URL ของเว็บไซต์ของคุณที่ไม่มีอยู่

คุณยังสามารถเพิ่มฟังก์ชัน JavaScript บางอย่างได้ JavaScript เป็นภาษาสคริปต์ฝั่งไคลเอ็นต์ที่ใช้กันอย่างแพร่หลาย คุณสามารถเขียนฟังก์ชัน JavaScript ลงในไฟล์ได้ .jsและเรียกใช้ฟังก์ชันเหล่านี้ในไฟล์ PHP ของคุณ ตัวอย่างเช่น การตรวจสอบความถูกต้องของแบบฟอร์มเป็นสิ่งที่โดยทั่วไปจะทำโดยใช้ JavaScript หากผู้ใช้พยายามค้นหาบางสิ่งบนไซต์ของเธอโดยไม่ต้องป้อนคำหลักลงในช่องค้นหา JavaScript จะแจ้งให้ผู้ใช้ทราบว่าเธอต้องป้อนเกณฑ์การค้นหา

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

PSD ฟรีสำหรับตัวแปลง WordPress

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

ฉันหวังว่าบทความนี้จะเป็นประโยชน์กับคุณ หากคุณมีคำถามใดๆ เกี่ยวกับหัวข้อนี้ โปรดอย่าลังเลที่จะถาม ฉันจะพยายามอย่างดีที่สุดเพื่อช่วยคุณ ขอบคุณที่ใช้ TechWelkin

บทความนี้จะแสดงวิธีสร้างธีม WordPress ที่ง่ายที่สุด แม้ว่า Codex จะให้เอกสารที่ครอบคลุมเกี่ยวกับเรื่องนี้ แต่ฉันพบว่ามันซับซ้อนเล็กน้อยสำหรับมือใหม่ ดังนั้นใน “บทช่วยสอน” นี้ ฉันจะบอกคุณถึงหลักการทำงานของธีม WordPress และแสดงวิธีปรับเทมเพลต HTML แบบดิบให้เข้ากับธีมเหล่านั้น ในเวลาเดียวกันคุณไม่จำเป็นต้องรู้ PHP แต่จะเป็นการดีถ้าคุณรู้จัก Photoshop และ CSS เพื่อสร้างการออกแบบ

1. ส่วนหน้าของบล็อก

ก่อนที่เราจะเริ่ม มาดูธีม WordPress มาตรฐานและทำความเข้าใจว่าประกอบด้วยอะไรบ้าง มาทำเครื่องหมายองค์ประกอบกัน (ส่วนหัว, ชื่อโพสต์, แบบฟอร์มการค้นหา, การนำทาง, ส่วนท้าย ฯลฯ )

หน้าแรกมาตรฐาน ( ดัชนี.php)

ห้องมาตรฐานเตียงเดี่ยว ( single.php)

2. เค้าโครง Photoshop

ขึ้นอยู่กับ รูปร่างธีมมาตรฐาน พัฒนาเค้าโครง Photoshop สำหรับบล็อกของคุณ ตัวอย่างเช่น ฉันใช้ GlossyBlue ซึ่งเป็นหนึ่งในธีมฟรีของฉัน ดาวน์โหลด demo.zip เพื่อดูไฟล์ Photoshop ที่เสร็จแล้ว

3. HTML และ CSS

เมื่อการออกแบบ PSD พร้อมแล้ว ให้สร้างเทมเพลต HTML+CSS สำหรับแต่ละหน้า โดยทำตามขั้นตอนในบทช่วยสอนนี้ คุณจะสามารถใช้ไฟล์ GlossyBlue HTML ของฉันได้ สาธิต.zip- หลังจากคลายไฟล์เก็บถาวรแล้วคุณจะเห็น index.html, single.htmlและ หน้า.html- ต่อไปฉันจะใช้มันเพื่อเปลี่ยนให้เป็นเทมเพลต

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

4. ธีม WordPress ทำงานอย่างไร?

หากคุณไปที่โฟลเดอร์ธีมเริ่มต้น ( wp-content/themes/default) คุณจะเห็นไฟล์ php จำนวนมาก (เรียกว่าไฟล์เทมเพลต) และไฟล์เดียว สไตล์.css- เพื่อสร้างรูปร่าง หน้าเวิร์ดเพรสมักจะใช้ไฟล์เทมเพลตหลายไฟล์ ( ดัชนี.php , header.php, แถบด้านข้าง.php,และ footer.php).

รายละเอียดเพิ่มเติมใน Codex: “สถาปัตยกรรมไซต์” และ “ลำดับชั้นเทมเพลต”

5. ไฟล์เทมเพลตที่ซ้ำกัน

คัดลอกโฟลเดอร์ HTML จาก GlossyBlue ไปยังโฟลเดอร์ wp-เนื้อหา/ธีม- หลังจากนั้นไปที่ไดเร็กทอรีธีมเริ่มต้นคัดลอก ความคิดเห็น.phpและ searchform.phpไปยังโฟลเดอร์ สีฟ้ามัน.

6. สไตล์.css

ไปที่โฟลเดอร์ธีมเริ่มต้น เปิดไฟล์ สไตล์.css- คัดลอกข้อความแสดงความคิดเห็นที่จุดเริ่มต้นของไฟล์แล้ววางลงใน สไตล์.cssธีมเคลือบเงาสีฟ้า หากต้องการ คุณสามารถเปลี่ยนชื่อเรื่องและข้อมูลผู้แต่งได้

7. การแยกไฟล์

ตอนนี้เราต้องค้นหาว่าจะแบ่งไฟล์ HTML ออกเป็นส่วน ๆ ที่ไหน: header.php , sidebar.php และ footer.php- ภาพหน้าจอด้านล่างแสดงเวอร์ชันที่เรียบง่ายของไฟล์ดัชนีของฉัน รวมถึงหลักการแบ่งไฟล์

8.Header.php

เปิด ดัชนี.html- คุณต้องตัดส่วนจากด้านบนไปยังจุดสิ้นสุด วางลงในไฟล์ php ใหม่และบันทึกเป็น header.php.
ไปที่โฟลเดอร์ธีมเริ่มต้น เปิดใหม่ header.php- คัดลอกและแทนที่แท็กที่โค้ด php จำเป็นต้องใช้: ชื่อ ลิงก์ สไตล์ชีต h1 และ div class=description

เมนูนำทาง (wp_list_pages) แทนที่แท็ก ลี้วี ul id=navบน ;

9. แถบด้านข้าง.php

กลับไปที่ ดัชนี.htmlให้ตัดโค้ดจากจุดเริ่มต้น แบบฟอร์ม id=แบบฟอร์มการค้นหาและจนกว่าแท็กจะปิด div id=แถบด้านข้างให้นำไปใส่ในไฟล์ php ใหม่แล้วบันทึกเป็น แถบด้านข้าง.php.

• แทนที่ แบบฟอร์ม id=แบบฟอร์มการค้นหาพร้อมเนื้อหาทั้งหมดบน
• แทนที่แท็ก ลี้หมวดหมู่โดย
• แทนที่แท็ก ลี้ที่เก็บถาวรบน

10. Footer.php

กลับไปที่ ดัชนี.html- แยกรหัสออกจากที่นั่น div id=ส่วนท้ายรวมเข้ากับแท็ก div id=footer และต่อท้าย /htmlแล้วใส่ใหม่ footer.php.

กระทู้ล่าสุดที่นี่ฉันใช้ query_post เพื่อแสดง 5 รายการล่าสุดบนบล็อก

"ความคิดเห็นล่าสุด""ความคิดเห็นล่าสุด" ที่สร้างโดยปลั๊กอิน (รวมอยู่ในโฟลเดอร์ธีม)

11. อินเด็กซ์.php

ตอนนี้อยู่ในของคุณ ดัชนี.htmlควรอยู่เท่านั้น div id=เนื้อหา- บันทึกไฟล์เป็น ดัชนี.php- ป้อนบรรทัด: get_header, get_sidebar, และ get_footerตามลำดับที่ปรากฏในรูปแบบ

12. การแยกวิเคราะห์วงจร

ลูปจะแสดงโพสต์ในบล็อกตามลำดับตามการตั้งค่าของคุณ ภาพหน้าจอด้านล่างแสดงวิธีการทำงาน ในตอนแรก ลูปจะตรวจสอบการมีอยู่ของบันทึก และหากไม่พบใดๆ ก็จะแสดงข้อความ "ไม่พบ".

13. การคัดลอกวงจร

ไปที่ไดเร็กทอรีธีมเริ่มต้น เปิด ดัชนี.php- คัดลอกวงจรจากวงจรมาตรฐาน ดัชนี.phpของคุณเอง - ระหว่าง div id=content../div- หลังจากนั้น แทนที่ข้อความคงที่ด้วยแท็กเทมเพลต WordPress: วันที่โพสต์ ชื่อเรื่อง หมวดหมู่ ความคิดเห็น ลิงก์ถัดไปและก่อนหน้า

14. ดูตัวอย่างธีม

ยินดีด้วย! คุณได้สร้างส่วนสาธารณะ (ส่วนหลักของเทมเพลต) ตอนนี้ไปที่แผงการดูแลระบบไปที่แท็บ ออกแบบคุณควรเห็นธีม GlossyBlue เปิดใช้งานและไปที่ส่วนสาธารณะเพื่อดูผลลัพธ์ในการดำเนินการ

15. ซิงเกิล.php

ถึงเวลาสร้างเทมเพลตแล้ว single.php- หากต้องการ คุณสามารถทำซ้ำขั้นตอนโดยโอนโค้ดจากธีมมาตรฐาน แต่ดูเหมือนง่ายกว่าสำหรับฉันที่จะใช้อันที่ฉันเพิ่งสร้างขึ้น ดัชนี.php, บันทึกเป็น single.php- เปิด single.phpจากธีมมาตรฐานและคัดลอกแท็กเทมเพลตไปยังตำแหน่งที่ต้องการ ถัดไป เชื่อมต่อ ความคิดเห็น_เทมเพลต- ภาพหน้าจอต่อไปนี้แสดงการเปลี่ยนแปลงที่ฉันทำ:

16.Page.php

ตอนนี้ใหม่ single.phpบันทึกด้วยชื่อ หน้า.php- ลบวันที่ป้อน แบบฟอร์มแสดงความคิดเห็น ลิงก์ถัดไป/ก่อนหน้า เพียงเท่านี้ก็เพียงพอแล้ว - เทมเพลตของคุณ หน้า.phpพร้อม .

17. การลบไฟล์ HTML

ลบไฟล์ HTML ทั้งหมดออกจากโฟลเดอร์ สีฟ้ามัน(เราจะไม่ต้องการมันอีกต่อไป) ในทางเทคนิคแล้ว นี่เพียงพอที่จะสร้างธีม WordPress พื้นฐานได้ คุณอาจสังเกตเห็นว่าธีมมาตรฐานมีไฟล์ PHP มากกว่า จริงๆ แล้ว คุณไม่จำเป็นต้องใช้มันจริงๆ หากคุณต้องการธีมที่เรียบง่าย ตัวอย่างเช่น ถ้า ค้นหา.phpหรือ 404.phpจะไม่อยู่ในโฟลเดอร์ธีม WordPress จะใช้โดยอัตโนมัติ ดัชนี.phpเพื่อแสดงหน้า อ่านลำดับชั้นเทมเพลตสำหรับรายละเอียดเพิ่มเติม

18. เทมเพลตหน้า WordPress

สำหรับตัวอย่างสุดท้าย ฉันจะแสดงวิธีใช้เทมเพลตของเพจเพื่อสร้างหน้าเก็บถาวรที่จะมีรายการโพสต์ทั้งหมดในบล็อกของคุณ (มีประโยชน์สำหรับแผนผังไซต์) สำเนา archives.phpจากโฟลเดอร์ธีมมาตรฐาน ลบโค้ดที่ไม่จำเป็นออกแล้วรับสิ่งนี้: