» » Cómo Crear Un Tema De WordPress Responsive Usando HTML5

Cómo Crear Un Tema De WordPress Responsive Usando HTML5

Cómo Crear Un Tema De WordPress Responsive Usando HTML5

Introducción

Los temas de WordPress son un conjunto de archivos que definen el diseño de su sitio web. Un tema incluye HTML, PHP y CSS, y a menudo también usa javascript y jQuery.

En este tutorial de WordPress, aprenderá a crear un tema de WordPress utilizando HTML5, CSS3 y principios de diseño Responsive. También aprenderá a separar varias partes de su tema en 'plantillas'.

Los temas, como los complementos, están separados del código principal de WordPress. Los temas permiten que su sitio web tenga un diseño coherente para cada página y publicación, y se puede modificar rápidamente para cambiar el aspecto de todo su sitio web. Para mostrar información de WordPress o el contenido de una publicación, debe usar etiquetas de plantilla proporcionadas por WordPress, que se explicarán en el tutorial.

Después de completar este tutorial y crear un nuevo tema de WordPress, es una gran idea seguir el tutorial sobre cómo crear un tema infantil de WordPress para ampliar lo que ha aprendido aquí. El tema que cree en este tutorial le dará la base perfecta para usar en el tutorial de tema infantil.

Lo que necesitarás

Para completar los pasos en este Tutoriales En Linea de desarrollo de temas de WordPress, necesitará un editor de texto como Notepad ++, NetBeans o algunos otros que se encontraras acontinuacion, "Clic Aquí". También necesitará acceso FTP a su cuenta de hosting y una instalación de WordPress que funcione.

También se recomienda descargar la hoja de referencia de CSS y abrirla, ya que en este tutorial estará editando el archivo de WordPress style.css .

Tabla de contenido



Qué es HTML5 y por qué debería usarlo

HTML5 es la última versión del lenguaje de marcado web HTML y ofrece un gran conjunto de características modernas que hacen que sea más fácil mostrar su contenido constantemente en cualquier computadora, computadora portátil, tableta o teléfono móvil.

El mayor cambio es que hay disponible un nuevo conjunto de elementos semánticos HTML. Por ejemplo, el pie de página de cualquier página HTML ahora se puede definir utilizando el elemento <footer> </footer> , y esto le dice al navegador web que el contenido que contiene es parte del pie de página. En versiones anteriores de HTML, el contenido del pie de página se crearía utilizando elementos genéricos como <div> </div>.

Un documento HTML5 básico se verá así:

¿Qué es el diseño Sensible(Responsive Design)?

El diseño sensible significa que su sitio web se muestra automáticamente en el mejor formato para el visitante en función del tamaño de su pantalla. El diseño de la página literalmente 'responde' al espacio disponible en la pantalla del visitante. El contenido se coloca perfectamente para que no se corte nada, no se desborde nada de la pantalla y su sitio web se vea lo más limpio posible. 

Cómo Crear Un Tema De WordPress Responsive Usando HTML5

Debería pensar en el diseño de su sitio web como una serie de cuadrículas y dar al contenido un porcentaje del ancho de la cuadrícula. Por ejemplo, un div puede tomar el 50% del espacio disponible, en lugar de 800 píxeles(px) de ancho. Un ancho de página completo div toma el 100% del espacio disponible, por lo que si quiere cuatro divs dentro de él en una línea, cada uno obtiene el 25% del espacio.

Para las imágenes, puede configurarlas para que tengan un ancho máximo(maximum width) del 100% de su tamaño real y establecer la altura en auto. Cuando el contenedor de la imagen se reduce, la imagen se reduce automáticamente en ancho y alto.

Para las imágenes, con ancho(width): 100% en lugar de ancho máximo(max-width): 100% hará que una imagen ocupe el 100% del espacio disponible en lugar de detenerse en su ancho real en píxeles. Si la imagen tiene 200 píxeles(px) de ancho pero está dentro de un div que ocupa el 100% de la pantalla, el ancho máximo(max-width) significa que la imagen nunca es mayor de 200 píxeles(px) de ancho.

Para que un tema de WordPress sea totalmente sensible, también puede usar una característica de CSS3 llamada consultas de medios. En consultas de medios, puede definir de forma opcional un tipo de medio para que afecte (pantalla, impresión, etc.) al menos una función multimedia (max-width, orientation-ancho máximo, orientación, etc.). Las características de los medios se pueden encadenar utilizando palabras claves.

  • En el primer ejemplo, el CSS se aplicará a cualquier pantalla (monitor, teléfono, etc.) que tenga un ancho visible (el área dentro del navegador, no toda la ventana) entre 400px y 800px.
  • El segundo ejemplo se aplicará a cualquier tipo de medio que lo visualice.
  • Otro tipo de medio es "imprimir", lo que significa que el CSS solo se aplica si el usuario está mirando una vista previa de impresión de su página.
