Agregar Estilos Personalizados a Editor Wordpress

CustomWP

16.09.2017 a las 23:17 hs 0 29140 0





Hoy mencionare acerca de esta fabulosa función que la mayoría de usuarios busca para darle un toque especial a su plataforma wordpress haciéndola un entorno mucho mas profesional. Regularmente surgen muchos factores por los cuales uno desea realizar estas modificaciones implementando nuestra propia hojas de estilo, esto es debido a cuestión de plugins o shortcode mediante los cuales agregamos código HTML. Debido a esto tras agregarlos de forma visual no vemos ningún cambio, por ejemplo: esto podría ocurrir al momento de agregar una etiqueta span personalizada con una clase mediante la cual permitamos agregar diferentes colores, tamaños, y mucho mas que se pueda ocurrir.

Pues el problema es que no podremos saber de forma exacta que texto incluye estas etiquetas, por ende hoy explicare una forma sencilla de agregar nuestros propios estilos al editor de wordpress. Como resultado estaremos agregando algunos estilos a nuestras etiquetas logrando visualizar efectos tras estar dentro del formato visual en wordpress. Por lo cual te sera mucho mas fácil saber cuales han sido los textos con dichas etiquetas. Sin embargo podrás aplicar mas estilos CSS personalizando completamente el editor de wordpress adaptando a tus necesidades logrando resultados impresionantes.

Como primer paso simplemente debemos abrir nuestro archivo functions.php, el cual podremos encontrar dentro de nuestro tema activo en wordpress. Podrán obtener dicho archivo mediante el siguiente orden: Apariencia - Editor, ahora simplemente agregaremos las siguientes lineas de código:


// Agrega estilos personalizados al editor
add_editor_style('css/editor-style.css');


Posteriormente debemos crear nuestra hoja de estilos de acuerdo al nombre establecido en el código anterior, finalmente podremos agregar nuestro estilo CSS:


span.bold {
font-weight: bold;
}


Como ejemplo e agregado lo anterior pero ustedes podrán agregar todos los estilos que gusten, solo deben seleccionar bien sus clases, id, etc.
Algo importante a mencionar es que el código php mostrado anteriormente agrega o busca la hoja de estilos dentro de la carpeta CSS contenida en su tema. Sin embargo ustedes pueden modificar la ruta.




Posteado por:

TuZonaWP

Administrador

0 Comentarios


Cargando comentarios espera un momento...
No tienes permisos para comentar.
Para poder comentar necesitas estar Registrado. O.. ya tienes usuario? Logueate!