จัดรูปภาพ จัดตัวหนังสือใน Wordpress ยากมากครับ ท่านใดพอวิธีบ้างครับ

neutralart · 03 ตุลาคม 2011, 10:56:32

จัดรูปภาพ จัดตัวหนังสือใน Wordpress ยากจังเลยครับ รู้สึกจะจัดได้แค่การเรียงจากบนลงล่างได้อย่างเดียว อยากจะวางรูปจากซ้ายไปขวา ใส่ capture ใต้ภาพก็ทำไม่ได้ หรือผมควรจะไปสร้างตารางโพสต์จัดหน้าให้เสร็จสรรพใน dreamweaver แล้ว copy-paste ใส่ WP ครับ

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

ขอบคุณครับ

เอิร์ธ · 03 ตุลาคม 2011, 10:57:19

มันได้แหละท่านลองดู -*-

อาจจะยากนิดนึง

neutralart · 03 ตุลาคม 2011, 10:59:26

หมายถึงลองทำไปเรื่อยๆ เด๋วก็เก่งเองใช่ไหมครับ

อ้างถึงจาก: เอิร์ธ ใน 03 ตุลาคม 2011, 10:57:19
มันได้แหละท่านลองดู -*-

อาจจะยากนิดนึง

เอิร์ธ · 03 ตุลาคม 2011, 11:00:31

จะจัดแบบไหนอะครับ

ถ้าซ้ายขวาก็ได้แค่ปรับ align

caption มันมีให้ใส่ตรงภาพนะ

makoto · 03 ตุลาคม 2011, 11:00:57

งงแฮะ

เอิร์ธ · 03 ตุลาคม 2011, 11:01:56

ุถ้านอกนั้นคงต้องรู้โค๊ดแล้วครับ

ไม่ก้ใช้ Theme ที่มี Shortcode ช่วย

ลองดู หรือหา Plugins Shortcode มา

neutralart · 03 ตุลาคม 2011, 11:02:15

ถ้าจัดเป็นซ้าย - ขวา ก็ align ได้ แต่ถ้าจะเรียงสัก 3 รูป ซ้ายไปขวา มันจัดโค-ตะ-ระยากครับ

อ้างถึงจาก: เอิร์ธ ใน 03 ตุลาคม 2011, 11:00:31
จะจัดแบบไหนอะครับ

ถ้าซ้ายขวาก็ได้แค่ปรับ align

caption มันมีให้ใส่ตรงภาพนะ

neutralart · 03 ตุลาคม 2011, 11:04:39

แค่รู้สึกว่าจัดยากน่ะครับ อย่างจัดในโปรแกรมดรีมมันได้หมด ขึ้นอยู่กับการสร้างตาราง แต่ wordpress มันมีข้อจำกัดจัดได้แค่เรียงจากบนลงล่างได้อย่างเดียว ผมจะจัดเรียงเป็นแนวนอนซ้ายไปขวา เรียงกันสัก 3-4 รูปจะทำไม่ได้แล้วน่ะครับ

อ้างถึงจาก: makoto ใน 03 ตุลาคม 2011, 11:00:57
งงแฮะ

aCustiCz · 03 ตุลาคม 2011, 11:10:29

ที่จริงมันทำได้หมดนะครับ แต่คุณอาจจะยังไม่คุ้นเครื่องมือ

ลองใช้ plugin พวกนี้ดู
http://wordpress.org/extend/plugins/ckeditor-for-wordpress/
http://wordpress.org/extend/plugins/tinymce-advanced/

neutralart · 03 ตุลาคม 2011, 11:11:35

ขอบคุณครับท่าน ผมจะลองใช้ดูครับ ขอบคุณครับๆ

อ้างถึงจาก: aCustiCz ใน 03 ตุลาคม 2011, 11:10:29
ที่จริงมันทำได้หมดนะครับ แต่คุณอาจจะยังไม่คุ้นเครื่องมือ

ลองใช้ plugin พวกนี้ดู
http://wordpress.org/extend/plugins/ckeditor-for-wordpress/
http://wordpress.org/extend/plugins/tinymce-advanced/

AM-PM · 03 ตุลาคม 2011, 11:13:41

อ้างถึงจาก: neutralart ใน 03 ตุลาคม 2011, 11:04:39
แค่รู้สึกว่าจัดยากน่ะครับ อย่างจัดในโปรแกรมดรีมมันได้หมด ขึ้นอยู่กับการสร้างตาราง แต่ wordpress มันมีข้อจำกัดจัดได้แค่เรียงจากบนลงล่างได้อย่างเดียว ผมจะจัดเรียงเป็นแนวนอนซ้ายไปขวา เรียงกันสัก 3-4 รูปจะทำไม่ได้แล้วน่ะครับ

อ้างถึงจาก: makoto ใน 03 ตุลาคม 2011, 11:00:57
งงแฮะ

