Những thủ thuật xử lý hình ảnh cho trang WordPress

Có rất nhiều plugin có sẵn trên mạng giúp chúng ta quản lý và xử lý hình ảnh rất tốt trên trang WordPress. Tuy nhiên chúng ta cũng không nên quá lạm dụng những plugin này, nếu yêu cầu mà chúng ta đưa ra cho web không quá phức tạp. Hôm nay mình xin chia sẻ cho các bạn 4 thủ thuật giúp bạn có thể xử lý hình ảnh mà không cần phải dùng đến plugin.

 

Những thủ thuật xử lý hình ảnh cho trang WordPress

 

Thủ thuật 1: Tự động chèn rel=”lightbox” cho tất cả hình ảnh trong bài viết.

Nếu bạn sử dụng plugin Lightbox cho trang web của mình, và muốn mọi hình ảnh mà các bạn đã chèn vào các bài viết trước đây cũng có chức năng này, thì đoạn code bên dưới sẽ giúp các bạn giải quyết vấn đề. Các bạn chỉ cần copy và dán nó vào bên trong file funtions.php trong folder template mà các bạn đang dùng.

add_filter('the_content', 'my_addlightboxrel');
function my_addlightboxrel($content) {
    global $post;
    $pattern ="/<a(.*?)href=('|\")(.*?).(bmp|gif|jpeg|jpg|png)('|\")(.*?)>/i";
    $replacement = '<a$1href=$2$3.$4$5 rel="lightbox" title="'.$post->post_title.'"$6>';
    $content = preg_replace($pattern, $replacement, $content);
    return $content;
}

Thủ thuật 2 : Xóa bỏ thuộc tính Width và Height từ WP Image Uploader

Mặc định thì khi bạn chèn hình vào trong bài viết, WordPress sẽ tự động chèn thuộc tính chiều cao (height) cũng như chiều rộng (width) vào thẻ <img> . Điều này sẽ không thành vấn đề, nhưng khi chúng ta sử dụng cho kỹ thuật Responsive thì sẽ phát sinh lỗi hiển thị. Và đoạn code sau sẽ xóa bỏ những thuộc tính này.

add_filter( 'post_thumbnail_html', 'remove_width_attribute', 10 );
add_filter( 'image_send_to_editor', 'remove_width_attribute', 10 );
function remove_width_attribute( $html ) {
    $html = preg_replace( '/(width|height)="\d*"\s/', "", $html );
    return $html;
}

Thủ thuật 3 : Crop hình ảnh được upload thay vì Scale

Các bạn chỉ cần copy và dán đoạn code sau vào file functions.php là có thể crop hình ảnh cho thumnail.

// Standard Size Thumbnail
if(false === get_option("thumbnail_crop")) {
    add_option("thumbnail_crop", "1"); }
 else {
    update_option("thumbnail_crop", "1");
 }
// Medium Size Thumbnail
if(false === get_option("medium_crop")) {
    add_option("medium_crop", "1"); }
 else {
    update_option("medium_crop", "1");
 }
// Large Size Thumbnail
if(false === get_option("large_crop")) {
    add_option("large_crop", "1"); }
 else {
    update_option("large_crop", "1");
 }

Thủ thuật 4 : Chỉ định hình ảnh thumnail mặc định

Kể từ phiên bản 2.9, WordPress cho phép chúng ta lựa chọn hình ảnh để làm thumnail, nhưng không phải bài viết nào cũng có hình ảnh, vì thế đoạn code sau sẽ giúp các bạn chèn hình ảnh thumbnail mặc định khi bài viết đó không có sẵn thumbnail.

add_action( 'save_post', 'tut_save_thumbnail' );
function tut_save_thumbnail( $post_id ) {
// Get Thumbnail
 $post_thumbnail = get_post_meta( $post_id, $key = '_thumbnail_id', $single = true );
 // Verify that post is not a revision
 if ( !wp_is_post_revision( $post_id ) ) {
    // Check if Thumbnail exists
    if ( empty( $post_thumbnail ) ) {
        // Add thumbnail to post
        update_post_meta( $post_id, $meta_key = '_thumbnail_id', $meta_value = 'http://yoursite.com/your_image_url.jpg' );
} } }

Trên đây chỉ là 4 đoạn code đơn giản giúp các bạn xử lý hình ảnh cho trang wordpress. Nếu bạn nào có đoạn code nào hay hơn thì xin chia sẻ cho mọi người và mình cùng biết nhé.