Com personalitzar el vostre Tauler de control de WordPress

Com personalitzar el vostre Tauler de control de WordPress

Cotxes a mida. Us portaran des del punt A fins a B com qualsevol altre automòbil. Estan fabricats amb els mateixos materials i cremen galons de gas igual que qualsevol altre vehicle motoritzat. No obstant això, nosaltres (o almenys els aficionats al cotxe entre nosaltres) tenim un profund amor pel cotxe a mida. Per què?


  • Tenen un aspecte millor que els seus homòlegs rectes en la línia de muntatge
  • Estan optimitzats per obtenir un millor rendiment

WordPress és un dels vehicles més grans que podeu fer servir per aconseguir els vostres somnis en línia. Inclou una taula de comandaments excel·lent i, de manera excepcional, WordPress us ajudarà i / o els vostres clients a crear bons llocs web en molt poc temps.

Però el tauler d’administració de WordPress és massa “mainstream” per tenir aparença i aspecte. Vull dir, tot i que és bonic, no té exactament un estil personal. És una mica genèric i probablement no impressionarà a un client que hagi utilitzat la plataforma abans. Heck, no impressionarà a un client que agraeix l’estil personal o alguna semblança de marca.

D’altra banda, els taulers de taula personalitzats de WordPress són personals i proporcionaran als vostres clients el factor addicional que se senti més desitjós. Podeu crear la vostra marca o ajustar el quadre de comandament de WordPress segons les necessitats del vostre client, deixant-vos un producte fantàstic que comporta un gran embalatge: el vostre propi embalatge personalitzat. A la publicació d’avui, farem:

  • Elimineu widgets i menús innecessaris per crear un quadre de comandament personalitzat més net i lleuger
  • Personalització de l’enllaç del peu de pàgina de tauler
  • Desfer-se d’elements genèrics com el logotip de WordPress
  • Toqueu les opcions de pantalla
  • Toqueu uns quants complements que podeu utilitzar per personalitzar el vostre tauler

Al final d’aquesta publicació, haureu de poder crear taulers de comandaments de WordPress bells i personals que ressonin amb els vostres clients o reforcin la vostra marca en línia. Gaudeix fins al final i ensuma amb els teus pensaments a la secció de comentaris que hi ha a continuació!

Espereu! Abans de començar, creeu un tema infantil

Podeu editar els fitxers temàtics bàsics o utilitzar l’Editor a l’aparença del tauler de control del tema, però això significaria que no actualitzeu mai més el tema de WordPress. Abans de fer cap canvi als fitxers de temes, hauríeu de fer-ho crear un tema infantil. D’aquesta manera, quan actualitzeu el tema bàsic, tots els canvis quedaran al tacte. A continuació, es mostren alguns passos ràpids per configurar-vos només per a aquest tutorial, però també tenim una guia completa de creació de temes infantils o podeu fer referència a la Còdex de WordPress per obtenir més ajuda.

  1. Creeu la carpeta del tema infantil: Inicieu la sessió a la instal·lació de WordPress i localitzeu-la wp-content / topics / yourthemename carpeta. A aquesta carpeta, afegiu una carpeta nova i poseu-hi el nom de “tema infantil” o “yourthemename-child” (teniu la idea).
  2. Creeu el fitxer CSS del vostre tema fill: Ara que teniu una nova carpeta de tema infantil, podeu afegir fitxers nous per modificar o substituir l’estil i la funció del vostre tema actual. Primer, creeu un fitxer style.css nou dins de la carpeta de temes secundària i, després, editeu el fitxer nou per afegir informació bàsica d’encapçalament (de manera que vosaltres o els desenvolupadors posteriors sabeu què passa):
    / *---------------------------------------------------
    Nom del tema: El nom de la carpeta del tema del vostre fill aquí
    Descripció: tema infantil per a nom del tema dels pares aquí
    Autor: El vostre nom aquí
    Plantilla: Nom del tema dels pares aquí
    ----------------------------------------------------* /

    Després de l’encapçalament, podeu afegir tot el vostre CSS fantàstic per canviar l’aspecte del tema pare amb el tema del vostre fill.

  3. Creeu el fitxer PHP del tema del vostre fill: A la carpeta del tema infantil nou, creeu un fitxer functions.php. A continuació, editeu el fitxer de noves funcions per afegir codi que carregarà l’estil del tema original “pare”:

    Si us plau, assegureu-vos d’afegir els retocs de function.php després de l’última etiqueta PHP oberta.

