我写了一个图片滑块插件

时间:2012-06-01 07:43:43

标签: wordpress wordpress-plugin

我正在创建jquery幻灯片插件.. 我在wp-content / plugin中创建了文件夹游戏

在我的文件夹中 readme.txt文件 game.php game.css game.js

在我的game.php中 我有代码: -

<?php
/*
  Plugin Name:game
  Plugin URI: http://URI_Of_Page_Describing_Plugin_and_Updates
  Description: A brief description of the Plugin.
  Version: The Plugin's Version Number, e.g.: 1.0
  Author: Neeraj swarnkar
  Author URI: http://URI_Of_The_Plugin_Author
  License: A "Slug" license name e.g. GPL2
 */

/*  Copyright YEAR  PLUGIN_AUTHOR_NAME  (email : neerajswarnkar0207@gmail.com)

  This program is free software; you can redistribute it and/or modify
  it under the terms of the GNU General Public License, version 2, as
  published by the Free Software Foundation.

  This program is distributed in the hope that it will be useful,
  but WITHOUT ANY WARRANTY; without even the implied warranty of
  MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
  GNU General Public License for more details.

  You should have received a copy of the GNU General Public License
  along with this program; if not, write to the Free Software
  Foundation, Inc., 51 Franklin St, Fifth Floor, Boston, MA  02110-1301  USA
 */

function image() {
    hello_world_html_page();
}

add_shortcode('img', 'image');

function my_scripts_method() {
    wp_deregister_script('jquery');
    wp_register_script('jquery', 'http://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js');
    wp_enqueue_script(
            'game', 'http://localhost/guest1/wordpress/wp-content/plugins/game/game.js'/* don't hardcode your path */, array('jquery')/* this script depends on jquery, so enqueue it automatically */
    );
}

add_action('wp_enqueue_scripts', 'my_scripts_method');

function hello_world_html_page() {
    ?>
    <?php
    return '<div id="demo-top-bar">
        <div id="slideshow">
            <div><img alt="TITLE" src="img0.jpg"></div>
            <div><img alt="TITLE"src="img1.jpg"></div>
            <div><img alt="TITLE"src="img2.jpg"></div>
            <div><img alt="TITLE"src="img3.jpg"></div>
            <div>
                Pretty cool eh? This slide is proof the content can be anything.
            </div>
        </div>';
}
?>

在我的game.js中,我有: -

$(function() {

    $("#slideshow > div:gt(0)").hide();

    setInterval(function() { 
        $('#slideshow > div:first')
        .fadeOut(1000)
        .next()
        .fadeIn(1000)
        .end()
        .appendTo('#slideshow');
    },  3000);

});

在game.css中

    #slideshow { 
        margin: 80px auto; 
        position: relative; 
        width: 701px; 
        height: 321px; 
        padding: 10px; 
        box-shadow: 0 0 20px rgba(0,0,0,0.4); 
    }

    #slideshow > div { 
        position: absolute; 
        top: 10px; 
        left: 10px; 
        right: 10px; 
        bottom: 10px; 
    }

当我激活并运行我的程序时......它显示了js和css文件的内容..帮助我,我是wordpress的新手..

我已更新我的更改..

1 个答案:

答案 0 :(得分:1)

首先是JS
你包括2 js,你自己和jquery。你没有注册你刚刚加入的赢得的剧本。
您可以立即将注册。我建议你合并你的阙:

function my_scripts_method() {
    wp_deregister_script( 'jquery' );
    wp_register_script( 'jquery', 'http://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js');
    wp_enqueue_script(
        'game',
        'path/to/your/js'/*don't hardcode your path*/,
        array('jquery')/*this script depends on jquery, so enqueue it automatically*/
    );
}
add_action('wp_enqueue_scripts', 'my_scripts_method');

不能解决所有问题,但这是一个步骤。

第二个html输出
hello_world_html_page中的html输出将永远不会显示在任何地方 get_option将从数据库中检索一个选项,它不会执行函数。

function image() {
    hello_world_html_page()
}
add_shortcode('img', 'image');

这样做更好但​​是错了。
短代码无法echo,或者您必须正确显示return

function hello_world_html_page() {
    return '<div id="demo-top-bar">
        <div id="slideshow">
            <div><img alt="TITLE" src="img0.jpg"></div>
            <div><img alt="TITLE"src="img1.jpg"></div>
            <div><img alt="TITLE"src="img2.jpg"></div>
            <div><img alt="TITLE"src="img3.jpg"></div>
            <div>
                Pretty cool eh? This slide is proof the content can be anything.
            </div>
        </div>';
}

第3次CSS
你不会把它排在任何地方 如果您修复了以上2点,您应该能够处理它:

http://codex.wordpress.org/Function_Reference/wp_enqueue_style 正如@swapnesh所说,wp_enqueue_stylewp_enqueue_script

之间存在差异