วิธีใช้ WordPress ตอนที่ 11 – WordPress Theme

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

วิธีใช้ WordPress : Themes

ที่เมนู Appearance จะมีหัวข้อ Themes อยู่ บริการรับทำเว็บไซต์ Wordpress

More..

วิธีใช้ WordPress ตอนที่ 10 – สร้างลิงก์

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

วิธีใช้ WordPress : สร้างลิงก์ในบทความ

ให้เราลากแถบเพื่อเลือกข้อความที่เราจะสร้างลิงก์ให้

More..

วิธีใช้ WordPress ตอนที่ 9 – วิธีติดตั้ง Plugins

หลังจากที่เราใช้งาน WordPress มาซักพัก เราคงรู้สึกอยากให้เว็บเรามีนั่นเพิ่ม มีนี่เพิ่ม ซึ่งสิ่งที่เราอยากได้เพิ่มนั้น ส่วนใหญ่ก็จะมีคนที่อยากได้สิ่งนั้นเพิ่มคล้าย ๆ กับเรา ก็เลยมีการทำออกมาเป็น Plugins

วิธีใช้ WordPress : หัวข้อ Plugins

More..

วิธีใช้ WordPress ตอนที่ 8 – วิธีใช้ Media Library

Media Library นั้นใช้บอกรายละเอียด และจัดการกับรูป เอกสาร ไฟล์เสียง ไฟล์วิดีโอที่เราได้เคยทำการอัพโหลดไว้ รวมถึงยังสามารถอัพโหลดเพิ่มเติมเข้าไปได้อีกด้วย โดยสามารถเข้าไปยัง Media Library ได้จากหัวข้อ Media

More..

วิธีใช้ WordPress ตอนที่ 7 – Embed Video ลงในบทความ WordPress

วิธีใช้ WordPress ตอนนี้เป็นการใส่วิดีโอลงในบทความ WordPress ของเรา ปัจจุบันวิดีโอส่วนใหญ่ที่เรานำมาลงในเว็บนั้น ก็คงไม่พ้นว่าเรานำมาจาก youtube หรืออาจจะเป็น vimeo แล้วเราจะใส่วิดีโอเหล่านี้ลงในเว็บ WordPress ของเราได้ยังไง

Embed Video จาก Youtube ลงในบทความ WordPress

สมมติว่าผมเปิดเจอวิดีโออันนึงใน youtube แล้วอยากนำมาลงในเว็บ ปรกติเราก็คงกดไปที่ share

More..

วิธีใช้ WordPress ตอนที่ 6 – ใส่รูปภาพในบทความ

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

เพิ่มรูปภาพในบทความ WordPress

บทความที่เราสร้างขึ้นมาใหม่ หรือบทความเก่าที่เราต้องการแก้ไข เราสามารถเพิ่มรูปภาพลงไปในบทความของเราได้โดยเลือกตำแหน่งที่จะลงรูปภาพ หลังจากนั้นคลิ๊กที่ icon เหมือนสี่เหลี่ยมผืนผ้าซ้อนกันตรงแถวคำว่า Upload/Insert

More..

วิธีใช้ WordPress ตอนที่ 5 – สร้างและแก้ไข Pages

Pages นั้นอย่างที่เคยบอกไป ว่าส่วนใหญ่เราจะใช้งานกับหน้าที่เป็น Static หรือหน้าที่เราไม่ค่อยเปลี่ยนแปลงเนื้อหาภายในบ่อย อย่างเช่น About Us, Contact Us เป็นต้น ซึ่งตัว Pages เองก็สามารถมี Subpages ได้ ยกตัวอย่างจากรูป จะเห็นว่า About Us จะมี Subpages เป็น Awards

More..

วิธีใช้ WordPress ตอนที่ 4 – มาหัดใช้ Categories กับ Tags กัน

ในการทำเว็บของเรานั้น Categories และ Tags เองก็เป็นส่วนสำคัญในการทำหน้าที่จัดระเบียบบทความของเรา

Categories

ลองมาดูว่า Categories มันปรากฎตรงส่วนไหนของหน้าเว็บเราบ้าง

More..

วิธีใช้ WordPress ตอนที่ 3 – แก้ไข Post ที่สร้างไปแล้ว

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

More..

วิธีใช้ WordPress ตอนที่ 2 – การสร้าง Post

ก่อนที่เราจะมาสร้าง Post ใหม่กันนั้น มาทำความรู้จักกันก่อนแล้วกัน ว่าระหว่าง Post กับ Page นั้นมันต่างกันยังไง

Post และ Page

ถ้าจะให้อธิบายให้เข้าใจง่าย ๆ ก็คิดว่า Post มันก็คือ บทความที่เราเขียน ซึ่งเราก็จะมีบทความใหม่ ๆ มาตลอดเวลา และในหน้าแรกก็จะเป็นส่วนนี้ ซึ่งตามปรกติ ถ้าเราเขียนบทความอันใหม่ มันก็จะมาปรากฎอยู่ด้านบนสุดของหน้าเว็บ

More..

วิธีใช้ WordPress ตอนที่ 1 – Dashboard

วิธีใช้ WordPress ในส่วนของ Dashboard ซึ่งการที่เราจะเข้าถึงส่วนของ Dashboard ได้นั้น เราสามารถเข้าได้โดย

• ถ้าลง WordPress แล้วยังไม่ได้เปลี่ยน Theme ในส่วนของหน้าแรกจะมี Link ให้คลิ๊กเพื่อเข้าสู่หน้า Login
  

More..

CSS : มารู้จัก Float กัน

float จะมี property 4 ตัว คือ

float

