{"id":11216,"date":"2019-11-20T14:30:04","date_gmt":"2019-11-20T13:30:04","guid":{"rendered":"https:\/\/clientes.ignaciosantiago.com\/new\/banners-wordpress\/"},"modified":"2026-03-10T11:45:02","modified_gmt":"2026-03-10T10:45:02","slug":"banners-wordpress","status":"publish","type":"post","link":"https:\/\/clientes.ignaciosantiago.com\/new\/banners-wordpress\/","title":{"rendered":"C\u00f3mo Insertar Publicidad con BANNERS en WORDPRESS"},"content":{"rendered":"\n<p>En la actualidad la <strong>publicidad<\/strong> es parte esencial de la<strong>mayor\u00eda de las p\u00e1ginas web<\/strong> de Internet. En este tutorial te voy a mostrar c\u00f3mo <strong>insertar y mostrar banners en Wordpress en diferentes partes de tu p\u00e1gina web<\/strong>. La mayor\u00eda de las p\u00e1ginas web que ofrecen banners te proporcionar\u00e1n todo el c\u00f3digo del banner, asi que todo lo que tienes que hacer es decidir d\u00f3nde quiere colocar ese banner siguiendo las instrucciones de m\u00e1s abajo.<\/p>\n\n\n\n<h2 class=\"wp-block-heading\">C\u00f3mo insertar y mostrar un banner en el sidebar<\/h2>\n\n\n\n<p>Es una pr\u00e1ctica com\u00fan el uso del <a href=\"https:\/\/ignaciosantiago.com\/que-es\/sidebar\/\" target=\"_blank\" rel=\"noreferrer noopener\">sidebar<\/a> (barra lateral) para<strong>insertar banners en Wordpress<\/strong>. Hay dos maneras de hacer esto:<\/p>\n\n\n\n<ul class=\"wp-block-list custom_list\">\n<li>Si tu plantilla es compatible con widgets en la barra lateral, puedes agregar un <a href=\"https:\/\/ignaciosantiago.com\/que-es\/widget\/\" target=\"_blank\" rel=\"noreferrer noopener\">widget<\/a> de texto con el <strong>c\u00f3digo del banner<\/strong><\/li>\n\n\n\n<li>Si tu plantilla <strong>no<\/strong> es compatible con widgets en la barra laterals, puedes agregar el <strong>c\u00f3digo del banner<\/strong> directamente al archivo sidebar.php de tu plantilla.<\/li>\n<\/ul>\n\n\n\n<p>Si tu plantilla es compatible con widgets, ve a<strong> Apariencia &gt; Widgets<\/strong>. A continuaci\u00f3n, arrastre un widget de texto al \u00e1rea del sidebar correspondiente. En mi caso ser\u00eda \u00ab<strong>Sidebar Principal<\/strong>\u00ab. A los efectos de este tutorial, vamos a poner este widget justo debajo del campo de b\u00fasqueda. Por \u00faltimo, pega el c\u00f3digo de banner en el widget, estableciendo un t\u00edtulo para el widget (que es opcional, d\u00e9jalo vac\u00edo si no quiere tener un t\u00edtulo) y pulsa el bot\u00f3n <strong>Guardar<\/strong> (aunque wordpress te va guardando los cambios autom\u00e1ticamente).<\/p>\n\n\n\n<figure class=\"wp-block-image size-full\"><img fetchpriority=\"high\" decoding=\"async\" width=\"680\" height=\"329\" src=\"https:\/\/clientes.ignaciosantiago.com\/new\/wp-content\/uploads\/2023\/10\/como-insertar-banner-sidebar-wordpress.jpg\" alt=\"como insertar banner sidebar wordpress\" class=\"wp-image-11225\" srcset=\"https:\/\/clientes.ignaciosantiago.com\/new\/wp-content\/uploads\/2023\/10\/como-insertar-banner-sidebar-wordpress.jpg 680w, https:\/\/clientes.ignaciosantiago.com\/new\/wp-content\/uploads\/2023\/10\/como-insertar-banner-sidebar-wordpress-385x186.jpg 385w, https:\/\/clientes.ignaciosantiago.com\/new\/wp-content\/uploads\/2023\/10\/como-insertar-banner-sidebar-wordpress-590x285.jpg 590w\" sizes=\"(max-width: 680px) 100vw, 680px\" \/><\/figure>\n\n\n\n<p>Este proceso colocar\u00e1 el <strong>banner<\/strong> que tu quieras en el sidebar o barra lateral de tu WordPress.<\/p>\n\n\n\n<figure class=\"wp-block-image size-full\"><img decoding=\"async\" width=\"680\" height=\"260\" src=\"https:\/\/clientes.ignaciosantiago.com\/new\/wp-content\/uploads\/2023\/10\/como-insertar-banner-sidebar-wordpress-2.jpg\" alt=\"como insertar banners en wordpress sidebar\" class=\"wp-image-11218\" srcset=\"https:\/\/clientes.ignaciosantiago.com\/new\/wp-content\/uploads\/2023\/10\/como-insertar-banner-sidebar-wordpress-2.jpg 680w, https:\/\/clientes.ignaciosantiago.com\/new\/wp-content\/uploads\/2023\/10\/como-insertar-banner-sidebar-wordpress-2-385x147.jpg 385w, https:\/\/clientes.ignaciosantiago.com\/new\/wp-content\/uploads\/2023\/10\/como-insertar-banner-sidebar-wordpress-2-590x226.jpg 590w\" sizes=\"(max-width: 680px) 100vw, 680px\" \/><\/figure>\n\n\n\n<p>Si tu plantilla no soporta widgets, vas a tener que a\u00f1adir el <strong>c\u00f3digo de banner<\/strong> directamente en el archivo sidebar.php. Puede editar este archivo en <strong>Apariencia &gt; Editor<\/strong>.<\/p>\n\n\n\n<h2 class=\"wp-block-heading\">C\u00f3mo insertar un banner en una entrada del blog o una p\u00e1gina<\/h2>\n\n\n\n<p>Si lo que quieres es agregar un banner dentro del contenido de tus entradas o posts, o en las p\u00e1ginas est\u00e1ticas, abre el modo de texto en el editor de WordPress y pega el c\u00f3digo del banner.<\/p>\n\n\n\n<figure class=\"wp-block-image size-full\"><img decoding=\"async\" width=\"680\" height=\"270\" src=\"https:\/\/clientes.ignaciosantiago.com\/new\/wp-content\/uploads\/2023\/10\/como-insertar-banner-entrada-blog-pagina-wordpress.jpg\" alt=\"como insertar banner entrada blog pagina wordpress\" class=\"wp-image-11223\" srcset=\"https:\/\/clientes.ignaciosantiago.com\/new\/wp-content\/uploads\/2023\/10\/como-insertar-banner-entrada-blog-pagina-wordpress.jpg 680w, https:\/\/clientes.ignaciosantiago.com\/new\/wp-content\/uploads\/2023\/10\/como-insertar-banner-entrada-blog-pagina-wordpress-385x153.jpg 385w, https:\/\/clientes.ignaciosantiago.com\/new\/wp-content\/uploads\/2023\/10\/como-insertar-banner-entrada-blog-pagina-wordpress-590x234.jpg 590w\" sizes=\"(max-width: 680px) 100vw, 680px\" \/><\/figure>\n\n\n\n<p>Esto agregar\u00e1 la imagen entre los dos p\u00e1rrafos. Puede utilizar el editor WYSIWYG de WordPress con el fin de colocar o alinear el banner y hacer que se vea mejor en el post o en la p\u00e1gina.<\/p>\n\n\n\n<figure class=\"wp-block-image size-full\"><img loading=\"lazy\" decoding=\"async\" width=\"680\" height=\"270\" src=\"https:\/\/clientes.ignaciosantiago.com\/new\/wp-content\/uploads\/2023\/10\/como-insertar-banner-entrada-blog-pagina-wordpress-2.jpg\" alt=\"como insertar banner entrada blog pagina wordpress\" class=\"wp-image-11219\" srcset=\"https:\/\/clientes.ignaciosantiago.com\/new\/wp-content\/uploads\/2023\/10\/como-insertar-banner-entrada-blog-pagina-wordpress-2.jpg 680w, https:\/\/clientes.ignaciosantiago.com\/new\/wp-content\/uploads\/2023\/10\/como-insertar-banner-entrada-blog-pagina-wordpress-2-385x153.jpg 385w, https:\/\/clientes.ignaciosantiago.com\/new\/wp-content\/uploads\/2023\/10\/como-insertar-banner-entrada-blog-pagina-wordpress-2-590x234.jpg 590w\" sizes=\"(max-width: 680px) 100vw, 680px\" \/><\/figure>\n\n\n\n<h2 class=\"wp-block-heading\">C\u00f3mo insertar un banner al principio o al final de una entrada del blog o una p\u00e1gina<\/h2>\n\n\n\n<p>Para <strong>insertar banners<\/strong> en wordpress, ya sea en la parte superior o inferior de <strong>todos<\/strong> tus posts o p\u00e1ginas, es necesario agregar el <strong>c\u00f3digo de banner<\/strong> en los archivos <strong>single.php<\/strong> o <strong>page.php<\/strong> de tu plantilla de WordPress. Ambos archivos tienen un contenido similar, pero que manejan diferentes partes de tu p\u00e1gina web: tus posts (single.php) y tus p\u00e1ginas (page.php). Puede editar estos archivos accediendo al panel de administraci\u00f3n de WordPress en <strong>Apariencia -> Editor<\/strong>.<\/p>\n\n\n\n<p>Si desea insertarel banner en la parte superior de tus entradas o p\u00e1ginas, busca el siguiente c\u00f3digo:<\/p>\n\n\n\n<p>&lt;?php while ( have_posts() ) : the_post(); ?&gt;<\/p>\n\n\n\n<p>A\u00f1ade el c\u00f3digo del banner justo despu\u00e9s de esa l\u00ednea de c\u00f3digo. Esto insertar\u00e1 el banner encima del t\u00edtulo de todos tus posts o p\u00e1ginas. Por supuesto, puedes a\u00f1adir estilos <a href=\"https:\/\/ignaciosantiago.com\/que-es\/css-cascading-style-sheets\/\" target=\"_blank\" rel=\"noreferrer noopener\">CSS<\/a> con el fin de hacer que se vea de acuerdo a sus necesidades.<\/p>\n\n\n\n<figure class=\"wp-block-image size-full\"><img loading=\"lazy\" decoding=\"async\" width=\"680\" height=\"187\" src=\"https:\/\/clientes.ignaciosantiago.com\/new\/wp-content\/uploads\/2023\/10\/como-insertar-banner-entrada-blog-pagina-wordpress-3.jpg\" alt=\"como insertar banner entrada blog pagina wordpress\" class=\"wp-image-11220\" srcset=\"https:\/\/clientes.ignaciosantiago.com\/new\/wp-content\/uploads\/2023\/10\/como-insertar-banner-entrada-blog-pagina-wordpress-3.jpg 680w, https:\/\/clientes.ignaciosantiago.com\/new\/wp-content\/uploads\/2023\/10\/como-insertar-banner-entrada-blog-pagina-wordpress-3-385x106.jpg 385w, https:\/\/clientes.ignaciosantiago.com\/new\/wp-content\/uploads\/2023\/10\/como-insertar-banner-entrada-blog-pagina-wordpress-3-590x162.jpg 590w\" sizes=\"(max-width: 680px) 100vw, 680px\" \/><\/figure>\n\n\n\n<h2 class=\"wp-block-heading\">C\u00f3mo insertar un banner en el header o en el footer<\/h2>\n\n\n\n<p><strong>A\u00f1adir banners en el header<\/strong> (encabezado) <strong>o en el footer<\/strong> (pie de p\u00e1gina) depende una vez m\u00e1s de la plantilla que est\u00e9s usando. Si tienes \u00e1rea para widgets a\u00f1adidos en tu pie de p\u00e1gina o encabezado, puede seguir las instrucciones de la primera parte de este tutorial para insertar los banners (igual que en el sidebar).<\/p>\n\n\n\n<p>Por otro lado, si tu plantilla no tiene \u00e1reas de widgets a\u00f1adidas en las zonas de pie de p\u00e1gina\/cabecera, es necesario a\u00f1adir los banners en Wordpress manualmente. Para hacer esto dir\u00edgete al panel de administraci\u00f3n de WordPress y ve a <strong>Apariencia -> Editor<\/strong>. A efectos de este tutorial, vamos a a\u00f1adir un banner personalizado en el header o cabecera. Dado que vamos a agregar el banner en la cabecera de la p\u00e1gina, selecciona header.php de la lista de archivos disponibles para editar. Ten en cuenta que el c\u00f3digo a insertar en este archivo ser\u00e1 diferente dependiendo de la platilla de Wordpress que est\u00e9s usando. Necesitar\u00e1s conocimientos de HTML b\u00e1sicos con el fin de a\u00f1adir el banner.<\/p>\n\n\n\n<figure class=\"wp-block-image size-full\"><img loading=\"lazy\" decoding=\"async\" width=\"680\" height=\"256\" src=\"https:\/\/clientes.ignaciosantiago.com\/new\/wp-content\/uploads\/2023\/10\/como-insertar-banner-header-footer-wordpress.jpg\" alt=\"como insertar banner header footer wordpress\" class=\"wp-image-11221\" srcset=\"https:\/\/clientes.ignaciosantiago.com\/new\/wp-content\/uploads\/2023\/10\/como-insertar-banner-header-footer-wordpress.jpg 680w, https:\/\/clientes.ignaciosantiago.com\/new\/wp-content\/uploads\/2023\/10\/como-insertar-banner-header-footer-wordpress-385x145.jpg 385w, https:\/\/clientes.ignaciosantiago.com\/new\/wp-content\/uploads\/2023\/10\/como-insertar-banner-header-footer-wordpress-590x222.jpg 590w\" sizes=\"(max-width: 680px) 100vw, 680px\" \/><\/figure>\n\n\n\n<p>En primer lugar, encontrar la apertura de la etiqueta body. El valor por defecto de una plantilla de Wordpres deber\u00eda tener este aspecto:<\/p>\n\n\n\n<p>&lt;body &lt;?php body_class(); ?&gt;&gt;<\/p>\n\n\n\n<p>A continuaci\u00f3n a\u00f1ade el siguiente c\u00f3digo:<\/p>\n\n\n\n<p>&lt;div&gt;&lt;a href=\u00bbEnlacedelbanner\u00bb target=\u00bb_blank\u00bb&gt;&lt;img src=\u00bbURLdelaimagen\u00bb width=\u00bbAncho\u00bb height=\u00bbAlto\u00bb \/&gt;&lt;\/a&gt;&lt;\/div&gt;<\/p>\n\n\n\n<p>Es necesario sustituir <strong><em>Enlacedelbanner<\/em><\/strong><strong> <\/strong>y <strong><em>URLdelaimagen<\/em><\/strong><strong> <\/strong>con los datos de tu banner. Por \u00faltimo, proporciona el ancho y alto reales de la imagen del banner.<\/p>\n\n\n\n<p>Este c\u00f3digo har\u00e1 que tu banner se inserte en la parte superior de p\u00e1gina web. Ten en cuenta que dependiendo de la plantilla que tengas instalada, es posible que tengas que mover el c\u00f3digo con el fin de colocarlo donde quieras.<\/p>\n\n\n\n<figure class=\"wp-block-image size-full\"><img loading=\"lazy\" decoding=\"async\" width=\"680\" height=\"187\" src=\"https:\/\/clientes.ignaciosantiago.com\/new\/wp-content\/uploads\/2023\/10\/como-insertar-banner-header-wordpress.jpg\" alt=\"como insertar banner header wordpress\" class=\"wp-image-11222\" srcset=\"https:\/\/clientes.ignaciosantiago.com\/new\/wp-content\/uploads\/2023\/10\/como-insertar-banner-header-wordpress.jpg 680w, https:\/\/clientes.ignaciosantiago.com\/new\/wp-content\/uploads\/2023\/10\/como-insertar-banner-header-wordpress-385x106.jpg 385w, https:\/\/clientes.ignaciosantiago.com\/new\/wp-content\/uploads\/2023\/10\/como-insertar-banner-header-wordpress-590x162.jpg 590w\" sizes=\"(max-width: 680px) 100vw, 680px\" \/><\/figure>\n\n\n\n<p>Ten en cuenta que hemos insertado el banner con un elemento div. Hemos hecho esto porque queremos estilizar el banner. Para ello, selecciona <strong>style.css<\/strong> de la columna de la derecha y agrega las siguientes l\u00edneas de c\u00f3digo:<\/p>\n\n\n\n<p>.headerbanner { display:block; margin: 10px auto; width: 480px}<\/p>\n\n\n\n<p>Esto centrar\u00e1 el banner y a\u00f1adir\u00e1 un poco de margen superior d\u00e1ndole un mejor aspecto. Por supuesto, esto es s\u00f3lo un ejemplo \u2013 se puede utilizar todo el potencial de CSS para estilizar el banner de la manera que quieras.<\/p>\n\n\n\n<figure class=\"wp-block-image size-full\"><img loading=\"lazy\" decoding=\"async\" width=\"680\" height=\"148\" src=\"https:\/\/clientes.ignaciosantiago.com\/new\/wp-content\/uploads\/2023\/10\/como-insertar-banner-header-wordpress-2.jpg\" alt=\"como insertar banner header wordpress\" class=\"wp-image-11224\" srcset=\"https:\/\/clientes.ignaciosantiago.com\/new\/wp-content\/uploads\/2023\/10\/como-insertar-banner-header-wordpress-2.jpg 680w, https:\/\/clientes.ignaciosantiago.com\/new\/wp-content\/uploads\/2023\/10\/como-insertar-banner-header-wordpress-2-385x84.jpg 385w, https:\/\/clientes.ignaciosantiago.com\/new\/wp-content\/uploads\/2023\/10\/como-insertar-banner-header-wordpress-2-590x128.jpg 590w\" sizes=\"(max-width: 680px) 100vw, 680px\" \/><\/figure>\n\n\n\n<p>A\u00f1adir un banner en el footer o pie de p\u00e1gina es b\u00e1sicamente el mismo con una peque\u00f1a diferencia: es necesario abrir el archivo footer.php en lugar del header.php. Entonces, todo lo que tienes que hacer es pegar el c\u00f3digo en donde quieras <strong>mostrar el banner<\/strong>.<\/p>\n\n\n\n<h2 class=\"wp-block-heading\">C\u00f3mo insertar banners en Wordpress usando plugins<\/h2>\n\n\n\n<p>Si deseas mostrar m\u00e1s de un banner en una p\u00e1gina, realizar un seguimiento de los anuncios que se muestran y funcionalidades m\u00e1s avanzadas, es aconsejable el uso de los plugins de WordPress disponible para la gesti\u00f3n de banners. Ya que depende de la estructura de la p\u00e1gina web en particular y tus necesidades, te sugiero que busques a trav\u00e9s de los <a href=\"http:\/\/wordpress.org\/plugins\/search.php?q=banner\" target=\"_blank\" rel=\"noreferrer noopener\">plugins de banner<\/a> en el Directorio de Plugins de WordPress con el fin de encontrar el plugin que mejor se adapte a tus necesidades. Una vez hecho esto, se puede instalar el plugin, como cualquier otro plugin de WordPress.<\/p>\n\n\n\n<p class=\"custom_note\"><strong>Nota<\/strong>: Ahora mismo estoy utilizando el plugin <a href=\"https:\/\/ignaciosantiago.com\/ir-a\/adinserterpro\/\" target=\"_blank\" rel=\"noreferrer noopener\">Ad Inserter PRO<\/a> para mostrar la publicidad de mi p\u00e1gina web. \u00a1Ah! <strong>Que no se te olvide compartir este art\u00edculo<\/strong>\u2026 o a\u00f1adir<\/p>\n\n\n\n<p><\/p>\n","protected":false},"excerpt":{"rendered":"<p>En la actualidad la publicidad es parte esencial de lamayor\u00eda de las p\u00e1ginas web de Internet. En este tutorial te voy a mostrar c\u00f3mo insertar y mostrar banners en Wordpress en diferentes partes de tu p\u00e1gina web. La mayor\u00eda de las p\u00e1ginas web que ofrecen banners te proporcionar\u00e1n todo el c\u00f3digo del banner, asi que [&hellip;]<\/p>\n","protected":false},"author":6,"featured_media":11217,"comment_status":"open","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"iawp_total_views":0,"footnotes":""},"categories":[201,209],"tags":[],"class_list":["post-11216","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-wordpress","category-tutoriales"],"_links":{"self":[{"href":"https:\/\/clientes.ignaciosantiago.com\/new\/wp-json\/wp\/v2\/posts\/11216","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/clientes.ignaciosantiago.com\/new\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/clientes.ignaciosantiago.com\/new\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/clientes.ignaciosantiago.com\/new\/wp-json\/wp\/v2\/users\/6"}],"replies":[{"embeddable":true,"href":"https:\/\/clientes.ignaciosantiago.com\/new\/wp-json\/wp\/v2\/comments?post=11216"}],"version-history":[{"count":5,"href":"https:\/\/clientes.ignaciosantiago.com\/new\/wp-json\/wp\/v2\/posts\/11216\/revisions"}],"predecessor-version":[{"id":47161,"href":"https:\/\/clientes.ignaciosantiago.com\/new\/wp-json\/wp\/v2\/posts\/11216\/revisions\/47161"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/clientes.ignaciosantiago.com\/new\/wp-json\/wp\/v2\/media\/11217"}],"wp:attachment":[{"href":"https:\/\/clientes.ignaciosantiago.com\/new\/wp-json\/wp\/v2\/media?parent=11216"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/clientes.ignaciosantiago.com\/new\/wp-json\/wp\/v2\/categories?post=11216"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/clientes.ignaciosantiago.com\/new\/wp-json\/wp\/v2\/tags?post=11216"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}