Cómo usar el editor visual de WordPress con estilos personalizados










  • El editor visual de WordPress suele ser la vista predeterminada de un escritor al crear contenido. Es aquí donde tiene botones y funciones para darle a su texto un atractivo visual. Aunque la herramienta TinyMCE predeterminada es útil, puede agregar más opciones al editor de WordPress.

    En este tutorial, echemos un vistazo a un par de complementos de estilo de editor personalizado de WordPress diferentes. Cada uno de estos ofrece excelentes formas de mejorar el contenido que crea en su sitio web.

    Es una excelente manera de agregar atractivo visual sin usar elementos como códigos cortos de WordPress. Por ejemplo, puede agregar un botón atractivo a su sitio utilizando nada más que la codificación CSS y colocando algunas opciones.

    Para este tutorial, necesitará saber cómo instalar complementos de WordPress .

    Uso de estilos personalizados de TinyMCE

    El complemento TinyMCE Custom Styles agrega una función que le permite editar sus propias clases y estilos CSS. Utiliza una interfaz elegante que elimina gran parte del trabajo de código para crear cosas como botones.

    Si conoce un poco de los conceptos básicos detrás de CSS, esta herramienta es buena para probar.

    Instale y active el complemento TinyMCE Custom Styles en WordPress.

    Estilos personalizados de TinyMCE

    Vaya a Configuración y haga clic en "TinyMCE Custom Styles".

    Configuración personalizada de TinyMCE

    Antes de que pueda usar los estilos personalizados de TinyMCE, debe establecer una ubicación para los archivos CSS que usará el editor. Elija uno de los botones de radio para seleccionar una ubicación. Para este tutorial, voy a especificar un directorio personalizado. Debe crear la carpeta antes de usar la opción.

    TinyMCE Guardar configuración regional

    Haga clic en el botón "Guardar todas las configuraciones".

    Guardar ajustes

    Desplácese hacia abajo y haga clic en el botón "Agregar nuevo estilo".

    Agregar nuevo estilo

    Aquí es donde ingresa los valores para el estilo que desea en el editor TinyMCE. Estos valores son todos para CSS y necesita saber qué elementos va a utilizar.

    Nuevo estilo

    Una vez que haya terminado, haga clic en el botón "Guardar todas las configuraciones" para guardar su estilo.

    Guardar estilo

    Acceso al nuevo estilo

    Después de guardar su estilo, necesita acceder a él. Vaya a cualquier publicación, página o tipo de publicación personalizada que use el editor visual de WordPress. Puedes crear uno nuevo si lo deseas.

    Haga clic en el icono "Cambio de barra de herramientas" en el editor. Es posible que ya lo tengas activado por defecto.

    Alternar barra de herramientas

    Seleccione el texto que desea acentuar con un estilo.

    Elegir texto

    Use el menú desplegable "Formatos" y seleccione un estilo.

    Seleccionar formato

    El texto usará el estilo que hayas creado.

    Estilo de texto completo

    Uso de estilos personalizados de Just TinyMCE

    El complemento Just TinyMCE Custom Styles es otra herramienta útil para crear contenido mejorado con CSS en su sitio web. Viene con opciones para editar su texto de manera similar al complemento anterior. Es un poco más difícil de manejar, pero funciona bien.

    Si eres nuevo en CSS, te sugiero que uses TinyMCE Custom Styles en su lugar.

    Instale y active "Just TinyMCE Custom Styles".

    Solo TinyMCE Personalizado

    Vaya a Configuración y haga clic en "TinyMCE Custom Styles".

    Configuración de estilos personalizados

    La primera vez que lo use, deberá modificar la configuración del complemento. Puede ir a la pestaña o hacer clic en el enlace "Abrir configuración".

    Configuración abierta

    Realice los ajustes que desea manejar en este complemento. Estos son los elementos CSS que desea controlar desde la herramienta.

    Cuando haya terminado con sus selecciones, haga clic en el botón "Guardar todas las configuraciones".

    Guardar configuración de CSS

    Después de guardar, haga clic en la pestaña "Formatos TinyMCE" en la parte superior.

    Formatos TinyMCE

    Ingrese el nuevo formato CSS que desea usar en los espacios provistos.

    Elemento CSS

    Una vez que haya ingresado los datos CSS, haga clic en el botón "guardar todas las configuraciones" para guardarlo.

    Guardar CSS

    Acceso al estilo

    Vaya a una publicación anterior o cree una nueva. Para este ejemplo, agregaré un nuevo encabezado rojo a una publicación existente.

    Resalte un fragmento de texto que desee modificar con CSS seleccionándolo.

    Subrayar el texto

    Haga clic en el menú desplegable "Formatos" y elija su estilo CSS.

    Seleccionar estilo

    Este complemento de estilos personalizados TinyMCE es más difícil de administrar que el primer ejemplo anterior. Requiere un poco más de conocimiento de cómo funciona CSS y no tiene las funciones automáticas como agregar fondos y similares.

    Tendrá que ingresar esos fragmentos de código manualmente cuando cree el nuevo estilo.

    Si conoce su CSS, es una herramienta maravillosa para agregar más brillo a las publicaciones y páginas. Es solo un poco más avanzado que muchos de los otros complementos.

    Obtenga más del contenido

    Agregar CSS personalizado a un sitio web de WordPress agrega más versatilidad en lo que puede hacer y el formato de texto puede marcar una gran diferencia cuando se trata de atraer a su audiencia. Algo tan simple como una negrita en el lugar correcto puede tener un impacto en la legibilidad. Agregar estilos personalizados agrega más a la experiencia y le facilita la realización de ciertas tareas.

    ¿Qué tipo de herramientas utiliza para aumentar la legibilidad de su contenido? ¿Con qué frecuencia usa complementos visuales para aumentar la participación de su sitio de WordPress?










  • Subir