Per descomptat, podeu afegir molt més al tema del vostre fill per fer canvis a les plantilles per a la vostra capçalera, peu de pàgina o qualsevol altra cosa realment. Però, als propòsits d’aquest tutorial, esteu definit. Llavors, anem …

Eliminació de widgets de tauler de comandament de WordPress no necessaris

Un cop inicieu la sessió al vostre tauler de control de WordPress, notareu un parell de seccions (ginys) com ara D’un cop d’ull, Estadístiques del lloc, Esborrany ràpid, i Notícies de WordPress entre altres. La majoria d’aquests ginys de tauler s’afegeixen per WordPress, però el nombre de widgets mostrats pot anar pujant o baixant segons el vostre tema i / o complements. Alguns temes i complements afegeixen els seus propis widgets al tauler.

Tot i que alguns d’aquests ginys són útils, els vostres clients han de veure-ho? Necessiteu veure cadascun d’aquests ginys cada vegada que inicieu la sessió? Potser havíeu de posar-vos amb els ginys perquè no teníeu manera de desfer-vos. Avui és el vostre dia de sort. Podeu suprimir tants ginys del tauler de comandament que vulgueu mitjançant algunes línies de codi:

// Elimina els widgets del tauler de control
function remove_dashboard_meta () {
if (! current_user_can ("manage_options")) {
remove_meta_box ("dashboard_income_links", "dashboard", "normal");
remove_meta_box ('dashboard_plugins', 'dashboard', 'normal');
remove_meta_box ('dashboard_primary', 'dashboard', 'normal');
remove_meta_box ('dashboard_secondary', 'dashboard', 'normal');
remove_meta_box ("dashboard_quick_press", "tauler de comandament", "lateral");
remove_meta_box ("dashboard_recent_drafts", "tauler de comandament", "lateral");
remove_meta_box ('dashboard_recent_comments', 'dashboard', 'normal');
remove_meta_box ('dashboard_right_now', 'dashboard', 'normal');
remove_meta_box ('dashboard_activity', 'dashboard', 'normal');
}
}
add_action ("admin_init", "remove_dashboard_meta"); 

Copieu el codi anterior al fitxer functions.php del tema del vostre fill (que es troba a: wp-content / topics / yourthemename / child-theme / functions.php) i, desant els canvis, s’eliminaran tots els widgets del tauler excepte els afegits pel vostre tema o complements. Des del codi anterior, tots els usuaris amb menys de capacitats d’administrador no veureu els ginys gràcies a aquesta part del codi:

if (! current_user_can ("manage_options"))

… que comprova si l’usuari té la capacitat de “gestionar opcions” només disponible per als administradors. Potser no voldreu eliminar el tauler de control de tots els ginys. També podeu utilitzar el següent codi:

// Creeu la funció per utilitzar al ganxo d'acció
function wpexplorer_remove_dashboard_widget () {
remove_meta_box ("dashboard_quick_press", "tauler de comandament", "lateral");
}
add_action ('wp_dashboard_setup', 'wpexplorer_remove_dashboard_widget');

Copieu el codi anterior al fitxer functions.php i deseu els canvis per desfer-vos dels fitxers Esborrany ràpid widget Per eliminar qualsevol altre widget, només cal que el substituïu “Dashboard_quick_press”, “tauler de control”, “lateral” amb la posta corresponent per a cada widget. Altres trucs de ginys estàndards inclouen:

  • dashboard_incoming_links
  • dashboard_plugins
  • quadre de comandament_primari
  • dashboard_secondary
  • dashboard_quick_press
  • dashboard_recent_drafts
  • dashboard_recent_comments
  • dashboard_right_now
  • quadre de comandament_activitat

Però és possible que hàgiu afegit widgets addicionals pel vostre tema principal, altres complements que hagueu instal·lat o fins i tot el vostre hosting (WP Engine n’hi afegeix una trucada wpe_dify_news_feed). Per trobar el truc per a aquests widgets afegits, utilitzeu un inspector del navegador (ens agrada el de Chrome, és una part de les eines per a desenvolupadors web predeterminades, de manera que només cal fer clic amb el botó dret sobre un element i escollir “inspeccionar”) i copiar-ho. identificació div per al giny que voleu suprimir.

Addició de widgets de tauler de WordPress

Ara que podeu eliminar els ginys del tauler segons us agradi, proveu d’afegir els nostres propis widgets personalitzats. Podeu mostrar qualsevol cosa que vulgueu amb el vostre widget, de manera que res no us impedeix crear el tauler personalitzat dels vostres somnis. La millor part és que és fàcil per afegir un giny al tauler de control de WordPress. Afegiu el codi següent al vostre nom wp-content / topics / yourthemename / child-theme / functions.php dossier:

