wordpress 媒体库无法上传图片 wordpress图片上传插件

wordpress图片插件

第1步-PHP文件-index.php (Step 1 - PHP File -- index.php)

---

---

uploaded_images. Next, create a new file named index.php

upload_images即可 。 接下来，创建一个名为index.php的新文件，并将其保存到新创建的文件夹中。 将以下代码复制到该文件中：

<?php

/*
Plugin Name: (Add a name for your plugin here)
Plugin URI: (Add a link to the plugin here if you want)
Description: (Add a description for your plugin here)
Version: 1.0.0 (This can start with 0.1, 1.0, 1.0.0, however you handle file versions)
Author: (Add your name here)
Author URI: (Add your website address here if you have one)
*/

/*
* Enclose all your functions in a class.
* Main Class - WPIU stands for WordPress Image Uploader.
*/

Class WPIU {
/* --------------------------------------------*
* Attributes
* -------------------------------------------- */

/** Refers to a single instance of this class. */

private static $instance = null;

/* Saved options */
public $options;

/* --------------------------------------------*
* Constructor
* -------------------------------------------- */

/**
* Creates or returns an instance of this class.
*
* @return WPIU_Theme_Options A single instance of this class.
*/
public static function get_instance() {

if (null == self::$instance) {
self::$instance = new self;
}

return self::$instance;
}

// end get_instance;

/**
* Initialize the plugin by setting localization, filters, and administration functions.
*/
private function __construct() {
// Add the page to the admin menu.
add_action('admin_menu', array(&$this, 'my_menu_page'));

// Register javascript.
add_action('admin_enqueue_scripts', array(&$this, 'enqueue_admin_js'));

// Add function on admin initalization.
add_action('admin_init', array(&$this, 'my_options_setup'));

// Call Function to store value into database.
add_action('init', array(&$this, 'store_in_database'));

// Call Function to delete image.
add_action('init', array(&$this, 'delete_image'));

// Add CSS rule.
add_action('admin_enqueue_scripts', array(&$this, 'add_stylesheet'));
}

/* --------------------------------------------*
* Functions
* -------------------------------------------- */

/**
* Function will add option page under Appearance Menu.
*/
public function image_menu_page() {
add_theme_page('media_uploader', 'Media Uploader', 'edit_theme_options', 'media_page', array($this, 'media_uploader'));
}

//Function that will display the options page.

public function media_uploader() {
global $wpdb;
$img_path = get_option('my_image');
?>

<form class="my_image" method="post" action="#">
<h2> <b>Select Where To Upload Your Image From: </b></h2>
<input type="text" name="path" class="image_path" value="<?php echo $img_path; ?>" id="image_path">
<input type="button" value="Upload Image" class="button-primary" id="upload_image"/>Select where to upload your image from.
<div id="show_upload_preview">

<?php if(! empty($img_path)){
?>
<img src="<?php echo $img_path ; ?>">
<input type="submit" name="remove" value="Remove Image" class="button-secondary" id="remove_image"/>
<?php } ?>
</div>
<input type="submit" name="submit" class="save_path button-primary" id="submit_button" value="Save Setting">

</form>
<?php
}

//Call three JavaScript library (jquery, media-upload and thickbox) and one CSS for thickbox in the admin head.

public function enqueue_admin_js() {
wp_enqueue_script('media-upload'); //Provides all the functions needed to upload, validate and give format to files.
wp_enqueue_script('thickbox'); //Responsible for managing the modal window.
wp_enqueue_style('thickbox'); //Provides the styles needed for this window.
wp_enqueue_script('script', plugins_url('upload.js', __FILE__), array('jquery'), '', true); //It will initialize the parameters needed to show the window properly.
}

//Function that will add stylesheet file.
public function add_stylesheet(){
wp_enqueue_style( 'stylesheet', plugins_url( 'stylesheet.css', __FILE__ ));
}

// Here the pages we are working with are checked to be sure they are the ones used by the Media Uploader.
public function my_options_setup() {
global $pagenow;
if ('media-upload.php' == $pagenow || 'async-upload.php' == $pagenow) {
// Now we will replace the 'Insert into Post Button inside Thickbox'
add_filter('gettext', array($this, 'replace_window_text'), 1, 2);
// gettext filter and every sentence.
}
}

/*
* Referer parameter in our script file is for to know from which page we are launching the Media Uploader as we want to change the text "Insert into Post".
*/
function replace_window_text($translated_text, $text) {
if ('Insert into Post' == $text) {
$referer = strpos(wp_get_referer(), 'media_page');
if ($referer != '') {
return __('Upload Image', 'my');
}
}
return $translated_text;
}

// The Function store image path in option table.
public function store_in_database(){
if(isset($_POST['submit'])){
$image_path = $_POST['path'];
update_option('my_image', $image_path);
}
}

// The Below Function Will Delete The Image.
function delete_image() {
if(isset($_POST['remove'])){
global $wpdb;
$img_path = $_POST['path'];

// We need to get the images meta ID.
$query = "SELECT ID FROM wp_posts where guid = '" . esc_url($img_path) . "' AND post_type = 'attachment'";
$results = $wpdb->get_results($query);

// And delete it
foreach ( $results as $row ) {
wp_delete_attachment( $row->ID ); //delete the image and also delete the attachment from the Media Library.
}
delete_option('my_image'); //delete image path from database.
}
}

}
// End class

