[WordPress] ไม่ต้องใส่ tag p อัตโนมัติให้รูปภาพของเรา

เวลาเราเขียนเนื้อหาอะไรใน WordPress นั้น ตัว WordPress เองจะทำการใส่ tag p ให้อัตโนมัติในกรณีที่เราไม่ได้ใส่ tag อะไรคลุมไว้ แต่บางคนคงไม่ชอบที่ตัว WordPress มาใส่ tag p ให้กับรูปภาพของ ด้วยสาเหตุส่วนตัวหลาย ๆ อย่าง แต่เราจะทำยังไงไม่ให้มันใส่ tag p ให้รูปภาพของเราละ

ให้ไปที่ functions.php นะครับ แล้วนำ code นี้ไปแปะไว้

[php]
function filter_ptags_on_images($content){
return preg_replace(‘/<p>\s*(<a .*>)?\s*(<img .* \/>)\s*(<\/a>)?\s*<\/p>/iU’, ‘\1\2\3’, $content);
}

add_filter(‘the_content’, ‘filter_ptags_on_images’);
[/php]

เพียงเท่านี้ เราก็ไม่มีเจ้า tag p มากวนใจรูปภาพของเราแล้วละครับ ^^

แต่ถ้าไม่ต้องการให้ใส่ tag p อัตโนมัติเลย ก็ไปดูที่นี่ครับ วิธีแก้ไม่ให้ WordPress ใส่ tag p ให้เราอัตโนมัติ

PhotoSwipe : Image Gallery ใช้กับ Touch Screen

วันนี้มี Plugin ใช้ทำ Image Gallery สำหรับใช้กับ Touch Screen ได้ มาชมวิดีโอแนะนำตัว PhotoSwipe กันก่อนนะครับ

PhotoSwipe

ในเว็บของ PhotoSwipe นั้นได้อธิบายเกี่ยวกับตัว Plugin ตัวนี้ไว้ว่า

What is it?

PhotoSwipe is a FREE HTML/CSS/JavaScript based image gallery specifically targeting mobile devices.

Who is it for?

Developers and designers requiring an interactive image gallery on their mobile website with the look and feel of a native app.

Why use it?

PhotoSwipe provides your visitors with a familiar and intuitive interface allowing them to interact with images on your mobile website.

ใช้กับมือถือ platform ไหนได้บ้าง

PhotoSwipe : Image Gallery สำหรับ Touch Screeen [1]

สำหรับตัว PhotoSwipe นั้นสนับสนุน iOS, Android รวมถึง BlackBerry และใช้งานคู่กับ jQuery หรือ PhoneGap ได้ด้วยครับ

วิธีการใช้งาน PhotoSwipe

ดาวน์โหลดตัว PhotoSwipe ที่นี่เลยครับ Download PhotoSwipe หลังจากนั้นก็เพิ่ม code นี้ไปที่ส่วน head นะครับ

[html]
<script type="text/javascript" src="klass.min.js"></script>
<script type="text/javascript" src="code.photoswipe-3.0.4.min.js"></script>
[/html]

และเรียกใช้งานโดย

