Agregar estructura completa del tema APUS con Bootstrap 5 y optimizaciones de rendimiento
Se implementa tema WordPress personalizado para Análisis de Precios Unitarios con funcionalidades avanzadas: - Sistema de templates (front-page, single, archive, page, 404, search) - Integración de Bootstrap 5.3.8 con estructura modular de assets - Panel de opciones del tema con Customizer API - Optimizaciones de rendimiento (Critical CSS, Image Optimization, Performance) - Funcionalidades SEO y compatibilidad con Rank Math - Sistema de posts relacionados y tabla de contenidos - Badge de categorías y manejo de AdSense diferido - Tipografías Google Fonts configurables - Documentación completa del tema y guías de uso 🤖 Generated with [Claude Code](https://claude.com/claude-code) Co-Authored-By: Claude <noreply@anthropic.com>
This commit is contained in:
FrankZamora
216
wp-content/themes/apus-theme/assets/js/adsense-loader.js
Normal file
216
wp-content/themes/apus-theme/assets/js/adsense-loader.js
Normal file
@@ -0,0 +1,216 @@
|
||||
/**
|
||||
* AdSense Delayed Loader
|
||||
*
|
||||
* This script delays the loading of Google AdSense until user interaction
|
||||
* or a timeout occurs, improving initial page load performance.
|
||||
*
|
||||
* @package Apus_Theme
|
||||
* @since 1.0.0
|
||||
*/
|
||||
|
||||
(function() {
|
||||
'use strict';
|
||||
|
||||
// Configuration
|
||||
const CONFIG = {
|
||||
timeout: 5000, // Fallback timeout in milliseconds
|
||||
loadedClass: 'adsense-loaded',
|
||||
debug: false // Set to true for console logging
|
||||
};
|
||||
|
||||
// State
|
||||
let adsenseLoaded = false;
|
||||
let loadTimeout = null;
|
||||
|
||||
/**
|
||||
* Log debug messages if debug mode is enabled
|
||||
* @param {string} message - The message to log
|
||||
*/
|
||||
function debugLog(message) {
|
||||
if (CONFIG.debug && typeof console !== 'undefined') {
|
||||
console.log('[AdSense Loader] ' + message);
|
||||
}
|
||||
}
|
||||
|
||||
/**
|
||||
* Load AdSense scripts and initialize ads
|
||||
*/
|
||||
function loadAdSense() {
|
||||
// Prevent multiple loads
|
||||
if (adsenseLoaded) {
|
||||
debugLog('AdSense already loaded, skipping...');
|
||||
return;
|
||||
}
|
||||
|
||||
adsenseLoaded = true;
|
||||
debugLog('Loading AdSense scripts...');
|
||||
|
||||
// Clear the timeout if it exists
|
||||
if (loadTimeout) {
|
||||
clearTimeout(loadTimeout);
|
||||
loadTimeout = null;
|
||||
}
|
||||
|
||||
// Remove event listeners to prevent multiple triggers
|
||||
removeEventListeners();
|
||||
|
||||
// Load AdSense script tags
|
||||
loadAdSenseScripts();
|
||||
|
||||
// Execute AdSense push scripts
|
||||
executeAdSensePushScripts();
|
||||
|
||||
// Add loaded class to body
|
||||
document.body.classList.add(CONFIG.loadedClass);
|
||||
|
||||
debugLog('AdSense loading complete');
|
||||
}
|
||||
|
||||
/**
|
||||
* Find and load all delayed AdSense script tags
|
||||
*/
|
||||
function loadAdSenseScripts() {
|
||||
const delayedScripts = document.querySelectorAll('script[data-adsense-script]');
|
||||
|
||||
if (delayedScripts.length === 0) {
|
||||
debugLog('No delayed AdSense scripts found');
|
||||
return;
|
||||
}
|
||||
|
||||
debugLog('Found ' + delayedScripts.length + ' delayed AdSense script(s)');
|
||||
|
||||
delayedScripts.forEach(function(oldScript) {
|
||||
const newScript = document.createElement('script');
|
||||
|
||||
// Copy attributes
|
||||
if (oldScript.src) {
|
||||
newScript.src = oldScript.src;
|
||||
}
|
||||
|
||||
// Set async attribute
|
||||
newScript.async = true;
|
||||
|
||||
// Copy crossorigin if present
|
||||
if (oldScript.getAttribute('crossorigin')) {
|
||||
newScript.crossorigin = oldScript.getAttribute('crossorigin');
|
||||
}
|
||||
|
||||
// Replace old script with new one
|
||||
oldScript.parentNode.replaceChild(newScript, oldScript);
|
||||
});
|
||||
}
|
||||
|
||||
/**
|
||||
* Execute delayed AdSense push scripts
|
||||
*/
|
||||
function executeAdSensePushScripts() {
|
||||
const delayedPushScripts = document.querySelectorAll('script[data-adsense-push]');
|
||||
|
||||
if (delayedPushScripts.length === 0) {
|
||||
debugLog('No delayed AdSense push scripts found');
|
||||
return;
|
||||
}
|
||||
|
||||
debugLog('Found ' + delayedPushScripts.length + ' delayed push script(s)');
|
||||
|
||||
// Initialize adsbygoogle array if it doesn't exist
|
||||
window.adsbygoogle = window.adsbygoogle || [];
|
||||
|
||||
delayedPushScripts.forEach(function(oldScript) {
|
||||
const scriptContent = oldScript.innerHTML;
|
||||
|
||||
// Create and execute new script
|
||||
const newScript = document.createElement('script');
|
||||
newScript.innerHTML = scriptContent;
|
||||
newScript.type = 'text/javascript';
|
||||
|
||||
// Replace old script with new one
|
||||
oldScript.parentNode.replaceChild(newScript, oldScript);
|
||||
});
|
||||
}
|
||||
|
||||
/**
|
||||
* Event handler for user interactions
|
||||
*/
|
||||
function handleUserInteraction() {
|
||||
debugLog('User interaction detected');
|
||||
loadAdSense();
|
||||
}
|
||||
|
||||
/**
|
||||
* Remove all event listeners
|
||||
*/
|
||||
function removeEventListeners() {
|
||||
window.removeEventListener('scroll', handleUserInteraction, { passive: true });
|
||||
window.removeEventListener('mousemove', handleUserInteraction, { passive: true });
|
||||
window.removeEventListener('touchstart', handleUserInteraction, { passive: true });
|
||||
window.removeEventListener('click', handleUserInteraction, { passive: true });
|
||||
window.removeEventListener('keydown', handleUserInteraction, { passive: true });
|
||||
}
|
||||
|
||||
/**
|
||||
* Add event listeners for user interactions
|
||||
*/
|
||||
function addEventListeners() {
|
||||
debugLog('Adding event listeners for user interaction');
|
||||
|
||||
// Scroll event - load on first scroll
|
||||
window.addEventListener('scroll', handleUserInteraction, { passive: true, once: true });
|
||||
|
||||
// Mouse movement - load when user moves mouse
|
||||
window.addEventListener('mousemove', handleUserInteraction, { passive: true, once: true });
|
||||
|
||||
// Touch events - load on first touch (mobile)
|
||||
window.addEventListener('touchstart', handleUserInteraction, { passive: true, once: true });
|
||||
|
||||
// Click events - load on first click
|
||||
window.addEventListener('click', handleUserInteraction, { passive: true, once: true });
|
||||
|
||||
// Keyboard events - load on first key press
|
||||
window.addEventListener('keydown', handleUserInteraction, { passive: true, once: true });
|
||||
}
|
||||
|
||||
/**
|
||||
* Set timeout fallback to load AdSense after specified time
|
||||
*/
|
||||
function setTimeoutFallback() {
|
||||
debugLog('Setting timeout fallback (' + CONFIG.timeout + 'ms)');
|
||||
|
||||
loadTimeout = setTimeout(function() {
|
||||
debugLog('Timeout reached, loading AdSense');
|
||||
loadAdSense();
|
||||
}, CONFIG.timeout);
|
||||
}
|
||||
|
||||
/**
|
||||
* Initialize the AdSense delayed loader
|
||||
*/
|
||||
function init() {
|
||||
// Check if AdSense delay is enabled
|
||||
if (!window.apusAdsenseDelayed) {
|
||||
debugLog('AdSense delay not enabled');
|
||||
return;
|
||||
}
|
||||
|
||||
debugLog('Initializing AdSense delayed loader');
|
||||
|
||||
// Check if page is already interactive or complete
|
||||
if (document.readyState === 'interactive' || document.readyState === 'complete') {
|
||||
debugLog('Page already loaded, starting listeners');
|
||||
addEventListeners();
|
||||
setTimeoutFallback();
|
||||
} else {
|
||||
// Wait for DOM to be ready
|
||||
debugLog('Waiting for DOMContentLoaded');
|
||||
document.addEventListener('DOMContentLoaded', function() {
|
||||
debugLog('DOMContentLoaded fired');
|
||||
addEventListeners();
|
||||
setTimeoutFallback();
|
||||
});
|
||||
}
|
||||
}
|
||||
|
||||
// Start initialization
|
||||
init();
|
||||
|
||||
})();
|
||||
Reference in New Issue
Block a user