1

我不想将此脚本包含在我的 wordpress 主题中，使其根据当前窗口高度调整帖子中所有图像的大小：

https://github.com/gutierrezalex/photo-resize

我在我的文本编辑器中制作了一个基本的测试页面，它可以很好地调整图像的大小。但是，当我尝试在我的 wordpress 主题中应用/包含它时，我根本无法让它工作。

请，任何帮助将不胜感激！

这是我的头部标签之间的内容：

<head><!-- HEAD BEGINS -->

<meta charset="<?php bloginfo( 'charset' ); ?>" />
<title><?php bloginfo('name'); ?> <?php wp_title(); ?></title>
<meta name="description" content="<?php bloginfo( 'description' ); ?>">

<script src="http://code.jquery.com/jquery-latest.js"></script> 
<script src="jquery-photo-resize.js"></script>
<script type="text/javascript" charset="utf-8">
    $(document).ready(function() {
        $("img").photoResize({
        bottomSpacing: 15
        });
    });
</script>

<link rel="profile" href="http://gmpg.org/xfn/11" />
<link rel="stylesheet" href="<?php echo get_stylesheet_uri(); ?>" type="text/css" media="screen" />
<link rel="pingback" href="<?php bloginfo( 'pingback_url' ); ?>" />
<?php if ( is_singular() && get_option( 'thread_comments' ) ) wp_enqueue_script( 'comment-reply' ); ?>
<link rel="shortcut icon" href="<?php echo get_stylesheet_directory_uri(); ?>/favicon.ico" />

<link href='http://fonts.googleapis.com/css?family=Raleway:700,400,500,300' rel='stylesheet' type='text/css'>
<link href='http://fonts.googleapis.com/css?family=Source+Sans+Pro:300,400,600,400italic' rel='stylesheet' type='text/css'>

<?php wp_head(); ?>

</head><!-- HEAD ENDS -->

这是位于同一文件夹中的脚本（文件名：jquery-photo-resize.js）：

/// <reference path="jquery-1.5.1.min.js" />

/*
* Adjust photo on browser window resize
* 
* @example: $('selector').photoResize();
* 
* @example:
$('selector').photoResize({
    bottomSpacing:"Bottom Spacing adjustment"
});
*/

(function ($) {

$.fn.photoResize = function (options) {

    var element = $(this), 
        defaults = {
            bottomSpacing: 10
        };

    $(element).load(function () {
        updatePhotoHeight();

        $(window).bind('resize', function () {
            updatePhotoHeight();
        });
    });

    options = $.extend(defaults, options);

    function updatePhotoHeight() {
        var o = options, 
            photoHeight = $(window).height();

        $(element).attr('height', photoHeight - o.bottomSpacing);
    }
};

}(jQuery));

我当前的functions.php：

<?php
add_theme_support( 'post-thumbnails' );

add_filter( 'post_thumbnail_html', 'my_post_image_html', 10, 3 );

function my_post_image_html( $html, $post_id, $post_image_id ) {

$html = '<a href="' . get_permalink( $post_id ) . '" title="' . esc_attr( get_the_title( $post_id ) ) . '">' . $html . '</a>';
return $html;
}

function register_my_menu() {
register_nav_menu('top-menu',__( 'Top Menu' ));
}
add_action( 'init', 'register_my_menu' );

function righter_filter_ptags($content) {
$content = preg_replace('/<p>\s*(<a .*>)?\s*(<img .* \/>)\s*(<\/a>)?\s*<\/p>/iU', '\1\2\3', $content);
$content = preg_replace('/<p>\s*(<iframe .*>*.<\/iframe>)\s*<\/p>/iU', '\1', $content);
$content = preg_replace('/<p>\s*(<samp .*>*.<\/samp>)\s*<\/p>/iU', '\1', $content);
return $content;
}

add_filter('the_content', 'righter_filter_ptags');
4

1 回答 1

1

好的，首先。适用于所有 wordpress 脚本。查询非常重要。因此，获取您的链接并执行以下操作：

避免资产冲突的最佳方法是正确地对文件进行排队。为此，您必须使用wp_enqueue_script

一个好的方法是把它作为函数的一部分放在你的functions.php文件中，就像这样

  1. 创建一个函数
  2. 插入wp_register_script函数
  3. 然后插入wp_enqeue_script到函数中
  4. 使用 add_action() 来初始化入队过程

所以 -

function load_scripts() {
  wp_register_script( 'script-name', get_template_directory_uri() . '/js/script.js', array( 'scriptyouwillwaittobeloaded' ) );
  wp_enqueue_script( 'script-name' );
}

add_action('wp_enqueue_scripts', 'load_scripts');

在本例中，函数 load_scripts() 将在 header.php 文件中被调用。看看 wp_register_script 也可以更好地理解它的论点，但总而言之 -

第一个参数：是您要用作此脚本引用的名称

第二个参数：是脚本的实际链接

第三个参数：是您要在此脚本之前加载的脚本（您要在此脚本加载之前等待的脚本）

而对于 wp_enqueue_script，参数只是对名称的引用（wp_register_script 的第一个参数）

add_action 函数参数：

第一个参数：你“挂钩”的函数

第二个参数：您创建的将被“挂钩”的函数

其次-<script src="http://code.jquery.com/jquery-latest.js"></script>实际上是jquery的远程文件的名称吗？尝试加载您自己的本地化版本。另外，确保没有其他东西正在加载 jquery（比如样板文件，你有什么）。

总而言之 - 由于 wordpress 的工作方式，您的代码没有加载。您的调整大小脚本正在根文件夹中查找，而不是在 wordpress 主题文件夹中，因此无法找到它。一个快速的解决方法是这样做<script src=<?php echo "'" . get_template_directory_uri() . "/jquery-photo-resize.js'" ?>></script>但是你应该认真考虑排队。

于 2013-09-30T19:13:48.437 回答