/ **
* Afegir un giny al tauler.
*
* Aquesta funció està connectada a l'acció 'wp_dashboard_setup' següent.
* /
function wpexplorer_add_dashboard_widgets () {
wp_add_dashboard_widget (
'wpexplorer_dashboard_widget', // Widget slug.
"El meu widget del tauler personalitzat", // Títol.
'wpexplorer_dashboard_widget_function' // Funció de visualització.
);
}
add_action ('wp_dashboard_setup', 'wpexplorer_add_dashboard_widgets');

/ **
* Creeu la funció per produir el contingut del vostre widget Tauler.
* /
function wpexplorer_dashboard_widget_function () {
eco "Hola, sóc un fantàstic widget de tauler. Editeu-me!";
}

Guardar canvis. Per descomptat, podeu editar el connector segons les vostres necessitats. Posa el teu HTML, PHP o qualsevol altre lloc on tinguis:

eco "Hola, sóc un gran widget del tauler. Editeu-me!";

El vostre giny personalitzat nou apareixerà a la part inferior absoluta (per sota de tots els ginys), que podria estar fora de la finestra de visualització si teniu molts ginys. Tanmateix, podeu arrossegar i deixar anar el giny a la part superior (o en qualsevol altre lloc)..

Pàgina personalitzada de tauler de WordPress

Suposem que està interessat en crear un quadre de comandament totalment diferent. Un que ve amb el vostre propi HTML, PHP i fins i tot un estil personalitzat. Si voleu anar més enllà de només afegir / treure widgets del tauler de control, consulteu la pàgina Com crear una pàgina de tauler personalitzada de WordPress per Remi Corson.

Ha creat un gran complement que us ajudarà a accelerar la creació de la vostra pròpia pàgina de tauler personalitzada (custom-dashboard.php). Heu de millorar les vostres habilitats de desenvolupament de PHP per buscar el complement per adaptar-vos a les vostres necessitats específiques. Tot plegat, ho vaig intentar Tauler de control personalitzat i és increïble. El vostre tauler de control personalitzat podria ser una instal·lació fora :). Voleu personalitzar el vostre missatge de benvinguda, consulta la nostra publicació a Personalització del missatge de benvinguda del Tauler de comandament de WordPress.

Eliminació dels menús del Tauler de control de WordPress

Podem afegir o eliminar ginys de tauler de comandament de WordPress i fins i tot canviar la aparença del tauler (gràcies a Remi). Ara passem a la següent part: eliminar els elements del menú no desitjats.

Per què? Si voleu suprimir alguns menús per proporcionar als clients un tauler més dèbil i evitar que accedeixin a zones “restringides”. Si un client no coneix el seu camí per WordPress, pot acabar trencant el lloc si visita i canvia les opcions de pàgines com Configuració o Complements. Afegiu el codi següent al fitxer functions.php:

funció wpexplorer_remove_menus () {
remove_menu_page ('theme.php'); // Aparició
remove_menu_page ('plugins.php'); // Complements
remove_menu_page ('usuaris.php'); // Usuaris
remove_menu_page ('tools.php'); // Eines
remove_menu_page ('options-general.php'); // Configuració
}
add_action ("admin_menu", "wpexplorer_remove_menus");

El codi anterior elimina els enllaços del menú a Configuració, complements, aparença, usuaris i eines per a tots els usuaris. També podeu suprimir submenús. A continuació, es mostra el codi d’exemple que elimina el submenú de widgets a l’aparença:

funció wpexplorer_adjust_the_wp_menu () {
$ pàgina = remove_submenu_page ('topics.php', 'widgets.php');
}
add_action ("admin_menu", "wpexplorer_adjust_the_wp_menu", 999);

A l’exemple anterior, els usuaris accedeixen a tots els submenús de l’aparença, excepte els ginys. Podeu suprimir tants menús o submenús que vulgueu. Recordeu que això no impedirà als usuaris accedir directament a aquestes pàgines. Vull dir que si un usuari entra, per exemple yourdomain.com/wp-admin/options-general.php, accedirà a la vostra pàgina de configuració. Bona cosa que la majoria d’usuaris no molestaran si l’element no es troba al menú.

Si no podeu o no voleu editar el fitxer funcions.php, podeu instal·lar-lo sempre Complement de l’editor de menús d’administrador, que us proporciona un control complet sobre els vostres menús. S’ofereix amb un parell de funcions fantàstiques, incloent-hi restriccions de menú basades en papers, capacitat d’amagar menús i crear elements de menú personalitzats entre altres funcions més interessants..