WPIU::get_instance();

?>

Here is an explanation of all that code so you can customize it to meet your specifications:

这是所有代码的解释，因此您可以自定义代码以满足您的要求：

This file contains code to complete the following functions:

该文件包含完成以下功能的代码：

• Create a new plugin and enter its details like plugin name, plugin URI, description, version, author info etc.
• Create a main class named, WPIU that encloses following functions- 创建一个名为WPIU的主类，其中包含以下功能-
• Function get_instance() – create or return instance of the class. 函数get_instance（）–创建或返回类的实例。
• Function function_construct() used to perform following actions 函数function_construct（）用于执行以下操作

add_action()

add_action（）下调用的函数定义如下：

• add_action(‘admin_menu’, array(&$this, ‘my_menu_page’)) – call to a function my_menu_page and add its content to the admin menu.
• add_action(‘admin_enqueue_scripts’, array(&$this, ‘enqueue_admin_js’)) – call to a function enqueue_admin_js and enqueue script to the admin panel.
• add_action(‘admin_init’, array(&$this, ‘my_options_setup’)) – add function my_options_setup on admin initialization.
• add_action(‘init’, array(&$this, ‘store_in_database’)) – call to a function store_in_database to store value into the database.
• add_action(‘init’, array(&$this, ‘delete_image’)) – call to a function delete_image to delete the image.
• add_action(‘admin_enqueue_scripts’, array(&$this, ‘add_stylesheet’)); – call to a function add_stylesheet and add style to admin area.

my_menu_page() –

my_menu_page（）–此函数在外观菜单下添加一个选项页，并调用media_uploader函数。

media_uploader() –

media_uploader（）–此函数由页面内容组成，例如输入字段，要在前端显示的按钮等。

enqueue_admin_js() –

enqueue_admin_js（）–此函数在管理区域中包含一个javascript库和CSS文件。 嵌入列出的内置脚本（例如thickbox和媒体上传）非常重要

wp_enqueue_script(‘media-upload’) –

wp_enqueue_script（'media-u pload'）–提供上传，验证文件并为文件提供格式所需的所有功能

wp_enqueue_script(‘thickbox’) –

wp_enqueue_script（'thickbo x'）–管理模式窗口wp_enqueue_style（'thickbox'）-提供此窗口所需的样式

wp_enqueue_script (‘script’, plugins_url(‘upload.js’, __FILE__), array(‘jquery’), ”, true) –

wp_enqueue_script（'script'，plugins_url（'upload.js'，__FILE__），array（'jquery'），”，true）–初始化正确显示窗口所需的参数

plugins_url() –

plugins_url（）–用于指定javascript文件的URL