• left ก็คือ สั่งให้ลอยชิดซ้าย
• right คือ สั่งให้ลอยชิดขวา
• inherit คือ ค่าที่สืบทอดมา
• none คือ ไม่ต้องลอย [ซึ่งปรกติ element ทั่วไปจะเป็น none]

ลองมาดูตัวอย่างของคำสั่ง float แล้วกัน ว่ามันใช้งานแล้วได้ผลลัพธ์เป็นแบบไหน

More..

inherit คืออะไร

หลาย ๆ คนใช้งาน CSS มาอาจจะเคยใช้ inherit บางคนอาจจะเคยเห็นแต่ไม่เคยใช้ บางคนอาจจะไม่เคยเห็นเลยด้วยซ้ำ

มาทำความรู้จักกับ inherit ดีกว่าว่ามันคืออะไรนะ แต่ก่อนจะรู้จัก inherit เรามาดูก่อนว่าเวลาเราเขียน CSS เนี่ยแต่ละส่วนมันเรียกว่าอะไรกันบ้าง

More..

อยากรู้จริงว่า CSS เราถึงขั้นไหนแล้ว

ปรกติทุกวันก็นั่งดูเว็บนั่นเว็บนี่ หาความรู้ใส่ตัว แล้ววันนึงก็ไปสะดุดกับ Banner ตัวนี้

More..

CSS : z-index ใช้งานอย่างไร

คนที่ศึกษา CSS มาซักพัก น่าจะเจอกับคำว่า z-index ครั้งนี้ผมจะมาแนะนำว่า z-index นั้นใช้ทำอะไรกันแน่ แล้วมันใช้งานอย่างไร

z-index

เริ่มต้นผมมี Code HTML กับ CSS แบบนี้นะครับ

More..

CSS : พัฒนาการเขียน HTML และ CSS กัน [Slide]

เมื่อวันที่ 3 – 5 ตุลาคมที่ผ่านมา ที่ลอนดอนประเทศอังกฤษมีงานประชุม Future of Web Apps ซึ่งคุณ Chris Coyier นั้นพูดในหัวข้อ Writing Better HTML & CSS เราจึงนำ Slide ที่เค้าใช้ในงานมาแบ่งปันกันครับ

More..

CSS : อะไรคือ CSS Reset

หลายคนอาจจะสงสัยว่า CSS Reset มันมีไว้ทำอะไร มีไว้เพื่ออะไร งั้นเรามาทำความรู้จักกับมันกัน CSS Reset นั้นก็มีไว้สำหรับล้างค่า style ต่าง ๆ ของแต่ละ element ซึ่งก็จะมีคำถามตามมาว่า แล้วเราจะล้างค่ามันทำไม สาเหตุมันก็มาจากว่า แต่ละ Browser ที่เราใช้ ๆ กันอยู่นั้น จะมีค่าเริ่มต้นของแต่ละ element ไม่เหมือนกันครับ ถ้ายังงง ๆ อยู่ มาดูตัวอย่างกันนะครับ

More..

CSS : ใช้งาน Position กันอย่างไร

ทำงานกับ CSS มาซักพัก น่าจะได้พบเจอกับ Position กันบ้าง แต่เข้าใจการใช้งานมันกันขนาดไหน เอาเป็นว่า เรามาทำความเข้าใจไปด้วยกันเลยนะครับ

CSS : Position นั้นมีอะไรบ้าง

• static
• relative
• absolute
• fixed
• inherit

คราวนี้ผมจะลองเขียน Code แบบนี้นะครับ

1	<div id="wrapper">

2	<div id="div-1">div-1</div>

3	<div id="div-2">

4	<div id="div-a">div-a</div>

5	<div id="div-b">div-b</div>

6	<div id="div-c">div-c</div>

7

</div>

8	<div id="div-3">div-3</div>

9

</div>

1	div {padding:20px;color:#FFF;}

2	#wrapper {width:400px;}

3	#div-1 {background:#000;}

4	#div-2 {background:#C0C;}

5	#div-3 {background:#666;}

6	#div-a {background:#339;}

7	#div-b {background:#66C;}

8	#div-c {background:#99F;}

ซึ่งจะแสดงผลดังรูป

จาก Code ที่เขียน เราจะได้เว็บดังรูป

Position : static

position : static นั้นถือเป็นค่าเริ่มต้นสำหรับ position เลย ดังนั้นเราจะตั้งค่า position หรือไม่ ค่า position ก็จะเป็น static อยู่แล้ว แต่ผมจะลองใส่ค่าให้ดูเป็นตัวอย่างว่า เว็บจะแสดงผลออกมาเป็นแบบไหน

1	#div-a {background:#339;position:static;}

ผลลัพธ์จากการตั้ง #div-a ด้วย position:static

จะเห็นว่าไม่มีความเปลี่ยนแปลงใด ๆ เนื่องจากอย่างที่ได้กล่าวไว้ เพราะค่า position นั้น มีค่าเริ่มต้นเป็น static อยู่แล้ว static

Position : relative

position : relative นั้นจะมีลักษณะคล้าย ๆ กับ static ต่างกันตรงที่ relative นั้น เราสามารถใช้ top left bottom right ในการกำหนดตำแหน่งได้

1	#div-a {background:#339;position:relative;}

position : relative ที่ยังไม่ได้กำหนดตำแหน่ง แสดงผลออกมาเหมือนกับ position : static

คราวนี้เรามากำหนดตำแหน่งให้มันกัน โดยตำแหน่งที่ระบุไป จะเริ่มต้นนับจาก element ที่อยู่ก่อนหน้า เรามาลองกับ #div-2 นะครับ น่าจะเห็นผลชัดเจนกว่า

1	#div-2 {background:#C0C;position:relative;top:30px;left:-20px}

2	#div-a {background:#339;}

More..