{"id":5914,"date":"2016-11-09T19:55:37","date_gmt":"2016-11-09T18:55:37","guid":{"rendered":"http:\/\/www.espai.es\/blog\/?p=5914"},"modified":"2020-12-14T17:36:10","modified_gmt":"2020-12-14T15:36:10","slug":"como-crear-un-tema-wordpress-desde-cero-1","status":"publish","type":"post","link":"https:\/\/www.espai.es\/blog\/2016\/11\/como-crear-un-tema-wordpress-desde-cero-1\/","title":{"rendered":"Como crear un tema de WordPress desde cero (sin saber PHP) &#8211; 1"},"content":{"rendered":"<p>Hola a todos y saludos desde el \u00e1rea Web de la <a href=\"http:\/\/www.espai.es\/\" target=\"_blank\" rel=\"noopener\">Escola Espai<\/a>. En el art\u00edculo de hoy, veremos los primeros pasos para crear un tema de <a href=\"https:\/\/wordpress.org\/\" target=\"_blank\" rel=\"noopener\">WordPress<\/a> desde cero sin saber PHP.<\/p>\n<h2>El doble filo de los temas de WordPress<\/h2>\n<p>Un problema habitual de alguien que sabe HTML5 y CSS3 cuando llega al universo WordPress es la frustraci\u00f3n que puede surgir al verse limitado por el tema que elijamos para el proyecto en el que estamos trabajando. \u00bfCuantas veces hemos pensado \u00a1con lo f\u00e1cil que ser\u00eda modificar esto si fuera un sencillo HTML5!?<\/p>\n<p>Hay temas de WordPress realmente fant\u00e1sticos, con un aspecto incre\u00edble y muy flexibles. Pero a veces podemos querer el m\u00e1ximo control sobre el aspecto visual de la web que estamos haciendo y modificar el CSS de un tema que desconocemos, por mucha documentaci\u00f3n que lleve, puede volverse extremadamente farragoso. Una posible soluci\u00f3n, es crear un tema \u00abpelao\u00bb de WordPress y personalizarlo desde \u00abcero\u00bb.<\/p>\n<p>Hay que tener cuidado, ya que aunque crear un\u00a0tema propio pueda ser\u00a0una experiencia bastante satisfactoria, va a llevarnos bastante m\u00e1s tiempo que usar un tema ya hecho. La \u00fanica ventaja real que nos va a ofrecer crear un tema es un mayor grado de control y una mayor comodidad a la hora de realizar ajustes en el aspecto. Por lo que debemos de valorar cuidadosamente hasta que punto un mayor tiempo de desarrollo inicial se\u00a0puede compensar con ese mayor grado de control.<\/p>\n<h2>Crear un tema partiendo de un tema inicial (starter theme)<\/h2>\n<p>En realidad ni vamos a empezar del cero del todo, ni vamos a hacerlo sin tocar nada de nada de c\u00f3digo PHP, pero la idea de estos art\u00edculos es intentar aproximarse lo m\u00e1ximo a lo que ser\u00eda crear un tema hecho a mano y sin conocimientos de PHP. Obviamente, sin saber PHP no vamos a poder crear un\u00a0tema t\u00edpico que luego vayamos a poder vender o compartir para que otros puedan usar en su WordPress, ya que vamos a crear\u00a0un tema ya de por si muy personalizado y sin muchas capacidades de modificaci\u00f3n por parte de usuarios normales.<\/p>\n<p>Vamos a partir de un <em>starter theme<\/em>, es decir de un tema \u00aben blanco\u00bb. Existen varios <em>starter themes<\/em> que nos pueden simplificar mucho el empezar un tema nuevo en WordPress, como por ejemplo; <a href=\"http:\/\/underscores.me\/\" target=\"_blank\" rel=\"noopener\">Underscores<\/a>, <a href=\"https:\/\/roots.io\/sage\/\" target=\"_blank\" rel=\"noopener\">Sage<\/a>, <a href=\"http:\/\/themble.com\/bones\/\" target=\"_blank\" rel=\"noopener\">Bones<\/a>\u00a0y \u00a0<a href=\"http:\/\/html5blank.com\/\" target=\"_blank\" rel=\"noopener\">HTML5 Blank<\/a>. Yo voy a usar este \u00faltimo;\u00a0<a href=\"http:\/\/html5blank.com\/\" target=\"_blank\" rel=\"noopener\">HTML5 Blank<\/a>, ya que es el m\u00e1s sencillo en mi opini\u00f3n\u00a0(y adem\u00e1s el que viene m\u00e1s \u00abpelao\u00bb). <strong>ACTUALIZACI\u00d3N de Diciembre de 2020: actualmente el tema que recomiendo es el\u00a0<a href=\"http:\/\/underscores.me\/\" target=\"_blank\" rel=\"noopener\">Underscores<\/a>.<\/strong><\/p>\n<p>Lo primero que tenemos que hacer es <a href=\"http:\/\/github.com\/toddmotto\/html5blank\/archive\/stable.zip\">descargar el tema<\/a> y\u00a0lo vamos a instalar en nuestro WordPress como si instal\u00e1semos cualquier otro tema, con la salvedad que <strong>no lo vamos a activar<\/strong>, ya que antes vamos a realizar unas pocas modificaciones est\u00e9ticas (<strong>estas modificaciones son opcionales<\/strong>, no ten\u00e9is porque hacerlas);<\/p>\n<ul>\n<li>Nuestro tema se ha instalado en <strong>wp-content\/themes\/html5blank-stable<\/strong>, vamos a renombrar esta \u00faltima carpeta por otro nombre que nos guste m\u00e1s, como por ejemplo <strong>espai<\/strong>. De forma que el tema estar\u00e1 ahora en\u00a0<strong>wp-content\/themes\/espai<\/strong><\/li>\n<li>Vamos a abrir el archivo <strong>style.css<\/strong> que hay en dicha carpeta y en el comentario inicial, vamos a cambiar <strong>Theme Name: HTML5 Blank<\/strong>, y vamos a poner\u00a0<strong>Theme Name:\u00a0Escola\u00a0Espai<\/strong> (si queremos podemos modificar el resto de informaci\u00f3n del tema, como el autor, la versi\u00f3n, etc.)<\/li>\n<li>Finalmente vamos a cambiar la imagen <strong>screenshot.png<\/strong> por otra del mismo tama\u00f1o con nuestro logo (m\u00e1s adelante cuando tengamos el tema acabado podemos volver a reemplazar esta imagen por una captura de como luce el tema).<\/li>\n<\/ul>\n<div id=\"attachment_5921\" style=\"width: 743px\" class=\"wp-caption aligncenter\"><img loading=\"lazy\" decoding=\"async\" aria-describedby=\"caption-attachment-5921\" class=\"wp-image-5921 size-full\" src=\"http:\/\/www.espai.es\/blog\/wp-content\/uploads\/2016\/11\/modif-stylecss.png\" alt=\"Para crear un tema lo primero es darle un nombre (Modificaciones en el archivo style.css)\" width=\"733\" height=\"273\" srcset=\"https:\/\/www.espai.es\/blog\/wp-content\/uploads\/2016\/11\/modif-stylecss.png 733w, https:\/\/www.espai.es\/blog\/wp-content\/uploads\/2016\/11\/modif-stylecss-300x112.png 300w\" sizes=\"auto, (max-width: 733px) 100vw, 733px\" \/><p id=\"caption-attachment-5921\" class=\"wp-caption-text\">Para crear un tema lo primero es darle un nombre (Modificaciones en el archivo style.css)<\/p><\/div>\n<p>Una vez hecho esto, procedemos a activar el tema. Por cierto, hay que tener en cuenta que internamente el tema realmente se\u00a0sigue llamando html5blank.<\/p>\n<p>Ahora mismo lo que tenemos es un tema \u00abpelao\u00bb que luce tal que as\u00ed:<\/p>\n<div id=\"attachment_5924\" style=\"width: 750px\" class=\"wp-caption aligncenter\"><img loading=\"lazy\" decoding=\"async\" aria-describedby=\"caption-attachment-5924\" class=\"size-full wp-image-5924\" src=\"http:\/\/www.espai.es\/blog\/wp-content\/uploads\/2016\/11\/aspecto-pelao.jpg\" alt=\"Nuestra web con el tema pelao\" width=\"740\" height=\"426\" srcset=\"https:\/\/www.espai.es\/blog\/wp-content\/uploads\/2016\/11\/aspecto-pelao.jpg 740w, https:\/\/www.espai.es\/blog\/wp-content\/uploads\/2016\/11\/aspecto-pelao-300x173.jpg 300w\" sizes=\"auto, (max-width: 740px) 100vw, 740px\" \/><p id=\"caption-attachment-5924\" class=\"wp-caption-text\">Nuestra web con el tema \u00abpelao\u00bb.<\/p><\/div>\n<p>No muy espectacular que digamos, pero la principal ventaja es que si miramos con detenimiento el archivo <strong>style.css<\/strong> veremos que pr\u00e1cticamente est\u00e1 vac\u00edo. Casi todo lo que tiene son selectores que no aplican ning\u00fan estilo, unas media queries que no hacen nada (y que por supuesto podemos borrar y crear las nuestras propias), etc&#8230;<\/p>\n<h2>Crear una nueva plantilla\u00a0para nuestras p\u00e1ginas<\/h2>\n<p>Un posible problema que podemos apreciar es que lo que ser\u00eda la barra lateral del blog (sidebar) sale al final de la p\u00e1gina. Obviamente, esto lo podemos arreglar por CSS\u00a0flotando los elementos y asignando unos anchos adecuados, pero puede que en nuestra home no queramos tener la barra lateral (sidebar).<\/p>\n<p>Para ello <strong>vamos a crear una plantilla para aquellas p\u00e1ginas que no queramos que tengan barra lateral<\/strong>. Afortunadamente para nosotros, el tema html5blank ya viene con una plantilla para nuestras plantillas.<\/p>\n<p>Para ello buscamos el archivo <strong>template-demo.php<\/strong> en la carpeta de nuestro tema, y creamos una copia para nuestra nueva plantilla. Al nuevo archivo le podemos poner de nombre\u00a0<strong>template-nosidebar.php<\/strong>,\u00a0por ejemplo. Abrimos el archivo, y al principio cambiamos su nombre cambiando <strong>\/* Template Name: Demo Page Template *\/<\/strong> por\u00a0<strong>\/* Template Name: No Sidebar\u00a0*\/<\/strong>.<\/p>\n<p>Por ahora solo le hemos cambiado el nombre, ahora vamos a quitar la barra lateral. Para ello <strong>al final del archivo<\/strong>, borramos la linea que pone\u00a0<strong>&lt;?php get_sidebar(); ?&gt;<\/strong>. Con esto lograremos eliminar la barra lateral.<\/p>\n<p>Ahora en nuestra p\u00e1gina de inicio (y en cualquier otra p\u00e1gina que queramos), podemos elegir esta plantilla para que no se muestre la barra lateral tal y como se muestra en la siguiente imagen.<\/p>\n<div id=\"attachment_5929\" style=\"width: 750px\" class=\"wp-caption aligncenter\"><img loading=\"lazy\" decoding=\"async\" aria-describedby=\"caption-attachment-5929\" class=\"size-full wp-image-5929\" src=\"http:\/\/www.espai.es\/blog\/wp-content\/uploads\/2016\/11\/plantilla-nosidebar.jpg\" alt=\"Seleccionamos la nueva plantilla para nuestra p\u00e1gina de inicio.\" width=\"740\" height=\"360\" srcset=\"https:\/\/www.espai.es\/blog\/wp-content\/uploads\/2016\/11\/plantilla-nosidebar.jpg 740w, https:\/\/www.espai.es\/blog\/wp-content\/uploads\/2016\/11\/plantilla-nosidebar-300x146.jpg 300w\" sizes=\"auto, (max-width: 740px) 100vw, 740px\" \/><p id=\"caption-attachment-5929\" class=\"wp-caption-text\">Seleccionamos la nueva plantilla para nuestra p\u00e1gina de inicio.<\/p><\/div>\n<h2>Modificar el footer<\/h2>\n<p>Otra cosa que probablemente queramos modificar es el footer. Como podemos ver, actualmente sale un texto de copyright con un texto que puede que no queramos. Para modificarlo, vamos a abrir el archivo <strong>footer.php<\/strong> y veremos que hay un elemento <strong>p<\/strong> de la clase <strong>copyright<\/strong>. Podemos borrar tranquilamente el contenido de dicho elemento y escribir nuestro propio copyright en HTML5 normal y corriente.<\/p>\n<p>[html]<br \/>\n&lt;p class=&quot;copyright&quot;&gt;<br \/>\n &amp;copy; Copyright &lt;a href=&quot;http:\/\/www.espai.es&quot;&gt;Escola Espai&lt;\/a&gt;.<br \/>\n&lt;\/p&gt;<br \/>\n[\/html]<\/p>\n<p>Por cierto, ya que estamos en este archivo, si somos usuarios de <a href=\"http:\/\/www.google.es\/intl\/es\/analytics\/\" target=\"_blank\" rel=\"noopener\">Google Analytics<\/a>, podemos modificar el script que hay al final del mismo para indicar nuestro c\u00f3digo de Analytics.<\/p>\n<p>Tal y como se puede observar, seg\u00fan la parte de la web que queramos modificar, tendremos que tocar un archivo PHP u otro. WordPress para construir el archivo HTML que enviar\u00e1 al navegador del usuario, combina el resultado de varios archivos PHP. De ese modo, tenemos que en el archivo <strong>footer.php<\/strong>, tal y como hemos visto, est\u00e1 el c\u00f3digo necesario para generar el footer, en el archivo <strong>header.php<\/strong> est\u00e1 el c\u00f3digo necesario para generar la cabecera, <strong>index.php<\/strong> contiene el c\u00f3digo para generar\u00a0un listado de entradas, <strong>single.php<\/strong>\u00a0el c\u00f3digo para mostrar una \u00fanica entrada, etc. Para m\u00e1s detalles de <a href=\"https:\/\/developer.wordpress.org\/themes\/basics\/template-hierarchy\/\" target=\"_blank\" rel=\"noopener\">la jerarquia de archivos que usan los temas de WordPress<\/a>, pode\u00eds consultar la documentaci\u00f3n oficial.<\/p>\n<p>Los archivos\u00a0PHP combinan c\u00f3digo HTML normal y c\u00f3digo PHP. As\u00ed que <strong>si entendemos un m\u00ednimo en funcionamiento de PHP podemos introducir c\u00f3digo HTML de forma normal<\/strong>. Obviamente, antes de tocar cualquier archivo conviene sacar copia por si rompemos algo poder volver a restaurarlo. El \u00abtruco\u00bb es que cualquier cosa entre <strong>&lt;?php<\/strong> y <strong>?&gt;\u00a0<\/strong>es c\u00f3digo PHP que no deber\u00edamos de tocar si no comprendemos. El resto es HTML normal y corriente (y por lo tanto, lo podemos modificar y tambi\u00e9n podemos a\u00f1adir o quitar c\u00f3digo HTML).<\/p>\n<h2>Modificar el\u00a0CSS<\/h2>\n<p>En esencia ya estar\u00edamos listos para empezar a meter c\u00f3digo CSS en el archivo style.css hasta lograr el aspecto deseado, que en realidad es el motivo por el cual quer\u00edamos crear un tema desde cero. En mi caso, lo primero que voy a hacer es borrar las propiedades\u00a0CSS de la clase wrapper, de forma que la p\u00e1gina ya no saldr\u00e1 centrada ocupando un m\u00e1ximo de 1280px. Para ello busco .wrapper en el archivo CSS y borro todos los estilos asignados.<\/p>\n<p>Despu\u00e9s, voy a modificar un poco el header y footer usando los selectores que ya vienen en el archivo <strong>style.css<\/strong> y a\u00f1adiendo seg\u00fan vaya necesitando. El resultado es el siguiente fragmento de c\u00f3digo CSS.<\/p>\n<p>[css]<br \/>\n\/*&#8212;&#8212;&#8212;&#8212;&#8212;&#8212;&#8212;&#8212;&#8212;&#8212;&#8212;&#8212;*\\<br \/>\n STRUCTURE<br \/>\n\\*&#8212;&#8212;&#8212;&#8212;&#8212;&#8212;&#8212;&#8212;&#8212;&#8212;&#8212;&#8212;*\/<\/p>\n<p>\/* wrapper *\/<br \/>\n.wrapper {<br \/>\n}<\/p>\n<p>\/* header *\/<br \/>\n.header {<br \/>\n padding: 10px;<br \/>\n color: white;<br \/>\n background: #123456;<br \/>\n}<br \/>\n\/* logo *\/<br \/>\n.logo {<br \/>\n float: left;<br \/>\n}<br \/>\n.logo-img {<\/p>\n<p>}<br \/>\n\/* nav *\/<br \/>\n.nav {<br \/>\n float: right;<br \/>\n}<br \/>\n.nav a {<br \/>\n color: gray;<br \/>\n padding: 10px;<br \/>\n display: inline-block;<br \/>\n}<br \/>\n.nav a:hover {<br \/>\n color: white;<br \/>\n}<br \/>\n.nav ul {<br \/>\n padding: 0;<br \/>\n list-style: none;<br \/>\n}<br \/>\n.nav ul&gt;li {<br \/>\n display: inline-block;<br \/>\n position: relative;<br \/>\n}<br \/>\n.nav ul&gt;li&gt;ul {<br \/>\n display: none;<br \/>\n background: black;<br \/>\n position: absolute;<br \/>\n left: 0;<br \/>\n top: 32px;<br \/>\n}<br \/>\n.nav ul&gt;li:hover&gt;ul {<br \/>\n display: block;<br \/>\n}<br \/>\n\/* sidebar *\/<br \/>\n.sidebar {<\/p>\n<p>}<br \/>\n\/* footer *\/<br \/>\n.footer {<br \/>\n color: white;<br \/>\n background: #123456;<br \/>\n padding: 10px;<br \/>\n}<br \/>\n.footer a {<br \/>\n color: gray;<br \/>\n}<br \/>\n[\/css]<\/p>\n<p>Y visualmente podemos ver lo siguiente;<\/p>\n<div id=\"attachment_5932\" style=\"width: 750px\" class=\"wp-caption aligncenter\"><img loading=\"lazy\" decoding=\"async\" aria-describedby=\"caption-attachment-5932\" class=\"size-full wp-image-5932\" src=\"http:\/\/www.espai.es\/blog\/wp-content\/uploads\/2016\/11\/frontpage01.png\" alt=\"Nuestra front page con un poco de c\u00f3digo CSS\" width=\"740\" height=\"534\" srcset=\"https:\/\/www.espai.es\/blog\/wp-content\/uploads\/2016\/11\/frontpage01.png 740w, https:\/\/www.espai.es\/blog\/wp-content\/uploads\/2016\/11\/frontpage01-300x216.png 300w\" sizes=\"auto, (max-width: 740px) 100vw, 740px\" \/><p id=\"caption-attachment-5932\" class=\"wp-caption-text\">Nuestra front page con un poco de c\u00f3digo CSS<\/p><\/div>\n<p>Puede que no resulte muy espectacular (no pretende serlo), pero es el embri\u00f3n de nuestro tema personalizado de WordPress (obviamente a\u00fan estamos lejos de haber terminado).<\/p>\n<p>En el pr\u00f3ximo art\u00edculo haremos algunas modificaciones m\u00e1s y comprender\u00e9is el motivo por el cual hemos eliminado\u00a0las propiedades CSS de la clase wrapper.<\/p>\n<p>Y bueno, por ahora, nada m\u00e1s. Espero que este art\u00edculo os haya sido de inter\u00e9s y os haya ayudado un poco a comprender c\u00f3mo funcionan los temas de WordPress y como crear un\u00a0tema. En <a href=\"http:\/\/www.espai.es\/blog\/2016\/12\/como-crear-un-tema-wordpress-desde-cero-2\/\">el pr\u00f3ximo art\u00edculo<\/a> intentar\u00e9 arrojar algo de luz a las dudas que seguro a\u00fan tendr\u00e9is.<\/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, veremos los primeros pasos para crear un tema de WordPress desde cero sin saber PHP. El doble filo de los temas de WordPress Un problema habitual de&#8230;<\/p>\n","protected":false},"author":23,"featured_media":5955,"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,323],"class_list":["post-5914","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-diseno-web","category-programacion","tag-crear-tema","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>Como crear un tema de WordPress desde cero (sin saber PHP) - 1 - Blog Escola Espai<\/title>\n<meta name=\"description\" content=\"En el siguiente art\u00edculo veremos como crear un tema de WordPress de forma f\u00e1cil, desde cero y sin saber PHP. Y despu\u00e9s como veremos como personalizarlo.\" \/>\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\/2016\/11\/como-crear-un-tema-wordpress-desde-cero-1\/\" \/>\n<meta property=\"og:locale\" content=\"es_ES\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"Como crear un tema de WordPress desde cero (sin saber PHP) - 1 - Blog Escola Espai\" \/>\n<meta property=\"og:description\" content=\"En el siguiente art\u00edculo veremos como crear un tema de WordPress de forma f\u00e1cil, desde cero y sin saber PHP. Y despu\u00e9s como veremos como personalizarlo.\" \/>\n<meta property=\"og:url\" content=\"https:\/\/www.espai.es\/blog\/2016\/11\/como-crear-un-tema-wordpress-desde-cero-1\/\" \/>\n<meta property=\"og:site_name\" content=\"Blog Escola Espai\" \/>\n<meta property=\"article:published_time\" content=\"2016-11-09T18:55:37+00:00\" \/>\n<meta property=\"article:modified_time\" content=\"2020-12-14T15:36:10+00:00\" \/>\n<meta property=\"og:image\" content=\"https:\/\/www.espai.es\/blog\/wp-content\/uploads\/2016\/11\/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=\"9 minutos\" \/>\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\/\/schema.org\",\"@graph\":[{\"@type\":\"Article\",\"@id\":\"https:\/\/www.espai.es\/blog\/2016\/11\/como-crear-un-tema-wordpress-desde-cero-1\/#article\",\"isPartOf\":{\"@id\":\"https:\/\/www.espai.es\/blog\/2016\/11\/como-crear-un-tema-wordpress-desde-cero-1\/\"},\"author\":{\"name\":\"Abel Camarena\",\"@id\":\"https:\/\/www.espai.es\/blog\/#\/schema\/person\/b2d40404b9d987e3586e186c021ef897\"},\"headline\":\"Como crear un tema de WordPress desde cero (sin saber PHP) &#8211; 1\",\"datePublished\":\"2016-11-09T18:55:37+00:00\",\"dateModified\":\"2020-12-14T15:36:10+00:00\",\"mainEntityOfPage\":{\"@id\":\"https:\/\/www.espai.es\/blog\/2016\/11\/como-crear-un-tema-wordpress-desde-cero-1\/\"},\"wordCount\":1717,\"commentCount\":4,\"image\":{\"@id\":\"https:\/\/www.espai.es\/blog\/2016\/11\/como-crear-un-tema-wordpress-desde-cero-1\/#primaryimage\"},\"thumbnailUrl\":\"https:\/\/www.espai.es\/blog\/wp-content\/uploads\/2016\/11\/featured.jpg\",\"keywords\":[\"crear tema\",\"wordpress\"],\"articleSection\":[\"Dise\u00f1o Web\",\"Programaci\u00f3n\"],\"inLanguage\":\"es\",\"potentialAction\":[{\"@type\":\"CommentAction\",\"name\":\"Comment\",\"target\":[\"https:\/\/www.espai.es\/blog\/2016\/11\/como-crear-un-tema-wordpress-desde-cero-1\/#respond\"]}]},{\"@type\":\"WebPage\",\"@id\":\"https:\/\/www.espai.es\/blog\/2016\/11\/como-crear-un-tema-wordpress-desde-cero-1\/\",\"url\":\"https:\/\/www.espai.es\/blog\/2016\/11\/como-crear-un-tema-wordpress-desde-cero-1\/\",\"name\":\"Como crear un tema de WordPress desde cero (sin saber PHP) - 1 - Blog Escola Espai\",\"isPartOf\":{\"@id\":\"https:\/\/www.espai.es\/blog\/#website\"},\"primaryImageOfPage\":{\"@id\":\"https:\/\/www.espai.es\/blog\/2016\/11\/como-crear-un-tema-wordpress-desde-cero-1\/#primaryimage\"},\"image\":{\"@id\":\"https:\/\/www.espai.es\/blog\/2016\/11\/como-crear-un-tema-wordpress-desde-cero-1\/#primaryimage\"},\"thumbnailUrl\":\"https:\/\/www.espai.es\/blog\/wp-content\/uploads\/2016\/11\/featured.jpg\",\"datePublished\":\"2016-11-09T18:55:37+00:00\",\"dateModified\":\"2020-12-14T15:36:10+00:00\",\"author\":{\"@id\":\"https:\/\/www.espai.es\/blog\/#\/schema\/person\/b2d40404b9d987e3586e186c021ef897\"},\"description\":\"En el siguiente art\u00edculo veremos como crear un tema de WordPress de forma f\u00e1cil, desde cero y sin saber PHP. Y despu\u00e9s como veremos como personalizarlo.\",\"breadcrumb\":{\"@id\":\"https:\/\/www.espai.es\/blog\/2016\/11\/como-crear-un-tema-wordpress-desde-cero-1\/#breadcrumb\"},\"inLanguage\":\"es\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\/\/www.espai.es\/blog\/2016\/11\/como-crear-un-tema-wordpress-desde-cero-1\/\"]}]},{\"@type\":\"ImageObject\",\"inLanguage\":\"es\",\"@id\":\"https:\/\/www.espai.es\/blog\/2016\/11\/como-crear-un-tema-wordpress-desde-cero-1\/#primaryimage\",\"url\":\"https:\/\/www.espai.es\/blog\/wp-content\/uploads\/2016\/11\/featured.jpg\",\"contentUrl\":\"https:\/\/www.espai.es\/blog\/wp-content\/uploads\/2016\/11\/featured.jpg\",\"width\":360,\"height\":240,\"caption\":\"Tema Personalizado WordPress\"},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\/\/www.espai.es\/blog\/2016\/11\/como-crear-un-tema-wordpress-desde-cero-1\/#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Portada\",\"item\":\"https:\/\/www.espai.es\/blog\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"Como crear un tema de WordPress desde cero (sin saber PHP) &#8211; 1\"}]},{\"@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":"Como crear un tema de WordPress desde cero (sin saber PHP) - 1 - Blog Escola Espai","description":"En el siguiente art\u00edculo veremos como crear un tema de WordPress de forma f\u00e1cil, desde cero y sin saber PHP. Y despu\u00e9s como veremos como personalizarlo.","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\/2016\/11\/como-crear-un-tema-wordpress-desde-cero-1\/","og_locale":"es_ES","og_type":"article","og_title":"Como crear un tema de WordPress desde cero (sin saber PHP) - 1 - Blog Escola Espai","og_description":"En el siguiente art\u00edculo veremos como crear un tema de WordPress de forma f\u00e1cil, desde cero y sin saber PHP. Y despu\u00e9s como veremos como personalizarlo.","og_url":"https:\/\/www.espai.es\/blog\/2016\/11\/como-crear-un-tema-wordpress-desde-cero-1\/","og_site_name":"Blog Escola Espai","article_published_time":"2016-11-09T18:55:37+00:00","article_modified_time":"2020-12-14T15:36:10+00:00","og_image":[{"width":360,"height":240,"url":"https:\/\/www.espai.es\/blog\/wp-content\/uploads\/2016\/11\/featured.jpg","type":"image\/jpeg"}],"author":"Abel Camarena","twitter_card":"summary_large_image","twitter_misc":{"Escrito por":"Abel Camarena","Tiempo de lectura":"9 minutos"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"Article","@id":"https:\/\/www.espai.es\/blog\/2016\/11\/como-crear-un-tema-wordpress-desde-cero-1\/#article","isPartOf":{"@id":"https:\/\/www.espai.es\/blog\/2016\/11\/como-crear-un-tema-wordpress-desde-cero-1\/"},"author":{"name":"Abel Camarena","@id":"https:\/\/www.espai.es\/blog\/#\/schema\/person\/b2d40404b9d987e3586e186c021ef897"},"headline":"Como crear un tema de WordPress desde cero (sin saber PHP) &#8211; 1","datePublished":"2016-11-09T18:55:37+00:00","dateModified":"2020-12-14T15:36:10+00:00","mainEntityOfPage":{"@id":"https:\/\/www.espai.es\/blog\/2016\/11\/como-crear-un-tema-wordpress-desde-cero-1\/"},"wordCount":1717,"commentCount":4,"image":{"@id":"https:\/\/www.espai.es\/blog\/2016\/11\/como-crear-un-tema-wordpress-desde-cero-1\/#primaryimage"},"thumbnailUrl":"https:\/\/www.espai.es\/blog\/wp-content\/uploads\/2016\/11\/featured.jpg","keywords":["crear tema","wordpress"],"articleSection":["Dise\u00f1o Web","Programaci\u00f3n"],"inLanguage":"es","potentialAction":[{"@type":"CommentAction","name":"Comment","target":["https:\/\/www.espai.es\/blog\/2016\/11\/como-crear-un-tema-wordpress-desde-cero-1\/#respond"]}]},{"@type":"WebPage","@id":"https:\/\/www.espai.es\/blog\/2016\/11\/como-crear-un-tema-wordpress-desde-cero-1\/","url":"https:\/\/www.espai.es\/blog\/2016\/11\/como-crear-un-tema-wordpress-desde-cero-1\/","name":"Como crear un tema de WordPress desde cero (sin saber PHP) - 1 - Blog Escola Espai","isPartOf":{"@id":"https:\/\/www.espai.es\/blog\/#website"},"primaryImageOfPage":{"@id":"https:\/\/www.espai.es\/blog\/2016\/11\/como-crear-un-tema-wordpress-desde-cero-1\/#primaryimage"},"image":{"@id":"https:\/\/www.espai.es\/blog\/2016\/11\/como-crear-un-tema-wordpress-desde-cero-1\/#primaryimage"},"thumbnailUrl":"https:\/\/www.espai.es\/blog\/wp-content\/uploads\/2016\/11\/featured.jpg","datePublished":"2016-11-09T18:55:37+00:00","dateModified":"2020-12-14T15:36:10+00:00","author":{"@id":"https:\/\/www.espai.es\/blog\/#\/schema\/person\/b2d40404b9d987e3586e186c021ef897"},"description":"En el siguiente art\u00edculo veremos como crear un tema de WordPress de forma f\u00e1cil, desde cero y sin saber PHP. Y despu\u00e9s como veremos como personalizarlo.","breadcrumb":{"@id":"https:\/\/www.espai.es\/blog\/2016\/11\/como-crear-un-tema-wordpress-desde-cero-1\/#breadcrumb"},"inLanguage":"es","potentialAction":[{"@type":"ReadAction","target":["https:\/\/www.espai.es\/blog\/2016\/11\/como-crear-un-tema-wordpress-desde-cero-1\/"]}]},{"@type":"ImageObject","inLanguage":"es","@id":"https:\/\/www.espai.es\/blog\/2016\/11\/como-crear-un-tema-wordpress-desde-cero-1\/#primaryimage","url":"https:\/\/www.espai.es\/blog\/wp-content\/uploads\/2016\/11\/featured.jpg","contentUrl":"https:\/\/www.espai.es\/blog\/wp-content\/uploads\/2016\/11\/featured.jpg","width":360,"height":240,"caption":"Tema Personalizado WordPress"},{"@type":"BreadcrumbList","@id":"https:\/\/www.espai.es\/blog\/2016\/11\/como-crear-un-tema-wordpress-desde-cero-1\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Portada","item":"https:\/\/www.espai.es\/blog\/"},{"@type":"ListItem","position":2,"name":"Como crear un tema de WordPress desde cero (sin saber PHP) &#8211; 1"}]},{"@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\/2016\/11\/featured.jpg","jetpack_sharing_enabled":true,"_links":{"self":[{"href":"https:\/\/www.espai.es\/blog\/wp-json\/wp\/v2\/posts\/5914","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=5914"}],"version-history":[{"count":30,"href":"https:\/\/www.espai.es\/blog\/wp-json\/wp\/v2\/posts\/5914\/revisions"}],"predecessor-version":[{"id":11034,"href":"https:\/\/www.espai.es\/blog\/wp-json\/wp\/v2\/posts\/5914\/revisions\/11034"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/www.espai.es\/blog\/wp-json\/wp\/v2\/media\/5955"}],"wp:attachment":[{"href":"https:\/\/www.espai.es\/blog\/wp-json\/wp\/v2\/media?parent=5914"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.espai.es\/blog\/wp-json\/wp\/v2\/categories?post=5914"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.espai.es\/blog\/wp-json\/wp\/v2\/tags?post=5914"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}