สอนเล่น Wordpress

Vee · 05 พ.ค. 2005, 23:25 น.

// ขอญาตน้องจานวี เพิ่มเติมแก้ไขข้อมูลในโพสต์นี้ให้ใหม่สดเสมอนะครับ

(ยักษ์แอน)
(ลิงก์บางอันถ้าหมดอายุแจ้งได้นะครับ)

Wordpress

การติดตั้ง
- วิธีติดตั้ง Wordpress (ลิงก์ไปที่ iDayblog.com)
- ติดตั้งลงในเครื่องตัวเอง (Local Host) เพื่อทดสอบการทำงาน

ทริกต่างๆ
- ส่วนประกอบต่างๆของธีม **
- วิธีการทำให้ comment มีตัวเลขเรียงกันเป็นตับ
- วีธีโชว์ Recent Post (10 โพสล่าสุด ฯลฯ) (คำอธิบายภาษาไทย)

ปลั๊กอิน
ถ้ามีข้อสงสัยใดๆ เกี่ยวกับปลั๊กอินต่างๆ ของ วพ หรืออยากได้ความสามารถสารพัดที่ไม่รู้จะทำยังไง..
ให้อ่านนี่ สุดยอดรวมลิงก์ "ฉันอยากได้ปลั๊กอินที่แบบว่า...." ที่นี่มีคำตอบ!!!
หรือหาอ่านที่ตูเก็บไว้ในแอนอร่อยได้ที่ http://delicious.com/iannnnn/wordpress plugin

- fArc ดูของเก่าแบบเป็นลิสต์ มาแทน DC's Nicer เจ้าปัญหา
- Extended Live Archive/วิธีลง ดูของเก่าแบบไฮโซค่ะ (ajax)
- Clean Archives Reloaded, Binary Bonsai's, hitormiss ตัวแสดง archives เช่นเดียวกันค่ะ
- PageBar แสดงจำนวนหน้าสำหรับดูโพสต์ในบล็อก
- ทำให้หน้าตาเมื่อตอน login เข้าระบบให้สวยงาม
- Challenge ป้องกันสแปมโดยการเพิ่มช่องคำถามมาช่องนึง
- WP AJAX Edit Comments บุคคลทั่วไปสามารถแก้ไขได้ หลังจากโพสต์คอมเม้นท์ตัวเองแล้ว (ขอบคุณพี่แอนค่ะ)
- Audio Player ใส่ตัวเล่นเพลงในโพสต์ วพ
- WP lightbox JS WordPress plugin ดูรูปภาพแบบใหม่
- WS ToolTips ไว้แสดง tooltips/bubbles ของ alt/title โค๊ด html ต่างๆ (ขอบคุณพี่นินค่ะ)
- Snap เอาเมาส์ชี้ที่ลิงค์จะมี bubble ขึ้นมาแสดงแคบเจ้อร์ของหน้าตาลิงค์นั้น

ธีม
- เล่นกับ CSS ช่วยในการแต่งธีม
- Weblog Tools Collection
- themes.wordpress.net
- alexking.org: Wordpress Theme Browser

หรือหาอ่านที่ตูเก็บไว้ในแอนอร่อยได้ที่ http://delicious.com/iannnnn/wordpress theme

อื่นๆ
- Wordpress.org
- Support Forums
- Codex [documentation]
- Wordpress.com: บริการบล็อก ชื่อของเรา.wordpress.com

โบนัส

http://easywpguide.com/

เว็บสอน WordPress อย่างละเอียดทุกขั้นตอน เหมาะมากสำหรับมือใหม่ อัปเดตทันสมัยอยู่เสมอ
มีทั้งแบบอ่านออนไลน์และแบบโหลดลงเครื่องไปอ่านออฟไลน์เลย

agara · 05 พ.ค. 2005, 23:30 น.

ทำธีมเสร็จแล้ว (แค่สมมติ)
ขอโค้ด

Vee · 05 พ.ค. 2005, 23:31 น.

http://freepgs.com/veeblog/blog/wp-content/themes/default

นั่นละโค๊ดมัน

ooooo · 05 พ.ค. 2005, 23:33 น.

โค้ด

Vee · 05 พ.ค. 2005, 23:57 น.

How to create theme in Wordpress1.5
เอาก็เอา - -'

เตรียม template ของเราไว้ก่อนนะ พิมพ์เตือนความจำไว้ ตรงที่อยากให้มีโพส มีส่วนของsidebar

