{"id":6521,"date":"2014-12-24T12:50:31","date_gmt":"2014-12-24T12:50:31","guid":{"rendered":"https:\/\/www.jose-aguilar.com\/blog\/?p=6521"},"modified":"2014-12-24T13:02:53","modified_gmt":"2014-12-24T13:02:53","slug":"crear-un-tema-wordpress-desde-cero-creacion-de-zonas-para-widgets","status":"publish","type":"post","link":"https:\/\/www.jose-aguilar.com\/blog\/crear-un-tema-wordpress-desde-cero-creacion-de-zonas-para-widgets\/","title":{"rendered":"Crear un tema WordPress desde cero \u2013 Creaci\u00f3n de zonas para Widgets"},"content":{"rendered":"

En inform\u00e1tica, un widget<\/b><\/i> es una peque\u00f1a aplicaci\u00f3n o programa, usualmente presentado en archivos o ficheros peque\u00f1os que son ejecutados por un motor de widgets<\/i> o Widget Engine<\/i>. Entre sus objetivos est\u00e1n dar f\u00e1cil acceso a funciones frecuentemente usadas y proveer de informaci\u00f3n visual. Aunque no es condici\u00f3n indispensable, los widgets suelen ser utilizados para ser \u00abempotrados\u00bb en otra p\u00e1gina web, copiando el c\u00f3digo que el mismo widget pone a disposici\u00f3n del usuario. Dado que son peque\u00f1as aplicaciones, los widgets<\/i> pueden hacer todo lo que la imaginaci\u00f3n desee e interactuar con servicios e informaci\u00f3n distribuida en Internet; pueden ser vistosos relojes en pantalla, notas, calculadoras, calendarios, agendas, juegos, ventanas con informaci\u00f3n del tiempo en su ciudad, incluso sistemas de tiendas de comercio, etc.<\/p>\n

En la administraci\u00f3n de WordPress tenemos un apartado de Widgets donde com\u00fanmente pr\u00e1cticamente todas las plantillas al menos tienen un Widget Sidebar para a\u00f1adir plugins a la columna derecha o izquierda de la plantilla.<\/p>\n

Nuestra plantilla va a disponer de varios Widgets. Empezaremos con las 2 columnas, tendremos que registrar 2 Widgets para las sidebars.<\/p>\n

En el archivo functions.php <\/strong>incluiremos el siguiente archivo:<\/p>\n

<\/a>Source code<\/a><\/td><\/a> <\/a> <\/a> <\/td><\/tr><\/table><\/div>
include<\/span>(<\/span>TEMPLATEPATH .<\/span> '\/includes\/widgets.php'<\/span>)<\/span>;<\/span><\/pre><\/div><\/div>\n
En este archivo a\u00f1adiremos el registro de nuestras sidebars con la funci\u00f3n register_sidebar(array)<\/a> que dispone WordPress:<\/p>\n
<\/a>Source code<\/a><\/td><\/a> <\/a> <\/a> <\/td><\/tr><\/table><\/div>
register_sidebar(<\/span>array<\/span><\/a>(<\/span>\n 'name'<\/span> =><\/span> 'Sidebar Left'<\/span>,<\/span>\n 'before_widget'<\/span> =><\/span> '<div class="widget">'<\/span>,<\/span>\n 'after_widget'<\/span> =><\/span> '<\/div>'<\/span>,<\/span>\n 'before_title'<\/span> =><\/span> '<h3>'<\/span>,<\/span>\n 'after_title'<\/span> =><\/span> '<\/h3>'<\/span>,<\/span>\n )<\/span>)<\/span>;<\/span>\n \nregister_sidebar(<\/span>array<\/span><\/a>(<\/span>\n 'name'<\/span> =><\/span> 'Sidebar Right'<\/span>,<\/span>\n 'before_widget'<\/span> =><\/span> '<div class="widget">'<\/span>,<\/span>\n 'after_widget'<\/span> =><\/span> '<\/div>'<\/span>,<\/span>\n 'before_title'<\/span> =><\/span> '<h3>'<\/span>,<\/span>\n 'after_title'<\/span> =><\/span> '<\/h3>'<\/span>,<\/span>\n )<\/span>)<\/span>;<\/span><\/pre><\/div><\/div>\n
Como puedes observar, para registrar una sidebar, tenemos que asignarle un nombre y definir los tags html que lo van a componer.<\/p>\n
Ahora si accedemos a Apariencia – Widgets<\/em> veremos 2 zonas nuevas para a\u00f1adir plugins.<\/p>\n
\"sidebars\"<\/a><\/p>\n
Ahora solo falta a\u00f1adir el siguiente c\u00f3digo en las plantillas. Lo a\u00f1adiremos en todos los archivos que vamos a utilizar, es decir: index.php<\/strong>, archive.php<\/strong>, single.php<\/strong>, etc.<\/p>\n
El archivo index.php<\/strong> ya lo hab\u00edamos editado en el tema 3 – Construyendo la base de nuestra plantilla<\/a> donde a\u00f1adimos la maquetaci\u00f3n previa. Ahora en este archivo a\u00f1adiremos las sidebars quedando de la siguiente forma:<\/p>\n
<\/a>Source code<\/a><\/td><\/a> <\/a> <\/a> <\/td><\/tr><\/table><\/div>
<?php get_header(<\/span>)<\/span>; ?><\/span>\n<div<\/span><\/a> id<\/span>=<\/span>"sidebar_left"<\/span> class<\/span>=<\/span>"col-xs-12 col-sm-3 col-md-3 col-lg-3 hidden-xs hidden-sm"<\/span>><\/span>\n    <?php if (<\/span> !function_exists(<\/span>'dynamic_sidebar'<\/span>)<\/span> || !dynamic_sidebar(<\/span>'Sidebar Left'<\/span>)<\/span> )<\/span> : endif; ?><\/span>\n<\/<\/span>div<\/span><\/a>><\/span>\n<div<\/span><\/a> id<\/span>=<\/span>"content"<\/span> class<\/span>=<\/span>"col-xs-12 col-sm-8 col-md-6 col-lg-6"<\/span>><\/span>\n    <div<\/span><\/a> class<\/span>=<\/span>"home col-xs-12 col-sm-12 col-md-12 col-lg-12"<\/span>><\/span>\n        <h1<\/span><\/a>><\/span>Your Home<\/<\/span>h1<\/span><\/a>><\/span>\n    <\/<\/span>div<\/span><\/a>><\/span>\n<\/<\/span>div<\/span><\/a>><\/span>\n<div<\/span><\/a> id<\/span>=<\/span>"sidebar_right"<\/span> class<\/span>=<\/span>"col-xs-12 col-sm-4 col-md-3 col-lg-3"<\/span>><\/span>\n    <?php if (<\/span> !function_exists(<\/span>'dynamic_sidebar'<\/span>)<\/span> || !dynamic_sidebar(<\/span>'Sidebar Right'<\/span>)<\/span> )<\/span> : endif; ?><\/span>\n<\/<\/span>div<\/span><\/a>><\/span>\n<?php get_footer(<\/span>)<\/span>; ?><\/span><\/pre><\/div><\/div>\n
Como podr\u00e1s observar estamos utilizando la funci\u00f3n dynamic_sidebar($name)<\/a> para capturar todos los plugins asociados a la sidebar $name.<\/p>\n
A\u00f1adimos un poco de maquetaci\u00f3n a los tags html de los widgets para las sidebars y obtendremos algo m\u00e1s vistoso nuestro front office. En la demostraci\u00f3n no nos vamos a matar mucho en la maquetaci\u00f3n porque es irrelevante ya que cada uno quedr\u00e1 maquetarlo a su gusto o necesidad.<\/p>\n
\"sidebars\"<\/a><\/p>\n
Bien, ya hemos conseguimos disponer de los widgets para las sidebars o columnas pero ahora tambi\u00e9n queremos definir otras posiciones para a\u00f1adir otro tipo de plugins.<\/p>\n
En la cabecera queremos incorporar un buscador a la derecha. Crearemos otro Widget para la cabecera.<\/p>\n
En nuestro archivo mytheme\/includes\/widgets.php<\/strong> o en el functions.php<\/strong> a\u00f1adiremos lo siguiente:<\/p>\n
<\/a>Source code<\/a><\/td><\/a> <\/a> <\/a> <\/td><\/tr><\/table><\/div>
add_action(<\/span>'widgets_init'<\/span>,<\/span>'header_widgets_init'<\/span>)<\/span>;<\/span>\n \nfunction<\/span> header_widgets_init(<\/span>)<\/span>{<\/span>\n    $args<\/span> =<\/span> array<\/span><\/a>(<\/span>\n    'name'<\/span>          =><\/span> 'Header Widget Zone'<\/span>,<\/span>\n    'id'<\/span>            =><\/span> 'header-widget'<\/span>,<\/span>\n    'description'<\/span>   =><\/span> ''<\/span>,<\/span>\n    'before_widget'<\/span> =><\/span> '<div class="header-widget col-sm-3">'<\/span>,<\/span>\n    'after_widget'<\/span>  =><\/span> '<\/div>'<\/span>,<\/span>\n    'before_title'<\/span>  =><\/span> '<h2>'<\/span>,<\/span>\n    'after_title'<\/span>   =><\/span> '<\/h2>'<\/span> )<\/span>;<\/span>\n    register_sidebar(<\/span>$args<\/span>)<\/span>;<\/span>\n}<\/span><\/pre><\/div><\/div>\n
Si te fijas, estamos utilizando la misma funci\u00f3n que para registrar las sidebars: register_sidebar($args) pero dentro de una funci\u00f3n para a\u00f1adir esta \u00faltima como acci\u00f3n.<\/p>\n
Ahora en el apartado de Widgets de la administraci\u00f3n dispondremos de otra posici\u00f3n para a\u00f1adir plugins con el nombre de Header Widget Zone<\/em>.<\/p>\n
Ahora solo falta acceder al archivo header.php<\/strong> que es donde queremos incorporar este nuevo hook o posici\u00f3n y a\u00f1adir lo siguiente:<\/p>\n
<\/a>Source code<\/a><\/td><\/a> <\/a> <\/a> <\/td><\/tr><\/table><\/div>
<?php<\/span> if<\/span> (<\/span>!<\/span>dynamic_sidebar(<\/span>'header-widget'<\/span>)<\/span>)<\/span> {<\/span>}<\/span> ?><\/span><\/pre><\/div><\/div>\n
En este momento aparecer\u00e1 cualquier plugin o widget que hayas a\u00f1adido a tu nueva zona para widgets de la cabecera. Nosotros queremos a\u00f1adir el buscador.<\/p>\n
\"widget-header\"<\/a>Consiguiendo el siguiente resultado:<\/p>\n
\"header-widget-front\"<\/a><\/p>\n
En el pie de p\u00e1gina queremos a\u00f1adir 4 columnas.<\/p>\n
En nuestro archivo mytheme\/includes\/widgets.php<\/strong> o en el functions.php<\/strong> a\u00f1adiremos lo siguiente:<\/p>\n
<\/a>Source code<\/a><\/td><\/a> <\/a> <\/a> <\/td><\/tr><\/table><\/div>
add_action(<\/span>'widgets_init'<\/span>,<\/span>'footer1_widgets_init'<\/span>)<\/span>;<\/span>\n \nfunction<\/span> footer1_widgets_init(<\/span>)<\/span>{<\/span>\n    $args<\/span> =<\/span> array<\/span><\/a>(<\/span>\n    'name'<\/span>          =><\/span> 'Footer Widget Zone 1'<\/span>,<\/span>\n    'id'<\/span>            =><\/span> 'footer-widget1'<\/span>,<\/span>\n    'description'<\/span>   =><\/span> ''<\/span>,<\/span>\n    'before_widget'<\/span> =><\/span> '<div class="footer-widget col-sm-3">'<\/span>,<\/span>\n    'after_widget'<\/span>  =><\/span> '<\/div>'<\/span>,<\/span>\n    'before_title'<\/span>  =><\/span> '<h2>'<\/span>,<\/span>\n    'after_title'<\/span>   =><\/span> '<\/h2>'<\/span> )<\/span>;<\/span>\n    register_sidebar(<\/span>$args<\/span>)<\/span>;<\/span>\n}<\/span>\n \nadd_action(<\/span>'widgets_init'<\/span>,<\/span>'footer2_widgets_init'<\/span>)<\/span>;<\/span>\n \nfunction<\/span> footer2_widgets_init(<\/span>)<\/span>{<\/span>\n    $args<\/span> =<\/span> array<\/span><\/a>(<\/span>\n    'name'<\/span>          =><\/span> 'Footer Widget Zone 2'<\/span>,<\/span>\n    'id'<\/span>            =><\/span> 'footer-widget2'<\/span>,<\/span>\n    'description'<\/span>   =><\/span> ''<\/span>,<\/span>\n    'before_widget'<\/span> =><\/span> '<div class="footer-widget col-sm-3">'<\/span>,<\/span>\n    'after_widget'<\/span>  =><\/span> '<\/div>'<\/span>,<\/span>\n    'before_title'<\/span>  =><\/span> '<h2>'<\/span>,<\/span>\n    'after_title'<\/span>   =><\/span> '<\/h2>'<\/span> )<\/span>;<\/span>\n    register_sidebar(<\/span>$args<\/span>)<\/span>;<\/span>\n}<\/span>\n \nadd_action(<\/span>'widgets_init'<\/span>,<\/span>'footer3_widgets_init'<\/span>)<\/span>;<\/span>\n \nfunction<\/span> footer3_widgets_init(<\/span>)<\/span>{<\/span>\n    $args<\/span> =<\/span> array<\/span><\/a>(<\/span>\n    'name'<\/span>          =><\/span> 'Footer Widget Zone 3'<\/span>,<\/span>\n    'id'<\/span>            =><\/span> 'footer-widget3'<\/span>,<\/span>\n    'description'<\/span>   =><\/span> ''<\/span>,<\/span>\n    'before_widget'<\/span> =><\/span> '<div class="footer-widget col-sm-3">'<\/span>,<\/span>\n    'after_widget'<\/span>  =><\/span> '<\/div>'<\/span>,<\/span>\n    'before_title'<\/span>  =><\/span> '<h2>'<\/span>,<\/span>\n    'after_title'<\/span>   =><\/span> '<\/h2>'<\/span> )<\/span>;<\/span>\n    register_sidebar(<\/span>$args<\/span>)<\/span>;<\/span>\n}<\/span>\n \nadd_action(<\/span>'widgets_init'<\/span>,<\/span>'footer4_widgets_init'<\/span>)<\/span>;<\/span>\n \nfunction<\/span> footer4_widgets_init(<\/span>)<\/span>{<\/span>\n    $args<\/span> =<\/span> array<\/span><\/a>(<\/span>\n    'name'<\/span>          =><\/span> 'Footer Widget Zone 4'<\/span>,<\/span>\n    'id'<\/span>            =><\/span> 'footer-widget4'<\/span>,<\/span>\n    'description'<\/span>   =><\/span> ''<\/span>,<\/span>\n    'before_widget'<\/span> =><\/span> '<div class="footer-widget col-sm-3">'<\/span>,<\/span>\n    'after_widget'<\/span>  =><\/span> '<\/div>'<\/span>,<\/span>\n    'before_title'<\/span>  =><\/span> '<h2>'<\/span>,<\/span>\n    'after_title'<\/span>   =><\/span> '<\/h2>'<\/span> )<\/span>;<\/span>\n    register_sidebar(<\/span>$args<\/span>)<\/span>;<\/span>\n}<\/span><\/pre><\/div><\/div>\n
Acabamos de a\u00f1adir 4 zonas nuevas para a\u00f1adir Widgets. Ahora solo nos falta editar el archivo footer.php<\/strong> de nuestra plantilla habilitando las nuevas zonas. Nuestro footer.php quedar\u00e1 as\u00ed:<\/p>\n
<\/a>Source code<\/a><\/td><\/a> <\/a> <\/a> <\/td><\/tr><\/table><\/div>
<\/<\/span>div<\/span><\/a>><\/span>\n<div<\/span><\/a> id<\/span>=<\/span>"footer"<\/span> class<\/span>=<\/span>"row"<\/span>><\/span>\u00a0 \u00a0\n\u00a0\u00a0\u00a0 <div<\/span><\/a> id<\/span>=<\/span>"footer-wrapper"<\/span> class<\/span>=<\/span>"col-xs-12 col-sm-12 col-md-12 col-lg-12"<\/span>><\/span>\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0 <?php if (<\/span>!dynamic_sidebar(<\/span>'footer-widget1'<\/span>)<\/span>)<\/span> {<\/span>}<\/span> ?><\/span>\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0 <?php if (<\/span>!dynamic_sidebar(<\/span>'footer-widget2'<\/span>)<\/span>)<\/span> {<\/span>}<\/span> ?><\/span>\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0 <?php if (<\/span>!dynamic_sidebar(<\/span>'footer-widget3'<\/span>)<\/span>)<\/span> {<\/span>}<\/span> ?><\/span>\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0 <?php if (<\/span>!dynamic_sidebar(<\/span>'footer-widget4'<\/span>)<\/span>)<\/span> {<\/span>}<\/span> ?><\/span>\n\u00a0\u00a0\u00a0 <\/<\/span>div<\/span><\/a>><\/span>\n<\/<\/span>div<\/span><\/a>><\/span>\n<?php wp_footer(<\/span>)<\/span>; ?><\/span>\n<\/<\/span>body<\/span><\/a>><\/span>\n<\/<\/span>html<\/span><\/a>><\/span><\/pre><\/div><\/div>\n
A partir de este momento si arrastramos Widgets a nuestras nuevas zonas creadas aparecer\u00e1n en el pie de p\u00e1gina. Solo falta darle un toque de maquetaci\u00f3n.<\/p>\n
\"footer-workshop\"<\/a>Adem\u00e1s tambi\u00e9n queremos a\u00f1adir una posici\u00f3n para Widgets en la p\u00e1gina principal. Aplicaremos la misma idea.<\/p>\n
En nuestro archivo mytheme\/includes\/widgets.php<\/strong> o en el functions.php<\/strong> a\u00f1adiremos lo siguiente:<\/p>\n
<\/a>Source code<\/a><\/td><\/a> <\/a> <\/a> <\/td><\/tr><\/table><\/div>
add_action(<\/span>'widgets_init'<\/span>,<\/span>'home_widgets_init'<\/span>)<\/span>;<\/span>\n \nfunction<\/span> home_widgets_init(<\/span>)<\/span>{<\/span>\n    $args<\/span> =<\/span> array<\/span><\/a>(<\/span>\n    'name'<\/span>          =><\/span> 'Homepage Widget Zone'<\/span>,<\/span>\n    'id'<\/span>            =><\/span> 'home-widget'<\/span>,<\/span>\n    'description'<\/span>   =><\/span> ''<\/span>,<\/span>\n    'before_widget'<\/span> =><\/span> '<div class="col-sm-12">'<\/span>,<\/span>\n    'after_widget'<\/span>  =><\/span> '<\/div>'<\/span>,<\/span>\n    'before_title'<\/span>  =><\/span> '<h2>'<\/span>,<\/span>\n    'after_title'<\/span>   =><\/span> '<\/h2>'<\/span> )<\/span>;<\/span>\n    register_sidebar(<\/span>$args<\/span>)<\/span>;<\/span>\n}<\/span><\/pre><\/div><\/div>\n
Seguidamente editar el archivo index.php de nuestra plantilla a\u00f1adiendo donde queramos lo siguiente:<\/p>\n
<\/a>Source code<\/a><\/td><\/a> <\/a> <\/a> <\/td><\/tr><\/table><\/div>
<?php<\/span> if<\/span> (<\/span>!<\/span>dynamic_sidebar(<\/span>'home'<\/span>)<\/span>)<\/span> {<\/span>}<\/span> ?><\/span><\/pre><\/div><\/div>\n
Ahora en la administraci\u00f3n tendremos otra nueva zona Homepage Zone Widget donde inicialmente vamos a poner un widget de texto de bienvenida.<\/p>\n
\"all-widgets\"<\/a><\/p>\n
Ya tenemos todos nuestros hooks (8 posiciones). Como podr\u00e1s observar, de esta manera podr\u00e1s a\u00f1adir tantos hooks o posiciones como quieras por toda la plantilla.<\/p>\n
Otra opci\u00f3n muy interesante para la creaci\u00f3n de la p\u00e1gina principal es la posibilidad de crear una p\u00e1gina de WordPress que represente la homepage y luego en Ajustes – Lectura<\/em> indicar que quieres que la p\u00e1gina principal sea una p\u00e1gina est\u00e1tica de las que has creado. En una p\u00e1gina puedes hacer infinidad de opciones utilizando los shortcodes de los que hablaremos en el \u00faltimo cap\u00edtulo.<\/p>\n\n            
Indice de contenido<\/h3>\n            \n                \n                \n                \n                \n                \n                \n                \n                \n                \n                \n                \n                \n            <\/table>\n","protected":false},"excerpt":{"rendered":"
En inform\u00e1tica, un widget es una peque\u00f1a aplicaci\u00f3n o programa, usualmente presentado en archivos o ficheros peque\u00f1os que son ejecutados por un motor de widgets o Widget Engine. Entre sus objetivos est\u00e1n dar f\u00e1cil acceso a funciones frecuentemente usadas y proveer de informaci\u00f3n visual. Aunque no es condici\u00f3n indispensable, los widgets suelen ser utilizados para […]<\/p>\n","protected":false},"author":1,"featured_media":6444,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[32],"tags":[170],"class_list":["post-6521","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-wordpress","tag-crear-un-tema-wordpress-desde-cero"],"yoast_head":"\nCrear un tema WordPress desde cero \u2013 Creaci\u00f3n de zonas para Widgets - Jose Aguilar Blog<\/title>\n<meta name=\"robots\" content=\"index, follow, max-snippet:-1, max-image-preview:large, max-video-preview:-1\" \/>\n<meta property=\"og:locale\" content=\"es_ES\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"Crear un tema WordPress desde cero \u2013 Creaci\u00f3n de zonas para Widgets - Jose Aguilar Blog\" \/>\n<meta property=\"og:description\" content=\"En inform\u00e1tica, un widget es una peque\u00f1a aplicaci\u00f3n o programa, usualmente presentado en archivos o ficheros peque\u00f1os que son ejecutados por un motor de widgets o Widget Engine. Entre sus objetivos est\u00e1n dar f\u00e1cil acceso a funciones frecuentemente usadas y proveer de informaci\u00f3n visual. Aunque no es condici\u00f3n indispensable, los widgets suelen ser utilizados para […]\" \/>\n<meta property=\"og:url\" content=\"https:\/\/www.jose-aguilar.com\/blog\/crear-un-tema-wordpress-desde-cero-creacion-de-zonas-para-widgets\/\" \/>\n<meta property=\"og:site_name\" content=\"Jose Aguilar Blog\" \/>\n<meta property=\"article:publisher\" content=\"https:\/\/www.facebook.com\/joseaguilarblog\" \/>\n<meta property=\"article:published_time\" content=\"2014-12-24T12:50:31+00:00\" \/>\n<meta property=\"article:modified_time\" content=\"2014-12-24T13:02:53+00:00\" \/>\n<meta property=\"og:image\" content=\"https:\/\/www.jose-aguilar.com\/blog\/wp-content\/uploads\/2014\/09\/logo-wordpress-saliendo.png\" \/>\n\t<meta property=\"og:image:width\" content=\"256\" \/>\n\t<meta property=\"og:image:height\" content=\"256\" \/>\n\t<meta property=\"og:image:type\" content=\"image\/png\" \/>\n<meta name=\"author\" content=\"Jose Aguilar\" \/>\n<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\n<meta name=\"twitter:creator\" content=\"@JoseAguilarBlog\" \/>\n<meta name=\"twitter:site\" content=\"@JoseAguilarBlog\" \/>\n<meta name=\"twitter:label1\" content=\"Escrito por\" \/>\n\t<meta name=\"twitter:data1\" content=\"Jose Aguilar\" \/>\n\t<meta name=\"twitter:label2\" content=\"Tiempo de lectura\" \/>\n\t<meta name=\"twitter:data2\" content=\"8 minutos\" \/>\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\/\/schema.org\",\"@graph\":[{\"@type\":\"WebPage\",\"@id\":\"https:\/\/www.jose-aguilar.com\/blog\/crear-un-tema-wordpress-desde-cero-creacion-de-zonas-para-widgets\/\",\"url\":\"https:\/\/www.jose-aguilar.com\/blog\/crear-un-tema-wordpress-desde-cero-creacion-de-zonas-para-widgets\/\",\"name\":\"Crear un tema WordPress desde cero \u2013 Creaci\u00f3n de zonas para Widgets - Jose Aguilar Blog\",\"isPartOf\":{\"@id\":\"https:\/\/www.jose-aguilar.com\/blog\/#website\"},\"primaryImageOfPage\":{\"@id\":\"https:\/\/www.jose-aguilar.com\/blog\/crear-un-tema-wordpress-desde-cero-creacion-de-zonas-para-widgets\/#primaryimage\"},\"image\":{\"@id\":\"https:\/\/www.jose-aguilar.com\/blog\/crear-un-tema-wordpress-desde-cero-creacion-de-zonas-para-widgets\/#primaryimage\"},\"thumbnailUrl\":\"https:\/\/www.jose-aguilar.com\/blog\/wp-content\/uploads\/2014\/09\/logo-wordpress-saliendo.png\",\"datePublished\":\"2014-12-24T12:50:31+00:00\",\"dateModified\":\"2014-12-24T13:02:53+00:00\",\"author\":{\"@id\":\"https:\/\/www.jose-aguilar.com\/blog\/#\/schema\/person\/e6d485db1e1140866e95971d17105d11\"},\"breadcrumb\":{\"@id\":\"https:\/\/www.jose-aguilar.com\/blog\/crear-un-tema-wordpress-desde-cero-creacion-de-zonas-para-widgets\/#breadcrumb\"},\"inLanguage\":\"es\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\/\/www.jose-aguilar.com\/blog\/crear-un-tema-wordpress-desde-cero-creacion-de-zonas-para-widgets\/\"]}]},{\"@type\":\"ImageObject\",\"inLanguage\":\"es\",\"@id\":\"https:\/\/www.jose-aguilar.com\/blog\/crear-un-tema-wordpress-desde-cero-creacion-de-zonas-para-widgets\/#primaryimage\",\"url\":\"https:\/\/www.jose-aguilar.com\/blog\/wp-content\/uploads\/2014\/09\/logo-wordpress-saliendo.png\",\"contentUrl\":\"https:\/\/www.jose-aguilar.com\/blog\/wp-content\/uploads\/2014\/09\/logo-wordpress-saliendo.png\",\"width\":256,\"height\":256},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\/\/www.jose-aguilar.com\/blog\/crear-un-tema-wordpress-desde-cero-creacion-de-zonas-para-widgets\/#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Portada\",\"item\":\"https:\/\/www.jose-aguilar.com\/blog\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"Crear un tema WordPress desde cero \u2013 Creaci\u00f3n de zonas para Widgets\"}]},{\"@type\":\"WebSite\",\"@id\":\"https:\/\/www.jose-aguilar.com\/blog\/#website\",\"url\":\"https:\/\/www.jose-aguilar.com\/blog\/\",\"name\":\"Jose Aguilar Blog\",\"description\":\"Desarrollo Web con PrestaShop, WordPress, PHP, jQuery y Ajax\",\"potentialAction\":[{\"@type\":\"SearchAction\",\"target\":{\"@type\":\"EntryPoint\",\"urlTemplate\":\"https:\/\/www.jose-aguilar.com\/blog\/?s={search_term_string}\"},\"query-input\":{\"@type\":\"PropertyValueSpecification\",\"valueRequired\":true,\"valueName\":\"search_term_string\"}}],\"inLanguage\":\"es\"},{\"@type\":\"Person\",\"@id\":\"https:\/\/www.jose-aguilar.com\/blog\/#\/schema\/person\/e6d485db1e1140866e95971d17105d11\",\"name\":\"Jose Aguilar\",\"image\":{\"@type\":\"ImageObject\",\"inLanguage\":\"es\",\"@id\":\"https:\/\/www.jose-aguilar.com\/blog\/#\/schema\/person\/image\/\",\"url\":\"https:\/\/secure.gravatar.com\/avatar\/abbfef5f1d75260c549d0f2c2842bb697ba1aadff3b2836b39d2590c8a625415?s=96&d=mm&r=g\",\"contentUrl\":\"https:\/\/secure.gravatar.com\/avatar\/abbfef5f1d75260c549d0f2c2842bb697ba1aadff3b2836b39d2590c8a625415?s=96&d=mm&r=g\",\"caption\":\"Jose Aguilar\"},\"description\":\"Director ejecutivo y tecnol\u00f3gico en JA Modules. Experto programador PrestaShop y Experto programador WordPress.\",\"sameAs\":[\"https:\/\/plus.google.com\/114357189801512615537\"],\"url\":\"https:\/\/www.jose-aguilar.com\/blog\/author\/josea902\/\"}]}<\/script>\n<!-- \/ Yoast SEO plugin. -->","yoast_head_json":{"title":"Crear un tema WordPress desde cero \u2013 Creaci\u00f3n de zonas para Widgets - Jose Aguilar Blog","robots":{"index":"index","follow":"follow","max-snippet":"max-snippet:-1","max-image-preview":"max-image-preview:large","max-video-preview":"max-video-preview:-1"},"og_locale":"es_ES","og_type":"article","og_title":"Crear un tema WordPress desde cero \u2013 Creaci\u00f3n de zonas para Widgets - Jose Aguilar Blog","og_description":"En inform\u00e1tica, un widget es una peque\u00f1a aplicaci\u00f3n o programa, usualmente presentado en archivos o ficheros peque\u00f1os que son ejecutados por un motor de widgets o Widget Engine. Entre sus objetivos est\u00e1n dar f\u00e1cil acceso a funciones frecuentemente usadas y proveer de informaci\u00f3n visual. Aunque no es condici\u00f3n indispensable, los widgets suelen ser utilizados para […]","og_url":"https:\/\/www.jose-aguilar.com\/blog\/crear-un-tema-wordpress-desde-cero-creacion-de-zonas-para-widgets\/","og_site_name":"Jose Aguilar Blog","article_publisher":"https:\/\/www.facebook.com\/joseaguilarblog","article_published_time":"2014-12-24T12:50:31+00:00","article_modified_time":"2014-12-24T13:02:53+00:00","og_image":[{"width":256,"height":256,"url":"https:\/\/www.jose-aguilar.com\/blog\/wp-content\/uploads\/2014\/09\/logo-wordpress-saliendo.png","type":"image\/png"}],"author":"Jose Aguilar","twitter_card":"summary_large_image","twitter_creator":"@JoseAguilarBlog","twitter_site":"@JoseAguilarBlog","twitter_misc":{"Escrito por":"Jose Aguilar","Tiempo de lectura":"8 minutos"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"WebPage","@id":"https:\/\/www.jose-aguilar.com\/blog\/crear-un-tema-wordpress-desde-cero-creacion-de-zonas-para-widgets\/","url":"https:\/\/www.jose-aguilar.com\/blog\/crear-un-tema-wordpress-desde-cero-creacion-de-zonas-para-widgets\/","name":"Crear un tema WordPress desde cero \u2013 Creaci\u00f3n de zonas para Widgets - Jose Aguilar Blog","isPartOf":{"@id":"https:\/\/www.jose-aguilar.com\/blog\/#website"},"primaryImageOfPage":{"@id":"https:\/\/www.jose-aguilar.com\/blog\/crear-un-tema-wordpress-desde-cero-creacion-de-zonas-para-widgets\/#primaryimage"},"image":{"@id":"https:\/\/www.jose-aguilar.com\/blog\/crear-un-tema-wordpress-desde-cero-creacion-de-zonas-para-widgets\/#primaryimage"},"thumbnailUrl":"https:\/\/www.jose-aguilar.com\/blog\/wp-content\/uploads\/2014\/09\/logo-wordpress-saliendo.png","datePublished":"2014-12-24T12:50:31+00:00","dateModified":"2014-12-24T13:02:53+00:00","author":{"@id":"https:\/\/www.jose-aguilar.com\/blog\/#\/schema\/person\/e6d485db1e1140866e95971d17105d11"},"breadcrumb":{"@id":"https:\/\/www.jose-aguilar.com\/blog\/crear-un-tema-wordpress-desde-cero-creacion-de-zonas-para-widgets\/#breadcrumb"},"inLanguage":"es","potentialAction":[{"@type":"ReadAction","target":["https:\/\/www.jose-aguilar.com\/blog\/crear-un-tema-wordpress-desde-cero-creacion-de-zonas-para-widgets\/"]}]},{"@type":"ImageObject","inLanguage":"es","@id":"https:\/\/www.jose-aguilar.com\/blog\/crear-un-tema-wordpress-desde-cero-creacion-de-zonas-para-widgets\/#primaryimage","url":"https:\/\/www.jose-aguilar.com\/blog\/wp-content\/uploads\/2014\/09\/logo-wordpress-saliendo.png","contentUrl":"https:\/\/www.jose-aguilar.com\/blog\/wp-content\/uploads\/2014\/09\/logo-wordpress-saliendo.png","width":256,"height":256},{"@type":"BreadcrumbList","@id":"https:\/\/www.jose-aguilar.com\/blog\/crear-un-tema-wordpress-desde-cero-creacion-de-zonas-para-widgets\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Portada","item":"https:\/\/www.jose-aguilar.com\/blog\/"},{"@type":"ListItem","position":2,"name":"Crear un tema WordPress desde cero \u2013 Creaci\u00f3n de zonas para Widgets"}]},{"@type":"WebSite","@id":"https:\/\/www.jose-aguilar.com\/blog\/#website","url":"https:\/\/www.jose-aguilar.com\/blog\/","name":"Jose Aguilar Blog","description":"Desarrollo Web con PrestaShop, WordPress, PHP, jQuery y Ajax","potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https:\/\/www.jose-aguilar.com\/blog\/?s={search_term_string}"},"query-input":{"@type":"PropertyValueSpecification","valueRequired":true,"valueName":"search_term_string"}}],"inLanguage":"es"},{"@type":"Person","@id":"https:\/\/www.jose-aguilar.com\/blog\/#\/schema\/person\/e6d485db1e1140866e95971d17105d11","name":"Jose Aguilar","image":{"@type":"ImageObject","inLanguage":"es","@id":"https:\/\/www.jose-aguilar.com\/blog\/#\/schema\/person\/image\/","url":"https:\/\/secure.gravatar.com\/avatar\/abbfef5f1d75260c549d0f2c2842bb697ba1aadff3b2836b39d2590c8a625415?s=96&d=mm&r=g","contentUrl":"https:\/\/secure.gravatar.com\/avatar\/abbfef5f1d75260c549d0f2c2842bb697ba1aadff3b2836b39d2590c8a625415?s=96&d=mm&r=g","caption":"Jose Aguilar"},"description":"Director ejecutivo y tecnol\u00f3gico en JA Modules. Experto programador PrestaShop y Experto programador WordPress.","sameAs":["https:\/\/plus.google.com\/114357189801512615537"],"url":"https:\/\/www.jose-aguilar.com\/blog\/author\/josea902\/"}]}},"_links":{"self":[{"href":"https:\/\/www.jose-aguilar.com\/blog\/wp-json\/wp\/v2\/posts\/6521","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/www.jose-aguilar.com\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.jose-aguilar.com\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.jose-aguilar.com\/blog\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/www.jose-aguilar.com\/blog\/wp-json\/wp\/v2\/comments?post=6521"}],"version-history":[{"count":0,"href":"https:\/\/www.jose-aguilar.com\/blog\/wp-json\/wp\/v2\/posts\/6521\/revisions"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/www.jose-aguilar.com\/blog\/wp-json\/wp\/v2\/media\/6444"}],"wp:attachment":[{"href":"https:\/\/www.jose-aguilar.com\/blog\/wp-json\/wp\/v2\/media?parent=6521"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.jose-aguilar.com\/blog\/wp-json\/wp\/v2\/categories?post=6521"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.jose-aguilar.com\/blog\/wp-json\/wp\/v2\/tags?post=6521"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}
Tema 01 - Introducci\u00f3n e \u00eddice de contenido<\/a><\/td>
Tema 02 - La estructura de archivos de una plantilla<\/a><\/td>
Tema 03 - Construyendo la base de nuestra plantilla<\/a><\/td>
Tema 04 - Creaci\u00f3n de los men\u00fas de navegaci\u00f3n<\/a><\/td>
Tema 05 - Creaci\u00f3n de zonas para Widgets<\/a><\/td>
Tema 06 - P\u00e1gina principal<\/a><\/td>
Tema 07 - P\u00e1ginas<\/a><\/td>
Tema 08 - Entradas y comentarios<\/a><\/td>
Tema 09 - P\u00e1gina de categor\u00edas y tags<\/a><\/td>
Tema 10 - Formulario de b\u00fasqueda y sus resultados<\/a><\/td>
Tema 11 - P\u00e1gina de error 404<\/a><\/td>
Tema 12 - Conclusi\u00f3n y demostraci\u00f3n<\/a><\/td>