Bootstrap

Vũ Thành Lâm

Content - Code - SEO - MMO
17/10/1979
Tây Mỗ - Nam Từ Liêm - Hà Nội
thanhlam19792003

Lamvt – Vũ Thành Lâm – bắt đầu Code 2005 Freelancer từ 2006 với hàng ngàn dự án lớn nhỏ cho nước ngoài và hàng trăm dự án web cho Việt Nam.

SEO thành công rất nhiều dự án lớn, độ khó cao.
MOD (Moderator) và Admin (Administraror) của nhiều diễn đàn về SEO và CODE web MMO tại Việt Nam
Dạy Lập trình Thiết kế Web và SEO Miễn phí 15++ Năm (Từ 2006 đến Nay)

Cách thêm trường Tải ảnh vào WordPress

5/5 - (1 bình chọn)

Cách thêm trường tải ảnh trực tiếp vào bảng tùy chỉnh trên website

Bảng tùy chỉnh trong trang quản trị website sẽ có rất nhiều trường mục mà bạn cần phải nắm rõ. Việc làm sao để có thể thêm trường tải ảnh trực tiếp trong trang mà không ảnh hưởng đến cấu hình là điều quan trọng.

Nếu bạn đang cần một hướng dẫn chi tiết về cách thêm trường tải ảnh trực tiếp trong bảng tùy chỉnh quản trị, bạn có thể tham khảo thông tin trong bài viết dưới đây:

Cách thêm trường Tải ảnh vào WordPress upload-file-wordpress

Hiện tại, có ít nhất 3 cách thêm trường tải ảnh vào bài đăng, bao gồm: sử dụng post_meta để lưu trữ đường dẫn hình ảnh; Sử dụng trường post_meta để lưu trữ ID thư viện ảnh hoặc chỉ định hình ảnh cho bài đăng dưới dạng tệp tin đính kèm. Bài viết dưới đây sẽ hướng dẫn bạn cách sử dụng trường post_meta để lưu ID thư viện ảnh.

Xem thêm: Cách hiển thị bài viết xem nhiều nhất trong WordPress không sử dụng Plugin

Mã hóa nhiều phần

Trong WordPress đã mặc định tạo và chỉnh sửa ảnh thường không có thuộc tính enctype. Nếu bạn muốn tải lên một tệp tin, bạn sẽ cần bổ sung “enctype = ‘nhiều phần/mẫu dữ liệu’ vào thẻ biểu mẫu – nếu không bộ sưu tập $_File sẽ không được đẩy qua.


function lamvt_add_edit_form_multipart_encoding() {

echo ' enctype="multipart/form-data"';

}
add_action('post_edit_form_tag', 'lamvt_add_edit_form_multipart_encoding');

Tạo hộp Meta Box và tải lên

Điều cần thiết để tạo trường tải ảnh vào bài đăng là bạn cần thiết lập một hộp meta đơn giản với một trường tệp tin trong đó.
Xử lý tệp tải lên

Đây là một vấn đề lớn, bạn cần xử lý các tệp tin tải lên bằng cách hooking vào hoạt động save_post. Nhưng bạn nên lưu ý tới hai chức năng chính sẽ sử dụng:

– Wp_handle_upload: Đây là chức năng chính giúp xử lý hình ảnh tải lên. Để cài đặt chức năng này hoạt động được tốt nhất, bạn cần đặt là test_form = false và thỏa mãn được tham chiếu đến trường mà bạn xây dựng trong $_FILES. Tuy nhiên, chức năng này không thêm được tệp đã tải lên vào thư viện ảnh.  Nó chỉ đơn giản là tải lên và trả lại đường dẫn tập tin mới cho quản trị viên.  Nếu có vấn đề, nó sẽ trả về thông báo lỗi cho bạn ngay tức thì.


function lamvt_render_image_attachment_box($post) {

// See if there's an existing image. (We're associating images with posts by saving the image's 'attachment id' as a post meta value)
 // Incidentally, this is also how you'd find any uploaded files for display on the frontend.
 $existing_image_id = get_post_meta($post->ID,'_lamvt_attached_image', true);
 if(is_numeric($existing_image_id)) {

echo '<div>';
 $arr_existing_image = wp_get_attachment_image_src($existing_image_id, 'large');
 $existing_image_url = $arr_existing_image[0];
 echo '<img src="' . $existing_image_url . '" />';
 echo '</div>';

}

// If there is an existing image, show it
 if($existing_image_id) {

echo '<div>Attached Image ID: ' . $existing_image_id . '</div>';

}

echo 'Upload an image: <input type="file" name="lamvt_image" id="lamvt_image" />';

// See if there's a status message to display (we're using this to show errors during the upload process, though we should probably be using the WP_error class)
 $status_message = get_post_meta($post->ID,'_lamvt_attached_image_upload_feedback', true);

// Show an error message if there is one
 if($status_message) {

echo '<div class="upload_status_message">';
 echo $status_message;
 echo '</div>';

}

// Put in a hidden flag. This helps differentiate between manual saves and auto-saves (in auto-saves, the file wouldn't be passed).
 echo '<input type="hidden" name="lamvt_manual_save_flag" value="true" />';

}

