{◕ ◡ ◕} เทคนิค WordPress วิธีดึงรูปภาพรูปแรกของเนื้อหาแบบอัตโนมัติ {◕ ◡ ◕}

[Meaw-IE]

เนื้อหาของ WordPress ที่เราเขียน นอกจากตัวอักษร ก็จะเป็น รูปภาพ ที่ถูกใส่ไว้ในเนื้อหา ซึ่งโดยปกติแล้วใน WordPress Version ใหม่จะมี Function Set Featured Image มาให้เราเลือกว่า ในโพสนี้มีรูปภาพหลักที่เราสามารถดึงรูปไปแสดงได้ คือ รูปไหน

ปกติแล้วเวลาเราเขียนบทความอะไรก็ตาม สังเกตุมั้ยครับว่า รูปหลักของโพส หรือ รูปที่เราอยากจะดึงมาโชว์ มักจะเป็นรูปภาพแรก!  ดังนั้นถ้าไม่ต้องมา Set Featured Image เองทุกครั้ง ก็สามารถประหยัดเวลาไปได้เยอะ ก็ดึงจากรูปแรกในโพสมาใช้ได้เลย ซึ่งไอเดียนี้ไปต่อยอดได้อีกมากมาย ช่วยแก้ปัญหาหลายอย่างของ WordPress ได้ด้วยครับ เช่น

1.   ปัญหาการแสดงรูปสำหรับการแชร์โพสไปยัง Social Network เมื่อมีการกดแชร์โพสที่ Facebook เราสามารถใช้เทคนิคนี้ในการ ดึง URL ของรูปมาทำเป็น meta property ที่ทำไว้สำหรับ ให้ Facebook เข้าใจว่า รูปภาพหลักของหน้านี้ คือรูปไหน เวลามีการกดแชร์หน้านี้ Facebook ก็จะใช้รูปนี้ไปแสดงใน Facebook ช่วยแก้ปัญหารูปที่แสดงไม่ตรงกับที่ต้องการ [Note : เหมือนตายน้ำตื้นสำหรับการแชร์ เพราะเนื้อหาดี แต่รูปที่ถูกดึงไปแสดงไม่เกี่ยวข้องหรือไม่ดี คนก็สนใจสิ่งที่เราแชร์น้อยกว่าที่ควรจะเป็นครับ] วิธีทำ ก็แค่วาง Code ตามด้านล่างที่ไฟล์ header.php ใน Theme Folder ครับ

   

โค้ด เลือก ขยาย

<meta property="og:image" content="<?php echo catch_that_image() ?>">
       
2.    ปัญหาการเปลืองพื้นที่ของ Auto Thumbnail ถ้าใช้วิธีนี้สามารถไปปิด Thumbnail ได้เลยครับ ช่วยประหยัดพื้นที่ไปได้เยอะเลยหละ คือ เราดึง URL ของรูปไปแสดงเลยไม่ต้องใช้ Thumbnail ของโพสที่ WordPress สร้างขึ้นมาให้ ตัวอย่าง Code ดึงรูปมาแสดง
   

โค้ด เลือก ขยาย

<img src="<?php echo catch_that_image() ?>" alt="" align="" style="" width="" height="" />

3.    ปัญหาความยุ่งยากในการต้องมาตั้งค่า Featured Image ซึ่งสำหรับคนที่ทำเว็บเยอะๆ หรือ ใช้ตัว Generated Content (สร้างเนื้อหาแบบ Auto) การดึงรูปแบบนี้ สามารถช่วยในการจัดการให้เว็บปั่นของคุณ ดูสวยงามขึ้นจากการดึงรูปที่เกี่ยวข้องกับเนื้อหา ออกมาแสดงยังจุดต่างๆในเว็บ

วิธีทำการดึงรูปภาพ รูปแรกจากเนื้อหา

1. ให้ทำการ Copy Code ด้านล่างนี้ทั้งหมด จากนั้น เปิด Folder Theme ขึ้นมา นำ Code ไปวาง ในไฟล์ function.php ตำแหน่งก่อน Close Tag ของ Theme ที่คุณใช้งานอยู่ จากนั้นกด Save

โค้ด เลือก ขยาย


  function catch_that_image() {
  global $post, $posts;
  $first_img = '';
  ob_start();
  ob_end_clean();
  $output = preg_match_all('/<img.+src=[\'"]([^\'"]+)[\'"].*>/i', $post->post_content, $matches);
  $first_img = $matches [1] [0];

  if(empty($first_img)){ //Defines a default image
    $first_img = "/images/default.jpg";
  }
  return $first_img;
}


