{"id":403,"date":"2026-02-19T18:47:47","date_gmt":"2026-02-19T18:47:47","guid":{"rendered":"https:\/\/fractalikadigital.dev\/blog\/?p=403"},"modified":"2026-02-19T22:47:58","modified_gmt":"2026-02-19T22:47:58","slug":"fk-shortcodes-documentacion2","status":"publish","type":"post","link":"https:\/\/fractalikadigital.dev\/blog\/fk-shortcodes-documentacion2\/","title":{"rendered":"SHORTCODE PLUGIN"},"content":{"rendered":"\r\n<style>\r\n\/* ===== ESTILOS PROFESIONALES ===== *\/\r\n:root {\r\n    --black: #000000;\r\n    --white: #ffffff;\r\n    --blue: #1806bb;\r\n    --gray-light: #f5f5f5;\r\n    --gray-medium: #666666;\r\n}\r\n\r\nbody {\r\n    font-family: 'Roboto', sans-serif;\r\n    line-height: 1.6;\r\n    color: #333;\r\n}\r\n\r\n.doc-container {\r\n    max-width: 1200px;\r\n    margin: 0 auto;\r\n    background: var(--white);\r\n    border: 2px solid var(--black);\r\n    padding: 50px;\r\n}\r\n\r\nh1, h2, h3, h4 {\r\n    font-family: 'Roboto Condensed', sans-serif;\r\n    font-weight: 300;\r\n    letter-spacing: 1px;\r\n}\r\n\r\nh1 {\r\n    font-size: 3rem;\r\n    text-transform: uppercase;\r\n    border-bottom: 2px solid var(--black);\r\n    padding-bottom: 20px;\r\n    margin-bottom: 40px;\r\n}\r\n\r\nh2 {\r\n    font-size: 2rem;\r\n    border-left: 4px solid var(--blue);\r\n    padding-left: 20px;\r\n    margin: 50px 0 30px;\r\n}\r\n\r\nh3 {\r\n    font-size: 1.5rem;\r\n    margin: 30px 0 20px;\r\n}\r\n\r\n.hero-quote {\r\n    background: var(--black);\r\n    color: var(--white);\r\n    padding: 60px 40px;\r\n    text-align: center;\r\n    font-size: 1.8rem;\r\n    font-family: 'Roboto Condensed', sans-serif;\r\n    font-weight: 300;\r\n    letter-spacing: 2px;\r\n    margin: 40px 0;\r\n    position: relative;\r\n    border-left: 4px solid var(--blue);\r\n}\r\n\r\n.hero-quote::before {\r\n    content: '\"';\r\n    font-size: 4rem;\r\n    position: absolute;\r\n    left: 20px;\r\n    top: 20px;\r\n    opacity: 0.3;\r\n    color: var(--blue);\r\n}\r\n\r\n.hero-quote::after {\r\n    content: '\"';\r\n    font-size: 4rem;\r\n    position: absolute;\r\n    right: 20px;\r\n    bottom: 20px;\r\n    opacity: 0.3;\r\n    color: var(--blue);\r\n}\r\n\r\n.cta-box {\r\n    background: var(--gray-light);\r\n    padding: 40px;\r\n    border-left: 4px solid var(--blue);\r\n    margin: 40px 0;\r\n    text-align: center;\r\n}\r\n\r\n.btn {\r\n    display: inline-block;\r\n    background: var(--black);\r\n    color: var(--white);\r\n    padding: 15px 40px;\r\n    text-decoration: none;\r\n    font-family: 'Roboto Condensed', sans-serif;\r\n    text-transform: uppercase;\r\n    letter-spacing: 2px;\r\n    border: 2px solid var(--black);\r\n    transition: all 0.3s ease;\r\n    margin: 10px;\r\n}\r\n\r\n.btn:hover {\r\n    background: var(--white);\r\n    color: var(--black);\r\n}\r\n\r\n.btn-blue {\r\n    background: var(--blue);\r\n    border-color: var(--blue);\r\n}\r\n\r\n.btn-blue:hover {\r\n    background: transparent;\r\n    color: var(--blue);\r\n}\r\n\r\n.strategy-grid {\r\n    display: grid;\r\n    grid-template-columns: repeat(2, 1fr);\r\n    gap: 30px;\r\n    margin: 40px 0;\r\n}\r\n\r\n.strategy-item {\r\n    border: 1px solid #ddd;\r\n    padding: 30px;\r\n    border-top: 3px solid var(--black);\r\n}\r\n\r\n.strategy-item h4 {\r\n    font-size: 1.3rem;\r\n    margin-top: 0;\r\n    color: var(--blue);\r\n}\r\n\r\n.checklist {\r\n    background: var(--gray-light);\r\n    padding: 30px;\r\n    border: 1px solid #ddd;\r\n}\r\n\r\n.checklist-item {\r\n    display: flex;\r\n    align-items: center;\r\n    gap: 15px;\r\n    padding: 15px 0;\r\n    border-bottom: 1px solid #ddd;\r\n}\r\n\r\n.checklist-item:last-child {\r\n    border-bottom: none;\r\n}\r\n\r\n.checklist-status {\r\n    font-size: 1.5rem;\r\n    min-width: 40px;\r\n    text-align: center;\r\n}\r\n\r\n.done { color: #00aa00; }\r\n.pending { color: #ff8800; }\r\n.future { color: var(--blue); }\r\n\r\n.benefits-box {\r\n    background: var(--white);\r\n    border: 2px solid var(--black);\r\n    padding: 30px;\r\n    margin: 30px 0;\r\n}\r\n\r\n.benefits-box h4 {\r\n    color: var(--blue);\r\n    margin-top: 0;\r\n}\r\n\r\n@media (max-width: 768px) {\r\n    .strategy-grid {\r\n        grid-template-columns: 1fr;\r\n    }\r\n    .doc-container {\r\n        padding: 25px;\r\n    }\r\n    h1 {\r\n        font-size: 2rem;\r\n    }\r\n}\r\n<\/style>\r\n\r\n<!-- ===== INICIO DEL POST ===== -->\r\n<div class=\"doc-container\">\r\n\r\n    <!-- T\u00cdTULO PRINCIPAL -->\r\n    <h1>\ud83c\udfac NUESTRO PROPIO PLUGIN<br>DE SHORTCODES Y GALER\u00cdAS<\/h1>\r\n\r\n    <!-- CITA DE PODER (ESTRAT\u00c9GICA) -->\r\n    <div class=\"hero-quote\">\r\n        CREAMOS NUESTRO PROPIO PLUGIN CON SHORTCODES PERSONALIZADOS.\r\n    <\/div>\r\n\r\n    <!-- INTRODUCCI\u00d3N PROFESIONAL -->\r\n    <p style=\"font-size: 1.2rem;\">Imaginate tener el poder de <strong>crear tus propias herramientas<\/strong> para WordPress. As\u00ed, sin depender de plugins gen\u00e9ricos que no terminan de encajar con tu marca. Eso es exactamente lo que hicimos cuando creamos el plugin <strong>FK Shortcodes<\/strong>: un plugin desarrollado a medida, con la est\u00e9tica y funcionalidad que necesit\u00e1bamos.<\/p>\r\n\r\n    <!-- QU\u00c9 HACE EL PLUGIN -->\r\n    <h2>\ud83d\udd27 \u00bfQu\u00e9 hace FK Shortcodes?<\/h2>\r\n    <p>Es un conjunto de <strong>shortcodes con estilo de terminal Linux<\/strong> que usamos en nuestro propio blog. Pero m\u00e1s importante: es la <strong>prueba de que podemos crear cualquier funcionalidad personalizada<\/strong> para WordPress. Desde bloques de conversi\u00f3n hasta galer\u00edas 3D interactivas.<\/p>\r\n\r\n    <!-- ESTRATEGIA DE CITAS DE PODER -->\r\n    <h2>\ud83d\udcac La estrategia de las citas de poder<\/h2>\r\n    <p>En marketing digital no alcanza con tener contenido: hay que tener <strong>contenido que impacte<\/strong>. Por eso dise\u00f1amos shortcodes como <strong>fr-quote<\/strong>, que convierten una frase com\u00fan en una declaraci\u00f3n de principios con estilo cinematogr\u00e1fico.<\/p>\r\n\r\n    <!-- EJEMPLO DE CITA (\u00daNICO SHORTCODE ACTIVO) -->\r\n    <div class=\"fr-quote cinema-quote\"><p>Las citas otorgan autoridad y credibilidad a los post<\/p><div class=\"fr-quote-author\">\u2014 Fractalika Digital<\/div><\/div>\r\n\r\n    <div class=\"strategy-grid\">\r\n        <div class=\"strategy-item\">\r\n            <h4>\ud83c\udfaf Para captar atenci\u00f3n<\/h4>\r\n            <p>Us\u00e1 <strong>fr-box<\/strong> para destacar ofertas o promociones. Como un cartel de ne\u00f3n en la puerta de tu negocio.<\/p>\r\n            <p><small>C\u00f3digo: fr-box align=\u00bbcenter\u00bb TEXTO \/fr-box<\/small><\/p>\r\n        <\/div>\r\n        <div class=\"strategy-item\">\r\n            <h4>\ud83d\udce2 Para generar autoridad<\/h4>\r\n            <p><strong>fr-quote<\/strong> convierte testimonios o frases clave en declaraciones con peso.<\/p>\r\n            <p><small>C\u00f3digo: fr-quote author=\u00bbNombre\u00bb Texto \/fr-quote<\/small><\/p>\r\n        <\/div>\r\n        <div class=\"strategy-item\">\r\n            <h4>\u26a1 Para convertir visitas<\/h4>\r\n            <p><strong>fr-cta<\/strong> crea bloques de conversi\u00f3n que no pasan desapercibidos.<\/p>\r\n            <p><small>C\u00f3digo: fr-cta title=\u00bbT\u00edtulo\u00bb button=\u00bbVER\u00bb url=\u00bb#\u00bb Texto \/fr-cta<\/small><\/p>\r\n        <\/div>\r\n        <div class=\"strategy-item\">\r\n            <h4>\ud83d\udcca Para organizar contenido<\/h4>\r\n            <p><strong>fr-grid<\/strong> y <strong>fr-posts<\/strong> muestran tu trabajo de forma profesional.<\/p>\r\n            <p><small>C\u00f3digo: fr-grid columns=\u00bb3&#8243; T\u00edtulo &#8230; \/fr-grid<\/small><\/p>\r\n        <\/div>\r\n    <\/div>\r\n\r\n    <!-- CHECKLIST DE AVANCE -->\r\n    <h2>\ud83d\udcca Nuestro roadmap: hacia d\u00f3nde vamos<\/h2>\r\n    <div class=\"checklist\">\r\n        <div class=\"checklist-item\">\r\n            <span class=\"checklist-status done\">\u2705<\/span>\r\n            <span><strong>Shortcodes b\u00e1sicos:<\/strong> fr-box, fr-quote, fr-cta, fr-sep, fr-alert, fr-btn, fr-posts<\/span>\r\n        <\/div>\r\n        <div class=\"checklist-item\">\r\n            <span class=\"checklist-status done\">\u2705<\/span>\r\n            <span><strong>Estilo terminal Linux:<\/strong> Jerarqu\u00eda de categor\u00edas<\/span>\r\n        <\/div>\r\n        <div class=\"checklist-item\">\r\n            <span class=\"checklist-status done\">\u2705<\/span>\r\n            <span><strong>Metadatos din\u00e1micos:<\/strong> Fecha y comentarios con colores<\/span>\r\n        <\/div>\r\n        <div class=\"checklist-item\">\r\n            <span class=\"checklist-status pending\">\ud83d\udd04<\/span>\r\n            <span><strong>Galer\u00edas 3D con Three.js:<\/strong> Carruseles interactivos, modelos 3D<\/span>\r\n        <\/div>\r\n        <div class=\"checklist-item\">\r\n            <span class=\"checklist-status pending\">\ud83d\udd04<\/span>\r\n            <span><strong>Widgets nativos para Elementor:<\/strong> La misma potencia, sin c\u00f3digo<\/span>\r\n        <\/div>\r\n        <div class=\"checklist-item\">\r\n            <span class=\"checklist-status future\">\ud83d\udd2e<\/span>\r\n            <span><strong>Modo oscuro autom\u00e1tico:<\/strong> Toggle claro\/oscuro<\/span>\r\n        <\/div>\r\n    <\/div>\r\n\r\n    <!-- SECCI\u00d3N DE BENEFICIOS -->\r\n    <h2>\u26a1 \u00bfPor qu\u00e9 usar shortcodes personalizados?<\/h2>\r\n    \r\n    <div class=\"benefits-box\">\r\n        <h4>\ud83d\udd52 Ahorro de tiempo<\/h4>\r\n        <p>Imaginate tener que escribir el mismo bloque de HTML con estilos en cada post. Con un shortcode, escrib\u00eds una sola l\u00ednea y el bloque aparece m\u00e1gicamente. En un blog con 50 posts, son cientos de horas ahorradas.<\/p>\r\n    <\/div>\r\n\r\n    <div class=\"benefits-box\">\r\n        <h4>\ud83c\udfa8 Consistencia visual<\/h4>\r\n        <p>Si despu\u00e9s decid\u00eds cambiar el color de todos tus bloques de conversi\u00f3n, solo modific\u00e1s el CSS del shortcode. Todos los posts se actualizan autom\u00e1ticamente.<\/p>\r\n    <\/div>\r\n\r\n    <div class=\"benefits-box\">\r\n        <h4>\ud83d\udcc8 Dinamismo estrat\u00e9gico<\/h4>\r\n        <p>Pod\u00e9s cambiar el texto de una cita en 10 posts diferentes editando UN SOLO shortcode. Esto te permite hacer pruebas A\/B sin tocar cada publicaci\u00f3n.<\/p>\r\n    <\/div>\r\n\r\n    <div class=\"benefits-box\">\r\n        <h4>\ud83c\udfaf CTAs personalizados por post<\/h4>\r\n        <p>Cada post puede tener su propio llamado a la acci\u00f3n. Con <strong>fr-cta<\/strong> pod\u00e9s cambiar t\u00edtulo, descripci\u00f3n y bot\u00f3n sin duplicar c\u00f3digo.<\/p>\r\n    <\/div>\r\n\r\n    <!-- LISTA DE SHORTCODES (SOLO TEXTO) -->\r\n    <h2>\ud83d\udccb Nuestros shortcodes<\/h2>\r\n    \r\n    <ul>\r\n        <li><strong>fr-box<\/strong> &#8211; Caja de impacto negro con bordes azules. Ideal para destacar promociones.<\/li>\r\n        <li><strong>fr-quote<\/strong> &#8211; Cita cinematogr\u00e1fica con autor. Para testimonios y frases clave.<\/li>\r\n        <li><strong>fr-cta<\/strong> &#8211; Bloque de conversi\u00f3n con t\u00edtulo, descripci\u00f3n y bot\u00f3n.<\/li>\r\n        <li><strong>fr-sep<\/strong> &#8211; Separador visual (l\u00ednea o puntos).<\/li>\r\n        <li><strong>fr-alert<\/strong> &#8211; Alerta informativa (azul) o de \u00e9xito (verde).<\/li>\r\n        <li><strong>fr-btn<\/strong> &#8211; Bot\u00f3n simple negro.<\/li>\r\n        <li><strong>fr-posts<\/strong> &#8211; Muestra autom\u00e1ticamente los \u00faltimos posts de una categor\u00eda.<\/li>\r\n    <\/ul>\r\n\r\n    <!-- SECCI\u00d3N DE SERVICIOS PERSONALIZADOS -->\r\n    <div class=\"cta-box\">\r\n        <h3 style=\"margin-top:0;\">\ud83d\ude80 \u00bfNecesit\u00e1s algo as\u00ed para tu marca?<\/h3>\r\n        <p style=\"font-size: 1.1rem;\">Todo esto que ves lo construimos nosotros. Desde cero. Con c\u00f3digo limpio, dise\u00f1o estrat\u00e9gico y pensado para convertir.<\/p>\r\n        <p style=\"font-size: 1.1rem;\">Si ten\u00e9s una idea, una necesidad o simplemente quer\u00e9s que tu sitio WordPress tenga funcionalidades <strong>que ning\u00fan plugin de cat\u00e1logo te da<\/strong>, hablamos.<\/p>\r\n        <div style=\"margin: 30px 0;\">\r\n            <a href=\"\/servicios\/#wordpress\" class=\"btn\">\ud83d\udce6 SOLICITAR PRESUPUESTO<\/a>\r\n            <a href=\"\/contacto\" class=\"btn btn-blue\">\ud83d\udcac CONTACTAR<\/a>\r\n        <\/div>\r\n        <p><small>Desarrollamos plugins, widgets Elementor, shortcodes exclusivos, integraciones con APIs y m\u00e1s.<\/small><\/p>\r\n    <\/div>\r\n\r\n    <!-- MENSAJE FINAL -->\r\n    <div style=\"text-align: center; margin: 60px 0 20px; padding: 30px; background: var(--black); color: var(--white);\">\r\n        <p style=\"font-size: 1.5rem; font-family: 'Roboto Condensed'; margin: 0;\">CREAMOS PLUGINS Y FUNCIONALIDADES PERSONALIZADAS<\/p>\r\n        <p style=\"margin: 10px 0 0; opacity: 0.8;\">Fractalika Digital \u00b7 Desarrollo WordPress a medida<\/p>\r\n    <\/div>\r\n\r\n    <!-- FOOTER -->\r\n    <div style=\"text-align: center; margin-top: 40px; padding-top: 30px; border-top: 1px solid #ddd;\">\r\n        <p style=\"color: var(--gray-medium);\">FK Shortcodes by Fractalika Digital \u00b7 <a href=\"https:\/\/fractalikadigital.dev\">fractalikadigital.dev<\/a><\/p>\r\n    <\/div>\r\n\r\n<\/div>\r\n","protected":false},"excerpt":{"rendered":"<p>\ud83c\udfac NUESTRO PROPIO PLUGINDE SHORTCODES Y GALER\u00cdAS CREAMOS NUESTRO PROPIO PLUGIN CON SHORTCODES PERSONALIZADOS. Imaginate tener el poder de crear [&hellip;]<\/p>\n","protected":false},"author":1,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"site-sidebar-layout":"default","site-content-layout":"","ast-site-content-layout":"default","site-content-style":"default","site-sidebar-style":"default","ast-global-header-display":"","ast-banner-title-visibility":"","ast-main-header-display":"","ast-hfb-above-header-display":"","ast-hfb-below-header-display":"","ast-hfb-mobile-header-display":"","site-post-title":"","ast-breadcrumbs-content":"","ast-featured-img":"","footer-sml-layout":"","theme-transparent-header-meta":"default","adv-header-id-meta":"","stick-header-meta":"","header-above-stick-meta":"","header-main-stick-meta":"","header-below-stick-meta":"","astra-migrate-meta-layouts":"set","ast-page-background-enabled":"default","ast-page-background-meta":{"desktop":{"background-color":"var(--ast-global-color-5)","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""},"tablet":{"background-color":"","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""},"mobile":{"background-color":"","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""}},"ast-content-background-meta":{"desktop":{"background-color":"var(--ast-global-color-4)","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""},"tablet":{"background-color":"var(--ast-global-color-4)","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""},"mobile":{"background-color":"var(--ast-global-color-4)","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""}},"footnotes":""},"categories":[18],"tags":[],"class_list":["post-403","post","type-post","status-publish","format-standard","hentry","category-automatizacion"],"_links":{"self":[{"href":"https:\/\/fractalikadigital.dev\/blog\/wp-json\/wp\/v2\/posts\/403","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/fractalikadigital.dev\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/fractalikadigital.dev\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/fractalikadigital.dev\/blog\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/fractalikadigital.dev\/blog\/wp-json\/wp\/v2\/comments?post=403"}],"version-history":[{"count":0,"href":"https:\/\/fractalikadigital.dev\/blog\/wp-json\/wp\/v2\/posts\/403\/revisions"}],"wp:attachment":[{"href":"https:\/\/fractalikadigital.dev\/blog\/wp-json\/wp\/v2\/media?parent=403"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/fractalikadigital.dev\/blog\/wp-json\/wp\/v2\/categories?post=403"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/fractalikadigital.dev\/blog\/wp-json\/wp\/v2\/tags?post=403"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}