[javascript]
// Set up PhotoSwipe with all anchor tags in the Gallery container
document.addEventListener(‘DOMContentLoaded’, function(){

var myPhotoSwipe = Code.PhotoSwipe.attach( window.document.querySelectorAll(‘#Gallery a’), { enableMouseWheel: false , enableKeyboard: false } );

}, false);
[/javascript]

แต่ถ้าถนัดเป็น jQuery ก็เรียกใช้งานแบบนี้เลยครับ

[javascript]
//jQuery version
$(document).ready(function(){

var myPhotoSwipe = $("#Gallery a").photoSwipe({ enableMouseWheel: false , enableKeyboard: false });

});
[/javascript]

และในส่วน HTML เพื่อใช้ประกอบให้ตัว PhotoSwipe ทำงานได้นั้น ก็มีลักษณะแบบนี้ครับ

[html]
<ul id="Gallery">
<li><a href="images/full/01.jpg"><img src="images/thumb/01.jpg" alt="Image 01" /></a></li>
<li><a href="images/full/02.jpg"><img src="images/thumb/02.jpg" alt="Image 02" /></a></li>
<li><a href="images/full/03.jpg"><img src="images/thumb/03.jpg" alt="Image 03" /></a></li>
<li><a href="images/full/04.jpg"><img src="images/thumb/04.jpg" alt="Image 04" /></a></li>
<li><a href="images/full/05.jpg"><img src="images/thumb/05.jpg" alt="Image 05" /></a></li>
<li><a href="images/full/06.jpg"><img src="images/thumb/06.jpg" alt="Image 06" /></a></li>
</ul>
[/html]

ซึ่งตัว PhotoSwipe นั้น เราสามารถจะปรับแต่งลูกเล่นมันได้หลากหลายพอสมควร รายละเอียดเพิ่มเติมและตัวอย่างการใช้งาน PhotoSwipe นั้น ให้ไปดูที่เว็บของ PhotoSwipe เลยครับ

ที่มา : PhotoSwipe

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

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

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

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

รูปอธิบายหัวข้อ วิธีใช้ WordPress [1]
คลิ๊กที่ icon ในวงกลมสีแดง

ซึ่งในการเพิ่มรูปภาพสำหรับบทความ WordPress นั้น มีให้เลือก 3 แบบ คือ

รูปอธิบายหัวข้อ WordPress [2]
สามารถเลือกได้ทั้งจากคอมของเรา, จาก URL หรือจากรูปภาพที่เราเคยเพิ่มมาแล้ว
  • From Computer : เลือกรูปภาพที่จะเพิ่มจากในคอมพิวเตอร์ของเรา
  • From URL : เพิ่มรูปภาพโดยการใส่ URL ของภาพที่เราจะใส่ในบทความ
  • Media Library : เลือกรูปภาพจากรูปภาพที่เราเคยอัพโหลดในเว็บมาแล้ว

เลือกรูปจากคอมเราลงบทความ

รูปอธิบายหัวข้อ วิธีใช้ WordPress [3]
เลือกที่ Select Files เพื่อเลือกรูปที่ต้องการเพิ่ม

เลือกที่ Select Files เพื่อเลือกรูปที่เราต้องการเพิ่มในบทความ เมื่ออัพโหลดรูปภาพเสร็จแล้วจะปรากฎส่วนที่ให้เรากรอกข้อมูลรูปภาพเพิ่มเติม โดยจะมีหัวข้อต่าง ๆ ตามที่ผมเข้าใจดังนี้

รูปอธิบายหัวข้อ วิธีใช้ WordPress [4]
กรอกข้อมูลของรูปภาพ เพื่อนำไปใช้งานต่อไป
  • Title : ชื่อของรูป
  • Alternate Text : อธิบายเพิ่มเติม
  • Caption : คำบรรยายภาพ
  • Description : อธิบายเกี่ยวกับภาพ
  • Link URL : ให้รูป link ไปที่ไหน ซึ่งเลือกได้ว่า
    • None : ไม่ link ไปไหน
    • File URL : link ไปยังรูปของเต็มขนาดของรูปนั้น ๆ
    • Post URL : link ไปโดยทำรูปนั้นให้เป็นเหมือน 1 Post ไปเลย
    • หรือจะกรอก URL ที่ต้องการให้รูปนี้ link ไปหา
  • Alignment : จัดรูปให้ชิดซ้าย ชิดขวา หรืออยู่ตรงกลาง
  • Size : เลือกขนาดของรูปที่จะนำลงในบทความ

ข้อมูลนั้น เราสามารถกรอกแค่ Title อย่างเดียวก็ได้ครับ หลังจากที่กรอกข้อมูลเสร็จแล้ว ก็กด Insert into Post เลยครับ ก็จะได้เป็นดังรูป

รูปอธิบายหัวข้อ วิธีใช้ WordPress [5]
รูปที่เพิ่ม ปรากฎในช่องสำหรับ Edit Post

แก้ไขรูปที่ลงในบทความ WordPress

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

รูปอธิบายหัวข้อ วิธีใช้ WordPress [6]
icon ทั้งสองที่ปรากฎเมื่อคลิ๊กที่รูปภาพ

โดยเราสามารถแก้ไขรูปภาพของเราได้ดังนี้

รูปอธิบายหัวข้อ วิธีใช้ WordPress [7]
แก้ไขรูปภาพที่เราได้ลงไปในบทความแล้ว
  • Size : เราสามารถแก้ไขขนาดรูปเป็น % ได้
  • Alignment : แก้ไขรูปให้ชิดซ้าย ชิดขวา หรืออยู่ตรงกลาง
  • Title : แก้ไขชื่อของรูป
  • Alternate Text : แก้ไขข้อความที่อธิบายเพิ่มเติม
  • Caption : แก้ไขคำบรรยายภาพ
  • Link URL : แก้ไข link ที่จะให้รูปภาพนี้ link ไปหา

เสร็จแล้วก็ Update ได้เลยครับ รูปภาพของเราจะถูกแก้ไขเป็นไปตามที่เราเลือกไว้

รูปอธิบายหัวข้อ วิธีใช้ WordPress [8]
รูปถูกลดขนาดลง และจัดชิดขวา

แต่เรายังสามารถเลือก Advanced Settings เพื่อแก้ไขรูปภาพเพิ่มเติมจากเดิม โดยแบ่งออกเป็น 2 ส่วน คือ ส่วนของรูปภาพ กับส่วนของ Link

รูปอธิบายหัวข้อ วิธีใช้ WordPress [9]
หน้า Advanced Settings

ซึ่งสามารถกำหนดอะไรได้หลากหลายกว่า Edit Image