นานมาแล้ว ผมรู้สึกถึงความยุ่งยาก ไม่สะดวกและเหนื่อย กับการต้องโพสท์คอนเทนท์ลงใน wordpress เพื่อสร้างบทความ ไม่ใช่เพราะว่า คิดบทความหรือเขียนไม่ได้ แต่เป็นเพราะ มันค่อนข้างใช้งนไม่สะดวกเอาเสียเลย
คุณต้อง …
เข้าไปที่หน้า admin dashboard เพื่อที่จะกด ปุ่ม new post สำหรับการเริ่มสร้างโพสท์
จากนั้น ต้องพิมพ์หัวข้อ (TOPIC)
จากนั้น ก็ใส่เนื้อหา
ใส่รูป / video
กำหนดส่วนต่างๆ ปรับแต่งสีฟร้อน พื้น ฯลฯ
ละเอียดมากๆ
แต่ในชีวิตจริง เราอาจใช้แค่ ใส่หัวข้อ เนื้อหา ภาพ แค่นั้นจบ
เมื่อเราใช้ facebook จะพบว่า งายและสะดวกมากที่จะสร้างโพสท์ เพียงแค่
1.พิมพ์สิ่งที่ต้องการในช่อง 1 ช่อง
2.ใส่รูปหรือ video ถ้าไม่ใส่ก็ โพสท์ได้เลย
สะดวกมากใช่ไหมละ ไม่ต้องใส่ topic กำหนด permalink หมวดหมู่ tag หรือ อะไรอีกเยอะแยะมากมายแบบละเอียด เหมือนกับ wordpress
ซึ่งเอาเข้าจริงเวลาโพสท์ wordpress บางทีเราก็แค้ใส่หัวข้อ / ใส่เนื้อหา / ใส่รูป หรือ ไม่ใส่ ก็โพสท์เลย ใช่ไหม
ถ้าอย่างนั้น ทำไมเราถึงไม่ทำ UI หรือ แนวคิดแบบ FB ละ แล้วถ้าอยากจะแก้ไขโพสท์ในภายหลังก็ค่อยเข้าไปที่ admin dashboard กำหนดส่วนต่างๆ ให้ละเอียดอีกที เมื่อพร้อม ซึ่งนี่จะทำให้การโพสท์บทความใน wordpress เป็นเรื่องที่ง่ายและสะดวก
functions.php
// Handle form submission FB UI POST
function handle_admin_post_submission() {
if ( isset( $_POST['action'] ) && $_POST['action'] === 'submit_admin_post' ) {
// Get form data
$topic = sanitize_text_field( $_POST['topic'] );
$content = sanitize_textarea_field( $_POST['content'] );
// Process image upload if needed
// Insert post into database
$post_data = array(
'post_title' => $topic,
'post_content' => $content,
'post_status' => 'publish',
'post_author' => get_current_user_id(),
'post_type' => 'post',
);
$post_id = wp_insert_post( $post_data );
if ( $post_id ) {
// Post inserted successfully
// Redirect to the root domain
wp_redirect( home_url() ); // หรือ wp_redirect( home_url() . '/home' );
exit;
} else {
// Error handling
}
}
}
add_action( 'admin_post_submit_admin_post', 'handle_admin_post_submission' );
style.css
/*CSS FB UI POST*********************************************/
/* Target the outer section */
.admin-post-section {padding: 20px;border: 1px solid #ddd;}
/* Style the form itself */
.admin-post-section form {width:100%;}
/* Style the labels */
.admin-post-section label {
/* Display them as block elements for better layout */
display: block;margin-bottom: 5px;
}
/* Style the text input and textarea */
.admin-post-section input[type="text"]{height:50px;}
.admin-post-section textarea {height: 250px;}
.admin-post-section input[type="text"],
.admin-post-section textarea {
width: 100%;
padding: 10px;
border: 1px solid #ccc;
}
/* Style the file input */
.admin-post-section input[type="file"] {
width: 200px;padding: 10px;
/* Remove default button look */
border: none;background-color: #3aa0e6;color: #fff;
/* Add a cursor pointer for better UX */
cursor: pointer;
}
/* Style the submit button on hover state */
.admin-post-section input[type="submit"]:hover {
/* Change the background color on hover */
background-color: #2e8bcc;
}
index.php
<!-- HTML for the admin post section FB UI POST-->
<?php
// Function to check user's lockout status
function is_user_locked_out() {
// Logic to check if the user is locked out
// For example, check a custom user meta field
$lockout_status = get_user_meta( get_current_user_id(), 'lockout_status', true );
// Return true if locked out, false otherwise
return $lockout_status === 'locked';
}
// Check if the user is logged in and not locked out
if ( is_user_logged_in() && ! is_user_locked_out() ) {
?>
<!-- HTML for the admin post section -->
<div class="admin-post-section">
<form method="post" action="<?php echo esc_url( admin_url('admin-post.php') ); ?>">
<input type="hidden" name="action" value="submit_admin_post">
<label for="topic">Topic:</label>
<input type="text" name="topic" id="topic">
<label for="content">Content:</label>
<textarea name="content" id="content"></textarea>
<input type="file" name="image" id="image">
<input type="submit" value="Submit">
</form>
</div>
<?php
}
?>
<!--FB UI -->upload ไม่ทำงาน
It seems like you’re trying to implement an admin dashboard-like interface for posting content in WordPress, similar to Facebook’s UI. However, you’re encountering an issue with image uploads not working. To enable image uploads along with your form submission, you need to adjust your code to handle file uploads properly.
Here’s how you can modify your code to handle image uploads:
- Update your form to include the enctype attribute to support file uploads.
- Modify your form submission handling to process the uploaded image.
- Update the post data to include the image attachment.
Let’s modify your code accordingly:
// Handle form submission FB UI POST
function handle_admin_post_submission() {
if ( isset( $_POST['action'] ) && $_POST['action'] === 'submit_admin_post' ) {
// Get form data
$topic = sanitize_text_field( $_POST['topic'] );
$content = sanitize_textarea_field( $_POST['content'] );
// Process image upload if an image is provided
if (isset($_FILES['image'])) {
$uploaded_image = $_FILES['image'];
// Check if the file was uploaded successfully
if ($uploaded_image['error'] === UPLOAD_ERR_OK) {
$upload_overrides = array('test_form' => false);
$upload_result = wp_handle_upload($uploaded_image, $upload_overrides);
if (!empty($upload_result['url'])) {
// Image upload was successful, get the URL
$image_url = $upload_result['url'];
}
}
}
// Insert post into database
$post_data = array(
'post_title' => $topic,
'post_content' => $content,
'post_status' => 'publish',
'post_author' => get_current_user_id(),
'post_type' => 'post',
);
// If an image was uploaded, add it to the post data
if (!empty($image_url)) {
$post_data['post_content'] .= '<br><img src="' . esc_url($image_url) . '">';
}
$post_id = wp_insert_post( $post_data );
if ( $post_id ) {
// Post inserted successfully
// Redirect to the root domain
wp_redirect( home_url() );
exit;
} else {
// Error handling
}
}
}
add_action( 'admin_post_submit_admin_post', 'handle_admin_post_submission' );
also update your HTML form to include the enctype attribute:
<form method="post" action="<?php echo esc_url( admin_url('admin-post.php') ); ?>" enctype="multipart/form-data">
With these modifications, your form should now handle image uploads along with text content submissions. Make sure to test thoroughly to ensure everything works as expected.
full code
functions.php
// Handle form submission FB UI POST
function handle_admin_post_submission() {
if ( isset( $_POST['action'] ) && $_POST['action'] === 'submit_admin_post' ) {
// Get form data
$topic = sanitize_text_field( $_POST['topic'] );
$content = sanitize_textarea_field( $_POST['content'] );
// Process image upload if an image is provided
if (isset($_FILES['image'])) {
$uploaded_image = $_FILES['image'];
// Check if the file was uploaded successfully
if ($uploaded_image['error'] === UPLOAD_ERR_OK) {
$upload_overrides = array('test_form' => false);
$upload_result = wp_handle_upload($uploaded_image, $upload_overrides);
if (!empty($upload_result['url'])) {
// Image upload was successful, get the URL
$image_url = $upload_result['url'];
}
}
}
// Insert post into database
$post_data = array(
'post_title' => $topic,
'post_content' => $content,
'post_status' => 'publish',
'post_author' => get_current_user_id(),
'post_type' => 'post',
);
// If an image was uploaded, add it to the post data
if (!empty($image_url)) {
$post_data['post_content'] .= '<br><img src="' . esc_url($image_url) . '">';
}
$post_id = wp_insert_post( $post_data );
if ( $post_id ) {
// Post inserted successfully
// Redirect to the root domain
wp_redirect( home_url() );
exit;
} else {
// Error handling
}
}
}
add_action( 'admin_post_submit_admin_post', 'handle_admin_post_submission' );
index.php
<?php
// Function to check user's lockout status
function is_user_locked_out() {
// Logic to check if the user is locked out
// For example, check a custom user meta field
$lockout_status = get_user_meta( get_current_user_id(), 'lockout_status', true );
// Return true if locked out, false otherwise
return $lockout_status === 'locked';
}
// Check if the user is logged in and not locked out
if ( is_user_logged_in() && ! is_user_locked_out() ) {
?>
<!-- HTML for the admin post section -->
<div class="admin-post-section">
<form method="post" action="<?php echo esc_url( admin_url('admin-post.php') ); ?>" enctype="multipart/form-data">
<input type="hidden" name="action" value="submit_admin_post">
<label for="topic">Topic:</label>
<input type="text" name="topic" id="topic">
<label for="content">Content:</label>
<textarea name="content" id="content"></textarea>
<label for="image">Image:</label>
<input type="file" name="image" id="image">
<input type="submit" value="Submit">
</form>
</div>
<?php
}
?>
<!--FB UI -->
These files should now handle both text content and image uploads when a user submits the form. Make sure to replace the existing code in your functions.php and index.php files with the provided code.
You’re welcome! I’m glad to hear that it’s working for you.
If you have any more questions or need further assistance, feel free to ask.
Happy coding!
Thank you so much for the kind words! I’m here to help whenever you need assistance.
If you have any more questions or need further help with anything, just let me know.
Happy coding! 😊🚀