Cargando



Personalizar el escritorio y administrador de Wordpress

En este tutorial vamos a ir aprendiendo a cambiar y personalizar el escritorio y administrador de Wordpress.



mar 21 2014 23:37
Profesional
abr 08 2014 20:42
Parte 3

Más opciones (Ultima Parte)


Los tipos personalizados de entrada de WordPress le permiten agregar sus propios tipos de datos al administrador de WordPress.



Continuamos viendo como personalizar el administrador de wordpress:

Elimina y añade opciones de la barra de Administración
Dentro de las personalizaciones que podemos realizar, podemos adaptar la barra de administración de una manera distinta a la predeterminada.

Para ello debemos enviar un array con varios parámetros dentro de una función

id: el id que aparecerá en el elemento HTML y que lo identifica
title: el texto que aparecerá en el menú de la barra
parent: el ID de la opción superior del menú, para el caso de submenú (opcional)
href: el enlace hacia donde irá el usuario al hacer click (opcional)
group: true (verdadero) si es un grupo (opcional)
meta: un array que incluye otras etiquetas, como: html, class, onclick, target, title, tabindex

En este caso añadimos varias opciones. Una es una pestaña que crearemos más adelante que llamamos Ayuda. Otras dos que son de posibles entradas personalizadas de Autos y la última que lleva al usuario a su página de autor de la web. Por otro lado hemos eliminado con remove_node las opciones que vienen por defecto, como logo y comentarios en los post.
Pondremos en el archivo functions.php:


function change_toolbar($wp_toolbar) {
global $current_user;
$instrucciones = get_admin_url() . '/admin.php?page=instrucciones';
$ver_autos = get_admin_url() . '//edit.php?post_type=autos';
$anadir_autos = get_admin_url() . '//post-new.php?post_type=autos';
$volver = esc_url( get_author_posts_url( $current_user->ID ) );

$wp_toolbar->remove_node('wp-logo');
$wp_toolbar->remove_node('comments');
$wp_toolbar->remove_node('new-content');
$wp_toolbar->remove_node('site-name');
$wp_toolbar->add_node(array(
'id' => 'volver_web',
'title' => 'Ir a mi página en la web',
'href' => $volver,
'meta' => array('target' => 'volver')
));
$wp_toolbar->add_node(array(
'id' => 'myhelp',
'title' => 'Ayuda',
'href' => $instrucciones,
'meta' => array('target' => 'help')
));
$wp_toolbar->add_node(array(
'id' => 'prendas',
'title' => 'Mi ropa',
'href' => $ver_prendas,
'meta' => array('target' => 'ver')
));
$wp_toolbar->add_node(array(
'id' => 'nueva_prenda',
'title' => 'Añadir ropa',
'href' => $anadir_prendas,
'meta' => array('target' => 'anadir')
));

}
   add_action('admin_bar_menu', 'change_toolbar', 999);

Crear una nueva pestaña en el menú de administración

Si necesitamos crear una nueva pestaña en el menú que está a la izquierda en el panel de administración de WordPress, vamos a suponer que queremos crear una página de instrucciones para nuestro cliente. Para ello podemos crear un plugin. Abrimos en wp-content/plugins una carpeta que se llame instrucciones y dentro creamos un archivo que se llame instrucciones.php que sería así:

<?php
/*
Plugin Name: Instrucciones de uso
Description: Para añadir una nueva opción en el menú con instrucciones
*/
add_action('admin_menu', 'my_plugin_menu');

function my_plugin_menu() {
add_menu_page( 'Instrucciones', 'Instrucciones', 'edit_posts', 'instrucciones', 'my_plugin_options' );
}

function my_plugin_options() {
if (!current_user_can('edit_posts')) {
wp_die( __('No tiene suficientes permisos para acceder a esta página.') );
} ?>
<div class="wrap">
<h1>Instrucciones</h1>

<!-- Aquí va todo el código HTML que preciséis -->
</div>
<?php }
?>

Recordemos que es un plugin por lo tanto hay que activarlo dentro del menu de plugins


Iconos personalizados en el menú del panel de administración


Si quieres puedes cambiar los iconos del panel de administración por otros más de tu gusto. Esto es especialmente útil para las entradas personalizadas. Necesitarás poner en functions.php esta función:

<? add_action( 'admin_head', 'wpt_portfolio_icons' );
function wpt_portfolio_icons() { ?>
<style type="text/css" media="screen">
#menu-postsautos .wp-menu-image {
background: url(<?php bloginfo('template_url') ?>/images/nuevo-icono.png) no-repeat 6px 6px !important;
}
#menu-posts-autos:hover .wp-menu-image, #menu-posts-autos.wp-has-current-submenu .wp-menu-image {
background-position:6px -16px !important;
}
#icon-edit.icon32-posts-autos {background: url(<?php bloginfo('template_url') ?>/images/nuevo-icono.png) no-repeat;}
</style>
<?php } ?>

¿Te ayudó este Tutorial?


Sin comentarios, sé el primero!

No esperes más y entra en Solvetic
Deja tus comentarios y aprovecha las ventajas de la cuenta de usuario ¡Únete!

X