Personalització del peu de pàgina de tauler de WordPress

En aquest moment, hem personalitzat de forma “significativa” el tauler de control de l’administrador de WordPress. Només té dret a agafar una mica de crèdit per a tota la feina brillant que feu. Personalització del peu de pàgina (“Gràcies per crear amb WordPress.”) Pot ajudar-vos a reforçar la vostra marca (o la del client). Canviem el peu de pàgina per “Construït amb amor pel vostre nom”. Afegeix el fragment següent al fitxer funcions.php i desa els canvis següents:

// Peu d’administració personalitzat
funció wpexplorer_remove_footer_admin () {
ressò 'Construït amb amor per WPExplorer';
}
add_filter ('admin_footer_text', 'wpexplorer_remove_footer_admin');

Substituïu “El vostre nom” pel vostre nom, lloc web, adreça de correu electrònic, etc. i el vostre domini.com pel vostre nom de domini real. Continuant …

Personalització del formulari d’inici de sessió

Fins ara, teniu tot el necessari per personalitzar el vostre tauler d’administració de WordPress. Anem un pas més i personalitzeu la pàgina d’inici de sessió, de manera que els vostres usuaris puguin tenir una experiència realment personalitzada des del moment. Al cap i a la fi, per què us molesten en personalitzar el vostre tauler de WordPress només per deixar-vos la pàgina d’inici de sessió?

Amb aquesta pàgina, hem de personalitzar dos elements: el logotip predeterminat de WordPress i l’enllaç wordpress.org que s’hi inclou. Però abans que us mostri el codi ��, podeu personalitzar la vostra pàgina d’inici de sessió fàcilment mitjançant qualsevol d’aquests 15 millors complements de pàgina d’inici de sessió personalitzada per a WordPress. Ara, per obtenir la sensació de boig càlid que es deriva de jugar amb el codi, copieu el següent a les vostres funcions.php:

funció wpexplorer_login_logo () {?>

Substituïu logo.png pel vostre nom de fitxer de logotip personalitzat, al qual hauríeu de penjar-lo primer wp-content / topics / yourtheme / images. Mantingueu el logotip personalitzat per sota de 80 x 80 píxels, tot i que podeu canviar-lo amb alguns CSS personalitzats. Amb el logotip d'inici de sessió personalitzat al seu lloc, és hora de canviar l'enllaç que inclou el logotip original de WordPress. Enllacem el nou logotip amb el vostre lloc web. Copieu aquest codi al fitxer functions.php i deseu els canvis:

funció wpexplorer_login_logo_url () {
tornar esc_url (home_url ('/'));
}
add_filter ('login_headerurl', 'wpexplorer_login_logo_url');

funció wpexplorer_login_logo_url_title () {
retorni "El vostre nom i informació del lloc";
}
add_filter ('login_headertitle', 'wpexplorer_login_logo_url_title');

Recordeu, sempre podeu canvieu la vostra pàgina d’inici de sessió com vulgueu mitjançant CSS. O simplement, podeu començar amb un tema fantàstic com el tema de WordPress multiusos i responsius, que inclou opcions integrades per a una pàgina d'inici de sessió personalitzada i la marca de llocs.

Personalització del Tauler de control de WordPress: Opcions de pantalla

Si no voleu capbussar-vos en codi o instal·lar plugins, podeu aprofitar les Opcions de pantalla per crear un quadre de comandament personalitzat de WordPress. Només cal que inicieu la sessió al vostre tauler de WordPress i, a la part superior de la pantalla a la dreta, trobareu un menú desplegable Opcions de pantalla. Feu clic sobre això per ampliar i comprovar / desmarcar per activar / desactivar widgets. A continuació, podeu arrossegar i deixar anar els ginys per ordenar-los com vulgueu.

L’únic desavantatge és que aquest mètode guarda la configuració de cada usuari, el que significa que no us farà gaire bé si teniu un bloc multi-autor. A més, no podeu evitar que els usuaris puguin tornar a activar els ginys a voluntat.

Bonus: utilitzeu un complement

Vam dedicar la majoria del temps a cobrir opcions de codi. Però si teniu pinya de temps, un complement us pot ser útil.

Opció 1: Extreme Tweaker Plugin per a WordPress

Ultimate Tweaker per a WordPress

Primer cap amunt, una mica diferent: el Ultimate Tweaker per a WordPress, disponible a CodeCanyon. L'opció de plugin veritablement final per editar l'administrador de WordPress (algunes altres funcions de WordPress).

La majoria de plugins suporten la funcionalitat per a un propòsit específic, però no per a Ultimate Tweaker; aquest complement és un versàtil versàtil, com mai abans. Essencialment, Ultimate Tweaker és compatible amb més de 240 perfils, eines i eines de WordPress que us faciliten la vida. Això la fa útil de diverses maneres: millorar l'eficiència, eliminar les parts de WordPress que et molesten i ampliar la funcionalitat bàsica de WordPress més enllà del que creies que era possible.

Aquests 240 hacks són molt diversos i es poden desglossar en 35 categories diferents. Per a fer-vos una idea del que Ultimate Tweaker pot fer, aquí teniu alguns dels seus “hacks:”

  • Afegiu un logotip a sobre d’un menú de la barra lateral
  • Rebrandeu el quadre de comandament i la pàgina d’inici de sessió de WordPress
  • Desactiva el botó amb el botó dret o Imprimeix la pantalla del lloc web
  • Millora la seguretat afegint reCaptcha 2 a la pantalla d’inici de sessió
  • Estableix la qualitat JPEG per reduir la mida del fitxer de les imatges
  • Habiliteu els dreceres en els ginys de text
  • Creeu un nombre mínim de paraules per a les publicacions
  • Desactiveu la contrasenya incorrecta "shake" a la pantalla d'inici de sessió
  • Afegiu el codi de Google Analytics al vostre lloc web
  • 19 dreceres noves de teclat per a WordPress
  • Creeu una pàgina personalitzada 404
  • Desactiva les actualitzacions automàtiques de WordPress

Molts d’aquests hacks de WordPress són coses que tots hem recorregut a Google en algun moment o altre. La majoria són relativament menors per si mateixos, però amb una llista completa de diversos centenars, col·lectivament el connector pot oferir molt valor. La comunitat de WordPress sol ser molt vocal sobre el que els agradaria veure des del nucli de WordPress, així que espero que els desenvolupadors escoltin la comunitat i implementin alguns dels seus suggeriments en futures actualitzacions d’aquest complement..

Opció 2: Tema d'administració de WordPress: Forest - Revolution

Tema de l'administrador de bosc WordPress

Voleu només canviar la marca del backend del vostre lloc web? Tot i que normalment recomanem utilitzar una mica de codi, també podeu utilitzar un complement. Si us avoreu de l'aparença del tauler de control per defecte, el tema de l'administrador de Forest WordPress us permet donar una mica de cara. I per només 9 dòlars. Forest no canviarà la manera de fer tasques familiars a WordPress, com ara afegir publicacions / pàgines, sinó que farà WordPress mira millor quan les feu! El complement també us permet modificar la pàgina d’inici de sessió per defecte de WordPress.

Captura de pantalla del tema d'Admin Forest

Forest us permet afegir la vostra pròpia imatge de fons al tauler de WordPress, o bé podeu utilitzar una de les sis imatges proporcionades de forma gratuïta, inclosa la de la captura de pantalla de dalt. Podeu personalitzar el tauler de comandament amb la vostra pròpia creativitat (utilitzant colors il·limitats) o utilitzant un dels esquemes de colors predeterminats de WordPress. Podeu personalitzar més el tauler de treball triant la vostra tipografia entre més de 600 tipus de lletra de Google. El complement suporta una pell clara i fosca i podeu configurar els nivells d’opacitat de cada element. Si hi ha alguns botons al tauler de control que no utilitzeu, fins i tot podeu ocultar-los. Això és excel·lent per als llocs web de clients on hi ha massa opcions que els poden sobrecarregar..

Nota: Forest no canviarà en cap cas l’aspecte del vostre lloc web en viu, sinó només per al fons.

Recursos per personalitzar el Tauler de control de WordPress

Voleu obtenir més informació sobre com personalitzar el tauler de control de WordPress? Aquí teniu uns quants recursos addicionals per al vostre conjunt d’eines professionals:

Over to You ...

La creació d'un tauler de control personalitzat de WordPress és una de les millors maneres d’enfortir la imatge de marca i proporcionar una experiència personalitzada als vostres clients. És senzill i no passarà molt del temps. Llavors, què esteu esperant? Obteniu personalització.

A part això, què heu après aquí avui? Alguna vegada heu creat un tauler de control personalitzat de WordPress? Compartiu-lo amb la nostra comunitat desitjosa en els comentaris que es mostren a continuació. Salutacions!

Jeffrey Wilson Administrator
Sorry! The Author has not filled his profile.
follow me
    Like this post? Please share to your friends:
    Adblock
    detector
    map