วันอังคารที่ 31 พฤษภาคม พ.ศ. 2554

สร้างธีม WordPress ใช้เอง ตอนที่ 1

เริ่มต้นกับ Theme

ก่อนอื่นก็คิดชื่อ Theme ที่จะสร้างขึ้นมาใหม่ เสร็จแล้วก็สร้าง folder โดยใช้ชื่อเดียวกับชื่อ theme ที่คิดจะตั้งชื่อ โดย folder ที่จะสร้าง theme ประกอบด้วยไฟล์ต่าง ๆ ดังนี้

  • functions.php
  • header.php
  • index.php
  • single.php
  • page.php
  • sidebar.php
  • footer.php

สร้าง stylesheet โดยตั้งชื่อว่า style.css และใช้ editor เปิดเพื่อ

วันศุกร์ที่ 15 เมษายน พ.ศ. 2554

แก้ไขเดือนและปีใน wordpress ให้เป็นเดือนภาษาไทย และปีภาษาไทย

การแก้เดือนภาษาไทยมีวิธีดังนี้

  1. ไปที่ folder wp-include –> locale.php
  2. หาคำว่า “//The Months” เป็นคอมเมนต์
  3. แก้ไขเดือนที่เป็นภาษาอังกฤษให้เป็นภาษาไทยให้หมด

editMonth1

รูปที่ 1 รูปก่อนการแก้ไข

editMonth2

รูปที่ 2 หลังการแก้ไข

การแก้ปีให้แสดงเป็นปีพุทธศักราชขึ้นอยู่กับ Theme ซึ่งค่อยมาเพิ่มเติม

วันพฤหัสบดีที่ 28 ตุลาคม พ.ศ. 2553

ดื่มน้ำเมื่อท้องว่าง ดีอย่างไร (เปลว สีเงิน)

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

มีการพิสูจน์จนยอมรับว่าสามารถบำบัดรักษาโรคเหล่านี้ได้ผล 100% (ค่อยเป็นค่อยไป ต้องใช้ระยะเวลา) ปวดหัว ปวดตามตัว โรคระบบหัวใจ โรคไขข้ออักเสบ โรคหัวใจเต้นเร็ว โรคลมบ้าหมู โรคอ้วน โรคหลอดลมอักเสบ โรคหืด และยูริก โรคแสสงคลื่นไส้ต่าง ๆ โรคกระเพาะ โรคท้องร่วง โรคริดสีดวง โรคเบาหวาน โรคอาการท้องผูก โรคตา โรคภายในสตรี มะเร็ว และรอบเดือนไม่ปกติ โรคคอ หู จมูก

วีธีการรักษาปฏิบัติดังนี้

  1. ตื่นนอนตอนเช้า ก่อนแปรงฟัน ให้ดื่มน้ำ 4 แก้ว (640 ซีซี)
  2. หลังจากนั้นสามารถแปรงฟันและล้างหน้าได้ แต่ต้องไม่ดื่มหรือรับประทานอะไรจนกว่า 45 นาทีผ่านไป จึงจะรับประทานได้ตามปกติ
  3. หลังรับประทานอาหารเช้า กลางวัน เย็น ไปแล้ว 15 นาที ต้องไม่ดื่มน้ำหรือรับประทานเลย จนกว่า 2 ชั่วโมงผ่านไป
  4. ผู้ป่วย หรือคนชรา ที่ไม่สามารถดื่มน้ำ 4 แก้ว ก็ขอให้ค่อย ๆ ดื่ม ค่อยเป็นค่อยไปเรื่อย ๆ จนได้ครบ 4 แก้ว

ข้อปฏิบัติ 4 ข้อดังกล่าวจะทำให้ท่านบำบัดรักษาโรคที่เป็นอยู่ ค่อย ๆ เบาและหายขาดได้ในที่สุด วิธีนี้ไม่มีผลข้างเคียงใด ๆ ทั้งสิ้น

ที่มา: คอลัมน์ เปลว สีเงิน หนังสือพิมพ์ไทยโพสต์ ฉบับวันพุธที่ 27 ตุลาคม พ.ศ.2553

วันพุธที่ 29 กันยายน พ.ศ. 2553

วันสบาย สบาย

ช่วง 2 – 3 อาทิตย์ที่ผ่านมา ห้องงานเทคโนโลสีสารสนเทศทำการขยายห้องใหม่ มีการกันห้อง ยกพื้น ปูพรม ทั้งเสียงดังและกลิ่นสี แต่ว่าไม่มีปัญหา ทนได้เพื่อห้องใหม่

พี่ณัฐเก๊กซะ

พี่ณัฐเก๊กซะ

สองหนุ่มหล่อ

สองหนุ่มหล่อ

สามหนุ่มสามมุม

สามหนุ่มสามมุม

chill chill

chill chill

CSS shorthand properties แบบต่าง ๆ

การใช้ CSS ที่ดีคือทำให้เวลาการโหลดสั้นที่สุด หนึ่งในวิธีที่นิยมคือการประกาศ property ของ css แบบสั้น (shorthand) นั่นเอง


Font


font: 1em/1.5em bold italic serif;

จากแบบเต็ม


font-size: 1em;
line-height: 1.5em;
font-weight: bold;
font-style: italic;
font-family: serif;

Background


background: #fff url(image.gif) no-repeat top left;

จากแบบเต็ม


background-color: #fff;
background-image: url(image.gif);
background-repeat: no-repeat;
background-position: top left;

Lists


list-style: disc outside url(image.gif);

จากแบบเต็ม


