Mostrar sólo el título de cada página en wordpress con Yoast SEO

Si usas Wordpres de forma habitual y cuidas el SEO de tu blog seguramente ya tengas instalado Yoast Wordpres SEO, uno de los mejores plugin, si no el mejor para gestionar el SEO en WordPress. La cuestión es que este plugin, además de permitirnos modificar títulos y descripciones a nivel SEO, también nos va a permitir borrar el nombre general de la web que WordPress añade siempre por defecto a todas las páginas.

Como muchos ya sabrán en la configuración de Yoast Wordpres SEO, entrando en el menú “títulos y etiquetas”, se pueden cambiar de forma general todos los títulos y descripciones SEO de cada página de un blog. Por tanto, cualquier cambio que hagamos en el apartado correspondiente modificara todas las entradas, todas las páginas o todos los objetos (búsquedas, archivos, etc..)

Pero en este apartado no solo se cambian títulos y descripciones a nivel SEO como pasa en las entradas, sino que también permite modificar la configuración de los títulos en las pestañas del navegador: solo titulo, titulo de la web + titulo de la entrada, el numero de página, etc.

Esto se hace usando las variables:

 

%%title%% Muestra el titulo de la pagina individual que se esta visualizando.

%%page%% Muestra el numero de pagina en la entrada si es que estuviera paginada.

%%sitename%% Muestra el titulo general o nombre de la web.

%%sep%% Muestra el separador que separa el titulo de la página del nombre de la web.

Por ejemplo en la imagen de arriba estaríamos mostrando solo el titulo en cada entrada, el titulo, numero de pagina, separador y titulo general en el caso de las paginas y el solo titulo y  titulo general en el caso de los objetos.

En esta entrada solo he puesto las variables mas importantes, pero existen muchas otras que podemos usar para personalizar aun mas los títulos.

Crear ventanas modales usando solo css y su selector target

 

Hace algún tiempo escribí sobre como crear ventanas modales con la ayuda de Jquery UI, y como técnica para salir del paso rápidamente no esta mal, pero no es la mejor manera de hacerlo, mas que nada porque estamos cargando una librería entera en nuestro proyecto para hacer algo que podríamos hacer solo con CSS. Ahora podrás pensar que tal vez sea demasiado pesado hacer esto usando solo CSS, o que los resultados no van a estar a la altura, pero lo cierto es que con las nuevas características de CSS3, se pueden obtener efectos sorprendentes con muy pocas lineas de código, y escasos o nulos conocimientos de programación.

La parte HTML para crear esta demostración sera algo así:

 

<ul>

<li><a href=”#modal1″>DESLIZAR</a></li>

<li><a href=”#modal2″>ROTAR</a></li>

<li><a href=”#modal3″>REDIMENSIONAR</a></li>

</ul>

<div id=”modal1″ class=”modalmask”>

<div class=”modalbox movedown”>

<a href=”#close” title=”Close” class=”close”>X</a>

<h2>DESLIZAR</h2>

<p>La ventana modal aparece por arriba y se desliza hasta su posición. Un efecto simple pero elegante.</p>

<p>Aquí puedes incluir cualquier cosa como vídeos, mapas, formularios…</p>

</div>

</div>

<div id=”modal2″ class=”modalmask”>

<div class=”modalbox rotate”>

<a href=”#close” title=”Close” class=”close”>X</a>

<h2>ROTAR</h2>

<p>Usando la propiedad transform de CSS3, podemos hacer que las ventanas aparezcan rotando.</p>

<p>No hay nada de Javascript, solo unas pocas lineas de CSS.</p>

</div>

</div>

<div id=”modal3″ class=”modalmask”>

<div class=”modalbox resize”>

<a href=”#close” title=”Close” class=”close”>X</a>

<h2>REDIMENSIONAR</h2>

<p>También puedes redimensionar la ventana hasta hacerla desaparecer.</p>

<p>Las posibilidades que ofrece CSS3 son múltiples, tan solo hace falta un poco de imaginación para crear efectos realmente llamativos.</p>

