Seo al día

Como cambiar el CSS de una página especifica en wordpress

cambiar el css de una página específica

Escrito por

Miguel Ángel

en

cambiar el css de una página específica

Con esto haremos cambios en el aspecto de una página especifica en wordpress, es muy útil para hacer cambios rápidamente sin tener que crear plantillas determinadas para cada cambio que queramos realizar en una página. Cuando quieres por ejemplo quitar algún elemento de tu sitio en determinadas páginas, a veces en las landing page queremos quitar el menú de navegación principal, en alguna sección de nuestro sitio podemos querer cambiar el fondo de nuestra página web…

Yo lo utilizo a menudo para en algunas landing pages quitar los menus de navegación y que se centren en el contenido de esa página y no se vayan del objetivo.

Lo primero: Saber el ID de nuestra página a cambiar

Es necesario saber que ID tiene nuestra página, post u otro objeto que queramos modificar el css, para saberlo tenemos que ir dentro del escritorio de wordpress a la pagina o entrada que queremos editar, y en la URL podremos ver su ID:

saber la ID de una pagina de wordpress

Y por último: Cambios en nuestro css

Nos vamos a nuestro archivo de estilos CSS y añadimos lo siguiente:

.page-id-236 navigation-menu{display:none;}

Tenemos que poner el id según nuestra página a modificar y a continuación los estilos css que queramos modificar.
De esta forma rápidamente podremos hacer cambios en una página especifica sin tener que realizar plantillas nuevas, ya que estos cambios tan pequeños no merece la pena tener que hacer una plantilla especifica para cambiar el fondo, o quitar el menu de navegación.

Comentarios