list-style: #fff;
list-style-type: disc;
list-style-position: outside;
list-style-image: url(image.gif);

ความจริงมีมากกว่านี้ ทั้ง Border, Margin & Padding แต่ใช้บ่อยเลยไม่ได้ใส่

วันพฤหัสบดีที่ 23 กันยายน พ.ศ. 2553

CSS Selector แบบต่าง ๆ

selector ใน css มีหลายแบบ แต่จะแนะนำอันหลัก ๆ ดังนี้

  1. Descendant Selector
  2. Parent-Child Selector
  3. Adjacent Selector
  4. Attribute Selector

โดยจะขออธิบายทีละอย่าง เริ่มกันเลย

1. Descendant Selector

Descentdant แปลโดย พจนานุกรม Longdo แปลว่า "ซึ่งสืบทอดมา", "ผู้สืบสกุล", "ทายาท" ซึ่งก็คือ การสืบทอดนั่นเองโดยมีตัวอย่างการใช้ดังนี้

CSS:

li em {
color: green;
}


แบบนี้จะเลือกทุก ๆ em ที่อยู่ภายใต้ li โดยเลือกทั้งหมดไม่ว่า em จะซ้อนด้วยแท็กอื่นอีกที ขอแค่ให้มี li ครอบอยู่ก่อนหน้านั้น



ใน HTML ข้างล่าง em ตัวแรกจะแสดงผลเป็นสีเขียว แต่ em ตัวที่สองจะเป็นสีปกติ



HTML:



<ul>
<li>Item One</li>
<li>Item <em>two</em></li>
</ul>
<p>An <em>italicized</em> words.</p>


2. Parent-Child Selector



มีตัวอย่างการใช้งาน ดังนี้



CSS:



body > p {
font-weight: bold;
}


แบบนี้จะเลือกเฉพาะ p ที่เป็น element ลูกโดยตรงของ body ไม่นับพวกที่โดนซ้อนอยู่อีกโดย tag อื่น



จาก HTML ข้างล่าง p ตัวที่ไม่อยู่ใน block ของ element ในที่นี้คือ <p id="para2">จะแสดงผลเป็นตัวหนา เพราะอยู่ติดกับ body แต่ p ตัวที่สองจะเป็นเป็นขนาดปกติ



HTML:



<body>
<div class="sidebar">
<p id="para1">This is the sidebar.</p>
</div>
<p id="para2">Welcome to the web site! Here's a list</p>
<ul>
<li>

<p id="para3">This is the first paragraph in the list. It's also the last.</p>


</li>
</ul>
</body>


การใช้ Parent-Child Selector ไม่รองรับกับ Internet Explorer 6 ดังนั้นก็แล้วแต่เป้าหมายของผู้ชมกลุ่มเป้าหมายละกาน



3. Adjacent Selector



Adjacent Selector เป็น selector ที่ไม่ใช้การสืบทอดเหมือนกับ Descendant Selector แต่เป็นตัวที่ติดกันในโค๊ด HTML ดังตัวอย่างด้านล่าง



CSS:



h1+h2 {
margin-top: 11px;
}


จากตัวอย่างเป็นการบอกให้ h2 ตัวแรกที่อยู่ติดกับ h1 มีช่องว่างด้านบน 11 px โดยดูตัวอย่างจาก HTML ดังนี้



<h1>This is important stuff!</h1>
<h2>First important item</h2>
<h2>Second important item</h2>


จาก HTML แท็ก h2 บรรทัดที่ 2 จะห่างจาก h1 ขนาด 11 px แต่จะไม่มีผลกับ h2 ในบรรทัดที่สาม



และอีกตามเคย ไม่ support Internet Explorer 6



4. Attribute Selectors



selector แบบที่ 4 นี้จะคล้ายกับการเขียนโปรแกรม โดยมีรูปแบบดังนี้



[attribute] จะเข้าเงื่อนไขคือกำหนด attribute ทั้งหมด



[attribute="value"] จะเข้าเงื่อนไขเมื่อมีการกำหนดค่าให้กับ attribute



[attribute~="value"] คือ attribute ใด ๆ ที่มีคำตรงกับค่าที่กำหนด จากการเว้นช่องว่าง



[attribute|="value"] คือ attribute ใด ๆ ที่มีคำตรงกับค่าที่กำหนด โดยใช้เครื่องหมายคำพูด



ตัวอย่างการใช้งาน ถ้าต้องการให้ textbox (<input type="text" />) มีตัวอักษรสีขาว และพื้นหลังเป็นสีดำ สามารถกำหนด CSS ดังนี้



input[type="text"] {
color: white;
background-color: black;
}


อีกซักตัวอย่าง



CSS:



div[class~="advertisement"]  {  
background: rgb(220, 220, 220);
width: 74em;
border: solid 0.02em rgb(200, 200, 200);
margin: 0 auto;
min-height: 5em;
}


HTML:



<div class="Advertisement promotion banner">
<p>Content goes here</p>
</div>


แค่นี้แหละ ขี้เกียจแระ

วันจันทร์ที่ 20 กันยายน พ.ศ. 2553

การทำ opacity โดยใช้ CSS

สำหรับ Internet Explorer

filter: alpha(opacity=60);

สำหรับ Firefox และอื่น ๆ ที่รองรับ CSS3

opacity: 0.6;

โดยแบบ CSS 3 จะเป็นจำนวนเท่า ถ้าจะให้ชัวร์ ก็ใส่ไปทั้ง 2 อันเลย


filter: alpha(opacity=60);
opacity: 0.6;