> Manuales > Curso gratuito de iniciación Wordpress

Personalizar un diseño en Wordpress está al alcance de cualquier interesado si se conoce un poco el CMS. Lo puedes ver en estos primeros pasos para personalizar tu propio tema en Wordpress.

Para aprender Wordpress no necesitas limitarte a los temas que encuentras en Internet: lo interesante es que puedes crear tus propios diseños totalmente personalizados. Si eres diseñador web seguro que lo que quieres es implementar tus propios diseños dentro de Wordpress para beneficiarte de las ventajas de trabajar con un CMS. Nos referimos a la posibilidad de administrar tu contenido automáticamente, su posicionamiento, los usuarios, comentarios y un largo etcétera de posibilidades que nos brinda el gestor. Quizás lo que quieres es ofrecer a tus clientes todas estas ventajas y de ese modo poder realizar un trabajo mucho más profesional y acorde a sus necesidades.

Todo eso está a tu alcance y aunque pueda parecerte que es un asunto difícil, queremos demostrar que no lo es tanto si sabes dónde tienes que husmear. Cualquier diseñador que tenga un poco de empeño lo podrá conseguir. A lo largo del vídeo que te ofrecemos al final de este artículo explicamos cómo dar esos primeros pasos y demostramos que iniciar un theme en Wordpress es muy sencillo.

Este artículo es la entrega final del Curso gratuito de Administración y Optimización de Wordpress en una clase extra que no habíamos planificado, pero que creemos que es básica para darnos un poco más de nociones sobre las posibilidades del CMS.

Por qué no debes depender de los temas de los demás

Si analizas los temas de Wordpress que puedes encontrar para descarga por Internet, con ojo crítico y técnico, vemos que la mayoría no están hechos de manera muy profesional: te cargan cosas que no necesitas o que no se usan realmente, aumentando el peso de nuestro sitio y perdiendo en optimización. A veces usan imágenes que no están mostrando, te cargan todo un framework CSS como Bootstrap cuando a lo mejor solo están usando un par de cosillas, a veces te cargan jQuery cuando no lo necesitas, etc.

Pero eso solo si los observamos por dentro. Aun obviando este problema, muchas veces encontraremos que los temas no te ofrecen una distribución de contenido como la que te gustaría, o como la que te ha pedido tu cliente. Si hacemos webs un poco más personalizadas o complicadas, nuestro cliente nos pedirá un flujo de uso determinado, una experiencia de usuario concreta, adaptarse a unos wireframes que ha definido en una serie de reuniones con nosotros. Esto es algo muy complicado de encontrar en un tema ya listo y probablemente editar un tema es algo más complicado que crearlo desde cero por nosotros mismos.

Crear un tema en Wordpress

Lo primero que debemos de hacer es identificar los contenidos que queremos mostrar en una web. Este es un proceso que debemos de realizar en cualquier tipo de desarrollo y saldrá de las conversaciones que tengamos con el cliente o de nuestro análisis del negocio que queramos llevar a una web.

A partir de ahí, debemos conocer un poco cómo se estructuran los archivos en Wordpress, ya que hay diversos tipos de contenido, como listados de entradas o el archivo de la propia entrada cuando queremos ver el contenido completo. La mayoría de las webs las podemos adaptar a lo que Wordpress nos ofrece, que son entradas, páginas y listados de entradas pertenecientes a una categoría o etiqueta. Cada uno de esos tipos de páginas tendrá su propio archivo o plantilla que podremos adaptar de manera independiente. En el vídeo se explican los tipos de páginas y los archivos que podemos crear para generar las plantillas.

Una vez conocemos todo esto, viene la parte más simple, aunque parezca mentira: crear un tema de Wordpress es tan sencillo como crear una carpeta en una instalación del CMS, donde tendrás un style.css y un index.php.

En el vídeo se muestra ese proceso y podremos apreciar en pocos minutos cómo se crea un tema básico. Tenemos que crear la carpeta en el directorio de temas, será una subcarpeta de wp­content/themes. Le llamamos a esa carpeta como queramos nombrar nuestro "theme". Luego, dentro de nuestra carpeta del nuevo tema, creamos el index.php al que le puedes poner cualquier contenido de prueba.

Luego abres tu Wordpress y te metes en el gestor del contenido "wp­admin" o como hayas llamado a la carpeta del administrador. Entonces vas a Apariencia / Temas y encontrarás tu nuevo tema. Dice de momento que está dañado porque falta la hoja de estilos. Puedes crear el archivo style.css y dejarlo en la carpeta de tu tema. Entonces verás que Wordpress lo reconoce perfectamente. Puedes activarlo entonces y verás cuando entres en tu sitio web que encuentras el contenido que habías metido en el index.php.

Funciones de Wordpress

Claro que de momento nuestro tema está vacío o con muy poco contenido. Pero no te preocupes, porque ahora comienza la parte más divertida. Lo que debes hacer es crear tu página de manera que luego puedas editar los contenidos desde el administrador de Wordpress, y para ello debes crear el tema con una serie de códigos que te sirvan para acceder a las funciones de Wordpress que te devuelven el contenido que se carga y actualiza en el administrador.

Por ejemplo, sabemos que lo que hay dentro de TITLE es el título de nuestra web. Pues bien, entonces tenemos que usar la función de Wordpress que nos devuelve el título de una página.

<title><?php the_title();?></title>

Ahora ese título es administrable desde el gestor de contenido. Vamos configurando nuestro tema y haciendo que Wordpress nos facilite la creación de contenido.

Nota: Todas las funciones que están disponibles en Wordpress las tienes documentadas en el Codex, que es algo como la Biblia del Wordpress. http://codex.wordpress.org/

A partir de aquí te convidamos a ver el vídeo, en el que vas a poder aprender mucho más, como hacer listados de entradas, mostrando su título, descripción, etc. Con esas explicaciones podrás practicar e intentar hacer por tu cuenta tus primeras pruebas de temas.

Vídeo de esta clase de demostración de creación de temas Wordpress

El vídeo completo con todo esto y mucho más, lo encuentras a continuación. Espero que os guste.

Daniel Martínez

Diseñador gráfico convertido a web

Manual