อ้างถึงจาก: neutralart ใน 03 ตุลาคม 2011, 11:02:15
ถ้าจัดเป็นซ้าย - ขวา ก็ align ได้ แต่ถ้าจะเรียงสัก 3 รูป ซ้ายไปขวา มันจัดโค-ตะ-ระยากครับ

อ้างถึงจาก: เอิร์ธ ใน 03 ตุลาคม 2011, 11:00:31
จะจัดแบบไหนอะครับ

ถ้าซ้ายขวาก็ได้แค่ปรับ align

caption มันมีให้ใส่ตรงภาพนะ

ทำโค๊ตตารางเอาครับ แต่ผมก็ว่ายากจริงๆด้วยนะ ผมเลยตัดปัญหาใส่มันรูปเดียวพอ

makoto · 03 ตุลาคม 2011, 11:24:29

อ้างถึงจาก: neutralart ใน 03 ตุลาคม 2011, 11:04:39
แค่รู้สึกว่าจัดยากน่ะครับ อย่างจัดในโปรแกรมดรีมมันได้หมด ขึ้นอยู่กับการสร้างตาราง แต่ wordpress มันมีข้อจำกัดจัดได้แค่เรียงจากบนลงล่างได้อย่างเดียว ผมจะจัดเรียงเป็นแนวนอนซ้ายไปขวา เรียงกันสัก 3-4 รูปจะทำไม่ได้แล้วน่ะครับ

อ้างถึงจาก: makoto ใน 03 ตุลาคม 2011, 11:00:57
งงแฮะ

เขียน div ครอบก่อนครับ ตั้งให้เป็น id ไว้
แล้วก็ div float:left ทั้งหมด 3 ครั้ง
ตั้ง div clear:left ปิดภาพทั้งหมดให้เป็นปกติ
แล้วปิด div ที่ครอบ

ตัวอย่าง
<div id="warp_img_left">
<div style="float:left">ภาพ 1</div>
<div style="float:left">ภาพ 2</div>
<div style="float:left">ภาพ 3</div>
<div style="clear:left"></div>
</div> { ข้อความ }

แต่ถ้าจะให้กรอบภาพอยู่ด้านซ้ายด้วย (ภาพ ภาพ ภาพ : ตัวหนังสือ)
ก็ใส่ float:left ต่อหลัง div ใหญ่นั้นไปก็ได้และกำหนดความกว้างของ div ที่เป็นกรอบไว้ถ้าไม่กำหนด div ที่เป็นภาพด้านในจะแสดงผิดพลาด เช่น <div id="warp_img_left" style="float:left;width:300px;">

ลองเอาไปดัดแปลงดูผมยังไม่ได้ทดสอบ code นี้

neutralart · 03 ตุลาคม 2011, 11:28:58

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

อ้างถึงจาก: makoto ใน 03 ตุลาคม 2011, 11:24:29
อ้างถึงจาก: neutralart ใน 03 ตุลาคม 2011, 11:04:39
แค่รู้สึกว่าจัดยากน่ะครับ อย่างจัดในโปรแกรมดรีมมันได้หมด ขึ้นอยู่กับการสร้างตาราง แต่ wordpress มันมีข้อจำกัดจัดได้แค่เรียงจากบนลงล่างได้อย่างเดียว ผมจะจัดเรียงเป็นแนวนอนซ้ายไปขวา เรียงกันสัก 3-4 รูปจะทำไม่ได้แล้วน่ะครับ

อ้างถึงจาก: makoto ใน 03 ตุลาคม 2011, 11:00:57
งงแฮะ

เขียน div ครอบก่อนครับ ตั้งให้เป็น id ไว้
แล้วก็ div float:left ทั้งหมด 3 ครั้ง
ตั้ง div clear:left ปิดภาพทั้งหมดให้เป็นปกติ
แล้วปิด div ที่ครอบ

ตัวอย่าง
<div id="warp_img_left">
<div style="float:left">ภาพ 1</div>
<div style="float:left">ภาพ 2</div>
<div style="float:left">ภาพ 3</div>
<div style="clear:left"></div>
</div> { ข้อความ }

แต่ถ้าจะให้กรอบภาพอยู่ด้านซ้ายด้วย (ภาพ ภาพ ภาพ : ตัวหนังสือ)
ก็ใส่ float:left ต่อหลัง div ใหญ่นั้นไปก็ได้และกำหนดความกว้างของ div ที่เป็นกรอบไว้ถ้าไม่กำหนด div ที่เป็นภาพด้านในจะแสดงผิดพลาด เช่น <div id="warp_img_left" style="float:left;width:300px;">

ลองเอาไปดัดแปลงดูผมยังไม่ได้ทดสอบ code นี้

makoto · 03 ตุลาคม 2011, 11:43:33

