Cómo: agregar un selector de estilo CSS desplegable al editor visual

Cómo: agregar un selector de estilo CSS desplegable al editor visual

Esta publicación te dirá cómo hacerlo. Convierta fácilmente enlaces de texto en botones atractivos en WordPress. Seguir esta guía le mostrará cómo agregar un menú desplegable al editor visual de WordPress que le permite aplicar estilos CSS personalizados al contenido de su publicación.

Estos estilos CSS personalizados se pueden aplicar al texto de sus publicaciones para decorarlo y darle formato. Un gran uso para esto es crear botones atractivos y que llamen la atención para sus publicaciones. Este tutorial también cubre la generación de estilos CSS para botones. Si desea agregar fácilmente botones atractivos a publicaciones y páginas, esta guía es para usted.

El resultado final

El resultado final de este tutorial le permitirá seleccionar texto en su publicación y luego aplicarle un estilo usando el menú desplegable en el editor de publicaciones. Esto es genial para crear el tipo de botones que ves aquí en WP Kube, así como para agregar cualquier otro tipo de formato al contenido de tu publicación.

Una vez que hayamos terminado, el editor visual se verá así, con un elemento de menú desplegable para los estilos:

Cómo peinar 01

Con el nuevo menú, será posible aplicar un estilo CSS a un enlace de texto en su publicación para crear un efecto de botón sin usar imágenes. Los enlaces pueden tener un aspecto similar a este, pero la apariencia depende de usted:

Cómo peinar 02

Este enfoque no solo le ahorra tiempo al crear una publicación, sino que también facilita que todos en su blog usen constantemente los mismos estilos para decorar botones u otros elementos de la publicación.

Precauciones de seguridad

En este tutorial vamos a editar los siguientes archivos:

  • Features.php
  • style.css

Ambos archivos son parte de su diseño, por lo que trabajaremos con las versiones asociadas con el diseño actualmente activo en su sitio web. Primero, es importante Haga una copia de seguridad de estos archivos en caso de que algo salga mal.

En segundo lugar, es una buena práctica crear un tema hijo De tu tema actual. Si no sabe cómo crear un tema hijo, consulte esta guía de Rachel Adnyana. Si tiene una subsección, asegúrese de que lo que hacemos en este tutorial no se sobrescriba cuando actualice su tema actual. También vale la pena señalar que si cambia de tema, estos cambios se perderán además.

Sin embargo, si está trabajando en un sitio de desarrollo o en una instalación local de WordPress, no es estrictamente necesario crear un tema hijo.

Agregar el elemento de menú «Estilos»

El menú desplegable «Estilos» ya forma parte del Editor visual de WordPress, pero se ha desactivado de forma predeterminada. Para activarlo, solo necesita agregar un código al Features.php Archivo de su tema actual.

Para abrir el archivo para editarlo, puede ir al menú Ver y luego hacer clic en Editor en el submenú.

Cómo peinar 03

Primero, asegúrese de que el tema que su sitio de WordPress está usando actualmente esté seleccionado en el menú desplegable en la parte superior derecha de la página. Estoy trabajando en eso ahora mismo Features.php Archivo de tema Twenty Twelve, pero puede ser un tema diferente para usted.

Cómo peinar 04

A continuación, haga clic en el Features.php Archivo de la lista de archivos en el lado derecho de la página para comenzar a editar ese archivo.

Luego copie y pegue el siguiente código en el archivo. Para simplificar, recomiendo agregar al final del archivo para que pueda realizar un seguimiento fácil de lo que ha agregado al archivo.

// Enable the Styles dropdown menu item
// Callback function to insert 'styleselect' into the $buttons array
function my_mce_buttons_2( $buttons ) {
array_unshift( $buttons, 'styleselect' );
return $buttons;
}
// Register our callback to the appropriate filter
add_filter('mce_buttons_2', 'my_mce_buttons_2');
// end of part I

Referencia: http://codex.wordpress.org/TinyMCE_Custom_Styles

Una vez que se haya agregado el código al archivo, haga clic en el botón Actualizar archivo para guardar los cambios. Si todo salió bien, debería ver que el menú desplegable de selección de estilos se ha agregado al editor visual de publicaciones de WordPress.

Sin embargo, aún no hemos terminado. Al observar los elementos del menú en esta nueva lista desplegable, estos son los estilos asociados con los otros botones del editor visual. Queremos agregue nuestros propios estilos a la lista.

Creando los estilos CSS para botones

En este tutorial, crearemos un botón para nuestros enlaces de texto, pero también podría crear fácilmente la decoración y el formato de cualquier otro tipo de elemento de página.

Ahora tenemos que Crea los estilos CSS para el botón. Puede crear su propio CSS o utilizar una de las muchas aplicaciones de generación de botones disponibles en línea. CSS Button Generator es una excelente opción, así que vaya al sitio web y cree rápidamente un botón y luego copie y pegue el CSS o use el ejemplo a continuación.

Ahora regrese a la página Apariencia> Editor y haga clic en ese style.css Archivo de la lista de archivos de la derecha.

Desplácese hasta la parte inferior del archivo nuevamente y pegue el botón CSS a continuación o use su propio CSS:

