{"id":6512,"date":"2014-12-19T17:55:45","date_gmt":"2014-12-19T17:55:45","guid":{"rendered":"https:\/\/www.jose-aguilar.com\/blog\/?p=6512"},"modified":"2015-01-03T10:06:24","modified_gmt":"2015-01-03T10:06:24","slug":"crear-un-tema-wordpress-desde-cero-construyendo-la-base-de-nuestra-plantilla","status":"publish","type":"post","link":"https:\/\/www.jose-aguilar.com\/blog\/crear-un-tema-wordpress-desde-cero-construyendo-la-base-de-nuestra-plantilla\/","title":{"rendered":"Crear un tema WordPress desde cero – Construyendo la base de nuestra plantilla"},"content":{"rendered":"

Si has llegado hasta aqu\u00ed y te has leido los cap\u00edtulos anteriores ya sabr\u00e1s como es m\u00e1s o menos la estructura de archivos de WordPress que vamos a emplear en nuestra plantilla. En este cap\u00edtulo nos vamos a centrar en los archivos principales y m\u00e1s importantes a la hora de crear la plantilla. Antes deberemos saber como va a ser la estructura de nuestro tema.<\/p>\n

Para el tema que estamos creando desde cero vamos a querer tener una estructura de cabecera, columna izquierda, contenido, columna derecha y pie de p\u00e1gina.<\/p>\n

\"structure-mytheme\"<\/a> Los archivos que vamos a empezar a rellenar son los siguientes: header.php<\/strong>, footer.php<\/strong>, functions.php<\/strong> y style.css<\/strong>.<\/p>\n

El header.php<\/strong> y footer.php<\/strong> ser\u00e1n los primeros archivos que deberemos estructurar.<\/p>\n

En el header.php <\/strong>tendremos la estructura inicial del documento HTML que engloba el DOCTYPE, etiqueta <html>, etiqueta <head> con sus metas necesarios, t\u00edtulo, estilos, etc, la apertura de la etiqueta <body> y el contenedor de la cabecera.<\/p>\n

<\/a>Source code<\/a><\/td><\/a> <\/a> <\/a> <\/td><\/tr><\/table><\/div>
<!DOCTYPE html><\/span>\n<html<\/span><\/a> xmlns=<\/span>"http:\/\/www.w3.org\/1999\/xhtml"<\/span> <?php language_attributes(<\/span>)<\/span>; ?><\/span>>\n<head<\/span><\/a> profile<\/span>=<\/span>"http:\/\/gmpg.org\/xfn\/11"<\/span>><\/span>\n<meta<\/span><\/a> charset<\/span>=<\/span>"utf-8"<\/span>><\/span>\n<meta<\/span><\/a> http-equiv<\/span>=<\/span>"X-UA-Compatible"<\/span> content<\/span>=<\/span>"IE=edge"<\/span>><\/span>\n<meta<\/span><\/a> name<\/span>=<\/span>"viewport"<\/span> content<\/span>=<\/span>"width=device-width, initial-scale=1"<\/span>><\/span>\n<title<\/span><\/a>><\/span>\n<?php<\/span>\nglobal $page, $paged;<\/span>\n \nwp_title(<\/span> '|'<\/span>, true, 'right'<\/span> )<\/span>;<\/span>\n \n\/\/<\/span> Add the blog name<\/span>.<\/span>\nbloginfo(<\/span> 'name'<\/span> )<\/span>;<\/span>\n \n\/\/<\/span> Add the blog description for<\/span> the home\/<\/span>front page.<\/span>\n$site_description =<\/span> get_bloginfo(<\/span> 'description'<\/span>, 'display'<\/span> )<\/span>;<\/span>\nif (<\/span> $site_description && (<\/span> is_home(<\/span>)<\/span> || is_front_page(<\/span>)<\/span> )<\/span> )<\/span><\/span>\n        echo " | $site_description"<\/span>;<\/span>\n \n\/\/<\/span> Add a page number if necessary:<\/span>\nif (<\/span> $paged ><\/span>= 2 || $page >= 2 )\n        echo ' | ' . sprintf( __( 'Page %s', 'mytheme' ), max( $paged, $page ) );\n \n?>\n<\/<\/span>title<\/span><\/a>><\/span>\n<?php wp_head(<\/span>)<\/span>; ?><\/span>\n<link<\/span><\/a> rel<\/span>=<\/span>"stylesheet"<\/span> type<\/span>=<\/span>"text\/css"<\/span> href<\/span>=<\/span>"<?php bloginfo('stylesheet_url'); ?><\/span><\/span>" media="screen" \/>\n<link<\/span><\/a> rel<\/span>=<\/span>"alternate"<\/span> type<\/span>=<\/span>"application\/rss+xml"<\/span> title<\/span>=<\/span>"RSS 2.0"<\/span> href<\/span>=<\/span>"<?php bloginfo('rss2_url'); ?><\/span><\/span>" \/>\n<link<\/span><\/a> rel<\/span>=<\/span>"pingback"<\/span> href<\/span>=<\/span>"<?php bloginfo('pingback_url'); ?><\/span><\/span>" \/>\n<\/<\/span>head<\/span><\/a>><\/span>\n<body<\/span><\/a>><\/span>\n    <div<\/span><\/a> id<\/span>=<\/span>"page"<\/span> class<\/span>=<\/span>"container"<\/span>><\/span>\n        <div<\/span><\/a> class<\/span>=<\/span>"row"<\/span>><\/span>\n            <div<\/span><\/a> id<\/span>=<\/span>"header"<\/span>><\/span>\n                <h1<\/span><\/a> class<\/span>=<\/span>"site-title col-sm-9"<\/span>><a<\/span><\/a> href<\/span>=<\/span>"<?php echo esc_url( home_url( '\/' ) ); ?><\/span><\/span>" rel="home"><?php bloginfo(<\/span> 'name'<\/span> )<\/span>; ?><\/<\/span>a<\/span><\/a>><\/<\/span>h1<\/span><\/a>><\/span>\n            <\/<\/span>div<\/span><\/a>><\/span>\n        <\/<\/span>div<\/span><\/a>><\/span>\n        <div<\/span><\/a> class<\/span>=<\/span>"row"<\/span>><\/span><\/pre><\/div><\/div>\n
F\u00edjate que estamos usando una funci\u00f3n wp_head()<\/a> que se tiene que poner antes de la etiqueta <\/head> y no es m\u00e1s que un hook o posici\u00f3n donde se a\u00f1aden acciones. En nuestro caso, lo utilizaremos para a\u00f1adir los estilos y scripts del jQuery Bxslider, del Superfish menu y del framework bootstrap.<\/p>\n
Partiremos editando tambi\u00e9n el archivo index.php<\/strong> a\u00f1adiendo el siguiente contenido:<\/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    <h3<\/span><\/a>><\/span>Sidebar left<\/<\/span>h3<\/span><\/a>><\/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        <div<\/span><\/a> class<\/span>=<\/span>"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<\/<\/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    <h3<\/span><\/a>><\/span>Sidebar right<\/<\/span>h3<\/span><\/a>><\/span>\n<\/<\/span>div<\/span><\/a>><\/span>\n<?php get_footer(<\/span>)<\/span>; ?><\/span><\/pre><\/div><\/div>\n
F\u00edjate bien en el archivo index.php <\/strong>y observar\u00e1s que se est\u00e1 llamando a la funci\u00f3n get_header()<\/a> que lo que hace es incluir la cabecera de la p\u00e1gina (header.php<\/strong>), y a la funci\u00f3n get_footer()<\/a> al final del documento que lo que hace es incluir el pie de p\u00e1gina (footer.php<\/strong>).<\/p>\n
En el footer.php<\/strong> tendremos la estructura final del documento HTML que engloba los tags que componen nuestro footer y los tags de cierre abiertos en el header.php<\/strong>.<\/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>   \n        Footer\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
En este caso f\u00edjate en la funci\u00f3n wp_footer()<\/a> que estamos llamando en este archivo que no es m\u00e1s que un hook o posici\u00f3n para a\u00f1adir c\u00f3digo en el pie de p\u00e1gina.<\/p>\n
El archivo functions.php<\/strong> es como una biblioteca personal de funciones, es una manera f\u00e1cil de ampliar, cambiar o alterar el comportamiento por defecto de WordPress.<\/strong> Se comporta exactamente igual que un plugin, a\u00f1adiendo caracter\u00edsticas y funcionalidad a una web, y se puede utilizar tanto para definir nuevas funciones PHP como para modificar las que ya incorpora el sistema. Inicialmente, estamos hablando de este archivo en este momento porque vamos a a\u00f1adir nuestros estilos y scripts personalizados para nuestra plantilla.<\/p>\n
Todas las funcionalidades extra a WordPress las podr\u00edas a\u00f1adir directamente en el archivo functions.php<\/strong> y va a funcionar igual pero por organizaci\u00f3n o costumbre yo suelo dividir los archivos para poder llevar un mejor mantenimiento de la Web. No es lo mismo revisar un archivo con miles de lineas que otro con 10 lineas. Se trata de la frase que siempre tengo en mente a la hora de programar. Divide y vencer\u00e1s!<\/strong><\/em><\/p>\n
En el archivo functions.php<\/strong> incluiremos un archivo de la siguente forma:<\/p>\n
<\/a>Source code<\/a><\/td><\/a> <\/a> <\/a> <\/td><\/tr><\/table><\/div>
<?php<\/span>\ninclude<\/span>(<\/span>TEMPLATEPATH .<\/span> '\/includes\/scripts.php'<\/span>)<\/span>;<\/span>\n?><\/span><\/pre><\/div><\/div>\n
Este archivo contiene lo siguiente:<\/p>\n
<\/a>Source code<\/a><\/td><\/a> <\/a> <\/a> <\/td><\/tr><\/table><\/div>
<?php<\/span>\nfunction<\/span> mytheme_scripts(<\/span>)<\/span> {<\/span>\n    wp_enqueue_style(<\/span> 'style-bxslider'<\/span>,<\/span> get_template_directory_uri(<\/span>)<\/span>.<\/span>'\/css\/jquery.bxslider.css'<\/span> )<\/span>;<\/span>\n    wp_enqueue_style(<\/span> 'style-bootstrap'<\/span>,<\/span> get_template_directory_uri(<\/span>)<\/span>.<\/span>'\/css\/bootstrap.css'<\/span> )<\/span>;<\/span>\n    wp_enqueue_style(<\/span> 'style-superfish'<\/span>,<\/span> get_template_directory_uri(<\/span>)<\/span>.<\/span>'\/css\/superfish.css'<\/span> )<\/span>;<\/span>\n    wp_enqueue_script(<\/span> 'script-bxslider'<\/span>,<\/span> get_template_directory_uri(<\/span>)<\/span> .<\/span> '\/js\/jquery.bxslider.js'<\/span>,<\/span> array<\/span><\/a>(<\/span>)<\/span>,<\/span> '1.0.0'<\/span>,<\/span> true<\/span> )<\/span>;<\/span>\n    wp_enqueue_script(<\/span> 'script-superfish'<\/span>,<\/span> get_template_directory_uri(<\/span>)<\/span> .<\/span> '\/js\/superfish.js'<\/span>,<\/span> array<\/span><\/a>(<\/span>)<\/span>,<\/span> '1.0.0'<\/span>,<\/span> true<\/span> )<\/span>;<\/span>\n    wp_enqueue_script(<\/span> 'scripts'<\/span>,<\/span> get_template_directory_uri(<\/span>)<\/span> .<\/span> '\/js\/scripts.js'<\/span>,<\/span> array<\/span><\/a>(<\/span>)<\/span>,<\/span> '1.0.0'<\/span>,<\/span> true<\/span> )<\/span>;<\/span>\n}<\/span>\n \nadd_action(<\/span> 'wp_enqueue_scripts'<\/span>,<\/span> 'mytheme_scripts'<\/span> )<\/span>;<\/span>\n?><\/span><\/pre><\/div><\/div>\n
En WordPress podemos a\u00f1adir hojas de estilo adicionales con wp_enqueue_style()<\/a> y a\u00f1adir scripts adicionales con wp_enqueue_script()<\/a>.<\/p>\n
El archivo style.css<\/strong> de WordPress es m\u00e1s importante de lo que parece ya que adem\u00e1s de contener los estilos principales de nuestra tema va a contener informaci\u00f3n identificativa del tema.<\/p>\n
<\/a>Source code<\/a><\/td><\/a> <\/a> <\/a> <\/td><\/tr><\/table><\/div>
\/*\nTheme Name: Mythme\nTheme URI: https:\/\/www.jose-aguilar.com\/\nAuthor: Jose Aguilar\nAuthor URI: https:\/\/www.jose-aguilar.com\/\nDescription: Boopstrap Jose Aguilar Theme\nVersion: 1.1\nTags: light, gray, white, one-column, two-columns, right-sidebar, flexible-width, custom-background, custom-header, custom-menu, editor-style, featured-images, flexible-header, full-width-template, microformats, post-formats, rtl-language-support, sticky-post, theme-options, translation-ready\nText Domain: jose-aguilar\n \nThis theme, like WordPress, is licensed under the GPL.\nUse it to make something cool, have fun, and share what you've learned with others.\n*\/<\/span>\n \nbody {<\/span>\n \n}<\/span>\n \n#header<\/span> {<\/span>\n    background-color<\/span>:<\/span> #dadada<\/span>;<\/span>\n    min-height<\/span>:<\/span> 100px<\/span>;<\/span>\n    margin-bottom<\/span>:<\/span> 10px<\/span>;<\/span>\n    text-align<\/span>:<\/span> center<\/span>;<\/span>\n}<\/span>\n \n#header<\/span> h3 {<\/span>\n    float<\/span>:<\/span> left<\/span>;<\/span>\n    text-align<\/span>:<\/span> center<\/span>;<\/span>\n    width<\/span>:<\/span> 100<\/span>%<\/span>;<\/span>\n}<\/span>\n \n#sidebar_left<\/span>,<\/span> #sidebar_right<\/span> {<\/span>\n    background-color<\/span>:<\/span> #dadada<\/span>;<\/span>\n    min-height<\/span>:<\/span> 400px<\/span>;<\/span>\n    text-align<\/span>:<\/span> center<\/span>;<\/span>\n}<\/span>\n \n#sidebar_left<\/span> {<\/span>\n    border-right<\/span>:<\/span> 5px<\/span> solid<\/span> #eee<\/span>;<\/span>\n}<\/span>\n \n#sidebar_right<\/span> {<\/span>\n    border-left<\/span>:<\/span> 5px<\/span> solid<\/span> #eee<\/span>;<\/span>\n}<\/span>\n \n#content<\/span> {<\/span>\n    background-color<\/span>:<\/span> #dadada<\/span>;<\/span>\n    min-height<\/span>:<\/span> 400px<\/span>;<\/span>\n    text-align<\/span>:<\/span> center<\/span>;<\/span>\n}<\/span>\n \n#footer<\/span> {<\/span>\n    background-color<\/span>:<\/span> #dadada<\/span>;<\/span>\n    min-height<\/span>:<\/span> 80px<\/span>;<\/span>\n    margin-top<\/span>:<\/span> 10px<\/span>;<\/span>\n    text-align<\/span>:<\/span> center<\/span>;<\/span>\n}<\/span><\/pre><\/div><\/div>\n
Este c\u00f3digo CSS contiene la base o estructura de nuestro tema \u00abmytheme\u00bb. Si te fijas en la parte superior del c\u00f3digo hay unos comentarios identificativos. Estos comentarios identifican al tema y esa informaci\u00f3n aparecer\u00e1 en la administraci\u00f3n de temas de WordPress.<\/p>\n
\"mythme-in-themes\"<\/a><\/p>\n
Para que aparezca nuestra p\u00e1gina con nuestro nuevo tema tan solo tenemos que activarlo en Apariencia – Temas<\/em>.<\/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":"
Si has llegado hasta aqu\u00ed y te has leido los cap\u00edtulos anteriores ya sabr\u00e1s como es m\u00e1s o menos la estructura de archivos de WordPress que vamos a emplear en nuestra plantilla. En este cap\u00edtulo nos vamos a centrar en los archivos principales y m\u00e1s importantes a la hora de crear la plantilla. Antes deberemos […]<\/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-6512","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 - Construyendo la base de nuestra plantilla - 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 - Construyendo la base de nuestra plantilla - Jose Aguilar Blog\" \/>\n<meta property=\"og:description\" content=\"Si has llegado hasta aqu\u00ed y te has leido los cap\u00edtulos anteriores ya sabr\u00e1s como es m\u00e1s o menos la estructura de archivos de WordPress que vamos a emplear en nuestra plantilla. En este cap\u00edtulo nos vamos a centrar en los archivos principales y m\u00e1s importantes a la hora de crear la plantilla. Antes deberemos […]\" \/>\n<meta property=\"og:url\" content=\"https:\/\/www.jose-aguilar.com\/blog\/crear-un-tema-wordpress-desde-cero-construyendo-la-base-de-nuestra-plantilla\/\" \/>\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-19T17:55:45+00:00\" \/>\n<meta property=\"article:modified_time\" content=\"2015-01-03T10:06:24+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=\"7 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-construyendo-la-base-de-nuestra-plantilla\/\",\"url\":\"https:\/\/www.jose-aguilar.com\/blog\/crear-un-tema-wordpress-desde-cero-construyendo-la-base-de-nuestra-plantilla\/\",\"name\":\"Crear un tema Wordpress desde cero - Construyendo la base de nuestra plantilla - 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-construyendo-la-base-de-nuestra-plantilla\/#primaryimage\"},\"image\":{\"@id\":\"https:\/\/www.jose-aguilar.com\/blog\/crear-un-tema-wordpress-desde-cero-construyendo-la-base-de-nuestra-plantilla\/#primaryimage\"},\"thumbnailUrl\":\"https:\/\/www.jose-aguilar.com\/blog\/wp-content\/uploads\/2014\/09\/logo-wordpress-saliendo.png\",\"datePublished\":\"2014-12-19T17:55:45+00:00\",\"dateModified\":\"2015-01-03T10:06:24+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-construyendo-la-base-de-nuestra-plantilla\/#breadcrumb\"},\"inLanguage\":\"es\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\/\/www.jose-aguilar.com\/blog\/crear-un-tema-wordpress-desde-cero-construyendo-la-base-de-nuestra-plantilla\/\"]}]},{\"@type\":\"ImageObject\",\"inLanguage\":\"es\",\"@id\":\"https:\/\/www.jose-aguilar.com\/blog\/crear-un-tema-wordpress-desde-cero-construyendo-la-base-de-nuestra-plantilla\/#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-construyendo-la-base-de-nuestra-plantilla\/#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 – Construyendo la base de nuestra plantilla\"}]},{\"@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\":\"Consultor estrat\u00e9gico y tecnol\u00f3gico\",\"sameAs\":[\"https:\/\/www.jose-aguilar.com\"],\"url\":\"https:\/\/www.jose-aguilar.com\/blog\/author\/josea902\/\"}]}<\/script>\n<!-- \/ Yoast SEO plugin. -->","yoast_head_json":{"title":"Crear un tema Wordpress desde cero - Construyendo la base de nuestra plantilla - 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 - Construyendo la base de nuestra plantilla - Jose Aguilar Blog","og_description":"Si has llegado hasta aqu\u00ed y te has leido los cap\u00edtulos anteriores ya sabr\u00e1s como es m\u00e1s o menos la estructura de archivos de WordPress que vamos a emplear en nuestra plantilla. En este cap\u00edtulo nos vamos a centrar en los archivos principales y m\u00e1s importantes a la hora de crear la plantilla. Antes deberemos […]","og_url":"https:\/\/www.jose-aguilar.com\/blog\/crear-un-tema-wordpress-desde-cero-construyendo-la-base-de-nuestra-plantilla\/","og_site_name":"Jose Aguilar Blog","article_publisher":"https:\/\/www.facebook.com\/joseaguilarblog","article_published_time":"2014-12-19T17:55:45+00:00","article_modified_time":"2015-01-03T10:06:24+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":"7 minutos"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"WebPage","@id":"https:\/\/www.jose-aguilar.com\/blog\/crear-un-tema-wordpress-desde-cero-construyendo-la-base-de-nuestra-plantilla\/","url":"https:\/\/www.jose-aguilar.com\/blog\/crear-un-tema-wordpress-desde-cero-construyendo-la-base-de-nuestra-plantilla\/","name":"Crear un tema Wordpress desde cero - Construyendo la base de nuestra plantilla - 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-construyendo-la-base-de-nuestra-plantilla\/#primaryimage"},"image":{"@id":"https:\/\/www.jose-aguilar.com\/blog\/crear-un-tema-wordpress-desde-cero-construyendo-la-base-de-nuestra-plantilla\/#primaryimage"},"thumbnailUrl":"https:\/\/www.jose-aguilar.com\/blog\/wp-content\/uploads\/2014\/09\/logo-wordpress-saliendo.png","datePublished":"2014-12-19T17:55:45+00:00","dateModified":"2015-01-03T10:06:24+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-construyendo-la-base-de-nuestra-plantilla\/#breadcrumb"},"inLanguage":"es","potentialAction":[{"@type":"ReadAction","target":["https:\/\/www.jose-aguilar.com\/blog\/crear-un-tema-wordpress-desde-cero-construyendo-la-base-de-nuestra-plantilla\/"]}]},{"@type":"ImageObject","inLanguage":"es","@id":"https:\/\/www.jose-aguilar.com\/blog\/crear-un-tema-wordpress-desde-cero-construyendo-la-base-de-nuestra-plantilla\/#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-construyendo-la-base-de-nuestra-plantilla\/#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 – Construyendo la base de nuestra plantilla"}]},{"@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":"Consultor estrat\u00e9gico y tecnol\u00f3gico","sameAs":["https:\/\/www.jose-aguilar.com"],"url":"https:\/\/www.jose-aguilar.com\/blog\/author\/josea902\/"}]}},"_links":{"self":[{"href":"https:\/\/www.jose-aguilar.com\/blog\/wp-json\/wp\/v2\/posts\/6512","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=6512"}],"version-history":[{"count":0,"href":"https:\/\/www.jose-aguilar.com\/blog\/wp-json\/wp\/v2\/posts\/6512\/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=6512"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.jose-aguilar.com\/blog\/wp-json\/wp\/v2\/categories?post=6512"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.jose-aguilar.com\/blog\/wp-json\/wp\/v2\/tags?post=6512"}],"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>