เข้า Ftp
. สร้างโฟลเดอร์ขึ้นมาใหม่ ตั้งชื่อเป็นชื่อธีมของเรา ใส่ไว้ใน wp-content/themes/
แล้วก๊อบไฟล์จาก themes/default มาใส่เข้าไป (เป็นฐานไว้ก่อน)
เข้าไปที่ ระบบ แอดมินของ wordpress เลือก Presentation > Themes ให้activate ธีมใหม่ก่อน (เข้าใจว่ายังงั้น ไม่แน่ใจเหมือนกันแฮะ) แล้วไปที่ Theme Editor แล้วเลือกชื่อธีมของเรา
. มันก็จะมีไฟล์
theme files
Stylesheet < css ไฟล์นั่นเอง
Archives
Comments Template <แก้ไขในส่วนของคอมเมนต์ แล้วก็อะไรพวกเนี้ยแหละ - -'
404 Template
Footer Template
Header Template
Archive Template
Search Template
searchform.php
Popup Comments Template < คิดว่าน่าจะเหมือนกับ comments template นะคะ แต่ว่ามันเป็นป๊อบอัพไง
Main Template < index.php
Links
Page Template
Sidebar Template
Post Template

หลักการของมันคือ หน้า main template จะเป็นหลัก แล้วใช้เรียกส่วนต่างๆออกมา
... เริ่มเลยนะ

.เปิดไฟล์ header template
ตั้งแต่บนสุดจนถึงแท็ก <body> ถ้าไม่วุ่นวายวีคิดว่าไม่ต้องปรับก็ได้
(ก็คือ ตรงแท็ก ตั้งแต่ <head> ถึง </head> ในเทมเพลตเรา มีจาวา หรืออะไรก็ยัดลงไปก่อน)
พอตั้งแต่ <body> ลงไป ให้ลบทิ้งหมดเลย ก๊อบhtmlของเรามา ก๊อบมันจนถึงที่เราพิมพ์ละไว้ว่าตรงนี้เราจะใส่โพสแล้วนะ

(ค้างไวแค่นี้ก่อนแล้วจะมาพิมพ์ต่อ)
(อ่านไม่รู้เรื่อง บอกด้วยนะ T^T)

Vee · 06 พ.ค. 2005, 00:21 น.

เอาเข้าไป ไม่ให้เรียก แต่จะเรียกอีก

ภาคสอง

. เปิดไฟล์ main template
มีตัวแปรสามตัว
<?php get_header(); ?> = เรียกข้อมูลจากไฟล์ header ที่เราปรับเมื่อกี้
<?php get_sidebar(); ?> = เรียกข้อมูลจาก sidebar.php
<?php get_footer(); ?> = เรียกข้อมูลจาก footer.php
+++++
.มีอยู่สองวิธี
วิธีแรก ใช้โครงของโพสเดิม (คล้ายๆของพี่แอน)
วิธีที่สอง ทำเองใหม่หมด (เหมือนของวี เน่าๆงั้นน่ะ = ='')
+++++
แน่นอนว่าต้องใส่ <?php get_header(); ?> เข้าไปบนสุด
. ถ้าเกิดเราออกแบบมา มี sidebar อยู่ก่อนโพส (ดูจากโค๊ดอ่ะค่ะ ว่าโค๊ดไหนมาก่อน) เราก็ใส่ sidebar ต่อลงมา จาก header ประมาณว่า

โค้ด เลือกทั้งหมด

<?php get_header(); ?>
<?php get_sidebar(); ?>
"ใส่โพส" (ขอละไว้ก่อน จะอธิบายต่อมา)
<?php get_footer(); ?>

. แต่ถ้าออกแบบมา sidebar อยู่ข้างหลังโพส (แน่นอนว่าต้องดูจากโค๊ดนะคะ) ก็

โค้ด เลือกทั้งหมด

<?php get_header(); ?>
"ใส่โพส" (ขอละไว้ก่อน จะอธิบายต่อมา)
<?php get_sidebar(); ?>
<?php get_footer(); ?>

. แต่ถ้า ไม่มี sidebar เลย (กรณีนี้เราอาจจะยัดมันลงไปที่ header หรือ footer ไปทนก็ได้)

โค้ด เลือกทั้งหมด

<?php get_header(); ?>
"ใส่โพส" (ขอละไว้ก่อน จะอธิบายต่อมา)
<?php get_footer(); ?>

