osm contact info

¿Quieres patrocinar?

¿Quieres aparecer aquí? Si quieres patrocinar este blog, ponte en contacto conmigo a través de este formulario

OSM Contact Info Widget

Éste plugin de creación propia agrega un widget en el área de administración que te permite añadir tu información de contacto a tus widgets.

screenshot-1

Permite elegir entre 3 tipos diferentes de formatos: texto plano, hCard, o con iconos de Font Awesome. En cualquiera de los tres formatos puedes maquetar el widget para adaptarlo a tu diseño usando las clases que escribe por defecto:

//hCard
<h2 class="widget-title">Contact Information</h2>
<div id="osm-contact-info-widget-wrapper">
  <div id="hcard-Company Name" class="vcard">
    <div class="fn org">
      Company Name
    </div>
    <div class="adr">
      <span class="street-address">Address</span><br />
      <span class="postal-code">Postal Code</span> <span class="locality">City</span>, <span class="region">Province</span> (<span class="country-name">Country</span>)
    </div>
    <a href="mailto:email@email.com" class="email">email@email.com</a>
    <div class="tel">
      <span class="type">work</span>: <span class="value">555 555 555</span>
    </div>
    <div class="tel">
      <span class="type">work</span>: <span class="value">777 777 777</span>
    </div>
    <div class="tel">
      <span class="type">fax</span>: <span class="value">999 999 999</span>
    </div>
  </div><!-- vcard -->
  <p>lorem ipsum dolor sit amet</p>
</div><!-- osm-contact-info-widget-wrapper -->

//Texto plano
<h2 class="widget-title">Contact Information</h2>
<div id="osm-contact-info-widget-wrapper">
  <div class="contactinfo-company">
    Company Name
  </div>
  <div class="contactinfo-address">
    Address<br />
    Postal Code City, Province (Country)
  </div><!-- contactinfo-address -->
  <div class="contactinfo-phones">
    Phone 1: 555 555 555<br />
    Phone 2: 777 777 777<br />
    Fax: 999 999 999<br />
  </div><!-- contactinfo-phones -->
  <div class="contactinfo-email">
    <a href="mailto:email@email.com" class="email">email@email.com</a>
  </div><!-- contactinfo-email -->
  <p class="contactinfo-text">lorem ipsum dolor sit amet</p>
</div><!-- osm-contact-info-widget-wrapper -->

//Font Awesome
<h2 class="widget-title">Contact Information</h2>
<div id="osm-contact-info-widget-wrapper">
  <div class="contactinfo-company">
    <i class="fa fa-list"></i> Company Name
  </div>
  <div class="contactinfo-address">
    <i class="fa fa-map-marker"></i> Address<br />
    Postal Code City, Province (Country)
  </div><!-- contactinfo-address -->
  <div class="contactinfo-phones">
    <i class="fa fa-phone"></i> 555 555 555<br />
    <i class="fa fa-phone"></i> 777 777 777<br />
    <i class="fa fa-fax"></i> 999 999 999<br />
  </div><!-- contactinfo-phones -->
  <div class="contactinfo-email">
    <i class="fa fa-envelope"></i> <a href="mailto:email@email.com">email@email.com</a>
  </div><!-- contactinfo-email -->
  <p class="contactinfo-text">lorem ipsum dolor sit amet</p>
</div><!-- osm-contact-info-widget-wrapper -->

Simplemente dirígete a Plugins => Añadir Nuevo, busca “OSM Contact Info Widget” e instálalo, o si lo prefieres te los puedes descargar pinchando aquí. Una vez instalado, ve a Apariencia => Widgets, selecciona el widget “OSM Contact Info Widget” y arrástralo a tu sidebar.

¿Te ha resultado útil esta información?

Si este post te ha resuelto un problema, invítame a un café o a una cerveza. Con este pequeño gesto me animas a seguir escribiendo.