Añadir Schema.org a tu tema de WordPress

Cómo implementar Schema.org marcado a su sitio de WordPress.


Por desgracia no hay un plugin que pueda implementar este marcado correctamente.

Así que  vamos a hacer lo más fácil para todos. Ahora voy a tratar de orientarle sobre cómo añadir este marcado fácilmente.

Notas importantes antes de editar el Tema
Siempre es mejor hacer una copia de seguridad del tema al principio. Porque hacer algo mal podría hacer que su sitio web inutilizable.
Los siguientes cambios se han hecho en un tema normal, estructurado HTML5. Si su sitio no está estructurado con HTML básico, deberá averiguar el div relacionado con él.


A veces, la parte principal contenido de su plantilla podría ser llamado desde otro archivo PHP. En ese caso, usted debe también comprobar content.php, content-single.php etc...y los archivos de content-page.php y hacer los cambios también.

Hoy en día, el 70% del SEO se puede hacer simplemente con los elementos de la página. No hay nada más seguro que el de optimización de la página. Así que va a ser la mejor opción para agregar marcas schema.org a nuestros sitios wordpress.

En primer lugar, vamos a necesitar el acceso de administrador del panel de WordPress o sesión ftp. Porque vamos a editar los siguientes archivos del tema:

header.php
index.php
single.php
page.php
footer.php
sidebar.php


Edición header.php (Plantilla de Cabecera)




  1. Encontrar:
    <body <?php body_class(); ?>>

    Reemplazar:
    <body <?php body_class(); ?> itemscope="itemscope" itemtype="http://schema.org/WebPage">


  2. Encontrar:
    <header id="masthead" class="site-header" role="banner">

    Reemplazar:
    <header id="masthead" class="site-header" itemscope="itemscope" itemtype="http://schema.org/WPHeader" role="banner">


  3. Encontrar:
    <h1 class="site-title">

    Remplazar:
    <h1 class="site-title" itemprop="headline">


  4. Encontrar:
    <h2 class="site-description">

    Reemplazar:
    <h2 class="site-description" itemprop="description">


  5. Encontrar:
    <nav id="site-navigation" class="main-navigation" role="navigation">

    Reemplazar:
    <nav id="site-navigation" class="main-navigation" itemscope="itemscope" itemtype="http://schema.org/SiteNavigationElement" role="navigation">



Mis trabajos en GitHub

 

GitHub es mucho más que un servicio de alojamiento de código, con herramientas en línea muy útiles para el trabajo en equipo.

Muchas empresas te piden tus trabajos en este servicio para analizar tu nivel, he creado unos repositorios con ejemplos con algunos recursos espero sea útiles.

Ver mis trabajos en GitHub

Crear Botones de ayuda tooltip con CSS.

Una manera es para mostrar el texto de ayuda justo donde se necesita. Sólo con unas pocas reglas CSS y un poco de HTML!


El párrafo se oculta de forma predeterminada y sólo se revela posandose sobre él. Puede contener enlaces, imágenes y otros tipos de HTML. Se revela con una animación CSS lisa, como se puede ver en el ejemplo

Empezamos por el html.
<div id="principal">
<div class="help-tip">
<p>Dentro de este div va el contenido de ayuda..,bla,bla,bla,bla,bla,bla...</p>
</div>
<p> Puede ver la ayuda si se pone sobre el signo ? </p>
</div>

 

Seguimos con el css.
help-tip{
position: absolute;
top: 18px;
right: 18px;
text-align: center;
background-color: #BCDBEA;
border-radius: 50%;
width: 24px;
height: 24px;
font-size: 14px;
line-height: 26px;
cursor: default;
}

.help-tip:before{
content:'?';
font-weight: bold;
color:#fff;
}

.help-tip:hover p{
display:block;
transform-origin: 100% 0%;

-webkit-animation: fadeIn 0.3s ease-in-out;
animation: fadeIn 0.3s ease-in-out;

}

.help-tip p{ /* The tooltip */
display: none;
text-align: left;
background-color: #1E2021;
padding: 20px;
width: 300px;
position: absolute;
border-radius: 3px;
box-shadow: 1px 1px 1px rgba(0, 0, 0, 0.2);
right: -4px;
color: #FFF;
font-size: 13px;
line-height: 1.4;
}

.help-tip p:before{ /* The pointer of the tooltip */
position: absolute;
content: '';
width:0;
height: 0;
border:6px solid transparent;
border-bottom-color:#1E2021;
right:10px;
top:-12px;
}

.help-tip p:after{ /* Prevents the tooltip from being hidden */
width:100%;
height:40px;
content:'';
position: absolute;
top:-40px;
left:0;
}

/* CSS animation */

@-webkit-keyframes fadeIn {
0% {
opacity:0;
transform: scale(0.6);
}

100% {
opacity:100%;
transform: scale(1);
}
}

@keyframes fadeIn {
0% { opacity:0; }
100% { opacity:100%; }
}