WordPress: cómo editar plantillas CSS y PHP

¿Estás pensando en personalizar plantillas CSS y PHP en WordPress? Este tutorial lo ayudará a editar archivos de temas como functions.php o style.css a través del editor de máscaras.

WordPress: Cómo personalizar plantillas CSS y PHP

Editar PHP a través del editor de temas

En WordPress, la herramienta Editor de temas se usa para editar archivos de plantilla. Esta función le permite editar directamente los archivos CSS y PHP individuales de la plantilla que está utilizando. Puede usarlo, por ejemplo, para editar el archivo functions.php .

Aspecto del tema del editor de WordPress
Editor de temas – Apariencia
💡 Tip: Choosing the right hosting is crucial for a fast website ⏱ . I recommend betting on verified quality ➡️ Bluehost or SiteGround.

Advertencia de los riesgos de la edición directa de plantillas

La herramienta Editor debe utilizarse con precaución. Esto se debe a que si realiza cambios en los archivos que afectan la apariencia de su sitio de manera incorrecta, es posible que el sitio no se muestre en absoluto. En el mejor de los casos, se mostrará incorrectamente.

WordPress mismo te notifica con una ventana emergente con el mensaje:

Parece que estás haciendo ediciones directas a tu tema a través del tablero de WordPress. ¡Recomendamos no hacerlo! La edición directa de temas puede hacer que su sitio no funcione y puede perderse cuando se actualice. Si necesita modificar algo más que temas CSS, puede intentar crear un tema derivado .

Si decide continuar con sus ediciones directas, use el administrador de archivos para crear una copia con un nuevo nombre, dejando el original como está. De esta manera, puede restaurar la versión funcional si algo sale mal.

Plantilla de editor de notificaciones de WordPress
Notificación de edición de plantilla directa

Si no tienes conocimientos de HTML, CSS o PHP, los cambios que hagas pueden hacer que la página se caiga por completo. Por lo tanto, recomiendo usar esta función solo si tiene los conocimientos necesarios.

Sugerencia: si logra eliminar el sitio, inicie sesión a través de ftp en el archivo que editó y deshaga el cambio.

Cómo editar plantillas CSS de WordPress

Es mejor usar la función de edición de CSS para editar el estilo del tema, donde también puede realizar un seguimiento de los cambios en vivo. Puede usarlo, por ejemplo, para editar el archivo style.css .

Puede llegar haciendo clic en Editar CSS en el menú:

Plantilla de WordPress - Cómo editar CSS
Plantilla de WordPress – Cómo editar CSS

Haz clic para ir directamente al editor (también llamado Personalizador):

Editor de CSS de WordPress
WordPress: editor de CSS

Agregue su propio código CSS aquí para personalizar el aspecto y el diseño de su sitio web. Más información sobre CSS .

Puedes usar el teclado para moverte:

  • En el área del editor, la tecla Tabulador inserta una pestaña.
  • Para salir del área del editor, use la tecla Esc seguida de la tecla Tabulador.
  • Usuarios de lectores de pantalla: es posible que deba presionar Esc dos veces para salir del modo de formulario.

El cuadro de edición resalta automáticamente la sintaxis del código. Puede desactivar esto en modo texto en su perfil de usuario.

💡 Tip for themes: From premium themes, I have good experience with themes Divi, Avada and with page builder Elementor.

Edición de CSS y PHP en WordPress – conclusión

Es mejor usar el tema secundario para editar archivos PHP , ya que los cambios realizados directamente en la plantilla se perderán al actualizar. Además, existe el riesgo de que deseche el sitio web.

También es recomendable usar el tema hijo para editar CSS , pero esto requiere conocimientos de programación, por lo que el editor mencionado anteriormente será suficiente para los usuarios .

💡 Do you want a faster ⏱ website? Website speed is important for both visitors and SEO. I got the best results thanks to the WP Rocket plugin, which I highly recommend.
Was this article helpful for you? Support me by sharing, please. 👍
WordPress Návod v PDF

DEJA UNA RESPUESTA

Por favor ingrese su comentario!
Por favor ingrese su nombre aquí