ผู้เขียน หัวข้อ: Build WordPress Theme : ทำความเข้าใจเบื้องต้นก่อนสร้าง  (อ่าน 1626 ครั้ง)

0 สมาชิก และ 1 บุคคลทั่วไป กำลังดูหัวข้อนี้

ออฟไลน์ smf

  • [color=green][i]"ถ้าคุณไม่สามารถอธิบายอย่างง่ายๆ ให้คนอื่นเข้าใจได้แล้วล่ะก็ แสดงว่าคุณยังเข้าใจมันไม่ดีพอ"[/i][/color]
  • Administrator
  • Hero Member
  • *****
  • กระทู้: 1,368
  • พอยท์: 5
    • ดูรายละเอียด
    • pordoo.com
    • อีเมล์
Build WordPress Theme : ทำความเข้าใจเบื้องต้นก่อนสร้าง - 3 height=220
 
หลายคนหลังจากใช้งาน WordPress มาซักพัก คงเริ่มรู้อยากจะปรับ theme ที่ใช้อยู่ หรือสร้างมันขึ้นมาใหม่เพื่อให้ตรงกับความต้องการของเราเอง ก่อนจะสร้าง theme เราต้องมาทำความเข้าใจกันก่อนว่า เราควรมีความรู้พื้นฐานอะไรบ้าง
  • HTML
  • CSS
  • PHP
สาม ตัวข้างบนนั้น ถ้าเราต้องการแค่ปรับ theme ก็มีความรู้นิดหน่อย ปรับแก้โค้ดเบื้องต้นได้ เราก็สามารถปรับแต่ง theme ได้ แต่ถ้าเราคิดจะสร้าง theme ของเราเอง แนะนำว่าความรู้้พื้นฐานของสามตัวข้างบนนั้น ต้องแน่นพอสมควร
แน่นอน ว่า WordPress นั้นใช้งานง่าย ปรับแต่งไม่ยาก สร้างไม่ยาก แต่ก็ไม่ได้ง่ายถึงขนาดว่าไม่มีความรู้พื้นฐานมาเลยแล้วสามารถทำได้ ดังนั้นแล้วควรศึกษา HTML,CSS และ PHP มาก่อนจะดีกว่าTheme อยู่ตรงไหน

Build WordPress Theme : ทำความเข้าใจเบื้องต้นก่อนสร้าง - 1 height=135
 
ดูจากรูปเลยครับ ตามปรกติ theme ของเราจะต้องตั้งอยู่ใน wp-content/themes/ โดยแต่ละ theme ก็จะแยกตาม folder ของตัวเอง โดยภายในก็จะประกอบด้วยไฟล์ต่าง ๆ จำพวกไฟล์ css, ไฟล์ template, ไฟล์ function (functions.php), ไฟล์ javascript และรูปภาพต่าง ๆ

ถ้าเราต้องสร้าง theme ชื่อ snsd เราก็ต้องสร้าง folder ใน wp-content/themes/ ก็จะได้ออกมาเป็น wp-content/themes/snsd/ เลี่ยงการใช้ชื่อ folder มีตัวเลขประกอบ เพราะอาจจะทำให้ theme เราไม่ปรากฎให้เลือกในส่วนของรายชื่อ theme

แต่ ไม่ใช่เราสร้าง folder แล้ว theme ของเราจะไปปรากฎให้เลือกในส่วนของรายชื่อ theme ตรงหน้า admin ของเว็บ WordPress ของเรานะครับ เราต้องทำการเขียน comment ให้กับไฟล์ style.css เสียก่อนครับ

อยากให้เห็น theme ของเรา ต้องใส่ comment ให้ style.css
สำหรับ การสร้าง theme แล้ว style.css ถือว่าเป็นไฟล์ที่สำคัญมากไฟล์หนึ่งเลย โดย 1 ในหน้าที่สำคัญคือ การแสดงรายละเอียดต่าง ๆ เกี่ยวกับ theme ของเราเพื่อให้ไปปรากฎอยู่ในหน้ารายชื่อ theme ในส่วนของ admin ซึ่งเราต้องใส่ comment ไว้ที่ส่วนบนสุดของ style.css โดยมาตรฐานการใส่ comment เพื่อให้ตัว WordPress เห็น theme ของเรานั้นหาไม่ยาก เพราะเราใช้ตัวอย่างจาก theme มาตรฐานที่ WordPress ให้มาก็ได้ครับ

โค๊ด: [Select]
/*Theme Name: Twenty ElevenTheme URI: http://wordpress.org/extend/themes/twentyelevenAuthor: the WordPress teamAuthor URI: http://wordpress.org/Description: The 2011 theme for WordPress is sophisticated, lightweight, and adaptable. Make it yours with a custom menu, header image, and background -- then go further with available theme options for light or dark color scheme, custom link colors, and three layout choices. Twenty Eleven comes equipped with a Showcase page template that transforms your front page into a showcase to show off your best content, widget support galore (sidebar, three footer areas, and a Showcase page widget area), and a custom "Ephemera" widget to display your Aside, Link, Quote, or Status posts. Included are styles for print and for the admin editor, support for featured images (as custom header images on posts and pages and as large images on featured "sticky" posts), and special styles for six different post formats.Version: 1.4License: GNU General Public License v2 or laterLicense URI: http://www.gnu.org/licenses/gpl-2.0.htmlTags: dark, light, white, black, gray, one-column, two-columns, left-sidebar, right-sidebar, fixed-width, flexible-width, custom-background, custom-colors, custom-header, custom-menu, editor-style, featured-image-header, featured-images, full-width-template, microformats, post-formats, rtl-language-support, sticky-post, theme-options, translation-readyText Domain: twentyeleven*/
ซึ่งเมื่อไปปรากฎอยู่ในหน้ารายชื่อ theme แล้วจะแสดงรายละเอียดตามที่เราเขียน comment ไว้ที่ส่วนบนสุดของ style.css

Build WordPress Theme : ทำความเข้าใจเบื้องต้นก่อนสร้าง - 2 height=254

 แต่เราสามารถย่อ comment ให้เหลือเพียงที่เราจะใช้งานก็ได้ ซึ่งก็จะเหลือเพียง
โค๊ด: [Select]
/*Theme Name: WordPress ThailandTheme URI: http://www.wordpress.in.thAuthor: RabbitinblackAuthor URI: http://www.rabbitinblack.comDescription: Theme for WordPress.in.thVersion: 9.0*/

ที่มา: http://www.wordpress.in.th/wordpress-article/build-wordpress-theme-basic/
« แก้ไขครั้งสุดท้าย: 11 สิงหาคม 2016, 15:00:05 โดย smf »