En el sitio web de Mozilla Developer Network, está disponible una lista completa de los tipos de medios y las funciones de los medios .

En su hoja de estilos CSS, usted define reglas que dictan cuándo se cambia el contenido, qué contenido se cambia y cómo se cambia ese contenido. Puede cambiar cualquier atributo CSS de esta manera, como el ancho de cualquier cuadro de texto o el color de fondo de un div. Algunos ejemplos de reglas de funciones de medios que dictan cuándo se aplica la regla:

  • max-width : el ancho máximo del área visible del navegador, más ancho que este y la regla no se aplica
  • min-width : el ancho mínimo para el área visible, más pequeño que este y la regla no se aplica
  • orientaTión : si la pantalla está en modo retrato o paisaje
 
Un ejemplo común es cuando tiene dos cuadros de texto uno al lado del otro que ocupan el 50% de la pantalla. A medida que la ventana del navegador se hace más pequeña, los cuadros se ajustan automáticamente para ocupar el 50% de la ventana en lugar de desaparecer por un lado. Si la ventana del navegador es demasiado pequeña para mostrar correctamente todo el texto en esos cuadros, puede indicarles que ocupen el 100% del tamaño de la ventana y que se muestren uno encima del otro. También puede ocultar el contenido por completo si es más apropiado.

Paso 1 - Almacenando su tema y sus archivos

Incluso cambios menores en un tema pueden causar errores y hacer que su sitio web no se pueda usar. Un problema común es que después de realizar cambios en el código, intenta cargar su sitio web y obtener una pantalla en blanco conocida como la pantalla blanca de la muerte. Depurar el error que causó la pantalla en blanco puede ser difícil.

Para evitar cualquier interrupción en su sitio web, es importante probar todos los cambios en una versión fuera de línea es decir en tu ordenador. Una vez que se hayan completado los cambios, puede cargar la versión de trabajo en su sitio web en vivo. Puede aprender cómo crear un servidor local desarrollado de WordPress en Windows aquí, aquí puede encontrar un tutorial sobre cómo ejecutar WordPress en XAMPP (En cualquier sistema operativo).

¡Comencemos el Tutorial En Linea y aprendamos cómo crear un tema de WordPress!

Temas de WordPress se almacenan en su propia carpeta en el wp-content/themes/.

En la carpeta wp-content/themes/, cree una nueva carpeta llamada my-theme. La carpeta que creó necesita un nombre único, descriptivo y corto para identificarla fácilmente.

Nota: Los nombres de las carpetas de temas no deben contener números o espacios. Su tema no debe tener el mismo nombre de carpeta que otro tema. Si planeas compartir tu tema, debes verificar que otro tema con ese nombre no se haya subido al directorio de temas de WordPress.org.

Los temas de WordPress se pueden crear con solo dos archivos, index.php y style.css, y WordPress los usará para mostrar cada página y publicar en su sitio.

De forma realista, querrá que las publicaciones, páginas y otras secciones de su sitio web tengan su propio diseño. Cada sección de su sitio web tiene su propio archivo para contener HTML y PHP que solo se aplica a esa sección; cada archivo se denomina 'plantilla'.

Si usa tipos de publicaciones personalizadas, puede crear plantillas que solo se apliquen a las publicaciones de ese tipo. Si desea que las publicaciones de una categoría específica se diseñen de forma diferente, puede hacerlo utilizando las sentencias if ... then ... dentro del ciclo.

Cada archivo de plantilla debe usar el nombre correcto tal como se define en la documentación de WordPress.

Algunos de los archivos de plantilla más allá de index.php:

  • header.php : contiene cualquier HTML que se encuentra en la parte superior de sus páginas, comenzando desde <!DOCTYPE html>
  • single.php : se usa al mostrar una publicación única de tu blog
  • page.php : se usa cuando se muestra una sola página de tu blog
  • comments.php : define cómo se muestran los comentarios y el cuadro de texto de comentario
  • footer.php : contiene cualquier código HTML que se encuentra en la parte inferior de sus páginas, incluido </html>
 
Para obtener una lista completa de plantillas, visite el manual de desarrollo de temas de WordPress.

Ahora que tiene una carpeta para almacenar el tema, debe crear algunos archivos de plantilla básicos.

Paso 2: crear los archivos de plantillas y la hoja de estilos CSS

En la  carpeta my-theme crea los siguientes archivos PHP:

  • header.php
  • index.php
  • footer.php
  • functions.php
  • sidebar.php
  • single.php
  • page.php

Además de los archivos PHP, cree un nuevo archivo CSS llamado style.css (la hoja de estilo principal debe llamarse style.css).

Cómo Crear Un Tema De WordPress Responsive Usando HTML5