40 respuestas a «Como cambiar el CSS de una página especifica en wordpress»

  1. Avatar de nagash
    nagash

    Muchas gracias no sabia de esto , yo lo hacia mediante php pero esto es mucho mejor ya que no sobrecargo el servidor ni la BD . saludos.

    Responder
  2. Avatar de Juanma Alcaide
    Juanma Alcaide

    Hola Miguel Ángel. ¿Se puede modificar el CSS para cada categoría de producto? Es que dices en tu artículo que hay que saber el ID de la página a modificar, pero no consigo averiguar el ID de cada una de las cuatro categorías de producto.

    Gracias. Saludo.

    Juan Manuel Alcaide

    Responder
    1. Avatar de Miguel Angel Perez
      Miguel Angel Perez

      Hola,

      Perdon por el tiempo en contestar.

      Hay una forma que no he probado pero he leido que si funciona sería la siguiente sintaxis:

      .category-15 #content .entry-title { font-size: 20px; } <-- category-XX este número lo puedes sacar viendo el codigo fuente de la categoría en tu navegador (CTRL + U). Hay otra forma que si que he probado pero es un poco más tostón: Puedes crear una plantilla para cada categoría y asignarle una clase distinta a cada categoría y despues modificarla con CSS. Un saludo!

      Responder
  3. Avatar de alex
    alex

    hola todos tengo un problema necesito modificar el css de un album especifico http://ls.ideas.technology/kci/?owlabgal_album=album1 solo tengo que cambiar una letras que dicen Browser album pero no se por hacer para hacerlo, es decir intente usando

    .owlabgal_album-album1page-side, title, second-part{
    display: none !important;
    }

    pero no me funciono

    Responder
    1. Avatar de Miguel Angel Perez
      Miguel Angel Perez

      Hola Alex,

      En este caso tendrías que escribir lo siguiente:

      .term-30 .page-side .title .second-part{ display:none;}

      con el term-30 haces que se dirija exactamente a ese album en concreto.
      Si lo quieres quitar de todos los álbum lo mejor sería que editaras la plantilla de la taxonomía album y quitaras esa parte.

      Responder
  4. Avatar de Alejandro
    Alejandro

    Hola buenas!

    trucazo, es bestial para atacar sólo a los elementos de páginas en concreto!
    Lo he usado pero tengo un problema:

    En algunos navegadores se ve, y en otros no… y en movil igual. En el chrome de ordenador desaparece, pero en el de movil aparece… no se si hay reglas especiçificas del hide para distintos navegadores.

    Gracias!

    Responder
    1. Avatar de Miguel Ángel
      Miguel Ángel

      Buenas,
      No hay reglas especificas por navegador, lo que tendrías que mirar es si tu theme cambia los nombres de las clases o similar según el navegador, es algo extraño pero no se me ocurre otra cosa. Hay themes que por ejemplo para versiones de mobile cargan una clase adicional y a lo mejor esa es la que hace que no te active la regla del CSS.
      Espero que puedas dar con la solución, intenta utilizar el inspector de elementos con varios navegadores y para la versión mobile puedes usar Responsinator.com

      Saludos!

      Responder
  5. Avatar de Borja
    Borja

    Muy buen post. Un recurso totalmente práctico para nuestros WordPress

    Muchas gracias

    Responder
    1. Avatar de Miguel Ángel
      Miguel Ángel

      Gracias a ti por comentar!

      Responder
  6. Avatar de Rosa
    Rosa

    Genial esta solución que nos das para no «cargarme» toda la web.
    Lo que necesito es ocultar el Preguntas frecuentes (FAQ) de una página de membresía. Esta no tiene ID en la URL.
    ¿Como lo hago?

    Gracias
    Rosa

    Responder
    1. Avatar de Miguel Ángel
      Miguel Ángel

      Buenas, las páginas también tienen una ID .page-id-XXXX

      Responder
  7. Avatar de GreSmit
    GreSmit

    Muchiiiiiiiisisisisisimas gracias, llevo todo el día buscando la solución, estaba pensando crear platillas por cada pagina :v

    Responder
    1. Avatar de Miguel Ángel
      Miguel Ángel

      Me alegro de que te haya ayudado, así mejor y más rápido 😉

      Responder
    2. Avatar de Ricardo
      Ricardo

      Hola Miguel Ángel.
      Mira que es un tema útil, práctico y de necesidad y solo tú lo explicas de manera fácil y funcional. Muchas gracias.
      Yo quería preguntarte qué selector se utiliza para una página concreta de producto en woocommerce.

      Saludos!

      Responder
      1. Avatar de Miguel Ángel
        Miguel Ángel

        Gracias ricardo.
        Pues sería algo así .postid-(IDDELPRODUCTO) mira en el editor del producto en la URL la ID que tiene tu producto y lo sacas, si la ID es por ejemplo 124 el selector sería .postid-124

        Un saludo

        Responder
  8. Avatar de daniel
    daniel

    Hola, buenas Miguel Ángel, como estas? Trate de usar este atajo pero no tuve exito, no se que fallo, simplemente no carga la instruccion css.

    Responder
    1. Avatar de Miguel Ángel
      Miguel Ángel

      Buenas, si es un post, un producto o una categoría cambia la clase del css, tienes que inspeccionar el elemento y ver la clase con la que carga el body y modificarla. Pero que funciona 100% es cuestión de que algo está fallandote. No se el qué.

      Responder
  9. Avatar de Chussman
    Chussman

    Todo esto está guay, mi problema es que quiero aplicar estilos diferentes a mi página de entradas y no consigo obtener un id único. Hay alguna manera?

    Responder
    1. Avatar de Miguel Ángel
      Miguel Ángel

      Revisa la clase del body, suele ser body.blog body.main body.home… depende de la configuración de tu web. WordPress siempre añade una clase o un id al body. Con el inspector de elementos del navegador podrás verlo.

      Responder
  10. Avatar de Alejandro
    Alejandro

    capooo 2018 y me has ayudado fullll. Gracias

    Responder
  11. Avatar de Paulo
    Paulo

    Wow sorprendente!, Miguel Angel me gustaria eliminar la imagen principal de todas las páginas de productos
    .not-body #div-noticia-img {
    display: none;
    }
    de esta URL:http://contamos.com.co/producto/camiseta-prueba-2-no-comprar/
    Me podrias ayudar?
    Muchas gracias por compartir

    Responder
    1. Avatar de Miguel Ángel
      Miguel Ángel

      Buenas, no se por que tu theme no tiene el marcado de clases de WordPress para las taxonomías o custom post type, es bastante raro.
      Por lo que lo que yo haría sería modificar el archivo php de la cabecera de tu theme y modificarlo usando la condicional de woocommerce «IS_PRODUCT».
      Si no sabes bien hacer o tienes problemas contactando con algún programador te lo hará en 5 segundos.
      Aquí tienes más info sobre los condicionales de Woocommerce: https://docs.woocommerce.com/document/conditional-tags/

      Responder
      1. Avatar de Paulo
        Paulo

        Miguel Angel buenos dias!, el tema fue creado por otra persona hace años y a mi me encargaron la funcion de instalar la página y las membresias, por lo que voy a usar la condicional de woocommerce “IS_PRODUCT” que me mencionas, pero no se en que archivo modificarlo, estas son las paginas que se encuentran en la plantilla creada, (style.css)
        Funciones del tema
        (functions.php)
        css carpeta
        style2.css
        icetex.html
        js carpeta
        articulos-rel.php
        barra-inferior.php
        barra-lateral.php
        Plantilla de categoría
        (category.php)
        Comentarios
        (comments.php)
        Pie de página del tema
        (footer.php)
        front-page-150916.php
        front-page-z.php
        Página de inicio
        (front-page.php)
        header-int.php
        Cabecera del tema
        (header.php)
        Página de entradas
        (home.php)
        Plantilla de la página principal
        (index.php)
        Página simple
        (page.php)
        Resultados de la búsqueda
        (search.php)
        Barra lateral
        (sidebar.php)
        Entrada individual
        (single.php)
        social-share.php
        woocommerce.php
        fonts

        *la de woocommerce.php la cree yo, pero no la reconoce.
        De nuevo muchas pero muchas gracias por tu ayuda!!

        Responder
        1. Avatar de Paulo
          Paulo

          Hola Miguel buenas tardes, ya logre solucionarlo, era necesario modificar el funtions.php del tema, añadirle esta linea
          add_action( ‘after_setup_theme’, ‘woocommerce_support’ );
          function woocommerce_support() {
          add_theme_support( ‘woocommerce’ );
          }
          Luego de esto ya reconocio la pagina woocommerce.php que ya habia creado.
          Muchas gracias, aprecio mucho tu ayuda.

          Responder
  12. Avatar de Jose Ivan Acosta Figueroa
    Jose Ivan Acosta Figueroa

    Muy buen post, me ayudo mucho, buscar en el default.css aparte del style.css . Asi Hice yo y me funciono.

    Responder
  13. Avatar de juan carlos vegas
    juan carlos vegas

    buenos dias

    Una preguntilla, que a lo mejor es muy sencilla; necesito hacer una pagina en blanco, sin nada, ni menus ni imagenes de fondo del tema que tengo en wordpress; estoy intentando hacer eliminando todos los parametros, pero no me deja bien, por el tema de donde aparecen las publicaciones (margenes y demás)

    Probe con el .page-id-1184 {display:none;} y claro no se ve nada….

    Vamos resumiendo, solo quiero que me salga en la pagina, en fondo blanco, un codigo (es un reproductor soutcast) para reproducir una emisora de radio

    hay alguna manera de poder hacerlo???

    Responder
    1. Avatar de Miguel Ángel
      Miguel Ángel

      Lo mejor es crear una plantilla de página. Pero si no sabes hacerlo con CSS puedes, el problema es que una vez que selecciones el page-id-1184 tendrás que elegir que elementos no mostrar. por ejemplo:
      .page-id-1184 .header, .page-id-1184 .footer {display:none;}

      Esto tienes que comprobarlo con las clases y el código de tu página.

      Responder
  14. Avatar de PEDRO AMERICO COSTA BELFORT
    PEDRO AMERICO COSTA BELFORT

    Meu amigo muito obrigado, dormi pensando como ajustar, gracas a Deus vc me ajudou a encontrar a solução!
    Deus te abençoe

    Responder
  15. Avatar de Borja
    Borja

    Muy buen aporte, si señor! mis dieses!!

    Responder
    1. Avatar de Miguel Ángel
      Miguel Ángel

      Gracias Borja!

      Responder
  16. Avatar de Sofía
    Sofía

    No mames, gracias!! Me sirvió muchísimo!!!

    Responder
  17. Avatar de Christian
    Christian

    Buen día amigo como podría ocultar el rango de precios variables en un producto en especifico?

    Responder
    1. Avatar de Miguel Ángel
      Miguel Ángel

      Tendrías que ver la clase del body de ese producto. Es parecido a lo que se explica en el artículo.

      Responder
  18. Avatar de Karlita Beilis
    Karlita Beilis

    Hola el articulo me sirvio para modificar el inicio de mi pagina. Estoy trabajando con woocommerce y quise modificar solo la pagina de tienda, consigue el id de la pagina pero no pasa nada, sera que al convertirse en la pagina de la tienda cambia su id? en todo caso es algo genérico o es diferente para cada sitio? gracias

    Responder
  19. Avatar de ricardo manzano
    ricardo manzano

    Grande Miguel!!! me salvaste la tarde, jajajjaja, venia renegando con un trabajo y aqui la solucion, merciiii

    Responder
  20. Avatar de José
    José

    Amigo, muchas gracias. Busqué algo que me ayudara en innumerables páginas hasta que llegué aquí. Me funcionó perfectamente.

    Responder
  21. Avatar de Anz
    Anz

    Muchas gracias, me fue de ayuda.

    Responder
  22. Avatar de Fernando
    Fernando

    excelente, me sirvio super!!!! gracias!!!!

    Responder
  23. Avatar de Franc
    Franc

    Buenas tardes, alguien podria orientarme por favor. Estoy trabajando en un woocommerce WCFM. Y me gustaria poder cambiar una pagina de tienda de vendedor, vamos un diseno distinto al que ofrece por defecto. Pretendo cambiarlo todo por un listado de platos, similar a la carta menu de un restaurante, pero sin fotos. Seria posible hacerlo? Como?

    Responder
  24. Avatar de Ana
    Ana

    Gracias. Una luz en la oscuridad. Gracias a tu post encontré la solucion para un problema.

    Responder

Deja una respuesta

Tu dirección de correo electrónico no será publicada. Los campos obligatorios están marcados con *

Este sitio usa Akismet para reducir el spam. Aprende cómo se procesan los datos de tus comentarios.

Más entradas