</div>

</div>

La clase modalmask sera la encargada de aplicar el fondo oscuro, característico de las ventanas modales, mediante la superposición de un div que se extienda sobre el contenido. En el interior de este div incluiremos la ventana, a la que se le aplican otras 2 clases, una para darle estilo y otra para animarla. Dentro incluiremos otro enlace para crear el botón de cerrar y el contenido que mostrara la ventana.

 

Lo realmente importante aquí es el CSS. Lo muestro por partes:

 

.modalmask {

position: fixed;

font-family: Arial, sans-serif;

top: 0;

right: 0;

bottom: 0;

left: 0;

background: rgba(0,0,0,0.8);

z-index: 99999;

opacity:0;

-webkit-transition: opacity 400ms ease-in;

-moz-transition: opacity 400ms ease-in;

transition: opacity 400ms ease-in;

pointer-events: none;

}

.modalmask:target {

opacity:1;

pointer-events: auto;

}

En primer lugar el efecto modal, creado mediante  la superposición de un div semitransparente sobre todo el contenido, usando para ello  la propiedad z-index. Para ocultarlo establezco la opacidad a 0 y desactivo los eventos del puntero (pointer-events: none) para evitar que interfiera con la pagina estando oculto.

 

Para iniciar la animación y mostrar las diferentes ventanas modales hago uso del selector target de CSS3. Lo que hace este selector es modificar los estilos del div al que hace referencia un enlace. En este caso restablece la opacidad y reactiva los eventos del puntero para activar el efecto.

 

Una vez que tenemos la capa modal hay que dar forma a la ventana:

 

.modalbox{

width: 400px;

position: relative;

padding: 5px 20px 13px 20px;

background: #fff;

border-radius:3px;

-webkit-transition: all 500ms ease-in;

-moz-transition: all 500ms ease-in;

transition: all 500ms ease-in;

 

}

Y animar su aparición, aprovechando que el selector target también se puede usar con los elementos hijos:

 

.movedown {

margin: 0 auto;

}

.rotate {

margin: 10% auto;

-webkit-transform: scale(-5,-5);

transform: scale(-5,-5);

}

.resize {

margin: 10% auto;

width:0;

height:0;

 

}

.modalmask:target .movedown{

margin:10% auto;

}

.modalmask:target .rotate{

transform: rotate(360deg) scale(1,1);

-webkit-transform: rotate(360deg) scale(1,1);

}

 

.modalmask:target .resize{

width:400px;

height:200px;

}

Como se puede ver sobre estas lineas, establezco en cada animación el estado inicial en la clase correspondiente, y el estado final al hacer target, es decir, los estilos que se aplicaran al pulsar el enlace de cada ventana modal.

 

Ya solo quedaría el CSS correspondiente al botón o enlace encargado de cerrar las ventanas:

 

.close {

background: #606061;

color: #FFFFFF;

line-height: 25px;

position: absolute;

right: 1px;

text-align: center;

top: 1px;

width: 24px;

text-decoration: none;

font-weight: bold;

border-radius:3px;

 

}

 

.close:hover {

background: #FAAC58;

color:#222;

}

No tiene nada especial porque para hacer desaparecer las ventanas modales y sus estilos, bastara con cambiar el target a otro enlace, en este caso #close, que no aporta ningun CSS.

Conclusión

Como se puede ver, las nuevas características CSS cada vez están mas avanzadas y, combinadas con HTML5, nos permiten hacer cosas que antes solo podíamos implementar con Javascript y sus librerías, lo cual es una buena noticia para los desarrolladores, ya que nos va a suponer una reducción considerable en el tamaño de las web y una mejora en la accesibilidad de las mismas.

Por otro lado, ahora que lo pienso, con el selector target tenemos otra forma de simular un evento onclick, mejor incluso que aquella que compartí hace algún tiempo, basada en el uso de inputs tipo radio. Sin duda con este selector vamos a poder crear efectos asombrosos, yo ya tengo algunos en mente. ¿Y tu?