2. ขั้นตอนที่นึงเป็นการกำหนดฟังชั่น มาขึ้นตอนนี้ คือ การเรียกรูปภาพมาแสดง เราสามารถทำได้โดยใช้ Code แค่ 1 บรรทัด ในการเรียก URL ของรูปภาพ มาแสดงยังส่วนต่างๆ อยากให้ URL ของรูปแสดงที่ไหนก็นำ Code ด้านล่างนี้ไปวางในไฟล์ Theme ที่ต้องการ เช่น อยากให้แสดงในหน้าโพส ก็นำ Code ไปวางที่ไฟล์ Single.php

โค้ด เลือก ขยาย

<?php echo catch_that_image() ?>

ปล. ผลลัพธ์ที่ได้ จาก Code ด้านบน จะออกมาเป็น URL ของรูป แบบนี้ครับ เป็นแค่ URL

โค้ด เลือก ขยาย

http://your-domain.com/ImageName.jpg

ซึ่ง ถ้าอยากเรียกมา แล้วให้แบบเป็นรูปเลย ทำได้แบบนี้

โค้ด เลือก ขยาย

<img src="<?php echo catch_that_image() ?>" alt="" align="" style="" width="" height="" />

จะเอาไปวางที่ไหนก็ได้แล้วครับตอนนี้ ลองเอาไปเล่นกันดูนะครับ WordPress เป็น CMS  มีอะไรให้เล่นได้เยอะเลย ^___^

เทคนิคอื่นๆ เกี่ยวกับ Wordpress อ่านเพิ่มได้ที่นี่ครับ => http://passiveincome.in.th/content-group/wordpress-articles/

[kamengsaren]

thanks 

[mr.zatan]

ขอบคุณจ้า...กำลังอยากได้อยู่พอดี

[ieiq]

โว้ ๆ ขอบคุณครับ

[wookky]

ขอบคุณครับ

[sbaydee]

อย่าลืมนะครับว่ารูปที่ดึงมาจะมีขนาดตามที่เราอัพหรือที่เราโพส และการจัดขนาดแสดงผลที่หน้าเว็บจะผิดเพี้ยน
แนะนำเพิ่มเติมให้เช็คว่าเป็นไล์ในโฮสเรารึเปล่าถ้าใช่ให้ใช้ timthumb ในการย่อ รูปให้ได้ขนาดก่อนแสดงผล
ถ้าไม่ใช่ก็แสดงปรกติ แต่ใช้ css จัดการแสดงรปให้ได้สัดส่วนที่พอดีนะครับ

[koncept]

ขอบคุณคับผม

[prikthai]

เทคนิคดีๆอีกแล้ว เก็บๆ                             

[arcte]

ขอบคุณสำหรับเทคนิคครับ

[topping]

ขอบคุณครับ 

[Gangzaa!]

ขอบคุณครับ

[imworker]

ขอบคุณครับ

เดี๋ยวจะลองไปทำดูบ้าง

[deksawi]

ขอบคุณมากครับจะไปลองปรับเล่นดู

[thaiaday]

แหล่มเลย

[Meaw-IE]

อย่าลืมนะครับว่ารูปที่ดึงมาจะมีขนาดตามที่เราอัพหรือที่เราโพส และการจัดขนาดแสดงผลที่หน้าเว็บจะผิดเพี้ยน
แนะนำเพิ่มเติมให้เช็คว่าเป็นไล์ในโฮสเรารึเปล่าถ้าใช่ให้ใช้ timthumb ในการย่อ รูปให้ได้ขนาดก่อนแสดงผล
ถ้าไม่ใช่ก็แสดงปรกติ แต่ใช้ css จัดการแสดงรปให้ได้สัดส่วนที่พอดีนะครับ

ตอนทำรูป ผมเน้นรูปที่เป็น สี่เหลี่ยมผื่นผ้าทั้งหมดครับ ตอนดึงมาก็ใช้ การกำหนดความสูงกับความกว้างช่วย 200x150 Px แต่ประโยชน์จริงๆ ของวิธีนี้ คือ เรียก URL ของรูปมาแสดงเป็น MetaTag สำหรับการแชร์ไป Facebook แล้วให้แสดงรูปนี้ที่ Facebook ครับ