HTML e IDS no solo son importantes para los programadores hardcore. Después de todo, hoy en día ya no tiene que ser un desarrollador web para tener su propia presencia en la web. En cambio, puede obtener casi cualquier cosa deslizando y colocando o haciendo clic en un botón del mouse. Esta capacidad es gran parte del éxito de WordPress. La plataforma incluso permite a Laity crear sitios web muy profesionales. Sin embargo, si desea profundizar la personalización del tema, no pasará por alto para aprender la marca y el código. Conocimiento práctico de HTML, CSS, PHP y, más y más, JavaScript le permite hacer todo lo que desee con su sitio por este motivo, en esta publicación queremos analizar una parte central de cualquier tema de WordPress: clases HTML e IDS. A continuación, descubrirá qué son exactamente, por qué importa y cómo usarlos correctamente. Saber eso significa un largo camino para hacer cambios radicales en cualquier sitio de WordPress.
Un curso intensivo en HTML Antes de que pueda comprender las clases e ID de HTML, primero debe estar familiarizado con cómo funciona HTML. Bloques básicos HTML Si trabaja con WordPress, es posible que haya estado buscando un archivo de plantilla. Cuando lo hagas, vea algo muy similar a eso:

Si bien las plantillas de WordPress están escritas en PHP, también contienen mucho HTML. Por ejemplo, encontrará muchos de estos elementos HTML estándar:
– denota secciones de página más grandes. Los elementos del encabezado, el contenido, la barra lateral y el sótano a menudo se usan para consistir en
cajas. Hasta ahora, sin embargo, generalmente usamos un marcado más semántico, como , , o . Los cuadros Div pueden tener otros elementos dentro de ellos.

a

-SO llaman etiquetas de título. Como su nombre indica, se usan para títulos o subtítulos que dan una estructura de contenido. Para obtener más información, tenemos un artículo completo sobre este tema.
– Se utiliza para el contenido rodante estándar. P significa “párrafo”. Si observa el código fuente de esta página, verá la mayor parte del texto entre paréntesis.
y : cree listas desordenadas y ordenadas (como lo que ves en este momento). Cada elemento en la lista también está entre paréntesis con
y
.
Con estos elementos y solo unos pocos, puede crear la estructura bruta de un sitio. Por ejemplo, aquí hay un documento web escrito en html puro:

<AP

El título de mi sitio de prueba HTML

Enderezado a la primera entrada

lorem ipsum dolor sitio amet, consecuencia adipiscing elit. Sed convallis elit en Massa después de la sagittis. maecenas tincidunt , nisi u ullamcorper eleifand, sapien magna sospechit dolor, no eficit tellus sed quam. Praesent Ut Ullamcorper Leo. nullam luctus semper massa , quis porttor dii malesuada ac.
vestibulum sapien purus, placeant sed diam ut, mattis dapibus dapibus dapibus Lorem . Integer tiene Elit Tempus, Lacinia Odio AC, Pellentesque Massa. Tortor de ultrices Proin Mattis, Vitae Rutrum Enim Commodo AC. A Fusce le gustaba NIBH en las instalaciones de Tincidunt. Phasellus Auctor Semper MI, NEC SPICE JUSTO FERMENTUM ID . Pellentesque Susipit Libero Quis Nisl Interdum Viverra.
Ut Sapien Leo, Sempere I Nunc eget
pulvinar vulputate mi
Ut Imperdiet Aliquam Free
Quis pharetra nibh cursus sed
Mauris tempus mauris no metus rutrum

etiam pulvinar magna sit amet tincidunt adorno. nunc nec dolor sit amet enim congue dictum . Vivamus Ut Feugiat Neque, un nulla de Fringilla. Nunc tincidunt el transportista. Phasellus AC Semper Tellus. Vestibulum A Lectus Instalaciones Erat Scheduleche Aliquet et Rhoncus nisl.

1991-2004 Diseños web de la vieja escuela

y así es como se ve en el navegador:
Muy despiadado, lo sé. Sin embargo, así es como los sitios web estaban mirando el principio. Luego, las cosas fueron complicadas a medida que aumentaron los requisitos con respecto a la presentación de los sitios web, también lo hicieron la complejidad de HTML. Las versiones más nuevas del lenguaje de marcado contenían capacidades adicionales para el estilo de los documentos. Si bien esto hizo que el producto final se viera mucho mejor, hizo que el código detrás de él fuera mucho más complejo de leer y escribir. La razón principal de esto es que cualquier estilo tenía que ser incluido en la línea (usando). Así es como podría verse en nuestro ejemplo anterior:

<AP

El título de mi sitio de prueba HTML

Enderezado a la primera entrada