El primer paso después de que se hayan creado todos los archivos es agregar información al principio de style.css que WordPress leerá y mostrará en el panel de control de administración.

La información debe escribirse como un comentario CSS de varias líneas, cada encabezado en su propia línea, comenzando con una palabra clave de encabezado.

Hay varias palabras clave de encabezado disponibles para definir información como el autor (su nombre), el sitio web del autor, una descripción del tema, el nombre del tema, la versión del tema, etc. Para ver la lista completa de las palabras clave de encabezado para temas, visite el WordPress Codex - página de encabezado de archivo.

El formato para escribir encabezados es Palabra clave: Información.
NOTA:  Las líneas séptima y octava solo son necesarias si planea compartir su tema en WordPress.org. Si va a utilizar el tema en su propio sitio web, puede omitir esas dos líneas y simplemente cerrar la sección de comentarios.

En este punto, su tema ya está visible en la sección del tema del panel de control de administrador. Verá una imagen de cuadro de damas blancas y grises con Mi tema  escrito debajo. Después de completar el tema, puede tomar una captura de pantalla para que se muestre aquí.

Cómo Crear Un Tema De WordPress Responsive Usando HTML5

Si activa el tema en este punto, obtendrá una página de inicio en blanco ya que su index.php está vacío y no existen plantillas.

Ahora, agregaremos una regla única al archivo CSS que cambia el color de fondo de la página.

Agregue una línea en blanco después del cierre del comentario * / en la línea 10.

En la siguiente línea debajo de la nueva línea en blanco (línea 11 del archivo), escriba lo siguiente.
La primera entrada es una parte importante del estilo sensible. * es un comodín y coincide con cada clase que se encuentra en el documento HTML. Establece que el ancho y alto final de cada elemento en la página debe incluir contenido, relleno y borde. Si no configura esto y tiene dos cajas de 50% de ancho que están lado a lado con cualquier relleno o borde, no se sentarán una al lado de la otra ya que su tamaño real es mayor al 100%. Una caja de 100% de ancho con un 1% de relleno es en realidad un 102% de ancho, ya que se agrega un 1% de relleno a la izquierda y a la derecha. Esta regla agrega efectivamente el relleno dentro de la caja en lugar de afuera.
La segunda entrada simplemente cambia el color de fondo de blanco para que podamos ver rápidamente si se está utilizando la hoja de estilo. También configuramos la fuente predeterminada que se usará en nuestro tema.

Paso 3 - Antes de comenzar el desarrollo

Antes de comenzar a crear su diseño de tema de WordPress, debe agregar algunas piezas de código a varios archivos para obtener un buen punto de partida sobre el que construir. Estos pasos no son necesarios, pero son muy recomendables.

Estos pasos tendrán explicaciones breves para que pueda pasar rápidamente a la construcción de un diseño.

Primero, incluiremos un archivo CSS llamado normalize.css. Los diferentes navegadores tienen diferentes configuraciones predeterminadas para cosas como los márgenes de página y el relleno. Normalize.css establece explícitamente un número de atributos para garantizar que todos los navegadores muestren su página exactamente de la misma manera. Si no utiliza una hoja de estilo para establecer estos valores predeterminados, un problema común es que cuando intente hacer que su encabezado principal comience en la parte superior izquierda de su página, habrá espacio en blanco encima del encabezado.

functions.php

Abra functions.php y pegue el siguiente código
A continuación, debe habilitar los widgets de la barra lateral. Si no incluye este código, el enlace del menú de widgets no estará visible en el panel de control de administración y no podrá agregar widgets. Mientras está todavía en functions.php , debajo de la función anterior, agregue el siguiente código:

Ahora necesitamos registrar un menú de navegación personalizado para permitir el uso de la característica Apariencia -> Menú en el panel de administración. Debajo del código anterior, agregue lo siguiente:

Guarde functions.php y cárguelo en el directorio de su tema.

sidebar.php

Ahora abra el archivo sidebar.php y con el siguiente código hace que la barra lateral y los widgets aparezcan en su tema siempre que se llame a get_sidebar ()  .
 
La primera línea le dice a WordPress que si no hay widgets habilitados, el HTML de la barra lateral no debe mostrarse. La segunda línea establece los atributos del elemento que contiene los widgets. HTML5 proporciona el elemento 'a un lado' para las barras laterales. La tercera línea es la función de WordPress para mostrar realmente los widgets. La última línea cierra la declaración if inicial.
Guarde y cargue sidebar.php en el directorio de su tema.

Para facilitar la navegación entre las publicaciones y las páginas, abra el panel de control de administrador y agregue los widgets a las Páginas y Publicaciones recientes a la barra lateral. Ahora pasaremos a la construcción del diseño... Continuar Con La Segunda Parte...

Comentarios 0

Deja un comentario

Información
Usuarios que están en este grupo no pueden dejar comentarios en la página