Simple Custom CSS and JS

Descripción

Personaliza la apariencia de tu sitio de WordPress añadiendo fácilmente códigos personalizados CSS y JS sin siquiera tener que modificar tu tema o archivos de plugins. Esto es perfecto para añadir ajustes CSS personalizados a tu sitio.

Características

  • Editor de texto con resaltado de sintaxis
  • Imprime el código integrado o incluido en un archivo externo
  • Imprime el código en la cabecera o el pie de página
  • Añade CSS o JS a la vista pública o el escritorio
  • Añade tantos códigos como desees
  • Mantén tus cambios además cuando cambies el tema

Capturas

  • Gestionar códigos personalizados

  • Añadir/Editar JavaScript

  • Añadir/Editar CSS

  • Add/Edit HTML

Instalación

  • Desde el escritorio de WordPress, haz clic en «Plugins -> Añadir nuevo».
  • En el cuadro de entrada del navegador, escribe «Simple Custom CSS and JS».
  • Selecciona el plugin «Simple Custom CSS and JS» y haz clic en «Instalar».
  • Activa el plugin.

O…

  • Descarga el plugin desde esta página.
  • Guarda el archivo .zip en una ubicación en tu computadora.
  • Abre el escritorio de WordPress y haz clic en «Plugins -> Añadir nuevo»
  • Haz clic en «Subir», luego busca el archivo .zip descargado de esta página.
  • Haz clic en «Instalar» y luego en «Activar».

O…

  • Descarga el plugin desde esta página.
  • Extrae el archivo .zip en una ubicación en tu computadora.
  • Usa FTP o el cPanel de tu servidor para obtener acceso a los directorios de archivos de tu web.
  • Navega al directorio /wp-content/plugins/
  • Sube la carpeta extraída custom-css-js a esta ubicación de directorio.
  • Abre el escritorio de WordPress, haz clic en la página «Plugins» y luego haz clic en «Activar» debajo del plugin recién añadido «Simple Custom CSS and JS»

Preguntas frecuentes

¿Qué sucede si quiero añadir múltiples códigos CSS externos?

Si escribes varios códigos del mismo tipo (por ejemplo: dos códigos CSS externos), todos se imprimirán uno tras otro

¿Este plugin afectará el tiempo de carga?

Cuando haces clic en el botón Guardar, los códigos se almacenarán en caché en los archivos, por lo que no hay consultas tediosas de la base de datos.

¿Este plugin modifica el código que escribo en el editor?

No, el código se imprime exactamente como en el editor. No se modifica, comprueba o valida de ninguna manera. Asumes toda la responsabilidad por lo que está escrito allí.

Mi código no se muestra en la web

Prueba uno de los siguientes:
1. Si estás usando algún plugin de almacenamiento en caché (como «W3 Total Cache» o «WP Fastest Cache»), no olvides eliminar la caché antes de ver el código impreso en la web.
2. Asegúrate de que el código esté en estado Publicado (no en Borrador ni en la Papelera).
3. Comprueba si la carpeta wp-content/uploads/custom-css-js existe y se puede escribir en ella.

¿Funciona con una red multisitio?

Sí.

¿Qué sucede si cambio el tema?

El CSS y JS son independientes del tema y persistirán si se produce un cambio de tema. Esto es particularmente útil si aplicas CSS y JS para modificar la salida de un plugin.

¿Puedo usar un preprocesador CSS como LESS o Sass?

Por el momento, solo es compatible con CSS plano, pero puedes consultar la versión Pro en caso de que necesites un preprocesador CSS.

¿Puedo subir imágenes para usar con mi CSS?

Sí. Puedes subir una imagen a tu biblioteca de medios, luego referirte a ella por su URL directa desde la hoja de estilo CSS. Por ejemplo:
div#content {
background-image: url(‘https://ejemplo.com/wp-content/uploads/2015/12/image.jpg’);
}

¿Puedo usar reglas CSS como @import y @font-face?

Sí.

¿Quién puede publicar, editar o borrar los códigos personalizados?

Por defecto, solo el administrador podrá publicar, editar o eliminar códigos personalizados. Al activar el plugin se crea un perfil llamado «Diseñador web». Puedes asignar este perfil a un usuario que no sea administrador para permitirle publicar, editar o eliminar códigos personalizados. En la página de ajustes del plugin hay una opción para eliminar este perfil.

