Insertar wysiwyg en el frontend de WordPress

Home » Blog » Insertar wysiwyg en el frontend de WordPress

Una de las características que convierten a WordPress en una herramienta perfecta para publicar contenido es su fantástico editor de texto Tinymce. Tinymce es un editor de texto de open source basado en HTML, lo que permite descargarlo desde su web y usarlo en cualquier web.

Funcionalidades del editor

  • Seleccionar el tipo de contenido: Podemos elegir entre si es un párrafo, h1, h2, hasta h6. Los h hacen referencia a los encabezados de un artículo donde el titular de mayor importancia es el h1, los titulares en su interior los h2, y así sucesivamente.
  • Podemos poner el texto en: Negrita, cursiva o tachado.
  • Podemos poner frases centradas o alineadas a la derecha.
  • Podemos poner enlaces, subir imágenes, color, sangría, etc.
  • Además permite escribir a pantalla completa siendo muy cómodo para escritores, y podemos escribir en formato HTML siendo útil para diseñadores.

Como podemos insertarlo en el FrontEnd

Habitualmente el editor lo vemos en el backend de WordPress por ejemplo al editar una entrada, las páginas, etc. Pero es posible incluirlo en los temas. Por ejemplo podemos crea una página con un formulario de recogida de información en la que tengamos una sección de texto libre que será nuestro editor de texto Wysiwyg.

Para mostrarlo por pantalla basta con:

wp_editor($texto_por_defecto,$nombre_campo,$array_datos);
  • $texto_por_defecto: En este campo se debe introducir el texto del campo. Por ejemplo, si es un campo que debemos conservar lo que el usuario escribe en el (como en entradas o páginas) cada vez que el usuario envié el formulario en este campo debemos recuperar la información de la base de datos.
  • $nombre_campo: Aquí debemos introducir el nombre (name) del campo textarea.
  • $array_datos: En este campo se configurar los valores o funcionalidades que queremos en el editor de texto. Por ejemplo podemos ocultar la posibilidad de añadir enlaces, o subir fotos. Tiene mucha opciones:
$args = array(  
'quicktags' => false,  
'textarea_rows' => 5, 
'media_buttons' => false, 
'tinymce'       => array( 
'toolbar1'    => 'bold,italic,strikethrough,underline,forecolor,charmap,outdent,indent', 
'toolbar2'    => '', 
)
, ); 
$editor_id = 'mensaje';         
wp_editor( '', $editor_id, $args );

En este ejemplo es un editor que al enviarse queremos que se quede en blanco, el editor le ponemos de identificador mensaje y en la configuración hemos quitado la posibilidad de añadir imágenes, no permitimos usar el editor en formato HTML, establecer un tamaño de altura de 5 columnas, y finalmente establecemos 2 columnas de botones, en la primera metemos el negrita, cursiva, tachado, subrayado, selector de color, selector de caracteres especiales, y sangría izquierda y derecha.

Autoptimize

Autoptimize es un plugin muy bueno y muy conocido para mejorar la velocidad de nuestra web, permite entre otras funcionalidades minimizar el js. Y esto puede generar un problema en el frontEnd con la función wp_editor. Para que no se produzca debemos ir al gestor -> Ajustes -> Autoptimize y pincha sobre el botón: Mostrar opciones avanzadas. Y en el bloque Opciones de javascript debemos incluir en el input que permite excluir script el siguiente código al final del que tengas actualmente:

, tinymce, tinyMCE

Con este cambio ya podremos usar el plugin y funcionara el editor de textos.



Foto de Iñigo Mezo Alvarez

IÑIGO MEZO ALVAREZ (IMAcreste)


Comentarios

Deja una respuesta

Tu dirección de correo electrónico no será publicada. Los campos obligatorios están marcados con *

Las reseñas son opiniones que las personas dejan en la página local de Google. Si son positivas, estas reseñas ayudarán a mejorar la confianza y credibilidad de una marca.

Participa en nuestro sorteo enviando un email con tu nombre y el asunto «Sorteo AUDITORÍA SEO». Se realizara un sorteo cada mes.

Evaluación EXCELENTE
A base de 7 reseñas
Gran profesional y muy competente, le contratamos para cambiar la web y mejorar el posicionamiento y gracias a su asesoramiento ha mejorado.
jorge martinez
jorge martinez
16/05/2024
Contactamos con Iñigo para el diseño web de nuestra tienda online y estamos encantados. Su asesoramiento, seguimiento y trato han sido excepcionales. Un verdadero crack. Recomendado al 100%. No dudes en ponerte en contacto con el.
erlantz rique
erlantz rique
19/02/2024
Un acierto quien elija a Iñigo. Autentico profesional, se preocupó en todo momento que entendiera el funcionamiento de la web. Me explicó todo las veces necesarias hasta entenderlo. Se preocupó y acertó en que la web tuviera lo que le pedí y lo hizo con creces. Muy contento con el servicio prestado. Una vez realizado el trabajo, cualquier duda que tengo me sigue ayudando. Lo recomiendo sin temor a equivocarme.
Jose Marlasca
Jose Marlasca
06/02/2024
Compromiso, implicación e innovación en los proyectos. Atento a las necesidades e incansable en la búsqueda de soluciones. Muy buena opción.
Jabier Fuertes Udaondo
Jabier Fuertes Udaondo
07/01/2024
Si buscas a alguien que además de hacer un diseño web moderno, responsivo y adaptado a tu sector, te explique por qué plantea el diseño web de esa manera y que te explique y ayude en posicionar tu web lo mejor posible en base a los objetivos fijados, ese es Iñigo Mezo y os lo recomiendo al 100%
Asier Hermoso
Asier Hermoso
03/01/2024
Genial trabajar con él! Además de ser muy buen profesional, experto y responsable, a destacar tanto su implicación en cada proyecto, así como su trato siempre cercano y su paciencia infinita ;) Un crack!!
itxaso zubia
itxaso zubia
15/12/2023
El plugin gratuito para integrar productos de Prestashop en Wordpress muy sencillo de utilizar y muy bien documentado, os felicito.
Fernando Cózar
Fernando Cózar
02/11/2023