Ajaxify Wordpress网站与社交插件
Ajaxify Wordpress site with Social Plugins
我安装了插件"Ajaxify Wordpress Site",我也在使用"Easy Social Share buttons"。ajax加载旧/新页面的内容非常好,而不加载页面的其余部分(请参阅www.squanderedink.com)。然而,当加载时,社交按钮计数器不会更新。
Easy Social Share给了我以下代码,这些代码必须放在ajax加载完成后:
jQuery('.essb_links.essb_counters').essb_get_counters();
jQuery('.essb_counters .essb_links_list').essb_update_counters();
我添加了以下代码,但现在计数器"堆栈"(即,它们的计数器随着时间的推移而重复,页面通过ajax刷新)
//Update social
$(document).ready(function () {
$("body").live("runScripts", function () {
jQuery('.essb_links.essb_counters').essb_get_counters();
jQuery('.essb_counters .essb_links_list').essb_update_counters();
});
$("body").trigger("runScripts"); // This line should also be added to the Ajax File
});
谢谢,Kyle
AJAX代码:
(function (window, undefined) {
// Prepare our Variables
var
History = window.History,
$ = window.jQuery,
document = window.document;
// Check to see if History.js is enabled for our Browser
if (!History.enabled) return false;
// Wait for Document
$(function () {
// Prepare Variables
var
// Application Specific Variables
rootUrl = aws_data['rootUrl'],
contentSelector = '#' + aws_data['container_id'],
$content = $(contentSelector),
contentNode = $content.get(0),
// Application Generic Variables
$body = $(document.body),
scrollOptions = {
duration: 800,
easing: 'swing'
};
// Ensure Content
if ($content.length === 0) $content = $body;
// Internal Helper
$.expr[':'].internal = function (obj, index, meta, stack) {
// Prepare
var
$this = $(obj),
url = $this.attr('href') || '',
isInternalLink;
// Check link
isInternalLink = url.substring(0, rootUrl.length) === rootUrl || url.indexOf(':') === -1;
// Ignore or Keep
return isInternalLink;
};
// HTML Helper
var documentHtml = function (html) {
// Prepare
var result = String(html).replace(/<'!DOCTYPE[^>]*>/i, '')
.replace(/<(html|head|body|title|script)(['s'>])/gi, '<div id="document-$1"$2')
.replace(/<'/(html|head|body|title|script)'>/gi, '</div>');
// Return
return result;
};
// Ajaxify Helper
$.fn.ajaxify = function () {
// Prepare
var $this = $(this);
// Ajaxify
$this.find('a:internal:not(.no-ajaxy,[href^="#"],[href*="wp-login"],[href*="wp-admin"])').on('click', function (event) {
// Prepare
var
$this = $(this),
url = $this.attr('href'),
title = $this.attr('title') || null;
// Continue as normal for cmd clicks etc
if (event.which == 2 || event.metaKey) return true;
// Ajaxify this link
History.pushState(null, title, url);
event.preventDefault();
return false;
});
// Chain
return $this;
};
// Ajaxify our Internal Links
$body.ajaxify();
// Hook into State Changes
$(window).bind('statechange', function () {
// Prepare Variables
var
State = History.getState(),
url = State.url,
relativeUrl = url.replace(rootUrl, '');
// Set Loading
$body.addClass('loading');
// Start Fade Out
// Animating to opacity to 0 still keeps the element's height intact
// Which prevents that annoying pop bang issue when loading in new content
if ('' != aws_data['transition']) {
$content.animate({
opacity: 0
}, 800);
}
if ('' != aws_data['loader']) {
$content
.html('<img src="' + rootUrl + 'wp-content/plugins/ajaxify-wordpress-site/images/' + aws_data['loader'] + '" />')
.css('text-align', 'center');
}
// Ajax Request the Traditional Page
$.ajax({
url: url,
success: function (data, textStatus, jqXHR) {
// Prepare
var
$data = $(documentHtml(data)),
$dataBody = $data.find('#document-body:first ' + contentSelector),
bodyClasses = $data.find('#document-body:first').attr('class'),
contentHtml, $scripts;
var $menu_list = $data.find('.' + aws_data['mcdc']);
//Add classes to body
jQuery('body').attr('class', bodyClasses);
// Fetch the scripts
$scripts = $dataBody.find('#document-script');
if ($scripts.length) $scripts.detach();
// Fetch the content
contentHtml = $dataBody.html() || $data.html();
if (!contentHtml) {
document.location.href = url;
return false;
}
// Update the content
$content.stop(true, true);
$content.html(contentHtml)
.ajaxify()
.css('text-align', '')
.animate({
opacity: 1,
visibility: "visible"
});
//Scroll to the top of ajax container
if ('' != aws_data['scrollTop']) {
jQuery('html, body').animate({
scrollTop: jQuery(contentSelector).offset().top
}, 1000);
}
//Append new menu HTML to provided classs
$('.' + aws_data['mcdc']).html($menu_list.html());
$body.ajaxify();
//Adding no-ajaxy class to a tags present under ids provided
$(aws_data['ids']).each(function () {
jQuery(this).addClass('no-ajaxy');
});
// Update the title
document.title = $data.find('#document-title:first').text();
try {
document.getElementsByTagName('title')[0].innerHTML = document.title.replace('<', '<')
.replace('>', '>')
.replace(' & ', ' & ');
} catch (Exception) {}
// Add the scripts
$scripts.each(function () {
var scriptText = $(this).html();
if ('' != scriptText) {
scriptNode = document.createElement('script');
scriptNode.appendChild(document.createTextNode(scriptText));
contentNode.appendChild(scriptNode);
} else {
$.getScript($(this).attr('src'));
}
});
// BuddyPress Support
if (aws_data['bp_status']) {
$.getScript(rootUrl + '/wp-content/plugins/buddypress/bp-templates/bp-legacy/js/buddypress.js');
}
$body.removeClass('loading');
// Inform Google Analytics of the change
if (typeof window.pageTracker !== 'undefined') window.pageTracker._trackPageview(relativeUrl);
// Inform ReInvigorate of a state change
if (typeof window.reinvigorate !== 'undefined' && typeof window.reinvigorate.ajax_track !== 'undefined')
reinvigorate.ajax_track(url); // ^ we use the full url here as that is what reinvigorate supports
},
error: function (jqXHR, textStatus, errorThrown) {
document.location.href = url;
return false;
}
}); // end ajax
}); // end onStateChange
}); // end onDomLoad
})(window); // end closure
搜索"//更新内容"并将其放在该代码之后。
相关文章:
- Wordpress插件根据需要加载js和css
- Ajaxify Wordpress网站与社交插件
- 如何在没有插件和Wordpress的情况下创建共享社交媒体
- 这个插件php wordpress中的全局类名是什么
- Wordpress更新后出现插件错误
- Wordpress cforms插件CAPTCHA图像未显示
- JS错误导致WordPress插件无法工作
- 访问插件JS中的Wordpress PHP变量
- Javascript插件在Wordpress中附加重复数据
- 在wordpress主题中添加花哨的灯箱,而无需使用插件
- WordPress幻灯片插件错误
- 如何在wordpress插件中获取jquery中的img url和文件url
- wordpress和javascript插件的兼容性
- 简单的Javascript在Wordpress/WooCommerce插件中不起作用
- 3d图层滑块Wordpress插件:编辑3d颜色
- 插件在WordPress 4.5更新后抛出TypeError
- 如何限制JSON API WordPress插件
- 插件导致Wordpress图像滑块中的JavaScript冲突
- Wordpress basic'引导程序'插件开发代码
- wordpress插件中的jQuery图像幻灯片