Mi web tiene las URL en HTTPS, pero los códigos están enlazados como HTTP

La URL para los códigos enlazados se construye igual que la URL para otros medios (desde la biblioteca de medios) usando la opción de direcciones de WordPress que se encuentra en «Escritorio > Ajustes > Generales», como se muestra en esta captura de pantalla. Si la dirección de WordPress tiene HTTPS en la URL, los códigos personalizados y todos los demás medios tendrán HTTPS en la URL.

Reseñas

22 de febrero de 2025
Thanks to this plugin, I was able to make modifications to parts of my own website that had been eluding me for WEEKS through other CSS plugins that I had been trying to use.
27 de enero de 2025
in almost all cases I’ve found where a Wordpress site is hacked. This plugin is activated by the hacker. The problem is that when you delete the plugin, thinking you’ve cleaned up after the attack, the database tables for this plugin is still very present in the database causing your website to get infected again and again. This plugin probably does what it does very well, but to me, I can’t understand how it could be allowed to exist.
6 de enero de 2025
This plugin is basically a must. When using a free theme, I am quite limited in editing the appearance. And some functions cannot be solved using plugins. There are three things that I have been missing for a long time. Insufficient highlighting of the wrong number of brackets. It does turn red when I click on it, but it would be better if it was red permanently or turned red after saving. Basic ability to undo changes. Ability to automatically format code However, this does not change the fact that I give it five stars.
4 de enero de 2025
Simple Custom CSS and JS does exactly what it says on the box. I’ve been using it for many years on non-profit websites, and it has proven rock solid. Here’s what I especially appreciated: CSS, JS, and HTML syntax highlighting. Code can be inline or loaded externally (and thus cached). Code can be loaded in the header, body, or footer. Code can be loaded on the front end, in the block editor and/or admin pages. Code can easily be enabled or disabled with a single click. That is a lot of features for a free plugin, and I’m perfectly content with that. There is a reasonably priced premium version with advanced features like CSS preprocessors and code revisions if these are important features to you, but the free version is a great start and enough for many projects.
9 de diciembre de 2024 2 respuestas
This plugin does flush all permalinks settings on install, without confirmation of Admin, which impacted the whole permalinks settings, and required me to deactivate and reactivate multiple plugins to get their permalinks settings setup again, which is loss of time and requires a clear confirmation before doing that on install.
9 de octubre de 2024
Prático, funcional e sem a irritante tentativa de fazer você comprar. Uso perfeitamente sem a necessidade de complementá-lo com algum plugin dependente pago.
Leer todas las 99 reseñas

Colaboradores y desarrolladores

«Simple Custom CSS and JS» es un software de código abierto. Las siguientes personas han colaborado con este plugin.

Colaboradores

«Simple Custom CSS and JS» ha sido traducido a 17 idiomas locales. Gracias a los traductores por sus contribuciones.

Traduce «Simple Custom CSS and JS» a tu idioma.

¿Interesado en el desarrollo?

Revisa el código , echa un vistazo al repositorio SVN o suscríbete al registro de desarrollo por RSS.

Registro de cambios

3.50

  • 02/17/2025
  • Fix: the editor doesn’t show up under certain conditions
  • Fix: don’t show the code excerpts in the list table, if the «Extended View» option is enabled for posts or pages

3.49

  • 11/13/2024
  • Fix: add nuance for the «in Block editor» option for websites with WP before v6.6 and after

3.48

  • 09/24/2024
  • Feature: add JS/CSS custom codes to the Block editor

3.47

  • 05/27/2024
  • Fix: use the GMT time for showing when a custom code was published or modified

3.46

  • 01/31/2024
  • Tweak: update the Bootstrap and jQuery library links
  • Tweak: remove the qTranslate-x warning. The qTranslate-x plugin was removed from wp.org since Aug 2021

3.45

  • 10/17/2023
  • Fix: enqueue the jQuery library only if there is a frontend JS custom code that requires it

3.44

  • 06/07/2023
  • Compatibility with the WooCommerce «custom order tables» feature

3.43

  • 03/13/2023
  • Fix: PHP8.1 deprecation notices
  • Fix: after adding a JS/HTML custom code with empty content will show the CSS default message in the editor

3.42

  • 01/17/2023
  • Fix: the «LH Archived Post Status» plugin was removing the «Publish» button on the add/edit custom code page
  • Feature: multiple values for the «Where in site» option

See changelog for all versions.