ความหมายของ"ใส่โพส"
( - -')
ต้องเข้าใจว่า มันจะมี ตัวเปิด กับ ตัวปิด ประมาณว่า (ต้องให้เข้าใจก่อนนะ ไม่งั้นพอไปทำธีมแปลกๆแล้วจะงง)

โค้ด เลือกทั้งหมด

<!--เริ่มต้น--!>
โพสที่หนึ่ง เมื่อ 6 พ.ค. 48 เวลา 0:21AM
เนื้อหาของโพสที่หนึ่ง
โพสใน บันทึกประจำวัน โดย วี | 1 คอมเม้นท์
<!--สิ้นสุด--!>

โค้ด เลือกทั้งหมด

<!--เริ่มต้น--!>
โพสที่สอง เมื่อ 5 พ.ค. 48 เวลา 0:21AM
เนื้อหาของโพสที่สอง
โพสใน บันเทิง โดย แอ๊น | 2 คอมเม้นท์
<!--สิ้นสุด--!>

. ตัวเปิด (หรือ เริ่มต้น นั่นเอง)

โค้ด เลือกทั้งหมด

<?php if (have_posts()) : ?>
<?php while (have_posts()) : the_post(); ?>

. ไตเติ้ล (โพสที่หนึ่ง/โพสที่สอง)

โค้ด เลือกทั้งหมด

<?php the_title(); ?>

. วันที่ (6 พ.ค. 48)

โค้ด เลือกทั้งหมด

<?php the_date('Y-m-d'); ?>

. เวลา (0:21AM)

โค้ด เลือกทั้งหมด

<?php the_time('F jS, Y') ?>

. content (เนื้อหาของโพสที่หนึ่ง)

โค้ด เลือกทั้งหมด

<?php the_content(); ?>

. หมวดหมู่ (โพสใน บันทึกประจำวัน / โพสใน บันเทิง)

โค้ด เลือกทั้งหมด

<?php the_category(', ') ?>

. ผู้เขียน (โดย วี)

โค้ด เลือกทั้งหมด

<?php the_author() ?>

. คอมเม้นท์ (2 คอมเม้นท์)

โค้ด เลือกทั้งหมด

<?php comments_popup_link('No Comments »', '1 Comment »', '% Comments »'); ?>
(สามารถแก้ได้ อย่างเช่น 'ไม่มีคอมเม้นท์', '1 คอมเม้นท์', '% คอมเม้นท์' )

. ตัวปิด ( สิ้นสุด )

โค้ด เลือกทั้งหมด

<?php endwhile; ?>

. ใส่ไปด้วย เพื่อผลดี - -'

โค้ด เลือกทั้งหมด

<div class="navigation">
			<div class="alignleft"><?php posts_nav_link('','','&laquo; Previous Entries') ?></div>
			<div class="alignright"><?php posts_nav_link('','Next Entries &raquo;','') ?></div>
		</div>
		
	<?php else : ?>

		<h2 class="center">Not Found</h2>
		<p class="center"><?php _e("Sorry, but you are looking for something that isn't here."); ?></p>
		<?php include (TEMPLATEPATH . "/searchform.php"); ?>

	<?php endif; ?>

// ตรงที่ Previous / Next Entries เป็นลิงค์ ลิงค์ไปที่โพสก่อนๆ
// ส่วนตรง Not Found เผื่อไว้อะไรผิดพลาด
// สามารถแก้ได้นะคะ ลองดูดีๆในส่วนนี้

ลูกเล่นของ แต่ละแท็กยังมีอีกเยอะ ลองคลิกไปดู http://codex.wordpress.org/Template_Tags

ภาคสามมาต่อเรื่อง sidebar กับ footer ค่ะ
(เมื่อยแฮะ)

iannnnn · 06 พ.ค. 2005, 00:28 น.

ตูหลงรักจานวีมาตั้งนานแล้ว

ป.ล.ของพี่เอาดิบๆ แหละ ขี้เกียจแก้มาก ..เป็นโรคแลัวมันไม่คอมแพทติเบิ้ล

Vee · 06 พ.ค. 2005, 00:50 น.

ยังอยู่กันรึเปล่าาา

ภาคสาม

Cuztomize your Sidebar
อันนี้บอกก่อนเลยว่าไม่เคยยุ่งกับมัน เพราะตั้งแต่เริ่มใช้ wp1.5 ก็ไม่เคยทำบล็อกแบบมาตรฐานมาก่อน (แบบป๊อบอัพ ขนาดพิเศษ ซะส่วนใหญ่)
แต่ก็พอรู้จัก
. เปิด Sidebar Template เลยค่ะ
วิจะอธิบายไปทีละส่วนนะคะ ส่วนที่วีไม่อธิบาย คือส่วนไม่สำคัญ ตัดทิ้งได้เลย
โอ๊ะ... ขอแทรกก่อน ตรงนี้ให้แทรกในส่วนของhtml ไปก่อนเลยนะคะ แล้วใส่html ตอนจบไปด้วยก็ได้(เผื่อมี </td></tr> อะไรเงี้ยไงคะ)

โค้ด เลือกทั้งหมด

<?php include (TEMPLATEPATH . '/searchform.php'); ?>
// เป็น Search Form ไปปรับกต่งมันอีกทีได้ที่ Search Template กับ Searchform (ที่บอกไว้สอง คือไม่แน่ใจ ไม่เคยใส่แฮะ)

โค้ด เลือกทั้งหมด

<?php _e('Author'); ?>
// อันนี้เป็นตัวแปรเพื่อจะโชว์ชื่อของเรา ถ้าเราใส่ไป มันก็จะโชว์ Vee หรืออะไรประมาณนี้แหละค่ะ ไม่ใช้ก็ได้ ไม่ค่อยสำคัญ

หลังจากตรงนี้ จะเป็นส่วนของ Archive วีดูแล้วงงแฮะ เอาอันนี้ไปดีกว่า
http://codex.wordpress.org/Template_Tags/wp_get_archives
http://codex.wordpress.org/Template_Tags/get_archives
ถูกใจอันไหนก็เอาไปใส่ได้เลยค่ะ
คิดว่าไม่น่าจะยากนะคะ

หรือไม่ก็ ใช้โค๊ดพื้นฐาน

โค้ด เลือกทั้งหมด

<?php wp_get_archives('type=monthly'); ?>

โค้ด เลือกทั้งหมด

<?php list_cats(0, '', 'name', 'asc', '', 1, 0, 1, 1, 1, 1, 0,'','','','','') ?>
Categories หรือหมวดหมู่เองค่ะ
ไอ 1 0 1 1 1 1 0 พวกนี้ ไปดูรายละเอียดของมันที่
http://codex.wordpress.org/Template_Tags/wp_list_cats

โค้ด เลือกทั้งหมด

<?php get_links_list(); ?>
รายชื่อลิงค์ของเรา เราไปเพิ่มเติมลิงค์ได้ที่ wp-admin > links
แล้วก็ปรับลูกเล่นของมันที่
http://codex.wordpress.org/Template_Tags/get_links_list

โค้ด เลือกทั้งหมด

<?php wp_register(); ?>
// สำหรับสมัครสมาชิก
// ถ้าเกิดเราล็อกอินแล้ว ตรงนี้จะเป็นลิงค์เพื่อไปส่วนของแอดมิน

โค้ด เลือกทั้งหมด

<?php wp_loginout(); ?>
// เป็นลิงค์ ล็อกอิน และ ล็อกเอ้าท์ ค่ะ

โค้ด เลือกทั้งหมด

<a href="http://wordpress.org/" title="<?php _e('Powered by WordPress, state-of-the-art semantic personal publishing platform.'); ?>">WordPress</a>

// ให้เครดิต wordpress ค่ะ

โค้ด เลือกทั้งหมด

<?php } ?>
// อันนี้คือไรหว่า ไม่รู้จั ใส่ไปเผื่อๆละกันนะคะ

