Los Inicios con WordPress: Editar la Estructura de Tu Sitio

Spanish (Español) translation by Eva Collados Pascual (you can also view the original English article)

Así que ya tienes tus socorridas chuletas CSS, y tu sitio ahora ya debe al menos estar listo para que lo personalices con una combinación de colores e incluso algunas fuentes personalizadas de forma que verdaderamente empiece a aparentar ser algo más 'tuyo' que antes. Sin embargo, estás pensando que también te gustaría hacer algunos cambios y estos cambios no están exactamente relacionados con el estilo. Así que es probable que vayas a tener que empezar a editar algo del código, de la estructura inherente lo cual implica empezar a investigar en los archivos PHP del sitio.

Ah, pero antes de hacerlo, si estás buscando la hoja de estilo que te prometí la semana pasada y que completa la trasnformación del tema Twenty Thirteen del color naranja al azul: lo tienes aquí - puede que descubras que he olvidado modificar algunos elementos del tema conforme navegas a través de él, no he personalizado cada formato de entrada y probablemente encuentres que existen otras cosas que echas de menos. Por lo tanto, si realmente te estás planteando usar esto para un sitio que vas a hacer público tendrás que trabajar un poco más. Pero, al menos, consigue situarte en el camino adecuado para iniciar el proceso y te prepara para que puedas gestionar cualquier otra personalización que desees realizar más adelante.

De todas formas, ¡volvemos al tutorial de esta semana!

Antes de empezar, es necesario...

Acceso FTP a tu sitio
Tu software para la edición de texto

Lo Que Vamos a Hacer

Editar el footer predeterminado de WordPress añadiendo vínculos personalizados/contenido
Situar el menú de navegación principal antes de la cabecera
Crear una descripción de página usando los campos personalizados

A modo de introducción tengo que explicar un poco más sobre las plantillas de un tema para WordPress y cómo funcionan en el contexto de un tema hijo. Porque, como recordarás, en esta etapa nuestro tema realmente no incluye ninguna plantilla PHP.

Tal vez me estoy adelantando. Puede que incluso no seas consciente de la existencia del sistema de plantillas, ¿estoy en los cierto? Si quieres una explicación realmente completa podrías empezar por aquí:

Referencia

Codex: Introducción sobre las Plantillas
Codex: Plantillas
Codex: Temas Hijo y Plantillas

Sin embargo, para llegar rápidamente al punto importante, Permíteme citar el Codex ya que yo no lo podría expresar mejor:

Las plantillas son los archivos que controlan cómo se mostrará tu sitio WordPress en la Web. Estos archivos extraen información de la base de datos MySQL de WordPress y generan un código HTML que es envíado al navegador web. A través de su potente sistema de tema, WordPress te permite definir plantillas de tantos o tan pocos como usted como bajo un tema

Ahora, si nos fijamos en el tema, se dará cuenta de que realmente no son cualquier plantillas en el directorio de tu tema en el momento. ¿Necesitas que te recuerde por qué?

No creo. Recuerdas que nuestro tema es un tema "hijo" y por tanto, todas las plantillas de nuestro tema proceden en origen del directorio del tema padre.

Luego, la pregunta sigue siendo, ¿cómo accedemos y editamos estos archivos sin poner en riesgo el tema padre?, ¿debería el desarrollador tema actualizar el tema?

¡Me alegra que lo preguntes! Es fácil, simplemente copia la plantilla que desees editar del directorio padre en el directorio de tu tema hijo. WordPress es lo suficientemente listo como para buscar primero las plantillas en el directorio de tu tema hijo y en caso de no encontrar allí el archivo que necesita, pasar a buscarlo automáticamente en el directorio del padre. Es decir, todo lo que copiemos en el directorio del tema hijo tendrá prioridad.

OK, este es el concepto principal. Ahora vamos a pasar a las cosas que nos van a permitir realizar los cambios estructurales que deseamos.

Crear / Copiar Archivos en Tu Tema Hijo

Para empezar, hay más de una forma de conseguir una copia de las plantillas del tema padre que queramos editar para el tema hijo.

Método 1

Puede arrastrar y soltar de Remoto a Local y después subirlos de nuevo a Remoto con tu cliente de FTP.

En FileZilla arrastra las copias de las plantillas del tema padre que estés editando a tu escritorio (o a cualquier otra ubicación local de tu ordenador), después arrastrarlas de nuevo al directorio de tu tema hijo en el servidor:

Esto no eliminará nada del sitio remoto, simplemente creará una copia en tu equipo local que luego copias en la maquina remota en una ubicación diferente.

Método 2

También podemos configurar un marcador para nuestro servidor FTP en Text Wrangler, así que podemos guardar lugares alternativos (como el tema del tema hijo) como lo siguiente:

En Text Wrangler dirígete a Text Wrangler > Instalación
Para crear un nuevo marcador, en la Pestaña Favoritos pulsa el signo + en la parte inferior izquierda

Completa los campos con tus datos FTP, usa las mismas credenciales que empleaste cuando configuraste FileZilla.

Con esta configuración, cuando estés en FileZilla y desees copiar un archivo podrás realizar un clic con el botón derecho sobre el archivo de tu servidor (en nuestro caso, footer.php) y elige Editar, de forma que se abra en Text Wrangler.

Después, en el Menú Archivo de Text Wrangler, elige Guardar una Copia en el Servidor FTP/SFTP. (Si eliges FTP y el programa te indicará que debes permitir una excepción de seguridad ya que al haber optado por permitir cada vez y proceder a guardar el archivo - sólo tendrás que dar el permiso una vez).

En la ventana que se abre a continuación, podrás luego navegar al directorio de tu tema hijo y guardar el nuevo footer.php en tu tema hijo.

Esto además descargará el archivo del servidor y lo subirá de nuevo a la nueva ubicación del servidor, es un poco más complicado pero creo que es un proceso más limpio de forma que no acabes acumulando archivos huérfanos en el escritorio. En cualquier caso, independientemente del método que elijas para hacerlo necesitamos tener una copia del archivo footer.php (o cualquier archivo que estamos editando) en nuestro tema hijo para poder hacer cambios en él.

Editar Pie de Página para Cambiar los Detalles de Información del Sitio

El primer cambio que mis alumnos generalmente me piden hacer cuando llegamos a esta parte del curso es cómo cambiar el footer predeterminado que trae Twenty Thirteen

La mayoría de las veces desean añadir el aviso de copyright, y en otras ocasiones quieren cambiarlo por completo, de cualquier manera probablemente no sea ninguna sorpresa saber que puedes trastear con esta parte de tu sitio web desde la plantilla del pie de página (footer.php) - así que, partiendo de la información de la sección anterior, abre la copia de footer.php de tu tema hijo en tu Editor de Texto.

Así que, antes de que nos pongamos a editar nada, desglosemos lo que estamos elaborando.

En la parte superior de la página vamos a ver una etiqueta de código la cual tiene el siguiente aspecto. Esto indica que el texto que sigue es PHP, un lenguaje que es interpretado y ejecutado por el servidor antes de que la página se envíe al cliente (navegador) - lo que constituye la parte inteligente de la tecnología web, ya no tenemos que usar archivos tontos que se residen de forma estática en el servidor y simplemente se envían en respuesta a una petición del navegador. Los scripts del servidor, que es lo que es el lenguaje PHP, permiten mucho más que construir una tecnología inteligente y dinámica que impulsa hoy un montón de productos basados en la web (existen también otros lenguajes, pero WordPress está escrito en PHP y por eso es nuestro objetivo aquí).

PHP no es HTML, pero funciona en y junto a HTML, ya que eso es lo que leen los navegadores. Los navegadores no pueden leer o interpretar PHP, todo esto sucede en el servidor (y por ese motivo, cuando solicitaste tu alojamiento en el episodio 2, tuviste que asegurarte de que tu alojamiento dispusiese de un servidor con PHP del cual, por supuesto, dispone la gran mayoría).

En cualquier caso, si sigues leyendo la página verás lo siguiente:

La etiqueta PHP de apertura
Los comentarios relativos a esta plantilla que indican qué lugar ocupa en la estructura del sitio en su conjunto (contiene el contenido del pie de página, también cierra el div del contenido principal)
La etiqueta de cierre PHP
Algunas etiquetas HTML - con comentarios de ayuda...
algunas etiquetas HTML - con comentarios de ayuda... La etiqueta de cierre del </div> principal (Main), la sección de apertura del pie de página, <footer>
Algunas etiquetas PHP, por ejemplo <?php get_sidebar('main'); ?>
Más etiquetas de cierre HTML

El código publicado finalmente se verá así:

Habrás notado que sólo hay HTML en la página. Las distintas partes de la plantilla han sido extraidas o bien del tema (sidebar.php y footer.php etc.) o del propio WordPress wp_footer(); y han sido compilados en una sola página HTML. Cada página o entrada de tu sitio que visites habrá sido compilado mediante el mismo proceso a partir de cualquier fragmento del tema que haya sido invocado dependiendo de la parte de tu sitio en la que te encuentres.

Si estás en la página de inicio puede que estés invocando el archivo home.php o una plantilla fron-page.php, si estás en el blog será una plantilla archive.php. Todas las plantillas de tu tema son llamadas juntas (por parte del servidor), conforme se necesiten cuando un cliente (navegador) realiza una petición al servidor para ver tu sitio web.

Así que, retomando lo que estamos intentando conseguir en este ejercicio, vuelve a tu editor de texto y empieza a imaginar qué fragmentos del código podrías querer editar en esta plantilla para el pie de página.