lorem ipsum dolor sitio amet, consecuencia adipiscing elit. Sed convallis elit en Massa después de la sagittis. maecenas tincidunt , nisi u ullamcorper eleifand, sapien magna sospechit dolor, no eficit tellus sed quam. Praesent Ut Ullamcorper Leo. nullam luctus semper Massa , Quis Porttor di Malesuada AC.
Vestibulum Sapien Purus, Pleasant Sed Diam Ut, Mattis dapibus lorem . Integer tiene Elit Tempus, Lacinia Odio AC, Pellentesque Massa. Tortor de ultrices Proin Mattis, Vitae Rutrum Enim Commodo AC. A Fusce le gustaba NIBH en las instalaciones de Tincidunt. Phasellus Auctor Semper MI, NEC SPICE JUSTO FERMENTUM ID . Pellentesque Susipit Libero Quis Nisl Interdum Viverra.
Ut Sapien Leo, Sempere I Nunc eget
pulvinar vulputate mi
Ut Imperdiet Aliquam Free
Quis pharetra nibh cursus sed
Mauris tempus mauris no metus rutrum

etiam pulvinar magna sit amet tincidunt adorno. nunc nec dolor sit amet enim congue dictum . Vivamus Ut Feugiat Neque, un nulla de Fringilla. Nunc tincidunt el transportista. Phasellus AC Semper Tellus. Vestibulum A Lectus Instalaciones Erat Scheduleche Aliquet et Rhoncus nisl.

1991-2004 Diseños web de la vieja escuela

Con esto, el resultado parece muy diferente de antes:
La desventaja es que si desea cambiar el diseño o reutilizar el estilo para otros elementos, debe atravesar toda la página (o más páginas) y cambiar cada tribunal individual. Especialmente con elementos repetidos (como enlaces), esto se vuelve muy molesto. Entonces, ¿qué hacer en su lugar? Aquí, la hoja de estilo es un gran paso en el desarrollo de sitios web fue la aparición de CSS o hojas en cascada. Esto significa nada más que poner todos los marcados de estilo en un archivo separado en lugar de incluirlo en el documento de la página. Por lo tanto, podemos manejar la estructura y la presentación de la página por separado. Para el ejemplo anterior, la hoja de estilo se ve así: html {
Familia rápida: Sans-Serif;
Color: #666;
}

cuerpo {
Color de fondo: #F6F6F6;
Marja: 0 coche;
Ancho máximo: 1050px;
}
H1 {
Color: #3EB9C8;
Tamaño de fuente: 40px;
}
H2 {
Color de fondo: #111D2F;
Color: #ffffff;
Pantalla: en línea;
}
A {
Color: #EB6126;
TEXT-DECOR: Ninguno;
}
encabezado {
Llenado: 30px 0;
}
sótano {
Text-Align: Center;
} Después de eso, podemos volver a la versión más simple de la página anterior. Todo lo que tenemos que hacer es llamar a la hoja de estilo agregar esta línea a la sección de la página:
Después de eso, la página mantendrá el estilo. Esto se debe al hecho de que el navegador puede extraerlo de la hoja de estilo en lugar de leer el marcado para cada elemento individual. Esto reduce en gran medida la complejidad del HTML que necesita escribir.
También significa que si cambia el estilo en la ubicación central, cambia para todos los elementos simultáneamente. Además, esto funciona en todas las páginas que llaman a la hoja de estilo en su cabeza. Mucho más práctico, ¿no te parece? Sin embargo, esto sigue siendo un problema: ¿qué sucede si desea asignar diferentes estilos al mismo tipo de elemento? ¿Estás bloqueado para volver a la fila? No, exactamente aquí intervienen los cursos y los códigos. ¿Cuáles son las clases e identificaciones HTML? Las clases e ID son ganchos que puede atribuir a los elementos HTML para que sean más específicos. Que tiene identificadores adicionales para asignar CSS de marcado. Por ejemplo, suponga que quiero cambiar el tamaño de la fuente de mi texto con derechos de autor (pero deje cualquier otro texto del mismo tamaño). Puedo hacer esto simplemente dándole una identificación como el siguiente:
1991-2004 Diseños web de la vieja escuela
Cuando lo hago, puedo asignar un CSS especial a esa identificación usando el prefijo #.
#Copyright-Text {
Tamaño de fuente: 13px;
} Aquí está el resultado:
Las clases funcionan de manera similar. Por ejemplo, suponga que tengo una serie de cajas
para widgets en mi barra lateral y quiero cambiar su estilo. Si mi barra lateral ya tiene una identificación (por ejemplo, #principal-ore), puedo apuntar a cajas teóricas de la siguiente manera: #Main-Divbar div {

/ * Escriba el estilo aquí */
} Sin embargo, eso incluiría cualquier otro DI de allí. Por lo tanto, una manera mucho más inteligente es proporcionar contenedores con sus propios widgets de clase:

