Cómo crear puntos personalizados en WordPress

Los puntos de marcado son una forma muy efectiva de comunicar cierta información en la web. Por supuesto, pueden ser muy buenos en la impresión, pero como todos sabemos, leer en la web es diferente. Las personas escanean más. Esperan una presentación más gráfica del texto. Y sus ojos se cansaron más fácilmente.

Muerde la bala, ingrese a su CSS y ponga sus puntos a velocidad. Si tuviéramos que hacer una lista rápida de los beneficios de los puntos de marcado, podríamos decir que …
Haz una lectura fácil
Romper la copia
Dibuja el ojo de los escáneres
Subrayar la idea unificadora entre puntos
Comunicar ideas rápidamente
Por lo tanto, los puntos de marcado son importantes, especialmente en las publicaciones de texto pesado. También es importante obtener el estilo correcto de los puntos de marcado. Algunos pueden estar interpretando esto, pero cualquier escritor que se preocupe por sus palabras sabe que cuando una lista de anotadores no se ve correcto, parece tomar el contenido en sí.
Entonces, a continuación, pasaremos algunos principios básicos que puede usar para que sus listas con marcadores se vean como desee. Esto es lo que cubriremos en este artículo:
Crear un tema para niños
El estilo de los puntos de marca base
Encontrar el nombre de clase de su contenido
Código HTML para puntos de bala
Estilizando los puntos de marcado con CSS
Crear un tema para niños

Usar el tema de un niño lo mantiene feliz y genial. Cuando cambia el tema, es mejor usar un tema infantil. De esta manera, si se actualiza su tema, no pierda sus cambios. Y esto es lo que utilizaremos para este tutorial (un tema infantil de los valores predeterminados veinte doce WordPress). Puede aprender a crear un tema para niños aquí.
Nota: Algunos temas más avanzados ya pueden tener una hoja de estilo especial incorporada para sus personalizaciones si crear un tema para niños no parece funcionar para usted, puede buscar una solución en línea o en el autor del tema. Si tiene problemas para crear el tema de un niño con su tema, entonces otros probablemente tengan los mismos problemas. El estilo de marcado de los puntos del tema El estilo de sus puntos está controlado por su tema. Entonces, para cambiar ese estilo, debe saber cómo referir el tema en la hoja de estilo. El estilo de sus puntos será una subsección del estilo de su contenido principal. Muchos temas probablemente clasificarán el contenido general como un “contenido de entrada”. En otras palabras, crearán una “clase” llamada “contenido de contenido” y luego se referirán a ese nombre (transferencia de contenido) en la hoja de estilo. Pero también existe la posibilidad de que su tema le dé un nombre diferente, por lo que Lo primero que debe hacer es averiguar qué “clase” se atribuye al contenido de una publicación. Encontrar el nombre de su clase de contenido Para encontrar el nombre de clase para su contenido, puede acceder a una publicación que ya ha publicado y luego mirar el código de página respectivo. Puede hacerlo haciendo clic correctamente en la página y luego haciendo clic en “Consulte la fuente de la página” o “Ver la fuente”, etc. Luego elija las primeras palabras en su publicación y busque el código para esas palabras. Cuando los encuentre, debe ver un código no lejos de ellos, que le dirá qué clase le ha dado su contenido en la página.
Hice esto en los veinte doce predeterminados y descubrí que la clase es “Contenido de entrada”. Como mencioné, el tuyo podría ser lo mismo, pero puede ser diferente. Busque la etiqueta de “clase” dentro de un DIT en la parte superior de su contenido*Nota: Existe la posibilidad de que su tema sea mucho más complejo que lo anterior y puede encontrar más clases. Si es así, siga intentándolo hasta que encuentre el que le convenga. Código HTML para puntos de bala Se creará una lista de puntos en WordPress utilizando dos etiquetas diferentes. Primero está la etiqueta
. “UL” significa “lista desordenada”, en lugar de , que significa “lista ordenada”. Una lista desordenada no estará numerada (tendrá marcadores). Una lista ordenada es una lista numerada.
La siguiente etiqueta de una lista de marcadores es la etiqueta
. Esto significa “elemento en la lista”. Si hace una lista de anotadores en su editor de WordPress y luego pasa a “texto”, puede ver estas dos etiquetas en acción.

Dominando los puntos de marcado con CSS OK, ahora vamos a la parte divertida: personalización de las listas de marcadores. Si aún no lo ha hecho, no olvide activar el tema de su hijo. Ahora tendrá que acceder a la hoja de estilo desde el tema del niño. (Aspect> Editor> Style Sheet-Style.css) Recuerde que, en mi tema, la clase para mi contenido se llamaba “Contenido de entrada”. Y esto es lo que usaré en los ejemplos a continuación. Si ha descubierto que su clase ha recibido otro nombre, reemplácelo.
Para empezar, echemos un vistazo al estilo predeterminado para listas de veinte doce tema. A partir de ahí, cambiaremos gradualmente las cosas. Aquí está el aspecto predeterminado. El cambio de la fuente comenzará con algo muy simple. Esto le permitirá tener una idea de cómo cambian las cosas. Simplemente haremos la fuente en negrita con el siguiente CSS. .ntry-contando ul li {

Peso de fuente: en negrita;
} Aquí está el resultado.

