+ Shortcode สำหรับ Wordpress ไว้ลงโค๊ดรูปตามที่ต้องการ (Custom แบบสุดขีด)+

เริ่มโดย anivox, 10 มกราคม 2012, 20:44:56

หัวข้อก่อนหน้า - หัวข้อถัดไป

0 สมาชิก และ 1 ผู้มาเยือน กำลังดูหัวข้อนี้

anivox

อธิบายยากหน่อยนะครับ คือ เวลาจะลงรูปจะใส่แค่ หรือเราอยากจะใส่แอฟเฟคเวลาเปิดรูปเป็น Lightbox, Fancybox อะไรพวกนั้นอะ
อ้างถึง[img src="http://domain.com/test.png"]

ถ้า shortcode แบบนี้ใครๆก็เขียนได้ใช่ไหม... แต่สำหรับ custom สุดๆ ที่สามารถลิงค์ไปรูปขนาดใดก็ได้ ลองอ่านต่อดู

ทุกอย่างทำใน functions.php นะครับ

ขั้นแรก Add ขนาดรูปก่อนเลย เวลาอัพโหลดรูป Wordpress จะ Crop รูปตามขนาดที่เราใส่ไว้


if ( function_exists( 'add_image_size' ) ) {
add_image_size( 'post-thumb', 283, 120, true );
}

(post-thumb ชื่ออะไรก็แล้วแต่, 283 = ขนาดกว้าง, 120 = ขนาดยาว, True = การ Crop ภาพ)


เริ่มการ Shortcode :



function customImage($atts, $content = null) {
  extract(shortcode_atts(array('src' => '#'), $atts));
  $path_parts = pathinfo($src);
  $file_dir = $path_parts['dirname'];
  $file_base = $path_parts['basename'];
  $file_ext = $path_parts['extension'];
  $file_name = $path_parts['filename'];
  return '<a href="'.$src.'"><img src="'.$file_dir.'/'.$file_name.'-283x120.'.$file_ext.'"></a>';
}
add_shortcode('img', 'customImage');

อธิบาย :
customImage ในบรรทัดแรกกับบรรทัดสุดท้าย = ชื่อฟังชั่น
img บรรทัดสุดท้าย = คือชื่อ shortcode เวลาจะเขียนลงบล๊อก ถ้าเราเปลี่ยน img เป็น imgz , shortcode เราก็จะเป็น [imgz src="http://domain.com/test.png"]
$path_parts = การแบ่งพาตของลิงค์ภาพเพื่อทำการเปลี่ยนแปลงลิงค์ภาพในภายหลัง (จากไอเดียผม)
$file_dir = เอา url ข้างหน้า เช่น http://domain.com/test.png ก็จะกลายเป็น http://domain.com/ เฉยๆ
$file_base = (ความจริงอันนี้ไม่ใช้) แต่มันผลลัพมันคือ test.png
$file_ext = เอานามสกุลไฟล์มา, ผลลัพคือ .png
$file_name = เอาชื่อไฟล์, ผลลัพคือ test

return = อันนี้บรรทัดสำคัญคือการร่วมฟังชั่นต่างๆจากข้างบนเอามาประยุคตามต้องการ จะเห็นว่าบรรทัดนี้จะมี -283x120 อันนี้คือเวลา Wordpress resize ภาพจะมีชื่อไฟล์ขนามดขนาดที่เรากำหนด เราก็เอามาบวกนู้น บวกนี้ เพิ่มนู้น เพิ่มนี้ไปตามที่เราตั้งการ

อาจจะใช้ภาษาผิดไปบ้าง แต่ก็ลองๆดูกันนะครับ

ตอนนี้เราก็สามารถใส่แค่
อ้างถึง[img src="http://domain.com/test.png"]
เวลาโพสใน Wordpress ได้ละ