\n C\u00f3mo personalizar un tema de WordPress con CSS\n<\/p>\n
\n En primer lugar, debe comprender que si desea personalizar su tema de WordPress con CSS, debe agregarle cierto c\u00f3digo o editar el c\u00f3digo que ya est\u00e1 escrito. Le recomendar\u00eda que al menos aprenda algunos conceptos b\u00e1sicos de CSS, HTML, JavaScript y PHP antes de comenzar a editar su tema.\n<\/p>\n
\n Otra cosa a tener en cuenta es que si va a realizar cambios en la hoja de estilo de su tema de WordPress, estos cambios se eliminar\u00e1n una vez que se actualice su tema. Por lo tanto, debe aprender acerca de los temas secundarios y usar un tema secundario para realizar cambios utilizando style.css, functions.php u otros archivos de plantilla de tema. He hablado de temas secundarios m\u00e1s adelante en este art\u00edculo.\n<\/p>\n
\n Hay dos formas de editar o agregar CSS a tu tema
\n<\/h4>\n\n 1 Uso del panel
\n<\/h5>\n
\n<\/h5>\n
\n Esto le permite editar su tema de WordPress directamente usando la hoja de estilo CSS en su Tablero de WordPress. Pero debe tener en cuenta que cualquier cambio importante realizado aqu\u00ed puede ser dif\u00edcil de revertir. Por lo tanto, recomendar\u00eda realizar una copia de seguridad del CSS original de su tema de WordPress y luego realizar los cambios. Tambi\u00e9n le recomendar\u00eda que cree un tema secundario para su sitio. Si no sabe qu\u00e9 es eso, simplemente lea la siguiente secci\u00f3n y regrese.\n<\/p>\n
\n Cree un tema secundario y luego, en ese tema secundario, vaya a Apariencia y luego Editor de temas. Aparecer\u00e1 una ventana emergente ya que est\u00e1 utilizando un tema secundario, pero no hay nada de qu\u00e9 preocuparse. Simplemente haga clic en ‘Entiendo' e ingresar\u00e1 a la hoja de estilo. Si desea realizar cambios en los archivos de plantilla como header.php, functions.php, etc., primero debe aprender PHP y luego probar sus habilidades de codificaci\u00f3n. De lo contrario, simplemente lim\u00edtese a editar la hoja de estilo.\n<\/p>\n
\n \u00bfQu\u00e9 es un tema hijo en WordPress?\n<\/p>\n
\n Un tema hijo es una r\u00e9plica de un tema original (tambi\u00e9n conocido como tema principal). El tema secundario incluye la funcionalidad y el estilo del tema principal. Se recomienda utilizar un tema secundario cuando desee mantener intacto el c\u00f3digo original mientras realiza modificaciones en el dise\u00f1o de su sitio. Por lo tanto, puede crear dise\u00f1os nuevos y mejores en el tema secundario y mantener la funcionalidad del tema principal. Algunas ventajas de usar un tema hijo incluyen:\n<\/p>\n
- \n
- No tienes que preocuparte por jugar con el c\u00f3digo original ya que el tema principal es seguro y no est\u00e1 editado.\n <\/li>\n
- Puede usar la codificaci\u00f3n para ampliar la funcionalidad de un tema principal, experimentar con \u00e9l y crear algo nuevo.\n <\/li>\n
- No es necesario crear un tema desde cero. Si por casualidad se olvida de una determinada funcionalidad o caracter\u00edstica, el c\u00f3digo del tema principal est\u00e1 ah\u00ed para usted.\n <\/li>\n<\/ul>\n
\n Sin embargo, debe tener mucho cuidado al usar temas secundarios. Una de las razones es que requerir\u00eda habilidades de codificaci\u00f3n y experiencia. Si reci\u00e9n est\u00e1 comenzando con CSS, HTML, JavaScript y PHP, t\u00f3mese un tiempo para convertirse primero en un experto. De lo contrario, la curva de aprendizaje podr\u00eda ser bastante alta.\n<\/p>\n
\n Otra cosa que debe tener en cuenta al usar un tema secundario es que primero debe verificar las actualizaciones. Si su tema principal se actualiza con una funci\u00f3n que no desea, no debe actualizar su tema de WordPress, ya que se reflejar\u00eda en el tema de su hijo. A veces, si alguna de las caracter\u00edsticas se elimina en el tema principal y lo actualiza, su tema secundario puede verse afectado. Por lo tanto, aumenta su trabajo de codificaci\u00f3n.\n<\/p>\n
\n 2 Uso del servidor FTP
\n<\/h5>\n\n Podr\u00eda existir la posibilidad de que no pueda acceder directamente al tablero de su tema. A veces, el uso de complementos desactiva esa funci\u00f3n. Por lo tanto, debe usar FTP o el Protocolo de transferencia de archivos para acceder de forma remota a los archivos de su sitio. Comience con la descarga de cualquier aplicaci\u00f3n de cliente FTP. P\u00f3ngase en contacto con su anfitri\u00f3n y solicite sus credenciales de FTP.\n<\/p>\n
\n Cuando ingrese las credenciales, se le permitir\u00e1 acceder a style.css. Ahora haga modificaciones al archivo, guarde sus cambios y vu\u00e9lvalos a subir al servidor. Este podr\u00eda ser un m\u00e9todo bastante agitado para agregar CSS a su sitio, as\u00ed que util\u00edcelo solo si no tiene acceso a su tablero.\n<\/p>\n
\n Maneras f\u00e1ciles de agregar CSS a su sitio de WordPress
\n<\/h4>\n\n Hay dos m\u00e9todos sencillos con los que puede agregar CSS a su sitio de WordPress. Incluyen el uso de un personalizador de WordPress o un complemento. Ser\u00e1 mucho m\u00e1s f\u00e1cil agregar su c\u00f3digo CSS usando estos m\u00e9todos. Agregar CSS usando un personalizador de WordPress o un complemento tampoco desaparecer\u00e1 su c\u00f3digo una vez que se actualice el tema. Sin embargo, te recomiendo que mantengas una copia de seguridad del c\u00f3digo original de tu sitio web en caso de que algo suceda sin querer. Ahora veamos las dos formas f\u00e1ciles de agregar CSS a su sitio de WordPress.\n<\/p>\n
\n 1 Edici\u00f3n a trav\u00e9s del Personalizador de WordPress
\n<\/h5>\n\n Simplemente inicie sesi\u00f3n en su backend de WordPress. Haga clic en Apariencia y luego haga clic en Personalizar. Se abrir\u00e1 una pantalla de personalizaci\u00f3n. Esta pantalla le muestra una vista previa de su sitio web en ese momento y habr\u00e1 algunas opciones en el lado izquierdo de la pantalla para personalizar elementos como los colores, men\u00fas u otros widgets.\n<\/p>\n
\n En el lado izquierdo de la pantalla, ver\u00e1 una opci\u00f3n llamada CSS adicional. Aqu\u00ed es donde tienes que esparcir tu magia. Al hacer clic en el CSS adicional, se abrir\u00e1 una nueva p\u00e1gina con el c\u00f3digo de su sitio web. Ahora, puedes hacer cambios en el c\u00f3digo y si lo has escrito correctamente (\u00a1sin errores!) ver\u00e1s los cambios reflejados en la vista previa.\n<\/p>\n
\n \u00a1El c\u00f3digo CSS que escribas aqu\u00ed no cambiar\u00e1 ni desaparecer\u00e1 una vez que tu tema se actualice! Pero, si pasa a un nuevo tema, el c\u00f3digo escrito aqu\u00ed se borrar\u00e1. Por lo tanto, se sugiere que debe hacer una copia de seguridad de su CSS antes de cambiar el tema.\n<\/p>\n
\n 2 Usa un complemento
\n<\/h5>\n\n En esta secci\u00f3n, analizar\u00e9 cuatro complementos diferentes que puede usar para editar CSS para su tema de WordPress: Editor de CSS avanzado<\/strong>, CSS personalizado modular<\/strong>, SiteOrigin CSS<\/strong> y CSS Hero<\/strong>. Si no lo sabe, los complementos de WordPress son peque\u00f1as piezas de software que se pueden adjuntar a WordPress para ampliar su funcionalidad. Algunos complementos est\u00e1n disponibles sin costo, mientras que para algunos debe pagar algo de dinero para agregarlos a su sitio de WordPress. \u00a1Los complementos pueden ayudarlo a editar o agregar CSS a su sitio de WordPress con solo unos pocos clics!\n<\/p>\n
\n Usando el Complemento del Editor de CSS Avanzado\n<\/p>\n
\n El primer complemento que recomendar\u00eda se llama Editor CSS avanzado. Este complemento le permite agregar CSS para ver c\u00f3mo se ve su sitio web en una computadora de escritorio, tableta y tel\u00e9fono m\u00f3vil. De esta manera, puede ajustar su sitio web para cada dispositivo. Para comenzar a editar, instale el complemento. Vaya a su panel de control de WordPress, haga clic en Apariencia y luego en Personalizador. Ver\u00e1 una nueva opci\u00f3n llamada Editor CSS avanzado. Agregue el CSS personalizado que desee y guarde los cambios.\n<\/p>\n
\n Una gran ventaja de usar este complemento es que puede controlar c\u00f3mo se ve su sitio web en diferentes dispositivos. Adem\u00e1s, todav\u00eda puedes usar la t\u00e9cnica que mencion\u00e9 en el punto #1 para editar tu tema de WordPress. Sin embargo, para algunas personas que no est\u00e1n acostumbradas a programar, hacer cambios para cada tipo de dispositivo puede ser mucho trabajo. Primero tendr\u00edan que aprender a escribir CSS para cada tipo de dispositivo.\n<\/p>\n
\n Uso del complemento CSS personalizado modular\n<\/p>\n
\n El segundo complemento que recomendar\u00eda es Modular Custom CSS. Este complemento lo ayuda a realizar cambios en el tema de su sitio de WordPress. Por ejemplo, si actualmente est\u00e1 usando un tema y realiza cambios en ese tema usando Modular Custom CSS. Luego, decide elegir otro tema para su sitio. Por lo tanto, los cambios realizados en el primer tema no se eliminar\u00edan. Permanecer\u00e1n intactos en este complemento. Tambi\u00e9n puede agregar CSS global usando este complemento. Ese CSS seguir\u00eda siendo el mismo a pesar de los cambios de tema.\n<\/p>\n
![\"\"](\"https:\/\/inform.click\/wp-content\/uploads\/2022\/11\/post-323301-6383cdec124a5.webp\")
<\/a><\/p>\n![\"\"](\"https:\/\/inform.click\/wp-content\/uploads\/2022\/11\/post-323301-6383cdefbb9ad.webp\")
<\/a><\/p>\n