๏ palermos cafe ๏

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

มาเอนทรี้นี้ผมจะมาแนะนำการแปลงธีมแจกฟรีใน Wordpress ซึ่งเป็น Weblog Engine ที่ได้รับความนิยมอย่างสูง จากผู้ใช้ และบรรดาสแปมเมอร์ (จริงป่ะละ) เนื่องจากใช้งานง่าย มีทีมงานพัฒนาอย่างต่อเนื่อง ปลั๊กอินเสริมเพียบทั้งดีๆ และที่กากๆ ก็มีเยอะ (บางตัวก็ติดตั้งยาก เหมือนไม่อยากให้เราใช้) และที่สำคัญที่สุด คือ ธีมเยอะมากๆครับ

มาลองดูธีมตัวอย่างที่โดนใจผม สัก 3ธีมกัน

1. Coffee Desk ผู้ออกแบบคือ  Roam2Rome

หน้าตาไฮโซผมชอบไอเดียที่เขาเอาคีย์บอร์ดของMac มาวางประดับบล็อกนั่นแหละ มันสวยดี (ถึงจะไม่มีประโยชน์เลยก็ตามที) น่าลอกมาใช้มากๆ

2. Desk Mess ผู้ออกแบบคือ Geek With Laptop

หน้าตาคล้ายๆตัวบนนะ สงสัยว่าฝรั่งจะลอกกันมามั้ง...

3. Pink Sunset ผู้ออกแบบคือ Viktor Persson

ธีมนี้ผมชอบพื้นหลังของเขา และออกแบบได้เรียบง่ายแต่เต็มไปด้วยจิตวิญญาณ...

เอามาให้ดู 3 ธีมนี้ก่อนนะครับ

แหล่งแจกธีมฟรีสำหรับ wordpress นอกเหนือไปจากนี้ที่ผมเข้าไปส่องประจำก็มี

• Arcsin Web Templates
• CSS Creme
• TemplateLite.com
• Fresheezy!
• Free Theme Layout แนะนำโดยคุณ แม่บ้านนะยะ

ลองเข้าไปหาแรงบันดาลใจในการออกแบบธีมกันดูนะครับ

ผมจะสาธิตการขโมยธีม เอ้ย..แปลงธีมไว้ใช้ใน Exteen กัน แม้ว่าเขาออกแบบมาเพื่อใช้บน Wordpressก็ตามที งานนี้ไม่ยากนะครับ ต้อง 1.อาศัยพื้นฐาน CSS เล็กน้อย 2.ความเข้าใจในโครงสร้างของธีม exteen ... และ ตัวช่วยโกง(ไม่มีก็ได้)

จะขอแนะนำเว็บเพื่อการปูพื้นการเขียน cssไว้สักสามเว็บนะครับ

1.  w3schools   2. Tizag Tutorials   3.  Divland.com

เอนทรี่เก่าๆของเพื่อนสมาชิกที่ทำการชำแหละโครงสร้างธีม exteen

• โครงสร้าง Theme ของ Exteen อย่างละเอียด :xvista
• โครงสร้าง theme แบบใหม่อย่างคร่าวๆ : tukkae
• ก่ง ก๊ง กับ css อยู่ 2 วัน : sora no hime

ยังมีคนชำแหละมากกว่านี้ด้วยมั้ง แต่ผมจำไม่ได้ ถ้าใครจำได้ช่วยบอกเสริมด้วยเน้อ

และจะให้ดีต้องมีเครื่องมือช่วยโกงการแต่งธีมอย่าง Web Developer (บล็อกผมมีสอน: ใช้ Web Developer แต่งบล็อกอย่างเทพ) หรือ Firebug ก็ได้ ตัวช่วยทั้งสองตัวนี้เป็น Add-on ของเว็บเบราเซอร์ Mozilla Firefox นะครับ เห็นไหมว่า..หมาไฟนอกจากจะดูเว็บได้มาตรฐานแล้ว ยังมีเครื่องมือช่วยแต่งธีมได้อีกต่างหาก

เมื่อมีทุกอย่างข้างต้นแล้วลุยเลยดีกว่า ผมจะเริ่มจากธีม Simple นะครับ จะสอนการแก้เฉพาะเล็กๆน้อยเอาไว้เป็นไอเดียกัน  อ่อ...ไม่ได้กั๊กหรอก ผมกลัวเอนทรี่จะยาวไป เพราะเพิ่งบอกว่าไม่ควรเขียนบล็อกยาวไปไม่ดี ไปในเอนทรี่ก่อนนี้ไง อิอิ

1.ตรวจของ! เริ่มจากการดาวน์โหลดฟรีธีมมาก่อน แล้วก็แตกไฟล์เพื่อดูของ

ลองวางแผนชั่วคร่าวๆ ว่าจะแปลงยังไงนะครับ ว่าตรงไหนเป็น header, content บางครั้งเราอาจจะต้องมีการสร้างภาพ (ในโฟโตชอป) กันบ้างเน้อ

