wordpress图片插件_为用户增加将图片（或其他内容）上传到WordPress中的插件文件夹的能力

wordpress图片插件

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

---

---

Create a new folder in your plugin folder. For the sake of this example just call it uploaded_images. Next, create a new file named index.php and save it into the newly created folder. Copy the below code into that file:

在您的插件文件夹中创建一个新文件夹。 为了这个示例，只需将其命名为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.
  创建一个新插件，并输入其详细信息，例如插件名称，插件URI，描述，版本，作者信息等。
• 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（）用于执行以下操作

Note: Functions called under add_action() defined below:

注意：在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_menu'，array（＆$ this，'my_menu_page'））–调用函数my_menu_page并将其内容添加到管理菜单。
• 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_enqueue_ scripts'，array（＆$ this，'enqueue_admin_js'））–调用函数enqueue_admin_js并将脚本放入管理面板。
• add_action(‘admin_init’, array(&$this, ‘my_options_setup’)) – add function my_options_setup on admin initialization.
  add_action（'admin_init'，array（＆$ this，'my_options_setup'））–在管理员初始化时添加函数my_options_setup。
• 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，'store_in_database'））–调用函数store_in_database以将值存储到数据库中。
• add_action(‘init’, array(&$this, ‘delete_image’)) – call to a function delete_image to delete the image.
  add_action（'init'，array（＆$ this，'delete_image'））–调用函数delete_image删除图像。
• add_action(‘admin_enqueue_scripts’, array(&$this, ‘add_stylesheet’)); – call to a function add_stylesheet and add style to admin area.
  add_action（'admin_enqueue_ 脚本'，数组（＆$ this，'add_stylesheet'））; –调用函数add_stylesheet并将样式添加到管理区域。

Function my_menu_page() – This function adds an option page under the appearance menu and calls the media_uploader function.

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

Function media_uploader() – This function consists of the page contents like input fields, buttons that you want to display in front end, etc.

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

Function enqueue_admin_js() – This function includes a javascript library and a CSS file in the admin area. It is important to embed listed built-in scripts like thickbox and media upload

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

Function wp_enqueue_script(‘media-upload’) – provides all the functions needed to upload, validate and give format to files

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

Function wp_enqueue_script(‘thickbox’) – manages the modal window wp_enqueue_style (‘thickbox’) – provides the styles needed for this window

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

Function wp_enqueue_script (‘script’, plugins_url(‘upload.js’, __FILE__), array(‘jquery’), ”, true) – Initialize the parameters needed to show the window properly

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

Like plugins_url() – used to specify the URL of the javascript file

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

Function add_stylesheet() – This function helps to call the stylesheet file, named stylesheet.css

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

Function my_options_setup() – This function checks working pages are media uploader pages or not and gives a call to function replace_window_text

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

Function replace_window_text() – This function helps to change the button text of the media uploader launch page.

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

Function store_in_database() – This function helps to store the image path in the option table of the WordPress database.

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

Function delete_image() – This function helps to delete the image and its URL from both the media library as well as the database.

函数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 to manage the window.
    • A Media uploader launching page.
    • Type of the file, here it is image. You can also use audio, video, or file etc.
    • TB_iframe : always set this parameter as true, so that window shown in an iframe.
    • post_id : set id as 0 which means the image will not be attached to any post.
  • Set this option as false when you are not going to work with group of images.
  “ 单击”按钮事件会启动名为tb_show（）的Thinbox函数，该函数将在其中接受三个不同的参数。
  
  • 窗口名称
  • 此参数实际上分为子参数–
    
    • WordPress使用名为media-upload.php的文件来管理窗口。
    • 媒体上传器启动页面。
    • 文件的类型，这里是图像。 您还可以使用音频，视频或文件等。
    • TB_iframe ：始终将此参数设置为true，以便在iframe中显示该窗口。
    • post_id ：将id设置为0，这表示该图片不会附加到任何帖子中。
  • 当您不使用图像组时，将此选项设置为false。

()

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

---

---

Create a css file named, stylesheet.css and save it under uploaded_images folder.

创建一个名为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图片插件