A few days ago, I saw a very beautiful js pop-up image plug-in on the official website of "First Love 1/1" of tone work. I resolutely saved it and prepared to combine it with the WordPress album function. After more than five hours of hard work, I completed a WordPress native album transformation plug-in. You can click the photo album thumbnail below to view the effect, or visit This link Download the plug-in.
This article records the process that I (PHP Xiaobai) completed the plug-in, which includes two parts: WP plug-in introduction and album transformation.
Getting Started with WP Plug ins
Plug ins can add optional functions to Wordpress and enable code reuse. Therefore, no matter which theme you change, you can experience the same function as long as you enable the plug-in.
Plug in declaration
The declaration of the WordPress plug-in is very simple. As long as you write a comment in the following format in the php file and place it in the plug-in folder, wp will automatically search for and load the file.
First, create a folder, and create a blank php file in the folder. Open the php file with an editor, and click<? Then write the statement of the plug-in, as shown below:
<? php /** * Plugin Name: WP Gallery LightBox Plus * Plugin URI: https://www.azimiao.com/3861.html *Description: Add WP's own album ❤ LightBox special effect ❤ Widgets for * Version: 1.0.2 *Author: Hare ❤ Zimiao haunts * Author URI: https://www.azimiao.com */ ?>
After saving, place this folder in the plugin directory of WordPress, and visit the background to see the effect. If nothing unexpected happens, you will see an enabled plug-in, as shown below.
You can try to enable it, although it has no actual function.
The first line of PHP code
A php file containing plug-in declarations is the entry point for plug-in code execution. When wp initializes, the code in this file will be executed (please refer to relevant materials for wp initialization execution order). Open the previously created PHP file with an editor, and click "> Enter the following code before
echo "Hello WordPress ! ";
Save and enable this plug-in. You will find that every page will output a "Hello WordPress". Isn't it cool? From this example, we further understand the meaning of the plug-in code execution entry.
Original album transformation
requirement analysis
The purpose of requirement analysis is to clarify development requirements and avoid time waste and functional redundancy caused by blind development. According to my analysis, the most urgent needs at present are divided into the following two points:
- The reformed album foreground style realizes the picture pop-up effect of tone work's official website.
- The method of adding the modified album in the background should be compatible with the original album.
At present, the low priority demands are as follows:
- The background setting page is provided, including functions such as user-defined style and optional import/export.
- The foreground js plug-in is replaced with a new version, and the old version based on Prototype is discarded.
- The new version Js plug-in is modified to achieve the opening effect of the old version plug-in.
development process
The following records my development process, and includes a description of the code principle of this small plug-in.
1. Replace the callback method of the original album
The photo album function of wp is realized by short code. After consulting the data, it is found that the callback function of the photo album short code is registered in line 1595 of media.php (wordpress4.7.8), and the callback function name is gallery_shortcode.
add_shortcode('gallery', 'gallery_shortcode');
You can quickly understand the function of this function by looking at the function body of this function, but there is no more explanation here.
Write the following two lines of code in the plug-in php file we created. Their purpose is to remove the original function callback and bind our own function callback.
remove_shortcode('gallery', 'gallery_shortcode'); add_shortcode('gallery', 'zm_gallery_shortcode');
The following work is very simple. Define a zm_gallery_shortcode function, copy the gallery_shortcode function body of media.php, and modify it as needed. After modification, save and enable the plug-in. At this time, the output page of the album in the foreground is determined by your zm_gallery_shortcode function.
2. Add to the background management page
I have defined a class (see this plug-in wp gallery light admin. php). In the constructor of the class, attach the function hook admin_menu through the following code, which will call back the init method of this object ($this). The admin_menu hook will be executed when wp initializes, which can be understood as a delegation.
add_action("admin_menu",array($this,"init"));
The menu item is registered in the init method. For the parameters of this function, see the wp official website. The penultimate parameter represents the link address of the plug-in management page. In the last parameter, I specify the processing object ($this) and processing function (optionPage) when accessing the link.
add_options_page("WP-Gallery-LightBox","WP-Gallery-LightBox","manage_options","wp_gallerylightbox_setting",array($this,"optionPage"));
The optionPage method outputs the background management page, and uses the get_option and update_option methods of wp to obtain and update plug-in setting parameters.
3. zm_gallery_shortcode is modified to output according to parameters
In the zm_gallery_shortcode method, get the plug-in setting parameters through the get_option method, and splice the output statements according to the parameter values.
4. Storage and testing
After uploading the test, it is found that the string output from the foreground meets the expectation, but the js plug-in reports an error. After investigation, the reason is that the $symbol of the prototype plug-in conflicts with the $symbol of the JQuery plug-in introduced by the blog. We are going to replace the js plug-in with the latest version based on JQuery.
5. Modify the new js plug-in
The appearance of the new version of Lightbox plug-in is not as beautiful as the old plug-in, and its animation effect is not as beautiful as the old plug-in. I mainly modified the zoom, appearance, and hidden animation effects in the new plug-in's js code, and modified the style of the foreground part to approach the unique effect of the old plug-in.
6. Modify the original output method
The output string required by the new version of Lightbox plug-in is slightly different from that of the old plug-in. Modify zm_gallery_shortcode as needed.
7. Storage and testing
After the upload test, its function is normal, and the effect of the modified new js plug-in is close to that of the old plug-in, and the requirements are basically met.
summary
Life is short. I use typecho.
