\u00bfC\u00f3mo crear un tema de WordPress?<\/h3>\n\n\n\n
Tras adquirir tu Hosting WordPress, <<te recomiendo>><\/em><\/strong>…<\/p>\n\n\n\n <\/p>\n\n\n\n crear un tema requiere tener un conocimiento b\u00e1sico del CMS y del API<\/strong>.<\/p>\n\n\n\n Que nos ofrece, para poder acceder a los contenidos y presentarlos a nuestro modo, as\u00ed como para integrar los bloques t\u00edpicos que componen un sitio, como men\u00fas, widgets y otros elementos. <\/p>\n\n\n\n Sin embargo, salvado este punto, resultar\u00e1 una tarea sencilla para todos aquellos que ya tienen conocimientos sobre los lenguajes b\u00e1sicos de la web: HTML, CSS y quiz\u00e1s un poco de Javascript.<\/p>\n\n\n\n\n\n\n\n Crear temas en WordPress es una buena idea si nos interesa obtener una personalizaci\u00f3n completa de nuestro sitio web y, adem\u00e1s, no depender de las plantillas que otros hayan desarrollado.<\/p>\n\n\n\n Obviamente, requiere una cantidad de trabajo muy superior a la que supone instalar cualquier tema y personalizarlo a nuestro gusto, pero los resultados siempre ser\u00e1n mucho m\u00e1s adaptados a nuestras necesidades, a la vez que mantenemos el control completo del sitio web.<\/p>\n\n\n\n Para ello nos dirigimos a la ruta wp-content\/themes y all\u00ed creamos una carpeta con el nombre del tema que vamos a construir<\/strong>. Nuestro tema lo vamos a llamar \u00abMyBlog\u00bb, as\u00ed que la que vamos a crear estar\u00e1 en la ruta wp-content\/themes\/myblog.<\/p>\n\n\n\n Un tema no es m\u00e1s que una carpeta que contiene los archivos b\u00e1sicos que componen todo sitio web, lease, los archivos PHP, CSS y Javascript.<\/p>\n\n\n\n Bueno empieza a apuntar<\/a> que ya es mucho.<\/p>\n\n\n Dentro de la carpeta vamos a colocar un par de archivos para componer los elementos esenciales de todo tema de WordPress:<\/p>\n\n\n\n php:<\/strong> <\/a>que contendr\u00e1 el c\u00f3digo de nuestra plantilla principal.<\/p>\n\n\n\n css:<\/a><\/strong> que contendr\u00e1 los estilos del sitio web y toda una serie de metadatos para definir el tema nuevo.<\/p>\n\n\n\n La definici\u00f3n de este archivo es fundamental en la creaci\u00f3n de nuestra plantilla de WordPress, ya que es donde vamos a declarar el nombre del tema, el autor y toda una serie de datos extra. Por supuesto, adem\u00e1s de todos estos metadatos, colocaremos los estilos de nuestro sitio web.<\/p>\n\n\n\n Estos ser\u00edan los datos m\u00ednimos a colocar en nuestro archivo de estilos CSS, junto con unas primeras declaraciones de aspecto del sitio web.<\/p>\n\n\n\n \/* <\/p>\n\n\n\n Theme Name:MyBlog <\/p>\n\n\n\n Theme URI: http:\/\/url-tema-myblog.example.com <\/p>\n\n\n\n Author: Nicol\u00e1s <\/p>\n\n\n\n Author URI: https:\/\/www.nicol\u00e1s.es <\/p>\n\n\n\n Description: Creamos este template a modo de demostraci\u00f3n <\/p>\n\n\n\n Version: 0.0.1 <\/p>\n\n\n\n Tags: responsive, demo theme wordpress <\/p>\n\n\n\n *\/ <\/p>\n\n\n\n body {<\/p>\n\n\n\n font-size: 16px; <\/p>\n\n\n\n background-color: #f0f0f0; <\/p>\n\n\n\n padding: 1rem; <\/p>\n\n\n\n }<\/p>\n<\/div><\/div>\n\n\n\n Como puedes ver, el comentario del principio de este CSS indica los datos del tema<\/strong>. Estos son muy importantes a la hora de categorizar el tema<\/strong> y aclarar su procedencia.<\/p>\n\n\n\n Una vez creada la carpeta y el archivo style.css,<\/strong> tu tema ya debe estar visible desde el panel de administraci\u00f3n de WordPress y podr\u00edas seleccionarlo como cualquier otro ya instalado en el CMS.<\/p>\n\n\n\n Sin embargo, todav\u00eda es un poco pronto para activarlo, ya que ser\u00e1 fundamental crear tambi\u00e9n algo de c\u00f3digo para generar su contenido HTML.<\/p>\n\n\n\n Ahora vamos a abordar el archivo index.php<\/strong> de nuestro tema, que sirve para definir la plantilla principal. En este archivo colocaremos el c\u00f3digo PHP para generar el HTML que debe ser enviado al cliente, que podr\u00e1 ser tan complejo como lo requiera el proyecto.<\/p>\n\n\n\n Aqu\u00ed veremos una sencilla aproximaci\u00f3n a lo que ser\u00eda la programaci\u00f3n del tema que nos permita mostrar un listado de las \u00faltimas entradas del blog.<\/p>\n\n\n\n <!DOCTYPE html> <\/p>\n\n\n\n <html lang=\u00bben\u00bb> <\/p>\n\n\n\n <head> <meta charset=\u00bbUTF-8″> <meta name=\u00bbviewport\u00bb content=\u00bbwidth=device-width, initial-scale=1.0″> <title>Inicial Theme<\/title> <link href=\u00bbhttps:\/\/fonts.googleapis.com\/css?family=Nunito:300,400,700&display=swap\u00bbrel=\u00bbstylesheet\u00bb> <link rel=\u00bbstylesheet\u00bb href=\u00bb<?= get_template_directory_uri() ?>\/style.css\u00bb> <\/head> <\/p>\n\n\n\n <body> <div class=\u00bbcontainer\u00bb> <\/p>\n\n\n\n <header class=\u00bb\u00bb>Inicial Theme<\/header> <main> <?php if ( have_posts() ) { while ( have_posts() ) { the_post(); ?> <h1><?= the_title(); ?><\/h1> <div><?= the_content(); ?><\/div> <?php } } ?> <\/main> <footer> @ Mi tema 2020 <\/footer> <\/p>\n\n\n\n <\/div> <\/body> <\/p>\n\n\n\n <\/html><\/p>\n<\/div><\/div>\n<\/div><\/div>\n\n\n\n En este c\u00f3digo encontramos dos ejemplos interesantes de las herramientas que nos aporta WordPress para programar los sitios web.<\/p>\n\n\n\n La funci\u00f3n get_template_directory_uri(). <\/strong>Esta es interesante para crear un enlace con los archivos del template, en este caso la hora de estilo, de manera que WordPress nos asegure que la ruta va a funcionar correctamente. Debemos usar este tipo de rutas para enlazar correctamente los assets del tema, como es el caso de la hoja de estilo CSS.<\/p>\n\n\n\n Loop de WordPress.<\/strong> Vemos tambi\u00e9n un ejemplo de iteraci\u00f3n de WordPress para la extracci\u00f3n de contenido, es lo que se conoce como Loop de WordPress.<\/p>\n\n\n\n Ahora podr\u00edas activar este tema, del mismo modo que activas cualquier otro tema de WordPress, en la secci\u00f3n Apariencia > Temas<\/strong>. All\u00ed encontrar\u00e1s el nuevo tema que acabas de crear, con el nombre tal como hayas indicado en el archivo style.css.<\/p>\n\n\n\n Conseguir que se muestre una miniatura del tema es tan sencillo como a\u00f1adir la correspondiente imagen en la carpeta del theme, junto con los archivos index.php y style.css, con el nombre de \u00abscreenshot.png\u00bb.<\/p>\n\n\n\n Llegado a este punto, WordPress nos ofrece multitud de herramientas para descomponer el template en segmentos (como cabecera o pie) que puedan ser reutilizados a lo largo de las diversas plantillas del sitio web, as\u00ed como la posibilidad de escribir funciones que nos permitan inyectar c\u00f3digo adicional en la parte de la cabecera y el pie, as\u00ed como otras secciones de este template.<\/p>\n\n\n\n En este ejemplo se recorren los post recientes, comenzando por el m\u00e1s nuevo, y para cada uno se escribe su t\u00edtulo y cuerpo. Para ello usamos un bucle while de PHP y en cada iteraci\u00f3n funciones diversas del API de WordPress necesarias para acceder a sus contenidos.<\/p>\n\n\n\n Por supuesto, tambi\u00e9n podemos crear diversos archivos adicionales, con plantillas personalizadas para un detalle de un post, para una p\u00e1gina, etc. Son solamente algunas de las muchas posibilidades que nos ofrece el desarrollo de temas de WordPress.<\/p>\n\n\n\n Si te interesa el desarrollo y personalizaci\u00f3n del CMS, recuerda que en blog de Nicol\u00e1s<\/a> hemos publicado tambi\u00e9n otros post dedicados a temas tan interesantes como<\/strong> \u00bfPuedo hacer mi Plugin WordPress?<\/a>.<\/p>\n\n\n\n <\/p>\n\n\n\n <\/p>\n\n\n\n \u00bfTe has quedado con alguna duda o pregunta? Entonces te pido que dejes un comentario<\/strong>. Da igual que sea o una duda o un simple gracias, pero me alegrar\u00e9 mucho de leerlo y responderlo.<\/p>\n\n\n\n \u00a1Cu\u00e9ntame en los comentarios!<\/strong><\/p>\n\n\n\n Enlaces internos:<\/strong><\/p>\n\n\n\n Por suerte, puedes crear un tema de WordPress desde cero, para personalizar completamente tu sitio web de WordPress como desees. Adem\u00e1s, crear tu propio tema de WordPress personalizado ayuda a reducir el desorden de c\u00f3digo en los archivos del tema y a mejorar el rendimiento del sitio.<\/p>\n","protected":false},"author":2,"featured_media":8780,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[7],"tags":[12,14,16,19,21,27,31,32,33],"class_list":["post-9705","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-wordpress","tag-css","tag-desarrollo","tag-diseno","tag-html","tag-js","tag-plugins","tag-temas","tag-web","tag-wordpress"],"_links":{"self":[{"href":"https:\/\/xn--nicols-tta.es\/temas_y_plugins\/nicopre\/wp-json\/wp\/v2\/posts\/9705","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/xn--nicols-tta.es\/temas_y_plugins\/nicopre\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/xn--nicols-tta.es\/temas_y_plugins\/nicopre\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/xn--nicols-tta.es\/temas_y_plugins\/nicopre\/wp-json\/wp\/v2\/users\/2"}],"replies":[{"embeddable":true,"href":"https:\/\/xn--nicols-tta.es\/temas_y_plugins\/nicopre\/wp-json\/wp\/v2\/comments?post=9705"}],"version-history":[{"count":1,"href":"https:\/\/xn--nicols-tta.es\/temas_y_plugins\/nicopre\/wp-json\/wp\/v2\/posts\/9705\/revisions"}],"predecessor-version":[{"id":12609,"href":"https:\/\/xn--nicols-tta.es\/temas_y_plugins\/nicopre\/wp-json\/wp\/v2\/posts\/9705\/revisions\/12609"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/xn--nicols-tta.es\/temas_y_plugins\/nicopre\/wp-json\/wp\/v2\/media\/8780"}],"wp:attachment":[{"href":"https:\/\/xn--nicols-tta.es\/temas_y_plugins\/nicopre\/wp-json\/wp\/v2\/media?parent=9705"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/xn--nicols-tta.es\/temas_y_plugins\/nicopre\/wp-json\/wp\/v2\/categories?post=9705"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/xn--nicols-tta.es\/temas_y_plugins\/nicopre\/wp-json\/wp\/v2\/tags?post=9705"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}El mejor Hosting<\/h1>\n\n\n\n
<\/a>\n<\/center>\n\n\n\n
Primeros pasos para crear un tema de WordPress<\/a><\/h3>\n\n\n\n
![\"\"](\"https:\/\/xn--nicols-tta.es\/temas_y_plugins\/nicopre\/\/wp-content\/uploads\/2022\/10\/Consultorio-octubre-22-1024x512.jpg\")
<\/a><\/figure>\n<\/div>\n\n\nDefinici\u00f3n del archivo style.css<\/h4>\n\n\n\n
Plantilla principal del tema<\/h3>\n\n\n\n
Activar el tema desarrollado<\/h4>\n\n\n\n
![\"\"](\"https:\/\/xn--nicols-tta.es\/temas_y_plugins\/nicopre\/\/wp-content\/uploads\/2022\/09\/screenshot-1024x768.webp\")
<\/figure>\n\n\n\n![\"\"](\"https:\/\/xn--nicols-tta.es\/temas_y_plugins\/nicopre\/\/wp-content\/uploads\/2022\/11\/seleccion-tema.jpg\")
<\/figure>\n\n\n\nSiguientes pasos en el desarrollo del tema<\/h3>\n\n\n\n
\n\n\n\n
\n\n\n\n\u00daltimas Noticias Digitales<\/a><\/h5>\n\n\n\n
Blog<\/a><\/h5>\n\n\n\n
Tienda<\/a><\/h5>\n\n\n\n
<\/h4>\n","protected":false},"excerpt":{"rendered":"