{"id":8569,"date":"2019-11-20T15:30:04","date_gmt":"2019-11-20T14:30:04","guid":{"rendered":"https:\/\/ignaciosantiago.com\/?page_id=8569"},"modified":"2021-10-11T20:16:54","modified_gmt":"2021-10-11T18:16:54","slug":"banners-wordpress","status":"publish","type":"post","link":"https:\/\/ignaciosantiago.com\/banners-wordpress\/","title":{"rendered":"C\u00f3mo Insertar BANNERS con Publicidad en WORDPRESS"},"content":{"rendered":"<p>En la actualidad\u00a0la <strong>publicidad<\/strong> es parte esencial de la<strong> mayor\u00eda de las p\u00e1ginas web<\/strong> de\u00a0Internet. En este tutorial te voy a mostrar\u00a0c\u00f3mo<strong>\u00a0insertar y mostrar banners en diferentes partes de tu p\u00e1gina web de WordPress<\/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\u00a0las instrucciones de m\u00e1s abajo.<\/p>\n<div class=\"fusion-title title fusion-title-1 fusion-title-center fusion-title-text fusion-title-size-six\" style=\"--awb-margin-right:0px;--awb-margin-left:0px;--awb-margin-right-small:0px;--awb-margin-left-small:0px;\"><div class=\"title-sep-container title-sep-container-left\"><div class=\"title-sep sep-single sep-solid\" style=\"border-color:var(--awb-custom_color_8);\"><\/div><\/div><span class=\"awb-title-spacer\"><\/span><h6 class=\"fusion-title-heading title-heading-center fusion-responsive-typography-calculated\" style=\"margin:0;text-transform:none;--fontSize:22.5;line-height:1.2;\"><a name=\"indice\"><\/a>\u00cdndice<\/h6><span class=\"awb-title-spacer\"><\/span><div class=\"title-sep-container title-sep-container-right\"><div class=\"title-sep sep-single sep-solid\" style=\"border-color:var(--awb-custom_color_8);\"><\/div><\/div><\/div>\n<div class=\"fusion-builder-row fusion-row\"><div class=\"fusion-layout-column fusion_builder_column fusion-builder-column-0 fusion_builder_column_1_2 1_2 fusion-one-half fusion-column-first\" style=\"--awb-bg-size:cover;--awb-margin-top:0px;width:48%; margin-right: 4%;\"><div class=\"fusion-column-wrapper fusion-flex-column-wrapper-legacy\"><ul style=\"--awb-size:16px;--awb-line-height:27.2px;--awb-icon-width:27.2px;--awb-icon-height:27.2px;--awb-icon-margin:11.2px;--awb-content-margin:38.4px;--awb-circlecolor:var(--awb-color3);--awb-circle-yes-font-size:14.08px;\" class=\"fusion-checklist fusion-checklist-1 fusion-checklist-default type-icons\">\n<li class=\"fusion-li-item\" style=\"\"><span class=\"icon-wrapper circle-yes\"><i class=\"fusion-li-icon fa fa-arrow-right\" aria-hidden=\"true\"><\/i><\/span><div class=\"fusion-li-item-content\"><a href=\"#insertar-banner-sidebar-wordpress\">C\u00f3mo insertar un banner en el sidebar<\/a><\/div><\/li>\n<li class=\"fusion-li-item\" style=\"\"><span class=\"icon-wrapper circle-yes\"><i class=\"fusion-li-icon fa fa-arrow-right\" aria-hidden=\"true\"><\/i><\/span><div class=\"fusion-li-item-content\"><a href=\"#insertar-banner-entrada-blog-pagina-wordpress\">C\u00f3mo insertar un banner en una entrada o p\u00e1gina<\/a><\/div><\/li>\n<li class=\"fusion-li-item\" style=\"\"><span class=\"icon-wrapper circle-yes\"><i class=\"fusion-li-icon fa fa-arrow-right\" aria-hidden=\"true\"><\/i><\/span><div class=\"fusion-li-item-content\"><a href=\"#insertar-banner-inicio-final-entrada-blog-pagina-wordpress\">C\u00f3mo insertar un banner al principio o al final de una entrada o p\u00e1gina<\/a><\/div><\/li>\n<\/ul><div class=\"fusion-clearfix\"><\/div><\/div><\/div><div class=\"fusion-layout-column fusion_builder_column fusion-builder-column-1 fusion_builder_column_1_2 1_2 fusion-one-half fusion-column-last\" style=\"--awb-bg-size:cover;--awb-margin-top:0px;width:48%;\"><div class=\"fusion-column-wrapper fusion-flex-column-wrapper-legacy\"><ul style=\"--awb-size:16px;--awb-line-height:27.2px;--awb-icon-width:27.2px;--awb-icon-height:27.2px;--awb-icon-margin:11.2px;--awb-content-margin:38.4px;--awb-circlecolor:var(--awb-color3);--awb-circle-yes-font-size:14.08px;\" class=\"fusion-checklist fusion-checklist-2 fusion-checklist-default type-icons\">\n<ul style=\"--awb-size:13px;--awb-line-height:22.1px;--awb-icon-width:22.1px;--awb-icon-height:22.1px;--awb-icon-margin:9.1px;--awb-content-margin:31.2px;--awb-circlecolor:var(--awb-color3);--awb-circle-yes-font-size:11.44px;\" class=\"fusion-checklist fusion-checklist-2 fusion-checklist-default type-icons\"><\/ul>\n<li class=\"fusion-li-item\" style=\"\"><span class=\"icon-wrapper circle-yes\"><i class=\"fusion-li-icon awb-icon-check\" aria-hidden=\"true\"><\/i><\/span><div class=\"fusion-li-item-content\"><a href=\"#insertar-banner-header-footer-wordpress\">C\u00f3mo insertar un banner en el header o en el footer<\/a><\/div><\/li>\n<li class=\"fusion-li-item\" style=\"\"><span class=\"icon-wrapper circle-yes\"><i class=\"fusion-li-icon awb-icon-check\" aria-hidden=\"true\"><\/i><\/span><div class=\"fusion-li-item-content\"><a href=\"#insertar-banner-wordpress-con-plugins\">C\u00f3mo insertar un banner usando plugins<\/a><\/div><\/li>\n<\/ul><div class=\"fusion-clearfix\"><\/div><\/div><\/div><\/div>\n<div class=\"fusion-title title fusion-title-2 fusion-title-text fusion-title-size-two\" style=\"--awb-margin-right:0px;--awb-margin-left:0px;--awb-margin-right-small:0px;--awb-margin-left-small:0px;\"><div id=\"ez-toc-container\" class=\"ez-toc-v2_0_50 counter-hierarchy ez-toc-counter ez-toc-container-direction\">\n<div class=\"ez-toc-title-container\">\n<p class=\"ez-toc-title\">&Iacute;ndice de contenidos<\/p>\n<span class=\"ez-toc-title-toggle\"><\/span><\/div>\n<nav><ul class='ez-toc-list ez-toc-list-level-1 ' ><li class='ez-toc-page-1 ez-toc-heading-level-2'><a class=\"ez-toc-link ez-toc-heading-1\" href=\"https:\/\/ignaciosantiago.com\/banners-wordpress\/#como-insertar-y-mostrar-un-banner-en-el-sidebar\" title=\"C\u00f3mo insertar y mostrar un banner en el sidebar\">C\u00f3mo insertar y mostrar un banner en el sidebar<\/a><\/li><li class='ez-toc-page-1 ez-toc-heading-level-2'><a class=\"ez-toc-link ez-toc-heading-2\" href=\"https:\/\/ignaciosantiago.com\/banners-wordpress\/#como-insertar-un-banner-en-una-entrada-del-blog-o-una-pagina\" title=\"C\u00f3mo insertar un banner en una entrada del blog o una p\u00e1gina\">C\u00f3mo insertar un banner en una entrada del blog o una p\u00e1gina<\/a><\/li><li class='ez-toc-page-1 ez-toc-heading-level-2'><a class=\"ez-toc-link ez-toc-heading-3\" href=\"https:\/\/ignaciosantiago.com\/banners-wordpress\/#como-insertar-un-banner-al-principio-o-al-final-de-una-entrada-del-blog-o-una-pagina\" title=\"C\u00f3mo insertar un banner al principio o al final de una entrada del blog o una p\u00e1gina\">C\u00f3mo insertar un banner al principio o al final de una entrada del blog o una p\u00e1gina<\/a><\/li><li class='ez-toc-page-1 ez-toc-heading-level-2'><a class=\"ez-toc-link ez-toc-heading-4\" href=\"https:\/\/ignaciosantiago.com\/banners-wordpress\/#como-insertar-un-banner-en-el-header-o-en-el-footer\" title=\"C\u00f3mo insertar un banner\u00a0en el header o en el footer\">C\u00f3mo insertar un banner\u00a0en el header o en el footer<\/a><\/li><li class='ez-toc-page-1 ez-toc-heading-level-2'><a class=\"ez-toc-link ez-toc-heading-5\" href=\"https:\/\/ignaciosantiago.com\/banners-wordpress\/#como-insertar-un-banner-usando-plugins\" title=\"C\u00f3mo insertar un banner usando plugins\">C\u00f3mo insertar un banner usando plugins<\/a><\/li><\/ul><\/nav><\/div>\n<h2 class=\"fusion-title-heading title-heading-left fusion-responsive-typography-calculated\" style=\"margin:0;text-transform:none;--fontSize:26.25;line-height:1.15;\"><span class=\"ez-toc-section\" id=\"como-insertar-y-mostrar-un-banner-en-el-sidebar\"><\/span><a name=\"insertar-banner-sidebar-wordpress\"><\/a>C\u00f3mo insertar y mostrar un banner en el sidebar<span class=\"ez-toc-section-end\"><\/span><\/h2><span class=\"awb-title-spacer\"><\/span><div class=\"title-sep-container\"><div class=\"title-sep sep-single sep-solid\" style=\"border-color:var(--awb-custom_color_8);\"><\/div><\/div><\/div>\n<p>Es una pr\u00e1ctica com\u00fan el uso del <a href=\"https:\/\/ignaciosantiago.com\/que-es\/sidebar\/\" target=\"_blank\" rel=\"noopener noreferrer\">sidebar <\/a>(barra lateral) para<strong> insertar\u00a0banners en Wordpress<\/strong>. Hay dos maneras de hacer esto:<\/p>\n<ol>\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=\"noopener noreferrer\">widget<\/a>\u00a0de texto con el\u00a0<strong>c\u00f3digo del banner<\/strong><\/li>\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<\/ol>\n<p>Si tu plantilla\u00a0es compatible con widgets, ve\u00a0a<strong> Apariencia &gt; Widgets<\/strong>. A continuaci\u00f3n, arrastre un widget de texto al \u00e1rea del sidebar correspondiente. En mi\u00a0caso 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\u00a0el 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<p><img decoding=\"async\" class=\"aligncenter size-full wp-image-11427\" src=\"https:\/\/ignaciosantiago.com\/wp-content\/uploads\/2014\/06\/como-insertar-banner-sidebar-wordpress.jpg\" alt=\"como insertar banner sidebar wordpress\" width=\"680\" height=\"329\" srcset=\"https:\/\/ignaciosantiago.com\/wp-content\/uploads\/2014\/06\/como-insertar-banner-sidebar-wordpress-150x73.jpg 150w, https:\/\/ignaciosantiago.com\/wp-content\/uploads\/2014\/06\/como-insertar-banner-sidebar-wordpress-200x97.jpg 200w, https:\/\/ignaciosantiago.com\/wp-content\/uploads\/2014\/06\/como-insertar-banner-sidebar-wordpress-400x194.jpg 400w, https:\/\/ignaciosantiago.com\/wp-content\/uploads\/2014\/06\/como-insertar-banner-sidebar-wordpress-600x290.jpg 600w, https:\/\/ignaciosantiago.com\/wp-content\/uploads\/2014\/06\/como-insertar-banner-sidebar-wordpress.jpg 680w\" sizes=\"(max-width: 680px) 100vw, 680px\" \/><\/p>\n<p>Este proceso colocar\u00e1 el <strong>banner<\/strong> que tu\u00a0quieras\u00a0en el sidebar o barra lateral de tu WordPress.<\/p>\n<p><img decoding=\"async\" class=\"aligncenter size-full wp-image-11420\" src=\"https:\/\/ignaciosantiago.com\/wp-content\/uploads\/2014\/06\/como-insertar-banner-sidebar-wordpress-2.jpg\" alt=\"como insertar banner sidebar wordpress\" width=\"680\" height=\"260\" srcset=\"https:\/\/ignaciosantiago.com\/wp-content\/uploads\/2014\/06\/como-insertar-banner-sidebar-wordpress-2-150x57.jpg 150w, https:\/\/ignaciosantiago.com\/wp-content\/uploads\/2014\/06\/como-insertar-banner-sidebar-wordpress-2-200x76.jpg 200w, https:\/\/ignaciosantiago.com\/wp-content\/uploads\/2014\/06\/como-insertar-banner-sidebar-wordpress-2-400x153.jpg 400w, https:\/\/ignaciosantiago.com\/wp-content\/uploads\/2014\/06\/como-insertar-banner-sidebar-wordpress-2-600x229.jpg 600w, https:\/\/ignaciosantiago.com\/wp-content\/uploads\/2014\/06\/como-insertar-banner-sidebar-wordpress-2.jpg 680w\" sizes=\"(max-width: 680px) 100vw, 680px\" \/><\/p>\n<p>Si tu plantilla no soporta widgets, vas a tener que a\u00f1adir el\u00a0<strong>c\u00f3digo de banner<\/strong> directamente en el archivo sidebar.php. Puede editar este archivo en <strong>Apariencia &gt; Editor<\/strong>.<\/p>\n<div class=\"fusion-title title fusion-title-3 fusion-title-text fusion-title-size-two\" style=\"--awb-margin-right:0px;--awb-margin-left:0px;--awb-margin-right-small:0px;--awb-margin-left-small:0px;\"><h2 class=\"fusion-title-heading title-heading-left fusion-responsive-typography-calculated\" style=\"margin:0;text-transform:none;--fontSize:26.25;line-height:1.15;\"><span class=\"ez-toc-section\" id=\"como-insertar-un-banner-en-una-entrada-del-blog-o-una-pagina\"><\/span><a name=\"insertar-banner-entrada-blog-pagina-wordpress\"><\/a>C\u00f3mo insertar un banner en una entrada del blog o una p\u00e1gina<span class=\"ez-toc-section-end\"><\/span><\/h2><span class=\"awb-title-spacer\"><\/span><div class=\"title-sep-container\"><div class=\"title-sep sep-single sep-solid\" style=\"border-color:var(--awb-custom_color_8);\"><\/div><\/div><\/div>\n<p>Si lo que quieres es\u00a0agregar un banner dentro del contenido de tus entradas o posts, o en las p\u00e1ginas est\u00e1ticas, abre el modo de texto en el\u00a0editor de WordPress y pega\u00a0el c\u00f3digo del banner.<\/p>\n<p><img decoding=\"async\" class=\"aligncenter size-full wp-image-11425\" src=\"https:\/\/ignaciosantiago.com\/wp-content\/uploads\/2014\/06\/como-insertar-banner-entrada-blog-pagina-wordpress.jpg\" alt=\"como insertar banner entrada blog pagina wordpress\" width=\"680\" height=\"270\" srcset=\"https:\/\/ignaciosantiago.com\/wp-content\/uploads\/2014\/06\/como-insertar-banner-entrada-blog-pagina-wordpress-150x60.jpg 150w, https:\/\/ignaciosantiago.com\/wp-content\/uploads\/2014\/06\/como-insertar-banner-entrada-blog-pagina-wordpress-200x79.jpg 200w, https:\/\/ignaciosantiago.com\/wp-content\/uploads\/2014\/06\/como-insertar-banner-entrada-blog-pagina-wordpress-400x159.jpg 400w, https:\/\/ignaciosantiago.com\/wp-content\/uploads\/2014\/06\/como-insertar-banner-entrada-blog-pagina-wordpress-600x238.jpg 600w, https:\/\/ignaciosantiago.com\/wp-content\/uploads\/2014\/06\/como-insertar-banner-entrada-blog-pagina-wordpress.jpg 680w\" sizes=\"(max-width: 680px) 100vw, 680px\" \/><\/p>\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\u00a0y\u00a0hacer que se vea mejor en el post o en la p\u00e1gina.<\/p>\n<p><img decoding=\"async\" class=\"aligncenter size-full wp-image-11421\" src=\"https:\/\/ignaciosantiago.com\/wp-content\/uploads\/2014\/06\/como-insertar-banner-entrada-blog-pagina-wordpress-2.jpg\" alt=\"como insertar banner entrada blog pagina wordpress\" width=\"680\" height=\"270\" srcset=\"https:\/\/ignaciosantiago.com\/wp-content\/uploads\/2014\/06\/como-insertar-banner-entrada-blog-pagina-wordpress-2-150x60.jpg 150w, https:\/\/ignaciosantiago.com\/wp-content\/uploads\/2014\/06\/como-insertar-banner-entrada-blog-pagina-wordpress-2-200x79.jpg 200w, https:\/\/ignaciosantiago.com\/wp-content\/uploads\/2014\/06\/como-insertar-banner-entrada-blog-pagina-wordpress-2-400x159.jpg 400w, https:\/\/ignaciosantiago.com\/wp-content\/uploads\/2014\/06\/como-insertar-banner-entrada-blog-pagina-wordpress-2-600x238.jpg 600w, https:\/\/ignaciosantiago.com\/wp-content\/uploads\/2014\/06\/como-insertar-banner-entrada-blog-pagina-wordpress-2.jpg 680w\" sizes=\"(max-width: 680px) 100vw, 680px\" \/><\/p>\n<div class=\"fusion-title title fusion-title-4 fusion-title-text fusion-title-size-two\" style=\"--awb-margin-right:0px;--awb-margin-left:0px;--awb-margin-right-small:0px;--awb-margin-left-small:0px;\"><h2 class=\"fusion-title-heading title-heading-left fusion-responsive-typography-calculated\" style=\"margin:0;text-transform:none;--fontSize:26.25;line-height:1.15;\"><span class=\"ez-toc-section\" id=\"como-insertar-un-banner-al-principio-o-al-final-de-una-entrada-del-blog-o-una-pagina\"><\/span><a name=\"insertar-banner-inicio-final-entrada-blog-pagina-wordpress\"><\/a>C\u00f3mo insertar un banner al principio o al final de una entrada del blog o una p\u00e1gina<span class=\"ez-toc-section-end\"><\/span><\/h2><span class=\"awb-title-spacer\"><\/span><div class=\"title-sep-container\"><div class=\"title-sep sep-single sep-solid\" style=\"border-color:var(--awb-custom_color_8);\"><\/div><\/div><\/div>\n<p>Para<strong> insertar\u00a0banners<\/strong> en la parte superior o inferior de <strong>todos<\/strong>\u00a0tus posts o p\u00e1ginas, es necesario agregar el <strong>c\u00f3digo de banner<\/strong>\u00a0en los archivos\u00a0<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\u00a0(single.php) y tus p\u00e1ginas (page.php). Puede editar estos archivos accediendo al panel de administraci\u00f3n de WordPress en\u00a0<strong>Apariencia -&gt; Editor<\/strong>.<\/p>\n<p>Si desea insertarel banner en la parte superior de tus entradas o p\u00e1ginas, busca\u00a0el siguiente c\u00f3digo:<\/p>\n<pre>&lt;?php while ( have_posts() ) : the_post(); ?&gt;<\/pre>\n<p>A\u00f1ade el c\u00f3digo del banner justo despu\u00e9s de esa l\u00ednea de c\u00f3digo. Esto insertar\u00e1 el banner\u00a0encima del t\u00edtulo de todos tus posts o\u00a0p\u00e1ginas. Por supuesto, puedes a\u00f1adir estilos <a href=\"https:\/\/ignaciosantiago.com\/que-es\/css-cascading-style-sheets\/\" target=\"_blank\" rel=\"noopener noreferrer\">CSS<\/a>\u00a0con el fin de hacer que se vea de acuerdo a sus necesidades.<\/p>\n<p><img decoding=\"async\" class=\"aligncenter size-full wp-image-11422\" src=\"https:\/\/ignaciosantiago.com\/wp-content\/uploads\/2014\/06\/como-insertar-banner-entrada-blog-pagina-wordpress-3.jpg\" alt=\"como insertar banner entrada blog pagina wordpress\" width=\"680\" height=\"187\" srcset=\"https:\/\/ignaciosantiago.com\/wp-content\/uploads\/2014\/06\/como-insertar-banner-entrada-blog-pagina-wordpress-3-150x41.jpg 150w, https:\/\/ignaciosantiago.com\/wp-content\/uploads\/2014\/06\/como-insertar-banner-entrada-blog-pagina-wordpress-3-200x55.jpg 200w, https:\/\/ignaciosantiago.com\/wp-content\/uploads\/2014\/06\/como-insertar-banner-entrada-blog-pagina-wordpress-3-400x110.jpg 400w, https:\/\/ignaciosantiago.com\/wp-content\/uploads\/2014\/06\/como-insertar-banner-entrada-blog-pagina-wordpress-3-600x165.jpg 600w, https:\/\/ignaciosantiago.com\/wp-content\/uploads\/2014\/06\/como-insertar-banner-entrada-blog-pagina-wordpress-3.jpg 680w\" sizes=\"(max-width: 680px) 100vw, 680px\" \/><\/p>\n<div class=\"fusion-title title fusion-title-5 fusion-title-text fusion-title-size-two\" style=\"--awb-margin-right:0px;--awb-margin-left:0px;--awb-margin-right-small:0px;--awb-margin-left-small:0px;\"><h2 class=\"fusion-title-heading title-heading-left fusion-responsive-typography-calculated\" style=\"margin:0;text-transform:none;--fontSize:26.25;line-height:1.15;\"><span class=\"ez-toc-section\" id=\"como-insertar-un-banner-en-el-header-o-en-el-footer\"><\/span><a name=\"insertar-banner-header-footer-wordpress\"><\/a>C\u00f3mo insertar un banner\u00a0en el header o en el footer<span class=\"ez-toc-section-end\"><\/span><\/h2><span class=\"awb-title-spacer\"><\/span><div class=\"title-sep-container\"><div class=\"title-sep sep-single sep-solid\" style=\"border-color:var(--awb-custom_color_8);\"><\/div><\/div><\/div>\n<p><strong>A\u00f1adir\u00a0banners en\u00a0el 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\u00a0widgets a\u00f1adidos en tu pie de p\u00e1gina o encabezado, puede seguir las instrucciones de la primera parte de este tutorial para insertar los\u00a0banners (igual que en el sidebar).<\/p>\n<p>Por otro lado, si tu plantilla\u00a0no tiene \u00e1reas de widgets a\u00f1adidas en las zonas de pie de p\u00e1gina\/cabecera, es necesario a\u00f1adir los banners manualmente. Para hacer esto dir\u00edgete al panel de\u00a0administraci\u00f3n de WordPress y ve\u00a0a <strong>Apariencia -&gt; 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\u00a0la 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\u00a0este 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<p><img decoding=\"async\" class=\"aligncenter size-full wp-image-11423\" src=\"https:\/\/ignaciosantiago.com\/wp-content\/uploads\/2014\/06\/como-insertar-banner-header-footer-wordpress.jpg\" alt=\"como insertar banner header footer wordpress\" width=\"680\" height=\"256\" srcset=\"https:\/\/ignaciosantiago.com\/wp-content\/uploads\/2014\/06\/como-insertar-banner-header-footer-wordpress-150x56.jpg 150w, https:\/\/ignaciosantiago.com\/wp-content\/uploads\/2014\/06\/como-insertar-banner-header-footer-wordpress-200x75.jpg 200w, https:\/\/ignaciosantiago.com\/wp-content\/uploads\/2014\/06\/como-insertar-banner-header-footer-wordpress-400x151.jpg 400w, https:\/\/ignaciosantiago.com\/wp-content\/uploads\/2014\/06\/como-insertar-banner-header-footer-wordpress-600x226.jpg 600w, https:\/\/ignaciosantiago.com\/wp-content\/uploads\/2014\/06\/como-insertar-banner-header-footer-wordpress.jpg 680w\" sizes=\"(max-width: 680px) 100vw, 680px\" \/><\/p>\n<p>En primer lugar, encontrar la apertura de la etiqueta body. El valor por defecto de una plantilla de Wordpres\u00a0deber\u00eda tener\u00a0este aspecto:<\/p>\n<pre>&lt;body &lt;?php body_class(); ?&gt;&gt;<\/pre>\n<p>A continuaci\u00f3n a\u00f1ade el siguiente c\u00f3digo:<\/p>\n<pre>&lt;div&gt;&lt;a href=\"Enlacedelbanner\" target=\"_blank\"&gt;&lt;img src=\"URLdelaimagen\" width=\"Ancho\" height=\"Alto\" \/&gt;&lt;\/a&gt;&lt;\/div&gt;<\/pre>\n<p>Es necesario sustituir <strong><em>Enlacedelbanner<\/em> <\/strong>y\u00a0<strong><em>URLdelaimagen<\/em> <\/strong>con los datos de tu banner. Por \u00faltimo, proporciona el ancho y alto reales de la imagen del banner.<\/p>\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<p><img decoding=\"async\" class=\"aligncenter size-full wp-image-11424\" src=\"https:\/\/ignaciosantiago.com\/wp-content\/uploads\/2014\/06\/como-insertar-banner-header-wordpress.jpg\" alt=\"como insertar banner header wordpress\" width=\"680\" height=\"187\" srcset=\"https:\/\/ignaciosantiago.com\/wp-content\/uploads\/2014\/06\/como-insertar-banner-header-wordpress-150x41.jpg 150w, https:\/\/ignaciosantiago.com\/wp-content\/uploads\/2014\/06\/como-insertar-banner-header-wordpress-200x55.jpg 200w, https:\/\/ignaciosantiago.com\/wp-content\/uploads\/2014\/06\/como-insertar-banner-header-wordpress-400x110.jpg 400w, https:\/\/ignaciosantiago.com\/wp-content\/uploads\/2014\/06\/como-insertar-banner-header-wordpress-600x165.jpg 600w, https:\/\/ignaciosantiago.com\/wp-content\/uploads\/2014\/06\/como-insertar-banner-header-wordpress.jpg 680w\" sizes=\"(max-width: 680px) 100vw, 680px\" \/><\/p>\n<p>Ten en cuenta que hemos insertado el\u00a0banner con un elemento div. Hemos hecho esto porque queremos\u00a0estilizar\u00a0el\u00a0banner. Para ello, selecciona <strong>style.css<\/strong> de la columna de la derecha y agrega las siguientes l\u00edneas de c\u00f3digo:<\/p>\n<pre>.headerbanner { display:block; margin: 10px auto; width: 480px}<\/pre>\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 &#8211; se puede utilizar todo el potencial de CSS para estilizar el banner de la manera que quieras.<\/p>\n<p><img decoding=\"async\" class=\"aligncenter size-full wp-image-11426\" src=\"https:\/\/ignaciosantiago.com\/wp-content\/uploads\/2014\/06\/como-insertar-banner-header-wordpress-2.jpg\" alt=\"como insertar banner header wordpress\" width=\"680\" height=\"148\" srcset=\"https:\/\/ignaciosantiago.com\/wp-content\/uploads\/2014\/06\/como-insertar-banner-header-wordpress-2-150x33.jpg 150w, https:\/\/ignaciosantiago.com\/wp-content\/uploads\/2014\/06\/como-insertar-banner-header-wordpress-2-200x44.jpg 200w, https:\/\/ignaciosantiago.com\/wp-content\/uploads\/2014\/06\/como-insertar-banner-header-wordpress-2-400x87.jpg 400w, https:\/\/ignaciosantiago.com\/wp-content\/uploads\/2014\/06\/como-insertar-banner-header-wordpress-2-600x131.jpg 600w, https:\/\/ignaciosantiago.com\/wp-content\/uploads\/2014\/06\/como-insertar-banner-header-wordpress-2.jpg 680w\" sizes=\"(max-width: 680px) 100vw, 680px\" \/><\/p>\n<p>A\u00f1adir un banner en el footer o\u00a0pie 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<div class=\"fusion-title title fusion-title-6 fusion-title-text fusion-title-size-two\" style=\"--awb-margin-right:0px;--awb-margin-left:0px;--awb-margin-right-small:0px;--awb-margin-left-small:0px;\"><h2 class=\"fusion-title-heading title-heading-left fusion-responsive-typography-calculated\" style=\"margin:0;text-transform:none;--fontSize:26.25;line-height:1.15;\"><span class=\"ez-toc-section\" id=\"como-insertar-un-banner-usando-plugins\"><\/span><a name=\"insertar-banner-wordpress-con-plugins\"><\/a>C\u00f3mo insertar un banner usando plugins<span class=\"ez-toc-section-end\"><\/span><\/h2><span class=\"awb-title-spacer\"><\/span><div class=\"title-sep-container\"><div class=\"title-sep sep-single sep-solid\" style=\"border-color:var(--awb-custom_color_8);\"><\/div><\/div><\/div>\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.\u00a0Ya que depende de la estructura de la p\u00e1gina web en particular y\u00a0tus\u00a0necesidades, te sugiero\u00a0que busques\u00a0a trav\u00e9s de los <a href=\"http:\/\/wordpress.org\/plugins\/search.php?q=banner\" target=\"_blank\" rel=\"noopener noreferrer\">plugins de banner<\/a> en el Directorio de Plugins de WordPress con el fin de encontrar el plugin que mejor se adapte\u00a0a tus necesidades. Una vez hecho esto, se puede\u00a0instalar el plugin, como cualquier otro plugin de WordPress.<\/p>\n<p><strong>Nota<\/strong>: Ahora mismo estoy utilizando el plugin\u00a0<a href=\"https:\/\/ignaciosantiago.com\/ir-a\/adinserterpro\/\" target=\"_blank\" rel=\"noopener noreferrer sponsored\">Ad Inserter PRO<\/a>\u00a0para mostrar la publicidad de mi p\u00e1gina web.<\/p>\n<p>\u00a1Ah! <strong>Que no se te olvide compartir este art\u00edculo<\/strong>&#8230; o a\u00f1adir un comentario con alguna duda o pregunta&#8230;. solo si te ha gustado :)<\/p>\n<div class=\"fusion-fullwidth fullwidth-box fusion-builder-row-1 fusion-flex-container nonhundred-percent-fullwidth non-hundred-percent-height-scrolling\" style=\"--awb-border-radius-top-left:0px;--awb-border-radius-top-right:0px;--awb-border-radius-bottom-right:0px;--awb-border-radius-bottom-left:0px;--awb-flex-wrap:wrap;\" ><div class=\"fusion-builder-row fusion-row fusion-flex-align-items-flex-start fusion-flex-content-wrap\" style=\"max-width:1248px;margin-left: calc(-4% \/ 2 );margin-right: calc(-4% \/ 2 );\"><div class=\"fusion-layout-column fusion_builder_column fusion-builder-column-2 fusion_builder_column_2_5 2_5 fusion-flex-column\" style=\"--awb-bg-size:cover;--awb-width-large:40%;--awb-margin-top-large:0px;--awb-spacing-right-large:4.8%;--awb-margin-bottom-large:1.25em;--awb-spacing-left-large:4.8%;--awb-width-medium:40%;--awb-spacing-right-medium:4.8%;--awb-spacing-left-medium:4.8%;--awb-width-small:100%;--awb-spacing-right-small:1.92%;--awb-spacing-left-small:1.92%;\"><div class=\"fusion-column-wrapper fusion-flex-justify-content-flex-start fusion-content-layout-column\"><\/div><\/div><div class=\"fusion-layout-column fusion_builder_column fusion-builder-column-3 fusion_builder_column_1_5 1_5 fusion-flex-column\" style=\"--awb-bg-size:cover;--awb-width-large:20%;--awb-margin-top-large:0px;--awb-spacing-right-large:9.6%;--awb-margin-bottom-large:1.25em;--awb-spacing-left-large:9.6%;--awb-width-medium:20%;--awb-spacing-right-medium:9.6%;--awb-spacing-left-medium:9.6%;--awb-width-small:100%;--awb-spacing-right-small:1.92%;--awb-spacing-left-small:1.92%;\"><div class=\"fusion-column-wrapper fusion-flex-justify-content-flex-start fusion-content-layout-column\"><div class=\"fusion-text fusion-text-1\"><!-- FeedbackWP Plugin --><div  class=\"rmp-widgets-container rmp-wp-plugin rmp-main-container js-rmp-widgets-container js-rmp-widgets-container--8569 \"  data-post-id=\"8569\">    <!-- Rating widget -->  <div class=\"rmp-rating-widget js-rmp-rating-widget\">          <p class=\"rmp-heading rmp-heading--title\">        \u00bfTe ha gustado el contenido?      <\/p>            <div class=\"rmp-rating-widget__icons\">      <ul class=\"rmp-rating-widget__icons-list js-rmp-rating-icons-list\">                  <li class=\"rmp-rating-widget__icons-list__icon js-rmp-rating-item\" data-descriptive-rating=\"\" data-value=\"1\">            <i class=\"js-rmp-rating-icon rmp-icon rmp-icon--ratings rmp-icon--star rmp-icon--full-highlight\"><\/i>          <\/li>                  <li class=\"rmp-rating-widget__icons-list__icon js-rmp-rating-item\" data-descriptive-rating=\"\" data-value=\"2\">            <i class=\"js-rmp-rating-icon rmp-icon rmp-icon--ratings rmp-icon--star rmp-icon--full-highlight\"><\/i>          <\/li>                  <li class=\"rmp-rating-widget__icons-list__icon js-rmp-rating-item\" data-descriptive-rating=\"\" data-value=\"3\">            <i class=\"js-rmp-rating-icon rmp-icon rmp-icon--ratings rmp-icon--star rmp-icon--full-highlight\"><\/i>          <\/li>                  <li class=\"rmp-rating-widget__icons-list__icon js-rmp-rating-item\" data-descriptive-rating=\"\" data-value=\"4\">            <i class=\"js-rmp-rating-icon rmp-icon rmp-icon--ratings rmp-icon--star rmp-icon--full-highlight\"><\/i>          <\/li>                  <li class=\"rmp-rating-widget__icons-list__icon js-rmp-rating-item\" data-descriptive-rating=\"\" data-value=\"5\">            <i class=\"js-rmp-rating-icon rmp-icon rmp-icon--ratings rmp-icon--star rmp-icon--full-highlight\"><\/i>          <\/li>              <\/ul>    <\/div>    <p class=\"rmp-rating-widget__hover-text js-rmp-hover-text\"><\/p>    <button class=\"rmp-rating-widget__submit-btn rmp-btn js-submit-rating-btn\">          <\/button>    <p class=\"rmp-rating-widget__results js-rmp-results \">      Puntuaci\u00f3n media <span class=\"rmp-rating-widget__results__rating js-rmp-avg-rating\">5<\/span> \/ 5. Votos: <span class=\"rmp-rating-widget__results__votes js-rmp-vote-count\">579<\/span>    <\/p>    <p class=\"rmp-rating-widget__not-rated js-rmp-not-rated rmp-rating-widget__not-rated--hidden\">      \u00a1Todav\u00eda no hay votos! S\u00e9 el primero en valorar el contenido.    <\/p>    <p class=\"rmp-rating-widget__msg js-rmp-msg\"><\/p>  <\/div>  <!--Structured data -->  <script type=\"application\/ld+json\">{  \"@context\": \"http:\/\/schema.org\",  \"@type\": \"Product\",  \"aggregateRating\": {    \"@type\": \"AggregateRating\",    \"bestRating\": \"5\",    \"ratingCount\": \"579\",    \"ratingValue\": \"5\"  },  \"image\": \"https:\/\/ignaciosantiago.com\/wp-content\/uploads\/2014\/06\/tutorial-wordpress-publicidad-como-insertar-banners-entradas-paginas-wordpress.jpg\",  \"name\": \"C\u00f3mo Insertar BANNERS con Publicidad en WORDPRESS\",  \"description\": \"C\u00f3mo Insertar BANNERS con Publicidad en WORDPRESS\"}<\/script>      <\/div>\n<\/div><\/div><\/div><div class=\"fusion-layout-column fusion_builder_column fusion-builder-column-4 fusion_builder_column_2_5 2_5 fusion-flex-column\" style=\"--awb-bg-size:cover;--awb-width-large:40%;--awb-margin-top-large:0px;--awb-spacing-right-large:4.8%;--awb-margin-bottom-large:1.25em;--awb-spacing-left-large:4.8%;--awb-width-medium:40%;--awb-spacing-right-medium:4.8%;--awb-spacing-left-medium:4.8%;--awb-width-small:100%;--awb-spacing-right-small:1.92%;--awb-spacing-left-small:1.92%;\"><div class=\"fusion-column-wrapper fusion-flex-justify-content-flex-start fusion-content-layout-column\"><\/div><\/div><div class=\"fusion-layout-column fusion_builder_column fusion-builder-column-5 fusion_builder_column_1_1 1_1 fusion-flex-column\" style=\"--awb-bg-size:cover;--awb-width-large:100%;--awb-margin-top-large:0px;--awb-spacing-right-large:1.92%;--awb-margin-bottom-large:1.25em;--awb-spacing-left-large:1.92%;--awb-width-medium:100%;--awb-spacing-right-medium:1.92%;--awb-spacing-left-medium:1.92%;--awb-width-small:100%;--awb-spacing-right-small:1.92%;--awb-spacing-left-small:1.92%;\"><div class=\"fusion-column-wrapper fusion-column-has-shadow fusion-flex-justify-content-flex-start fusion-content-layout-column\"><div class=\"fusion-title title fusion-title-7 fusion-title-center fusion-title-text fusion-title-size-six\" style=\"--awb-margin-right:0px;--awb-margin-left:0px;--awb-margin-right-small:0px;--awb-margin-left-small:0px;\"><div class=\"title-sep-container title-sep-container-left\"><div class=\"title-sep sep-single sep-solid\" style=\"border-color:var(--awb-custom_color_8);\"><\/div><\/div><span class=\"awb-title-spacer\"><\/span><h6 class=\"fusion-title-heading title-heading-center fusion-responsive-typography-calculated\" style=\"margin:0;text-transform:none;--fontSize:22.5;line-height:1.2;\">Tambi\u00e9n te puede interesar esta gu\u00eda<\/h6><span class=\"awb-title-spacer\"><\/span><div class=\"title-sep-container title-sep-container-right\"><div class=\"title-sep sep-single sep-solid\" style=\"border-color:var(--awb-custom_color_8);\"><\/div><\/div><\/div><\/div><\/div><div class=\"fusion-layout-column fusion_builder_column fusion-builder-column-6 fusion_builder_column_1_2 1_2 fusion-flex-column\" style=\"--awb-bg-size:cover;--awb-width-large:50%;--awb-margin-top-large:0px;--awb-spacing-right-large:3.84%;--awb-margin-bottom-large:1.25em;--awb-spacing-left-large:3.84%;--awb-width-medium:50%;--awb-spacing-right-medium:3.84%;--awb-spacing-left-medium:3.84%;--awb-width-small:100%;--awb-spacing-right-small:1.92%;--awb-spacing-left-small:1.92%;\"><div class=\"fusion-column-wrapper fusion-flex-justify-content-flex-start fusion-content-layout-column\"><div class=\"fusion-image-element \" style=\"--awb-caption-title-font-family:var(--h2_typography-font-family);--awb-caption-title-font-weight:var(--h2_typography-font-weight);--awb-caption-title-font-style:var(--h2_typography-font-style);--awb-caption-title-size:var(--h2_typography-font-size);--awb-caption-title-transform:var(--h2_typography-text-transform);--awb-caption-title-line-height:var(--h2_typography-line-height);--awb-caption-title-letter-spacing:var(--h2_typography-letter-spacing);\"><span class=\" fusion-imageframe imageframe-none imageframe-1 hover-type-none\"><img decoding=\"async\" width=\"600\" height=\"300\" alt=\"tutorial wordpress\" title=\"mejores herramientas marketing online digital\" src=\"https:\/\/ignaciosantiago.com\/wp-content\/uploads\/2014\/05\/tutorial-wordpress-aprender-crear-pagina-web.jpg\" class=\"img-responsive wp-image-34399\"\/><\/span><\/div><\/div><\/div><div class=\"fusion-layout-column fusion_builder_column fusion-builder-column-7 fusion_builder_column_1_2 1_2 fusion-flex-column\" style=\"--awb-bg-size:cover;--awb-width-large:50%;--awb-margin-top-large:0px;--awb-spacing-right-large:3.84%;--awb-margin-bottom-large:1.25em;--awb-spacing-left-large:3.84%;--awb-width-medium:50%;--awb-spacing-right-medium:3.84%;--awb-spacing-left-medium:3.84%;--awb-width-small:100%;--awb-spacing-right-small:1.92%;--awb-spacing-left-small:1.92%;\"><div class=\"fusion-column-wrapper fusion-column-has-shadow fusion-flex-justify-content-flex-start fusion-content-layout-column\"><div class=\"fusion-title title fusion-title-8 fusion-sep-none fusion-title-text fusion-title-size-six\" style=\"--awb-margin-right:0px;--awb-margin-left:0px;--awb-margin-right-small:0px;--awb-margin-left-small:0px;\"><h6 class=\"fusion-title-heading title-heading-left fusion-responsive-typography-calculated\" style=\"margin:0;text-transform:none;--fontSize:22.5;line-height:1.2;\"><a href=\"https:\/\/ignaciosantiago.com\/tutorial-wordpress\/\" target=\"_blank\" rel=\"noopener noreferrer\">Tutorial WordPress: Aprende a crear tu mismo una p\u00e1gina web con WordPress<\/a><\/h6><\/div><div class=\"fusion-text fusion-text-2\"><p>Sin duda, una de las <strong>mejores plataformas<\/strong> para crear una <a href=\"https:\/\/ignaciosantiago.com\/servicios\/diseno-paginas-web-wordpress\/\" target=\"_blank\" rel=\"noopener noreferrer\">p\u00e1gina web con dise\u00f1o Wordpress<\/a>,\u00a0<a href=\"https:\/\/ignaciosantiago.com\/servicios\/diseno-blogs-wordpress\/\" target=\"_blank\" rel=\"noopener noreferrer\">blogs<\/a>\u00a0o\u00a0<a href=\"https:\/\/ignaciosantiago.com\/servicios\/diseno-tiendas-online-wordpress\/\" target=\"_blank\" rel=\"noopener noreferrer\">tiendas online<\/a> para tu negocio, ya que es f\u00e1cil de usar, flexible y ofrece muchas opciones para personalizarla de acuerdo a tus necesidades. Empieza con buen pie con WordPress y revisa esta <strong>completa gu\u00eda<\/strong>.<\/p>\n<\/div><div ><a class=\"fusion-button button-flat fusion-button-default-size button-default fusion-button-default button-1 fusion-button-default-span fusion-button-default-type\" target=\"_blank\" rel=\"noopener noreferrer\" href=\"https:\/\/ignaciosantiago.com\/tutorial-wordpress\/\"><i class=\"fa-external-link-alt fas button-icon-left\" aria-hidden=\"true\"><\/i><span class=\"fusion-button-text\">Ir a la gu\u00eda<\/span><\/a><\/div><\/div><\/div><\/div><\/div>\n\n","protected":false},"excerpt":{"rendered":"<p>En la actualidad\u00a0la publicidad es parte esencial de la mayor\u00eda [&hellip;]<\/p>\n","protected":false},"author":2,"featured_media":42866,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"rank_math_lock_modified_date":false,"footnotes":""},"categories":[43166,86],"tags":[],"class_list":["post-8569","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-tutoriales","category-wordpress"],"_links":{"self":[{"href":"https:\/\/ignaciosantiago.com\/wp-json\/wp\/v2\/posts\/8569","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/ignaciosantiago.com\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/ignaciosantiago.com\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/ignaciosantiago.com\/wp-json\/wp\/v2\/users\/2"}],"replies":[{"embeddable":true,"href":"https:\/\/ignaciosantiago.com\/wp-json\/wp\/v2\/comments?post=8569"}],"version-history":[{"count":0,"href":"https:\/\/ignaciosantiago.com\/wp-json\/wp\/v2\/posts\/8569\/revisions"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/ignaciosantiago.com\/wp-json\/wp\/v2\/media\/42866"}],"wp:attachment":[{"href":"https:\/\/ignaciosantiago.com\/wp-json\/wp\/v2\/media?parent=8569"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/ignaciosantiago.com\/wp-json\/wp\/v2\/categories?post=8569"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/ignaciosantiago.com\/wp-json\/wp\/v2\/tags?post=8569"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}