Y por el primero, le mostraré cómo se ve la hoja de estilo de mi hijo creado recientemente.
Por supuesto, puedes cambiar el color. Como ejemplo dramático, cambiaremos la lista en verde brillante agregando “Color: #00FF00;”
.ntry-contando ul li {

Peso de fuente: en negrita;

Color: #00FF00;
} Y así es como se ve.
Agregue diferentes estilos OK, ahora comenzaremos a cambiar las balas en sí. Cambiaremos los círculos completos en círculos vacíos, agregando este código CSS: Lista de estilo: círculos;
Mi código CSS ahora se ve así: .Tentry-Account Ul Li {
Peso de fuente: en negrita;

Estilo de lista: Círculo;

} Y este es el resultado.
También puede cambiar esos círculos vacíos a Square mediante un cambio de estilo de lista: Círculo; En el estilo de la lista: cuadrado; Y aquí está el resultado.
También está el estilo “disco”, que es un círculo relleno. .ntry-contando ul li {
Peso de fuente: en negrita;

Estilo de lista: disco;

}
Y aquí está el resultado:
Hay otros valores que puede usar con la propiedad de “estilo de lista”, muchos de ellos se aplican al uso de números (listas ordenadas). Puede encontrar más información sobre ellos aquí.
Usando imágenes como puntos de marcado también, puede agregar imágenes como puntos de marcado. La forma de hacer esto es agregar la siguiente línea de código CSS: IMAGEN DELYLE DE LISTA: URL (URL-de-tu-imagen); Entonces, por ejemplo, si mantiene la fuente engrosada, su código CSS se vería así:.
List-style-image: url (http://mysite.com/images/bullet-16×16.png);

} Aquí hay una imagen que cargué. Se ve bastante bien, pero notará que la alineación de la imagen es un poco defectuosa. Las imágenes parecen ser demasiado altas.
Si esto le sucede, puede adoptar un enfoque diferente para usar imágenes. En lugar de utilizar la propiedad “Lista-estilo-imagen”, puede usar la imagen como fondo. Esto le permitirá mover la imagen para que se vea correcto.
Debido a que usamos la imagen como fondo, tendremos que indicar que no queremos un punto “normal”. Para hacer esto, usaremos “Tipo de estilo de lista: Ninguno”; Además del código de fondo CSS. El código que pude poner en mi archivo CSS se parecía al siguiente. El número de 5px es lo que jugué hasta que se veía correcto. Por supuesto, su imagen probablemente no será de la misma manera que fue mía, por lo que tendrá que jugar con las cosas hasta que se vea correcta. .ntry-contando ul li {
Peso de fuente: en negrita;
Tipo de estilo Lista: Ninguno;

Antecedentes: URL (http://mysite.com/bullet-16×16.png) No-Repeat 7px 5px;
Marja: 0;
Relleno: 0px 0px 3px 35px;
Align vertical: medio;
} Y aqui esta el resultado.
Agregar caracteres Unicode más que es posible que desee probar para los puntos de marcado son los caracteres Unicode. Los personajes unicode son cosas como … … ✽. Como se mencionó anteriormente, la introducción de “Tipo de estilo Lista: Ninguno”; Retire el punto normal. Y eso es lo que tendrás que hacer aquí. (Nuevamente, no queremos que aparezcan los puntos normales. Reemplazaremos a aquellos con un carácter de Unicode). También agregaremos una propiedad diferente que indicará que el carácter debe estar antes del elemento en la lista. Aquí hay un vistazo al uso del personaje ∅ como un punto destacado. .Entry-Continging Ul Li {Tipo de estilo listado: Ninguno;
Peso de fuente: en negrita;
}
.Enentry-Contador Ul Li: antes {

Contenido: “∅”;
Right de relleno: 5px;
} Y así es como se ve.
Si desea que el personaje sea diferente del texto, agregue la propiedad de color a la sección superior para cambiar el color del texto o agregue la propiedad de color a la sección inferior para cambiar el color de la marca. O, por supuesto, puede agregar propiedades de color a ambas. En este ejemplo, agregué la propiedad de color a ambos. .ntry-contando ul li {
Tipo de estilo Lista: Ninguno;
Peso de fuente: en negrita;
Color: #2E89ff;
}

.Enentry-Contador Ul Li: antes {
Contenido: “∅”;
Right de relleno: 5px;
Color: #FFA62F;
} Y aqui esta el resultado.
Como puede ver, no use código especial en su archivo CSS para obtener un carácter de Unicode. Simplemente copie el unicode en sí e insértelo en su código CSS. Puede encontrar una lista de estos símbolos aquí. Esta es una lista larga, por lo que aquí están algunas de las más populares: flechas, dibujo de cajas, elementos de bloque, formas geométricas, varios símbolos y bucetas. Las listas de balas de WPMU Dev y finalmente terminaremos con él. Como probablemente note, las listas de puntos aquí en WPMU tienen un punto azul claro con un texto azul oscuro. Se crea separando el punto de marcado de texto, como lo hice arriba con los caracteres Unicode. La pequeña caja azul que usamos como punto de marcador se crea creando un casaje con CSS (estos son los dos valores de 5px que ve a continuación). Aunque esto no es exactamente cómo se configura nuestro código en la hoja de estilo, el siguiente debería darle el mismo efecto. .Entry-Continging Ul Li {Padding-Left: 30px;
Color: #3D5365;
Tamaño de fuente: 90%;
Posición: relativo;
Tipo de estilo Lista: Ninguno;

}
.Enentry-Contador Ul Li: antes {
Contenido: ”;
Posición: Absoluto;
Izquierda: 10px;
Arriba: 9px;
Ancho: 5px;
Altura: 5px;
Color de fondo: #7AA8CC;
} Y, por supuesto, se ve. (Incluiré una imagen aquí si la cambiamos, y la leerá en una fecha posterior).
¿Es hora de morder la bala tus puntos se ven como quieras? Si no, tal vez sea hora de morder la bala, cavar en la hoja de estilo y mantenerlos actualizados. Crédito de la foto: D. Sharon Pruitt