function lamvt_setup_meta_boxes() {

// Add the box to a particular custom content type page
 add_meta_box('lamvt_image_box', 'Upload Image', 'lamvt_render_image_attachment_box', 'post', 'normal', 'high');

}
add_action('admin_init','lamvt_setup_meta_boxes');

– Wp_insert_attachment:  Đây là chức năng thêm hình ảnh vào thư viện phương tiện và tạo ra tất cả các hình thu nhỏ phù hợp.  Bạn chỉ cần vượt qua một mảng các tùy chọn (tiêu đề, trạng thái bài đăng, v.v.) và đường dẫn LOCAL (không phải URL) tới tệp bạn vừa tải lên.  Chức năng này cho phép bạn có thể dễ dàng xóa tất cả các tệp đã tải lên bằng cách gọi wp_delete_attachment và truyền ID thư viện phương tiện của mục đó.  Với chức năng này, bạn cũng cần phải sử dụng wp_generate_attachment_metadata và wp_update_attachment_metadata, mà thực hiện chính xác những gì bạn mong đợi họ tạo siêu dữ liệu cho mục media.


function lamvt_update_post($post_id, $post) {

// Get the post type. Since this function will run for ALL post saves (no matter what post type), we need to know this.
// It's also important to note that the save_post action can runs multiple times on every post save, so you need to check and make sure the
// post type in the passed object isn't "revision"
$post_type = $post->post_type;

// Make sure our flag is in there, otherwise it's an autosave and we should bail.
if($post_id && isset($_POST['lamvt_manual_save_flag'])) {

// Logic to handle specific post types
switch($post_type) {

// If this is a post. You can change this case to reflect your custom post slug
case 'post':

// HANDLE THE FILE UPLOAD

// If the upload field has a file in it
if(isset($_FILES['lamvt_image']) && ($_FILES['lamvt_image']['size'] > 0)) {

// Get the type of the uploaded file. This is returned as "type/extension"
$arr_file_type = wp_check_filetype(basename($_FILES['lamvt_image']['name']));
$uploaded_file_type = $arr_file_type['type'];

// Set an array containing a list of acceptable formats
$allowed_file_types = array('image/jpg','image/jpeg','image/gif','image/png');

// If the uploaded file is the right format
if(in_array($uploaded_file_type, $allowed_file_types)) {

// Options array for the wp_handle_upload function. 'test_upload' => false
$upload_overrides = array( 'test_form' => false );

// Handle the upload using WP's wp_handle_upload function. Takes the posted file and an options array
$uploaded_file = wp_handle_upload($_FILES['lamvt_image'], $upload_overrides);

// If the wp_handle_upload call returned a local path for the image
if(isset($uploaded_file['file'])) {

// The wp_insert_attachment function needs the literal system path, which was passed back from wp_handle_upload
$file_name_and_location = $uploaded_file['file'];

// Generate a title for the image that'll be used in the media library
$file_title_for_media_library = 'your title here';

// Set up options array to add this file as an attachment
$attachment = array(
'post_mime_type' => $uploaded_file_type,
'post_title' => 'Uploaded image ' . addslashes($file_title_for_media_library),
'post_content' => '',
'post_status' => 'inherit'
);

// Run the wp_insert_attachment function. This adds the file to the media library and generates the thumbnails. If you wanted to attch this image to a post, you could pass the post id as a third param and it'd magically happen.
$attach_id = wp_insert_attachment( $attachment, $file_name_and_location );
require_once(ABSPATH . "wp-admin" . '/includes/image.php');
$attach_data = wp_generate_attachment_metadata( $attach_id, $file_name_and_location );
wp_update_attachment_metadata($attach_id, $attach_data);

// Before we update the post meta, trash any previously uploaded image for this post.
// You might not want this behavior, depending on how you're using the uploaded images.
$existing_uploaded_image = (int) get_post_meta($post_id,'_lamvt_attached_image', true);
if(is_numeric($existing_uploaded_image)) {
wp_delete_attachment($existing_uploaded_image);
}

// Now, update the post meta to associate the new image with the post
update_post_meta($post_id,'_lamvt_attached_image',$attach_id);

// Set the feedback flag to false, since the upload was successful
$upload_feedback = false;

} else { // wp_handle_upload returned some kind of error. the return does contain error details, so you can use it here if you want.

$upload_feedback = 'There was a problem with your upload.';
update_post_meta($post_id,'_lamvt_attached_image',$attach_id);

}

} else { // wrong file type

$upload_feedback = 'Please upload only image files (jpg, gif or png).';
update_post_meta($post_id,'_lamvt_attached_image',$attach_id);

}

} else { // No file was passed

$upload_feedback = false;

}

// Update the post meta with any feedback
update_post_meta($post_id,'_lamvt_attached_image_upload_feedback',$upload_feedback);

break;

default:

} // End switch

return;

} // End if manual save flag

return;

}
add_action('save_post','lamvt_update_post',1,2);

 

