No puede mejorar la lista desplegable formatselect
. Pero puede mejorar con el gancho tiny_mce_before_init
la segunda lista desplegable styleselect
, hay un escondite en una instalación de WordPress predeterminada.
La documentación enumera todos los valores predeterminados y las posibilidades.
- inline: nombre del elemento en línea que se producirá, por ejemplo, "span". La selección de texto actual se incluirá en este elemento en línea.
- bloque: nombre del elemento de bloque que se producirá, por ejemplo, "h1". Los elementos de bloque existentes dentro de la selección se reemplazan con el nuevo elemento de bloque.
- selector - patrón de selector CSS 3 para buscar elementos dentro de la selección por. Esto se puede usar para aplicar clases a elementos específicos o cosas complejas como filas impares en una tabla.
- classes - Lista de clases separadas por espacios para aplicar los elementos seleccionados o el nuevo elemento inline / block.
- estilos: nombre / objeto de valor con elementos de estilo CSS para aplicar, como color, etc.
- atributos: nombre / objeto de valor con atributos para aplicar a los elementos seleccionados o al nuevo elemento de línea / bloque.
- exacto: deshabilita la combinación de estilos similares
característica cuando se utiliza. Esto es necesario para algunos problemas de herencia CSS
como texto-decoración para subrayar / tachado.
- wrapper - Estado que indica que el formato actual es un formato contenedor para bloque
elementos. Por ejemplo, un envoltorio div o blockquote.
El botón de estilo
Tenga en cuenta que, de forma predeterminada, el menú desplegable Estilo está oculto en WordPress. Al principio, agregue el botón para formatos personalizados a una barra de menú de TinyMCE, en el ejemplo de la línea 2 con gancho mce_buttons_2
.
add_filter( 'mce_buttons_2', 'fb_mce_editor_buttons' );
function fb_mce_editor_buttons( $buttons ) {
array_unshift( $buttons, 'styleselect' );
return $buttons;
}
Los estilos personalizados
Luego mejora el menú desplegable de este botón. También es útil la ampliación a través de un valor adicional en la matriz, consulte codex para este ejemplo.
/**
* Add styles/classes to the "Styles" drop-down
*/
add_filter( 'tiny_mce_before_init', 'fb_mce_before_init' );
function fb_mce_before_init( $settings ) {
$style_formats = array(
array(
'title' => 'Download Link',
'selector' => 'a',
'classes' => 'download'
),
array(
'title' => 'My Test',
'selector' => 'p',
'classes' => 'mytest',
),
array(
'title' => 'AlertBox',
'block' => 'div',
'classes' => 'alert_box',
'wrapper' => true
),
array(
'title' => 'Red Uppercase Text',
'inline' => 'span',
'styles' => array(
'color' => 'red', // or hex value #ff0000
'fontWeight' => 'bold',
'textTransform' => 'uppercase'
)
)
);
$settings['style_formats'] = json_encode( $style_formats );
return $settings;
}
Resultado

Menúdesplegablemejorado
Tambiénpuedemejorarelmenúdesplegableconunmenúdeárbol.Creelavardesdelafuentedeejemploanteriorconmásestructuraenlamatriz,comolafuentedeseguimiento.
$style_formats=array(array('title'=>'Headers','items'=>array(array('title'=>'Header1','format'=>'h1','icon'=>'bold'),array('title'=>'Header2','format'=>'h2','icon'=>'bold'))),array('title'=>'DownloadLink','selector'=>'a','classes'=>'download'));
Para obtener más posibilidades y parámetros, consulte los valores predeterminados del campo desplegable Formato de estilo (escriba en javascript).
var defaultStyleFormats = [
{title: 'Headers', items: [
{title: 'Header 1', format: 'h1'},
{title: 'Header 2', format: 'h2'},
{title: 'Header 3', format: 'h3'},
{title: 'Header 4', format: 'h4'},
{title: 'Header 5', format: 'h5'},
{title: 'Header 6', format: 'h6'}
]},
{title: 'Inline', items: [
{title: 'Bold', icon: 'bold', format: 'bold'},
{title: 'Italic', icon: 'italic', format: 'italic'},
{title: 'Underline', icon: 'underline', format: 'underline'},
{title: 'Strikethrough', icon: 'strikethrough', format: 'strikethrough'},
{title: 'Superscript', icon: 'superscript', format: 'superscript'},
{title: 'Subscript', icon: 'subscript', format: 'subscript'},
{title: 'Code', icon: 'code', format: 'code'}
]},
{title: 'Blocks', items: [
{title: 'Paragraph', format: 'p'},
{title: 'Blockquote', format: 'blockquote'},
{title: 'Div', format: 'div'},
{title: 'Pre', format: 'pre'}
]},
{title: 'Alignment', items: [
{title: 'Left', icon: 'alignleft', format: 'alignleft'},
{title: 'Center', icon: 'aligncenter', format: 'aligncenter'},
{title: 'Right', icon: 'alignright', format: 'alignright'},
{title: 'Justify', icon: 'alignjustify', format: 'alignjustify'}
]}
];
Añadir hoja de estilo personalizada al editor
Ahora es el último punto, que incluye el css personalizado para estos formatos, a través del gancho mce_css
.
/**
* Apply styles to the visual editor
*/
add_filter( 'mce_css', 'fb_mcekit_editor_style');
function fb_mcekit_editor_style($url) {
if ( ! empty( $url ) )
$url .= ',';
// Retrieves the plugin directory URL
// Change the path here if using different directories
$url .= trailingslashit( plugin_dir_url( __FILE__ ) ) . '/my-editor-styles.css';
return $url;
}
No se olvide de agregar estas reglas de la hoja de estilo también a la hoja de estilo de front-end.
Eliminar el botón de formato
Como mejora, puede eliminar el botón desplegable formatselect
mediante la verificación del valor en la matriz de botones. Agregue la fuente de seguimiento a la función fb_mce_editor_buttons
en el gancho mce_buttons_2
.
$value = array_search( 'formatselect', $buttons );
if ( FALSE !== $value ) {
foreach ( $buttons as $key => $value ) {
if ( 'formatselect' === $value )
unset( $buttons[$key] );
}
}