Edición de temas.

A medida que ha viajado a través de esta web, usted ha echado un vistazo a cada característica significativa que WordPress ofrece y ha utilizado esas capacidades para construir una variedad de sitios. Sin embargo, siempre has seguido las reglas, escogiendo temas de la galería temática, instalando plug-ins desde el directorio de plug-ins y manteniendo la seguridad del tablero de WordPress. Pero hay otro mundo de posibilidades para aquellos que pueden colorear fuera de las líneas.

La clave para construir una página web con WordPress verdaderamente única y flexible es crear su propio tema. Como usted sabe, un tema es un mash-up de marcas HTML, reglas de formato y código PHP. Normalmente, WordPress oculta estos detalles de usted - las personas que crean los temas y plug-ins que utiliza su sitio web manejan todo esto, mientras que usted se concentra en escribir contenido fabuloso y ajustar la configuración en el tablero de instrumentos. Pero si usted decide desatarse y convertirse en un customizador de temas (o incluso en un creador de temas), se adentrará en un mundo diferente. Advertencia: Este mundo puede parecer vertiginosamente complejo. Pero no necesitas entender cada detalle. En lugar de ello, simplemente necesita encontrar las partes de un tema que desea cambiar y trabajar en ellas.

En este capítulo, comenzará su viaje observando de cerca cómo funcionan los temas y aprenderá a hacer pequeñas alteraciones que pueden tener grandes efectos. Primero, intentarás modificar estilos. A continuación, abrirás los archivos de plantillas de un tema para cambiar el código interno. Todo esto es una preparación para el próximo capítulo, donde crearás un nuevo tema para un sitio web completamente personalizado.

El objetivo: Blogs y sitios más flexibles

Antes de empezar a jugar con los temas, necesitas tener una idea clara de por qué querrías hacerlo. En otras palabras, ¿qué esperas ganar cambiando un tema que no puedes conseguir usando un buen tema preexistente con la combinación correcta de configuración de WordPress y plug-ins?

Hay varias buenas respuestas:

  • Para conseguir exactamente lo que quieres.
  • Para hacer su sitio único
  • Crear un sitio que no parezca "bloggy" (ver la siguiente sección)

Temas personalizados son la clave para desbloquear WordPress y construir cualquier tipo de sitio web que puedas imaginar. Su tarea puede no ser fácil, pero los temas personalizados lo hacen posible.

NOTA A menudo, WordPressers primero profundiza en un tema para hacer una pequeña alteración. Pero rara vez se detienen ahí. La capacidad de transformar un sitio, a menudo cambiando sólo una regla de estilo o modificando una sola línea de código, es adictiva. Si atrapas el fallo, querrás personalizar cada tema que toques y no podrás descansar hasta que consigas exactamente lo que quieres para tu sitio.

Sitios de WordPress que no son blogs

Una razón para personalizar un tema es crear un sitio que se vea y se sienta menos parecido a un blog (ver el recuadro de la página 456). La mayoría de los sitios de WordPress tienen algunas características que les hacen sentir más bloggish y menos como el tipo de sitios web complejos, tradicionales que gobiernan el mundo de los negocios y el comercio electrónico. Por ejemplo, los sitios WordPress suelen mostrar los mensajes con fecha en orden cronológico inverso. Pero, ¿qué pasa si quieres construir un escaparate de productos donde los mensajes son perfiles de productos, y no quieres que esos perfiles incluyan ninguna información de fecha?

Otra limitación es el hecho de que WordPress trata todos los mensajes de la misma manera. Pero, ¿qué sucede si desea crear una revista electrónica con una página de inicio personalizada para cada categoría de noticias que cubre (Deportes, Actualidad, Estilo de vida, etc.)? No puedes hacer ese tipo de cambios a menos que estés dispuesto a apartarte de los orígenes del blog de WordPress y personalizar tu tema. Haga eso, y usted puede construir un sitio de WordPress que se comporta como casi cualquier otro tipo de sitio que ve en la Web.

Pero antes de llegar allí, necesita aprender un poco más sobre la forma en que WordPress
y afortunadamente para ti, ese es el punto de este capítulo. La Figura 13-1 muestra el
objetivo final: un sitio web totalmente personalizado, que aprenderá a construir en el Capítulo 14.

edicion-temas01.jpg

Cuando un blog no es un blog?

Originalmente, WordPress fue diseñado para ser la mejor herramienta del mundo para construir un blog. Para la mayoría de la gente, la palabra "blog" (abreviatura de web log) significaba un diario personal compuesto por mensajes actualizados.

Apenas se crearon los blogs que la definición de lo que un blog podría hacer comenzó a expandirse. Los blogueros comenzaron a crear blogs más actuales, que ofrecían comentarios políticos, relatos de las hazañas culinarias o deconstruyeron programas populares de televisión. En su mayor parte, los blogs seguían siendo intensamente personales, pero ya no se limitaban a la vida personal de las personas.

