Este art\u00edculo es una actualizaci\u00f3n de mis art\u00edculos anteriores sobre este mismo tema, crear un tema para WordPress desde cero y sin saber PHP, que pod\u00e9is encontrar aqu\u00ed<\/a>. Dichos art\u00edculos est\u00e1n explicados m\u00e1s al detalle, en este art\u00edculo de actualizaci\u00f3n, me voy a centrar en otros aspectos para que su lectura os resulte m\u00e1s interesante.<\/p>\n Lo primero que hay que tener en cuenta es que vamos a crear un tema de WordPress a partir de lo que se conoce como un starter theme<\/strong>, lo que viene a ser un \u00abtema en blanco\u00bb<\/strong>. Estos temas ya tienen la parte complicada hecha (la programaci\u00f3n en PHP), y aunque tienen sus limitaciones, para la m\u00e1s habitual de nuestras necesidades (crearle un tema personalizado a un cliente), van a servir perfectamente. Si lo que pretendes es crear un tema gen\u00e9rico e intentar venderlo a cientos o miles de clientes, probablemente no sea la opci\u00f3n m\u00e1s adecuada.<\/p>\n En esta ocasi\u00f3n voy a usar el starter theme de underscores.me<\/a><\/p>\n El primer paso es entrar en underscores.me<\/a> y \u00abcrear\u00bb\/descargar un tema con el nombre que nos interese. En mi caso se llamar\u00e1 \u00abespai\u00bb.<\/p>\n Hay que tener en cuenta que este tema tiene licencia GNU GPL v2 (o posterior) y por lo tanto nuestro tema obligatoriamente tendr\u00e1 una licencia id\u00e9ntica o similar, pero esto no nos va a impedir venderlo al cliente que le vayamos a hacer el tema personalizado.<\/p>\n Despu\u00e9s debemos de instalar y activar el tema en nuestro WordPress.<\/p>\n Nuestro tema se ha instalado en wp-content\/themes<\/strong> y la carpeta con el nombre del tema que hemos indicado en underscores.me<\/p>\n Lo primero ser\u00eda, si no lo vamos a usar, borrar el archivo styles-rtl.css ya que es la versi\u00f3n RTL (de derecha a izquierda) para idiomas que lo requieran.<\/p>\n Veremos tambi\u00e9n que el tema tiene una imagen en blanco (screenshot.png) que podemos reemplazar con nuestro logo corporativo o por una captura del tema cuando lo finalicemos.<\/p>\n Despu\u00e9s abriremos el archivo styles.css<\/strong> con nuestro editor favorito y al inicio del archivo CSS tenemos un comentario que contiene informaci\u00f3n que WordPress va a usar para mostrar la informaci\u00f3n de nuestro tema.<\/strong> Por lo que deber\u00edamos de cambiar \/ quitar aquellas cosas que consideremos necesarias. Aqu\u00ed os dejo el mio:<\/p>\n Obviamente, antes de modificar el tema<\/strong>, debemos de analizarlo un poco. Si inspeccionamos el c\u00f3digo HTML generado en nuestro WordPress, veremos lo siguiente:<\/p>\n Por otra parte, en \u00abApariencia > Editor de temas\u00bb podemos ver mejor la organizaci\u00f3n de los archivos:<\/p>\n Finalmente, en \u00abAparencia > Men\u00fas\u00bb y \u00abAparenciar > Widgets\u00bb podemos ver que este tema solo tiene una zona para widgets (el aside\/sidebar) y una zona para men\u00fa (el men\u00fa principal [primary])<\/p>\n Como habr\u00e9is empezado a comprender a estas alturas, el tema est\u00e1 formado por fragmentos de p\u00e1gina (header, footer, sidebar…) en diferentes archivos PHP que se combinan para acabar generando el archivo HTML que sea necesario enviar al visitante de nuestra p\u00e1gina. Por lo que cuando hacemos cambios en uno de estos archivos PHP, debemos de tener en cuenta que puede tener consecuencias en el resto de archivos.<\/p>\n Antes de modificar cualquier archivo PHP, puesto que se supone que no sabemos PHP, es importante sacar copia de dicho archivo por si lo rompemos.<\/p>\n Lo \u00fanico que necesitamos saber s\u00ed o s\u00ed, es que los archivos PHP son una combinaci\u00f3n de c\u00f3digo HTML normal y c\u00f3digo PHP.<\/strong> La clave es que cualquier cosa entre <?php<\/strong> y ?><\/strong> es c\u00f3digo PHP que no deber\u00edamos de modificar si no lo comprendemos. El resto del c\u00f3digo es HTML normal, y por lo tanto, si vamos con cuidado podemos a\u00f1adir, modificar o quitar c\u00f3digo HTML sin problemas, y esto nos va a permitir cambios estructurales.<\/strong><\/p>\n Vamos a empezar con un ejemplo sencillo, modificando el archivo footer.php<\/strong>. En este caso, tenemos un div<\/strong><\/em> de la clase site-info<\/em><\/strong> con \u00abpublicidad\u00bb del starter theme. Ese c\u00f3digo PHP que en principio no entendemos sirve simplemente para generar el contenido que hay dentro de dicho div<\/strong> del footer<\/strong>. Como no nos interesa dicho contenido, podemos borrar alegremente todo el contenido del div y poner un texto con nuestro copyright.<\/p>\n De esta forma tan sencilla hemos modificado el footer<\/strong>. Obviamente, esta modificaci\u00f3n tiene sus pegas, puesto que el texto que hemos introducido no se puede modificar por el usuario desde el backend de WordPress. As\u00ed que la mayor\u00eda de cambios que vamos a realizar afectar\u00e1n a la estructura, a\u00f1adiendo\/eliminando elementos HTML, o bien a\u00f1adiendo\/modificando\/eliminando algunos atributos id o clases para despu\u00e9s darle el aspecto deseado por CSS<\/b>. Hay que evitar a\u00f1adir contenido de esta forma ya que es algo que solo se podr\u00e1 modificar modificando el tema<\/strong>.<\/p>\n En el siguiente ejemplo, vamos a a\u00f1adir algunos elementos div<\/strong> <\/em>de la clase wrapper<\/em> <\/strong>para darle un ancho m\u00e1ximo al contenido y mostrarlo centrado. Esto, obviamente, no es obligatorio hacerlo y es una decisi\u00f3n \u00abart\u00edstica\u00bb de cara a ajustar la estructura del tema a un c\u00f3digo CSS que a\u00f1adiremos posteriormente, pero nos sirve como ejemplo de c\u00f3mo modificar la estructura.<\/p>\n Lo primero es abrir el archivo header.php<\/strong> y crear un div de la clase wrapper, que ser\u00e1 el primer hijo del elemento header<\/strong>, y que tenga dentro el logo y el menu (nav<\/strong>) del sitio web. La estructura simplificada<\/strong> deber\u00eda de ser tal que as\u00ed:<\/p>\n De este modo, centraremos el contenido del div<\/strong> que hemos creado, que en este caso es el logo y el men\u00fa.<\/p>\n Para el footer.php<\/strong> vamos a hacer lo mismo, pero en este caso no seria necesario crear el div<\/strong>, con ponerle la clase wrapper<\/strong> <\/em>al div.site-info<\/em><\/strong> que hemos visto antes seria suficiente.<\/p>\n Finalmente, habr\u00eda que a\u00f1adir otro div<\/strong> de la misma clase para tener el main<\/strong> y el aside<\/strong> con un ancho m\u00e1ximo, el uno al lado del otro y centrados. Aqu\u00ed es donde la cosa se complica un poco.<\/p>\n Puesto que en PHP se usan varios archivos para generar el HTML que se env\u00eda al usuario, para a\u00f1adir el div.wrapper<\/strong> que necesitamos, vamos a a\u00f1adir la etiqueta de apertura en un archivo y la de cierre en otro archivo diferente. Concretamente, vamos a a\u00f1adir al final del header.php<\/strong> lo siguiente:<\/p>\n y al principio del footer.php<\/strong> (justo despu\u00e9s del c\u00f3digo PHP y justo antes del elemento HTML footer<\/strong>) vamos a a\u00f1adir lo siguiente:<\/p>\n De ese modo, lograremos que el main<\/strong> y el aside<\/strong> se encuentren dentro de un elemento div<\/strong> de la clase wrapper<\/strong><\/em>.<\/p>\n Tened cuidado al a\u00f1adir la etiqueta de apertura que el editor de WordPress nos puede a\u00f1adir la de cierre autom\u00e1ticamente sin que nos demos cuenta. As\u00ed que hay que revisar bien el c\u00f3digo.<\/p>\n Ahora ya podemos meter un poquito de c\u00f3digo CSS. Para ello vamos a a\u00f1adir al final del archivo styles.css<\/strong> nuestro c\u00f3digo debidamente separado del resto.<\/p>\n Ahora ya deber\u00edamos de tener un tema con un aspecto m\u00e1s adecuado. Obviamente, este c\u00f3digo CSS y las modificaciones que hemos hecho en la estructura HTML son solo ilustrativas del tipo de cosas que podemos hacer sin saber PHP. De hecho, este CSS de ejemplo no tiene ni responsive.<\/p>\n Ahora vamos a crear lo que se conoce como una plantilla de p\u00e1gina (tambi\u00e9n existen las plantillas de entrada). Ya que en la p\u00e1gina principal (y puede que en alguna m\u00e1s) puede que no nos interese tener la barra lateral.<\/p>\n El archivo que se usa para generar las p\u00e1ginas es el archivo page.php<\/strong>. Vamos a hacer una copia de dicho archivo y le ponemos de nombre, por ejemplo, homepage.php<\/strong><\/p>\n Al principio del archivo tenemos un comentario PHP que vamos a modificar por el siguiente:<\/strong><\/p>\n Obviamente, cambiando el \u00abpackage espai\u00bb<\/strong> por el vuestro.<\/p>\n En la parte de c\u00f3digo PHP eliminaremos esta l\u00ednea:<\/p>\n Que es la encargada de generar la barra lateral\/aside (y que basicamente corresponde al archivo sidebar.php<\/strong>)<\/p>\n Y en la parte de c\u00f3digo HTML cambiaremos el id=\u00bbprimary\u00bb<\/strong> por id=\u00bbprimary-full\u00bb<\/strong> (esto es para que el c\u00f3digo CSS que afecta a #primary no le afecte).<\/p>\n Ahora es un buen momento para crear un par de p\u00e1ginas, una llamada Inicio y que debemos de indicar (en el panel derecho del editor de WordPress) que usar\u00e1 una plantilla de \u00abAncho Completo\u00bb y otra llamada Blog que usar\u00e1 la plantilla por defecto.<\/p>\n A\u00f1adimos estas dos p\u00e1ginas a un men\u00fa que debemos crear en \u00abApariencia > Men\u00fa\u00bb, y que debe de mostrarse en la zona \u00abPrimary\u00bb (la \u00fanica que hay).<\/p>\n Finalmente en \u00abAjustes > Lectura\u00bb indicamos que vamos a usar una p\u00e1gina de inicio \u00abest\u00e1tica\u00bb, de portada la que hemos creado como Inicio con la plantilla de \u00abAncho Completo\u00bb y para las entradas la p\u00e1gina Blog con la plantilla por defecto.<\/p>\n Como el tema tiene solo una zona de widgets y una zona de men\u00fa existe la posibilidad que quieras a\u00f1adir alguna m\u00e1s. Para ello os invito a leer mis art\u00edculos sobre como crear una nueva zona de widgets<\/a> y como crear\u00a0 una nueva zona de men\u00fa<\/a> en cualquier tema de WordPress.<\/p>\nCrear un tema personalizado a partir del Starter Theme<\/h2>\n
\/*\r\nTheme Name: Escola Espai\r\nTheme URI: http:\/\/www.espai.es\/\r\nAuthor: Abel Camarena Bernab\u00e9u\r\nDescription: Tema de ejemplo de la Escola Espai\r\nVersion: 1.0.0\r\nText Domain: espai\r\n*\/<\/pre>\n
Familiariz\u00e1ndose con el Starter Theme<\/h2>\n
\n
\n
\n
\n
Funcionamiento b\u00e1sico de PHP<\/h2>\n
Modificar la estructura del tema<\/h2>\n
<div class=\"site-info\">\r\n\u00a0 <p>\r\n\u00a0 \u00a0 Copyright © 2022 Escola Espai\r\n\u00a0 <\/p>\r\n<\/div><!-- .site-info --><\/pre>\n
<header id=\"masthead\" class=\"site-header\">\r\n\u00a0 <div class=\"wrapper\"> <!-- a\u00f1adimos un div wrapper --><\/strong>\r\n\u00a0 \u00a0 <div class=\"site-branding\">\r\n\u00a0 \u00a0 \u00a0 <!-- lo de aqu\u00ed no lo tocamos, es el logo del sitio web --><\/strong>\r\n\u00a0 \u00a0 <\/div><!-- .site-branding -->\r\n\u00a0 \u00a0 <nav id=\"site-navigation\" class=\"main-navigation\">\r\n\u00a0 \u00a0 \u00a0 <!-- lo de aqu\u00ed no lo tocamos, es el men\u00fa del sitio web --><\/strong>\r\n\u00a0 \u00a0 <\/nav><!-- #site-navigation -->\r\n\u00a0 <\/div> <!-- cerramos nuestro div.wrapper --><\/strong> \r\n<\/header> <!-- #masthead --><\/pre>\n
<div class=\"site-info wrapper<\/strong>\"><\/pre>\n
<div class=\"wrapper\"><\/pre>\n
<\/div> <!-- .wrapper --><\/pre>\n
Modificar el aspecto del tema<\/h2>\n
\/* \r\n----------------------------------------------------------------------------------\r\n----------------------------------------------------------------------------------\r\n----------------------------------------------------------------------------------\r\nMI CODIGO CSS\r\n----------------------------------------------------------------------------------\r\n----------------------------------------------------------------------------------\r\n----------------------------------------------------------------------------------\r\n*\/\r\n\r\n.post, .page {\r\n\u00a0 margin: 0;\r\n}\r\n\r\na {\r\n\u00a0 text-decoration: none;\r\n}\r\n\r\na, a:visited, a:active {\r\n\u00a0 color: #456789;\r\n}\r\n\r\n.wrapper {\r\n\u00a0 max-width: 78rem; \r\n\u00a0 margin: 0 auto;\r\n}\r\n\r\n\/* cabecera *\/\r\n\r\n.main-navigation { \r\n\u00a0 width: auto;\r\n}\r\n\r\n.site-title {\r\n\u00a0 font-size: 2rem;\r\n\u00a0 margin: 0.5rem 0;\r\n}\r\n\r\n.site-description {\r\n\u00a0 margin: 0.5rem 0;\r\n}\r\n\r\n#masthead { \r\n\u00a0 background-color: #ABCDEF;\r\n}\r\n\r\n#masthead .wrapper { \r\n\u00a0 display: flex; \r\n\u00a0 justify-content: space-between;\r\n\u00a0 padding: 0.5rem; \r\n\u00a0 align-items: center;\r\n}\r\n\r\n\/* men\u00fa principal *\/\r\n\r\n#primary-menu>li>a {\r\n\u00a0 padding: 0.5rem 1rem;\r\n\u00a0 background-color: #456789;\r\n\u00a0 color: white;\r\n\u00a0 margin: 0 0.25rem;\r\n\u00a0 transition: all 250ms;\r\n}\r\n\r\n#primary-menu>li>a:hover {\r\n\u00a0 background-color: #56789A;\r\n}\r\n\r\n#primary-menu .sub-menu {\r\n\u00a0 flex-direction: column;\r\n\u00a0 background-color: #789ABC;\r\n}\r\n\r\n#primary-menu .sub-menu a {\r\n\u00a0 color: white;\r\n\u00a0 padding: 0.5rem 1rem;\r\n\u00a0 transition: all 250ms;\r\n}\r\n\r\n#primary-menu .sub-menu a:hover {\r\n\u00a0 background-color: #89ABCD;\r\n}\r\n\r\n\/* contenido *\/\r\n\r\n#page>.wrapper { \r\n\u00a0 display: flex;\r\n\u00a0 padding: 0.5rem;\r\n}\r\n\r\n#primary {\r\n\u00a0 width: 70%;\r\n\u00a0 padding-right: 1rem;\r\n}\r\n\r\n\/* sidebar *\/\r\n\r\n#secondary {\r\n\u00a0 width: 30%;\r\n\u00a0 padding: 1rem;\r\n\u00a0 background-color: #ABCDEF;\r\n}\r\n\r\n#secondary ul {\r\n\u00a0 list-style: square;\r\n\u00a0 padding-left: 0;\r\n}\r\n\r\n\/* pie de p\u00e1gina *\/\r\n\r\n#colophon {\r\n\u00a0 background-color: #ABCDEF;\r\n}\r\n\r\n#colophon .wrapper {\r\n\u00a0 padding: 0.5rem; \r\n}<\/pre>\nCrear una plantilla de p\u00e1gina<\/h2>\n
\/**\r\n\u00a0 * Template Name: Ancho Completo\r\n\u00a0 * Description: Sin barra lateral\r\n\u00a0 * @package espai \r\n\u00a0 *\/<\/pre>\n
get_sidebar();<\/pre>\n
A\u00f1adir m\u00e1s zonas de men\u00fa y de widgets<\/h2>\n