Cómo usar el Editor de apariencia en WordPress

wordpress-apariencia-editor.png


Hasta ahora, ha tenido la oportunidad de personalizar WordPress CMS a través de varios editores fáciles de usar. El Personalizador le ha permitido vender diferentes opciones de apariencia compatibles con su tema. Pero cuando decida personalizar su sitio más allá de las opciones dadas, debe saber sobre el Editor de apariencia de WordPress.

Entre muchos archivos en WordPress que se pueden modificar, hay dos particularmente interesantes. Estamos hablando de los archivos de plantilla y hoja de estilo del tema que puede editar directamente desde WordPress.

Incluso antes de comenzar a considerar cambiar el código por su cuenta, debemos advertirle que WordPress no crea copias de seguridad de los archivos afectados. Entonces, cualquier cambio es permanente.

Cómo editar temas con el Editor de apariencia

Cuando esté listo para aprender más sobre WordPress y ensuciarse las manos escribiendo un código personalizado, navegue hasta Apariencia -> Editor. Este editor incorporado le permite cambiar el código guardado en los archivos de plantilla y hoja de estilo del tema. Una vez que lo abra, el archivo style.css que usa su tema actual se mostrará automáticamente frente a usted.

Editor de apariencia de WordPress

Dependiendo de la configuración de su sitio, es posible que no pueda acceder a algunos archivos. Si es así, WordPress mostrará un mensaje de advertencia para indicarle que necesita cambiar los permisos de archivo para ese archivo en particular. Para obtener más información, vea Cómo cambiar los permisos de archivos en WordPress.

Cómo seleccionar archivos para editar

Tan pronto como abra el Editor, WordPress le mostrará todas las plantillas disponibles y los archivos de hoja de estilo del tema activo. Si desea editar un tema inactivo, vaya a la parte superior de la lista, elija un elemento del menú desplegable y haga clic en el botón “Seleccionar”. WordPress luego cargará todos los archivos asociados con el tema elegido.

Plantillas

Para seleccionar un archivo, vaya a la lista en el lado derecho de la ventana. Cada uno tiene un nombre y un nombre de archivo entre paréntesis a continuación. Para editar cualquiera de los archivos, simplemente haga clic en él. y el código aparecerá en el editor del lado izquierdo.

Ten cuidado

Si bien la edición de archivos de hojas de estilo es relativamente segura, la edición de archivos PHP puede causar errores que pueden inutilizar su sitio. Tenga mucho cuidado si decide editar archivos PHP desde el Editor de Apariencia.

Ejemplo: Cómo cambiar el tamaño de fuente a través del Editor de Apariencia

Para mostrarle cómo funciona el editor, estamos a punto de cambiar el tamaño de fuente del texto en las publicaciones en el tema Veinte diecisiete.

Antes de continuar, nos gustaría desviar su atención por un breve momento. En la versión 4.7, WordPress introdujo Una nueva característica que le permite agregar CSS personalizado mas rapido. En lugar de editar el código a través del Editor de Apariencia, sugerimos abrir Apariencia -> Personalizar -> CSS adicional donde puede escribir cualquier código CSS personalizado que desee sin afectar directamente la hoja de estilo.

Inspecciona elementos

Inspeccionar elementos en Google Chrome

Si aún desea editar la hoja de estilo directamente a través del Editor de apariencia, esto es lo que debe hacer:

  1. Abre cualquier publicación de tu blog
  2. Selecciona el texto de una publicación
  3. Haga clic derecho en la selección y elija “Inspeccionar” o “Inspeccionar elemento” (según el navegador que utilice)
  4. En la nueva sección o ventana que se abrió, encuentre el resaltado

    elemento

Inspeccionar el párrafo de elementos

La clase también debe estar visible en la pestaña “Estilos”. Si hace clic en el estilo, su navegador debe abrir la hoja de estilo y permitirle editar el CSS directamente desde el navegador. Puede usar esta función para probar el código CSS personalizado antes de aplicar los cambios a su sitio. Como queríamos modificar el tamaño de fuente del texto en las publicaciones, nos interesa el siguiente código CSS:

pags {
tamaño de fuente: 50px;
}

Aplicar cambios

Después de probar algunos tamaños de fuente desde el navegador, recuerde el que más le haya gustado. Luego puede proceder al Editor y modificar la fuente:

  1. Navegar a Apariencia -> Editor
  2. Si aún no está seleccionado, elija Hoja de estilo (style.css) archivo de la lista en el lado derecho
  3. Encuentra la clase “p”
  4. Agregue “font-size: 50px;” (todo el código debería parecerse al que escribimos anteriormente)
  5. Haga clic en el botón “Actualizar archivo”

Modificar el tamaño de letra del párrafo

Se guarda el nuevo estilo y está listo para volver a cargar el sitio. Abra cualquier publicación para ver el cambio en el tamaño del texto. Si no puede ver la diferencia y está seguro de haber ajustado el código correctamente, asegúrese de que borrar el caché del navegador o presionar CTRL + F5 para actualizar la página.

Tenga cuidado al trabajar con el Editor de apariencia

Appearance Editor es una herramienta increíble para realizar cambios rápidos en plantillas y archivos de hojas de estilo. Pero para aprovecharlo al máximo, es importante que esté completamente seguro de los cambios que está realizando. Cualquier cambio en los archivos PHP puede bloquear su sitio hasta que los arregle a través de FTP. Por lo tanto, cuando trabaje con archivos PHP, le sugerimos que trabaje en un archivo local que puede transferir a través de FTP mientras mantiene la copia de seguridad original en todo momento. Si realiza modificaciones en las hojas de estilo, no se olvide de las funciones CSS adicionales que se introdujeron hace unos meses..

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