{"id":625,"date":"2026-10-29T23:50:07","date_gmt":"2026-10-29T23:50:07","guid":{"rendered":"https:\/\/plugins.creanexo.com\/?post_type=product&#038;p=625"},"modified":"2026-10-31T00:31:51","modified_gmt":"2026-10-31T00:31:51","slug":"interruptor-dia-noche-animado-web-wordpress","status":"publish","type":"product","link":"https:\/\/creanexo.com\/tienda\/product\/interruptor-dia-noche-animado-web-wordpress\/","title":{"rendered":"Interruptor D\u00eda\/Noche Animado \u2014 WEB + WordPress"},"content":{"rendered":"<p>\/* Interruptor D\u00eda\/Noche: maquetaci\u00f3n est\u00e1ndar de la tienda, acotada a esta ficha por su clase propia .cn-idn-resumen (sin IDs). *\/body.single-product #main .product.type-product:has(.cn-idn-resumen) #tab-description&gt;h3,body.single-product #main .product.type-product:has(.cn-idn-resumen) #tab-description .fusion-woocommerce-tab-title,body.single-product #main .product.type-product:has(.cn-idn-resumen) #tab-description .post-content&gt;h3:first-child{display:none!important}@media (min-width:1000px){body.single-product #main .product.type-product:has(.cn-idn-resumen){display:flow-root!important}body.single-product #main .product.type-product:has(.cn-idn-resumen)&gt;.summary,body.single-product #main .product.type-product:has(.cn-idn-resumen)&gt;.summary&gt;.summary-container{display:contents!important}body.single-product #main .product.type-product:has(.cn-idn-resumen)&gt;.fusion-clearfix{display:none!important}body.single-product #main .product.type-product:has(.cn-idn-resumen)&gt;.avada-single-product-gallery-wrapper{float:left!important;width:42%!important;max-width:none!important;margin:0!important;padding:0!important;box-sizing:border-box!important}body.single-product #main .product.type-product:has(.cn-idn-resumen) .summary .woocommerce-product-details__short-description{float:left!important;clear:left!important;width:42%!important;margin:24px 0 0!important;position:static!important;top:auto!important;left:auto!important}body.single-product #main .product.type-product:has(.cn-idn-resumen) .summary-container&gt;:not(.woocommerce-product-details__short-description),body.single-product #main .product.type-product:has(.cn-idn-resumen)&gt;.woocommerce-tabs{margin-left:calc(42% + 32px)!important;float:none!important;clear:none!important;width:auto!important}body.single-product #main .product.type-product:has(.cn-idn-resumen) .summary .product_title{margin-top:0!important}body.single-product #main .product.type-product:has(.cn-idn-resumen) .summary-container&gt;:is(p.price,.avada-availability){display:block!important}body.single-product #main .product.type-product:has(.cn-idn-resumen)&gt;.woocommerce-tabs{margin-top:24px!important}body.single-product #main .product.type-product:has(.cn-idn-resumen)&gt;:is(.social-share,.related,.upsells){clear:both!important}body.single-product #main .product.type-product:has(.cn-idn-resumen) .woocommerce-tabs .tabs{float:none!important;width:100%!important;display:flex!important;gap:20px!important}body.single-product #main .product.type-product:has(.cn-idn-resumen) .woocommerce-tabs .tabs li{margin-right:0!important}body.single-product #main .product.type-product:has(.cn-idn-resumen) .woocommerce-tabs .panel{float:none!important;width:100%!important;padding:24px!important;margin-left:0!important;margin-right:0!important;box-sizing:border-box!important}}<\/p>\n<details class=\"cn-producto-detalles\">\n<summary>Mostrar descripci\u00f3n<\/summary>\n<div class=\"cn-descripcion-contenido\">\n<h2>Interruptor D\u00eda\/Noche Animado \u2014 WEB + WordPress<\/h2>\n<p>Un interruptor compacto para alternar entre apariencia <strong>nocturna y diurna<\/strong>, con una animaci\u00f3n propia: una peque\u00f1a figura sale del hueco de la c\u00e1psula, camina hasta el bot\u00f3n y, al llegar, la luna se convierte en sol (y al rev\u00e9s). <strong>Una compra incluye las dos versiones<\/strong>: la versi\u00f3n web independiente (HTML, CSS y JavaScript) y el plugin para WordPress. Precio: US$5.<\/p>\n<h3>C\u00f3mo funciona<\/h3>\n<ul>\n<li><strong>Animaci\u00f3n completa:<\/strong> la caminata dura unos 2,5 segundos y el tema cambia al terminar. Las pulsaciones durante la animaci\u00f3n se ignoran, as\u00ed que no hay saltos ni cambios dobles.<\/li>\n<li><strong>Recuerda la elecci\u00f3n:<\/strong> guarda la preferencia de cada visitante en su navegador. La primera vez sigue el tema claro u oscuro del sistema.<\/li>\n<li><strong>Varias instancias:<\/strong> si pones m\u00e1s de un interruptor en una p\u00e1gina, todos se mantienen sincronizados.<\/li>\n<li><strong>Accesibilidad:<\/strong> es un conmutador real para los lectores de pantalla (\u00abModo d\u00eda\u00bb, activado o desactivado), funciona con teclado (Tab, Enter y Espacio), tiene un foco visible con buen contraste en los dos temas y, con \u00abreducir movimiento\u00bb activado, el cambio es inmediato y sin animaci\u00f3n.<\/li>\n<li><strong>Compacto y adaptable:<\/strong> mide como m\u00e1ximo 170 \u00d7 78 px y se estrecha en contenedores peque\u00f1os o en el m\u00f3vil.<\/li>\n<li><strong>Privacidad:<\/strong> sin recursos externos, anal\u00edtica, rastreadores ni cookies. Solo guarda en el navegador la preferencia \u00abd\u00eda\u00bb o \u00abnoche\u00bb.<\/li>\n<\/ul>\n<h3>Versi\u00f3n web (HTML, CSS y JavaScript)<\/h3>\n<p>Sin dependencias. Cargas <code>interruptor.css<\/code> e <code>interruptor.js<\/code> y copias el marcado del ejemplo incluido. Los colores se personalizan con variables CSS (<code>--idn-*<\/code>) para cada tema, y es compatible con una pol\u00edtica de seguridad de contenidos (CSP) estricta. Incluye una p\u00e1gina de demostraci\u00f3n y un ejemplo m\u00ednimo de integraci\u00f3n.<\/p>\n<h3>Plugin para WordPress<\/h3>\n<p>Shortcode <code>[interruptor_dia_noche]<\/code> para mostrar el interruptor donde quieras. Con <code>[interruptor_dia_noche alcance=\"pagina\"]<\/code> tambi\u00e9n cambian el fondo y el color de texto de la p\u00e1gina. Sin panel de ajustes ni datos en la base de datos; los estilos y el script solo se cargan en las p\u00e1ginas que usan el shortcode.<\/p>\n<h3>Qu\u00e9 recibes<\/h3>\n<p>Dos archivos descargables: <code>interruptor-dia-noche-web-2026-10-29-r2.zip<\/code> (versi\u00f3n web) e <code>interruptor-dia-noche-wordpress-1.0.7.zip<\/code> (plugin instalable desde Plugins \u2192 A\u00f1adir nuevo \u2192 Subir plugin). Cada uno incluye sus instrucciones (README.md) y la licencia GPL-2.0-or-later (archivo LICENSE).<\/p>\n<h3>Requisitos y l\u00edmites<\/h3>\n<p>Versi\u00f3n web: un navegador actual; funciona en un hosting y tambi\u00e9n abriendo el archivo directamente. Plugin: WordPress 6.0 o superior y PHP 7.4 o superior. Probado en Microsoft Edge, Mozilla Firefox y Brave; Safari a\u00fan no se ha probado. En el modo p\u00e1gina, los bloques con colores propios del tema no cambian, y el resultado depende del tema. No incluye p\u00e1gina de ajustes: la personalizaci\u00f3n se hace con CSS.<\/p>\n<p>Demostraci\u00f3n: <a href=\"https:\/\/creanexostudio.com\/demos\/creanexo-demo\/interruptor-dia-noche\/\" target=\"_blank\" rel=\"noopener\">demo.creanexo.com\/interruptor-dia-noche<\/a><\/p>\n<\/div>\n<\/details>\n","protected":false},"excerpt":{"rendered":"<div class=\"cn-idn-resumen\">\n<p><strong>Las dos versiones en una sola compra: web (HTML, CSS y JavaScript) + plugin para WordPress. US$5.<\/strong><\/p>\n<p>Un interruptor animado d\u00eda\/noche: una peque\u00f1a figura cruza el control y, al llegar, cambia la luna por el sol (o al rev\u00e9s). Recibes los dos ZIP oficiales: edici\u00f3n web y plugin WordPress 1.0.7.<\/p>\n<p><a class=\"button\" href=\"https:\/\/creanexostudio.com\/demos\/creanexo-demo\/interruptor-dia-noche\/\" target=\"_blank\" rel=\"noopener\">\u25b6 Ver demostraci\u00f3n<\/a><\/p>\n<p>La demo p\u00fablica funciona con rat\u00f3n, toque y teclado, y respeta la opci\u00f3n \u00abreducir movimiento\u00bb del sistema.<\/p>\n<\/div>\n","protected":false},"featured_media":621,"comment_status":"open","ping_status":"closed","template":"","meta":[],"product_brand":[],"product_cat":[26],"product_tag":[],"class_list":["post-625","product","type-product","status-publish","has-post-thumbnail","product_cat-plugins-wordpress","first","instock","downloadable","virtual","purchasable","product-type-simple"],"yoast_head":"<!-- This site is optimized with the Yoast SEO plugin v28.8 - https:\/\/yoast.com\/product\/yoast-seo-wordpress\/ -->\n<title>Interruptor D\u00eda\/Noche Animado \u2014 WEB + WordPress - Creanexo<\/title>\n<meta name=\"robots\" content=\"index, follow, max-snippet:-1, max-image-preview:large, max-video-preview:-1\" \/>\n<link rel=\"canonical\" href=\"https:\/\/creanexo.com\/tienda\/product\/interruptor-dia-noche-animado-web-wordpress\/\" \/>\n<meta property=\"og:locale\" content=\"es_ES\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"Interruptor D\u00eda\/Noche Animado \u2014 WEB + WordPress - Creanexo\" \/>\n<meta property=\"og:description\" content=\"Las dos versiones en una sola compra: web (HTML, CSS y JavaScript) + plugin para WordPress. US$5. Un interruptor animado d\u00eda\/noche: una peque\u00f1a figura cruza el control y, al llegar, cambia la luna por el sol (o al rev\u00e9s). Recibes los dos ZIP oficiales: edici\u00f3n web y plugin WordPress 1.0.7. \u25b6 Ver demostraci\u00f3n La demo p\u00fablica funciona con rat\u00f3n, toque y teclado, y respeta la opci\u00f3n \u00abreducir movimiento\u00bb del sistema.\" \/>\n<meta property=\"og:url\" content=\"https:\/\/creanexo.com\/tienda\/product\/interruptor-dia-noche-animado-web-wordpress\/\" \/>\n<meta property=\"og:site_name\" content=\"Creanexo\" \/>\n<meta property=\"article:modified_time\" content=\"2026-10-31T00:31:51+00:00\" \/>\n<meta property=\"og:image\" content=\"https:\/\/creanexo.com\/tienda\/wp-content\/uploads\/2026\/10\/interruptor-dia-noche-portada.jpg\" \/>\n\t<meta property=\"og:image:width\" content=\"1280\" \/>\n\t<meta property=\"og:image:height\" content=\"635\" \/>\n\t<meta property=\"og:image:type\" content=\"image\/jpeg\" \/>\n<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\n<meta name=\"twitter:label1\" content=\"Tiempo de lectura\" \/>\n\t<meta name=\"twitter:data1\" content=\"4 minutos\" \/>\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\\\/\\\/schema.org\",\"@graph\":[{\"@type\":\"WebPage\",\"@id\":\"https:\\\/\\\/creanexo.com\\\/tienda\\\/product\\\/interruptor-dia-noche-animado-web-wordpress\\\/\",\"url\":\"https:\\\/\\\/creanexo.com\\\/tienda\\\/product\\\/interruptor-dia-noche-animado-web-wordpress\\\/\",\"name\":\"Interruptor D\u00eda\\\/Noche Animado \u2014 WEB + WordPress - Creanexo\",\"isPartOf\":{\"@id\":\"https:\\\/\\\/creanexo.com\\\/tienda\\\/#website\"},\"primaryImageOfPage\":{\"@id\":\"https:\\\/\\\/creanexo.com\\\/tienda\\\/product\\\/interruptor-dia-noche-animado-web-wordpress\\\/#primaryimage\"},\"image\":{\"@id\":\"https:\\\/\\\/creanexo.com\\\/tienda\\\/product\\\/interruptor-dia-noche-animado-web-wordpress\\\/#primaryimage\"},\"thumbnailUrl\":\"https:\\\/\\\/creanexo.com\\\/tienda\\\/wp-content\\\/uploads\\\/2026\\\/10\\\/interruptor-dia-noche-portada.jpg\",\"datePublished\":\"2026-10-29T23:50:07+00:00\",\"dateModified\":\"2026-10-31T00:31:51+00:00\",\"breadcrumb\":{\"@id\":\"https:\\\/\\\/creanexo.com\\\/tienda\\\/product\\\/interruptor-dia-noche-animado-web-wordpress\\\/#breadcrumb\"},\"inLanguage\":\"es\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\\\/\\\/creanexo.com\\\/tienda\\\/product\\\/interruptor-dia-noche-animado-web-wordpress\\\/\"]}]},{\"@type\":\"ImageObject\",\"inLanguage\":\"es\",\"@id\":\"https:\\\/\\\/creanexo.com\\\/tienda\\\/product\\\/interruptor-dia-noche-animado-web-wordpress\\\/#primaryimage\",\"url\":\"https:\\\/\\\/creanexo.com\\\/tienda\\\/wp-content\\\/uploads\\\/2026\\\/10\\\/interruptor-dia-noche-portada.jpg\",\"contentUrl\":\"https:\\\/\\\/creanexo.com\\\/tienda\\\/wp-content\\\/uploads\\\/2026\\\/10\\\/interruptor-dia-noche-portada.jpg\",\"width\":1280,\"height\":635,\"caption\":\"Interruptor D\u00eda\\\/Noche Animado: demostraci\u00f3n en modo noche con el bot\u00f3n de luna y el hueco de la c\u00e1psula\"},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\\\/\\\/creanexo.com\\\/tienda\\\/product\\\/interruptor-dia-noche-animado-web-wordpress\\\/#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Home\",\"item\":\"https:\\\/\\\/creanexo.com\\\/tienda\\\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"Tienda\",\"item\":\"https:\\\/\\\/creanexo.com\\\/tienda\\\/shop\\\/\"},{\"@type\":\"ListItem\",\"position\":3,\"name\":\"Interruptor D\u00eda\\\/Noche Animado \u2014 WEB + WordPress\"}]},{\"@type\":\"WebSite\",\"@id\":\"https:\\\/\\\/creanexo.com\\\/tienda\\\/#website\",\"url\":\"https:\\\/\\\/creanexo.com\\\/tienda\\\/\",\"name\":\"Creanexo\",\"description\":\"Recursos digitales para tus proyectos\",\"potentialAction\":[{\"@type\":\"SearchAction\",\"target\":{\"@type\":\"EntryPoint\",\"urlTemplate\":\"https:\\\/\\\/creanexo.com\\\/tienda\\\/?s={search_term_string}\"},\"query-input\":{\"@type\":\"PropertyValueSpecification\",\"valueRequired\":true,\"valueName\":\"search_term_string\"}}],\"inLanguage\":\"es\"}]}<\/script>\n<!-- \/ Yoast SEO plugin. -->","yoast_head_json":{"title":"Interruptor D\u00eda\/Noche Animado \u2014 WEB + WordPress - Creanexo","robots":{"index":"index","follow":"follow","max-snippet":"max-snippet:-1","max-image-preview":"max-image-preview:large","max-video-preview":"max-video-preview:-1"},"canonical":"https:\/\/creanexo.com\/tienda\/product\/interruptor-dia-noche-animado-web-wordpress\/","og_locale":"es_ES","og_type":"article","og_title":"Interruptor D\u00eda\/Noche Animado \u2014 WEB + WordPress - Creanexo","og_description":"Las dos versiones en una sola compra: web (HTML, CSS y JavaScript) + plugin para WordPress. US$5. Un interruptor animado d\u00eda\/noche: una peque\u00f1a figura cruza el control y, al llegar, cambia la luna por el sol (o al rev\u00e9s). Recibes los dos ZIP oficiales: edici\u00f3n web y plugin WordPress 1.0.7. \u25b6 Ver demostraci\u00f3n La demo p\u00fablica funciona con rat\u00f3n, toque y teclado, y respeta la opci\u00f3n \u00abreducir movimiento\u00bb del sistema.","og_url":"https:\/\/creanexo.com\/tienda\/product\/interruptor-dia-noche-animado-web-wordpress\/","og_site_name":"Creanexo","article_modified_time":"2026-10-31T00:31:51+00:00","og_image":[{"width":1280,"height":635,"url":"https:\/\/creanexo.com\/tienda\/wp-content\/uploads\/2026\/10\/interruptor-dia-noche-portada.jpg","type":"image\/jpeg"}],"twitter_card":"summary_large_image","twitter_misc":{"Tiempo de lectura":"4 minutos"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"WebPage","@id":"https:\/\/creanexo.com\/tienda\/product\/interruptor-dia-noche-animado-web-wordpress\/","url":"https:\/\/creanexo.com\/tienda\/product\/interruptor-dia-noche-animado-web-wordpress\/","name":"Interruptor D\u00eda\/Noche Animado \u2014 WEB + WordPress - Creanexo","isPartOf":{"@id":"https:\/\/creanexo.com\/tienda\/#website"},"primaryImageOfPage":{"@id":"https:\/\/creanexo.com\/tienda\/product\/interruptor-dia-noche-animado-web-wordpress\/#primaryimage"},"image":{"@id":"https:\/\/creanexo.com\/tienda\/product\/interruptor-dia-noche-animado-web-wordpress\/#primaryimage"},"thumbnailUrl":"https:\/\/creanexo.com\/tienda\/wp-content\/uploads\/2026\/10\/interruptor-dia-noche-portada.jpg","datePublished":"2026-10-29T23:50:07+00:00","dateModified":"2026-10-31T00:31:51+00:00","breadcrumb":{"@id":"https:\/\/creanexo.com\/tienda\/product\/interruptor-dia-noche-animado-web-wordpress\/#breadcrumb"},"inLanguage":"es","potentialAction":[{"@type":"ReadAction","target":["https:\/\/creanexo.com\/tienda\/product\/interruptor-dia-noche-animado-web-wordpress\/"]}]},{"@type":"ImageObject","inLanguage":"es","@id":"https:\/\/creanexo.com\/tienda\/product\/interruptor-dia-noche-animado-web-wordpress\/#primaryimage","url":"https:\/\/creanexo.com\/tienda\/wp-content\/uploads\/2026\/10\/interruptor-dia-noche-portada.jpg","contentUrl":"https:\/\/creanexo.com\/tienda\/wp-content\/uploads\/2026\/10\/interruptor-dia-noche-portada.jpg","width":1280,"height":635,"caption":"Interruptor D\u00eda\/Noche Animado: demostraci\u00f3n en modo noche con el bot\u00f3n de luna y el hueco de la c\u00e1psula"},{"@type":"BreadcrumbList","@id":"https:\/\/creanexo.com\/tienda\/product\/interruptor-dia-noche-animado-web-wordpress\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Home","item":"https:\/\/creanexo.com\/tienda\/"},{"@type":"ListItem","position":2,"name":"Tienda","item":"https:\/\/creanexo.com\/tienda\/shop\/"},{"@type":"ListItem","position":3,"name":"Interruptor D\u00eda\/Noche Animado \u2014 WEB + WordPress"}]},{"@type":"WebSite","@id":"https:\/\/creanexo.com\/tienda\/#website","url":"https:\/\/creanexo.com\/tienda\/","name":"Creanexo","description":"Recursos digitales para tus proyectos","potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https:\/\/creanexo.com\/tienda\/?s={search_term_string}"},"query-input":{"@type":"PropertyValueSpecification","valueRequired":true,"valueName":"search_term_string"}}],"inLanguage":"es"}]}},"_links":{"self":[{"href":"https:\/\/creanexo.com\/tienda\/wp-json\/wp\/v2\/product\/625","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/creanexo.com\/tienda\/wp-json\/wp\/v2\/product"}],"about":[{"href":"https:\/\/creanexo.com\/tienda\/wp-json\/wp\/v2\/types\/product"}],"replies":[{"embeddable":true,"href":"https:\/\/creanexo.com\/tienda\/wp-json\/wp\/v2\/comments?post=625"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/creanexo.com\/tienda\/wp-json\/wp\/v2\/media\/621"}],"wp:attachment":[{"href":"https:\/\/creanexo.com\/tienda\/wp-json\/wp\/v2\/media?parent=625"}],"wp:term":[{"taxonomy":"product_brand","embeddable":true,"href":"https:\/\/creanexo.com\/tienda\/wp-json\/wp\/v2\/product_brand?post=625"},{"taxonomy":"product_cat","embeddable":true,"href":"https:\/\/creanexo.com\/tienda\/wp-json\/wp\/v2\/product_cat?post=625"},{"taxonomy":"product_tag","embeddable":true,"href":"https:\/\/creanexo.com\/tienda\/wp-json\/wp\/v2\/product_tag?post=625"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}