Desde entonces, la definición de blog ha continuado su agresiva expansión. Hoy en día, los blogs no están necesariamente escritos por una sola persona en primera persona. Incluyen sitios que nunca antes se habían descrito como blogs, por ejemplo, sitios de noticias similares a las revistas y fotoblogs enfocados en imágenes o sitios de portafolios. Las empresas a menudo crean sitios de "bloggy" en lugar de sitios web tradicionales, especialmente si quieren crear el zumbido social o em - phasize noticias y eventos. (Por ejemplo, ese restaurante caliente que está en la calle podría sentir, legítimamente, que un blog es una mejor manera de hacer hablar a la gente que un aburrido sitio de folletos.

Esta discusión plantea una pregunta importante: ¿Cuándo dejan de ser blogs los blogs? En la mayoría de los casos, reconocerá un blog porque contiene entradas fechadas que puede leer (normalmente) en orden cronológico inverso, y navegar por categoría o etiqueta. Sin embargo, dependiendo del tema que elijas y el contenido que utilices, estas características similares a los blogs pueden ser desatacadas hasta el punto de que muchas personas no considerarán tu blog como un blog en absoluto. A lo largo de esta web, usted ha visto varios ejemplos de "blogs" que extienden la definición de la palabra de esta manera, como el sitio de la Escuela Canton (página 192) y el sitio del Restaurante Pernatch (página 229).

NOTA Si tiene curiosidad por obtener más ideas para sitios no blogs que WordPress puede crear, visite la galería de ejemplos en http://tinyurl.com/9dvpn3y.

Prepárese

Antes de que pueda pasar de WordPress, la plataforma de blogs, a WordPress, la herramienta de diseño del sitio, necesita satisfacer algunas condiciones.

Primero, usted necesita tener un sitio de WordPress alojado por usted mismo. WordPress. com no le da la capacidad de editar temas, aunque sí proporciona algunas características de personalización de temas cuidadosamente limitadas, que se describen en el cuadro de la página 457. Por muy prácticos que sean, no están a la altura del poder y la flexibilidad de los sitios web autoorganizados, donde puedes personalizar absolutamente cualquier cosa, siempre y cuando estés preparado para hacer un poco de trabajo de detective para averiguar lo que necesitas cambiar.
Segundo, necesita estar listo para abrir los archivos de plantilla que ejecutan el programa WordPress. Para entender lo que hay dentro, usted debe estar familiarizado con los conceptos básicos de la marcación HTML lo suficientemente cómodo como para encontrar su camino a través de la maraña de ángulos y elementos que viven en cada página web. También ayuda a conocer algunos CSS (ese es el estándar Cascading Style Sheets que formatea todas las páginas web modernas).

Si no lo haces, todavía podrás sentirte a gusto con la introducción que obtendrás en este capítulo, pero prepárate para una curva de aprendizaje empinada.

Si tus habilidades web no están a la altura del tabaco, aquí hay algunos buenos recursos que pueden ayudar a animarlos:

  • Si nunca has editado una página web antes, o si necesitas mejorar tus habilidades HTML, considera Crear un sitio web: El manual perdido (O' Reilly) que cubre los estándares HTML y CSS (y mucho más). O puedes leer un tutorial HTML de barebones en http://tinyurl.com/4mwq8.
  • Para aprender sobre CSS solamente, considere CSS3: The Missing Manual (O' Reilly). O puede probar un tutorial CSS en línea en http://tinyurl.com/mlqk7.

NOTA No es necesario que entienda todo sobre HTML y CSS para cambiar un tema de WordPress. A menudo puede Google su camino a la regla de estilo o código PHP que necesita para implementar una característica que desea. A continuación, puede copiar y pegar ese código en el archivo de tema correcto, sin preocuparse por ningún otro detalle.

¿Qué tal WordPress. com?

Los sitios web autoorganizados te dan rienda suelta para personalizar tu tema, usando todas las técnicas que estudiarás en este capítulo y en el siguiente. Sin embargo, la gente con los sitios de WordPress. com no están completamente excluidos. Si usted compra la actualización de Diseño Personalizado (o tiene una cuenta Premium, como se describe en la página 359), WordPress. com le ofrece un conjunto de útiles pero más modestas características de edición de temas.

Para ver estas funciones, seleccione Diseño personalizado en el menú del panel de instrumentos. Vale la pena destacar que puede previsualizar las características, incluso si no ha comprado la actualización de Custom Design. Mientras que usted no será capaz de hacer cualquier cambio a su sitio, usted será capaz de echar un vistazo a las opciones que WordPress. com ofrece y obtener una idea de cuánto control usted tiene sobre la apariencia de su sitio.

Si planea realizar cambios sencillos en el esquema de colores o las fuentes de su sitio, la actualización de Diseño personalizado brilla. Esto se debe a que te permite apuntar y hacer clic en tu camino a través de paletas de colores recomendados y fuentes web populares, haciendo que estos tipos de ajustes totalmente indoloro. Pero si quieres ajustar otros detalles, como el tamaño de la barra lateral o la colocación del encabezado, necesitas escribir tus propias reglas de estilo. Haga clic en CSS en la página Diseño personalizado para comenzar (Figura 13-2).

Con la ayuda de la actualización del diseño personalizado, puede aprovechar al máximo los ajustes de estilo que se tratan en la primera parte de este capítulo (a partir de la página 474).

Traducción realizada con el traductor www.DeepL.com/TranslatorSin embargo, definitivamente no será capaz de editar archivos de plantillas, cambiar el código PHP, o construir un sitio complejo y personalizado como el que se muestra en el Capítulo 14.

edicion-temas02.jpg

Tomar el control de su tema

Antes de poder crear un tema de WordPress brillantemente personalizado, necesita saber un poco más sobre cómo funcionan los temas entre bastidores.

Cuando conoció los temas por primera vez en el Capítulo 5, descubrió que cada tema consta de una combinación de archivos. Estos archivos trabajan juntos para crear todas las páginas en su sitio de WordPress, y caen en tres categorías básicas:
Hojas de estilo. Estos archivos contienen reglas de estilo que dan formato a diferentes partes de su sitio, como titulares, encabezados de barras laterales y enlaces. Ellos utilizan el muy querido estándar CSS, que será familiar para cualquiera que esté interesado en el diseño web.
Plantillas. Estos archivos contienen una mezcla de HTML ordinario y código PHP. Cada plantilla es responsable de una parte diferente de su sitio; por ejemplo, hay una plantilla para la lista de mensajes recientes, el encabezado de la página, el pie de página, la vista de un solo mensaje, etcétera.
Recursos. Estos son otros archivos que las plantillas de tu tema podrían utilizar, a menudo para añadir un poco de pizzazz. Los ejemplos incluyen archivos de imagen, como el que Greyzed utilizó para crear su fondo de piedra sucia (página 136), y el código JavaScript, como el material que el tema de Brightpage utilizó para ejecutar su presentación de imágenes (página 192).

Como mínimo, cada tema necesita dos archivos: una sola hoja de estilo llamada style style. css, que establece los colores, el diseño y las fuentes para todo su sitio, y una plantilla llamada index. php, que crea la lista de mensajes en su página principal. La mayoría de los temas tienen unas cuantas hojas de estilo más y muchas más plantillas, pero lo conseguirás en un momento.

Cómo almacena WordPress los temas

En su sitio WordPress, la carpeta wp-content/themes contiene todos sus temas. Por ejemplo, si la dirección de su sitio web es http://magicteahouse.net, el tema Twenty Twelve estará en la carpeta siguiente:

http://magicteahouse.net/wp-content/themes/twentytwelve DIFUNDE LA PALABRA-

Cada tema que instales obtiene su propia subcarpeta. Por lo tanto, si instala siete temas en su sitio web, verá siete subcarpetas en la carpeta wp-content/themes, aunque sólo utilice un tema a la vez.

Todas las hojas de estilo y los archivos de plantilla de un tema residen dentro de la carpeta del tema (Figura 13-3). La mayoría de los temas también tienen subcarpetas. Por ejemplo, podrían meter archivos JavaScript en una subcarpeta llamada js y archivos de imagen en una subcarpeta llamada images. No tiene que preocuparse por estos detalles siempre y cuando recuerde que los temas son un paquete de archivos y subcarpetas que necesita mantener juntos para que su sitio funcione correctamente.

edicion-temas03.jpg

Estilo. css: Cómo un tema se identifica a sí mismo

El archivo style. css es el punto de partida para cada tema. En la mayoría de los temas, es un archivo inmenso con instrucciones de formato. Por ejemplo, el archivo style. css del tema Veinte Doce pesa con casi 2.000 líneas de formato mágico. El archivo style. css define algunas piezas esenciales de información sobre el estilo en sí, usando un encabezado de tema al principio del archivo. Aquí hay una versión ligeramente acortada del encabezado que inicia el archivo Twenty Twelve style. css. Cada bit de información se resalta en negrita:

/*
Nombre del Tema: Veinte y Doce
Tema URI: http://wordpress.org/themes/twentytwelve
Autor: el equipo de WordPress
Autor URI: http://wordpress.org/
Descripción: El tema de WordPress para el año 2012 es un tema totalmente sensible…
Versión: 1.3
Licencia: GNU General Public License v2 o posterior
Licencia URI: http://www.gnu.org/licenses/gpl-2.0.html
Etiquetas: claro, gris, blanco, blanco, una columna, dos columnas, barra lateral derecha, fluido-laica—
fuera,

*/

WordPress pone entre corchetes el encabezado con dos secuencias de caracteres especiales: Comienza con /* y termina con */, los marcadores de comentarios CSS. Como resultado, los navegadores no prestan atención al encabezado. Pero WordPress lo comprueba y extrae los detalles clave. Utiliza esta información para la descripción del tema que aparece en la página Añadir temas (página 141). También realiza un seguimiento del número de versión y comprueba la URL del tema en busca de nuevas versiones. (Aunque dice "URI" en el archivo de tema, un URI es igual que una URL cuando se trata de contenido en la Web, como en el caso de los temas.

Si su tema carece de estos detalles, WordPress no reconocerá que es un tema. No lo mostrará en la sección Temas del panel de control, y no te permitirá activarlo en tu sitio.

NOTA Muchos temas incluyen hojas de estilo más allá de style. css. Sin embargo, estas hojas de estilo añaden funciones adicionales o manejan casos especiales; por ejemplo, proporcionan esquemas de color alternativos, se ocupan de navegadores antiguos, manejan idiomas que escriben texto de derecha a izquierda y formatean el contenido en el cuadro de edición de la página Agregar nuevo mensaje para que ofrezca la vista previa más realista posible.

El Editor de temas

Para editar un tema, seleccione Editor de apariencia? en el panel de instrumentos. Esto le lleva a la página Editar temas, con la hoja de estilo principal de su tema, style. css, abierto (Figura 13-4).

edicion-temas04.jpg

WordPress divide la página Editar Temas en dos partes. A la izquierda hay un cuadro de texto gigante donde puedes editar tu tema, un archivo a la vez. A la derecha hay una barra lateral que enumera todos los archivos del tema.

Una vez que haya terminado de editar un archivo del tema, haga clic en Actualizar archivo para guardar los cambios. A continuación, puede seleccionar un fichero diferente para editar.

Si desea hacer cambios extensos a un tema, es posible que no quiera hacer todo el trabajo en el ambiente apretado del tablero de instrumentos. Puede que prefieras descargar tus archivos de tema y editarlos fuera de línea, usando un programa más potente. Algunos programas de edición web, como Dreamweaver, incluso tienen características de edición de temas incorporadas para WordPress.

Una forma de hacerlo es elegir el archivo que desea editar, copiar su contenido y pegarlo en un editor de texto (como Notepad en equipos Windows o TextEdit en Mac). A continuación, después de realizar los cambios, vuelva a copiar el contenido editado en el cuadro de edición de la página Editar temas. Pero si va a editar varios archivos, es más fácil descargar la carpeta de temas completa. Para ello, busque su sitio web con un programa FTP (como se muestra en la Figura 13-3) y arrastre la carpeta de temas al escritorio del equipo. Cuando termine de hacer cambios, elimine la carpeta original de su sitio web y, a continuación, cargue la carpeta actualizada desde el equipo de escritorio a su sitio.

ADVERTENCIA El editor de temas puede ser una herramienta implacable. WordPress no almacena versiones pasadas de sus archivos temáticos, por lo que una vez que guarde una edición, no hay manera de restaurar su sitio a su estado anterior. (Puede volver a aplicar el tema original de la página Temas, pero eso borra todos los cambios de edición del tema. Para asegurarse de no tener problemas, acostúmbrese a hacer copias de seguridad básicas y mínimas. Antes de realizar un gran cambio en un archivo de tema, copie todo el contenido del cuadro de edición de la página Editar temas y péguelo en un archivo de texto en blanco en el equipo.

Protección personal con un tema child

Antes de empezar a jugar con uno de sus temas, debería pensar en los efectos a largo plazo. Algún día, probablemente no mucho después de hoy, la persona que creó el tema que está editando lanzará una versión nueva y mejorada que usted querrá usar en su sitio. El problema es el siguiente: Si instala una actualización de tema, elimina todas las modificaciones realizadas en los archivos de tema. Editar temas es suficiente trabajo sin tener que hacerlo una y otra vez.

Afortunadamente, hay una solución. Puede crear un tema child, que toma el tema actual como punto de partida y le permite personalizar el tema. Usted no cambia el tema original (conocido como tema padre) en absoluto. En su lugar, edite selectivamente las plantillas y hojas de estilo y guarde los archivos modificados en la carpeta del tema hijo. Estos nuevos archivos anulan las plantillas y hojas de estilo con el mismo nombre en el tema padre, de modo que obtendrá las funciones que desee en su sitio. Y cuando actualice el tema padre en una fecha futura, sus personalizaciones permanecerán en su lugar, porque WordPress almacena el tema hijo como un grupo separado de archivos.

Cuando personalice un tema, siempre debe empezar por crear un tema child. Es el enfoque más seguro y la única manera de garantizar que su trabajo sobreviva a los cambios futuros.

Sin embargo, si desea crear un tema completamente nuevo (en lugar de personalizar uno existente), necesita un enfoque diferente. Es posible que siga utilizando un tema existente como punto de partida para su trabajo, pero no es necesario crear un tema child. Tus cambios serán tan significativos que las futuras actualizaciones y correcciones no serán relevantes para tu tema engañado.

Todos los ejemplos de este capítulo utilizan temas childes. La creación de un tema completo por su cuenta es una empresa significativa incluso para las mejores cabezas de hélice entre nosotros, aunque obtendrá una introducción a la práctica en el Capítulo 14.

Creación de un tema child

Para crear un tema hijo, comience añadiendo una nueva carpeta de temas en la sección wp-content/temas de su sitio web. Nombra la carpeta lo que quieras. Sin embargo, al igual que una carpeta de tema normal, no es necesario que llene esta carpeta con archivos. Todo lo que necesitas hacer es poner un nuevo archivo style. css dentro de la carpeta que se enlaza al tema padre a través de la cabecera del tema.

Si esto suena como un desafío un poco intimidante, no te preocupes. En lugar de pasar por la molestia de crear la carpeta para el tema de su hijo y crear el estilo. css con el encabezado derecho, puede utilizar un pequeño plug-in, llamado One-Click Child Theme (http://tinyurl.com/child-theme), para ayudarle. Esto es lo que hay que hacer:

1. Instale y active el complemento One-Click Child Theme. Selecciona Plugins? y búscalo por nombre.

TIP WordPress tiene varios plug-ins similares que pueden ayudarle a crear temas para niños. Para verlas todas (y posiblemente elegir una diferente), busque el "tema hijo" en el repositorio de plug-in.

2. Active el tema que desee personalizar. El complemento One-Click Child Theme asume que desea crear un tema hijo para el tema activo en su sitio. Si ese no es el caso, vaya a Temas de Apariencia? y active el tema correcto antes de continuar.
3. Seleccione AparienciaÆNiño tema. Este es un nuevo comando de menú, cortesía del complemento One-Click Child Theme. Abre la página Crear un tema child (Figura 13-5).

edicion-temas05.jpg

NOTA Para seguir con los ejemplos de este capítulo, utilice el tema Veinte y Doce. Es un buen punto de partida para la práctica de personalización de temas porque es limpia, directa y adaptable. Si decide comenzar con un tema diferente, todos los conceptos descritos en este capítulo seguirán siendo válidos, pero los nombres exactos de las clases y los detalles de formato variarán.

4. Proporcione un nombre para el tema, una breve descripción y su nombre. El complemento One-Click Child Theme pone estos detalles en el encabezado del estilo. archivo css. Usa tu nombre como autor del tema.
5. Haga clic en Crear hijo. El complemento One-Click Child Theme crea la carpeta de temas hijo en su servidor web y crea un nuevo archivo style. css en su interior. A continuación, activa el tema hijo en su sitio.
En este ejemplo, el tema se llama Twenty Twelve Reboot, por lo que la carpeta recién creada se llamará twenty-twelve-reboot.
6. Para verificar que el tema de su hijo está funcionando, seleccione AparienciaÆTemas. Verá el tema de su nuevo hijo en la parte superior de la página (Figura 13-6).

edicion-temas06.jpg

7. Opcionalmente, desactive el complemento de tema child con un clic. A menos que planee crear otro tema nuevo para niños, no necesita mantener activo el Tema de un clic para niños. Diríjase a la página de plug-in (haga clic en Plugins) y utilice el enlace Desactivar para desactivarlo.

Cómo funcionan los temas childes

Si comprueba la carpeta creada recientemente para el tema de su hijo, verá que sólo contiene tres archivos. El primero es el todo-importante estilo. css. La segunda es una hoja de estilo suplementaria para idiomas de derecha a izquierda, llamada rtl. css. La tercera es una imagen llamada screenshot. png que WordPress copió del tema padre; usa esa imagen como miniatura en la página Themes (Figura 13-6).

Para empezar a editar el tema de su hijo, seleccione Editor de apariencia? Empieza con el estilo. css (Figura 13-7), como lo hace cuando edita un tema normal.

edicion-temas07.jpg

La clave para un tema child es su hoja de estilo style. css. A diferencia del archivo style. css en el tema padre, style. css en el tema hijo contiene sólo unas pocas líneas de texto. Aquí está el archivo style. css completo en el tema Twenty Twelve Reboot:

/*
Nombre del Tema: Veinte y Doce Reinicio
Descripción: Esta es una versión personalizada del tema de los Veinte y Doce para el tema
Casa de Té Mágica.

Plantilla: vigésimo doce
*/

@importar url (".. /twentytwelve/style. css");

Ya has visto los tres primeros detalles (nombre del tema, descripción y autor). Sin embargo, el ajuste de plantilla es new-it apunta a la carpeta del tema padre. Cuando WordPress ve esta configuración, sabe que debe buscar en una carpeta llamada twentytwelve (en la sección de temas de su sitio). Cuando lo hace, encuentra los archivos para el conocido tema Twenty Twelve.

A diferencia de la versión original del archivo style. css en el tema Twenty Twelve, el tema hijo contiene una sola línea después del encabezado. Esta línea toma todos los estilos del tema Veinte y Doce y los aplica al tema del niño:

@importar url (".. /twentytwelve/style. css");

Si eres tan tonto como para borrar esta línea, tu sitio perderá todos los estilos del tema padre. (Puede probarlo; sólo recuerde añadir la sentencia @import cuando termine.) De repente, todo su texto cambiará a la fuente genérica Times New Roman, sus encabezados bien formateados desaparecerán y el diseño de sus encabezados, pies de página y la barra lateral se mezclarán en un lío.

Los temas TIP Child son una gran manera de personalizar su sitio permanentemente, pero también son una herramienta práctica para cambiar temporalmente su formato. Por ejemplo, si usted está manejando el sitio de Magic Tea House, usted puede decidir llevar a cabo una promoción especial de invierno. Durante esta promoción, usted planea hacer cambios radicales en la combinación de colores de su sitio. Si utiliza un tema child para redecorar, puede volver rápidamente a su tema original cuando finalice la promoción, sólo tiene que elegir Apariencia? temas y activar el tema padre.

Añadir estilos con Jetpack: Otro enfoque

Un tema child es el método probado y verdadero para personalizar un tema de forma segura, pero si utiliza Jetpack, el práctico plug-in que tiene como objetivo ofrecer a los usuarios las características de WordPress. com, tiene otra opción.

Las versiones recientes de Jetpack incluyen una característica de edición CSS que actúa como la actualización de diseño personalizado en WordPress. com. Su principal ventaja es que le permite agregar a las reglas de estilo de su sitio sin modificar la hoja de estilo de su tema, por lo que no hay necesidad de crear un tema child. Pero esta simplicidad tiene un precio: limita su poder y flexibilidad. Aunque esta característica es lo suficientemente buena para los ajustes de estilo que verá en la siguiente sección, no le permite editar plantillas de forma segura: una característica clave que pulsará en la segunda mitad de este capítulo y en el Capítulo 14.

Para utilizar la función de edición CSS de Jetpack, seleccione Apariencia? Editar CSS. Verá un cuadro de edición que se ve sorprendentemente similar al que usa al editar una hoja de estilo en un tema child. Al igual que con un tema child, las reglas de estilo que se añaden aquí anulan las del tema original. A diferencia de un tema hijo, no verá la sentencia @import, porque Jetpack fusiona automáticamente los estilos originales con sus personalizaciones.

Cuando agrega estilos personalizados con Jetpack, sus estilos no se almacenan en un archivo; se almacenan en la base de datos de su sitio. Esto puede causar algunas rarezas, por ejemplo, perderá los estilos que ha editado si desactiva Jetpack (recuerde copiar primero sus estilos personalizados del editor y pegarlos en un archivo de texto). Y cada vez que cambias de tema, Jetpack limpia la pizarra y elimina tus estilos personalizados. Sin embargo, Jetpack también incluye un práctico rastreador de revisiones que funciona igual que el sistema de revisión de mensajes (página 338), y "recuerda" las 25 revisiones de temas más recientes. Si comete un gran error de edición, o si cambia de tema y desea recuperar el trabajo anterior, haga clic en la revisión que desee en el cuadro Revisiones CSS.

En general, Jetpack es una herramienta útil para realizar pequeños cambios de tema si ya utiliza el plug-in. Pero si usted es más ambicioso y podría estar editando una o dos plantillas en el futuro, un tema child es la única manera de hacerlo.

Edición de los estilos en su tema

Hay varias razones por las que podría abrir los estilos de su tema y hacer cambios:
Uniformiza tu tema. Puede cambiar el tema para asegurarse de que su sitio no tenga la misma apariencia que otros sitios que comparten ese tema. Después de todo, no hay tantos temas, y si eliges uno bueno, es una apuesta segura que estás siguiendo los pasos de miles de otros webmasters.
Branding. Tal vez necesite su tema para que coincida con los colores corporativos oficiales de su negocio. O tal vez quiera que se parezca más a otro sitio web, administrado por el mismo negocio, que no usa WordPress.
Destacar ciertos elementos de diseño. Al cambiar un tema, puede enfatizar detalles que son importantes para usted. Por ejemplo, puede utilizar un estilo que haga resaltar los comentarios del autor (página 496).

Para realizar cambios en cualquier tema, siga dos pasos. Primero, usted crea un tema hijo (página 462), y luego agrega una o más reglas de estilo al archivo style. css en ese tema. Estas reglas anulan selectivamente el tema original, permitiéndote cambiar lo que no te guste. Algunos de los detalles que usted altera incluyen colores, fuentes, espaciado y bordes. También puede ocultar elementos de diseño que no desea ver.

Sin embargo, hacer estos cambios no es tan fácil como parece. Para crear la regla de estilo correcta, necesita saber un poco más sobre el estándar CSS y los estilos que utiliza su tema. Cada tema es ligeramente diferente, pero la mayoría incluye un estilo gigantesco. archivo css relleno de instrucciones de formateo. Encontrar el detalle exacto que desea anular puede requerir alguna investigación. En la siguiente sección, echará un primer vistazo al tipo de instrucciones que contiene el archivo style. css.

NOTA Si ya está bien versado en el estándar CSS, puede saltar la siguiente sección y continuar con la siguiente,"Cambiando el tema de los Veintiocho", en la página 474.

Echa un vistazo a las reglas de estilo en tu tema

Leer el archivo style. css promedio no es para los débiles de corazón. Como se explicó anteriormente, el tema típico incluye cientos o miles de instrucciones de formato. No es demasiado difícil entender cualquiera de ellos, pero encontrar el que quieres puede ser un reto.

Encuentre su hoja de estilo en WordPress. com

He comprado la actualización de Custom Design para poder añadir mis propios estilos, pero ¿dónde puedo encontrar las reglas de la hoja de estilo original? le lleva al editor CSS donde introduce sus estilos personalizados.

Para crear sus propios estilos, usted necesita entender los estilos que ya están en el trabajo en su sitio. Desafortunadamente, WordPress. com oculta la hoja de estilo de tu tema, incluso después de comprar la actualización de Custom Design. ¿Por qué? En el pasado, cuando esta hoja de estilo era más visible, los usuarios de WordPress. com seguían cometiendo el mismo error: lo copiaban todo en el editor de CSS y luego hacían sus cambios. (Por supuesto que lo sabes mejor, y sólo pondrás estilos cambiados en el editor CSS.)
Entonces, ¿cómo encuentras la hoja de estilo de tu sitio, para que puedas estudiarlo y averiguar qué quieres cambiar? Es un poco difícil, pero aquí está cómo desenterrarlo:

1. Haga clic en AparienciaÆDiseño personalizado. A continuación, haga clic en CSS. Esto le lleva al editor css donde debe introducir sus estilos personalizados.

2. Haga clic en Revisiones CSS, justo encima del editor de mensajes. Esto muestra el editor CSS con su archivo CSS personalizado, como antes, pero ahora con más opciones.

3. En el cuadro Publicar, junto a la opción Modo, haga clic en Editar. Verá dos opciones que controlan cómo WordPress. com usa sus estilos.

4. Mira la opción "Reemplazar tema's CSS", pero no la enciendas. (De hecho, casi nunca hay una buena razón para usar esta configuración.) En su lugar, observe cómo parte de la opción - las palabras "tema's CSS" - es un enlace. Haz clic en ese enlace, y verás la hoja de estilo completa para tu tema, bien formateado para que puedas leerlo en tu navegador.

DECODIFICAR UNA REGLA DE ESTILO BÁSICA

El primer paso para entender los estilos CSS es echar un vistazo a algunas reglas y familiarizarse con su sintaxis. Cada hoja de estilo es una larga lista de reglas, y cada regla sigue el mismo formato, que se ve así:

selector {
propiedad: valor;
propiedad: valor;
}

Esto es lo que cada parte significa:

  • El selector identifica el tipo de contenido que desea formatear. Un navegador busca todos los elementos de una página web que coinciden con ese selector. Hay muchas maneras de escribir un selector, pero una de las más simples (que se muestra a continuación) es identificar los elementos que desea formatear con el nombre del elemento. Por ejemplo, podría escribir un selector que escoja todos los encabezados del nivel 1 de una página.
  • La propiedad identifica el tipo de formato que desea aplicar. Aquí es donde usted elige si desea cambiar los colores, las fuentes, la alineación u otra cosa. Puede tener tantas configuraciones de propiedades como desee en una regla: el ejemplo anterior tiene dos.
  • El valor establece un valor para la propiedad. Por ejemplo, si su propiedad es de color, el valor podría ser azul claro o verde mareado.

Aquí hay una regla de muestra, del tipo que encontrarás en un tema como "Veinte y Doce":
cuerpo[
fondo: #fff;
altura de línea: 1;
}

Esto le dice a un navegador que busque el <cuerpo> elemento de la página web, que envuelve todo el contenido de la página. El navegador aplica dos instrucciones de formateo al elemento. Primero, cambia el color de fondo. (Se disculpará por no saber que #fff es un código de color HTML que significa blanco. En segundo lugar, fija el espaciado entre líneas a un valor normal de 1. (Un valor más alto añadiría más espacio entre cada línea de texto.)

Necesitas varias habilidades para decodificar una regla de estilo como esta. En primer lugar, necesitas conocer los fundamentos de HTML, para que puedas entender lo que es <body> element y lo que hace en una página web. En segundo lugar, usted necesita saber qué estilo de propiedades están disponibles para que usted pueda ajustar. Las reglas de estilo le permiten cambiar el color, tipo de letra, bordes, tamaño, posicionamiento y alineación. Para entender la regla de muestra mostrada arriba, necesita saber que CSS define una propiedad de fondo que le permite cambiar el color detrás de un elemento. En tercer lugar, necesita saber qué valores son apropiados para una propiedad; por ejemplo, debe establecer el color de fondo de una página utilizando un código de color HTML. (En el caso de los colores, usted puede elegir el color que desee y obtener su código de color HTML de un sitio de selección de colores como www.colorpicker.com.)

CONSEJO Puede obtener ayuda con la hoja de estilo de un libro como CSS3: The Missing Manual (O' Reilly). O bien, si todo lo que necesita es una visión general de las propiedades del estilo que puede cambiar y sus valores aceptables, consulte la referencia de la hoja de estilo en http://tinyurl.com/bz5tcp.

MÚLTIPLES REGLAS Y CONSULTAS DE MEDIOS

A veces, una hoja de estilo contiene varias reglas para el mismo elemento. En tal situación, el navegador combina todos los ajustes de la propiedad en una sola superregla. Por ejemplo, puedes romper la regla de la hoja de estilo que acabas de aserrar en dos partes, así:
cuerpo[
fondo: #e6e6e6e6e6;
}
cuerpo[
altura de línea: 1;
}

En este caso, el efecto es el mismo. Las hojas de estilo grandes pueden utilizar este enfoque para romper reglas complejas y organizarlas mejor.
Algunas hojas de estilo incluyen consultas multimedia: uno o más bloques de reglas condicionales que entran en acción cuando se cumplen ciertas condiciones del explorador. Puede reconocer una consulta de medios por el hecho de que comienza con el código @media. Aquí hay un ejemplo:

Pantalla @media y (ancho mínimo: 960px) {)
Los estilos condicionales van aquí.
}

Esto se traduce en la siguiente instrucción:"Si esta página se está mostrando actualmente en una pantalla (no se envía a una impresora u otro dispositivo), y el ancho de la página es de al menos 960 píxeles, entonces ejecute los siguientes estilos". Los temas más antiguos no utilizan consultas de medios, pero los temas móviles se basan en esta técnica para cambiar el diseño de dispositivos diferentes, como los teléfonos inteligentes (página 168).
Todos los temas del año de WordPress, a partir de Twenty Twelve on, utilizan consultas de medios. De hecho, si escarbas en la hoja de estilo de Twenty Twelve, encontrarás no menos de tres reglas de estilo que apuntan al <body> element-two que están siempre en efecto, y una que condicionalmente cambia el color de fondo de blanco a gris:

Pantalla @media y (ancho mínimo: 960px) {)
cuerpo[
color de fondo: #e6e6e6e6e6;
}
}

Si usted se pregunta por qué Veinte Doce utiliza este truco de cambio de color, visite un sitio que utiliza el tema y reducir la ventana de su navegador. En una ventana ancha, la regla condicional aplica un contorno gris alrededor del contenido (que siempre aparece en un fondo blanco). Pero si encoges la ventana, ese borde gris desaparece.

SELECCIONADORES DE CLASE E IDS
Las reglas de la hoja de estilo arriba apuntan al elemento <body>. Este tipo de regla se llama regla de elementos, porque se aplica a un elemento específico en una página.

CSS soporta otros tipos de selectores, y los temas de WordPress los usan en gran medida. Uno de los más populares es el selector de clases, que comienza con un período como éste:
. encabezado de entrada {
margen inferior: 24px;
}

Esta regla formatea cualquier elemento que tenga una clase llamada encabezado de entrada aplicado a ella. Si miras la marcación HTML para uno de tus mensajes, encontrarás un elemento etiquetado con la clase de encabezado de entrada, como este:
<header class="entry-header"> >

<div class="comments-link"> >
<a href="http://magicteahouse.net/grand-new-opening/#respond"
title="Comentario sobre la nueva gran inauguración de Magic Tea House">
<span class="leave-reply">Dejar una respuesta</span>
</a>
</división>
</header>

Aquí, el tema utiliza la clase de entrada-cabecera para cerrar la sección de encabezado de cada mensaje, que incluye el título del mensaje y el enlace de comentarios "Dejar una respuesta".
Es importante tener en cuenta que la palabra "entrada-cabecera" no significa nada especial para WordPress o un navegador. Es simplemente una convención de nombres que utiliza el tema de los Veinte Doce (como muchos otros temas).

NOTA A veces, verá una regla CSS que combina selectores de elementos y selectores de clase. Por lo tanto, el selector h1. entry-title se refiere a cualquier encabezado de nivel 1 que utilice la clase de títulos de entrada.

Hay un selector más similar a los selectores de clase, llamado selector de ID. Empieza con un carácter #. Aquí hay un ejemplo que usa una identificación llamada Colophon:
#colofón {
}
NOTA En Veinte y Doce, un colofón es el pie de página en la parte inferior de cada página de su sitio. Normalmente,
contiene el texto "Orgullosamente alimentado por WordPress."

Aquí está el fragmento de HTML que obtiene su formato de esta regla:
<footer id="colophon" role="contentinfo"> >
<div class="site-info">
<a href="http://wordpress.org/"
title="Plataforma de publicación personal semántica"> >
Orgullosamente impulsado por WordPress</a>
</división>
</pie de página>

La diferencia entre los selectores de clase y los selectores de ID es que un selector de clase puede dar formato a un número de elementos (siempre que todos tengan la misma clase aplicada a ellos), mientras que un selector de ID apunta a un solo elemento HTML (porque dos elementos no pueden tener el mismo ID). Una página de WordPress tendrá sólo un colofón, por lo que tiene sentido utilizar un selector de ID para ello, aunque un selector de clase funcionaría igual de bien.

NOTA Algunas hojas de estilo utilizan selectores ID en gran medida, mientras que otras hacen todo su trabajo con selectores de clase. Es realmente una cuestión de preferencia. Usted simplemente necesita seguir la convención que su tema utiliza.

Aquí es donde las cosas pueden girar un poco la cabeza. Comprender la sintaxis de CSS es una cosa, pero editar los estilos en un tema significa saber qué nombres de clase e ID utiliza ese tema y qué elementos están asociados con esos nombres. Obtendrá algunos consejos en la página 479.

SELECTORES DE COMBINACIÓN
Puede combinar selectores para crear reglas de formato aún más poderosas, siempre y cuando las separe con una coma. WordPress entonces aplica la regla de estilo a cualquier elemento que coincida con cualquiera de los selectores.

He aquí un ejemplo que cambia la alineación de tres elementos HTML -el elemento <caption> utilizado con las figuras y los elementos <th> y <td> usados con las tablas.
pie de foto, th, td {
Alineación de texto: izquierda;
}
También puede crear reglas más complejas que combinen elementos dentro de otros elementos. Esto se llama un selector contextual, y se construye uno combinando dos selectores ordinarios, separados por un espacio. Aquí hay un ejemplo:
. contenido de inicio h1 {

}

This selector matches every <h1> element inside the element with the class name comment-content. It formats the heading of every comment, while ignoring the <h1> elements that appear elsewhere on the page.

A WordPress le encantan los selectores contextuales - de hecho, la mayoría de las reglas de estilo de los Veinticuatro temas usan selectores contextuales. Si no los has visto antes, puede que les lleve algún tiempo descifrarlos. Sólo recuerde que un navegador funciona en los selectores uno a la vez. Empieza por encontrar un elemento que coincida con el primer selector, y luego busca dentro de ese elemento para que coincida con el segundo selector (y si la regla incluye otro selector, el navegador también busca dentro de ese elemento). Aquí hay otro ejemplo para practicar tus habilidades de decodificación CSS:
. entrada-cabecera. entrada-título {
tamaño de letra: 20px;
altura de línea: 1.2;
}
¿Lo tienes? Este selector busca un elemento con el nombre de la clase. entry-title dentro de un elemento con el nombre de la clase. entry-header. El resultado final es una regla que apunta al título en la cabecera del mensaje. Los creadores del tema de los Veinte y Doce podrían haber escrito una regla simplificada que se aplica a la clase de títulos de entrada, sin importar dónde aparezca, pero decidieron ser más específicos.
A veces hay buenas razones para ser más específico y escribir selectores contextuales. Por ejemplo, los creadores de Twenty Twelve podrían querer mostrar el título del post en diferentes lugares, sin usar el mismo formato. En otros casos, los diseñadores temáticos utilizan un selector contextual para indicar la relación de clases y la estructura del sitio. (Por ejemplo, la regla. entry-header. entry-title le indica que este tema pone los títulos de entrada dentro de un encabezado de entrada. Para ti, no debería importarte. En la mayoría de los casos, cuando desee modificar el CSS del tema, encontrará la regla de estilo que controla el detalle que desea cambiar y copiará el selector exactamente.

Píxeles y rems: Dos maneras de medir lo mismo
Las reglas de la hoja de estilo que ves en este capítulo están ligeramente simplificadas de las versiones que encontrarás en el tema de los Veinte y Doce. Curiosamente, Veinte y Doce fija las dimensiones dos veces, usando dos unidades de medida diferentes. Primero, usa píxeles y luego establece la misma cantidad de espacio de margen usando una curiosa unidad llamada rems:
tamaño de letra: 20px;
tamaño de letra: 1.25rem;

Los navegadores que entienden rems prestan atención a la segunda línea. Los navegadores que no lo hacen (versiones antiguas de Internet Explorer) usan la primera línea. De cualquier manera, el resultado es equivalente y el elemento se ve igual en la página.
Por supuesto, esta práctica plantea dos preguntas claras: ¿Cuál es la diferencia entre un píxel y un rem, y por qué preferirías uno antes que el otro? La respuesta corta es que se trata de una rareza histórica alimentada por los comportamientos del pasado de los navegadores. Hoy en día, la elección entre píxeles y rems es realmente una cuestión de preferencia personal. Pero si quieres saber los detalles, sigue leyendo.

La diferencia más obvia entre las dos unidades de medida es que la escala es diferente. Un solo rem suma hasta 14 píxeles, que es el tamaño del tipo de texto normal. Así que si fijas un ancho de 300 píxeles, usarías 21.43 rems para coincidir. Más allá de eso, la situación se vuelve turbia. En el pasado reciente, los rems eran especiales porque eran una unidad de medida relativa. Las páginas web que las utilizan pueden adaptarse a la configuración del tamaño de texto de un navegador, satisfaciendo a las personas con discapacidad visual y encajando en las pantallas pequeñas de los dispositivos móviles. En comparación, los píxeles eran malos, porque atrapaban páginas en diseños fijos que no podían adaptarse a diferentes situaciones. Hoy en día, estos problemas están resueltos, y los navegadores pueden escalar páginas que usan tamaños de píxel de la misma manera que escalan páginas que usan rems. De hecho, los temas del año que vinieron después de Veinte y Doce, como Veinticuatro, han vuelto a usar píxeles solamente.

Cambiando el tema de los Veinte y Doce

El tema de los Veinte Doce está lleno de estilos, y usted puede anular cualquiera de ellos. Por ejemplo, digamos que usted decide que no desea que la barra de menús estándar aparezca en su sitio. El menú no es un widget, sino que forma parte del tema Twenty Twelve. Pero aquí es donde el tema de su hijo/a y el conocimiento de CSS valen la pena, porque usted puede ocultar el menú usando la regla de estilo correcta.
Para ello, elija el editor Appearance? para empezar a editar el archivo style. css de su hijo.
tema (Figura 13-8). Luego agregue esta regla:
. navegación principal {
display: ninguno;
}

Esto funciona porque la clase. main-navigation está conectada a un elemento <nav> que contiene el menú de su sitio. La pantalla: ninguna instrucción indica a los navegadores que colapsen este elemento, y su contenido, en la nada.

NOTA Cuando agrega una regla de estilo a un tema hijo, anula cualquier regla conflictiva en el tema padre, pero permite configuraciones de estilo que no entran en conflicto. Por ejemplo, si cambia el color del título de su mensaje en el tema hijo, eso no afectará a la fuente que el tema padre aplica al título.

edicion-temas08.jpg

Si se siente cómodo con CSS (o si está utilizando uno de los recursos de CSS mencionados en la página 457), no tendrá problemas para comprender la propiedad de visualización. Sin embargo, es posible que tenga más problemas para encontrar el ID y los nombres de clase de los elementos que desea cambiar. La Tabla 13-1 proporciona una hoja de trucos a algunos de los elementos clave en el tema de los Veinte y Doce.

TABLA 13-1 Nombres de Clase en el Tema Veinte y Doce

SELECTOR DE ESTILO CORRESPONDE A…

. site-header La sección de encabezado en la parte superior de cada página; incluye el título del sitio, la descripción del sitio, el menú de navegación y la imagen de encabezado.

. site-header img Sólo la imagen de cabecera. Utilice esta clase para cambiar el tamaño o la posición del encabezado.

. site-title Título del sitio El título del sitio en el encabezado (por ejemplo,"Casa de té mágico").

. site-description The byline que aparece bajo el título del sitio en el encabezado (por ejemplo,"Tea Emporium and Small Concert Venue").

. site Todo el contenido de la página, incluyendo el encabezado y pie de página. El estilo para esta clase establece el ancho máximo del diseño del sitio (actualmente, es decir, 960 píxeles).

. widget-area La barra lateral derecha que contiene todos los widgets. El estilo para esta clase asigna el 26 por ciento de la anchura disponible a la barra lateral, y el área de contenido obtiene el espacio restante.

. front-widgets La barra lateral inferior de la página principal, cuando utilice la plantilla Front Page (página 235).

. widget Cualquier widget en un área de widgets.

. widget-title El título opcional que aparece sobre un widget.

. nav-menu El menú de navegación en la parte superior de cada página.

. navegación menús Una entrada individual en el menú de navegación.

. colophon El área de pie de página en cada página, comenzando con la línea horizontal sólida que separa el pie de página del área de contenido principal.

. entrada-título Título del mensaje El título de cualquier mensaje. Los títulos de los mensajes aparecen en varios lugares (incluyendo la página principal, la página de un solo mensaje y la página de búsqueda). Probablemente no quiera formatear los títulos de la misma manera, así que necesita combinar un nombre de clase con otro selector, como se muestra en los tres ejemplos siguientes.

. blog. entry-title Título Título de cualquier entrada en la lista principal de entradas.

. single. entry-title Título del mensaje El título de cualquier mensaje en una sola página.

. template-front-page. entry-title Título de la entrada: El título de cualquier publicación en una página de escaparate.

. entry-content El contenido del mensaje. Al igual que con la clase de título de entrada, esto se aplica al contenido del mensaje independientemente de dónde aparezca, a menos que combine este selector con otro.

. entry-meta La información sobre el mensaje, que aparece ante él (por ejemplo,"Publicado el 14 de enero de 2014" y después ("Esta entrada fue publicada en Noticias por Katya Greenview el 16 de marzo de 2014.")

. comments-area El área de comentarios después de una entrada.
. comment-meta La línea de comentarista para un comentario, como "Salah el 26 de abril de 2014 a las 11:00 pm dijo:"
. beginning-content El texto del comentario, después de la línea de texto.
. commentlist li. bypostauthor Comentario suyo (el autor de la entrada).
Un comentario dejado por alguien que no seas tú.
. logged-in Una clase agregada si el visitante actual ha iniciado sesión como usuario del sitio web (página 370). Por ejemplo, puede utilizar el selector. logged-in body para cambiar el formato del <body> element para las personas que conoce.

Aunque la Tabla 13-1 está adaptada al tema de los Veinte Doce, muchos otros temas de WordPress siguen una estructura similar. Los temas estándar del año (tales como Veintitrés y Veinticuatro Catorce) son particularmente consistentes. Y WordPress en sí mismo es responsable de agregar nombres de clase como. blog,. single y. logueado al elemento <body> para marcar detalles clave sobre el estado actual de una página. Sin embargo, otros temas son libres de cambiar muchos de estos detalles de manera sutil y enloquecedora. Para la mayoría de los nombres de clase, no hay garantías, por lo que cada tarea de personalización de temas debe comenzar con un proceso de exploración.

Una vez que obtenga el nombre de clase o ID correcto, puede seleccionar el ingrediente visual exacto que desea modificar. Por ejemplo, para cambiar la fuente, el color y el tamaño del texto de un mensaje de blog en una página de un solo mensaje, puede agregar una regla de estilo como esta:

. contenido de entrada {
font-family:"Times New Roman";
color: rojo;
tamaño de letra: 21px;
}
Escríbalo en el editor (editor (Appearance? Editor), presione Update File, y refresque el sitio web para ver el cambio (Figura 13-9).

edicion-temas09.jpg

Es una receta simple: Encuentra el nombre de la clase o ID del elemento que quieres cambiar, añade algunas propiedades de estilo y tu página se renueva instantáneamente.

Aquí hay otro ejemplo que hace sus comentarios ridículamente obvios, con un fondo amarillo, texto en negrita y un borde gris:
. lista final li. bypostauthor {
Color de fondo: Amarillo claro;
font-weight: negrita;
borde: 1px gris sólido;
}

En este caso, no basta con utilizar el selector. bypostauthor por su cuenta. Esto se debe a que el archivo style. css del tema original Twenty Twelve utiliza una versión más específica de. bypostauthor. CSS no permitirá que un selector más general (como. bypost author) invalide uno más específico (como. commtlist li. bypostauthor) si sus propiedades entran en conflicto.Por esa razón, usted necesita usar el selector más largo. commentlist li. bypostauthor en su tema hijo si desea que el tema aplique su nueva regla.

Rompiendo los estilos en un tema

La mitad de la batalla en la edición de estilo. css es averiguar cómo escribir su selector. A menudo, no sabrá el nombre de clase o ID del elemento de la página que desea cambiar, por lo que necesita hacer un poco de trabajo de detective.

El mejor punto de partida es escudriñar el HTML que WordPress crea para su página. Puede hacerlo en cualquier navegador visitando la página, haciendo clic con el botón derecho del ratón en ella y eligiendo un comando con un nombre como "Ver fuente". Esto le muestra el marcado HTML completo y necesita buscar el contenido que desea cambiar. Para empezar, pulsa Ctrl+F (Command+F en Macs) y escribe un poco del texto que está cerca de la parte de la página que quieres cambiar. Por ejemplo, para cambiar la sección de comentarios, puede buscar "Dejar una respuesta" para saltar al encabezado que inicia la sección. Muchos navegadores hacen que este proceso sea más fácil con una función para buscar en el HTML en una parte específica de una página (Figura 13-10).

Una vez que encuentras el lugar adecuado, la verdadera caza comienza. Observe los elementos justo antes de su contenido, y compruebe los atributos de clase e id para ver los nombres que reconoce, o que parecen obvios. Preste especial atención al elemento <div>, que las páginas HTML utilizan para agrupar bloques de contenido, como barras laterales, mensajes, menús, encabezados y pies de página. A menudo encontrará un <div> anidado dentro de otro, lo que le permite al tema aplicar un tapiz en capas de ajustes de estilo (que es ideal para la flexibilidad, pero no tan bueno cuando está tratando de entender exactamente qué regla es responsable de un detalle de formato específico).

edicion-temas10.jpg

TIP WordPress. com tiene algunos videos útiles que muestran cómo identificar elementos individuales en una página web, usando diferentes navegadores web. Puede ver estas microperspectivas en http://tinyurl.com/css-inspection. Una vez que tenga un nombre de clase o ID potencial, es hora de experimentar. Abra el editor de temas y añada una nueva regla de estilo que se dirija a la sección identificada. Haz algo obvio primero, como cambiar el color de fondo con la propiedad background color. De esa manera, usted puede comprobar su sitio y determinar inmediatamente si encontró el elemento adecuado.

Uso de fuentes extravagantes

Una de las razones más comunes para editar los estilos en una plantilla es cambiar la fuente de un elemento. De hecho, a menudo es el caso que todo lo que necesitas hacer para convertir un tema popular en algo único tuyo es cambiar algunas de las fuentes tipográficas.

Originalmente, las páginas HTML se limitaban a un conjunto de fuentes seguras para la Web. Este es el tipo de caras que todo surfista web ha visto, incluyendo a los famosos como Times New Roman, Arial y Verdana. Pero el diseño web ha dado grandes pasos adelante en los últimos años con una característica CSS llamada fuentes incrustadas. Esencialmente, las fuentes incrustadas le permiten utilizar casi cualquier tipo de letra que desee en sus páginas web; sólo tiene que cargar la fuente en su servidor web en el formato correcto.

La función de fuentes incrustadas tiene algunas peculiaridades. En primer lugar, no funciona con navegadores antiguos, por lo que debe asegurarse de que sus páginas se vean respetables incluso si el navegador de su visitante no puede cargar las fuentes incrustadas. En segundo lugar, aunque todos los navegadores modernos admiten fuentes incrustadas, no todos entienden los mismos archivos de fuente. Por esa razón, los diseñadores web a menudo tienen que subir varias copias de las fuentes que quieren utilizar, cada una en un formato diferente. Y, en tercer lugar, la regla CSS que escribes para usar fuentes incrustadas es un poco complicada, lo que puede provocar algunos dolores de cabeza innecesarios.

Afortunadamente, puedes evitar todos estos problemas utilizando un servicio de fuentes web como Google Web Fonts. Allí, usted puede elegir de una galería enorme de tipos de letra atractivos. Cuando encuentras la fuente que deseas, Google te escupe la regla de estilo CSS. Lo mejor de todo es que Google aloja los archivos de fuentes en sus potentes servidores web, en todos los formatos necesarios para que no tengas que cargar nada en tu sitio.

SUGERENCIA Si desea aprender todo lo que hay que saber sobre las fuentes web, incluyendo cómo alojarlas en su sitio web, escribir las reglas de CSS usted mismo, y web-ify sus propias fuentes, consulte HTML5: The Missing Manual (O' Reilly), que tiene una sección sobre fuentes incrustadas.

Para utilizar una fuente de Google en un sitio WordPress, siga estos pasos:
1. Vaya a www.google.com/fonts. Google muestra una larga lista de fuentes (Figura 13-11). En el momento de escribir este artículo, había más de 500 tipos de letra entre los que elegir.
2. Cuando veas una fuente que te guste, haz clic en el botón "Pop out" para verla más de cerca. Google abre una página de vista previa de fuentes que muestra la fuente en diferentes tamaños.

edicion-temas11.jpg


3. Si le gusta la fuente, haga clic en el botón "Uso rápido". Google te muestra una página con información sobre cómo usar la fuente. Consiste en un enlace de hoja de estilo (que debe agregar a su página web) y un ejemplo de regla de hoja de estilo que usa la fuente.

TIP Google también te permite elegir tus fuentes favoritas de su sitio y ponerlas en una colección personalizada. Si lo haces, Google te da algunas características añadidas, como la posibilidad de descargar una copia de la fuente para instalar en tu ordenador para imprimir. Google también recuerda las fuentes que guardas en tu colección cuando vuelves al sitio web de fuentes de Google.

4. Desplácese hacia abajo por la página hasta que encuentre el conjunto azul de pestañas con la leyenda "Añada este código a su sitio web" (Figura 13-12). Haga clic en la ficha @importación. Google ha creado una hoja de estilo confeccionada para cada fuente de su sitio. Para utilizar la fuente, es necesario vincular esa hoja de estilo a la página web o importar la hoja de estilo de Google en la hoja de estilo (es decir, el archivo style. css del tema hijo). Con WordPress, el segundo enfoque es más fácil.

edicion-temas12.jpg

5. Copie la línea @import y péguela en su archivo style. css. Póngalo justo después de la línea @import para los veintiocho estilos estándar.

CONSEJO Si utiliza varias fuentes incrustadas, puede agregar más de un comando @importar. Sin embargo, hay un enfoque ligeramente más eficiente: si creas una colección de fuentes, Google te ofrece una única línea de @importación que te permite utilizar todas las fuentes que has elegido.
6. Cree un estilo que utilice la fuente. Una vez que hayas importado la hoja de estilo de Google, puedes usar tu nueva fuente, por nombre, donde quieras. Sólo tiene que configurar la propiedad font-family, como lo haría con una fuente segura para web nor- mal. Pero recuerde añadir un verdadero nombre de fuente segura para la Web después de que sea una copia de seguridad, en caso de que esté tratando con un navegador de la vieja escuela que no puede mostrar las fuentes incrustadas o no puede descargar el archivo de fuente.

Aquí hay un archivo style. css completo que usa esta técnica. Las partes recién añadidas se resaltan en negrita.

/*
Nombre del Tema: Veinte y Doce Reinicio Descripción: Esta es una versión personalizada del Veinte y Doce Tema para la Casa de Té Mágico.

Plantilla: vigésimo doce
*/

@importar url (".. /twentytwelve/style. css");
@importar url (http://fonts.googleapis.com/css?family=Bonbon);
. entrada-cabecera. entrada-título {
font-family:' Bonbon',' Times New Roman';
tamaño de letra: 30px;
}

La Figura 13-13 muestra esta fuente en acción en un mensaje.

edicion-temas13.jpg

Edición del código en su tema

Cuando desea personalizar la apariencia de un tema, el primer lugar donde debe buscar es el archivo style. css. Pero si usted necesita hacer cambios más dramáticos-por ejemplo-amplio, modernizar el diseño, cambiar la información en la lista de publicación, o añadir nuevas áreas de widgets que usted tiene que ir más allá. El siguiente paso es considerar los archivos de plantillas del tema. Un tema típico usa entre 12 y 50 plantillas. Si descifra uno abierto, verá una combinación de marcado HTML y código PHP. El código PHP es el ingrediente mágico que desencadena las acciones específicas de WordPress que extraen su contenido de la base de datos. Antes de que WordPress envíe una página a un visitante, ejecuta todo el código PHP que contiene.

Escribir este código es una tarea que está muy por encima del promedio del propietario del sitio web de WordPress. Pero eso no es un problema, porque no necesitas escribir el código tú mismo, incluso si estás construyendo un tema completamente nuevo. En su lugar, usted toma una plantilla de página ya preparada que contiene todo el código básico y edita ese archivo a su gusto. Aquí hay dos maneras de hacerlo:
Modificar la marca de revisión HTML. Tal vez no necesite cambiar el código del archivo de la plantilla. Es posible que sólo necesite modificar el HTML que lo rodea. Después de todo, es el HTML (en conjunción con la hoja de estilo) lo que determina cómo se ve su contenido y dónde aparece.
Modificar el código PHP. Empieza con una plantilla llena de código de trabajo. A menudo, usted puede modificar cuidadosamente este código, usando la documentación de WordPress, para cambiar la forma en que funciona. Por ejemplo, imagínese que desea que la lista de mensajes en la página principal muestre menos mensajes, incluya sólo títulos o imágenes en lugar de contenido, o muestre mensajes de una categoría específica. Todo esto se puede hacer ajustando el código que ya está en la plantilla de la página de inicio.
Por supuesto, cuanto más meticulosamente quiera editar PHP, más tendrá que aprender. Eventualmente, podrías adquirir las habilidades suficientes para ser un desarrollador de PHP consumado.

Aprendiendo PHP

La sintaxis actual del lenguaje PHP está más allá del alcance de esta web. Si usted quiere desarrollar habilidades de programación ninja, hay un montón de grandes recursos para aprender PHP, si usted tiene un fondo de programación o está empezando. Sin embargo, no se apresure todavía, porque mientras aprende PHP definitivamente le ayudará a personalizar un tema de WordPress, puede que no le ayude tanto como usted espera.
Aprender a personalizar una plantilla de WordPress se trata parcialmente de aprender PHP (porque ayuda a entender los detalles básicos del lenguaje como bucles, lógica condicional y funciones).Aprender a personalizar una plantilla de WordPress se trata parcialmente de aprender PHP (porque ayuda a entender los detalles básicos del lenguaje como bucles, lógica condicional y funciones). Pero se trata sobre todo de aprender a usar las funciones de WordPress en código PHP (vea la Nota en la página 493 para más información sobre las funciones de WordPress). Por esa razón, probablemente obtendrá más valor práctico del estudio de las funciones de WordPress que aprender el idioma entero, a menos que planee algún día escribir páginas web dinámicas por su cuenta.
Para comenzar con las funciones de WordPress, revise la referencia de la función en http://tinyurl.com/func-ref. Para aprender más sobre PHP, comience con los fundamentos absolutos con el tutorial en http://tinyurl.com/ctzya55.

Introducción de los archivos de plantillas

Cada tema utiliza un surtido ligeramente diferente de plantillas. La grapa de WordPress Twenty Twelve utiliza un conjunto bastante típico de unas 30 plantillas. Puede reconocer una plantilla por el hecho de que su nombre de archivo termina en. php. Aunque los archivos de plantillas contienen una mezcla de HTML y PHP, la extensión. php le dice a WordPress que hay código dentro que el motor de WordPress necesita ejecutarse antes de enviar la página final a un navegador.
A pesar de que una plantilla es sólo una mezcla de HTML y PHP, entender dónde encaja en su sitio puede ser un poco difícil. Esto se debe a que cada página de WordPress stitches juntos utiliza varios archivos de plantillas.
Por ejemplo, imagínese que hace clic en un solo mensaje. WordPress tiene una plantilla, llamada single. php, que crea la página sobre la marcha. Sin embargo, single. php necesita la ayuda de un sinnúmero de otras plantillas. Primero, inserta el contenido de la plantilla header. php, que se encuentra en la parte superior de cada página en un sitio WordPress. El archivo header. php se encarga de lo básico, como enlazar con la hoja de estilo, registrar algunos scripts y mostrar la sección de encabezado, con el menú de nivel superior. (Algunos temas agrupan el trabajo de creación de menús en otro archivo de plantilla, pero Veinte y Doce no llega tan lejos).
A continuación, el archivo single. php agrega los enlaces de navegación Anterior y Siguiente al mensaje y, a continuación, llama a otra plantilla para mostrar el mensaje real. Si se trata de un post regular, utiliza content. php, pero el tema Twenty Twelve tiene varias alternativas especializadas para diferentes formatos de post. Por ejemplo, un mensaje "aparte" (página 203) usa la plantilla de contenido-aside. php, un mensaje de "estado" usa contentt-status. php, y así sucesivamente.
Finalmente, la plantilla single. php termina llamando a tres plantillas más a la acción. La plantilla comments. php crea la sección de comentarios, la plantilla sidebar. php agrega los widgets a la derecha y la plantilla footer. php termina la página.
Si va a bizca tratando de seguir este surtido de plantillas, la Figura 13-14 muestra cómo se descompone todo.
A primera vista, este sistema parece un poco loco. ¿Cómo es mejor complicar la vida que dividir el código de una sola página en un puñado de archivos de plantillas que necesitan trabajar juntos? Pero en la moda típica de WordPress, el diseño es realmente bastante bril- liant. Significa que un diseñador de temas puede crear un único archivo de plantilla que gobierne un elemento de sitio repetido (como un encabezado) y usarlo en todas partes, sin tener que preocuparse por duplicar esfuerzos o ser inconsistente.

Cuando edita estilos de tema, su primer reto es encontrar la regla de estilo correcta para cambiar. Cuando edita plantillas, el primer reto es encontrar el archivo de plantillas adecuado para modificar. La Tabla 13-2 puede ayudarle a comenzar. Describe las plantillas fundamentales que casi todos los temas, incluidos los Veinte y Doce, utilizan.

edicion-temas14.jpg

Tenga en cuenta, sin embargo, que los temas suelen añadir plantillas adicionales para crear los formatos de diferentes tipos de mensajes y páginas, y para manejar formatos especiales (por ejemplo, para crear diferentes presentaciones que mueven la barra lateral alrededor). También puede decidir añadir plantillas adicionales (por ejemplo, para cambiar la forma en que su sitio presenta categorías o autores específicos, una técnica que verá en el Capítulo 14).

TABLA 13-2 Plantillas esenciales de WordPress

DESCRIPCIÓN DEL ARCHIVO DE PLANTILLA

index.php Esta es la plantilla principal de un tema, y la única que es absolutamente necesaria. WordPress lo usa si no hay otra plantilla más específica para usar. La mayoría de los temas utilizan index. php para mostrar una lista de mensajes en la página principal.

header.php Muestra el banner que aparece en la parte superior de cada página. A menudo, header. php incluye un menú de navegación.

footer.php Muestra el pie de página que se extiende por la parte inferior de cada página.

sidebar.php Muestra el área del widget de la barra lateral. Veinte y Doce también tiene una más especializada plantilla sidebar-front. php que crea el área de pie de página para las páginas que utilizan la plantilla Front Page.

single. php Muestra un solo mensaje.

page.php Muestra una página estática. Los temas a menudo tienen plantillas de página adicionales que le permiten crear diferentes "sabores" de las páginas (página 233).Por ejemplo, Twenty Twelve agrega una plantilla. php de ancho completo que crea una página que no incluye una barra lateral y una plantilla front-page. php que incluye un área de widgets de dos columnas en el pie de página.

content. php Muestra el contenido de un mensaje o página. Algunos temas crean muchas plantillas de contenido diferentes, para diferentes tipos de mensajes y páginas. Veinte Doce, por ejemplo, tiene ocho plantillas de contenido. Una publicación normal utiliza content. php, una página usa contentt-page. php, y los formatos especiales de publicación (página 202) utilizan una plantilla correspondiente (por ejemplo, aparte de Content Aside. php).

comments.php Muestra la sección de comentarios después de un mensaje o página.

image.php Muestra la página de archivos adjuntos para las imágenes: lo que ve cuando hace clic en una imagen de un mensaje, si ha establecido la configuración Enlace a (página 336) en Página de archivos adjuntos.

archive.php Listas de mensajes cuando navegas por autor, categoría, etiqueta o fecha. O puede utilizar una de las cuatro plantillas más específicas que se muestran a continuación.

category.php Lista mensajes cuando navegas por una categoría.
como su nombre simplificado (página 123).

tag.php Enumera mensajes cuando navegas por etiqueta. También puede crear plantillas que apuntan a etiquetas específicas, como tag-promotion. php.

author.php Listas de mensajes cuando navegas por autor. También puede crear plantillas que se dirijan a autores específicos, como author-grabinksy. php.

search.php Lista los mensajes después de ejecutar una búsqueda. 404. php Muestra un mensaje de error cuando no se puede encontrar el mensaje o la página solicitada.

Ejemplo de edición básica

En este punto, has digerido un poco de la teoría de WordPress. Es hora de capitalizar eso editando un archivo de plantilla.

Empezarás con un ejemplo que parece bastante sencillo. Desea eliminar el mensaje "Proudly powered by WordPress" que aparece en la parte inferior de cada página de su sitio, justo debajo de los widgets de pie de página (Figura 13-15). (No es que te avergüence WordPress. No puedes dejar de notar que ninguno de los otros sitios grandes de WordPress tiene este mensaje pegado en sus páginas. A veces, ser profesional significa ser discreto.)

edicion-temas15.jpg

PASO 1. ENCONTRAR EL ARCHIVO DE PLANTILLA

Comience examinando la lista de plantillas en la Tabla 13-2. En este caso, el archivo footer. php es el candidato obvio. Crea toda la sección de pie de página, widgets y todo, para cada página.

PASO 2. CREAR UNA COPIA DEL ARCHIVO DE PLANTILLA

Una vez más, debe comenzar con un tema child (página 462). Si no lo hace, aún puede personalizar el pie de página, pero los cambios que ha conseguido con tanto esfuerzo se evaporarán en el momento en que instale una actualización de tema.

Aquí es donde las cosas se ponen un poco más incómodas. Como usted sabe, las plantillas de WordPress son realmente una colección de muchos archivos de plantillas. Para cambiar una plantilla, debe calcular los cambios que desea hacer en sus páginas y, a continuación, buscar el archivo de plantilla responsable de esa parte de la página (single. php, comment. php, etc.). A continuación, agregue una nueva versión de ese archivo de plantilla al tema hijo. Esa nueva plantilla sustituirá a la del tema padre.
Para ello, copie el archivo de plantilla que desee editar del tema padre al tema hijo y, a continuación, realice los cambios. En este ejemplo, eso significa que usted necesita copiar el archivo footer. php en la carpeta de los veinte y doce y pegarlo en la carpeta de veinticuatro reinicios.
Desafortunadamente, el tablero de instrumentos no tiene ninguna herramienta que le ayude a copiar una plantilla. La solución más rápida y sencilla es utilizar una herramienta FTP. Primero, copie el archivo (digamos, footer. php) de la carpeta temática principal (veinticuatro) en su computadora. Segundo, copie ese archivo de su computadora a la carpeta del tema hijo (veinticuatro- reiniciar). Trabajo hecho. Ahora puede elegir el Editor Apariencia? y comenzar a modificar la nueva plantilla copiada.
Si no te sientes cómodo haciendo eso, es tiempo de enchufar. Esta vez, la solución es el Orbisius Child Theme Creator (http://tinyurl.com/orb-theme), que crea temas childes y le ayuda a crear y copiar plantillas. Instálelo, actívelo y luego seleccione Appearance? Orbisius Theme Editor. Usted ve una página de dos partes que le permite ver y editar dos temas uno al lado del otro (Figura 13-16).
Orbisius no le permite copiar un archivo de plantilla directamente, pero hace algo casi igual de bueno: le permite crear un nuevo archivo de plantilla en blanco en el tema de su hijo y, a continuación, copiar el contenido de la plantilla de los padres en ese nuevo archivo. Aquí está cómo:
1. En el cuadro Tema #1, escoja el tema de su hijo, si aún no está seleccionado.
2. Debajo del cuadro de edición a la izquierda, haga clic en Nuevo archivo. Unas pocas opciones más se muestran.
3. En el cuadro de texto Nuevo archivo, escriba el nombre exacto de la plantilla que desea crear (como footer. php) y, a continuación, haga clic en el botón Guardar situado debajo. Esto crea un nuevo archivo de plantilla en su tema hijo y lo carga en el cuadro de edición de la izquierda. Sin embargo, aún no hay nada en el expediente.

edicion-temas16.jpg

En el cuadro Tema #2, elija el tema de sus padres. A continuación, en el cuadro Archivo adyacente, seleccione el nombre de la plantilla que desea copiar. En este caso, eso es footer. php. Cuando selecciona un archivo, verá el contenido de la plantilla en el cuadro de edición situado debajo.
5. Copie la marcación de plantilla del archivo de plantilla antiguo (a la derecha) en el nuevo archivo de plantilla (a la izquierda). Para ello, seleccione el texto completo de la marca de revisión en el archivo de plantilla original de la derecha (en este caso, footer. php). Haga clic al principio del archivo y luego presione Ctrl+A (Command+A en un Mac) para seleccionar todo el contenido. A continuación, pulse Ctrl+C (Command+C en un Mac) para copiar el contenido. Por último, haga clic en el cuadro de edición en blanco de la izquierda y, a continuación, pulse Ctrl+V (Command+V en un Mac) para pegarlo.
6. Haga clic en Guardar cambios debajo del cuadro de edición de la izquierda. Ahora, la nueva plantilla del tema hijo tiene el mismo contenido que la plantilla original del tema padre. Este es el mejor punto de partida para sus cambios.
A partir de este momento, no importa si edita el nuevo archivo de plantilla en la página Orbisius o en la página Temas de edición (que abre seleccionando Editor de apariencia?

NOTA La versión del tema hijo de una plantilla anula completamente la copia del tema padre de la plantilla.
En este ejemplo, esto significa que WordPress ignora la versión original del archivo footer. php, que está en el archivo original.
carpeta temática (veinticuatro). Puede consultarlo en cualquier momento para comprobar el código o copiar bits importantes, pero WordPress
ya no ejecutará el código.

PASO 3. EXAMINAR EL ARCHIVO DE PLANTILLA

Footer.php es uno de los archivos de plantillas más simples de WordPress. Pero incluso las plantillas sencillas tienen una buena parte de la placa de calderas para vadear a través.
En esta sección, verás todo el contenido de footer. php. Usted no siempre necesita dar este paso, pero es una buena práctica cuando está empezando y tratando de darle sentido al sistema de plantillas de WordPress.
Si usted ha escrito páginas web antes, probablemente sabe que el código de programación, como JavaScript, necesita ser cuidadosamente separado del HTML en la página. Lo mismo es cierto para PHP, aunque tiene su propia sintaxis especial. Cada vez que aparece un bloque de código PHP, comienza con esto:

<? php
Del mismo modo, la siguiente secuencia de caracteres marca el final de un bloque de código PHP:
?>

Usted puede ver este sistema en funcionamiento al principio de cada archivo de plantilla, donde hay un bloque de PHP que no tiene ningún código real, sólo un comentario largo. El comentario enumera alguna información básica sobre la plantilla. Esto es lo que ves en footer. php:

<? php

La plantilla para visualizar el pie de página.
*
Contiene pie de página y el cierre de la inmersión.
mentos.
*
Paquete WordPress
Subconjunto Veinte_Doce_Paquete
Desde Veinte Doce 1,0.
*/
?>

La siguiente línea es un poco desconcertante de HTML que se parece a esto:

</div><! — #main. wrapper —>

Incluso los veteranos de HTML experimentados estarán un poco desorientados aquí. La etiqueta </div> cierra un <div> elemento. Pero no has visto una etiqueta de apertura <div>, así que este fragmento de código parece un poco extraño.

Tiene más sentido cuando recuerda la forma en que WordPress une una página, como se muestra en la Figura 13-14. El elemento <div> fue abierto, pero ocurrió cuando WordPress procesó un archivo de plantilla anterior (header. php). El comentario HTML en la línea de arriba (<! —#main. wrapper —>) es la manera de WordPress de recordarle que </div> en esa línea es el elemento de cierre para un <div> que tiene el ID principal y el envoltorio class. En otras palabras, es el elemento de cierre del <div> que contiene el contenido principal de la página.

La siguiente línea de HTML es más fácil de interpretar. Identifica el comienzo del contenido del pie de página. Esta sección tiene el colofón de identificación, que puede recordar de la Tabla 13-1.

<footer id="colophon" role="contentinfo"> >

La siguiente línea inicia un nuevo elemento <div> y le da el ID site-info. Los creadores del tema de los Veinte y Doce escogieron ese nombre porque esta es la sección de la página que indica alguna información básica sobre cómo se creó el sitio (en otras palabras,"Orgullosamente impulsado por WordPress").

<div id="site-info">

El siguiente bit es otro bloque de código PHP, pero se comprime en una sola línea:

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

La función do_action () es una característica de WordPress que se encuentra en todos sus archivos de plantillas. Es un mecanismo de notificación-señala cuando algo está a punto de suceder (por ejemplo, que los créditos de la página están a punto de ser mostrados). Los desarrolladores de Hardcore WordPress pueden escribir instrucciones que reaccionen a una de estas notificaciones, pero la función do_action () no es ninguna ayuda en su misión para cambiar el pie de página.

NOTA Una función es un bloque de código de programación almacenado en un lugar distinto a la página en la que aparece. WordPress está lleno de funciones útiles, y do_action () es una de muchas. Para consultar el catálogo completo de funciones y averiguar qué hacen, visite http://tinyurl.com/func-ref.
La sección que aparece después de la función do_action () es la parte de la plantilla de pie de página que ha estado buscando. Es un enlace que muestra el mensaje "Orgullosamente alimentado":
<a href=
"<? php echo esc_url (__ (' http://wordpress.org/',' twentytwelve');? >".
title= "<? php esc_attr_e (" Plataforma de publicación personal semántica "),
Veinte y doce');? >" rel="generador">
<? php printf (__ ("Proudly powered by %s","twentytwelve"),
WordPress ");? >
</a>

El marcado parece un poco complicado, porque hay tres sentencias de código PHP incrustadas dentro del elemento <a>. La primera genera la dirección real del enlace, la segunda genera el título y la tercera genera el texto dentro del elemento <a>. Usted no necesita entender exactamente cómo funcionan estas afirmaciones para darse cuenta de que esta es la parte que desea cambiar. Pero primero, escanee el resto de la plantilla de pie de página para asegurarse de que entiende lo que está pasando.

Es bastante sencillo. Primero, footer. php cierra los elementos <div> y <footer>. Luego se cierra otro <div> que representa la página completa.
</div><! —. site-info —»
</pie de página><! — #colophon —>
</div><! — #page —>

A continuación, la plantilla de pie de página activa la función wp_footer () de WordPress.
<? php wp_footer ();? >

Esto es un poco de infraestructura de WordPress. Muchos plug-ins esperan esta llamada y luego hacen algo importante. Eliminar esta línea puede causar que esos plug-ins se rompan, por lo que es mejor dejarlos dentro, aunque no esté haciendo nada en este momento.

Finalmente, la plantilla cierra los elementos <body> y <html>, demostrando que realmente has llegado al final de la página. WordPress no llamará más plantillas a la acción, ni añadirá más contenido después de este punto.
</cuerpo>
</html>

STEP 4. HACER EL CAMBIO

Ahora usted ha encontrado al culpable, el fragmento de la plantilla de WordPress que desea cambiar. En este ejemplo, es un solo elemento <a>.

Puede borrar el elemento <a> por completo, o puede reemplazarlo con algún texto propio, así:

Copyright 2014 Magic Tea House

El &copy; es una entidad de carácter, un código HTML que inserta un carácter especial - en este caso, un símbolo de copyright.

Si te consideras un poco como un genio de PHP, puedes tener más fantasía en tu pie de página. Por ejemplo, en lugar de atenerse al año en curso para el aviso de copyright, puede pedirle a PHP que lo haga por usted.

Primero, necesita decirle explícitamente a WordPress que necesita la ayuda de PHP. Lo haces añadiendo las secuencias <? php y? > de caracteres. Pondrás tu código dentro.

Copyright <? php[ Su código va aquí.] ? > por Magic Tea House

A continuación, necesita un comando PHP. En este caso, es el comando trusty echo, que significa (en lenguaje PHP)"tomar el resultado de la siguiente declaración, y escupirla en la página".

&copy; Copyright <? php echo? > by Magic Tea House

¿Pero qué es exactamente lo que quieres escupir? Esa es la fecha actual, que se puede obtener con la ayuda de una función integrada en el lenguaje PHP, llamada date (). No es de extrañar que la función date () muestre la fecha actual. Pero al proporcionar la letra mayúscula Y, le indica a la función date () que sólo le interesa obtener el año en curso.

&copy; Copyright <? php fecha de eco (' Y') > por Magic Tea House

Como cada línea de código PHP, indica el final de una sentencia añadiendo un punto y coma al final (;)
Esto completa el ejemplo y lleva a casa un punto claro: incluso las tareas de edición de temas más sencillas requieren un poco de slogging.

CONSEJO Dado que los cambios que necesita hacer en la plantilla footer. php son relativamente pequeños en este ejemplo, es bastante fácil hacer toda la edición en el tablero de instrumentos. Para los cambios más significativos, tal vez desee copiar el archivo de tema a un editor de texto del equipo, trabajar con él allí y luego copiarlo de nuevo a la página Editar temas cuando termine. Y si decides editar un tema en tu computadora, vale la pena considerar un editor de texto que tenga más detalles. Por ejemplo, los usuarios de Windows pueden obtener el programa gratuito Notepad+++ (http://notepad-plus-plus. org), que utiliza texto codificado por colores para distinguir los diferentes ingredientes del código PHP.

Actualización de un tema child

¿Qué sucede cuando actualizo un tema que utiliza plantillas personalizadas?
Las plantillas para niños no funcionan exactamente igual que los estilos childes. Los estilos de niño extienden las reglas de estilo ya establecidas por el tema padre. Incluso si el padre obtiene un nuevo archivo style. css actualizado, los estilos de niño permanecen, y WordPress los aplica encima de los estilos de padre.
Pero las plantillas de página no extienden las plantillas padre, las reemplazan. Tan pronto como agregue footer. php al tema de su hijo, WordPress comienza a ignorar el archivo footer. php en el tema original. Eso significa que si actualiza el tema padre y cambia el archivo original footer. php, nadie se dará cuenta.
Esta es probablemente la forma más segura de manejar las actualizaciones de un tema, porque realmente no hay manera de que WordPress pueda combinar dos versiones de una plantilla. Sin embargo, significa que si planea personalizar todas las plantillas en un tema, probablemente no debería crear un tema child. En su lugar, también puede crear un tema completamente separado de su propio tema.

Profundización en el bucle

Los expertos de WordPress hablan en tonos silenciosos sobre "el bucle", que es el corazón de WordPress. Su trabajo consiste en recuperar el contenido de la base de datos de su sitio web, pieza por pieza, hasta que alcanza el límite de publicación (es decir, la opción "Blog pages show at most" en la sección Configuración? lectura del tablero de instrumentos).
El bucle aparece en muchas plantillas. WordPress lo usa para crear la lista principal de mensajes en la página de inicio (index. php), la lista de resultados después de una búsqueda (search. php), y la lista de artículos que ves cuando navegas por categoría, etiqueta, autor o fecha (category. php, tag. php, author. php, y date. php, o archive. php cuando falta uno de los anteriores). El bucle incluso aparece en la página de exhibición de Twenty Twelve (showcase. php), dos veces primero para agarrar los postes destacados que pone arriba, y otra vez para agarrar los postes recientes que muestra abajo. (Las páginas de presentación se explican en la página 236.)
En el siguiente ejemplo, echará un vistazo al bucle del archivo index. php y cambiará la forma en que funciona añadiendo una nueva función: la capacidad de resaltar mensajes recientes (Figura 13-17).

STEP 1. PREPARAR EL ARCHIVO DE PLANTILLA

Su primera tarea es preparar su plantilla. Puede copiar el archivo index. php en la carpeta de temas de su hijo utilizando un programa FTP, o puede utilizar el plug-in Orbisius Child Theme Creator para copiarlo.

edicion-temas17.jpg

STEP 2. EXAMINAR EL ARCHIVO DE PLANTILLA

El siguiente paso es escarbar a través de index. php para obtener un control sobre lo que está pasando y qué área necesita cambiar. En general, index. php tiene esta estructura:

<? php get_header ();? >

<div id="primario">
<div id="contenido" role="principal">

[El material para exhibir los postes va aquí.]

</div><! — #contenido —>
</div><! — #primaria —>

<? php get_sidebar ();? >
<? php get_footer ();? >

Esto reduce la plantilla a lo esencial. Como puede ver, la plantilla llama a otras plantillas para crear el encabezado, la barra lateral y el pie de página. En medio de esta acción hay dos <div> elementos, y dentro de ellos se encuentra el corazón de la plantilla index. php y el bucle. Esta es la parte en la que te centrarás.

El primer ingrediente aquí, dentro de los <div> elementos, es un bloque de código lógico condicional que prueba una condición, y toma diferentes acciones dependiendo de si esa condición es verdadera o falsa. Esencialmente, la plantilla aquí usa PHP para hacer una pregunta:
¿Hay algún puesto?

Así es como la plantilla estructura la lógica condicional:

<? php si (have_posts ():? >

[ Si hay puestos, terminas aquí.]

<? php else:? >

Si no hay mensajes, esta sección muestra el mensaje "lo siento".

<? php endif;? >

La función have_posts () obtiene la respuesta a la pregunta,"¿Existe algún mensaje?" Si las hay, la condición es verdadera y la primera sección entra en acción. Esa es la parte que te interesa. (Si no hay ningún mensaje, la condición es falsa, y puedes dejar que la plantilla lo maneje de la manera habitual, mostrando un mensaje apologético). Entonces, ¿qué ocurre dentro de la primera sección, que se ejecuta mientras su sitio tenga al menos un mensaje? El código comienza añadiendo un enlace de navegación, si es necesario. Este es el enlace que aparece antes de la lista de mensajes y permite a los visitantes dar un paso adelante a nuevos mensajes. (Si su invitado ya está viendo el mensaje más reciente, este enlace no aparece). A continuación, el código activa el bucle (que se muestra aquí en negrita) y termina insertando otro enlace de navegación, el que permite a los lectores retroceder para ver los mensajes anteriores.

<? php twentytwelve_content_nav (' nav-above');? >

<? php mientras (have_posts (): the_post ();? >
<? php get_template_part (' contenido', get_post_formato ();? >
<? php endwhile;? >

<? php twentytwelve_content_nav (' nav-below');? >

El bucle actual se reduce a sólo tres líneas. Los comandos while y endwhile delimitan el inicio y final del bucle. Mientras tengas postes, el bucle sigue corriendo. Cada vez que se ejecuta, toma un mensaje, usando la función WordPress el_post (), y lo alimenta a la única línea de código dentro. Este código es menos excitante: simplemente agrupa el trabajo de mostrar el mensaje en una de las plantillas de contenido que usted aprendió anteriormente, usando la función get_template_part ().

Aunque el código no parece tan emocionante en este momento, hay mucho que puedes hacer si te cuelgas dentro del bucle, entre las líneas de tiempo y endwhile. Actualmente, sólo hay una sola línea de código, pero puede expandirla para satisfacer sus necesidades. Por ejemplo, antes de que el código llame a get_template_part () para mostrar un mensaje, puede ejecutar algún código extra que haga algo más inteligente, como cambiar el formato del mensaje basado en uno de los detalles del mensaje.Por ejemplo, antes de que el código llame a get_template_part () para mostrar un mensaje, puede ejecutar algún código extra que haga algo más inteligente, como cambiar el formato del mensaje basado en uno de los detalles del mensaje. Algunos ejemplos incluyen hacer que el mensaje parezca diferente según su categoría, autor o fecha de publicación. Esto último es lo que hace este ejemplo.

STEP 3. ADD NEW CODE

El paso final es añadir el código que comprueba la fecha del mensaje y decide si resaltarlo o no. Aquí está, dentro del bucle que viste antes. El nuevo código está en negrita:

<? php mientras (have_posts (): the_post ();? >
<? php
$postdate = get_the_date (' Y-m-d');
Fecha actual =
fecha (' Y-m-d', mktime (0,0,0,0, fecha (' m'), fecha (' d'), fecha (' Y')));

if ($postdate == $currentdate) {
echo' <div class="newpost">';
otros { {
echo' <div>';
}
?>
<? php get_template_part (' contenido', get_post_formato ();? >
</división>
<? php endwhile;? >

Para entender lo que está ocurriendo, usted necesita examinar el código una línea a la vez. En primer lugar, utiliza una función de WordPress llamada get_the_date (), que devuelve la fecha de publicación del mensaje actual.

$postdate = get_the_time (' Y-m-d');

WordPress toma el resultado de get_the_date () y lo pone en una variable (una ranura de almacenamiento en memoria) llamada $postdate. De esta forma, el código puede utilizar la fecha almacenada allí más tarde, cuando la función compara fechas.

NOTA No importa cómo llames a tus variables, siempre y cuando seas consistente. (Por lo tanto, no puede llamar la variable $postdate en un lugar y $date_of_post en otro, porque terminará creando dos variables separadas). Sin embargo, sus nombres de variable deben comenzar con el signo del dólar ($), que tiene el efecto secundario de hacerlos fácilmente reconocibles.

La siguiente línea de código crea una segunda variable, llamada $currentdate. Almacena la fecha actual, tal y como se ha recuperado por la función PHP date (), que usted vio anteriormente (página 494). Sólo ahora la fecha se devuelve en un formato ligeramente diferente, por lo que coincide con el formato de fecha de publicación que WordPress utiliza con los mensajes.

Fecha actual = fecha (' Y-m-d');

El momento del drama es el siguiente. Una sentencia if compara las dos variables (en este caso, las dos fechas) para ver si la fecha actual coincide con la fecha de publicación (en otras palabras, para ver si el mensaje se publicó hoy). Si la respuesta es afirmativa, entonces el código agrega un nuevo <div> elemento, con el nombre de la clase newpost.
if ($postdate == $currentdate) {
echo' <div class="newpost">';
Si la respuesta es no, entonces el código agrega un <div> que no usa ningún nombre de clase.
otros { {
echo' <div>';
}
?>
De cualquier manera, el código se pega al elemento </div> de cierre al final de este bloque de contenido, después de insertar el contenido del post en la página.
<? php get_template_part (' contenido', get_post_formato ();? >
</división>

NOTA Este código puede parecer un poco mágico, porque se basa en una apretada combinación de comandos PHP y funciones de WordPress que usted no ha visto antes. Obviamente, no serías capaz de inventarte este tipo de código por tu cuenta. Sin embargo, podrá tomar este tipo de código de uno de los muchos sitios de recetas de WordPress (página 503), e insertarlo en sus plantillas cuando lo necesite. Y cuanto más lo hagas, más fácil será reconocer el código que quieres cambiar, y más cómodo será ajustar ese código para resolver un problema.

STEP 4. AÑADIR UN NUEVO ESTILO

En este momento, la plantilla revisada no tiene mucho efecto. Todo lo que hace es añadir un <div> elemento alrededor del contenido del post. Sin embargo, este <div> le da una nueva forma de aplicar un estilo personalizado. Para ello, cree una regla de estilo para la clase newpost.

Aquí están las reglas de estilo que crean el efecto mostrado en la Figura 13-17. La primera regla añade el borde, espaciado y color de fondo alrededor del poste. La segunda regla apunta al enlace en el encabezamiento, que tiene el título del mensaje, y le da un texto rojo grande.

. newpost {
acolchado: 8px;
borde: 2px gris oscuro sólido;
radio de borde: 10px;
color de fondo: amarillo claro;
margen inferior: 50px;
}
. newpost h1 a {
tamaño de letra: 2,5em;
color: rojo;
}

Este enfoque de dos partes - usar el código PHP para agregar un estilo, y luego definir el estilo es una técnica común en la personalización de temas. Le da la mayor flexibilidad, porque puede cambiar el formato en cualquier momento, sin editar la plantilla.
y vadeando el PHP otra vez.

Extensión de WordPress con funciones. php
Algunos temas de WordPress contienen un archivo PHP que no es una plantilla, denominado funciones. php. Los diseñadores temáticos experimentados colocan partes importantes de su código aquí, y luego llaman ese código desde sus archivos de plantillas cuando lo necesitan. WordPress gurus también utiliza el archivo functions. php para añadir otras características, como nuevos atajos y widgets, de modo que no necesitan crear un plug-in completo.
Todas estas tareas son operaciones avanzadas, mejor guardadas en WordPress gurus. Sin embargo, incluso las personas sin experiencia en PHP pueden utilizar el archivo functions. php para desbloquear funciones adicionales de WordPress.Normalmente, lo hace copiando unas cuantas líneas de código sobre las que lee en línea (o en un libro) y pegándolas en el archivo functions. php del editor de temas.
Por ejemplo, en el Capítulo 10, usó la función de inserción automática de WordPress para convertir ciertos tipos de direcciones de sitios web en objetos incrustados, como presentaciones de diapositivas de Flickr y vídeos de YouTube. Normalmente, WordPress desactiva esta práctica función en áreas de widgets, como la barra lateral. Pero aquellos en el conocimiento pueden habilitar atajos e incrustaciones en áreas de widgets con sólo un par de líneas en el archivo functions. php. La Figura 13-18 muestra el resultado.
El archivo functions. php funciona un poco diferente a los archivos de plantillas que usted ha aprendido hasta ahora. La peculiaridad clave es que el archivo functions. php del tema hijo amplía el archivo functions. php del tema padre; no lo reemplaza. Por esa razón, no puede simplemente copiar el archivo functions. php del tema padre al tema hijo. Necesita crear un archivo de texto nuevo y vacío en su computadora, cambiar su nombre a functions. php, y luego subir ese nuevo archivo functions. php a la carpeta del tema de su hijo.
Si utiliza el plug-in Orbisius Child Theme Creator, su trabajo es fácil. Siga el proceso descrito en la página 490 para crear un archivo nuevo y en blanco functions. php, pero no copie ningún contenido a ese archivo.

edicion-temas18.jpg

ADVERTENCIA Si accidentalmente copia el archivo functions. php del tema padre al tema hijo, su sitio dejará de funcionar. Esto se debe a que functions. php está lleno de rutinas importantes que Veinte y Doce usa, y tener dos copias de este código es suficiente para volar la mente de WordPress. La única solución (si no tiene en cuenta esta advertencia y coloca el archivo functions. php completo en la carpeta de temas de su hijo) es iniciar sesión en su sitio con un programa FTP y eliminar el archivo. php copiado.

Una vez que agregue el archivo en blanco functions. php a su sitio, puede editarlo en la página Editar tema, como puede hacerlo con cualquier otro archivo de tema. Para habilitar la inserción de widgets, como se muestra en la Figura 13-18, necesita agregar estas líneas:

<? php
add_filter (' widget_text', array ($wp_embed,' run_shortcode'), 8);
add_filter (' widget_text', array ($wp_embed,' autoembed'), 8);
?>

Ahora puedes poner una URL autointroducida en un widget de texto, tal como puedes hacerlo en un post (Figura 13-19).

edicion-temas19.jpg

Este capítulo ofrece un vistazo a los estilos, plantillas y código PHP que sustenta WordPress. Incluso si usted no entiende cómo funciona todo (y la mayoría de las personas no lo entienden), todavía sabe lo suficiente como para empezar a hacer cambios de plantillas. Es posible que necesites experimentación de prueba y error para obtener el resultado que deseas, y es posible que necesites buscar los hacks y trucos de otras personas para ayudarte (Google es tu amigo). Pero mientras no tengas miedo de abrir un archivo de plantilla, mirar dentro y hacer cambios, tienes el potencial de cambiar cualquier cosa.

En el siguiente capítulo, explorarás metódicamente un ejemplo completo de un sitio completo de extremo a extremo. Mientras tanto, vale la pena señalar algunos recursos que puedes usar para desarrollar tus habilidades para el trabajo temático:

  • Recetas de plantillas. Puedes practicar una bolsa de trucos sencillos en http://tinyurl.com/templatetrix Se dividen en trozos cortos y prácticos. Cuanto más pruebes, más cómodo te sentirás navegando por el laberinto enmarañado de plantillas que constituyen un tema.
  • Blogs de profesionales de WordPress. Lorelle van Fossen (http://lorelle.wordpress.com) tiene acres de contenido práctico sobre la personalización de sitios WordPress, incluyendo muchas aventuras en la personalización de temas.
  • Revista Smashing. Si usted está buscando conseguir más serio, la revista Smashing Magazine (http://wp.smashingmagazine.com) tiene artículos hardcore sobre todos los aspectos del desarrollo del sitio de WordPress. A menudo van más allá de las características ordinarias y profundizan en la personalización de temas.
  • Marcos temáticos. Los marcos temáticos amplían el código central de WordPress con nuevas características. El costo es extra complejo, aunque ya no necesitará manipular detalles de bajo nivel y código PHP. Algunos ejemplos populares incluyen Thematic (http://tinyurl.com/themat), que es gratis, y Genesis (http://tinyurl.com/gen-theme), que no lo es.

ARTICULOS.

Edición del archivo de idiomas de un tema con poedit.

Guía para traducir una tema (o plugin) de WordPress: archivos POT, PO y MO
Fecha de publicación: 30.08.14 | por Irena Domingo

En este artículo aprenderás a traducir tu tema de WordPress (o plugins) de dos maneras: utilizando el programa Poedit o utilizando el plugin Codestyling Localization. Una página web de WordPress totalmente localizada y traducida requiere la traducción de los contenidos (utilizando algún plugin de traducción como WPML, Polylang o Multilingual Press), así como la traducción de las cadenas de texto que se encuentran en los archivos PHP.

Poedit and WordPress

ÍNDICE

Introducción

1. Cadenas de texto: archivos .POT, .PO y .MO

1.1. Portable Object Template (POT)
1.2. Portable Object (PO) y Machine Object (MO)

2. Cómo traducir un tema o un plugin de WordPress

2.1. Poedit (software)
2.2. Codestyling Localization (plugin)

3. Temas y plugins de WordPress compatibles con la funcionalidad multilingüe

3.1. Temas
3.2. Plugins

Introducción
Si quieres diseñar una página web de WordPress en dos o más idiomas, hay una distinción muy importante que hay que entender. En un sitio web de WordPress deben traducirse dos tipos de textos, contenidos y cadenas de texto:

Contenidos (entradas, páginas, categorías, taxonomías, etc)
Es la parte más importante. Están ubicados en las tablas de la base de datos de WordPress. La traducción de los contenidos requiere una solución que lea tus entradas y páginas de la base de datos y que permita traducirlas a otros idiomas.

Si quieres saber cómo traducir tus contenidos, puedes leer esta COMPLETA GUÍA. Puedes utilizar plugins gratuitos como qTranslate o Polylang, y plugins de pago como WPML (en una instalación individual de WordPress) o Multilingual Press Pro (en una instalación de WordPress Multisite).

Featured-Image-Article-Multilingual-Wordpress-Site

Cadenas de texto (archivos PHP) en temas y plugins
Los temas y plugins de WordPress incluyen cadenas de texto contenidas en archivos PHP. Cuando veas un código como este: <php _e( ‘Text’, ‘a-text-domain’ ) ?>, en un archivo PHP de un tema o plugin, ello significa que las cadenas de texto que contiene también deberán ser traducidas.

Las cadenas de textos pueden aparecer tanto en el escritorio de WordPress como en el frontend de la web. En este último caso serán visibles para todos los usuarios que visiten tu web.

Tanto WordPress como sus temas, están diseñados de manera nativa en inglés. Ejemplos de cadenas de texto en inglés que aparecen en el frontend:

“Search” (botón de búsqueda)
“Nothing found” (cuando buscas algo y no encuentras nada te aparecerá este texto)
“Read more” (etiqueta que suele aparecer en el resumen de un artículo de tu blog)
“Leave a comment” (texto para animar a los usuarios a dejar un comentario)
“Comments are closed” (cuando se cierran los comentarios)
“Older comments” (comentarios más antiguos)
Ejemplos de cadenas de texto que aparecen en el panel de administración de WordPress (backend):

“Top primary menu” (textos en la zona de widgets)
“Ready to publish your first post?” (texto en el escritorio de inicio de WordPress)
“Number of posts to show:” (otro texto en el escritorio de WordPress)
“Twenty Fourteen requires at least WordPress version 3.6. You are running version %s. Please upgrade and try again” (textos del tema Twenty Fourteen).
Herramientas como Poedit (que puedes utilizar de manera gratuita) o plugins como Codestyling Localization, te permiten traducir estas cadenas de texto de tu WordPress. También, herramientas de pago como WPML, te permiten traducir estas cadenas.

En esta guía te muestro cómo puedes traducir las cadenas de texto: utilizando Poedit o el plugin Codestyling Localization Plugin. Pero antes de todo es importante saber qué son los archivos .POT, .PO y .MO.

1. Cadenas de texto: archivos .POT, .PO y .MO
Los temas de WordPress están localizados utilizando el software GNU gettext. Es la manera habitual utilizada por el núcleo de WordPress y por cada uno de los temas o plugins. Sin embargo, los desarrolladores no siempre diseñan temas ya preparados para ser traducidos por lo que es importante, antes de comprar un tema o un plugin, asegurarse de que pueden traducirse (es posible incluso que te encuentres con la agradable sorpresa de que ya vengan traducidos a otros idiomas). Pero esto no siempre es así

Muchos temas de WordPress ya vienen traducidos a otros idiomas o, al menos, están listos para ser traducidos de manera sencilla. Para ello, estos temas o plugins, han de contener los archivos apropiados: .POT, .PO y .MO files.

1.1. Portable Object Template (POT)
El archivo de traducción principal de un tema (o plugin) tiene extensión .POT. Básicamente, el archivo .POT es una lista de todos los textos utilizados en los archivos PHP del tema, habitualmente en inglés:

Pot file example

Los desarrolladores utilizan herramientas (como gettext) que lo que hacen es escanear los archivos PHP y generar un archivo .POT , el cual contendrá una lista de todos los textos originales que necesitarán ser traducidos.

El archivo .POT es puesto a tu disposición por el desarrollador del tema o plugin y es el punto de partida para crear traducciones a otros idiomas. WordPress no utiliza estos archivos.

El archivo .POT puedes encontrarlo en la carpeta de idiomas de tu tema (o plugin). Ejemplos:

Tema Responsive WordPress: wp-content/themes/responsive/languages/responsive.pot
Plugin Contact Form 7: wp-content/plugins/contact-form-7/languages/contact-form-7.pot
En algunas ocasiones la carpeta de idiomas se denomina lang (no language) y frecuentemente los archivos .POT vienen también con archivos .PO y .MO, así como con un archivo README.TXT con instrucciones para los traductores:

Responsive theme pot files

Contact form 7 pot file

1.2. Portable Object (PO) y Machine Object (MO)
El archivo .PO contiene los textos originales así como las traducciones, en dos columnas. Se trata de una traducción que alguien ha empezado (realizada por el autor, un traductor profesional o un usuario del tema) y que quizás ya haya terminado. WordPress no utiliza los archivos .PO.

Es muy posible que tu tema o plugin ya haya sido traducido a otros idiomas. Por ejemplo, si ves un archivo llamado fr_FR, es porque tu tema ya ha sido traducido al francés. Puedes comprobar en este enlace cada uno de los códigos de idiomas de cada país.

Responsive theme Po file

El archivo .MO incluye exactamente los mismos contenidos que el archivo PO correspondiente. Los dos archivos difieren únicamente en su formato. Mientras que el archivo .PO es de fácil lectura para las personas, los archivos .MO son fáciles de leer para los ordenadores. WordPress obtiene las traducciones de los archivos .MO.

El archivo .MO es automáticamente creado por Poedit cuando guardas un archivo .PO. Lo que debes hacer con estos archivos es subirlos al servidor cada vez que crees o actualices un archivo .PO.

2. Cómo traducir un tema o plugin de WordPress

2.1. Poedit (software)
Poedit es un software (disponible tanto para Windows como para Mac y Linux) que te permite traducir un tema o plugin de WordPress. Está disponible de manera gratuita en poedit.net. La versión gratuita viene con una memoria de traducción que recuerda tus traducciones anteriores y las utiliza para hacerte sugerencias sobre textos similares.

Descargar Poedit

También tiene una versión Pro con funcionalidades adicionales (como el recuento de palabras) y soporte técnico para WordPress. Cuesta 19.99 dólares.

Poedit Website

Los pasos para traducir un tema o plugin con Poedit son los siguientes:

1. Abre Poedit y selecciona Archivo > Nuevo Catálogo desde archivo POT / PO

2. Selecciona el archivo .POT o .PO de tu tema o plugin que desees traducir (puedes encontrar los archivos en la carpeta wp-content/themes/your-theme/language/)

3. Una ventana emergente se abrirá preguntándote por el idioma de la traducción que vas a realizar. Selecciona el idioma:

Poedit Select Language

4. Pulsa OK y Poedit le dará nombre automáticamente a tu archivo. Si seleccionas español (España): es_ES.po

5. Guarda el archivo en tu ordenador

6. Ahora ya puedes empezar la traducción de tu tema o plugin. Todo el texto que debe ser traducido aparecerá en la columna de la izquierda y las traducciones ya completadas se mostrarán en la parte derecha. Los campos de la parte de abajo te mostrarán el texto fuente, tu traducción y notas para los traductores. Traducir es un proceso muy sencillo: selecciona una palabra o frase, introduce tu traducción y haz clic en “Validar”.

Translating with Poedit

NOTA IMPORTANTE:

Has de respetar todos los caracteres especiales del texto original cuando realices la traducción (mira la captura de pantalla de arriba)
No es obligatorio traducir todas las cadenas de texto. Quizás no quieras emplear tu tiempo traduciendo cadenas de texto que se encuentran en el panel de administración de tu tema o plugin de WordPress y que solo son visibles para ti, no para los usuarios.
7. Cuando finalices la traducción, guarda el archivo. Poedit automáticamente creará dos archivos, un .PO y un .MO. Tendrás que subir ambos archivos a la carpeta de idiomas de tu tema (o, en su caso, plugin).

2.2. Codestyling Localization (plugin)
Existe otra opción para realizar la traducción de los archivos .PO y .MO, directamente desde el propio panel de administración de WordPress sin la necesidad de utilizar Poedit.

Codestyling Localization Plugin

Codestyling Localization Plugin RateCodestyling Localization es un plugin que te permite escanear los archivos .PO para su traducción. Una vez hayas instalado y activado este plugin, simplemente deberás dirigirte al panel de administración del mismo y seleccionar Herramientas > Localización, para poder traducir el tema o plugin directamente el propio escritorio de WordPress siguiendo las instrucciones que proporciona el plugin.

En todo caso, yo siempre recomiendo utilizar Poedit. Es un poco más laborioso pero te evitarás tener que instalar un nuevo plugin en tu WordPress.

Enlaces y artículos

Plugin de traducción Loco Translate
Programa para instalar de traducción: Poedit
Herramienta para comprobar tema: https://www.webpagetest.org/