Si te fijas bien, verás una larga etiqueta PHP que parece contener todos los elementos que quieres cambiar. En primer lugar podemos observar que en su conjunto este fragmento forma un enlace hacia WordPress.org:

  <?php do_action( 'twentythirteen_credits' ); ?>

		<a href="<?php echo esc_url( __( 'http://wordpress.org/', 'twentythirteen' ) ); ?>" title="<?php esc_attr_e( 'Semantic Personal Publishing Platform', 'twentythirteen' ); ?>"><?php printf( __( 'Proudly powered by %s', 'twentythirteen' ), 'WordPress' ); ?></a>

Ahora, conforme te vayas sintiendo cómodo con esta clase de código podrás ir retocándolo a tu gusto, podrías eliminar, por ejemplo, toda esa sección, en cuyo caso eliminarías todo lo siguiente:

1
2	<div class="site-info">to</div>
3	<!-- .site-info -->

haciendo desaparecer por completo esa sección, con lo cual el final de tu web lo constituiría la parte inferior del área de widgets del pie la página (sidebar.php).

Pero en este caso lo que queremos hacer es cambiar la URL existente por la de mi sitio web y ponerme como desarrollador en los créditos, así como colocar un aviso de copyright para disuadir a la gente de reutilizar mi contenido.

Para empezar, podemos cambiar las referencias en este fragmento de código de twentythirteen a mytheme (el nombre de nuestro tema) y:

<?php do_action( 'mytheme_credits' ); ?>

	<a href="<?php echo esc_url( __( 'http://wordpress.org/', 'mytheme' ) ); ?>" title="<?php esc_attr_e( 'Semantic Personal Publishing Platform', 'mytheme' ); ?>"><?php printf( __( 'Proudly powered by %s', 'mytheme' ), 'WordPress' ); ?></a>

Después cambiamos la URL wordpress.org por thewebprincess.com - para que el enlace dirija a mi página:

<?php do_action( 'mytheme_credits' ); ?>

	<a href="<?php echo esc_url( __( 'http://thewebprincess.com/', 'mytheme' ) ); ?>" title="<?php esc_attr_e( 'Semantic Personal Publishing Platform', 'mytheme' ); ?>"><?php printf( __( 'Proudly powered by %s', 'mytheme' ), 'WordPress' ); ?></a>

Luego cambiamos el título del enlace de 'Semantic Personal Publishing Platform' a 'Formación en Desarrollo Web con WordPress' (este es un enlace hacia mí, contémosle a Google lo sé hacer):

<?php do_action( 'mytheme_credits' ); ?>

	<a href="<?php echo esc_url( __( 'http://thewebprincess.com/', 'mytheme' ) ); ?>" title="<?php esc_attr_e( 'Web Development and WordPress Training', 'mytheme' ); ?>"><?php printf( __( 'Proudly powered by %s', 'mytheme' ), 'WordPress' ); ?></a>

Luego cambiamos el texto 'Orgullosamente Impulsado mediante' a 'Hecho a Mano Con Amor por'

<?php do_action( 'mytheme_credits' ); ?>

	<a href="<?php echo esc_url( __( 'http://thewebprincess.com/', 'mytheme' ) ); ?>" title="<?php esc_attr_e( 'Web Development and WordPress Training', 'mytheme' ); ?>"><?php printf( __( 'Lovingly Crafted by %s', 'mytheme' ), 'WordPress' ); ?></a>

Después cambiamos la palabra 'WordPress' por frase 'La Princesa de la Web':

<?php do_action( 'mytheme_credits' ); ?>

	<a href="<?php echo esc_url( __( 'http://thewebprincess.com/', 'mytheme' ) ); ?>" title="<?php esc_attr_e( 'Web Development and WordPress Training', 'mytheme' ); ?>"><?php printf( __( 'Lovingly Crafted by %s', 'mytheme' ), 'The Web Princess' ); ?></a>

Finalmente queremos añadir nuestro aviso de copyright personal, añadir en el nombre del cliente después de nuestro enlace y una etiqueta PHP para mostrar la fecha, hemos utilizado PHP porque así se mostrará de forma automática el año corriente.

<?php do_action( 'mytheme_credits' ); ?>

	<p><a href="<?php echo esc_url( __( 'http://thewebprincess.com/', 'mytheme' ) ); ?>" title="<?php esc_attr_e( 'Web Development and WordPress Training', 'mytheme' ); ?>"><?php printf( __( 'Lovingly Crafted by %s', 'mytheme' ), 'The Web Princess' ); ?></a> for The Site Owner &copy; <?php echo date('Y'); ?>

¡Ahí lo tienes! Un nuevo pie de página personalizado para nuestro sitio.