// หลายๆส่วนจากตรงนี้ หาลูกเล่น(แพรวพราว)ของมันได้ที่ http://codex.wordpress.org/Template_Tags

Footer Template
ให้ใส่อะไรที่เหลือลงไปตรงนี้

วีว่ายกตัวอย่างจะง่ายกว่าไหม
ถ้าเกิดเรามีดีไซน์ไว้แล้วเช่น
<table width="100%" border="0" cellspacing="0" cellpadding="0">
<tr>
<td colspan="2"><div align="center">vee's diary</div></td>
</tr>
<tr>
<td width="77%">post</td>
<td width="23%">sidebar</td>
</tr>
</table>
ส่วนสีแดง เอาไปใส่ต่อจาก <body> ในheader template
ส่วนสีเขียว เอาไปใส่ข้างบนสุดตรง sidebar template แล้วตรง คำว่า sidebar ก็ใส่อะไรที่เราอยากใส่ลงไป
ส่วนสีส้ม ไว้ใส่ ตรง footer template

เทมเพลตนี้ เป็นแบบ

โค้ด เลือกทั้งหมด

<?php get_header(); ?>
"ใส่โพส" 
<?php get_sidebar(); ?>
<?php get_footer(); ?>

นะคะ

พี่แอนเอารูปวีมาเผยถึงนี่เลยเรอะ
ขอบคุณสำหรับจพส. นะคะ

สงสัยถามได้
(มักจะพูดยังงี้เสมอ ไม่ค่อยมั่นใจว่าตัวเองพิมพ์รู้เรื่องรึเปล่า

)

