{"id":6051,"date":"2016-12-09T11:56:45","date_gmt":"2016-12-09T10:56:45","guid":{"rendered":"http:\/\/www.espai.es\/blog\/?p=6051"},"modified":"2017-02-27T16:15:40","modified_gmt":"2017-02-27T15:15:40","slug":"como-crear-un-tema-wordpress-desde-cero-2","status":"publish","type":"post","link":"https:\/\/www.espai.es\/blog\/2016\/12\/como-crear-un-tema-wordpress-desde-cero-2\/","title":{"rendered":"C\u00f3mo crear un tema de WordPress desde cero (sin saber PHP) &#8211; 2"},"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 continuaremos viendo\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 el art\u00edculo anterior, pod\u00e9is encontrarlo 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>C\u00f3mo insertar HTML en p\u00e1ginas de WordPress y no morir en el intento<\/h2>\n<p>Cuando editamos una entrada o p\u00e1gina en WordPress tenemos la posibilidad de editarla con el editor visual y\/o con el editor HTML. La mayor\u00eda de usuarios prefieren usar el editor visual, pero los inform\u00e1ticos preferimos la flexibilidad y potencia que nos ofrece poder introducir c\u00f3digo HTML. A la hora de crear nuestro tema sin saber PHP, nos va a resultar muy \u00fatil poder utilizar HTML en condiciones. El problema es que el editor HTML de WordPress es bastante\u00a0limitado, ya que tiende a modificar el c\u00f3digo HTML y es dif\u00edcil de diferenciar visualmente las diferentes partes de c\u00f3digo HTML.<\/p>\n<p>Para solventar (en parte) sus limitaciones, y poder crear un tema de forma adecuada, vamos a proceder a instalar los siguientes plugins de WordPress:<\/p>\n<ul>\n<li><a href=\"https:\/\/wordpress.org\/plugins\/preserved-html-editor-markup-plus\/\" target=\"_blank\">Preserved HTML Editor Markup Plus<\/a> &#8211;\u00a0el cual va a permitirnos poder editar el HTML de una p\u00e1gina o entrada sin que (en teor\u00eda) sufra alteraciones por parte de WordPress.<\/li>\n<li><a href=\"https:\/\/wordpress.org\/plugins\/html-editor-syntax-highlighter\/\" target=\"_blank\">HTML Editor Syntax Highlighter<\/a> &#8211; este plugin es opcional pero muy recomendable. Nos permitir\u00e1 ver mejor (con colorines) el c\u00f3digo HTML en el editor de WordPress.<\/li>\n<li><a href=\"https:\/\/es.wordpress.org\/plugins\/contact-form-7\/\" target=\"_blank\">Contact Form 7<\/a> &#8211; este plugin, que tambi\u00e9n es opcional, nos permitir\u00e1 colocar formularios de contacto en nuestras p\u00e1ginas usando <em><a href=\"https:\/\/codex.wordpress.org\/Shortcode\" target=\"_blank\">shortcodes<\/a> <\/em>de WordPress. No tiene nada que ver con poder insertar c\u00f3digo HTML en condiciones como los dos anteriores, pero ya que estamos instalando plugins aprovechamos y lo instalamos.<\/li>\n<\/ul>\n<p>Con todo esto ya vamos a poder editar en condiciones el c\u00f3digo HTML de nuestra p\u00e1gina principal, pero antes vamos a mejorar un poco la plantilla que preparamos en el anterior art\u00edculo.<\/p>\n<h2>Preparar una plantilla para la front page<\/h2>\n<p>Para la nueva plantilla vamos a partir de la anterior que hicimos (template-nosidebar.php). Esta vez el archivo se llamar\u00e1\u00a0<strong>template-front.php<\/strong>, y lo voy a quitar casi todo menos el main. Aqu\u00ed ten\u00e9is el c\u00f3digo PHP.<\/p>\n<p>[php]<br \/>\n&lt;?php \/* Template Name: Front Page *\/ get_header(); ?&gt;<br \/>\n&lt;main role=&quot;main&quot;&gt;<br \/>\n    &lt;?php if (have_posts()): while (have_posts()) : the_post(); ?&gt;<br \/>\n        &lt;?php the_content(); ?&gt;<br \/>\n        &lt;?php endwhile; ?&gt;<br \/>\n    &lt;?php else: ?&gt;<br \/>\n        &lt;article&gt;<br \/>\n        &lt;h2&gt;&lt;?php _e( &#8216;Sorry, nothing to display.&#8217;, &#8216;html5blank&#8217; ); ?&gt;&lt;\/h2&gt;<br \/>\n        &lt;\/article&gt;<br \/>\n    &lt;?php endif; ?&gt;<br \/>\n&lt;\/main&gt;<br \/>\n&lt;?php get_footer(); ?&gt;<br \/>\n[\/php]<\/p>\n<p>Esta plantilla es la que usaremos ahora en nuestra p\u00e1gina de inicio (y no la que hicimos en el anterior art\u00edculo sobre como crear un tema).<\/p>\n<h2>C\u00f3mo crear un tema con Font Awesome en WordPress<\/h2>\n<p>Antes de crear el contenido de nuestra p\u00e1gina de inicio, vamos a a\u00f1adir la famosa fuente <a href=\"http:\/\/fontawesome.io\/\" target=\"_blank\">Font Awesome<\/a> a nuestro tema. Para ello hemos de modificar el archivo<strong>\u00a0functions.php<\/strong>. Concretamente, hemos\u00a0de buscar\u00a0la funci\u00f3n\u00a0<strong>html5blank_styles()<\/strong>, que es la que se encarga de preparar las hojas de estilo CSS que va a cargar nuestra p\u00e1gina, y a\u00f1adiremos <strong>un par de l\u00edneas<\/strong> de c\u00f3digo PHP para indicarle que tiene que cargar los archivos de Font Awesome desde un <a href=\"https:\/\/es.wikipedia.org\/wiki\/Red_de_entrega_de_contenidos\" target=\"_blank\">CDN<\/a>.<\/p>\n<p>[php]<br \/>\n\/\/ Load HTML5 Blank styles<br \/>\nfunction html5blank_styles()<br \/>\n{<br \/>\n    wp_register_style(&#8216;normalize&#8217;,<br \/>\n        get_template_directory_uri() . &#8216;\/normalize.css&#8217;, array(), &#8216;1.0&#8217;, &#8216;all&#8217;);<br \/>\n    wp_enqueue_style(&#8216;normalize&#8217;); \/\/ Enqueue it!<\/p>\n<p>    wp_register_style(&#8216;fontawesome&#8217;,<br \/>\n        &#8216;https:\/\/maxcdn.bootstrapcdn.com\/font-awesome\/4.7.0\/css\/font-awesome.min.css&#8217;, array(), &#8216;1.0&#8217;, &#8216;all&#8217;);<br \/>\n    wp_enqueue_style(&#8216;fontawesome&#8217;); \/\/ Enqueue it!<\/p>\n<p>    wp_register_style(&#8216;html5blank&#8217;,<br \/>\n        get_template_directory_uri() . &#8216;\/style.css&#8217;, array(), &#8216;1.0&#8217;, &#8216;all&#8217;);<br \/>\n    wp_enqueue_style(&#8216;html5blank&#8217;); \/\/ Enqueue it!<br \/>\n}<br \/>\n[\/php]<\/p>\n<p>Con esta sencilla modificaci\u00f3n, ya podremos utilizar los iconos de FontAwesome en nuestro tema.<\/p>\n<p>Y ya estamos listos para modificar la\u00a0p\u00e1gina de inicio de nuestro tema.\u00a0Para ello vamos a editarla desde el backend de WordPress, buscamos la entrada, le damos a editar y finalmente pulsamos en la pesta\u00f1a de HTML.<\/p>\n<div id=\"attachment_6150\" style=\"width: 750px\" class=\"wp-caption aligncenter\"><img loading=\"lazy\" decoding=\"async\" aria-describedby=\"caption-attachment-6150\" class=\"size-full wp-image-6150\" src=\"http:\/\/www.espai.es\/blog\/wp-content\/uploads\/2016\/12\/editorHTML.png\" alt=\"Edito HTML de WordPress\" width=\"740\" height=\"256\" srcset=\"https:\/\/www.espai.es\/blog\/wp-content\/uploads\/2016\/12\/editorHTML.png 740w, https:\/\/www.espai.es\/blog\/wp-content\/uploads\/2016\/12\/editorHTML-300x104.png 300w\" sizes=\"auto, (max-width: 740px) 100vw, 740px\" \/><p id=\"caption-attachment-6150\" class=\"wp-caption-text\">Debemos de usar el editor HTML de WP!<\/p><\/div>\n<p>Despu\u00e9s, borramos todo el c\u00f3digo que hay y pegamos\u00a0algo como esto:<\/p>\n<p>[html]<br \/>\n&lt;section id=&quot;hero&quot;&gt;<br \/>\n &lt;div class=&quot;mini-wrapper&quot;&gt;<br \/>\n  &lt;h1&gt;Tema Espai&lt;\/h1&gt;<br \/>\n  &lt;p&gt;Lorem ipsum dolor sit amet, consectetur adipisicing elit&#8230;&lt;\/p&gt;<br \/>\n  &lt;ul&gt;<br \/>\n   &lt;li&gt;&lt;a href=&quot;#&quot;&gt;Item 1&lt;\/a&gt;&lt;\/li&gt;<br \/>\n   &lt;li&gt;&lt;a href=&quot;#&quot;&gt;Item 2&lt;\/a&gt;&lt;\/li&gt;<br \/>\n  &lt;\/ul&gt;<br \/>\n &lt;\/div&gt;<br \/>\n&lt;\/section&gt;<\/p>\n<p>&lt;section id=&quot;services&quot;&gt;<br \/>\n &lt;div class=&quot;mini-wrapper&quot;&gt;<br \/>\n &lt;h2&gt;Servicios&lt;\/h2&gt;<br \/>\n &lt;ul&gt;<br \/>\n  &lt;li&gt;<br \/>\n   &lt;i class=&quot;fa fa-car fa-4x&quot; aria-hidden=&quot;true&quot;&gt;&lt;\/i&gt;<br \/>\n   &lt;h3&gt;Servicio 1&lt;\/h3&gt;<br \/>\n   &lt;p&gt;Lorem ipsum dolor sit amet, consectetur adipisicing elit. Vitae, harum!&lt;\/p&gt;<br \/>\n  &lt;\/li&gt;<br \/>\n  &lt;li&gt;<br \/>\n   &lt;i class=&quot;fa fa-cloud fa-4x&quot; aria-hidden=&quot;true&quot;&gt;&lt;\/i&gt;<br \/>\n   &lt;h3&gt;Servicio 2&lt;\/h3&gt;<br \/>\n   &lt;p&gt;Incidunt, blanditiis impedit nam nesciunt doloremque a, nobis minus!&lt;\/p&gt;<br \/>\n  &lt;\/li&gt;<br \/>\n  &lt;li&gt;<br \/>\n   &lt;i class=&quot;fa fa-envelope fa-4x&quot; aria-hidden=&quot;true&quot;&gt;&lt;\/i&gt;<br \/>\n   &lt;h3&gt;Servicio 3&lt;\/h3&gt;<br \/>\n   &lt;p&gt;Cumque ex vel sint iusto quae officia iure ipsa similique vero dolorum.&lt;\/p&gt;<br \/>\n  &lt;\/li&gt;<br \/>\n  &lt;li&gt;<br \/>\n   &lt;i class=&quot;fa fa-users fa-4x&quot; aria-hidden=&quot;true&quot;&gt;&lt;\/i&gt;<br \/>\n   &lt;h3&gt;Servicio 4&lt;\/h3&gt;<br \/>\n   &lt;p&gt;Veniam esse, consectetur, omnis dolore voluptates fugiat aut minima.&lt;\/p&gt;<br \/>\n  &lt;\/li&gt;<br \/>\n &lt;\/ul&gt;<br \/>\n &lt;\/div&gt;<br \/>\n&lt;\/section&gt;<\/p>\n<p>&lt;section id=&quot;contact-us&quot;&gt;<br \/>\n &lt;div class=&quot;mini-wrapper&quot;&gt;<br \/>\n  &lt;h2&gt;Contacta con nosotros&lt;\/h2&gt;<br \/>\n  <p class=\"wpcf7-contact-form-not-found\"><strong>Error:<\/strong> Formulario de contacto no encontrado.<\/p><br \/>\n &lt;\/div&gt;<br \/>\n&lt;\/section&gt;<br \/>\n[\/html]<\/p>\n<p>Como pod\u00e9is ver, el c\u00f3digo HTML que acabamos de copiar tiene una serie de <strong>elementos &lt;i&gt;<\/strong> con clases de <strong>Font Awesome<\/strong>. Tamb\u00eden, \u00a0hay que tener en cuenta que al final de dicho c\u00f3digo hay un <em>shortcode<\/em>\u00a0(o c\u00f3digo abreviado) del plugin <strong>Contact Form 7<\/strong> para mostrar un formulario de contacto. <strong>Deberemos de asegurarnos de crear un formulario de contacto usando dicho plugin y reemplazar este <em>shortcode<\/em> por el de nuestro formulario.\u00a0<\/strong>Para ello debemos de ir a la nueva secci\u00f3n <strong>Contacto<\/strong> que a aparecido en nuestro WordPress tras haber instalado el plugin.<\/p>\n<p>Adem\u00e1s, obviamente tendremos que acordarnos de cambiar la plantilla de nuestra p\u00e1gina por la nueva que hemos creado en el paso anterior (es decir, cambiaremos la plantilla <strong>No Sidebar<\/strong> por la plantilla\u00a0<strong>Front Page<\/strong>.<\/p>\n<div id=\"attachment_6152\" style=\"width: 750px\" class=\"wp-caption aligncenter\"><img loading=\"lazy\" decoding=\"async\" aria-describedby=\"caption-attachment-6152\" class=\"size-full wp-image-6152\" src=\"http:\/\/www.espai.es\/blog\/wp-content\/uploads\/2016\/12\/plantilla-front.png\" alt=\"Cambiar la plantilla de la p\u00e1gina principal\" width=\"740\" height=\"171\" srcset=\"https:\/\/www.espai.es\/blog\/wp-content\/uploads\/2016\/12\/plantilla-front.png 740w, https:\/\/www.espai.es\/blog\/wp-content\/uploads\/2016\/12\/plantilla-front-300x69.png 300w\" sizes=\"auto, (max-width: 740px) 100vw, 740px\" \/><p id=\"caption-attachment-6152\" class=\"wp-caption-text\">Hemos de acordarnos de volver a cambiar la plantilla de la p\u00e1gina.<\/p><\/div>\n<p>Finalmente habr\u00e1 que a\u00f1adir el siguiente c\u00f3digo CSS a nuestro <strong>styles.css<\/strong> para darle un aspecto adecuado. Se lo a\u00f1adiremos justo debajo de la secci\u00f3n <strong><em>STRUCTURE<\/em><\/strong> que modificamos en el anterior art\u00edculo.<\/p>\n<p>[css]<br \/>\n\/*&#8212;&#8212;&#8212;&#8212;&#8212;&#8212;&#8212;&#8212;&#8212;&#8212;&#8212;&#8212;*\\<br \/>\n FRONT<br \/>\n\\*&#8212;&#8212;&#8212;&#8212;&#8212;&#8212;&#8212;&#8212;&#8212;&#8212;&#8212;&#8212;*\/<br \/>\n.mini-wrapper {<br \/>\n max-width: 1280px;<br \/>\n margin: 0 auto;<br \/>\n}<\/p>\n<p>#hero {<br \/>\n background: #222;<br \/>\n background-image: url(&quot;.\/img\/hero.jpg&quot;);<br \/>\n background-size: cover;<br \/>\n background-position: 50% 50%;<br \/>\n color: white;<br \/>\n padding: 20px 10px;<br \/>\n}<\/p>\n<p>#hero h1 {<br \/>\n font-size: 10vw;<br \/>\n font-variant: small-caps;<br \/>\n text-align: center;<br \/>\n margin: 0;<br \/>\n text-shadow: 2px 2px black;<br \/>\n}<\/p>\n<p>#hero p {<br \/>\n font-size: 20px;<br \/>\n text-align: center;<br \/>\n text-shadow: 1px 1px black;<br \/>\n}<\/p>\n<p>#hero ul {<br \/>\n padding: 0;<br \/>\n list-style: none;<br \/>\n text-align: center;<br \/>\n}<\/p>\n<p>#hero li {<br \/>\n display: inline-block;<br \/>\n font-size: 20px;<br \/>\n border: 2px solid white;<br \/>\n border-radius: 15px;<br \/>\n transition: all 250ms;<br \/>\n margin: 0 10px;<br \/>\n text-shadow: 1px 1px black;<br \/>\n box-shadow: 1px 1px black;<br \/>\n}<\/p>\n<p>#hero li:hover {<br \/>\n background: rgba(255,255,255,0.5);<br \/>\n}<\/p>\n<p>#hero li a {<br \/>\n display: inline-block;<br \/>\n color: inherit;<br \/>\n padding: 10px 30px;<br \/>\n}<\/p>\n<p>#services {<br \/>\n color: white;<br \/>\n background: #123456;<br \/>\n padding: 20px 10px;<br \/>\n font-size: 16px;<br \/>\n}<\/p>\n<p>#services ul {<br \/>\n padding: 0;<br \/>\n list-style: none;<br \/>\n overflow: auto<br \/>\n}<\/p>\n<p>#services li {<br \/>\n width: 25%;<br \/>\n float: left;<br \/>\n padding: 10px;<br \/>\n text-align: center;<br \/>\n}<\/p>\n<p>#services h2, #contact-us h2 {<br \/>\n font-size: 30px;<br \/>\n font-variant: small-caps;<br \/>\n text-align: center;<br \/>\n margin: 0;<br \/>\n}<\/p>\n<p>#contact-us {<br \/>\n color: white;<br \/>\n background: black;<br \/>\n padding: 20px 10px;<br \/>\n font-size: 14px;<br \/>\n}<\/p>\n<p>#contact-us form {<br \/>\n max-width: 500px;<br \/>\n margin: 0 auto;<br \/>\n font-weight: bold;<br \/>\n}<\/p>\n<p>#contact-us input, #contact-us textarea {<br \/>\n width: 100%;<br \/>\n padding: 5px;<br \/>\n}<\/p>\n<p>#contact-us input[type=&quot;submit&quot;] {<br \/>\n background: #123456;<br \/>\n color: inherit;<br \/>\n border: 2px solid white;<br \/>\n border-radius: 5px;<br \/>\n transition: all 250ms;<br \/>\n}<\/p>\n<p>#contact-us input[type=&quot;submit&quot;]:hover {<br \/>\n background: white;<br \/>\n color: black;<br \/>\n}<br \/>\n[\/css]<\/p>\n<p>Como pod\u00e9is ver, el c\u00f3digo CSS hace referencia a una imagen llamada hero.jpg que debe de ir dentro de la carpeta img de nuestro tema. Obviamente pod\u00e9is cambiar la ruta\u00a0si lo estim\u00e1is oportuno.<\/p>\n<p>Y este es el resultado final;<\/p>\n<div id=\"attachment_6147\" style=\"width: 750px\" class=\"wp-caption aligncenter\"><img loading=\"lazy\" decoding=\"async\" aria-describedby=\"caption-attachment-6147\" class=\"wp-image-6147 size-full\" src=\"http:\/\/www.espai.es\/blog\/wp-content\/uploads\/2016\/12\/front.jpg\" alt=\"P\u00e1gina principal de nuestro tutorial sobre como crear un tema de WP\" width=\"740\" height=\"1374\" srcset=\"https:\/\/www.espai.es\/blog\/wp-content\/uploads\/2016\/12\/front.jpg 740w, https:\/\/www.espai.es\/blog\/wp-content\/uploads\/2016\/12\/front-162x300.jpg 162w, https:\/\/www.espai.es\/blog\/wp-content\/uploads\/2016\/12\/front-551x1024.jpg 551w\" sizes=\"auto, (max-width: 740px) 100vw, 740px\" \/><p id=\"caption-attachment-6147\" class=\"wp-caption-text\">P\u00e1gina principal de nuestro tutorial sobre como crear un tema de WP<\/p><\/div>\n<p>Obviamente, esta forma de trabajar tiene sus ventajas e inconvenientes a la hora de crear un tema.<\/p>\n<p>Normalmente lo de\u00a0hacerlo todo con c\u00f3digo HTML tan solo necesitaremos hacerlo en la p\u00e1gina principal, el resto de p\u00e1ginas y entradas ser\u00e1n por lo general p\u00e1ginas convencionales de WordPress. Con el plugin que nos colorea el c\u00f3digo HTML es relativamente f\u00e1cil hacer cambios incluso por un usuario que no sepa HTML (solo ha de tocar el c\u00f3digo de color blanco), pero no nos enga\u00f1emos,\u00a0ser\u00e1 muy f\u00e1cil que este tipo de usuario rompa la p\u00e1gina principal si intenta hacer modificaciones.<\/p>\n<p>Las ventajas son que esta forma de trabajar es muy f\u00e1cil y c\u00f3moda para el programador, normalmente hacer algo similar en un tema de WordPress convencional lleva bastante m\u00e1s trabajo ya que implica hacerlo con PHP y a\u00f1adir todo el c\u00f3digo necesario para que el usuario de la plantilla pueda realizar modificaciones de forma c\u00f3moda sin necesidad de tener conocimientos t\u00e9cnicos.<\/p>\n<p>Y bueno, por ahora, nada m\u00e1s. Espero que este art\u00edculo os haya sido de inter\u00e9s. En <a href=\"http:\/\/www.espai.es\/blog\/2017\/02\/como-crear-un-tema-wordpress-desde-cero-3\/\">el pr\u00f3ximo \u00e1rticulo<\/a>\u00a0puliremos algunos aspectos que a\u00fan tenemos pendientes en\u00a0nuestro sencillo y artesano tema.<\/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 continuaremos viendo\u00a0como crear un tema de WordPress desde cero sin saber PHP. Si no hab\u00e9is le\u00eddo el art\u00edculo anterior, pod\u00e9is encontrarlo aqu\u00ed: como crear un tema de&#8230;<\/p>\n","protected":false},"author":23,"featured_media":6158,"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-6051","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) - 2 - Blog Escola Espai<\/title>\n<meta name=\"description\" content=\"En el siguiente art\u00edculo continuaremos viendo como crear un tema de WordPress de forma f\u00e1cil, desde cero y sin saber PHP; mejoraremos la p\u00e1gina de inicio.\" \/>\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\/12\/como-crear-un-tema-wordpress-desde-cero-2\/\" \/>\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) - 2 - Blog Escola Espai\" \/>\n<meta property=\"og:description\" content=\"En el siguiente art\u00edculo continuaremos viendo como crear un tema de WordPress de forma f\u00e1cil, desde cero y sin saber PHP; mejoraremos la p\u00e1gina de inicio.\" \/>\n<meta property=\"og:url\" content=\"https:\/\/www.espai.es\/blog\/2016\/12\/como-crear-un-tema-wordpress-desde-cero-2\/\" \/>\n<meta property=\"og:site_name\" content=\"Blog Escola Espai\" \/>\n<meta property=\"article:published_time\" content=\"2016-12-09T10:56:45+00:00\" \/>\n<meta property=\"article:modified_time\" content=\"2017-02-27T15:15:40+00:00\" \/>\n<meta property=\"og:image\" content=\"https:\/\/www.espai.es\/blog\/wp-content\/uploads\/2016\/12\/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\/12\/como-crear-un-tema-wordpress-desde-cero-2\/#article\",\"isPartOf\":{\"@id\":\"https:\/\/www.espai.es\/blog\/2016\/12\/como-crear-un-tema-wordpress-desde-cero-2\/\"},\"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; 2\",\"datePublished\":\"2016-12-09T10:56:45+00:00\",\"dateModified\":\"2017-02-27T15:15:40+00:00\",\"mainEntityOfPage\":{\"@id\":\"https:\/\/www.espai.es\/blog\/2016\/12\/como-crear-un-tema-wordpress-desde-cero-2\/\"},\"wordCount\":1756,\"commentCount\":2,\"image\":{\"@id\":\"https:\/\/www.espai.es\/blog\/2016\/12\/como-crear-un-tema-wordpress-desde-cero-2\/#primaryimage\"},\"thumbnailUrl\":\"https:\/\/www.espai.es\/blog\/wp-content\/uploads\/2016\/12\/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\/2016\/12\/como-crear-un-tema-wordpress-desde-cero-2\/#respond\"]}]},{\"@type\":\"WebPage\",\"@id\":\"https:\/\/www.espai.es\/blog\/2016\/12\/como-crear-un-tema-wordpress-desde-cero-2\/\",\"url\":\"https:\/\/www.espai.es\/blog\/2016\/12\/como-crear-un-tema-wordpress-desde-cero-2\/\",\"name\":\"C\u00f3mo crear un tema de WordPress desde cero (sin saber PHP) - 2 - Blog Escola Espai\",\"isPartOf\":{\"@id\":\"https:\/\/www.espai.es\/blog\/#website\"},\"primaryImageOfPage\":{\"@id\":\"https:\/\/www.espai.es\/blog\/2016\/12\/como-crear-un-tema-wordpress-desde-cero-2\/#primaryimage\"},\"image\":{\"@id\":\"https:\/\/www.espai.es\/blog\/2016\/12\/como-crear-un-tema-wordpress-desde-cero-2\/#primaryimage\"},\"thumbnailUrl\":\"https:\/\/www.espai.es\/blog\/wp-content\/uploads\/2016\/12\/featured.jpg\",\"datePublished\":\"2016-12-09T10:56:45+00:00\",\"dateModified\":\"2017-02-27T15:15:40+00:00\",\"author\":{\"@id\":\"https:\/\/www.espai.es\/blog\/#\/schema\/person\/b2d40404b9d987e3586e186c021ef897\"},\"description\":\"En el siguiente art\u00edculo continuaremos viendo como crear un tema de WordPress de forma f\u00e1cil, desde cero y sin saber PHP; mejoraremos la p\u00e1gina de inicio.\",\"breadcrumb\":{\"@id\":\"https:\/\/www.espai.es\/blog\/2016\/12\/como-crear-un-tema-wordpress-desde-cero-2\/#breadcrumb\"},\"inLanguage\":\"es\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\/\/www.espai.es\/blog\/2016\/12\/como-crear-un-tema-wordpress-desde-cero-2\/\"]}]},{\"@type\":\"ImageObject\",\"inLanguage\":\"es\",\"@id\":\"https:\/\/www.espai.es\/blog\/2016\/12\/como-crear-un-tema-wordpress-desde-cero-2\/#primaryimage\",\"url\":\"https:\/\/www.espai.es\/blog\/wp-content\/uploads\/2016\/12\/featured.jpg\",\"contentUrl\":\"https:\/\/www.espai.es\/blog\/wp-content\/uploads\/2016\/12\/featured.jpg\",\"width\":360,\"height\":240,\"caption\":\"Logo de WordPress\"},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\/\/www.espai.es\/blog\/2016\/12\/como-crear-un-tema-wordpress-desde-cero-2\/#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; 2\"}]},{\"@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) - 2 - Blog Escola Espai","description":"En el siguiente art\u00edculo continuaremos viendo como crear un tema de WordPress de forma f\u00e1cil, desde cero y sin saber PHP; mejoraremos la p\u00e1gina de inicio.","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\/12\/como-crear-un-tema-wordpress-desde-cero-2\/","og_locale":"es_ES","og_type":"article","og_title":"C\u00f3mo crear un tema de WordPress desde cero (sin saber PHP) - 2 - Blog Escola Espai","og_description":"En el siguiente art\u00edculo continuaremos viendo como crear un tema de WordPress de forma f\u00e1cil, desde cero y sin saber PHP; mejoraremos la p\u00e1gina de inicio.","og_url":"https:\/\/www.espai.es\/blog\/2016\/12\/como-crear-un-tema-wordpress-desde-cero-2\/","og_site_name":"Blog Escola Espai","article_published_time":"2016-12-09T10:56:45+00:00","article_modified_time":"2017-02-27T15:15:40+00:00","og_image":[{"width":360,"height":240,"url":"https:\/\/www.espai.es\/blog\/wp-content\/uploads\/2016\/12\/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\/12\/como-crear-un-tema-wordpress-desde-cero-2\/#article","isPartOf":{"@id":"https:\/\/www.espai.es\/blog\/2016\/12\/como-crear-un-tema-wordpress-desde-cero-2\/"},"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; 2","datePublished":"2016-12-09T10:56:45+00:00","dateModified":"2017-02-27T15:15:40+00:00","mainEntityOfPage":{"@id":"https:\/\/www.espai.es\/blog\/2016\/12\/como-crear-un-tema-wordpress-desde-cero-2\/"},"wordCount":1756,"commentCount":2,"image":{"@id":"https:\/\/www.espai.es\/blog\/2016\/12\/como-crear-un-tema-wordpress-desde-cero-2\/#primaryimage"},"thumbnailUrl":"https:\/\/www.espai.es\/blog\/wp-content\/uploads\/2016\/12\/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\/2016\/12\/como-crear-un-tema-wordpress-desde-cero-2\/#respond"]}]},{"@type":"WebPage","@id":"https:\/\/www.espai.es\/blog\/2016\/12\/como-crear-un-tema-wordpress-desde-cero-2\/","url":"https:\/\/www.espai.es\/blog\/2016\/12\/como-crear-un-tema-wordpress-desde-cero-2\/","name":"C\u00f3mo crear un tema de WordPress desde cero (sin saber PHP) - 2 - Blog Escola Espai","isPartOf":{"@id":"https:\/\/www.espai.es\/blog\/#website"},"primaryImageOfPage":{"@id":"https:\/\/www.espai.es\/blog\/2016\/12\/como-crear-un-tema-wordpress-desde-cero-2\/#primaryimage"},"image":{"@id":"https:\/\/www.espai.es\/blog\/2016\/12\/como-crear-un-tema-wordpress-desde-cero-2\/#primaryimage"},"thumbnailUrl":"https:\/\/www.espai.es\/blog\/wp-content\/uploads\/2016\/12\/featured.jpg","datePublished":"2016-12-09T10:56:45+00:00","dateModified":"2017-02-27T15:15:40+00:00","author":{"@id":"https:\/\/www.espai.es\/blog\/#\/schema\/person\/b2d40404b9d987e3586e186c021ef897"},"description":"En el siguiente art\u00edculo continuaremos viendo como crear un tema de WordPress de forma f\u00e1cil, desde cero y sin saber PHP; mejoraremos la p\u00e1gina de inicio.","breadcrumb":{"@id":"https:\/\/www.espai.es\/blog\/2016\/12\/como-crear-un-tema-wordpress-desde-cero-2\/#breadcrumb"},"inLanguage":"es","potentialAction":[{"@type":"ReadAction","target":["https:\/\/www.espai.es\/blog\/2016\/12\/como-crear-un-tema-wordpress-desde-cero-2\/"]}]},{"@type":"ImageObject","inLanguage":"es","@id":"https:\/\/www.espai.es\/blog\/2016\/12\/como-crear-un-tema-wordpress-desde-cero-2\/#primaryimage","url":"https:\/\/www.espai.es\/blog\/wp-content\/uploads\/2016\/12\/featured.jpg","contentUrl":"https:\/\/www.espai.es\/blog\/wp-content\/uploads\/2016\/12\/featured.jpg","width":360,"height":240,"caption":"Logo de WordPress"},{"@type":"BreadcrumbList","@id":"https:\/\/www.espai.es\/blog\/2016\/12\/como-crear-un-tema-wordpress-desde-cero-2\/#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; 2"}]},{"@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\/12\/featured.jpg","jetpack_sharing_enabled":true,"_links":{"self":[{"href":"https:\/\/www.espai.es\/blog\/wp-json\/wp\/v2\/posts\/6051","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=6051"}],"version-history":[{"count":35,"href":"https:\/\/www.espai.es\/blog\/wp-json\/wp\/v2\/posts\/6051\/revisions"}],"predecessor-version":[{"id":6304,"href":"https:\/\/www.espai.es\/blog\/wp-json\/wp\/v2\/posts\/6051\/revisions\/6304"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/www.espai.es\/blog\/wp-json\/wp\/v2\/media\/6158"}],"wp:attachment":[{"href":"https:\/\/www.espai.es\/blog\/wp-json\/wp\/v2\/media?parent=6051"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.espai.es\/blog\/wp-json\/wp\/v2\/categories?post=6051"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.espai.es\/blog\/wp-json\/wp\/v2\/tags?post=6051"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}