de esta manera, puedo cambiar el estilo de esas cajas y puedo dejar todo solo. #An-Sidebar .Widget {
/ * Escriba el estilo aquí */
} Fácil de entender, ¿verdad? Además, tenga en cuenta que en lugar del símbolo hash, las clases están escritas con. en frente de ellos. También hay un concepto similar llamado ganchos temáticos. Funcionan de manera similar a las clases e ID, excepto que le permiten adjuntar funciones en lugar de CSS. Si desea obtener más información sobre los ganchos temáticos, consulte nuestra guía para principiantes. Clases HTML e IDS – ¿Cuándo usar qué? Entonces, ¿cómo se usa las clases e identificaciones correctamente? Lo primero a tener en cuenta es que estos selectores no tienen sentido para el navegador mismos. No hay estándares que funcionen en cada sitio, solo si los define tanto en HTML como en CSS. Esto es algo que arroja muchos principiantes. Sin embargo, hasta ahora parecen clases HTML y las identificaciones hacen lo mismo, ¿no? Sin embargo, hay diferencias. No es una coincidencia que arriba utilicé una identificación para un solo elemento y una clase para más. Esto se debe a que las ID están destinadas a ser únicas, las clases no. Para ser más especifico:
Un elemento HTML debe tener una identificación
Cada página debe contener un solo elemento con esa identificación
Por otra parte:
Un artículo puede tener más clases
Puede asignar clases HTML cuántos elementos desea
¿Por qué importa esto?La cuestión es que, en teoría, puedes usar clases e ID indistintamente.Ciertamente lo hice en el pasado (antes de saber mejor).Simplemente asigne la misma identificación a varios elementos que las clases y se harán cargo de las mismas propiedades CSS.No romperá su navegador y no mostrará exactamente lo que desea.Sin embargo, hay varias razones para no hacerlo.Primero, los ID tienen una habilidad única: puede usarlos para saltar a un elemento en una página.Por ejemplo, muchos temas de WordPress tienen una característica que le permite hacer clic en el número de comentarios en la publicación meta para ir directamente a la sección de comentarios.
Lo hacen enviándole a una dirección como su sitio web.com/number#comments. Con esa URL, el navegador se ejecutará automáticamente hacia abajo, por ejemplo, en . Sin embargo, si tiene más elementos con esa identificación, no sabrá cuál debe ejecutar. Esta es la misma razón por la que puede vincular los comentarios individuales en los sitios de WordPress, porque la plataforma crea dinámicamente IDS para ellos. La segunda razón para cumplir con las convenciones definidas para las clases e ID de HTML es que, aunque a CSS no le importa si una identificación es única o no, JavaScript lo hace. De hecho, el lenguaje de programación tiene una función llamada GetementByID, especialmente para manipular elementos en función de su identificación. Sin embargo, no tiene lo mismo para las clases. Dado que más y más web (incluida WordPress) van a JavaScript, es una buena idea seguir estas reglas. Si no lo hace, su código no pasará la validación, será más difícil de mantener, es más probable que arroje errores y, posiblemente, no se demuestre en el futuro. Además, te hace parecer poco profesional. Las mejores prácticas para usar clases e identificaciones anteriores, ya ha aprendido la regla más importante: hacer identificaciones únicas, pero reutilizar clases tantas veces como desee. Sin embargo, hay algunas cosas para recordar para el uso correcto de los selectores de clase e ID. En primer lugar, cuando cree alguno de ellos, asegúrese de hacerlos descriptivos. Esto significa que evitas cosas como y en su lugar usas algo como
. Las clases e ID no son solo una herramienta técnica, también son una buena manera de hacer que la estructura de su sitio sea más fácil de entender. En segundo lugar, puede asignar ambas clases e ID a un elemento al mismo tiempo. Esto puede tener sentido, por ejemplo, si usa clases de estilo, pero necesita una ID para crear un objetivo para un script JavaScript. Además, la capacidad de asignar más de una clase HTML es bastante útil. Si usa el mismo elemento varias veces y desea cambiar algo solo en términos de uno de ellos, puede hacerlo simplemente asignando una segunda clase. Volviendo al ejemplo de Widget de Sus, si desea que todo permanezca igual, pero cambie un atributo sobre el primer elemento en la lista, simplemente puede hacer esto:

Cuando ahora coloca la parte de CSS a continuación en la hoja de estilo, solo afecta el primer widget. #Main-DideBar .Widget .First {
/ * inserte el estilo aquí */