ooooo · 28 พ.ค. 2005, 02:40 น.

ขุดขึ้นมา อยากถามว่าจะใส่ emotion ลงในบล็อกทำยังไง

iannnnn · 28 พ.ค. 2005, 23:37 น.

ฮั่นแน่.. แอบไปทำบล็อกที่ไหนมารึ

ก็หาปลั๊กอินมาลงไง
ชื่อ : WP Grins
โหลด : www.alexking.org/software/wordpress/1.2/wp-grins.zip
ค่าตอบแทน : +1

iannnnn · 28 พ.ค. 2005, 23:39 น.

โอว ตีมจำนวนมหาศาลไว้สร้างแรงบันดาลใจ
www.alexking.org/software/wordpress/themes/blog

Vee · 28 ส.ค. 2005, 22:13 น.

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

อ้ะ.. อ่านให้จบก่อนแล้วค่อยเริ่มทำ เพราะวีเขียนวนไปวนมา

http://codex.wordpress.org/Upgrading_WordPress อ่านตรง Before you start สิ่งที่เราต้องทำก็คือ
- แบคอัพ db ที่ phpmyadmin
- แบคอัพไฟล์ทั้ง เผื่อพลาด (อันนี้ไม่ต้องทำก็ได้ถ้ามั่นใจว่าจะไม่ลืมพวกที่เรายัดปลั๊กอินลงไป)
- ไป deactivate ปลั๊กอินที่เราลงไปทั้งหมด

เสร็จแล้วก็ทำตามวิธีนี้ค่ะ http://codex.wordpress.org/Upgrading_WordPress#Upgrade_1.5.1.2_to_1.5.2 (สำหรับคนที่ลง 1.5.1 เท่านั้น) ซึ่งก็คือ
- ลบโฟลเดอร์ wp-admin และ wp-includes
- ลบไฟล์ทั้งหมดใน root directory ของ wordpress ยกเว้น wp-config.php นะคะ
- อัพโหลดไฟล์/โฟลเดอร์ของรุ่นที่เราลบไปเมื่อตะกี้ แต่ว่าเป็นเวอร์ชัน 1.5.2 แทนนะคะ
- ลองเปิดดู แล้วก็ activate ปลั๊กอินใหม่ค่ะ

เมื่อเสร็จแล้ว

พิเศษสำหรับพี่แอน

(เี่กี่ยวกับปลั๊กอิน)
- พี่แอนเปิด vars.php อันเก่า (1.5.1.x) ก๊อบตรงส่วน emoticon ของพี่มา paste ไว้ใน vars.php ของรุ่น 1.5.2 แล้วอัพโหลดโลด... (vars.php อยู่ใน wp-includes)
- ล้วก็เปิดโฟลเดอร์ wp-admin แก้ไฟล์พวก editๆ formๆ นี่แหละค่ะ เหมือนับที่ทำในเวอร์ชันก่อนๆ คือแทรก โค๊ดของ wp-grins ไปไว้หน้า <textarea

มีอะไรบอกนะคะ ไปอาบน้ำก่อน แล้วมาใหม่

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

ปลล. รู้สึกว่าวีลืมบอกอะไรไปซักอย่างนะ พอดีรีบ

Vee · 04 ม.ค. 2006, 18:15 น.

เอ๋ พี่แอน
wp อัพเกรดแป๊บเดียวเอง

ยิ่งเน็ตเร็ว ยิ่งดีใหญ่ (ส่วนใหญ่มาหนักตอนดาวน์โหลด/อัพโหลด

)

โต · 04 ม.ค. 2006, 18:30 น.

อัพโหลดไปทับของเก่าเลยเหรอจานวี

Vee · 04 ม.ค. 2006, 18:40 น.

เปล่าค่ะ

ตามขั้นตอนคือ
1. ดาวน์โหลดข้อมูลในดาต้าเบส
2. ดาวน์โหลดไฟล์ วพ ทั้งหมดลงเครื่อง
// สองขั้นตอนนี้ นี่เผื่อสำหรับคนเป๋อแบบวี แล้วก็เวลาอีดิทพวปลั๊กอินที่ต้องแก้ไฟล์ จะได้ไม่ต้องมานั่งกลุ้มใหม่
3. deactivate ปลั๊กอินออกให้หมด
4. เอา วพ 2.0 ทับลงปายยยย แต่เหลือ wp-content และ wp-config.php ไว้นะคะ
5. รัน วพ มันจะลิงค์ไปหน้าอัพเกรด
6. ไปจัดการปลั๊กอินใหม่ (activate/ แก้ไฟล์)
7. จบแล้วค่าา

ง่ายจริงๆ