Com utilitzar l’editor d’aparença a WordPress

wordpress-aspecte-editor.png


Fins ara, heu tingut l’oportunitat de personalitzar el CMS de WordPress mitjançant diversos editors fàcils d’utilitzar. El personalitzador us ha permès ambular mitjançant diferents opcions d’aparença que suportava el vostre tema. Però quan decidiu personalitzar el vostre lloc més enllà de les opcions donades, haureu de conèixer l’editor de l’aparença de WordPress.

Entre molts fitxers de WordPress que es poden modificar, n’hi ha dos d’especialment interessants. Estem parlant de la plantilla i els fitxers de fulls d’estil que podeu editar directament des de WordPress.

Abans de començar a plantejar-vos el canvi de codi pel vostre compte, us hauríem d’advertir que WordPress no crea còpies de seguretat dels fitxers afectats. Per tant, tots els canvis són permanents.

Com editar temes amb l’Editor d’aparença

Quan esteu preparat per obtenir més informació sobre WordPress i embrutar-vos les mans escrivint algun codi personalitzat, aneu a Aparició -> Editor. Aquest editor integrat us permet canviar el codi que es conserva a la plantilla i als fitxers de fulls d’estil del tema. Una vegada obert, el fitxer style.css que està utilitzant el tema actual es mostrarà automàticament al vostre davant.

Editor d'aparença de WordPress

Segons la configuració del vostre lloc, és possible que no pugueu accedir a alguns fitxers. Si és així, WordPress mostrarà un missatge d’advertència per dir-vos que heu de canviar els permisos de fitxer per a aquest fitxer. Per obtenir més informació, vegeu com canviar els permisos d’arxius a WordPress.

Com seleccionar fitxers per editar-los

Tan aviat com obriu l’editor, WordPress us mostrarà tots els fitxers de plantilla i fulls d’estil disponibles del tema actiu. Si voleu editar un tema inactiu, aneu a la part superior de la llista, trieu un element al menú desplegable i feu clic al botó “Selecciona”. WordPress carregarà tots els fitxers associats al tema escollit.

Plantilles

Per seleccionar un fitxer, aneu a la llista del costat dret de la finestra. Cadascun d’ells té un nom i nom de fitxer entre claudàtors. Per editar qualsevol dels fitxers, només cal que hi feu clic i el codi apareixerà a l’editor del costat esquerre.

Ves amb compte

Tot i que l’edició de fitxers de fulls d’estil és relativament segur, l’edició de fitxers PHP pot provocar errors que puguin inutilitzar el vostre lloc. Tingueu molta cura si decidiu editar fitxers PHP a l’Editor d’aparença.

Exemple: com canviar la mida del tipus de lletra mitjançant l’Editor d’aparença

Per mostrar-vos com funciona l’editor, estem a punt de canviar la mida del tipus de lletra del text en les publicacions del tema Vint-catorze.

Abans de continuar, voldríem desviar la vostra atenció durant un breu moment. A la versió 4.7, va introduir WordPress una nova funció que us permet afegir CSS personalitzats més ràpid. En lloc d’editar el codi a través de l’Editor d’aparició, us recomanem que s’obri Aparença -> Personalitzar -> CSS addicionals on podeu escriure qualsevol codi CSS personalitzat que vulgueu sense afectar directament la fulla d’estil.

Inspeccionar elements

Inspeccionar elements a Google Chrome

Si encara voleu editar el full d’estils directament a través de l’Editor d’aparició, aquí teniu què fer:

  1. Obre qualsevol publicació des del teu bloc
  2. Seleccioneu el text d’una publicació
  3. Feu clic amb el botó dret a la selecció i trieu “Inspeccionar” o “Inspeccionar element” (segons el navegador que feu servir)
  4. A la nova secció o finestra que es va obrir, cerqueu el ressaltat

    element

Inspecciona el paràgraf dels elements

La classe també ha de ser visible a la pestanya “Estils”. Si feu clic a l’estil, el navegador ha d’obrir el full d’estils i permetre editar el CSS directament des del navegador. Podeu utilitzar aquesta funció per provar el codi CSS personalitzat abans d’aplicar realment canvis al vostre lloc. Com que volíem modificar la mida del tipus de lletra del text a les publicacions, el nostre codi CSS és el nostre interès:

p {
font-size: 50px;
}

Aplica els canvis

Després de provar unes mides de lletra del navegador, recordeu la que més us ha agradat. A continuació, podeu continuar a l’Editor i modificar el tipus de lletra:

  1. Desplaceu-vos a Aparició -> Editor
  2. Si no estàs seleccionat, escolliu Full d’estil (style.css) fitxer de la llista del costat dret
  3. Trobeu la classe “p”
  4. Afegiu “mida de font: 50px;” (el codi complet hauria de semblar al que hem escrit anteriorment)
  5. Feu clic al botó “Actualitzar fitxer”

Modificar la mida del tipus de paràgraf

El nou estil es desa i ja esteu a punt per tornar a carregar el lloc. Obriu qualsevol publicació per veure el canvi de la mida del text. Si no veieu la diferència i esteu segur que heu ajustat el codi correctament, assegureu-vos que esborreu la memòria cau del navegador o premeu CTRL + F5 per actualitzar la pàgina.

Aneu amb compte quan treballeu amb l’Editor d’aparició

Aparença Editor és una eina increïble per fer canvis ràpids en els fitxers de fulls i fulls d’estil. Però, per treure el màxim partit, és important que esteu completament segurs sobre els canvis que feu. Qualsevol canvi als fitxers PHP pot bloquejar el vostre lloc fins que no us el solucioneu mitjançant FTP. Així, quan treballem amb fitxers PHP, et recomanem que treballis en un fitxer local que puguis transferir mitjançant FTP, mantenint sempre la còpia de seguretat original. Si feu modificacions als fulls d’estils, no us oblideu de les funcions addicionals de CSS que es van introduir fa uns mesos.

Jeffrey Wilson Administrator
Sorry! The Author has not filled his profile.
follow me
    Liked Liked