add_stylesheet() –

add_stylesheet（）–此函数有助于调用名为stylesheet.css的样式表文件

my_options_setup() –

my_options_setup（）–此函数检查工作页面是否为媒体上传器页面，并调用函数replace_window_text

replace_window_text() –

replace_window_text（）–此函数有助于更改媒体上载器启动页面的按钮文本。

store_in_database() –

store_in_database（）–此函数有助于将图像路径存储在WordPress数据库的选项表中。

delete_image() –

delete_image（）–此函数有助于从媒体库和数据库中删除图像及其URL。

第2步-JavaScript文件– upload.js (STEP 2 - JavaScript File – upload.js)

---

Create a javascript file named, upload.js and save it under the uploaded_images folder. Put the following code into that file:

---

创建一个名为upload.js的javascript文件，并将其保存在upload_images文件夹下。 将以下代码放入该文件：

$j = jQuery.noConflict();
$j(document).ready(function() {

/* user clicks the button on a custom field, runs the below code that opens a new window */
$j('#upload_image').click(function() {

/*Thickbox function aimed to show the media window. This function accepts three parameters:
*
* Name of the window: "In our case Upload a Image"
* URL : Executes a WordPress library that handles and validates files.
* ImageGroup : Since we are not going to work with groups of images but rather with just one image is why we set the value to false.
*/
tb_show('Upload a Image', 'media-upload.php?referer=media_page&type=image&TB_iframe=true&post_id=0', false);
return false;
});
// window.send_to_editor(html) is how WP would normally handle the received data. It will deliver image data in HTML format, so you can put them wherever you want.

window.send_to_editor = function(html) {
var image_url = $j('img', html).attr('src');
$j('#image_path').val(image_url);
tb_remove(); // calls the tb_remove() of the Thickbox plugin
$j('#submit_button').trigger('click');
}

});

The file contains code for  the following:

该文件包含以下代码：

• When a user clicks on the Upload Image button, WordPress will open the media uploader window. 当用户单击“ 上传图像”按钮时，WordPress将打开媒体上传器窗口。
• An On button click event launches the Thickbox function named tb_show() which will accept three different parameters in it.

• Name of the window
• This parameter is actually divided into sub parameters –

• WordPress uses a file named media-upload.php
• A Media uploader
• Type of the file, here it is image. You can also use audio, video, or file etc.
• TB_iframe
• post_id

• Set this option as false when you are not going to work with group of images.
• “ 单击”按钮事件会启动名为tb_show（）的Thinbox函数，该函数将在其中接受三个不同的参数。

• 窗口名称
• 此参数实际上分为子参数–
• media-upload.php的文件来管理窗口。
• 媒体上传器启动页面。
• 文件的类型，这里是图像。 您还可以使用音频，视频或文件等。
• TB_iframe
• post_id
• 当您不使用图像组时，将此选项设置为false。

()

第3步-CSS文件– stylesheet.css (STEP 3 - CSS File – stylesheet.css)

---

---

stylesheet.css

stylesheet.css的css文件，并将其保存在upload_images文件夹下。

This file contains the code to set the margin and padding of the image and the button that will appear in front end. Moreover, you can also customize the code according to your needs.

该文件包含用于设置图像的边距和填充的代码以及将出现在前端的按钮。 此外，您还可以根据需要自定义代码。

/*
Created on : Insert the date you created this file for version purposes.
Author : (Put your name here)
*/
.uploaded_image{
margin: 50px 0px 0px 40px;
}

.image_path{
width: 280px;
margin: 20px 10px 20px 0px;
}

#upload_image{
margin: 20px 4px 20px 0px;
}

#show_upload_preview{
margin-bottom: 20px;
}

#remove_image{
margin-left: 15px;

}

Hope this helps someone out!

希望这可以帮助某人！

翻译自: https://www.experts-exchange.com/articles/23559/Adding-the-Ability-for-Users-to-Upload-Images-or-other-things-to-Your-Plugin-Folder-in-WordPress.html

wordpress图片插件