{"id":6220,"date":"2017-02-20T13:30:22","date_gmt":"2017-02-20T12:30:22","guid":{"rendered":"http:\/\/www.espai.es\/blog\/?p=6220"},"modified":"2017-02-20T13:30:22","modified_gmt":"2017-02-20T12:30:22","slug":"como-crear-un-tema-wordpress-desde-cero-3","status":"publish","type":"post","link":"https:\/\/www.espai.es\/blog\/2017\/02\/como-crear-un-tema-wordpress-desde-cero-3\/","title":{"rendered":"C\u00f3mo crear un tema de WordPress desde cero (sin saber PHP) &#8211; 3"},"content":{"rendered":"<p>Hola a todos y saludos desde el \u00e1rea Web de la <a href=\"http:\/\/www.espai.es\/\" target=\"_blank\">Escola Espai<\/a>. En el art\u00edculo de hoy terminaremos de ver\u00a0como crear un tema de <a href=\"https:\/\/wordpress.org\/\" target=\"_blank\">WordPress<\/a> desde cero sin saber PHP. Si no hab\u00e9is le\u00eddo los dos art\u00edculos anteriores, pod\u00e9is encontrar el primero aqu\u00ed: <a href=\"http:\/\/www.espai.es\/blog\/2016\/11\/como-crear-un-tema-wordpress-desde-cero-1\/\" target=\"_blank\">como crear un tema de WordPress desde cero (sin saber PHP)<\/a>.<\/p>\n<h2>Como hacer un men\u00fa responsive en WordPress<\/h2>\n<p>Nuestra p\u00e1gina de inicio est\u00e1 pr\u00e1cticamente\u00a0acabada, pero para crear un tema en condiciones nos falta algo muy importante; y es que el men\u00fa sea\u00a0adaptable para que funcione correctamente en dispositivos m\u00f3viles.<\/p>\n<p>Lo primero que vamos a hacer es a\u00f1adir, mediante\u00a0Font Awesome, un icono para el men\u00fa. Para ello <strong>modificaremos un poco<\/strong> el archivo <strong>header.php<\/strong> de nuestro tema. Vamos a <strong>a\u00f1adir una \u00fanica l\u00ednea<\/strong>. Para ello buscamos el div de la clase <strong>logo<\/strong> y al final de dicho div, justo despu\u00e9s del elemento &lt;a&gt;, a\u00f1adimos <a href=\"http:\/\/fontawesome.io\/icon\/bars\/\" target=\"_blank\">un elemento &lt;i&gt; de Font Awesome con el t\u00edpico icono del men\u00fa con las tres barras<\/a>.<\/p>\n<p>[php]<br \/>\n &lt;!&#8211; logo &#8211;&gt;<br \/>\n &lt;div class=&quot;logo&quot;&gt;<br \/>\n  &lt;a href=&quot;&lt;?php echo home_url(); ?&gt;&quot;&gt;<br \/>\n   &lt;img src=&quot;&lt;?php echo get_template_directory_uri(); ?&gt;\/img\/logo.svg&quot; alt=&quot;Logo&quot; class=&quot;logo-img&quot;&gt;<br \/>\n  &lt;\/a&gt;<br \/>\n  &lt;i id=&quot;menu-bars&quot; class=&quot;fa fa-bars fa-3x&quot; aria-hidden=&quot;true&quot;&gt;&lt;\/i&gt;<br \/>\n &lt;\/div&gt;<br \/>\n &lt;!&#8211; \/logo &#8211;&gt;<br \/>\n[\/php]<\/p>\n<p>Ya tenemos nuestro icono del men\u00fa, pero ahora debemos de introducir el c\u00f3digo CSS para que no sea visible en la versi\u00f3n escritorio de nuestra web, y las <a href=\"https:\/\/developer.mozilla.org\/es\/docs\/CSS\/Media_queries\" target=\"_blank\">media queries<\/a> necesarias para que aparezca al cambiar a una resoluci\u00f3n de dispositivo m\u00f3vil. Para ello vamos a buscar la secci\u00f3n <strong>RESPONSIVE<\/strong> en el archivo <strong>styles.css<\/strong>\u00a0de nuestro tema, borramos las <strong>media queries<\/strong> vac\u00edas que hay, y\u00a0a\u00f1adiremos\u00a0el siguiente c\u00f3digo. Si no encuentras dicha secci\u00f3n, puedes a\u00f1adir el c\u00f3digo al final del archivo.<\/p>\n<p>[css]<br \/>\n\/*&#8212;&#8212;&#8212;&#8212;&#8212;&#8212;&#8212;&#8212;&#8212;&#8212;&#8212;&#8212;*\\<br \/>\nRESPONSIVE<br \/>\n\\*&#8212;&#8212;&#8212;&#8212;&#8212;&#8212;&#8212;&#8212;&#8212;&#8212;&#8212;&#8212;*\/<\/p>\n<p>#menu-bars {<br \/>\n display: none;<br \/>\n float: right;<br \/>\n}<\/p>\n<p>@media only screen and (max-width:768px) {<br \/>\n header .logo {<br \/>\n  overflow: hidden;<br \/>\n  float: none;<br \/>\n }<br \/>\n header .logo a {<br \/>\n  float: left;<br \/>\n }<br \/>\n #menu-bars {<br \/>\n  display: block;<br \/>\n }<br \/>\n header .nav {<br \/>\n  display: none;<br \/>\n  float: none;<br \/>\n }<br \/>\n .nav&gt;ul&gt;li {<br \/>\n  display: block;<br \/>\n  position: static;<br \/>\n }<br \/>\n .nav&gt;ul&gt;li&gt;ul {<br \/>\n  padding-left: 20px;<br \/>\n  display: block;<br \/>\n  background: transparent;<br \/>\n  position: static;<br \/>\n }<br \/>\n .nav&gt;ul&gt;li&gt;ul&gt;li {<br \/>\n  display: block;<br \/>\n }<br \/>\n #services li {<br \/>\n  width: 50%;<br \/>\n }<br \/>\n}<br \/>\n[\/css]<\/p>\n<p>Con esto ya hemos logrado que el icono aparezca y desaparezca seg\u00fan estemos en la versi\u00f3n m\u00f3vil o escritorio de la web. Pero si pulsamos el bot\u00f3n del men\u00fa no har\u00e1 nada todav\u00eda. Para lograr que funcione,\u00a0vamos a modificar el archivo <strong>js\/scripts.js<\/strong> de la carpeta de nuestro tema, a\u00f1adiendo un poco de c\u00f3digo JavaScript, concretamente un poco de c\u00f3digo <a href=\"https:\/\/jquery.com\/\" target=\"_blank\">jQuery<\/a>.<\/p>\n<p>[javascript]<br \/>\n(function ($, root, undefined) {<\/p>\n<p> $(function () {<br \/>\n  &#8216;use strict&#8217;;<br \/>\n   $(&quot;#menu-bars&quot;).click( function() {<br \/>\n     $(&quot;nav.nav&quot;).fadeToggle();<br \/>\n   });<\/p>\n<p>   $(window).resize(function () {<br \/>\n     $(&quot;nav.nav&quot;).css(&#8216;display&#8217;, \u00bb);<br \/>\n   });<br \/>\n });<\/p>\n<p>})(jQuery, this);<br \/>\n[\/javascript]<\/p>\n<p>Una vez a\u00f1adido el c\u00f3digo en cuesti\u00f3n, podremos hacer click sobre el icono del men\u00fa en la versi\u00f3n m\u00f3vil para que el men\u00fa aparezca. Esto lo logra jQuery a\u00f1adiendo un estilo en l\u00ednea al elemento en cuesti\u00f3n cuando llamamos al\u00a0m\u00e9todo <strong>fadeToggle()<\/strong>. Del mismo modo, si volvemos a pulsar el icono, el men\u00fa desaparecer\u00e1 pero se quedar\u00e1 un estilo en l\u00ednea. Es por ello que tambi\u00e9n hemos a\u00f1adido un poco de c\u00f3digo para que al cambiar el tama\u00f1o del navegador\u00a0se borre este estilo en l\u00ednea.<\/p>\n<p>Ya tenemos listo el aspecto de la p\u00e1gina principal, ahora para terminar nuestro sencillo tema de WordPress deber\u00edamos de mejorar un poco el aspecto del resto de p\u00e1ginas.<\/p>\n<h2>Como modificar el resto de p\u00e1ginas<\/h2>\n<p>Lo primero que vamos a hacer es modificar un poco la plantilla por defecto de las p\u00e1ginas. Para ello iremos a la carpeta de nuestro tema y abriremos el archivo <strong>page.php<\/strong>. Lo \u00fanico que tenemos que\u00a0hacer es englobar el <strong>main<\/strong> y el <strong>sidebar<\/strong> dentro de un elemento <strong>div<\/strong> al que le pondremos un atributo\u00a0<strong>id\u00a0<\/strong>con valor <strong>\u00abcontent\u00bb<\/strong>. Para ello abriremos nuestra\u00a0etiqueta justo debajo de\u00a0<strong>&lt;?php get_header(); ?&gt;<\/strong> y la cerraremos justo antes de\u00a0<strong>&lt;?php get_footer(); ?&gt;<\/strong>.<\/p>\n<p>[php]<br \/>\n&lt;?php get_header(); ?&gt;<br \/>\n&lt;div id=&quot;content&quot;&gt; &lt;!&#8211; abrimos nuestro elemento div &#8211;&gt;<\/p>\n<p> &lt;main role=&quot;main&quot;&gt;<\/p>\n<p> &#8230;<\/p>\n<p> &lt;\/main&gt;<\/p>\n<p>&lt;?php get_sidebar(); ?&gt;<\/p>\n<p>&lt;\/div&gt; &lt;!&#8211; cerramos nuestro elemento div &#8211;&gt;<br \/>\n&lt;?php get_footer(); ?&gt;<br \/>\n[\/php]<\/p>\n<p>Tan solo hemos modificado la plantilla por defecto de las p\u00e1ginas (<strong>page.php<\/strong>), tendremos que hacer lo mismo (a\u00f1adir ese elemento <strong>div<\/strong>) en otras plantillas que nos interese, como por ejemplo <strong>category.php<\/strong> (la plantilla para\u00a0las categor\u00edas), <strong>single.php<\/strong> (la plantilla\u00a0para las entradas), <strong>archive.php<\/strong> (la plantilla para la\u00a0recopilaci\u00f3n de entradas), search.php (la plantilla para las\u00a0b\u00fasquedas), <strong>404.php<\/strong> (la plantilla para cuando no se encuentra una p\u00e1gina), y cualquier otra que puedas considerar necesario (cualquiera que tenga el <strong>main<\/strong> y el <strong>sidebar<\/strong>).<\/p>\n<p>Finalmente necesitamos a\u00f1adir un poco de c\u00f3digo CSS al archivo <strong>styles.css<\/strong> de nuestro tema para que nuestras p\u00e1ginas\u00a0se muestren mejor.<\/p>\n<p>[css]<br \/>\n#content {<br \/>\n max-width: 960px;<br \/>\n overflow: auto;<br \/>\n margin: 10px auto;<br \/>\n}<br \/>\n#content a {<br \/>\n color: royalblue;<br \/>\n}<br \/>\n#content main {<br \/>\n width: 70%;<br \/>\n float: left;<br \/>\n}<\/p>\n<p>#content .sidebar {<br \/>\n float: left;<br \/>\n width: 30%;<br \/>\n padding-left: 20px;<br \/>\n}<\/p>\n<p>.sidebar ul {<br \/>\n list-style: none;<br \/>\n}<\/p>\n<p>@media only screen and (min-width:481px) and (max-width:768px) {<br \/>\n #content main {<br \/>\n width: 60%;<br \/>\n }<br \/>\n #content .sidebar {<br \/>\n width: 40%;<br \/>\n }<br \/>\n}<\/p>\n<p>@media only screen and (max-width:480px) {<br \/>\n #content main {<br \/>\n width: 100%;<br \/>\n float: none;<br \/>\n }<br \/>\n #content .sidebar {<br \/>\n max-width: 300px;<br \/>\n width: 100%;<br \/>\n margin: 0 auto;<br \/>\n float: none;<br \/>\n }<br \/>\n}<br \/>\n[\/css]<\/p>\n<p>Como pod\u00e9is ver, este c\u00f3digo CSS tan solo le dar\u00e1 un aspecto m\u00ednimamente aceptable, obviamente si lo quer\u00e9is m\u00e1s bonito tendr\u00e9is que trabajar un poco m\u00e1s el CSS.<\/p>\n<div id=\"attachment_6286\" style=\"width: 748px\" class=\"wp-caption aligncenter\"><img loading=\"lazy\" decoding=\"async\" aria-describedby=\"caption-attachment-6286\" class=\"wp-image-6286 size-full\" src=\"http:\/\/www.espai.es\/blog\/wp-content\/uploads\/2017\/02\/espai-theme-post.png\" alt=\"Crear un tema sin saber PHP no ha sido tan dif\u00edcil, \u00bfverdad?\" width=\"738\" height=\"1038\" srcset=\"https:\/\/www.espai.es\/blog\/wp-content\/uploads\/2017\/02\/espai-theme-post.png 738w, https:\/\/www.espai.es\/blog\/wp-content\/uploads\/2017\/02\/espai-theme-post-213x300.png 213w, https:\/\/www.espai.es\/blog\/wp-content\/uploads\/2017\/02\/espai-theme-post-728x1024.png 728w\" sizes=\"auto, (max-width: 738px) 100vw, 738px\" \/><p id=\"caption-attachment-6286\" class=\"wp-caption-text\">Aspecto a una entrada de nuestro tema<\/p><\/div>\n<h2>Dejar un \u00fanico campo de b\u00fasqueda<\/h2>\n<p>Si os pasa como a m\u00ed, puede que os salgan dos campos de b\u00fasqueda en el sidebar. Uno es por culpa de un widget que tengo en dicha sidebar, por lo que la soluci\u00f3n es tan sencilla como eliminar dicho widget de la sidebar desde el propio WordPress. El otro campo, es culpa del generador de temas que hemos usado. Si queremos podemos eliminarlo abriendo el archivo <strong>sidebar.php<\/strong> y eliminando el siguiente c\u00f3digo:<\/p>\n<p>[php]<br \/>\n&lt;?php get_template_part(&#8216;searchform&#8217;); ?&gt;<br \/>\n[\/php]<\/p>\n<p>Personalmente os recomiendo la segunda opci\u00f3n, ya que vais a tener m\u00e1s libertad para elegir donde quer\u00e9is colocar el campo de b\u00fasqueda.<\/p>\n<h2>\u00a1 Ya sabemos crear un tema !<\/h2>\n<p>Y bueno, nada m\u00e1s. Con esto doy por concluida esta serie de art\u00edculos sobre como crear un tema en WordPress sin saber PHP. Espero que os hayan sido de inter\u00e9s. Si os ha sabido a poco, no os preocup\u00e9is; en pr\u00f3ximos art\u00edculos aprenderemos m\u00e1s cosas sobre como modificar temas de WordPress.<\/p>\n","protected":false},"excerpt":{"rendered":"<p>Hola a todos y saludos desde el \u00e1rea Web de la Escola Espai. En el art\u00edculo de hoy terminaremos de ver\u00a0como crear un tema de WordPress desde cero sin saber PHP. Si no hab\u00e9is le\u00eddo los dos art\u00edculos anteriores, pod\u00e9is encontrar el primero aqu\u00ed: como&#8230;<\/p>\n","protected":false},"author":23,"featured_media":6289,"comment_status":"open","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"_monsterinsights_skip_tracking":false,"_monsterinsights_sitenote_active":false,"_monsterinsights_sitenote_note":"","_monsterinsights_sitenote_category":0,"jetpack_post_was_ever_published":false,"_jetpack_newsletter_access":"","_jetpack_dont_email_post_to_subs":false,"_jetpack_newsletter_tier_id":0,"_jetpack_memberships_contains_paywalled_content":false,"_ef_editorial_meta_date_first-draft-date":"","_ef_editorial_meta_paragraph_assignment":"","_ef_editorial_meta_checkbox_needs-photo":"","_ef_editorial_meta_number_word-count":"","_jetpack_memberships_contains_paid_content":false,"footnotes":""},"categories":[7,5],"tags":[540,544,323],"class_list":["post-6220","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-diseno-web","category-programacion","tag-crear-tema","tag-desde-cero","tag-wordpress"],"yoast_head":"<!-- This site is optimized with the Yoast SEO plugin v27.1.1 - https:\/\/yoast.com\/product\/yoast-seo-wordpress\/ -->\n<title>C\u00f3mo crear un tema de WordPress desde cero (sin saber PHP) - 3 - Blog Escola Espai<\/title>\n<meta name=\"description\" content=\"En el siguiente art\u00edculo terminaremos de ver como crear un tema de WordPress de forma f\u00e1cil, desde cero y sin saber PHP; dando los \u00faltimos retoques.\" \/>\n<meta name=\"robots\" content=\"index, follow, max-snippet:-1, max-image-preview:large, max-video-preview:-1\" \/>\n<link rel=\"canonical\" href=\"https:\/\/www.espai.es\/blog\/2017\/02\/como-crear-un-tema-wordpress-desde-cero-3\/\" \/>\n<meta property=\"og:locale\" content=\"es_ES\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"C\u00f3mo crear un tema de WordPress desde cero (sin saber PHP) - 3 - Blog Escola Espai\" \/>\n<meta property=\"og:description\" content=\"En el siguiente art\u00edculo terminaremos de ver como crear un tema de WordPress de forma f\u00e1cil, desde cero y sin saber PHP; dando los \u00faltimos retoques.\" \/>\n<meta property=\"og:url\" content=\"https:\/\/www.espai.es\/blog\/2017\/02\/como-crear-un-tema-wordpress-desde-cero-3\/\" \/>\n<meta property=\"og:site_name\" content=\"Blog Escola Espai\" \/>\n<meta property=\"article:published_time\" content=\"2017-02-20T12:30:22+00:00\" \/>\n<meta property=\"og:image\" content=\"https:\/\/www.espai.es\/blog\/wp-content\/uploads\/2017\/02\/featured.jpg\" \/>\n\t<meta property=\"og:image:width\" content=\"360\" \/>\n\t<meta property=\"og:image:height\" content=\"240\" \/>\n\t<meta property=\"og:image:type\" content=\"image\/jpeg\" \/>\n<meta name=\"author\" content=\"Abel Camarena\" \/>\n<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\n<meta name=\"twitter:label1\" content=\"Escrito por\" \/>\n\t<meta name=\"twitter:data1\" content=\"Abel Camarena\" \/>\n\t<meta name=\"twitter:label2\" content=\"Tiempo de lectura\" \/>\n\t<meta name=\"twitter:data2\" content=\"6 minutos\" \/>\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\/\/schema.org\",\"@graph\":[{\"@type\":\"Article\",\"@id\":\"https:\/\/www.espai.es\/blog\/2017\/02\/como-crear-un-tema-wordpress-desde-cero-3\/#article\",\"isPartOf\":{\"@id\":\"https:\/\/www.espai.es\/blog\/2017\/02\/como-crear-un-tema-wordpress-desde-cero-3\/\"},\"author\":{\"name\":\"Abel Camarena\",\"@id\":\"https:\/\/www.espai.es\/blog\/#\/schema\/person\/b2d40404b9d987e3586e186c021ef897\"},\"headline\":\"C\u00f3mo crear un tema de WordPress desde cero (sin saber PHP) &#8211; 3\",\"datePublished\":\"2017-02-20T12:30:22+00:00\",\"mainEntityOfPage\":{\"@id\":\"https:\/\/www.espai.es\/blog\/2017\/02\/como-crear-un-tema-wordpress-desde-cero-3\/\"},\"wordCount\":1239,\"commentCount\":0,\"image\":{\"@id\":\"https:\/\/www.espai.es\/blog\/2017\/02\/como-crear-un-tema-wordpress-desde-cero-3\/#primaryimage\"},\"thumbnailUrl\":\"https:\/\/www.espai.es\/blog\/wp-content\/uploads\/2017\/02\/featured.jpg\",\"keywords\":[\"crear tema\",\"desde cero\",\"wordpress\"],\"articleSection\":[\"Dise\u00f1o Web\",\"Programaci\u00f3n\"],\"inLanguage\":\"es\",\"potentialAction\":[{\"@type\":\"CommentAction\",\"name\":\"Comment\",\"target\":[\"https:\/\/www.espai.es\/blog\/2017\/02\/como-crear-un-tema-wordpress-desde-cero-3\/#respond\"]}]},{\"@type\":\"WebPage\",\"@id\":\"https:\/\/www.espai.es\/blog\/2017\/02\/como-crear-un-tema-wordpress-desde-cero-3\/\",\"url\":\"https:\/\/www.espai.es\/blog\/2017\/02\/como-crear-un-tema-wordpress-desde-cero-3\/\",\"name\":\"C\u00f3mo crear un tema de WordPress desde cero (sin saber PHP) - 3 - Blog Escola Espai\",\"isPartOf\":{\"@id\":\"https:\/\/www.espai.es\/blog\/#website\"},\"primaryImageOfPage\":{\"@id\":\"https:\/\/www.espai.es\/blog\/2017\/02\/como-crear-un-tema-wordpress-desde-cero-3\/#primaryimage\"},\"image\":{\"@id\":\"https:\/\/www.espai.es\/blog\/2017\/02\/como-crear-un-tema-wordpress-desde-cero-3\/#primaryimage\"},\"thumbnailUrl\":\"https:\/\/www.espai.es\/blog\/wp-content\/uploads\/2017\/02\/featured.jpg\",\"datePublished\":\"2017-02-20T12:30:22+00:00\",\"author\":{\"@id\":\"https:\/\/www.espai.es\/blog\/#\/schema\/person\/b2d40404b9d987e3586e186c021ef897\"},\"description\":\"En el siguiente art\u00edculo terminaremos de ver como crear un tema de WordPress de forma f\u00e1cil, desde cero y sin saber PHP; dando los \u00faltimos retoques.\",\"breadcrumb\":{\"@id\":\"https:\/\/www.espai.es\/blog\/2017\/02\/como-crear-un-tema-wordpress-desde-cero-3\/#breadcrumb\"},\"inLanguage\":\"es\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\/\/www.espai.es\/blog\/2017\/02\/como-crear-un-tema-wordpress-desde-cero-3\/\"]}]},{\"@type\":\"ImageObject\",\"inLanguage\":\"es\",\"@id\":\"https:\/\/www.espai.es\/blog\/2017\/02\/como-crear-un-tema-wordpress-desde-cero-3\/#primaryimage\",\"url\":\"https:\/\/www.espai.es\/blog\/wp-content\/uploads\/2017\/02\/featured.jpg\",\"contentUrl\":\"https:\/\/www.espai.es\/blog\/wp-content\/uploads\/2017\/02\/featured.jpg\",\"width\":360,\"height\":240},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\/\/www.espai.es\/blog\/2017\/02\/como-crear-un-tema-wordpress-desde-cero-3\/#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Portada\",\"item\":\"https:\/\/www.espai.es\/blog\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"C\u00f3mo crear un tema de WordPress desde cero (sin saber PHP) &#8211; 3\"}]},{\"@type\":\"WebSite\",\"@id\":\"https:\/\/www.espai.es\/blog\/#website\",\"url\":\"https:\/\/www.espai.es\/blog\/\",\"name\":\"Blog Escola Espai\",\"description\":\"\",\"potentialAction\":[{\"@type\":\"SearchAction\",\"target\":{\"@type\":\"EntryPoint\",\"urlTemplate\":\"https:\/\/www.espai.es\/blog\/?s={search_term_string}\"},\"query-input\":{\"@type\":\"PropertyValueSpecification\",\"valueRequired\":true,\"valueName\":\"search_term_string\"}}],\"inLanguage\":\"es\"},{\"@type\":\"Person\",\"@id\":\"https:\/\/www.espai.es\/blog\/#\/schema\/person\/b2d40404b9d987e3586e186c021ef897\",\"name\":\"Abel Camarena\",\"image\":{\"@type\":\"ImageObject\",\"inLanguage\":\"es\",\"@id\":\"https:\/\/www.espai.es\/blog\/#\/schema\/person\/image\/\",\"url\":\"https:\/\/secure.gravatar.com\/avatar\/035501b0f14e120b1a49121758e2056b8d589fc43b9d3c3ad3670a197a90dddf?s=96&d=mm&r=g\",\"contentUrl\":\"https:\/\/secure.gravatar.com\/avatar\/035501b0f14e120b1a49121758e2056b8d589fc43b9d3c3ad3670a197a90dddf?s=96&d=mm&r=g\",\"caption\":\"Abel Camarena\"},\"sameAs\":[\"http:\/\/www.espai.es\"],\"url\":\"https:\/\/www.espai.es\/blog\/author\/abel\/\"}]}<\/script>\n<!-- \/ Yoast SEO plugin. -->","yoast_head_json":{"title":"C\u00f3mo crear un tema de WordPress desde cero (sin saber PHP) - 3 - Blog Escola Espai","description":"En el siguiente art\u00edculo terminaremos de ver como crear un tema de WordPress de forma f\u00e1cil, desde cero y sin saber PHP; dando los \u00faltimos retoques.","robots":{"index":"index","follow":"follow","max-snippet":"max-snippet:-1","max-image-preview":"max-image-preview:large","max-video-preview":"max-video-preview:-1"},"canonical":"https:\/\/www.espai.es\/blog\/2017\/02\/como-crear-un-tema-wordpress-desde-cero-3\/","og_locale":"es_ES","og_type":"article","og_title":"C\u00f3mo crear un tema de WordPress desde cero (sin saber PHP) - 3 - Blog Escola Espai","og_description":"En el siguiente art\u00edculo terminaremos de ver como crear un tema de WordPress de forma f\u00e1cil, desde cero y sin saber PHP; dando los \u00faltimos retoques.","og_url":"https:\/\/www.espai.es\/blog\/2017\/02\/como-crear-un-tema-wordpress-desde-cero-3\/","og_site_name":"Blog Escola Espai","article_published_time":"2017-02-20T12:30:22+00:00","og_image":[{"width":360,"height":240,"url":"https:\/\/www.espai.es\/blog\/wp-content\/uploads\/2017\/02\/featured.jpg","type":"image\/jpeg"}],"author":"Abel Camarena","twitter_card":"summary_large_image","twitter_misc":{"Escrito por":"Abel Camarena","Tiempo de lectura":"6 minutos"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"Article","@id":"https:\/\/www.espai.es\/blog\/2017\/02\/como-crear-un-tema-wordpress-desde-cero-3\/#article","isPartOf":{"@id":"https:\/\/www.espai.es\/blog\/2017\/02\/como-crear-un-tema-wordpress-desde-cero-3\/"},"author":{"name":"Abel Camarena","@id":"https:\/\/www.espai.es\/blog\/#\/schema\/person\/b2d40404b9d987e3586e186c021ef897"},"headline":"C\u00f3mo crear un tema de WordPress desde cero (sin saber PHP) &#8211; 3","datePublished":"2017-02-20T12:30:22+00:00","mainEntityOfPage":{"@id":"https:\/\/www.espai.es\/blog\/2017\/02\/como-crear-un-tema-wordpress-desde-cero-3\/"},"wordCount":1239,"commentCount":0,"image":{"@id":"https:\/\/www.espai.es\/blog\/2017\/02\/como-crear-un-tema-wordpress-desde-cero-3\/#primaryimage"},"thumbnailUrl":"https:\/\/www.espai.es\/blog\/wp-content\/uploads\/2017\/02\/featured.jpg","keywords":["crear tema","desde cero","wordpress"],"articleSection":["Dise\u00f1o Web","Programaci\u00f3n"],"inLanguage":"es","potentialAction":[{"@type":"CommentAction","name":"Comment","target":["https:\/\/www.espai.es\/blog\/2017\/02\/como-crear-un-tema-wordpress-desde-cero-3\/#respond"]}]},{"@type":"WebPage","@id":"https:\/\/www.espai.es\/blog\/2017\/02\/como-crear-un-tema-wordpress-desde-cero-3\/","url":"https:\/\/www.espai.es\/blog\/2017\/02\/como-crear-un-tema-wordpress-desde-cero-3\/","name":"C\u00f3mo crear un tema de WordPress desde cero (sin saber PHP) - 3 - Blog Escola Espai","isPartOf":{"@id":"https:\/\/www.espai.es\/blog\/#website"},"primaryImageOfPage":{"@id":"https:\/\/www.espai.es\/blog\/2017\/02\/como-crear-un-tema-wordpress-desde-cero-3\/#primaryimage"},"image":{"@id":"https:\/\/www.espai.es\/blog\/2017\/02\/como-crear-un-tema-wordpress-desde-cero-3\/#primaryimage"},"thumbnailUrl":"https:\/\/www.espai.es\/blog\/wp-content\/uploads\/2017\/02\/featured.jpg","datePublished":"2017-02-20T12:30:22+00:00","author":{"@id":"https:\/\/www.espai.es\/blog\/#\/schema\/person\/b2d40404b9d987e3586e186c021ef897"},"description":"En el siguiente art\u00edculo terminaremos de ver como crear un tema de WordPress de forma f\u00e1cil, desde cero y sin saber PHP; dando los \u00faltimos retoques.","breadcrumb":{"@id":"https:\/\/www.espai.es\/blog\/2017\/02\/como-crear-un-tema-wordpress-desde-cero-3\/#breadcrumb"},"inLanguage":"es","potentialAction":[{"@type":"ReadAction","target":["https:\/\/www.espai.es\/blog\/2017\/02\/como-crear-un-tema-wordpress-desde-cero-3\/"]}]},{"@type":"ImageObject","inLanguage":"es","@id":"https:\/\/www.espai.es\/blog\/2017\/02\/como-crear-un-tema-wordpress-desde-cero-3\/#primaryimage","url":"https:\/\/www.espai.es\/blog\/wp-content\/uploads\/2017\/02\/featured.jpg","contentUrl":"https:\/\/www.espai.es\/blog\/wp-content\/uploads\/2017\/02\/featured.jpg","width":360,"height":240},{"@type":"BreadcrumbList","@id":"https:\/\/www.espai.es\/blog\/2017\/02\/como-crear-un-tema-wordpress-desde-cero-3\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Portada","item":"https:\/\/www.espai.es\/blog\/"},{"@type":"ListItem","position":2,"name":"C\u00f3mo crear un tema de WordPress desde cero (sin saber PHP) &#8211; 3"}]},{"@type":"WebSite","@id":"https:\/\/www.espai.es\/blog\/#website","url":"https:\/\/www.espai.es\/blog\/","name":"Blog Escola Espai","description":"","potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https:\/\/www.espai.es\/blog\/?s={search_term_string}"},"query-input":{"@type":"PropertyValueSpecification","valueRequired":true,"valueName":"search_term_string"}}],"inLanguage":"es"},{"@type":"Person","@id":"https:\/\/www.espai.es\/blog\/#\/schema\/person\/b2d40404b9d987e3586e186c021ef897","name":"Abel Camarena","image":{"@type":"ImageObject","inLanguage":"es","@id":"https:\/\/www.espai.es\/blog\/#\/schema\/person\/image\/","url":"https:\/\/secure.gravatar.com\/avatar\/035501b0f14e120b1a49121758e2056b8d589fc43b9d3c3ad3670a197a90dddf?s=96&d=mm&r=g","contentUrl":"https:\/\/secure.gravatar.com\/avatar\/035501b0f14e120b1a49121758e2056b8d589fc43b9d3c3ad3670a197a90dddf?s=96&d=mm&r=g","caption":"Abel Camarena"},"sameAs":["http:\/\/www.espai.es"],"url":"https:\/\/www.espai.es\/blog\/author\/abel\/"}]}},"jetpack_featured_media_url":"https:\/\/www.espai.es\/blog\/wp-content\/uploads\/2017\/02\/featured.jpg","jetpack_sharing_enabled":true,"_links":{"self":[{"href":"https:\/\/www.espai.es\/blog\/wp-json\/wp\/v2\/posts\/6220","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/www.espai.es\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.espai.es\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.espai.es\/blog\/wp-json\/wp\/v2\/users\/23"}],"replies":[{"embeddable":true,"href":"https:\/\/www.espai.es\/blog\/wp-json\/wp\/v2\/comments?post=6220"}],"version-history":[{"count":39,"href":"https:\/\/www.espai.es\/blog\/wp-json\/wp\/v2\/posts\/6220\/revisions"}],"predecessor-version":[{"id":6296,"href":"https:\/\/www.espai.es\/blog\/wp-json\/wp\/v2\/posts\/6220\/revisions\/6296"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/www.espai.es\/blog\/wp-json\/wp\/v2\/media\/6289"}],"wp:attachment":[{"href":"https:\/\/www.espai.es\/blog\/wp-json\/wp\/v2\/media?parent=6220"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.espai.es\/blog\/wp-json\/wp\/v2\/categories?post=6220"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.espai.es\/blog\/wp-json\/wp\/v2\/tags?post=6220"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}