|
หัวข้อ: สอนวิธีการปรับแต่ง wordpress theme ให้สวยเริ่ด ตอนที่ 1 แก้ไข css ถูกใจอย่าลืม + เริ่มหัวข้อโดย: Jig_Load ที่ 18 สิงหาคม 2012, 02:22:59 คนไทยใจดี อ่านแล้วคิดว่ามีประโยชน์ + ให้เค้าด้วยน้า
หลายคนพยายามหาธีม (Wordpress Theme) ที่ถูกใจ แต่ก็หาไม่ได้สักที Theme สวยๆ ก็ขายกันแพงซะเหลือเกิน Theme ฟรีๆ ก็ไม่ถูกใจ วันนี้ Jigload จะมาสอนวิธีการปรับแต่ง และแก้ไข Wordpress Theme ให้เป็นที่น่าพอใจกันดีกว่า อุปกรณ์การทำ Wordpress Theme สวยๆ อุปกรณ์ 1. Browser Firefox หรือ Chrome ลิ้งค์ดาวน์โหลดอยู่ข้างล่าง - https://addons.mozilla.org/en-us/firefox/addon/firebug/ - https://chrome.google.com/webstore/detail/bmagokdooijbeehmkpknfglimnifench วิธีการปรับแต่ง Wordpress Theme 2. ติดตั้ง แล้วทำการ Restart Browser ให้เป็นที่เรียบร้อย 3. เปิดหน้าเว็บไซต์ที่เราต้องการปรับแต่งขึ้นมา ในที่นี้จะยกตัวอย่างการแก้ไข Wordpress Theme ของเว็บไซต์ Jigload.com หน้าตาเดิมๆ บ้านๆ จะเป็นแบบนี้ ขี้เหล่จริงๆ ดูแล้วไม่ถูกใจเอาซะเลย (http://jigload.com/wp-content/uploads/2012/08/jigload.com_-300x147.jpg) 4. ให้เราเปิด Add-On: Firebug ขึ้นมา มองหาไอค่อนรูปแมลง ใน firefox จะอยู่ข้างๆ search bar (http://jigload.com/wp-content/uploads/2012/08/firebug-300x27.jpg) 5. เมื่อเปิดขึ้นมาแล้วจะได้หน้าจอการทำงานแบบนี้ (http://jigload.com/wp-content/uploads/2012/08/jigload2-300x146.jpg) 6. ใน firebug ให้เราจิ้มที่ เครื่องหมายคำพูดสีฟ้าๆ (http://jigload.com/wp-content/uploads/2012/08/%E0%B8%A7%E0%B8%B4%E0%B8%98%E0%B8%B5%E0%B9%83%E0%B8%8A%E0%B9%89-firebug.jpg) 7. จากนั้นเลือก cursor เม้าส์ ไปหาตำแหน่งที่ต้องการแก้ไข โดยในตัวอย่างนี้จะแสดงการแก้ไข Menu bar เมื่อนำเม้าส์ไปชี้ จะแสดงไฮไลท์สีฟ้าๆ ขึ้นมา แล้วให้เราคลิ๊กซ้ายลงไปหนึ่งที ค่ะ (http://jigload.com/wp-content/uploads/2012/08/%E0%B8%A7%E0%B8%B4%E0%B8%98%E0%B8%B5%E0%B9%83%E0%B8%8A%E0%B9%89-firebug-2-300x83.jpg) 8. เจ้า firebug ก็จะแสดงโค้ดในส่วนที่เราสนใจขึ้นมาค่ะ ในช่องทางด้านขวาล่าง จะแสดง style.css ของส่วนที่เราสนใจ ตรงนี้ละค่ะที่เราจะปรับแต่ง (http://jigload.com/wp-content/uploads/2012/08/%E0%B8%A7%E0%B8%B4%E0%B8%98%E0%B8%B5%E0%B9%83%E0%B8%8A%E0%B9%89-firebug-3-300x149.jpg) 9. เจ้า firebug สามารถแสดงรหัสสีปัจจุบันให้เห็นด้วยว่าเป็นสีอะไรอยู่ สำหรับตัวอย่างนี้มันจะบอกเลยว่าเมนูบาร์ของเรา เป็นสีขาวออกเทาๆอยู่นะ โดยเมื่อนำเม้าส์ไปชี้จะแสดงเป็น pop up ขึ้นมา (http://jigload.com/wp-content/uploads/2012/08/%E0%B8%A7%E0%B8%B4%E0%B8%98%E0%B8%B5%E0%B9%83%E0%B8%8A%E0%B9%89-firebug-4-300x203.jpg) 10. ขั้นตอนนี้จะยกตัวอย่างการแก้ไขสีของเมนูบาร์ โดยไปเอาสีที่ชอบจาก www.computerhope.com/htmcolor.htm (http://www.computerhope.com/htmcolor.htm) ปรากฎว่ารหัสสีที่ถูกใจ คือ รหัส #565051 ก็ให้เราเอาไปแทนที่ของเดิมใน firebug ได้เลย จะเห้นได้ว่าสีของเมนูบาร์เปลี่ยนไปแล้วตามรหัสสีที่ใส่เข้าไป ^ ^ (http://jigload.com/wp-content/uploads/2012/08/%E0%B8%A7%E0%B8%B4%E0%B8%98%E0%B8%B5%E0%B9%83%E0%B8%8A%E0%B9%89-firebug-5-300x148.jpg) 11. ให้เราคัดลอกโค้ดในส่วนที่เราแก้ไขมาค่ะ (http://jigload.com/wp-content/uploads/2012/08/%E0%B8%A7%E0%B8%B4%E0%B8%98%E0%B8%B5%E0%B9%83%E0%B8%8A%E0%B9%89-firebug-6-300x191.jpg) 12. มาถึงขั้นตอนนี้หากเพื่อนๆ ทำเว็บไซต์โดยใช้สคริปตัวอื่น ให้นำไปแก้ไขที่ไฟล์ .css ได้เลย อย่าลืมเซฟอันเก่าไว้ด้วยเผื่อผิดพลาด ส่วนเพื่อนๆที่ใช้ Wordpress Theme ในไปที่เมนู Admin > Appearance > Editor > มองหา Styles > User.CSS แล้ววางโค้ดที่ได้จากการ Copy ลงไป แล้วบันทึกได้เลยค่ะ จะเห็นความเปลี่ยนแปลงของเว็บไซต์ (http://jigload.com/wp-content/uploads/2012/08/%E0%B8%A7%E0%B8%B4%E0%B8%98%E0%B8%B5%E0%B9%83%E0%B8%8A%E0%B9%89-firebug-7-300x175.jpg) ตอนต่อไปจะสอนการแก้ไขหน้า index นะคะ สวัสดีค่ะ :wanwan019: ที่มา http://jigload.com (http://jigload.com/%e0%b8%a1%e0%b8%b2%e0%b9%81%e0%b8%95%e0%b9%88%e0%b8%87-wordpress-theme-%e0%b8%81%e0%b8%b1%e0%b8%99%e0%b9%80%e0%b8%96%e0%b8%ad%e0%b8%b0-%e0%b8%95%e0%b8%ad%e0%b8%99%e0%b8%97%e0%b8%b5%e0%b9%88-1-%e0%b9%81%e0%b8%81%e0%b9%89%e0%b9%84%e0%b8%82-css/) หัวข้อ: Re: สอนวิธีการปรับแต่ง wordpress theme ให้สวยเริ่ด ตอนที่ 1 แก้ไข css เริ่มหัวข้อโดย: ThaiReference ที่ 18 สิงหาคม 2012, 02:37:41 เป็นความรู้ที่ดีมาก ขอบคุณครับ
หัวข้อ: Re: สอนวิธีการปรับแต่ง wordpress theme ให้สวยเริ่ด ตอนที่ 1 แก้ไข css เริ่มหัวข้อโดย: DevPresso ที่ 18 สิงหาคม 2012, 03:40:39 ขอบคุณครับ มีประโยชน์มากครับ
หัวข้อ: Re: สอนวิธีการปรับแต่ง wordpress theme ให้สวยเริ่ด ตอนที่ 1 แก้ไข css เริ่มหัวข้อโดย: UnLock UnlimiT ที่ 18 สิงหาคม 2012, 04:06:32 ว่าแล้ว :wanwan004:
แมลงไฟมันทำได้ทุกอย่างแม้กระทั้งยอด :wanwan024: หัวข้อ: Re: สอนวิธีการปรับแต่ง wordpress theme ให้สวยเริ่ด ตอนที่ 1 แก้ไข css เริ่มหัวข้อโดย: Clickz ที่ 18 สิงหาคม 2012, 06:20:19 ขอบคุณครับ ... รออ่านตอนต่อไปครับ
:wanwan013: หัวข้อ: Re: สอนวิธีการปรับแต่ง wordpress theme ให้สวยเริ่ด ตอนที่ 1 แก้ไข css เริ่มหัวข้อโดย: binknon7 ที่ 18 สิงหาคม 2012, 06:30:48 เว็บสวยอะ :wanwan008:
หัวข้อ: Re: สอนวิธีการปรับแต่ง wordpress theme ให้สวยเริ่ด ตอนที่ 1 แก้ไข css เริ่มหัวข้อโดย: xvlnw.com ที่ 18 สิงหาคม 2012, 06:33:17 แจ่มครับ ใช้ Firebug ให้เกิดประโยชน์
:wanwan003: หัวข้อ: Re: สอนวิธีการปรับแต่ง wordpress theme ให้สวยเริ่ด ตอนที่ 1 แก้ไข css เริ่มหัวข้อโดย: sinomoney ที่ 18 สิงหาคม 2012, 06:54:26 +1
ขอบคุณมากครับ หัวข้อ: Re: สอนวิธีการปรับแต่ง wordpress theme ให้สวยเริ่ด ตอนที่ 1 แก้ไข css เริ่มหัวข้อโดย: Zhelf ที่ 18 สิงหาคม 2012, 06:58:39 ขอบคุณครับผม
หัวข้อ: Re: สอนวิธีการปรับแต่ง wordpress theme ให้สวยเริ่ด ตอนที่ 1 แก้ไข css เริ่มหัวข้อโดย: KINGRPG ที่ 18 สิงหาคม 2012, 07:07:48 :wanwan017: ใช้ Firefox Inspect Element ปรับแล้วดูแบบ 3D ก็สวยดีนะครับ :D
หัวข้อ: Re: สอนวิธีการปรับแต่ง wordpress theme ให้สวยเริ่ด ตอนที่ 1 แก้ไข css เริ่มหัวข้อโดย: dekmv ที่ 18 สิงหาคม 2012, 07:10:46 สุดยอดครับ ขอบคุณครับ
หัวข้อ: Re: สอนวิธีการปรับแต่ง wordpress theme ให้สวยเริ่ด ตอนที่ 1 แก้ไข css เริ่มหัวข้อโดย: Addyklub ที่ 18 สิงหาคม 2012, 07:37:38 ได้ความรู้อะไรอีกมากมายเลยครับ ขอบคุณมาก ๆ เลย :wanwan017:
หัวข้อ: Re: สอนวิธีการปรับแต่ง wordpress theme ให้สวยเริ่ด ตอนที่ 1 แก้ไข css เริ่มหัวข้อโดย: Jumpman999 ที่ 18 สิงหาคม 2012, 07:54:15 กำลังอยากได้ ขอบคุณครับ
หัวข้อ: Re: สอนวิธีการปรับแต่ง wordpress theme ให้สวยเริ่ด ตอนที่ 1 แก้ไข css เริ่มหัวข้อโดย: PremchaiG ที่ 18 สิงหาคม 2012, 08:01:32 ขอบคุณครับ
หัวข้อ: Re: สอนวิธีการปรับแต่ง wordpress theme ให้สวยเริ่ด ตอนที่ 1 แก้ไข css เริ่มหัวข้อโดย: อัลฟา ที่ 18 สิงหาคม 2012, 09:32:00 :wanwan017:
หัวข้อ: Re: สอนวิธีการปรับแต่ง wordpress theme ให้สวยเริ่ด ตอนที่ 1 แก้ไข css เริ่มหัวข้อโดย: ultimatechakrit ที่ 18 สิงหาคม 2012, 09:45:00 กำลังต้องการ
หัวข้อ: Re: สอนวิธีการปรับแต่ง wordpress theme ให้สวยเริ่ด ตอนที่ 1 แก้ไข css เริ่มหัวข้อโดย: mymo ที่ 18 สิงหาคม 2012, 09:47:02 ขอบคุณครับ :wanwan003:
หัวข้อ: Re: สอนวิธีการปรับแต่ง wordpress theme ให้สวยเริ่ด ตอนที่ 1 แก้ไข css เริ่มหัวข้อโดย: jeen705 ที่ 18 สิงหาคม 2012, 09:58:20 อยากทราบว่า เอาหัวข้อจาก smf มาโชว์หน้าแรกอย่างไรครับ แล้วใส่กรอบให้มันสวยงามด้วย แนะนำหน่อยคับ
ถ้าผมไม่ได้ติดตามPMมาบอกหน่อยนะคับ หัวข้อ: Re: สอนวิธีการปรับแต่ง wordpress theme ให้สวยเริ่ด ตอนที่ 1 แก้ไข css เริ่มหัวข้อโดย: vza ที่ 18 สิงหาคม 2012, 10:27:40 ขอบคุณครับ เด่วต้องไปลองมั้งล่ะ :wanwan017:
หัวข้อ: Re: สอนวิธีการปรับแต่ง wordpress theme ให้สวยเริ่ด ตอนที่ 1 แก้ไข css เริ่มหัวข้อโดย: 10kron ที่ 18 สิงหาคม 2012, 10:49:50 ขอบคุณครับ รออ่านตอนต่อไปนะครับ
หัวข้อ: Re: สอนวิธีการปรับแต่ง wordpress theme ให้สวยเริ่ด ตอนที่ 1 แก้ไข css เริ่มหัวข้อโดย: l3arracuda ที่ 18 สิงหาคม 2012, 10:51:41 +161 ขอบคุณครับ
กำลังมองหา step by step แบบนี้แหละ ขอบคุณมากๆ เลยนะคร๊าบ :wanwan017: :wanwan017: :wanwan017: หัวข้อ: Re: สอนวิธีการปรับแต่ง wordpress theme ให้สวยเริ่ด ตอนที่ 1 แก้ไข css ถูกใจอย่าลืม + เริ่มหัวข้อโดย: cartoon7 ที่ 18 สิงหาคม 2012, 11:14:09 +1 ไว้ก่อนเลยค่ะ เดี๋ยวขึ้นไปไล่อ่านอย่างจริงจัง :wanwan020:
หัวข้อ: Re: สอนวิธีการปรับแต่ง wordpress theme ให้สวยเริ่ด ตอนที่ 1 แก้ไข css เริ่มหัวข้อโดย: Jig_Load ที่ 18 สิงหาคม 2012, 11:29:42 หัวข้อ: Re: สอนวิธีการปรับแต่ง wordpress theme ให้สวยเริ่ด ตอนที่ 1 แก้ไข css ถูกใจอย่าลืม + เริ่มหัวข้อโดย: 4Aoy ที่ 18 สิงหาคม 2012, 12:05:57 กระทู้ฮิตต้องติดตามหน่อย :wanwan003: หัวข้อ: Re: สอนวิธีการปรับแต่ง wordpress theme ให้สวยเริ่ด ตอนที่ 1 แก้ไข css ถูกใจอย่าลืม + เริ่มหัวข้อโดย: Mesut Ozil ที่ 18 สิงหาคม 2012, 12:22:50 ขอบคุณมากครับ + ให้เลย :wanwan017:
หัวข้อ: Re: สอนวิธีการปรับแต่ง wordpress theme ให้สวยเริ่ด ตอนที่ 1 แก้ไข css ถูกใจอย่าลืม + เริ่มหัวข้อโดย: chetzoom ที่ 25 พฤศจิกายน 2012, 08:58:41 ขอบคุณมากครับ
หัวข้อ: Re: สอนวิธีการปรับแต่ง wordpress theme ให้สวยเริ่ด ตอนที่ 1 แก้ไข css ถูกใจอย่าลืม + เริ่มหัวข้อโดย: at7thheaven ที่ 25 พฤศจิกายน 2012, 10:06:06 ขอบคุณค่ะ เก็บกระทู้โลดดดด :'(
หัวข้อ: Re: สอนวิธีการปรับแต่ง wordpress theme ให้สวยเริ่ด ตอนที่ 1 แก้ไข css ถูกใจอย่าลืม + เริ่มหัวข้อโดย: dolphin ที่ 25 พฤศจิกายน 2012, 10:08:55 +1 ให้ครับ ขอบคุณมากครับ หัวข้อ: Re: สอนวิธีการปรับแต่ง wordpress theme ให้สวยเริ่ด ตอนที่ 1 แก้ไข css ถูกใจอย่าลืม + เริ่มหัวข้อโดย: bot ที่ 25 พฤศจิกายน 2012, 10:09:45 ขอบคุณมากครับ เก็บ :wanwan003: หัวข้อ: Re: สอนวิธีการปรับแต่ง wordpress theme ให้สวยเริ่ด ตอนที่ 1 แก้ไข css ถูกใจอย่าลืม + เริ่มหัวข้อโดย: rasin ที่ 25 พฤศจิกายน 2012, 10:11:16 ขอบคุณมากเลยครับ :wanwan017:
หัวข้อ: Re: สอนวิธีการปรับแต่ง wordpress theme ให้สวยเริ่ด ตอนที่ 1 แก้ไข css ถูกใจอย่าลืม + เริ่มหัวข้อโดย: victorzero ที่ 25 พฤศจิกายน 2012, 11:28:16 สูบๆๆๆๆ มาสูบความรู้ :wanwan017:
หัวข้อ: Re: สอนวิธีการปรับแต่ง wordpress theme ให้สวยเริ่ด ตอนที่ 1 แก้ไข css ถูกใจอย่าลืม + เริ่มหัวข้อโดย: Zaesar ที่ 25 พฤศจิกายน 2012, 11:36:39 ขอบคุณครับ เสียดาย+ไม่ได้
หัวข้อ: Re: สอนวิธีการปรับแต่ง wordpress theme ให้สวยเริ่ด ตอนที่ 1 แก้ไข css ถูกใจอย่าลืม + เริ่มหัวข้อโดย: silverlose ที่ 25 พฤศจิกายน 2012, 12:18:04 สวดยอด
หัวข้อ: Re: สอนวิธีการปรับแต่ง wordpress theme ให้สวยเริ่ด ตอนที่ 1 แก้ไข css ถูกใจอย่าลืม + เริ่มหัวข้อโดย: zumzam19 ที่ 25 พฤศจิกายน 2012, 13:51:16 :wanwan017: ขอบคุณมากที่สุดครับ รอติดตามตอนที่ 2 ครับ :wanwan011:
หัวข้อ: Re: สอนวิธีการปรับแต่ง wordpress theme ให้สวยเริ่ด ตอนที่ 1 แก้ไข css ถูกใจอย่าลืม + เริ่มหัวข้อโดย: smilepoo ที่ 03 กรกฎาคม 2013, 16:05:08 ขอเก็บนะค่ะ :wanwan017:
หัวข้อ: Re: สอนวิธีการปรับแต่ง wordpress theme ให้สวยเริ่ด ตอนที่ 1 แก้ไข css ถูกใจอย่าลืม + เริ่มหัวข้อโดย: squidbanana ที่ 08 มีนาคม 2014, 16:26:32 สุดยอดมากครับผม เป็นประโยชน์มาก มาเปิดเจอ ช่วยได้เยอะเลยครับผม :]
หัวข้อ: Re: สอนวิธีการปรับแต่ง wordpress theme ให้สวยเริ่ด ตอนที่ 1 แก้ไข css ถูกใจอย่าลืม + เริ่มหัวข้อโดย: Seventh ที่ 08 มีนาคม 2014, 16:30:57 กำลังฝึกทำอยู่ครับ ขอบคุณมากครับ
หัวข้อ: Re: สอนวิธีการปรับแต่ง wordpress theme ให้สวยเริ่ด ตอนที่ 1 แก้ไข css ถูกใจอย่าลืม + เริ่มหัวข้อโดย: papapman ที่ 08 มีนาคม 2014, 18:18:47 ใจจร้า
หัวข้อ: Re: สอนวิธีการปรับแต่ง wordpress theme ให้สวยเริ่ด ตอนที่ 1 แก้ไข css ถูกใจอย่าลืม + เริ่มหัวข้อโดย: lovenihongo ที่ 08 มีนาคม 2014, 18:36:14 +1 ค่าาา ตามอ่านต่อนะคะ
หัวข้อ: Re: สอนวิธีการปรับแต่ง wordpress theme ให้สวยเริ่ด ตอนที่ 1 แก้ไข css ถูกใจอย่าลืม + เริ่มหัวข้อโดย: greencheer ที่ 08 มีนาคม 2014, 19:09:14 ขอบคุณมากครับ
:wanwan017: :wanwan017: หัวข้อ: Re: สอนวิธีการปรับแต่ง wordpress theme ให้สวยเริ่ด ตอนที่ 1 แก้ไข css ถูกใจอย่าลืม + เริ่มหัวข้อโดย: cakemuffin ที่ 08 มีนาคม 2014, 21:52:22 ขอบคุณมากๆค่ะ +ได้เมื่อไหร่จะมาบวกให้นะคะ :wanwan017: :wanwan017:
หัวข้อ: Re: สอนวิธีการปรับแต่ง wordpress theme ให้สวยเริ่ด ตอนที่ 1 แก้ไข css ถูกใจอย่าลืม + เริ่มหัวข้อโดย: Ozone ที่ 08 มีนาคม 2014, 23:28:05 +1 ครับ
หัวข้อ: Re: สอนวิธีการปรับแต่ง wordpress theme ให้สวยเริ่ด ตอนที่ 1 แก้ไข css ถูกใจอย่าลืม + เริ่มหัวข้อโดย: nuttdam ที่ 09 มีนาคม 2014, 02:54:38 +1 ขอบคุณครับ
รอตอนที่ 2 อยู่นะฮะ หัวข้อ: Re: สอนวิธีการปรับแต่ง wordpress theme ให้สวยเริ่ด ตอนที่ 1 แก้ไข css ถูกใจอย่าลืม + เริ่มหัวข้อโดย: LIKEPLAZA ที่ 09 มีนาคม 2014, 08:01:15 สุดยอดกำลังหาอยู่เลยขอบคุณครับ
หัวข้อ: Re: สอนวิธีการปรับแต่ง wordpress theme ให้สวยเริ่ด ตอนที่ 1 แก้ไข css ถูกใจอย่าลืม + เริ่มหัวข้อโดย: 1ZAA ที่ 09 มีนาคม 2014, 08:55:41 ขอบคุณครับ ง่ายมากๆ
หัวข้อ: Re: สอนวิธีการปรับแต่ง wordpress theme ให้สวยเริ่ด ตอนที่ 1 แก้ไข css ถูกใจอย่าลืม + เริ่มหัวข้อโดย: thzeed.com ที่ 09 มีนาคม 2014, 08:57:54 คุงค้าาาาาาาาาาาา :wanwan017:
หัวข้อ: Re: สอนวิธีการปรับแต่ง wordpress theme ให้สวยเริ่ด ตอนที่ 1 แก้ไข css ถูกใจอย่าลืม + เริ่มหัวข้อโดย: 4Aoy ที่ 09 มีนาคม 2014, 09:55:05 ขอบคุณมากๆ ทำให้เข้าใจได้ง่ายขึ้น :wanwan020: รอตอนที่สองต่อไป :'( (อย่าเพิ่งเขียนเป็นอีบุ๊คมาขายน๊า) :wanwan004: หัวข้อ: Re: สอนวิธีการปรับแต่ง wordpress theme ให้สวยเริ่ด ตอนที่ 1 แก้ไข css ถูกใจอย่าลืม + เริ่มหัวข้อโดย: TomYong ที่ 09 มีนาคม 2014, 10:14:35 ความรู้ดีๆ ขอบคุณมากครับ
หัวข้อ: Re: สอนวิธีการปรับแต่ง wordpress theme ให้สวยเริ่ด ตอนที่ 1 แก้ไข css ถูกใจอย่าลืม + เริ่มหัวข้อโดย: lammas ที่ 09 มีนาคม 2014, 10:37:08 ปกติผมก็ทำแบบนี้แหละ ขอบคุณครับ
หัวข้อ: Re: สอนวิธีการปรับแต่ง wordpress theme ให้สวยเริ่ด ตอนที่ 1 แก้ไข css ถูกใจอย่าลืม + เริ่มหัวข้อโดย: fingerscan ที่ 09 มีนาคม 2014, 13:51:08 ขอบคุณครับ เยี่ยม :wanwan031:
|