Cómo crear un tema de WordPress Responsive usando HTML5

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 jаvascript 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

Editor de texto

Acceso FTP a su cuenta de hosting

Una instalación de WordPress en funcionamiento

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.

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í:

Detalles

<!DOCTYPE html>
<html lang="en">  

<head>
<title>My HTML5 Page
</title>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">

<link rel="stylesheet" href="css/normalize.min.css">

<link rel="stylesheet" href="css/main.css">  
</head>  

<body>

<header><h1>My Website</h1></header><main><section>  

<header><h2>My Articles</h2>  </header>  <article>

<header><h2>An Article</h2></header>

<p class="inline-text-box">Left</p>

<p class="inline-text-box">Right</p>  </article></section></main><footer>  

<p>Copyright &copy; 2023</p></footer>  
</body> 
</html>

¿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.

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.

/* GOOD WIDTH */ .inline-text-box {  width: 50%; } /* BAD WIDTH */ .inline-text-box {  width: 800px; } /* GOOD IMAGE */ img {  max-width: 100%;  height: auto } /* BAD IMAGE */ img {  width: 100%;  height: auto; }

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.

/* Media Type and Media Feature and Media Feature*/ @media only screen and (min-width: 400px) and (max-width: 800px) {  .inline-text-box {    width: 100%;    display: block;  } } /* Media Feature Only */ @media (max-width: 1200px) {  .inline-text-box {    width: 50%;  } }

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.