เขียนใน css สิครับ แล้วแทนค่าด้วย id ด้วย class เอา อยากใส่อะไรก็แทนค่าด้วย class เอา ผมทำบ่อยไป
ไม่งั้นคุณก็ไปหา class หรือ id บนสุดที่เป็นส่วนของ content น่ะ แล้วเพิ่มค่าเอาว่า ให้ img เรียงกันแบบไหน
พอคุณแทรกภาพลงเนื้อหา มันก็จัดรูปแบบให้เองแล้วครับ แต่ต้องดูดีๆ นะ เพราะถ้ากำหนด class ไม่ดี
ภาพทุกอันมันจะเรียงต่อกันไปหมด

neutralart · 03 ตุลาคม 2011, 11:47:19

ผมแค่รู้โค้ดแบบบ้านๆ น่ะครับ เด๋วผมขอลอง plugin ก่อนแล้วกันครับ ขอบคุณครับ

อ้างถึงจาก: makoto ใน 03 ตุลาคม 2011, 11:43:33
เขียนใน css สิครับ แล้วแทนค่าด้วย id ด้วย class เอา อยากใส่อะไรก็แทนค่าด้วย class เอา ผมทำบ่อยไป
ไม่งั้นคุณก็ไปหา class หรือ id บนสุดที่เป็นส่วนของ content น่ะ แล้วเพิ่มค่าเอาว่า ให้ img เรียงกันแบบไหน
พอคุณแทรกภาพลงเนื้อหา มันก็จัดรูปแบบให้เองแล้วครับ แต่ต้องดูดีๆ นะ เพราะถ้ากำหนด class ไม่ดี
ภาพทุกอันมันจะเรียงต่อกันไปหมด

neutralart · 03 ตุลาคม 2011, 13:05:11

ปลั๊กอิน CK Editor สุดยอดดดมากครับท่าน...กราบขอบพระคุณท่านมากๆๆ ครับ

อ้างถึงจาก: aCustiCz ใน 03 ตุลาคม 2011, 11:10:29
ที่จริงมันทำได้หมดนะครับ แต่คุณอาจจะยังไม่คุ้นเครื่องมือ

ลองใช้ plugin พวกนี้ดู
http://wordpress.org/extend/plugins/ckeditor-for-wordpress/
http://wordpress.org/extend/plugins/tinymce-advanced/

topsitemp4 · 03 ตุลาคม 2011, 13:15:41

ใช้บ่อยเดี๋ยวคล่องเองครับ

nui_unseen · 03 ตุลาคม 2011, 13:35:42

งงครับ ปกติไม่ต้องแก้อะไรมันก็เรียงได้หนิครับ แค่ตอนอัพภาพก่อนที่จะใส่ในโพส เลือกที่การจัดเรียงเป็นแบบ "None" แล้วโพส

ตัวอย่างของผม

http://www.xn--72ca1bev3cd3b0bcq0cgk3h5h2cj.com/%e0%b8%95%e0%b8%b1%e0%b8%a7%e0%b8%ad%e0%b8%a2%e0%b9%88%e0%b8%b2%e0%b8%87%e0%b8%ab%e0%b8%99%e0%b8%b1%e0%b8%87-friday-killer-%e0%b8%ab%e0%b8%a1%e0%b8%b2%e0%b9%81%e0%b8%81%e0%b9%88%e0%b8%ad%e0%b8%b1%e0%b8%99%e0%b8%95%e0%b8%a3%e0%b8%b2%e0%b8%a2.html

neutralart · 03 ตุลาคม 2011, 13:37:52

ถ้าเลือกเป็นแบบ none จัดได้ 3 ภาพแบบนี้เลยหรอครับ ได้ครับ ผมจะลองดูครับ ขอบคุณครับ

อ้างถึงจาก: nui_unseen ใน 03 ตุลาคม 2011, 13:35:42
งงครับ ปกติไม่ต้องแก้อะไรมันก็เรียงได้หนิครับ แค่ตอนอัพภาพก่อนที่จะใส่ในโพส เลือกที่การจัดเรียงเป็นแบบ "None" แล้วโพส

ตัวอย่างของผม

http://www.xn--72ca1bev3cd3b0bcq0cgk3h5h2cj.com/%e0%b8%95%e0%b8%b1%e0%b8%a7%e0%b8%ad%e0%b8%a2%e0%b9%88%e0%b8%b2%e0%b8%87%e0%b8%ab%e0%b8%99%e0%b8%b1%e0%b8%87-friday-killer-%e0%b8%ab%e0%b8%a1%e0%b8%b2%e0%b9%81%e0%b8%81%e0%b9%88%e0%b8%ad%e0%b8%b1%e0%b8%99%e0%b8%95%e0%b8%a3%e0%b8%b2%e0%b8%a2.html

muaythaivariety · 03 ตุลาคม 2011, 13:38:48

ผมใส่ html คับ