Xác lập quyền, sở hữu và an ninh

Nếu bạn gặp sự cố trong khi tải ảnh lên, có thể nó liên quan tới quyền quản trị trong trang nội dung. Để giải quyết vấn đề này, trước tiên, bạn phải đảm bảo rằng thư mục wp-content / uploads của bạn tồn tại và thuộc sở hữu của apache: apache.  Nếu vậy, bạn sẽ có thể thiết lập quyền truy cập đến 744. Quyền sở hữu rất quan trọng – thậm chí đặt perms đến 777 đôi khi sẽ không giúp đỡ nếu thư mục không phải là sở hữu đúng.

Bạn cũng nên xem xét hạn chế các loại tệp được tải lên và thực hiện bằng tệp htaccess.  Điều này ngăn người tải lên các tệp không phải là hình ảnh và từ thực thi các tập lệnh được ngụy trang dưới dạng hình ảnh.
Việc xây dựng trường tải ảnh trực tiếp vào bài viết trong trang quản trị website là điều rất quan trọng. Nó góp phần làm tăng thêm tính tương tác của người dùng vào bài viết, như vậy độ tin tưởng website sẽ tăng cao. Bởi vậy, bạn cần tìm hiểu thật kỹ vấn đề này để xử lý thật tốt.

<Files ^(*.jpeg|*.jpg|*.png|*.gif)>
order deny,allow
deny from all
</Files>

Xem thêm: Cài đặt gửi tin nhắn Chat Facebook vào WordPress

Tin mới nhất

VR PLUS (https://vrplus.vn/ ) Là một trong những dự án do Lamvt thực hiện trong thời gian gần đây. Như...

Trong một năm qua, chúng tôi đã xuất bản khoảng 79 bài viết SEO trên blog Ahrefs. Các bài viết...

Khám phá kĩ thuật viết nội dung SEO Nếu không có SEO, nội dung của bạn có thể bị chìm...

Các website về lĩnh vực làm đẹp cần phải có một thiết kế (design) hấp dẫn và bắt mắt. Điều...

Core Web Vitals được đo lường như thế nào? Làm thế nào để bạn biết các bản sửa lỗi đã...

Tin được yêu thích

Như đã nói, phần mềm chỉnh sửa video đang ngày càng chứng tỏ được tầm quan trọng của mình, nhất...

Nhiều bạn thắc mắc là sau khi cài đặt Plugin cho Google AMP thì làm thế nào để kiểm tra,...

Các trang web giáo dục và các trang web của chính phủ có một lợi thế hơn trong bảng xếp...

Nội dung là một trong 3 tiêu chí quan trọng để google đánh giá thứ hạng tìm kiếm cho website...

Thẻ <span> </span> Thẻ <span> là thẻ khá đặc biệt trong HTML, theo mặc định thì thẻ <span> được thêm...

Khách đang xem

  1. Trong bài viết này, bạn sẽ được tìm hiểu về tất cả các bước cần thiết làm nên thành công...
    13 giây trước
  2. Quản lý việc tải lên thế nào khi người dùng không đăng nhập? Các vấn đề liên quan tới thông...
    3 giây trước
  3. SEO tổng thể được ví như một cuộc đua dài hơi, mà ở đó đẳng cấp chính lại là những...
    25 giây trước
  4. Để tìm hiểu về Bootstrap các bạn cần có kiến thức cơ bản về HTML và CSS, những kiến thức...
    9 giây trước
  5. Trong bài viết này, nhóm SEO Lamvt.vn sẽ chỉ cho bạn chính xác cách bạn có thể sử dụng trình...
    26 giây trước
  6. Trước đây, để xây dựng được một liên kết hiệu quả không đơn thuần chỉ dựa trên số lượng mà...
    17 giây trước
  7. Bạn muốn tự tạo logo cho website WordPress của bạn? Logo giúp bạn tạo lập thương hiệu và làm cho...
    17 giây trước
  8. Nếu bạn bắt đầu tìm hiểu về Joomla chắc bạn cũng sẽ thắc mắc Joomla là gì? Nhiều người khuyên...
    9 giây trước
  9. Daucongnghiep.vn là website được Lamvt thiết kế và SEO; thông qua sự ủy nhiệm của Công ty Cổ phần Xây...
    8 giây trước
  10. Các content marketing thường cố gắng lựa chọn những chủ đề mà độc giả yêu thích để xây dựng nội dung bài viết...
    3 giây trước