Descubre en este tutorial cómo mostrar los mismos estilos de la parte frontal de la web en el editor de WordPress.
En tutoriales anteriores ya te expliqué cómo puedes dar soporte a los estilos del editor en un tema de WordPress y cómo cargar una hoja de estilos específica para el editor.
Pero igual lo que te interesa es usar la misma hoja de estilos del frontend de la web para que se aplique también en el editor y tener así una experiencia similar entre ambas.
Vamos a ver cómo puedes conseguirlo:
Snippet para mostrar los estilos de CSS del frontend en el editor de bloques
Agrega el siguiente fragmento en functions.php:
Para ver este código y los otros 1827 snippets de esta web,
identifícate o suscríbete aquí.
Con este código te aseguras, por un lado de dar soporte a los estilos del editor y por otro le indicas la hoja de estilos que va a cargar, en este caso los del frontal.
En este ejemplo, el fichero que estaría cargando es el style.css que está en la raíz del tema. Si se encuentra en una subcarpeta o tiene otro nombre solo tienes que modificarlo en el snippet.
Si estás creando un nuevo tema te invito a que te plantees usar el theme.json para dar estilos ya que lo que definas en este fichero se reflejará tanto en en la parte frontal como en el editor de bloques.
Conclusiones
Ahora ya sabes cómo usar una misma hoja de estilos de CSS para la parte frontal y el editor de bloques.
Si tienes alguna duda te leo en los comentarios. Y si quieres dejarme una sugerencia para futuros tutoriales, envíamela a través del formulario de contacto.
Todo ventajas de ser suscriptor. 😉
