WordPress 网页设计初心者的第一支外挂

WordPress 网页设计师的第一支外挂

刚开始接触Wordpress是使用安装主题及在wordpress.org找免费外挂,东拼西凑的将所需的功能整合。对于不会写PHP的设计师来说着实很方便,但唯一美中不足的是我需要花很多时间测试外挂和确定外挂和主题他们能够好好相处。

近期因为客户提供了一个zip档,内含html、css、js各一支档案,主要功能为一个表单填表后送至预约订房网站。此时脑子灵机一现,好像可以试试看写一个小外挂。

注:此外挂没有后台管理介面。因为这真的是一只非常非常简单的外挂。

正文:

在整个外挂根目录v123-Fastbooking内有唯一一支php,

/*
* Plugin Name: V123 DEV Fastbooking
* Plugin URI: https://v123.tw
* Description: 此外挂提供预约订房之跟屁虫功能 <a href="https://v123.tw">by 威得</a>
* Author: v123
* Version: 1.01.0
* Author URI: <a href="https://v123.tw">威得</a>
*/

上方的注解文字是后台的外挂清单所呈现的内容,冒号前方的名称不能修改,后方为显示的部分,如下图。

这支档案:

<?php
/*
 * Plugin Name: V123 DEV Fastbooking
 * Plugin URI: https://v123.tw
 * Description: 此外挂提供预约订房之跟屁虫功能 <a href="https://v123.tw">by 威得</a>
 * Author: v123
 * Version: 1.01.0
 * Author URI: <a href="https://v123.tw">威得</a>
 */

if ( ! defined( 'ABSPATH' ) ) {
	exit; // Exit if accessed directly.
}

/**
* 载入CSS, 并依赖 main_css
*/
function my_css_method() {
 wp_enqueue_style('v123dev_fastbooking', plugins_url( '/css/v123-fastbooking.css' , __FILE__ ) );
}
add_action( 'wp_enqueue_scripts', 'my_css_method' );


/**
* 载入Javascript , 并依赖 jquery & jquery-ui-tabs
*/
function my_scripts_method() {
 wp_enqueue_script( 'v123dev_leanModal', plugins_url( '/js/leanmodule.js' , __FILE__ ) );
 wp_enqueue_script( 'v123dev_fblib', plugins_url( '/js/fblib.js' , __FILE__ ) );
 wp_enqueue_script( 'v123dev_fbparam', plugins_url( '/js/fbparam.js' , __FILE__ ) );
 wp_enqueue_script( 'v123dev_fastbookingjs', plugins_url( '/js/v123-fastbooking.js' , __FILE__ ) );
}
add_action( 'wp_enqueue_scripts', 'my_scripts_method' );


/**
* 挂一个东西在footer的地方
*/
function v123dev_function() {
    ?>
    <div>这里可以放HTML code表单和要挂在footer的东西</div>
    <?php
}
add_action( 'wp_footer', 'v123dev_function' );

防止直接连线访问您的档案  (有关安全性问题,非常重要)

if ( ! defined( 'ABSPATH' ) ) {
	exit; // Exit if accessed directly.
}

从资料夹内载入一支CSS

/**
* 载入CSS, 并依赖 main_css
*/
function my_css_method() {
 wp_enqueue_style('v123dev_fastbooking', plugins_url( '/css/v123-fastbooking.css' , __FILE__ ) );
}

add_action( 'wp_enqueue_scripts', 'my_css_method' );

从资料夹内载入三支Js

/**
* 载入Javascript , 并依赖 jquery & jquery-ui-tabs
*/
function my_scripts_method() {
 wp_enqueue_script( 'v123dev_leanModal', plugins_url( '/js/leanmodule.js' , __FILE__ ) );
 wp_enqueue_script( 'v123dev_fblib', plugins_url( '/js/fblib.js' , __FILE__ ) );
 wp_enqueue_script( 'v123dev_fbparam', plugins_url( '/js/fbparam.js' , __FILE__ ) );
 wp_enqueue_script( 'v123dev_fastbookingjs', plugins_url( '/js/v123-fastbooking.js' , __FILE__ ) );
}
add_action( 'wp_enqueue_scripts', 'my_scripts_method' );

将您想要插入的HTML程式码用Wordpress所释出的Hook勾入,这边使用wp_footer这个钩子将程式码插入在footer的地方

/**
* 挂一个东西在footer的地方
*/
function v123dev_function() {
    ?>
    <div>这里可以放HTML code表单和要挂在footer的东西</div>
    <?php
}
add_action( 'wp_footer', 'v123dev_function' );

相关连结:

WordPress的Hook机制与原理

WordPress官方的Hook参考及介绍

发布留言

发布留言必须填写的电子邮件地址不会公开。 必填栏位标示为 *

这个网站采用 Akismet 服务减少垃圾留言。进一步了解 Akismet 如何处理网站访客的留言资料