• August 26, 2021

    ปกติจะมีการเพิ่มรูปให้อัตโนมัติขนาด 150×150 300×300 1024×1024 และ รูป original

    • Thumbnail (150 x 150 px)
    • Medium (300px height and width)
    • Large (1024px height and width)
    • Full size (the images’ original resolution)

    โดยตั้งค่าได้ที่ Dashboard>setting>media แต่มีบางธีม เพิ่มรูปให้มากกว่านั้น อาจมี 10 ขนาด ซึ่งมักเขียนคำสั่งอยู่ใน fuctions.php หรือ บางธีม อยู่ที่โฟลเดอร์อื่น เช่น Renden (renden\admin\main\options\00.theme-setup.php) ธีมตัวนี้ตะมีหลายธีมเพิ่มเติม เช่น Renden-x Renden-business ซึ่งใช้ไฟล์หลักของ Renden และ มีปัญหาเมื่ออัพโหลด รูปหน้าแรก มันจะครอป รูปขนาดที่ตั้งมา แล้วแสดงผลที่ควบคุมขนาดรูปได้ยาก ต้องไปแก้ที่ไฟล์นั้น

    ใน Readme.txt มีบอกไว้
    ให้ไปแก้ที่
    00.theme-setup.php และ 02.homepage.php
    ตอนนี้ได้ เราอาจเปลี่ยนชื่อ เพื่อสะดวกในการทำงาน จาก column3-1/3 ซึ่งเป็น 4 รูปที่จะใส่เข้าไปที่หน้าแรก เป็น HOME4grid
    ส่วนขนาดอื่นๆ อาจแสดงผลในหน้าอื่นๆ ลองหาดู

    = 1.2.7

    • Updated: Post share icons now display correctly on single post pages.
    • Updated: Image dimensions for column3-1/3 size changed to be 380px x 127px.
    https://developer.wordpress.org/reference/functions/add_image_size/
    
    True คือ crop อัตโมัติ ถ้าไม่ต้องการก็ลบ
    False (default): box-resize - (resize image against the constraining dimension)
    True: hard-crop - crop the image exactly to the specified dimensions
    
    add_image_size( 'category-thumb', 300 ); // 300 pixels wide (and unlimited height)
    add_image_size( 'homepage-thumb', 220, 180, true ); // (cropped)
    
    https://www.wpbeginner.com/wp-tutorials/how-to-create-additional-image-sizes-in-wordpress/
    add_image_size( 'sidebar-thumb', 120, 120, true ); // Hard Crop Mode
    add_image_size( 'homepage-thumb', 220, 180 ); // Soft Crop Mode
    add_image_size( 'singlepost-thumb', 590, 9999 ); // Unlimited Height Mode
    
    https://wordpress.stackexchange.com/questions/39798/thumbnail-cropping-with-add-image-size
    https://wordpress.stackexchange.com/questions/315685/add-image-size-is-scaling-even-though-crop-is-set-to-true
    https://maheshwaghmare.com/adding-image-sizes-with-add_image_size-in-wordpress/
    https://hostingwiki.org/add_image_size/
    
    
    web https://kinsta.com/blog/photography-website/

    ตัวอย่างการสร้าง
    https://wpshout.com/wordpress-custom-image-sizes/

    การเพิ่ม Thumbnails (Featured Image) ในหลายๆ ขนาด เพื่อนำมาใช้ในหลายๆ ตำแหน่ง
    คำสั่ง function seed_setup คือ การสร้างฟังก์ชั่นที่ชื่อว่า seed_setup ขึ้นมาใช้งานลเปลี่ยนชื่ออื่นได้
    คำสั่ง add_theme_support คือ คำสั่งพื้นฐานในการเปิดการใช้งาน thumbnails
    คำสั่ง set_post_thumbnail_size คือ คำสั่งรูปขนาดพื็นฐานของ thumbnails
    คำสั่ง add_image_size คือ คำสั่งเพิ่มขนาดหรือสัดส่วนของ thumbnails ที่แตกต่างจากรูปพื้นฐาน
    คำสั่ง add_action คือ คำสั่งที่นำฟังก์ชั่นที่เราสร้างไปแทรกไว้ที่ after_setup_theme
    ใน functions.php
    function seed_setup() {
    	add_theme_support( 'post-thumbnails' );
    	set_post_thumbnail_size( 600, 400, TRUE );
    	add_image_size( 'square', 600, 600, TRUE );
    	add_image_size( 'mini', 50, 50, TRUE );
    }
    add_action( 'after_setup_theme', 'seed_setup' );
    ในตำแหน่งที่ต้องการให้รูป thumbnails ไปแสดง
    <?php 
           //แสดงผลตามขนาดพื้นฐาน
           the_post_thumbnail(); 
    
           //แสดงผลตามขนาด square
           the_post_thumbnail('square'); 
    
           //แสดงผลตามขนาด mini
           the_post_thumbnail('mini'); 
    ?>
    https://beanthemes.com/add-thumbnails-function/
    Featured Image ในฝั่ง Developer เรียกว่า The Post Thumbnail
    กำหนดคำสั่งให้ธีมสนับสนุนฟังก์ชันนี้ได้ด้วยการเพิ่มคำสั่งนี้ลงไปในไฟล์ functions.php
    
    add_theme_support( 'post-thumbnails' );
    
    ขนาดความกว้าง x สูง ของรูป จะถูกกำหนดให้ตามที่เราตั้งค่าไว้ในเมนู Setting > Media > Thumbnail Size (เดิม 150x150 , 300x300 ,...)
    หากต้องการจะให้ธีมรองรับ Post Thumbnail หลายๆขนาด
     สร้าง Multiple Post thumbnail Size Support โดยการเขียนฟังก์ชั่น add_image_size เพิ่มใน functions.php
    
    add_image_size( 'small-post-thumbnail', 200, 200 ); //ชื่อว่า small-post-thumbnail กว้าง 200 สูง 200
    add_image_size( 'single-post-thumbnail', 690, 180 ); //ชื่อว่า single-post-thumbnail กว้าง 690 สูง 180 ไม่ crop
    
    add_image_size( 'medium-post-thumbnail', 300 ); //ชื่อว่า medium-post-thumbnail กว้าง 300px สูงอัตโนมัติตาม ratio
    
    add_image_size( 'home-post-thumbnail', 400, 400,true ); //ชื่อว่า home-post-thumbnail กว้าง 400 สูง 400 และครอปรูปให้ได้สัดส่วนนี้ นับจากศูนย์กลางรูป
    
    เมื่อเราจะนำตัว Post Thumbnail มาแสดงในธีม ใช้คำสั่ง
    
    the_post_thumbnail(‘ชื่อที่เราตั้งไว้สำหรับแต่ละตัว’); เช่น 
    <?php the_post_thumbnail('home-post-thumbnail'); ?>
    
    ก็จะได้ภาพ Thumbnail ขนาด 400x400px ที่ถูกครอปมาแสดงในหน้าเว็บ
    buksohn.com/featured-image-คืออะไรใน-wordpress.html
    ถ้าไม่เปลี่ยนค่ามาตรฐาน สามารถเพิ่ม “ชนิดของขนาดรูป” อันใหม่ได้
    add_image_size( 'featured', 900, 500, true );
    เวลาจะใช้ ไปไฟล์ที่ต้องการ แล้วเปลี่ยนจาก the_post_thumbnail() เป็น the_post_thumbnail(‘featured’)
    
    http://www.thaiseoboard.com/index.php/topic,358354.msg4930188.html#msg4930188
    
    https://developer.wordpress.org/reference/functions/remove_image_size/
    remove_image_size
    โดย $name คือ ชื่อของรูปที่เราต้องการลบออกไป // แต่ชื่อรูปที่เราไม่สามารถลบขนาดออกไปได้คือ thumb, thumbnail, medium, large, post-thumbnail หรือชื่อรูปที่เป็นมาตรฐานของ WordPress เอง
    
    บางทีดึง post ที่เราต้องการมาโชว์พร้อมรูป featured image แล้ว plugin ดันใช้ขนาดที่ไม่ตรงกับที่เราต้องการใช้งาน เราก็มา remove_image_size() ขนาดรูปใน plugin ตัวนี้ แล้วก็ add_image_size() เข้าไปใหม่ในชื่อเดิม
    
    functions.php และใส่ code
    <?php
    add_action('after_setup_theme', 'change_plugin_image_size');
    
    function change_plugin_image_size() {
    	remove_image_size('plugin-image');
    	add_image_size('plugin-image', 300, 150, true);
    }
    
    ?>
    
    


เวอไนน์ไอคอร์ส

ประหยัดเวลากว่า 100 เท่า!






เวอไนน์เว็บไซต์⚡️
สร้างเว็บไซต์ ดูแลเว็บไซต์

Categories


Uncategorized