javascript - negrita - strong css
Cómo implementar correctamente un ajax personalizado (2)
Para mantener el logotexto <div class="small-7 medium-4 columns logo"> y el menú <nav class="pagedMenu" role="navigation"> , sin recorte en la actualización de la página o mientras el contenido se carga desde de una página a otra, estoy tratando de implementar esta solución hecha por @Buzinas (gracias especiales). En algunas palabras más:
En header.php tenemos este script:
<head>
...
<script>
function ajax(url, callback, method, params) {
if (!method) method = ''GET'';
var xhr = new XMLHttpRequest();
xhr.open(method, url);
if (callback) xhr.addEventListener(''load'', function() {
callback.call(this, xhr);
});
if (params) {
params = Object.keys(params).map(function(key) {
return encodeURIComponent(key) + ''='' + encodeURIComponent(params[key]);
}).join(''&'');
xhr.send(params);
} else {
xhr.send();
}
}
// CUSTOM AJAX CONTENT LOADING FUNCTION
function ajaxRevslider(obj) {
// obj.type : Post Type
// obj.id : ID of Content to Load
// obj.aspectratio : The Aspect Ratio of the Container / Media
// obj.selector : The Container Selector where the Content of Ajax will be injected. It is done via the Essential Grid on Return of Content
var content = "";
data = {};
data.action = ''revslider_ajax_call_front'';
data.client_action = ''get_slider_html'';
data.token = ''<?php echo wp_create_nonce("RevSlider_Front"); ?>'';
data.type = obj.type;
data.id = obj.id;
data.aspectratio = obj.aspectratio;
// SYNC AJAX REQUEST
jQuery.ajax({
type:"post",
url:"<?php echo admin_url(''admin-ajax.php''); ?>",
dataType: ''json'',
data:data,
async:false,
success: function(ret, textStatus, XMLHttpRequest) {
if(ret.success == true)
content = ret.data;
},
error: function(e) {
console.log(e);
}
});
// FIRST RETURN THE CONTENT WHEN IT IS LOADED !!
return content;
};
// CUSTOM AJAX FUNCTION TO REMOVE THE SLIDER
function ajaxRemoveRevslider(obj) {
return jQuery(obj.selector+" .rev_slider").revkill();
}
document.addEventListener(''DOMContentLoaded'', function() {
var main = document.querySelector(''div[role=main]''),
spinner = document.querySelector(''div.sk-spinner''),
pages = {};
window.addEventListener(''load'', function() {
toggleSpinner(false);
});
function toggleSpinner(b) {
spinner.classList[b ? ''remove'' : ''add''](''hidden'');
document.getElementById(''wrapper'').style.opacity = b ? 0 : 1;
}
function changePage(url, title) {
setTimeout(function() {
window.SITE.init();
window.vc_js();
}, 0);
history.pushState({
html: main.innerHTML,
title: title
}, '''', url);
toggleSpinner(false);
}
document.getElementById(''menu-menu-2'').addEventListener(''click'', function(e) {
var el = e.target;
if (el.tagName === ''A'') {
e.preventDefault();
toggleSpinner(true);
if (pages[el.href]) {
main.innerHTML = '''';
main.appendChild(pages[el.href]);
changePage(el.href);
}
else {
ajax(el.href, function(xhr) {
var frag = document.createRange().createContextualFragment(xhr.responseText);
main.innerHTML = ''<div>'' + frag.querySelector(''div[role=main]'').innerHTML + ''</div>'';
//pages[el.href] = main.firstElementChild;
var _currentScripts = [].slice.call(document.querySelectorAll(''script''));
[].forEach.call(frag.querySelectorAll(''script''), function(el, i) {
if ((el.src === '''' && el.parentNode)
|| el.src.indexOf(''slider'') >= 0
|| el.src.indexOf(''Scroll'') >= 0
|| el.src.indexOf(''vendor'') >= 0
|| el.src.indexOf(''composer'') >= 0
) {
var s = _currentScripts.filter(function(x) {
return x.src === el.src;
});
while (s.length) {
if (s[0].parentNode)
s[0].parentNode.removeChild(s[0]);
s.shift();
}
document.body.appendChild(el);
}
});
[].forEach.call(frag.querySelectorAll(''style''), function(el, i) {
document.querySelector(''head'').appendChild(el);
});
changePage(el.href, frag.querySelector(''title'').textContent);
});
}
}
});
window.addEventListener(''popstate'', function(e) {
if (e.state) {
main.innerHTML = e.state.html;
document.title = e.state.title;
}
});
});
</script>
...
</head>
El siguiente jquery-ready.js está registrado / en script-calls.php en script-calls.php :
(function($){
var readyList = [];
// Store a reference to the original ready method.
var originalReadyMethod = jQuery.fn.ready;
// Override jQuery.fn.ready
jQuery.fn.ready = function(){
var args = [].slice.call(arguments);
if(args.length && args.length > 0 && typeof args[0] === ''function'') {
readyList.push(args[0]);
}
// Execute the original method.
originalReadyMethod.apply( this, args );
};
// Used to trigger all ready events
$.triggerReady = function() {
$(readyList).each(function(i, el) {
try {
el.apply(el);
} catch(e) {
console.log(e);
}
});
};
})(jQuery);
Además, en page.php reemplacé las get_header() y get_footer() siguiente manera:
<?php
if(!isset($_REQUEST[''ajax''])){
get_header();
}
?>
<?php
if (is_page()) {
$id = $wp_query->get_queried_object_id();
$sidebar = get_post_meta($id, ''sidebar_set'', true);
$sidebar_pos = get_post_meta($id, ''sidebar_position'', true);
}
?>
...
<?php
if(!isset($_REQUEST[''ajax''])){
get_footer();
}
?>
Todavía hay algunos problemas al intentar cargar una página con el control deslizante de Revolution o el contenido de Visual Composer Parallax, como por ejemplo, en las páginas de Parallax o About us .
Puede usar este enlace y navegar a las páginas mencionadas anteriormente; Las pruebas se realizan solo en Chrome 45.0.2454.101 m de 64 bits / Win7, aún no está preparado para IE, Firefox, móvil, etc.
Acerca del comportamiento: el contenido del paralip deslizante de Rev se convertirá en codificado desde la segunda visita al enlace (páginas Home o Parallax ); El contenido de paralaje de Visual Composer (el chico en la imagen del escritorio, la página Acerca de nosotros , por ejemplo) se fija en la primera visita al enlace, después de que F5 estará bien;
El menú mynewmenu.js recordará el estado de la sesión , por lo que tendrá que cerrar el navegador para visitar varios enlaces directos correctamente.
Recibí una respuesta del equipo de asistencia de Slider Rev diciéndome:
La mejor opción para Ajax es simplemente agregar el código corto del control deslizante a una página / publicación regular, y luego el script "init" del control deslizante se incluirá automáticamente con el código HTML del control deslizante. Luego, cuando se elimina el código HTML del control deslizante del DOM, también se eliminan todos los eventos de jQuery. Entonces, todo lo que realmente necesita hacer es colocar el control deslizante como contenido de página / publicación, y luego no necesitará ningún script personalizado específicamente para el control deslizante.
Desafortunadamente no tengo idea de cómo puedo abordar esto, implementando la sugestión anterior en mi solución ya recibida.
Podría ser algo relacionado con la API (?). He encontrado estas informaciones en las páginas del control deslizante de Revolution / Visual Composer . ¿Alguna idea?
¿Necesitas ayuda con esto todavía? Creo que el equipo de soporte del control deslizante de la revolución lo clavó con las declaraciones
solo agrega el código corto del deslizador a una página / publicación regular
y
todo lo que necesitas hacer es arrastrar el control deslizante como contenido de página / publicación
Por lo tanto, use el control deslizante en su página / publicación de WordPress a través del código corto, [código abreviado]. A continuación, haga referencia a los elementos de matriz $ _GET [] y / o $ _POST [] en php (o javascript, como lo haga) según sea necesario.
Probablemente deberías leer:
- https://codex.wordpress.org/AJAX_in_Plugins#Ajax_on_the_Viewer-Facing_Side
- http://wptheming.com/2013/07/simple-ajax-example/
Debe pasar variables de PHP a sus archivos javascript utilizando wp_localize_script .
Incluso si no lo hace de esa manera, no debería tener que hackear las plantillas de la página principal solo para servir contenido específico: cree una página única y luego cree una plantilla específica para ella . Luego puede usar la URL de esa página como su punto final ajax.
Pero si lo que realmente necesita hacer es ejecutar el código abreviado de Rev Slider (y lo de Parallax si tiene uno también) en algún lugar que no sea una página:
- En el código (plantilla de página,
functions.php, etc.) - https://developer.wordpress.org/reference/functions/do_shortcode/ - En un widget (que enlaza con el siguiente) - https://digwp.com/2010/03/shortcodes-in-widgets/
- Básicamente en todas partes - http://stephanieleary.com/2010/02/using-shortcodes-everywhere/