.linkButton {
-moz-box-shadow:inset 0px 1px 0px 0px #bbdaf7;
-webkit-box-shadow:inset 0px 1px 0px 0px #bbdaf7;
box-shadow:inset 0px 1px 0px 0px #bbdaf7;
background:-webkit-gradient( linear, left top, left bottom, color-stop(0.05, #79bbff), color-stop(1, #378de5) );
background:-moz-linear-gradient( center top, #79bbff 5%, #378de5 100% );
filter:progid:DXImageTransform.Microsoft.gradient(startColorstr="#79bbff", endColorstr="#378de5");
background-color:#79bbff;
-webkit-border-top-left-radius:0px;
-moz-border-radius-topleft:0px;
border-top-left-radius:0px;
-webkit-border-top-right-radius:0px;
-moz-border-radius-topright:0px;
border-top-right-radius:0px;
-webkit-border-bottom-right-radius:0px;
-moz-border-radius-bottomright:0px;
border-bottom-right-radius:0px;
-webkit-border-bottom-left-radius:0px;
-moz-border-radius-bottomleft:0px;
border-bottom-left-radius:0px;
text-indent:0;
border:1px solid #84bbf3;
display:inline-block;
color:#ffffff;
font-family:Trebuchet MS;
font-size:15px;
font-weight:bold;
font-style:normal;
height:40px;
line-height:40px;
width:100px;
text-decoration:none;
text-align:center;
text-shadow:1px 1px 0px #528ecc;
}

.linkButton:hover {
background:-webkit-gradient( linear, left top, left bottom, color-stop(0.05, #378de5), color-stop(1, #79bbff) );
background:-moz-linear-gradient( center top, #378de5 5%, #79bbff 100% );
filter:progid:DXImageTransform.Microsoft.gradient(startColorstr="#378de5", endColorstr="#79bbff");
background-color:#378de5;
}

.linkButton:active {
position:relative;
top:1px;
}

/* This button was generated using CSSButtonGenerator.com */

Actualice el archivo para guardar los cambios.

Agrega el estilo al menú desplegable

Ahora haga clic en el Features.php Archivo de nuevo y pegue el código a continuación al final del archivo.

// Add the Button CSS to the Dropdown Menu
// Callback function to filter the MCE settings
function my_mce_before_init_insert_formats( $init_array ) {

// Define the style_formats array
$style_formats = array(

// Each array child is a format with it's own settings
array(
'title' => 'Link Button',
'selector' => 'a',
'classes' => 'linkButton',
),
);

// Insert the array, JSON ENCODED, into 'style_formats'
$init_array['style_formats'] = json_encode( $style_formats );
return $init_array;
}

// Attach callback to 'tiny_mce_before_init'
add_filter( 'tiny_mce_before_init', 'my_mce_before_init_insert_formats' );
// end of part II

Observe estas líneas dentro de la matriz:

  • Título: este es el título que aparecerá en el menú desplegable
  • Selector: la ‘a’ se refiere al ancla y señala este estilo para los enlaces.
  • Clases: ese es el nombre de nuestra clase CSS para botones

Si tuviera que usar su propio CSS, la entrada de la clase sería lo que llama su propia clase de CSS. Sin embargo, en el ejemplo anterior, el estilo CSS del botón se llama linkButton.

Después de pegar el código, haga clic en el botón Actualizar archivo para guardar los cambios. Después de guardar el archivo, vaya al editor de publicaciones de WordPress y actualice la ventana para que los cambios surtan efecto. Ahora haga clic en el menú desplegable Estilos y debería ver una entrada titulada Botón de enlace.

Cómo peinar 05

Para aplicar el estilo CSS y crear el botón, es fácil Crea un enlace de texto en tu publicación, resalte el texto y luego elija el estilo del botón de vínculo en el menú. Los estilos no son visibles en la ventana del editor de publicaciones. Deberá obtener una vista previa de la publicación para ver el formato, que debería verse así:

Cómo peinar 06

Ahora, si necesita agregar un botón llamativo y atractivo a sus publicaciones o páginas, simplemente cree un enlace de texto y luego elija ese estilo en el menú desplegable.

Opciones ampliadas

Con suerte, puede pensar en otros usos excelentes para esta función. Puede agregar estilos adicionales al menú si lo desea. Pueden ser diferentes tipos de botones, formatear la apariencia del texto o cualquier otra cosa que pueda hacer con CSS.

Si desea crear un estilo de botón adicional y agregarlo al menú desplegable, simplemente cree otra entrada en la matriz (que se agregó a Features.php) y cambie el título y las líneas de clase:

array(
'title' => Bigger Button',
'selector' => 'a',
'classes' => 'biggerButton',
),

Luego agregue un nuevo estilo CSS al style.css Archivo. Si desea crear estilos para elementos que no son enlaces, también puede hacerlo. Para hacer esto, la segunda línea debe cambiarse para que coincida con el área a la que desea aplicar el estilo. Puede encontrar más información en esta página.

conexiones

Si todo esto suena bien en teoría, pero desea implementarlo más rápido sin editar ningún código, entonces estos dos complementos pueden ser de interés:

  • Estilos y formatos profesionales avanzados TinyMCE y TinyMCE
  • Estilos personalizados sencillos para WordPress

graduación

Ahora puede crear fácilmente botones de gran apariencia en WordPress simplemente seleccionando una opción de un menú desplegable en el editor visual de WordPress. Si tiene alguna dificultad o tiene alguna pregunta, simplemente deje un comentario a continuación.

¡Si te ha gustado no dudes en compartirlo!

Deja un comentario

Esta web utiliza cookies propias y de terceros para su correcto funcionamiento y para fines analíticos y para mostrarte publicidad relacionada con sus preferencias en base a un perfil elaborado a partir de tus hábitos de navegación. Al hacer clic en el botón Aceptar, acepta el uso de estas tecnologías y el procesamiento de tus datos para estos propósitos. Más información
Privacidad