Modo Zen

Inicio Foros WordPress Themes y Diseño Modo Zen

Etiquetado: ,

Este debate contiene 29 respuestas, tiene 3 mensajes y lo actualizó  almendron hace 4 años, 8 meses.

  • Autor
    Publicaciones
  • #74289

    almendron
    Participante

    Hace ya algunos meses observé en el periódico Le Monde un diseño para mostrar los artículos que me gustó bastante. El caso es que me gustaría aplicarlo a mi sitio donde uso wordpress. Para que veáis cómo funciona, os dejo el enlace. Buscar a la izquierda de la primera línea del cuerpo del artículo “Lecture Zen” y hacer clic en él. Solo los usuarios registrados tenemos acceso pero aún así se abrirá la nueva página y podréis comprobar que presenta el cuerpo del artículo a letra bastante grande: Artículo de Le Monde.
    Pues bien, mi pregunta es cómo se podría hacer una cosa parecida en wordpress.
    Gracias.

  • #74292

    LGrusin
    Miembro

    Buenas almedron, y digo yo si no sería lo mismo que personalizar el single.php.

    En el index.php quitas el enlace en el título del post y le añades un botón si lo prefieres, y en el single.php pones un enlace (botón, barra o similar) de retorno.

    No termino de entender la filosofía exactamente…

    Un saludo

  • #74293

    almendron
    Participante

    Gracias por responder LGrusin.
    Intentaré explicarme: al igual que en Le Monde, quiero ofrecer una versión completa tanto del artículo como de las categorías, enlaces suplementarios, cabecera, etc. Es decir, se presenta cabecera, sidebar, cuerpo, pie, todo completo.
    La “versión zen” por contra solo muestra el título, el autor y el artículo, y con un tamaño de texto y formato mucho más amigable para la lectura.
    ¿Has visto como queda en Le Monde? Echale un vistazo. Si no puedes verlo con claridad, me lo dices y hago una captura de pantalla.
    Un saludo.

  • #74302

    LGrusin
    Miembro

    Si, si que lo he podido ver…

    Lo que he querido decir es que WordPress te permite personalizar los posts con diferente aspecto al resto del theme, distinta cabecera, menú, tipo de fuente y tamaño, etc, etc. Sólo hay que cargar un header, con la función get_header(), con una hoja de estilo diferente.

    Lo mismo con el footer, get_footer()

    Esto realmente ya lo hace WordPress con los distintos tipos de formatos de posts. Pero esto que digo puede cambiar por completo el aspecto, incluso como si quieres usar otro style.css de otro theme.

    Un saludo

  • #74303

    almendron
    Participante

    A la solución que propones le le veo un problema: puedo mostrar TODOS los post de una forma determinada u otra pero no mostrar LAS DOS versiones. Un símil que puede ayudar a comprender lo que quiero conseguir es el de “imprimir un post”. Sería lo mismo pero abriéndose en la misma pestaña/ventana del navegador y con la posibilidad de regresar al formato inicial.
    Un saludo.

  • #74304

    almendron
    Participante

    He estado investigando un poco la opción que recomiendas y, por ejemplo, he encontrado que con “set post format” se puede cambiar el formato de un post.
    Ahora bien: ¿cómo lo hago para que al hacer clic sobre el enlace “Lectura Zen” se muestre el mismo post pero con formato cambiado?

  • #74306

    Aprendiz
    Participante

    Almendrón, se me ocurre otra cosa … un “switcher CSS” que te permita cambiar de hoja de estilo pulsando en un enlace. Habrás visto esta solución en algunas páginas que permiten cambiar el tamaño de letra “al vuelo” para los que necesitan un cuerpo 30 para leer un texto …

    En las hojas de estilo alternativas podrías cambiar/ocultar las partes de la web que quieras y resaltar o cambiar el tamaño de las que más te interese. Sólo tienes que investigar un poco en esa URL que te digo, buscar en la Red e imaginar la forma de adaptarlo a tu idea.

    Con esta opción debes crear archivos .css alternativos para cada diseño que quieras utilizar y debes cargar un javascript para que cambie de hoja de estilo al pulsar el enlace, que colocarías en donde mejor te convenga.

    Si necesitas más explicaciones o ayuda, dime cómo me pongo en contacto contigo. ¿Tienes web?

    Un saludo.

  • #74308

    LGrusin
    Miembro

    Me parece que estamos hablando de lo mismo y no nos entendemos…

    Efectivamente, se trata de usar una hoja de estilos diferente tal como he dicho al principio puesto que no quieres mostrar cabecera con menú, widgets, etc, además de cambiar el tipo de fuente y su tamaño. Eso lo puedes hacer con los formatos de posts o la idea que te di del single.php.

    La solución de usar los formatos de posts serviría si el theme estuviera preparado para ello. Si no es así, tienes que hacer varias modificaciones de código para adaptarlo, hay que ponerlas en el functions.php. Además tienes el inconveniente que cada vez que publiques un post tienes que seleccionar el tipo de fomato de ese post.

    Lo que yo digo sólo cambiaría la vista del single cuando el visitante pulse algún enlace o botón, emulando la página de ejemplo que has puesto.

    Ejemplo:

    En el single.php
    get_header(‘zen’);

    En el archivo de cabecera header-zen.php llamarías a la nueva hoja de estilos, por ejemplo zen.css

    Un saludo

  • #74317

    almendron
    Participante

    A “Aprendiz”: no sale la URL que mencionas (Mira a ver si la puedes ponery le echo un vistazo). Y sí, tengo web: almendron.com (Lo quiero aplicar en la Revista de Prensa)
    A LGrusin:
    Esto me recuerda algunas de las discusiones que hemos tenido en otras ocasiones 🙂
    Resumo. Tenemos el siguiente escenario. Un artículo se muestra junto a la cabecera, el sidebar, el pie, etc…. En esta artículo hay un enlace que pone “Lectura ZEn” y que al pinchar nos lleva al mismo artículo pero con un formato distinto (un single.php distinto).
    ¿Podías poner un ejemplo de cómo al pinchar el enlace aparece la versión zen y de cómo se vuelve al original? No necesito todo el código. Me basta con unas indicaciones y el resto ya lo iré deduciendo y buscando.
    Gracias.

  • #74322

    Aprendiz
    Participante

    El enlace es “switcher css”. (http://alistapart.com/article/alternate)

    Por lo que entiendo de tu escenario, lo que estás buscando es tener dos ‘single.php’ para cada artículo. Yo no sé si eso se puede hacer, la verdad.

  • #74333

    LGrusin
    Miembro

    Guiándonos por la página de ejemplo que has puesto. El index.php es el de siempre, con la relación de artículos. En esa página no hay link en el título del artículo sino por medio del botón Zen. Eso es fácil de hacer en el index.php quitas la URL al artículo y se la pones a un botón, enlace o similar en la parte superior del artículo. Eso es cuestión de CSS, no hay mayor dificultad. Es cuestión de asignarle la URL a otro elemento que no es el título del artículo.

    El single.php contiene una vista diferente al single habitual, eso también es cuestión de CSS.

    Si quieres ofrecer dos vistas distintas del mismo artículo (no es lo que sale en la página de ejemplo) pues se me ocurre que uses variables en la URL. Ejemplo:
    tuminio.com/tu-articulo.html?zen

    Después en el single.php podrías poner algo como:
    <?php if(isset($_REQUEST[‘zen’])) {
    get_template_part( ‘con_zen’ );
    } else {
    get_template_part( ‘sin_zen’ );
    } ?>

    Siendo con_zen.php la plantilla al archivo con el nuevo aspecto y sin_zen.php la vista del single normal.
    Después llamas al uno o al otro según como te interese. Los estilos puedes meterlos todos juntos en el style.css si quieres.

    Pues eso, dependerá de lo que quieras hacer exactamente…

    Un saludo

  • #74360

    almendron
    Participante

    Muchas gracias a los dos. Antes de seguir preguntando más cosas, investigaré las dos opciones que me dais. Ya me disculpareis si tardo un poco en contestar pero os mantendré informados y además, seguro que me surgen más dudas.
    Muchas gracias de nuevo.

  • #74362

    almendron
    Participante

    Una puntualización a LGrusin: en la página de ejemplo que citaba sí se ofrecen dos vistas distintas del mismo artículo. Puedes verlo en esta imagen.

  • #74367

    LGrusin
    Miembro

    Pues si almedron, no me había fijado, pensé que era el index lo que estaba viendo… 🙁

    Si lo quieres hacer exactamente igual que esa página tendrás que estudiar el código javascript que utiliza para cambiar los estilos.

    Aquí tienes un ejemplo en jQuery http://www.desarrolloweb.com/articulos/intercambiar-hojas-estilos-jquery.html

    Otra opción que se me ocurre es con cajas ocultas con los enlaces para cambiar de una vista a otra. Mientras una está visible la otra permanece oculta y viceversa. Aunque conseguir esto me parece más complicado por la cantidad de elementos que intervienen.

    Un saludo

  • #74370

    Aprendiz
    Participante

    Mi opción 🙂

    En la hoja de estilos 2ª …
    1º) Oculta todo con * {display:none;}
    2º) “Desoculta” y da estilo a lo único que te interesa, que está dentro de ‘div#mid-content’.
    3º) Si algo de lo que haya dentro de ‘div#mid-content’ no te interesa, vuelve a ocultarlo.

    El javascript es mínimo, ya lo tienes.

  • #74377

    almendron
    Participante

    De momento he encontrado una solución que podéis ver en acción en mi sitio. Por ejemplo, en este artículo. Es algo chapucero el método pero funciona 😛
    No obstante, tomo buena nota del método que proponéis, es decir, cambio de hojas de estilo y modificación de éstas mediante la ocultación-desocultación. Dado que me parece una solución mucho más elegante que la que he aplicado, intentaré ponerla en práctica en local a ver si soy capaz de ello. Os diré algo en cuanto pueda.
    Muchas gracias a los dos.
    PD. La solución que he aplicado ha consistido básicamente en instalar el plugin “PDF & Print”, modificar su salida y tocar algo la hoja de estilos.

  • #74406

    LGrusin
    Miembro

    Pues no queda tan mal, fijate que usa variables en la URL… 😉

    Saludos

  • #74420

    almendron
    Participante

    Pues no, no queda tan mal 🙂
    Lo de usar variables en la URL es la única forma porque, de lo contrario, cualquier cambio en las hojas de estilos afecta a todo el sitio y no a un solo artículo (o yo al menos no he sabido hacerlo).
    Lo que voy a intentar ahora es destripar el plugin que me ha servido para hacerlo e intentar coger tan solo las partes que me interesan. En realidad lo que hace es tomar tres datos (URL del post, título y contenido), pasarlos con parámetros y mostrarlos. Si lo consigo, os pasaré el código.
    Y si alguno de los que sabéis de verdad programar, no como yo, se anima, estoy seguro que hacer un plugin para ello sería muy bien recibido por la comunidad de wordpress.

  • #74421

    LGrusin
    Miembro

    Ya sabes que yo soy antiplugin cuando realmente no es necesario. En uno de mis comentarios anteriores te di una idea de cómo tomar variables desde la URL. Aunque en este caso sólo se comprueba la existencia de la variable y no su valor, pero no es difícil hacerlo con valores.

    http://ayudawp.com/foros/hilo/modo-zen/#post-74333

    Un saludo

  • #74429

    almendron
    Participante

    LGrusin: Es evidente que algo hago mal porque no me funciona lo que comentas. Esto es lo que he hecho:
    1.- Crear la plantilla con_zen.php (para evitar problemas es la misma que single pero con un párrafo que dice “esto es el modo zen” para así saber que carga).
    2.- He puesto lo del isset en el single.
    3.- También en el single he puesto el enlace del post pero añadiendo ?con_zen
    Y nada, no hay manera de que funcione.

  • #74430

    almendron
    Participante

    Me olvidaba: el error que me da es que se cargan las dos versiones del artículo.
    Un saludo y gracias por tu atención, LGruisn.

  • #74439

    LGrusin
    Miembro

    La idea es la siguiente, tres archivos, sin_zen.php, con_zen.php y single.php

    single.php irá cargando el que corresponda. En algunos themes será más fácil hacerlo que en otros. Es decir:

    1 – Al single.php le extraes la parte de código para los artículos normales. Ese código lo pones independiente en un archivo llamado sin_zen.php
    De manera que poner get_template_part(‘sin_zen’); en el lugar correspondiente en el single.php obtienes lo mismo de siempre.
    2 – con_zen.php es un archivo copiado del anterior pero modificando las cajas y demás con sus propios estilos que harán que se vea diferente.

    Si tienes dificultades para poner estilos diferentes crea singles completos pero que son llamados desde el single.php principal.

    Dicho de otra manera las partes comunes se quedan en el single.php y los códigos personalizados en cada uno de los archivos. Espero haberme explicado bien…

    Un saludo

  • #74481

    almendron
    Participante

    Creo que ahora lo he entendido. Mañana lo pruebo y ye digo algo.
    Un saludo.

  • #74487

    almendron
    Participante

    Creo que lo he conseguido.
    1) En el single.php he puesto lo que me indicabas pero tras el else, en lugar de poner ‘sin_zen’, he puesto directamente todo el código del single original más el enlace al articulo/?zen
    2) He creado el archivo con_zen.php
    3) He modificado el style.css
    Y nada el resultado lo podéis ver en http://www.almendron.com/tribuna.
    Muchísimas gracias LGrusin.

  • #74488

    LGrusin
    Miembro

    Pues ha quedado genial, la verdad es que nunca se me había ocurrido dar una versión de lectura cómoda de los artículos. Lo que me pregunto por qué no hacemos eso con todo el sitio, seguro que el visitante nos lo agradecerá.

    Esto tiene que ver bastante con la Accesibilidad que muy pocos cumplen. Más que modo Zen debería llamarse modo Accesible… 😉

    Un saludo

  • #74491

    almendron
    Participante

    Pues sí, ha quedado bastante bien. Te agradezco mucho la ayuda porque además no ha sido nada difícil llevarla a cabo. También le doy las gracias a “Aprendiz” por su sugerencia sobre el cambio de hoja de estilos. He guardado lo que mandó pos si tengo que usarlo en alguna otra ocasión.

    Una pregunta LGrusin: cuando dices “por qué no hacemos eso con todo el sitio”, ¿te refieres a mi sitio en concreto o hablas en general?

  • #74497

    LGrusin
    Miembro

    Me refiero en general a todos los sitios web, tengo la sensación de que cuanto más avanzamos en tecnología menos accesibles son las páginas web.

    Un saludo

  • #74506

    almendron
    Participante

    Para que te hagas una idea: mira cómo construía antes las páginas. Eso sí que era accesibilidad 🙂
    Me pase a wordpress porque tardaba una eternidad en hacerlo. Puro y duro HTML y un poco de java script.
    No obstante, la tendencia es facilitar la lectura de los artículos. Echa un vistazo, por ejemplo, a Libération y al The New York.
    La diferencia con hace diez años es que ahora no solo está el contenido sino las categorías, las etiquetas, los botones de las redes sociales, las utilidades como imprimir, etc. Demasiado contenido y por eso resulta cada día más necesario proporcionar una lectura más limpia.
    Un saludo.

  • #74516

    LGrusin
    Miembro

    Pues si, pero no me negarás que se aprendía mogollón… 😉
    ¿Cerramos el hilo?

    Saludos

  • #74519

    almendron
    Participante

    Tienes razón, se aprendía mogollón 🙂
    Y sí, cierra el hilo. Un saludo.

El debate ‘Modo Zen’ está cerrado y no admite más respuestas.

Pin It on Pinterest