我知道有几个与此相关的问题,并查看了它们,但我的问题和代码略有不同。我基本上是在构建我的第一个主题,并希望实现prettypoto,我一直很小心地将脚本和jQuery排队,并让NivoSlider正常工作,但显然在这里遗漏了一些东西,因此我提出了这个问题!
首先,我在函数中有WP jQuery的代码。php文件:
function scripts_jquery_load_scripts() {
wp_enqueue_script( \'jquery\' );
}
add_action(\'wp_enqueue_scripts\', \'scripts_jquery_load_scripts\');
对于Prettypoto,我在函数中也有以下代码。php:
function prettyphoto_load_scripts() {
wp_register_script( \'jquery.prettyphoto\', get_bloginfo(\'template_directory\').\'/prettyphoto/js/jquery.prettyphoto.js\', array(\'jquery\'));
wp_enqueue_script( \'jquery.prettyphoto\' );
}
add_action(\'wp_enqueue_scripts\', \'prettyphoto_load_scripts\');
对于风格
function prettyphoto_load_styles() {
wp_register_style( \'prettyphotocss\', get_bloginfo(\'template_directory\').\'/prettyphoto/css/prettyphoto.css\');
wp_enqueue_style( \'prettyphotocss\' );
}
add_action(\'wp_enqueue_style\', \'prettyphoto_load_styles\');
最后在图像周围的链接上添加rel“prettypoto”
add_filter(\'the_content\', \'addprettyphotorel\', 12);
add_filter(\'get_comment_text\', \'addprettyphotorel\');
function addprettyphotorel ($content) {
global $post;
$pattern = "/<a(.*?)href=(\'|\\")([^>]*).(bmp|gif|jpeg|jpg|png)(\'|\\")(.*?)>(.*?)<\\/a>/i";
$replacement = \'<a$1href=$2$3.$4$5 rel="prettyphoto[\'.$post->ID.\']"$6>$7</a>\';
$content = preg_replace($pattern, $replacement, $content);
return $content;
}
我使用了Firebug来尝试找出我的错误所在,我有WP includes Jquery出现在头部,还有Prettypoto脚本。同时检查图像容器,我会显示以下内容:
<a title="European Rugby 7s-29" rel="prettyphoto[230]" href="http://localhost/wp-content/uploads/2012/08/European-Rugby-7s-29.jpg"><img title="European Rugby 7s-29" alt="European Rugby 7s-29" class="attachment-thumbnail" src="http://localhost/wp-content/uploads/2012/08/European-Rugby-7s-29-150x150.jpg"></a>
但是缩略图仍然在新窗口中打开,而不是在Prettypto中打开。我已在WP配置中将WP\\u DEBUG设置为true。php文件,也解决了一些不相关的问题,以防它们产生影响。
目前,我正在WAMP服务器上运行这一切,并计划第二天上线,看看这是否有助于解决问题,我知道Jetpack在WAMP上不起作用。
如果有人有任何可能的建议,我们将不胜感激?
提前感谢,
蚂蚁
其他信息
将此添加为Firebug的一些详细信息,下面是页面头部显示的内容:
<script src="http://localhost/wp-includes/js/jquery/jquery.js?ver=1.7.2" type="text/javascript"></script>
<script src="http://localhost/wp-content/themes/director/js/responsive-images.js?ver=3.4.1" type="text/javascript"></script>
<script src="http://localhost/wp-content/themes/director/prettyphoto/js/jquery.prettyphoto.js?ver=3.4.1" type="text/javascript"></script>
我还查看了运行Firebug时的脚本选项卡,在列表中,响应图像首先出现,然后是Prettypoto,最后是jQuery。我假设脚本按照头中列出的顺序加载?
最合适的回答,由SO网友:Ant 整理而成
好的,在我最初使用的代码上尝试了几天各种变体之后,我仍然没有成功。我把我的主题从头开始,并再次尝试代码,我甚至测试了2111主题的代码,但仍然没有乐趣。我有答案,但没有使用上面的代码。
为了注册脚本并将其排队,我将以下内容放入函数中。php:
<?php
function prettyphoto_load_scripts() {
wp_register_script( \'jquery.prettyphoto\', get_bloginfo(\'template_directory\').\'/prettyphoto/jquery.prettyPhoto.js\',array(\'jquery\')); // array(\'jquery\') = new script depends on Jquery, cause WordPress to load Jquery before the new script.
wp_enqueue_script( \'jquery.prettyphoto\' );
wp_register_script( \'enablepretty\', get_bloginfo(\'template_directory\').\'/prettyphoto/enablepp.js\'); // array(\'jquery\') = new script depends on Jquery, cause WordPress to load Jquery before the new script.
wp_enqueue_script( \'enablepretty\' );
wp_register_style( \'prettyphotocss\', get_bloginfo(\'template_directory\').\'/prettyphoto/css/prettyPhoto.css\');
wp_enqueue_style( \'prettyphotocss\' );
}
add_action(\'wp_enqueue_scripts\', \'prettyphoto_load_scripts\',11);
?>
我正在注册和排队的第二个脚本名为enablepretty。js将启用Prettypto,其内容如下:
jQuery(document).ready(function() {
var items = jQuery(\'div#textcontent-container a\').filter(function() {
if (jQuery(this).attr(\'href\'))
return jQuery(this).attr(\'href\').match(/\\.(jpg|png|gif|JPG|GIF|PNG|Jpg|Gif|Png|JPEG|Jpeg)/);
});
if (items.length > 1){
var gallerySwitch="[customPP]";
}else{
var gallerySwitch="";
}
items.attr(\'data-rel\',\'prettyPhoto\'+gallerySwitch);
jQuery("a[data-rel^=\'prettyPhoto\']").prettyPhoto({
});
});
注意“div#textcontent”容器特定于我的测试主题,您需要将其更改为围绕您的库或内容的div。我使用了数据rel=“prettypoto”而不是rel=“prettypoto”,这将避免验证HTML5时出现问题。
希望这对其他人有帮助!
蚂蚁