Cómo hacer que su editor de WordPress se parezca a su sitio web

El editor de WordPress es donde escribes y formateas gran parte de tu contenido. Debe ser WYSIWYG (lo que ves es lo que obtienes). Sin embargo, muestra el estilo básico en tiempo real, pero el formato esvisualLa pestaña Editor de WordPress realmente no coincide con el aspecto de su contenido en un sitio web externo.

Como resultado, se ve obligado a golpearavancePresione el botón varias veces para ver cómo se verá su publicación después de que se publique. Pero, ¿y si hubiera una mejor manera? ¿Hay alguna manera de omitir el interminable Alt-Tab y obtener una vista previa y ver el producto final en el editor de WordPress? Sí, te explico cómo hacerlo.

En esta publicación, le mostraré cómo emular una interfaz de WordPress en el editor de WordPress.

Tendrás que ensuciarte las manos...

Desafortunadamente, a diferencia de esto, no hay un complemento que el editor de WordPress emule automáticamente sitios web externos. Esto significa que tienes que cavar y ensuciarte un poco las manos. Pero te prometo que lo harás lo menos doloroso posible. Cuando haya terminado, estará satisfecho de que su editor de WordPress se vea así:

Emular la interfaz en el editor de WordPress

Para realizar estos cambios, necesitará algo llamado hoja de estilo. Estos son archivos de temas de WordPress que terminan en .css. Básicamente, controlan la apariencia de su sitio (¡y por lo tanto la parte de estilo!).

De forma predeterminada, el sitio web de WordPress tiene un conjunto de hojas de estilo (incluidas en el tema) y el editor de WordPress tiene sus propias hojas de estilo. Es por eso que el editor de WordPress se ve diferente de los sitios front-end: usa un conjunto diferente de reglas de estilo. Para que se vean iguales, debe editar las reglas de estilo en el editor de WordPress.

Desafortunadamente, esto significa que necesitas saber al menos el CSS básico. Pero, como dije, trato de que sea lo menos doloroso posible.

Ahora que conoce sus objetivos principales, echemos un vistazo a los cuatro pasos que debe completar.

Este ejemplo utiliza el tema Zillah gratuito de ThemeIsle. Sin embargo, debería poder seguir los mismos pasos sin importar lo que use.

Paso 1. Crea tu propia hoja de estilo para tu editor de WordPress.

De hecho, lo estoy recuperando. El primer paso que debes dar.. Solo con una copia de seguridad segura de su sitio web puede continuar con el resto de los pasos.

Demos el verdadero primer paso. Debe crear una hoja de estilo vacía llamada "custom-editor-style.css". Para hacer esto, abra un nuevo documento en el Bloc de notas (o un programa similar) y guárdelo como un archivo ".css" de la siguiente manera:

hacer-wordpress-editor-parece-website2

Agregue su propio CSS a esta hoja de estilo. Hasta ahora es bastante simple, ¿no?

Paso 2: agregue CSS a la hoja de estilo del editor para imitar el tema

Ahora las cosas pueden complicarse un poco más. Desafortunadamente, aquí es donde necesitas saber un poco sobre CSS.

En este paso, debe agregar todo el código CSS requerido a su hoja de estilo para que el editor de WordPress pueda emular correctamente un sitio web externo. Una forma de hacer esto es ver el archivo "stylesheet.css" en la carpeta de su tema.

hacer-wordpress-editor-parece-website3

Sin embargo, este es un ninja CSS y solo tienes que seleccionar un código específico. ¡Esto no está bien!

Hay una manera más fácil ...

Afortunadamente, hay una manera fácil de usar las herramientas para desarrolladores de Google Chrome. También puede usar las herramientas para desarrolladores de Firefox, pero use Chrome para las capturas de pantalla. Este es mi navegador favorito.

Primero, debe ir a la publicación en el sitio en vivo. A continuación, haga clic con el botón derecho en el elemento del mensaje yinspeccionar.. Por ejemplo, creé una publicación que usa tanto la etiqueta h2 como la etiqueta p normal.

hacer-wordpress-editor-parece-website4

