OSM Contact Info Widget, añade información de contacto en tus widgets

É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.

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? ☕ 🍺

Puede que también te interese