2. เมื่อเห็นว่าของครบ ก็ขอจัดการกับ background ก่อนนะครับ

ก็เอาไฟล์ของที่เขาแจกมานั่นแหละ ฝากโฮสต์ไว้ แล้วก็ใช้ web developer หรือ firebug ดัดแปลง css แทนที่จะทำบน theme editor ของ exteen

#background {url(ที่ฝากไฟล์)}

3. ตามด้วย #header

ในส่วนนี้เราต้องสำรวจก่อนว่าไฟล์รูปที่จะนำมาทำเป็น header  มีขนาดเท่าไหร่ จากที่เขาแจกมามีความกว้าง 980px สูง 340px เราก็ต้องแก้ css ขยายบล็อกรอก่อนเลย

#page{
    margin:auto;
    text-align:left;
    width:1000px;
}

#header, #neck, #belly, #leg, #footer{
    float:left;
    width:1000px;
}

และก็แก้ #header  ต่อ

#header{
    background:url(ที่ฝากไฟล์ header);
    margin-left:5px;
    padding:0px;
    width:990px;
    height:340px;}

และก็ซ่อน #coverimage ด้วยนะ

#coverimage{
    background:transparent;
}

ส่วน h1 กับ h2 ผมซ่อนไว้ก่อน เพราะจะแปลงเลย์เอาท์ก่อน ซ่อนด้วยการแทรก display:none ไปก่อนแล้วค่อยมาแก้ตอนหลัง

4. ปรับ #neck ในส่วนนี้ผมก็หาทางลงนานอยู่เหมือนกันครับ เพราะมันประกบกันไม่สนิทสักที บร๊ะ.. ก็เลยถึงบางอ้อว่าเขาแยกเป็นสองส่วน ด้วยความขี้เกียจปรับposition ผมเลยเอารูปที่เขาให้ฟรีมาประกบกันซะเลย

#neck{
    background:url(ที่ฝากไฟล์ neck) top no-repeat;
    margin-left:5px;
    width:990px;
    height:75px;
}

5.ในส่วนของ belly ที่แปลว่า"พุง" ผมใช้ไฟล์ที่เขาแจกมาสองตัว ตัวแรกเป็นพื้นหลัง

#belly{
    background:url(ที่ฝากไฟล์ desk) repeat-y;     margin-left:5px;
    width:990px;
}

และ

#content{
    background:url(ที่ฝากไฟล์ postbg) repeat-y;
    display:inline;
    float:left;
    margin:0px 15px 0px 24px;
    padding:10px 15px;
    width:620px;
    /*Fix too large image makes content drop problem in IE*/
    overflow:visible !important;
    overflow:hidden;
}

ธีมนี้ต้องปรับ padding ให้ตัวหนังสืออยู่ในกรอบ postbg (พื้นสีขาวนั่นแหละ) โดยpostbg.jpg ตัวนี้ต้องทำซ้ำในแนวตั้ง  ลองมาดูรวบเลยนะครับ

ส่วนเอนทรี่

ปรับ #sidebar นิดหน่อย

หน้าตาโดยรวม

กลายเป็นธีมในบล็อก Exteen แล้ว

และส่วนที่เหลือก็ลองปรับจูนกันเองนะครับ หากถ้ามีเครื่องมือช่วยโกงธีมอย่าง Firebug หรือ Web Developer งานนี้ไม่ยากเลย เพราะผมก็ทำใน Firebug นะ อิอิ... เวลาแต่งธีมผมทำใน Firebug หรือ Web developer ก่อนเสมอครับ ตามแต่อารมณ์ แล้วค่อยเอา โค้ด css ที่แต่งใน Firebug หรือ Web developer ไปแปะใน Theme Editorทีเดียว... ดังนั้นใช้ Firefox กันเถอะ

และสำหรับธีมนี้ ตัวที่เกือบเต็ม? (ตอนผมตรวจก่อนปล่อยให้ลองใช้กัน ปรากฏว่าเจอบัคใน IE7 เพียบเลยต้องมานั่งแก้ ทั้งๆที่ส่องบนหมาไฟ กับ Opera ผ่านนะ เฮ้อ I hate IE..)

http://www.mediafire.com/?tx0zztxdrwo

• ใช้งาน#sidebar ได้ข้างเดียว
• ไม่รองรับการใส่ module ลงใน #leg  แต่ก็ปรับแก้ได้ไม่ยากครับ
• มีกรอบให้รูปที่โพสด้วย

ใครลองเอาไปใช้แล้ว ถ้าชอบใจกด 1 ไม่ชอบใจ กด2 ส่งกันเยอะๆ ที่เบอร์....เย้ยย ไม่เกี่ยวนะ

และก่อนจบ.. ผมขอแถมท้ายแนวคิดในการออกแบบบล็อกให้อ่านกันดูเล่นๆนะครับ

• แนวทางการดีไซน์บล็อกยุคใหม่