Introducción al desarrollo en WordPress

Posted on:27 febrero, 2017

Author:Andros Fenollosa Hurtado

Category:programación

Share: / /

 

El desarrollo en WordPress no tiene nada que envidiar un desarrollo basado en otros frameworks como Django o ROR. Debido a su naturaleza de gestor de contenidos, ofrece muchas facilidades. Así pues, usuarios convencionales puedan añadir a la página web diferente tipo de contenido según se haya preestablecido en el desarrollo previamente.

Antes de entrar en el desarrollo, es necesario recalcar que es necesario tener conocimientos básicos acerca de HTML/CSS y algo de PHP y fundamentos de programación. No es algo muy complicado, y es posible que se pueda seguir esta guía sin saber nada sobre programación o PHP, pero siempre es mejor.

 

Creación de la plantilla básica

Para esta pequeña guía se partirá usando Bootstrap junto a su plantilla de Blog. Esto nos proporciona una base sólida para iniciar nuestro desarrollo. A partir de esta base, podemos ir modificando el HTML a nuestro gusto. Es ideal crear todas aquellas páginas necesarias hasta completar todas las plantillas que conformarán nuestro proyecto web. Para determinar como quedarán ciertas páginas es recomendable rellenar todas aquellas partes que requieran información con datos aleatorios. Una vez tengamos todo el HTML y CSS establecido, pasaremos a la migración a WordPress.

 

Configuración del entorno

Una vez tengamos la plantilla de la página, estableceremos una estructura de trabajo similar a la que presentamos a continuación. Es posible variar ciertas rutas según trabajemos mejor. El primer paso es crear una carpeta que contendrá todo el proyecto WordPress, esta carpeta hará referencia a el nombre de la plantilla que instalaremos en la instalación de WordPress estándar. Dentro de esta carpeta estableceremos una estructura similar a la siguiente:

css
img
js
index.php
style.css

Donde css, img y js, son carpetas que contienen los archivos necesarios para la plantilla del mismo tipo que indican sus nombres. Los archivos index.php y style.css, son dos archivos completamente necesarios para cualquier proyecto de desarrollo en WordPress. En index.php se indica el contenido del tema mientras en style.css se le da formato a este contenido.

A continuación, esta carpeta la tenemos que mover en la ruta siguiente dentro de nuestra instalación wordpress:

wp-content > themes  > nuestro-proyecto

Siendo nuestro-proyecto, la carpeta creada anteriormente para almacenar nuestro proyecto. Para identificar el tema de WordPress que estamos desarrollando, creamos una imagen de 1200×900 que represente al tema visualmente. Esta imagen la situaremos dentro de nuestra carpeta del proyecto, junto a los archivos index.php y style.css. Si abrimos el administrador del sitio WordPress y nos dirigimos a Apariencia > Temas, podremos observar que, si todo a ido correctamente, estará para instalar nuestro tema personalizado con la imagen que le hemos asignado.

 

Adaptando la plantilla

Si tras seleccionar la plantilla en el panel de administrador, probamos a cargar la página de WordPress veremos que se encuentra totalmente vacía. Esto es debido a que en los archivos index.php y style.css están vacíos. Debemos escoger de nuestra plantilla creada antes de iniciar el desarrollo, el archivo HTML principal y copiar su contenido dentro de index.php. Ahora, si volvemos a cargar la página, comprobaremos que se muestra el contenido sin estilos.

Antes de arreglar el problema de los estilos, podemos realizar un paso previo. Si tenemos un archivo CSS principal lo ideal seria copiar su contenido dentro de style.css, ya que este representa el principal estilo de la página. Ahora, abrimos index.php donde tenemos el principal codigo HTML de nuestro proyecto. Para cargar el estilo principal, tenemos que introducir nuestra primera line en PHP, esta linea es la siguiente:

<?php bloginfo('stylesheet_url'); ?>

El objetivo de esta linea de codigo es cargar el archivo style.css. Si tenemos otros archivos de estilos, el procedimiento adecuado para cargarlos es el siguiente. Si tenemos una linea como la siguiente:

<link href="/css/bootstrap.css" rel="stylesheet">

Pasara a tener un aspecto como el siguiente:

<link href="<?php bloginfo('template_url'); ?>/css/bootstrap.css?2.0" rel="stylesheet">

Observar que simplemente se ha añadido el trozo de código PHP anteriormente mencionado. Esto hace que cargue el estilo dentro de la carpeta css a partir de la ruta del archivo style.css. Podemos realizar el mismo procedimiento con todos los demás estilos. Finalmente, si visualizamos el contenido del proyecto, comprobaremos que todos los estilos se han cargado correctamente.

 

Últimos retoques

Por último y no menos importante, hay que establecer  las características del todo documento HTML. La primera de ellas es el lenguaje, establecido por la etiqueta lang. La linea se sustituye por la siguiente:

<html  <?php language_attributes(); ?>>

La siguiente etiqueta es el charset perteneciente a la metainformación del documento:

<meta charset="<?php bloginfo('charset'); ?>">

De la misma manera se realiza el cambio con el content description:

<meta name="description" content="<?php bloginfo('description'); ?>">

Ahora, generalmente para cualquier página básica de un proyecto WordPress, se muestra el titulo de la página y a continuacion

<title>
<?php bloginfo('name'); ?> |
<?php is_front_page() ? bloginfo('description') : wp_title(); ?>
</title></pre>

Los dos últimos retoques son necesarios si, por ejemplo, en un futuro queremos instalar plugins en nuestro proyecto WordPress. Estos plugins hacen uso de diferencias etiquetas establecidas en los temas de la página.  Para delimitar el header y footer de nuestro proyecto y que los plugins que se apoyen en estos elementos funcionen correctamente, haremos uso de dos lineas de código.

Justo atnes de la etiqueta </head>:

<?php wp_head(); ?>

y justo después de </footer>:

<?php wp_footer(); ?>

Con todo esto, acabamos esta pequeña introducción al desarrollo WordPress. En un futuro se ampliará con más tutoriales el desarrollo en WordPress con la incorporación del menú principal de la página y visualización de los posts.

Leave a comment