Por cierto, esta ha sido una forma bastante extensa de explicarlo. Al hacerlo de esta manera hemos conservado todos los elementos que hacen posible internacionalizar este tema, pero, en un caso real o si por ejemplo sólo lo estuvieses modificando para ti mismo (en lugar de estar preparando el tema para una distribución más amplia) podrías simplemente saltarte todo y reemplazar el código anterior en su conjunto por lo siguiente:

1	<a title="Web Development and WordPress Training" href="http://thewebprincess.com/">Lovingly Crafted by The Web Princess</a> for The Site Owner © 2013

Colocar la Navegación Principal Antes de la Imagen de Cabecera

De modo que lo que vamos a hacer es mover la navegación principal desde su actual hogar bajo el banner hasta situarla sobre él. Y después crearemos una nueva zona de navegación debajo de dicho banner. Ya sabes, simplemente porque podemos hacerlo.

Así que esta vez tendrás que copiar el archivo header.php del tema padre en tu tema hijo y abrir la versión para el hijo en tu editor.

Selecciona el código desde el principio de:

1
2	<div id="navbar">to the closing tag of the same</div>
3	<!-- #navbar -->

Esta es una de las cosas interesantes respecto al tema Twenty Thirteen, todos estos estupendos comentarios te serán de gran ayuda para indicarte donde estás. Toma nota y haz lo mismo en tus propios temas, de modo que la gente que trabaje con él después de ti pueda usarlos como guía en tus temas.

Corta ese código y pégalo sobre la línea <header class="homelink">. Asegúrate de que se mantenga dentro de la etiqueta <div>.

Guarda el archivo y actualiza la vista publicada de tu sitio para observar los cambios:

Advierte cómo la foto del banner es un poco menos alta de lo que era y la diferencia entre él y el título de la página es un poco más amplio. Si consultamos el inspector podremos ver que la sección del header tiene todavía la misma altura. Lo que sucede es que la cabecera de la imagen se oscurece por el nav, así que vamos a mover la imagen hacia abajo en consecuencia.

Así que, para conseguirlo haremos algunas modificaciones con CSS. De la misma manera como lo hicimos en nuestro anterior tutorial, inspeccione el código hasta encontrar esto:

1
2	body .site-header {
3	background-position: 0px 45px;
4	}

La razón por la que hemos puesto el selector del cuerpo con la cabecera de .site es aumentar la especificidad de la CSS. Sin ella podría poner el código en nuestra hoja de estilos y no vería los resultados que queremos porque el CSS para la cabecera de .site se encuentra en otra parte en el tema y que está tomando prioridad (viene después de nuestra hoja de estilos en la cascada). La adición de la etiqueta del cuerpo hace más específica la CSS y significa tiene prioridad y como tal el sitio reflejará los cambios.

Ahorre hasta el sitio y actualizar el sitio publicado.

¡Tiene Buen Aspecto!

Agregar una Descripción de Página a Nuestras Plantillas de Página Usando Campos Personalizados

Para finalizar, lo último que vamos a hacer es editar nuestra plantilla page.php para añadir a la página un campo para su descripción que situaremos bajo el título de la misma. Haremos esto mediante campos personalizados (consulta el Codex para obtener más detalles ellos).

Comenzaremos configurando nuestro campo personalizado en nuestra página de servicios.

Primero probablemente tendrás que editar las Opciones de pantalla para asegurarte de que tienes acceso al panel de los Campos personalizados, asegúrate de que la casilla para habilitarlos esté seleccionada:

Esto abrirá un nuevo panel bajo el editor de la página. Haz clic en Entrar Nuevo para crear un nuevo campo personalizado e introduce 'descripción de página' en el campo Nombre, a continuación escribe la descripción de tu página en el cuadro Valor.

Ahora ya hemos hecho lo que necesitábamos para añadir algo de código a la plantilla de página, así que copia el archivo page.php del tema padre en el directorio de nuestro tema hijo y después abrimos este último en nuestro editor. Estamos poniendo este código en la plantilla tras el encabezado de nivel 1 (<h1>) y antes del final del header del artículo.

1
2	<h5 class="page-description"><?php echo get_post_meta($post->ID, 'page description', true); ?></h5>

obtuvimos el código que hemos usado en esta página de la página del Codex trata sobre los campos personalizados - busca la sección de las Funciones de Plantilla - simplemente hemos cambiado sus 'key' por la nuestra, que no es otra cosa que 'page escription'. Guarda y sube tu archivo, después actualiza la página publicada:

Ya lo tienes, ya sabes cómo empezar a editar plantillas de tema.

Conclusión

Descubrir la ruta adecuada para gestionar las plantillas del tema puede ser un poco desalentador, afortunadamente, empezar con un tema como Twenty Thirteen es muy de gran ayuda, ya que como ya he mencionado, todo está my bien comentado o referenciado.