La ventana Herramientas para desarrolladores aparece en el lado derecho de la pantalla. Necesitas encontrar el estilo correcto enestilocaja. Marcado en la captura de pantalla a continuación. mira como hablacanal 1, canal 2, canal 3¿Piso de arriba? Aquí le mostramos cómo saber qué estilo necesita copiar.

hacer-wordpress-editor-parece-website5

A continuación, debe copiar todo este estilo y agregarlo a la hoja de estilo vacía que creó para el editor de WordPress.

hacer-wordpress-editor-parece-website6

Repita este proceso para cada elemento de su publicación. Es decir, debe hacer clic derecho para ver texto sin formato, enlaces, imágenes, viñetas y más. Básicamente, debes seguir este proceso para cada elemento que juegues. estilo.

Sé que es un poco molesto, pero si no sabes suficiente CSS para buscar las hojas de estilo de tu tema o escribir código CSS desde cero, esta es la mejor opción.

Como resultado, debería obtener algo como esto:

hacer-wordpress-editor-parece-website7

La primera vez que usas CSS, puede parecer que te estoy lanzando a la parte más profunda. ¡Lo siento! Si necesita ayuda, aquí hay algunos recursos adicionales que puede esperar que le sirvan como salvavidas:

Paso 3: Cargue la nueva hoja de estilo a la carpeta del tema a través de FTP

Una vez que haya agregado todos los estilos que necesita, deberá usar un programa FTP para cargar una nueva hoja de estilo (lo que se llama "custom-editor-style.css") a su carpeta de temas.

Puede encontrar la carpeta del tema yendo a "... / wp-content / themes / NAME".

Cargue la hoja de estilo en la misma carpeta del tema que otros archivos como "functions.php" y "stylesheet.css".

hacer-wordpress-editor-parece-website8

Paso 4: Indique al editor de WordPress que use esta hoja de estilo personalizada.

¡El último paso, lo prometo! A continuación, debe agregar código al archivo "functions.php" del tema (idealmente un tema secundario) para indicarle al editor de WordPress que use la hoja de estilo personalizada que creó.

Para hacer esto, vaya aApariencia-> Editor-> funciones.php(Idealmente, no olvides usar un tema hijo). Luego agregue este fragmento de código al final de su archivo functions.php.

/*** Registers an editor stylesheet for the theme.*/function wpdocs_theme_add_editor_styles() {add_editor_style( 'custom-editor-style.css' );}add_action( 'admin_init', 'wpdocs_theme_add_editor_styles' );

Así es como se ve el archivo functions.php:

hacer-wordpress-editor-parece-website8-1

No te preocupes, este código esRepositorio oficial wordpress.orgSimplemente conecte el editor de WordPress a su nueva hoja de estilo.

Una vez que haya agregado el fragmento de código, simplemente guarde los cambios y el estilo de la interfaz de usuario aparecerá cuando use el editor de WordPress.

hacer-wordpress-editor-parece-website9

envolver

lo siento…

No puede hacer que el editor de WordPress parezca un sitio web. Si todo fuera tan simple...

Sin embargo, el conocimiento requerido para CSS no es realmente tanto. Y con la herramienta para desarrolladores de Google InspectElement de forma gratuita, puede elegir rápidamente el estilo que necesita.

En general, todo lo que tienes que hacer es:

  1. Crea tu propia hoja de estilo del editor de WordPress.
  2. Agregue el CSS necesario/requerido para emular el front-end de WordPress.
  3. Sube esta hoja de estilo a tu carpeta de temas a través de FTP.
  4. Agregue un fragmento de código al archivo functions.php del tema secundario para vincular la hoja de estilo.

¡Y estás en sintonía con el avión!

Si tiene alguna pregunta, por favor escríbala en la sección de comentarios. ¡Contestaré!

Entradas relacionadas

Deja una respuesta

Tu dirección de correo electrónico no será publicada.

Subir

Utilizamos cookies para asegurarnos de brindarle la mejor experiencia en nuestro sitio web. Si continúa utilizando este sitio, asumiremos que está satisfecho con él. Más información